reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish

Browse Source
This commit is contained in:
reya
2023-11-12 15:43:14 +07:00
parent a3632571ff
commit 0a5076f06c
27 changed files with 91 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/notes/preview/image.tsx
View File

@@ -40,7 +40,7 @@ export function ImagePreview({ url }: { url: string }) {
decoding="async"
style={{ contentVisibility: 'auto' }}
onError={fallback}
className="h-auto w-full rounded-lg border border-neutral-300/50 object-cover dark:border-neutral-700/50"
className="h-auto w-full rounded-lg border border-neutral-200/50 object-cover dark:border-neutral-800/50"
/>
<button
type="button"

6
src/shared/user.tsx
View File

@@ -150,7 +150,7 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
className="h-14 w-14 rounded-lg"
className="h-14 w-14 rounded-lg object-cover"
/>
<Avatar.Fallback delayMs={300}>
<img
@@ -475,8 +475,8 @@ export const User = memo(function User({
if (status === 'pending') {
return (
<div className="flex items-start gap-3">
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
<div className="flex items-center gap-3 px-3">
<div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
<div className="h-6 flex-1">
<div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
</div>

2
src/shared/widgets/article.tsx
View File

@@ -21,7 +21,7 @@ export function ArticleWidget({ widget }: { widget: Widget }) {
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['widget-article'],
queryKey: ['article', widget.id],
initialPageParam: 0,
queryFn: async ({
signal,

2
src/shared/widgets/file.tsx
View File

@@ -21,7 +21,7 @@ export function FileWidget({ widget }: { widget: Widget }) {
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['widget-media'],
queryKey: ['media', widget.id],
initialPageParam: 0,
queryFn: async ({
signal,

2
src/shared/widgets/group.tsx
View File

@@ -23,7 +23,7 @@ export function GroupWidget({ widget }: { widget: Widget }) {
const { relayUrls, ndk, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: [`widget-${widget.id}`],
queryKey: ['groupfeeds', widget.id],
initialPageParam: 0,
queryFn: async ({
signal,

2
src/shared/widgets/hashtag.tsx
View File

@@ -18,7 +18,7 @@ export function HashtagWidget({ widget }: { widget: Widget }) {
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: [`widget-${widget.content}`],
queryKey: ['hashtag', widget.id],
initialPageParam: 0,
queryFn: async ({
signal,

2
src/shared/widgets/nostrBand/trendingAccounts.tsx
View File

@@ -17,7 +17,7 @@ interface Response {
export function TrendingAccountsWidget({ widget }: { widget: Widget }) {
const { status, data } = useQuery({
queryKey: ['trending-profiles-widget'],
queryKey: ['trending-users'],
queryFn: async () => {
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
if (!res.ok) {

2
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@@ -15,7 +15,7 @@ interface Response {
export function TrendingNotesWidget({ widget }: { widget: Widget }) {
const { status, data } = useQuery({
queryKey: ['widget-' + widget.id],
queryKey: ['trending-posts'],
queryFn: async () => {
const res = await fetch('https://api.nostr.band/v0/trending/notes');
if (!res.ok) {

6
src/shared/widgets/notification.tsx
View File

@@ -148,9 +148,9 @@ export function NotificationWidget() {
</div>
</div>
) : allEvents.length < 1 ? (
<div className="flex h-full w-full flex-col items-center justify-center">
<p className="mb-1 text-4xl">🎉</p>
<p className="text-center font-medium text-neutral-600 dark:text-neutral-400">
<div className="flex h-[400px] w-full flex-col items-center justify-center">
<p className="mb-2 text-4xl">🎉</p>
<p className="text-center font-medium text-neutral-900 dark:text-neutral-100">
Hmm! Nothing new yet.
</p>
</div>

5
src/shared/widgets/other/toggleWidgetList.tsx
View File

@@ -16,10 +16,9 @@ export function ToggleWidgetList() {
onClick={() =>
addWidget.mutate({ kind: WIDGET_KIND.list, title: '', content: '' })
}
className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-100 px-3 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-neutral-100 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
<PlusIcon className="h-4 w-4 text-neutral-900 dark:text-zinc-100" />
<p className="text-sm font-semibold leading-none">Add widget</p>
<PlusIcon className="h-5 w-5" />
</button>
</div>
</WidgetWrapper>

96
src/shared/widgets/tmp/feeds.tsx
View File

@@ -1,96 +0,0 @@
import { useState } from 'react';
import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, CancelIcon, CheckCircleIcon } from '@shared/icons';
import { User } from '@shared/user';
import { WidgetWrapper } from '@shared/widgets';
import { WIDGET_KIND } from '@stores/constants';
import { useWidget } from '@utils/hooks/useWidget';
import { Widget } from '@utils/types';
export function XfeedsWidget({ params }: { params: Widget }) {
const { db } = useStorage();
const { addWidget, removeWidget } = useWidget();
const [title, setTitle] = useState<string>('');
const [groups, setGroups] = useState<Array<string>>([]);
// toggle follow state
const toggleGroup = (pubkey: string) => {
const arr = groups.includes(pubkey)
? groups.filter((i) => i !== pubkey)
: [...groups, pubkey];
setGroups(arr);
};
const submit = async () => {
addWidget.mutate({
kind: WIDGET_KIND.group,
title: title || 'Group',
content: JSON.stringify(groups),
});
// remove temp widget
removeWidget.mutate(params.id);
};
return (
<WidgetWrapper>
<div className="flex h-11 shrink-0 items-center justify-between px-3">
<div className="w-6 shrink-0" />
<h3 className="text-center font-semibold text-neutral-900 dark:text-neutral-100">
Adding group feeds
</h3>
<button
type="button"
onClick={() => removeWidget.mutate(params.id)}
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
>
<CancelIcon className="h-3 w-3" />
</button>
</div>
<div className="flex flex-1 flex-col justify-between">
<div className="flex min-h-0 flex-1 flex-col gap-2 px-3 pb-3">
<input
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Group name"
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
<div className="flex-grow-1 flex flex-1 shrink basis-0 flex-col overflow-y-auto rounded-xl bg-neutral-50 dark:bg-neutral-950">
<div className="flex h-10 shrink-0 items-center border-b border-neutral-100 px-4 text-sm font-semibold dark:border-neutral-900">
Add users {title ? 'to ' + title : ''}
</div>
{db.account.circles.map((item: string) => (
<button
key={item}
type="button"
onClick={() => toggleGroup(item)}
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900"
>
<User pubkey={item} variant="simple" />
{groups.includes(item) ? (
<CheckCircleIcon className="h-5 w-5 text-teal-500" />
) : null}
</button>
))}
</div>
</div>
<div className="flex h-14 shrink-0 gap-2 border-t border-neutral-100 px-3 pt-2.5 dark:border-neutral-900">
<button
type="submit"
disabled={groups.length < 1}
onClick={submit}
className="inline-flex h-9 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Add {groups.length} user to group feed</span>
<ArrowRightCircleIcon className="h-5 w-5" />
</button>
</div>
</div>
</WidgetWrapper>
);
}

110
src/shared/widgets/tmp/hashtag.tsx
View File

@@ -1,110 +0,0 @@
import { Resolver, useForm } from 'react-hook-form';
import { ArrowRightCircleIcon, CancelIcon } from '@shared/icons';
import { WidgetWrapper } from '@shared/widgets';
import { HASHTAGS, WIDGET_KIND } from '@stores/constants';
import { useWidget } from '@utils/hooks/useWidget';
import { Widget } from '@utils/types';
type FormValues = {
hashtag: string;
};
const resolver: Resolver<FormValues> = async (values) => {
return {
values: values.hashtag ? values : {},
errors: !values.hashtag
? {
hashtag: {
type: 'required',
message: 'This is required.',
},
}
: {},
};
};
export function XhashtagWidget({ params }: { params: Widget }) {
const { addWidget, removeWidget } = useWidget();
const {
register,
setValue,
setError,
handleSubmit,
formState: { errors, isDirty, isValid },
} = useForm<FormValues>({ resolver });
const onSubmit = async (data: FormValues) => {
try {
addWidget.mutate({
kind: WIDGET_KIND.hashtag,
title: data.hashtag,
content: data.hashtag.replace('#', ''),
});
// remove temp widget
removeWidget.mutate(params.id);
} catch (e) {
setError('hashtag', {
type: 'custom',
message: e,
});
}
};
return (
<WidgetWrapper>
<div className="flex h-11 shrink-0 items-center justify-between px-3">
<div className="w-6 shrink-0" />
<h3 className="text-center font-semibold text-neutral-900 dark:text-neutral-100">
Adding hashtag feeds
</h3>
<button
type="button"
onClick={() => removeWidget.mutate(params.id)}
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
>
<CancelIcon className="h-3 w-3" />
</button>
</div>
<div className="flex flex-1 flex-col px-3">
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-2">
<div className="flex flex-col gap-1">
<input
{...register('hashtag', { required: true, minLength: 1 })}
placeholder="Enter a hashtag"
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
<span className="text-sm text-red-400">
{errors.hashtag && <p>{errors.hashtag.message}</p>}
</span>
</div>
<div className="flex flex-wrap items-center justify-start gap-2">
{HASHTAGS.map((item) => (
<button
key={item.hashtag}
type="button"
onClick={() => setValue('hashtag', item.hashtag)}
className="inline-flex h-6 w-min items-center justify-center rounded-md bg-neutral-100 px-2 text-sm hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
{item.hashtag}
</button>
))}
</div>
<div className="mt-2 flex flex-col items-center justify-center gap-2">
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-9 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Add</span>
<ArrowRightCircleIcon className="h-5 w-5" />
</button>
</div>
</form>
</div>
</WidgetWrapper>
);
}

2
src/shared/widgets/topic.tsx
View File

@@ -24,7 +24,7 @@ export function TopicWidget({ widget }: { widget: Widget }) {
const { relayUrls, ndk, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['widget-' + widget.id],
queryKey: ['topic', widget.id],
initialPageParam: 0,
queryFn: async ({
signal,

2
src/shared/widgets/user.tsx
View File

@@ -21,7 +21,7 @@ import { Widget } from '@utils/types';
export function UserWidget({ widget }: { widget: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery({
queryKey: ['widget-' + widget.id],
queryKey: ['user-posts', widget.id],
queryFn: async () => {
const rootIds = new Set();
const dedupQueue = new Set();