polish widget code

2023-09-29 09:11:38 +07:00
parent cb3c95b133
commit 2f87ed8949
22 changed files with 293 additions and 260 deletions
--- a/src/shared/widgets/global/articles.tsx
+++ b/src/shared/widgets/global/articles.tsx
@@ -5,7 +5,8 @@ import { VList } from 'virtua';

 import { useNDK } from '@libs/ndk/provider';

-import { ArticleNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { LoaderIcon } from '@shared/icons';
+import { ArticleNote, NoteWrapper } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

@@ -14,13 +15,14 @@ import { Widget } from '@utils/types';
 export function GlobalArticlesWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
  const { status, data } = useQuery(
-    [params.id + '-' + params.title],
+    ['global-articles'],
    async () => {
      const events = await ndk.fetchEvents({
        kinds: [NDKKind.Article],
-        limit: 100,
+        limit: 200,
      });
-      return [...events] as unknown as NDKEvent[];
+      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
+      return sortedEvents;
    },
    { refetchOnWindowFocus: false }
  );
@@ -40,11 +42,12 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">Loading article...</p>
            </div>
          </div>
        ) : data.length === 0 ? (
@@ -52,12 +55,10 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no articles.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
+                <p className="text-white/50">You can close this widget</p>
              </div>
            </div>
          </div>
--- a/src/shared/widgets/global/files.tsx
+++ b/src/shared/widgets/global/files.tsx
@@ -5,23 +5,26 @@ import { VList } from 'virtua';

 import { useNDK } from '@libs/ndk/provider';

-import { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { LoaderIcon } from '@shared/icons';
+import { FileNote, NoteWrapper } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

+import { nHoursAgo } from '@utils/date';
 import { Widget } from '@utils/types';

 export function GlobalFilesWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
  const { status, data } = useQuery(
-    [params.id + '-' + params.title],
+    ['global-file-sharing'],
    async () => {
      const events = await ndk.fetchEvents({
        // @ts-expect-error, NDK not support file metadata yet
        kinds: [1063],
-        limit: 100,
+        since: nHoursAgo(24),
      });
-      return [...events] as unknown as NDKEvent[];
+      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
+      return sortedEvents;
    },
    { refetchOnWindowFocus: false }
  );
@@ -41,11 +44,14 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">
+                Loading file sharing event...
+              </p>
            </div>
          </div>
        ) : data.length === 0 ? (
@@ -53,12 +59,10 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no file sharing events.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
+                <p className="text-white/50">You can close this widget</p>
              </div>
            </div>
          </div>
--- a/src/shared/widgets/global/hashtag.tsx
+++ b/src/shared/widgets/global/hashtag.tsx
@@ -5,10 +5,10 @@ import { VList } from 'virtua';

 import { useNDK } from '@libs/ndk/provider';

+import { LoaderIcon } from '@shared/icons';
 import {
  ArticleNote,
  FileNote,
-  NoteSkeleton,
  NoteWrapper,
  Repost,
  TextNote,
@@ -23,14 +23,15 @@ import { Widget } from '@utils/types';
 export function GlobalHashtagWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
  const { status, data } = useQuery(
-    [params.id + '-' + params.title],
+    ['hashtag-' + params.title],
    async () => {
      const events = await ndk.fetchEvents({
        kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
        '#t': [params.content],
        since: nHoursAgo(24),
      });
-      return [...events] as unknown as NDKEvent[];
+      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
+      return sortedEvents;
    },
    { refetchOnWindowFocus: false }
  );
@@ -72,12 +73,15 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {

  return (
    <WidgetWrapper>
-      <TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
-      <div className="h-full">
+      <TitleBar id={params.id} title={params.title} />
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">
+                Loading event related to the hashtag {params.title}...
+              </p>
            </div>
          </div>
        ) : data.length === 0 ? (
@@ -85,11 +89,11 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no events related to {params.title}.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
+                <p className="text-white/50">
+                  You can close this widget or try with other hashtag
                </p>
              </div>
            </div>
@@ -97,7 +101,6 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
        ) : (
          <VList className="scrollbar-hide h-full">
            {data.map((item) => renderItem(item))}
-
            <div className="h-16" />
          </VList>
        )}
--- a/src/shared/widgets/local/articles.tsx
+++ b/src/shared/widgets/local/articles.tsx
@@ -6,7 +6,7 @@ import { VList } from 'virtua';
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
-import { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { ArticleNote, NoteWrapper } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

@@ -16,7 +16,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
  const { db } = useStorage();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: [params.id + '-' + params.title],
+      queryKey: ['local-articles'],
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEventsByKinds([NDKKind.Article], 20, pageParam);
      },
@@ -34,7 +34,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
      const event: NDKEvent = JSON.parse(dbEvent.event as string);
      return (
        <NoteWrapper key={event.id} event={event}>
-          <FileNote />
+          <ArticleNote />
        </NoteWrapper>
      );
    },
@@ -44,11 +44,12 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">Loading article...</p>
            </div>
          </div>
        ) : dbEvents.length === 0 ? (
@@ -56,12 +57,10 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no articles.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
+                <p className="text-white/50">You can close this widget</p>
              </div>
            </div>
          </div>
--- a/src/shared/widgets/local/feeds.tsx
+++ b/src/shared/widgets/local/feeds.tsx
@@ -14,7 +14,6 @@ import {
  TextNote,
  UnknownNote,
 } from '@shared/notes';
-import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

@@ -24,7 +23,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
  const { db } = useStorage();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: [params.id + '-' + params.title],
+      queryKey: ['group-feeds-' + params.id],
      queryFn: async ({ pageParam = 0 }) => {
        const authors = JSON.parse(params.content);
        return await db.getAllEventsByAuthors(authors, 20, pageParam);
@@ -81,11 +80,12 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
            </div>
          </div>
        ) : dbEvents.length === 0 ? (
@@ -93,12 +93,10 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no posts.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
+                <p className="text-white/50">You can close this widget</p>
              </div>
            </div>
          </div>
--- a/src/shared/widgets/local/files.tsx
+++ b/src/shared/widgets/local/files.tsx
@@ -6,7 +6,7 @@ import { VList } from 'virtua';
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
-import { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
+import { FileNote, NoteWrapper } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

@@ -16,7 +16,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
  const { db } = useStorage();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: [params.id + '-' + params.title],
+      queryKey: ['local-file-sharing'],
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEventsByKinds([1063], 20, pageParam);
      },
@@ -44,11 +44,14 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">
+                Loading file sharing event...
+              </p>
            </div>
          </div>
        ) : dbEvents.length === 0 ? (
@@ -56,12 +59,10 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no file sharing events.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
+                <p className="text-white/50">You can close this widget</p>
              </div>
            </div>
          </div>
--- a/src/shared/widgets/local/follows.tsx
+++ b/src/shared/widgets/local/follows.tsx
@@ -14,7 +14,6 @@ import {
  TextNote,
  UnknownNote,
 } from '@shared/notes';
-import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

@@ -24,7 +23,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
  const { db } = useStorage();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: [params.id + '-' + params.title],
+      queryKey: ['follows-' + params.title],
      queryFn: async ({ pageParam = 0 }) => {
        return await db.getAllEventsByAuthors(db.account.follows, 20, pageParam);
      },
@@ -80,11 +79,12 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title="Follows" />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">Loading post...</p>
            </div>
          </div>
        ) : dbEvents.length === 0 ? (
@@ -92,12 +92,10 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
            <div className="flex flex-col items-center gap-4">
              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
+                <h3 className="font-semibold leading-tight">
+                  Oops, it looks like there are no posts.
                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
+                <p className="text-white/50">You can close this widget</p>
              </div>
            </div>
          </div>
--- a/src/shared/widgets/local/network.tsx
+++ b/src/shared/widgets/local/network.tsx
@@ -103,7 +103,7 @@ export function LocalNetworkWidget() {
  return (
    <WidgetWrapper>
      <TitleBar title="Network" />
-      <div className="h-full">
+      <div className="flex-1">
        {status === 'loading' ? (
          <div className="px-3 py-1.5">
            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
--- a/src/shared/widgets/local/thread.tsx
+++ b/src/shared/widgets/local/thread.tsx
@@ -69,6 +69,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
          <NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
          <RepliesList id={params.content} />
        </div>
+        <div className="h-16" />
      </div>
    </WidgetWrapper>
  );
--- a/src/shared/widgets/local/user.tsx
+++ b/src/shared/widgets/local/user.tsx
@@ -1,7 +1,7 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { VList } from 'virtua';
+import { WVList } from 'virtua';

 import { useNDK } from '@libs/ndk/provider';

@@ -24,14 +24,16 @@ import { Widget } from '@utils/types';
 export function LocalUserWidget({ params }: { params: Widget }) {
  const { ndk } = useNDK();
  const { status, data } = useQuery(
-    [params.id + '-' + params.title],
+    ['user-posts', params.content],
    async () => {
      const events = await ndk.fetchEvents({
-        kinds: [1, 6],
+        // @ts-expect-error, NDK not support file metadata yet
+        kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
        authors: [params.content],
        since: nHoursAgo(24),
      });
-      return [...events] as unknown as NDKEvent[];
+      const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
+      return sortedEvents;
    },
    {
      staleTime: Infinity,
@@ -84,7 +86,9 @@ export function LocalUserWidget({ params }: { params: Widget }) {
          <UserProfile pubkey={params.content} />
        </div>
        <div>
-          <h3 className="mt-4 px-3 text-lg font-semibold text-white">Latest posts</h3>
+          <h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-white">
+            Latest posts
+          </h3>
          <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
            {status === 'loading' ? (
              <div className="px-3 py-1.5">
@@ -97,16 +101,16 @@ export function LocalUserWidget({ params }: { params: Widget }) {
                <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
                  <div className="flex flex-col items-center gap-4">
                    <p className="text-center text-sm text-white">
-                      No new post from user in 24 hours ago
+                      No new post from 24 hours ago
                    </p>
                  </div>
                </div>
              </div>
            ) : (
-              <VList className="scrollbar-hide h-full">
+              <WVList>
                {data.map((item) => renderItem(item))}
                <div className="h-16" />
-              </VList>
+              </WVList>
            )}
          </div>
        </div>
--- a/src/shared/widgets/nostrBand/trendingAccounts.tsx
+++ b/src/shared/widgets/nostrBand/trendingAccounts.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
+import { VList } from 'virtua';

-import { NoteSkeleton } from '@shared/notes/skeleton';
+import { LoaderIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 import { NostrBandUserProfile, type Profile } from '@shared/widgets/nostrBandUserProfile';
@@ -34,27 +35,34 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title="Trending Accounts" />
-      <div className="scrollbar-hide h-full max-w-full overflow-y-auto pb-20">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
-            </div>
-          </div>
-        ) : status === 'error' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <p className="text-center text-sm font-medium text-white">
-                Sorry, an unexpected error has occurred.
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">
+                Loading trending accounts...
              </p>
            </div>
          </div>
+        ) : status === 'error' ? (
+          <div className="flex h-full w-full flex-col items-center justify-center px-3">
+            <div className="flex flex-col items-center gap-4">
+              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
+              <div className="text-center">
+                <h3 className="font-semibold leading-tight">
+                  Sorry, an unexpected error has occurred.
+                </h3>
+              </div>
+            </div>
+          </div>
        ) : (
-          <div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
+          <VList className="scrollbar-hide h-full">
            {data.map((item: Profile) => (
              <NostrBandUserProfile key={item.pubkey} data={item} />
            ))}
-          </div>
+            <div className="h-16" />
+          </VList>
        )}
      </div>
    </WidgetWrapper>
--- a/src/shared/widgets/nostrBand/trendingNotes.tsx
+++ b/src/shared/widgets/nostrBand/trendingNotes.tsx
@@ -1,7 +1,9 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
+import { VList } from 'virtua';

-import { NoteSkeleton, NoteWrapper, TextNote } from '@shared/notes';
+import { LoaderIcon } from '@shared/icons';
+import { NoteWrapper, TextNote } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';

@@ -34,29 +36,36 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
  return (
    <WidgetWrapper>
      <TitleBar id={params.id} title="Trending Notes" />
-      <div className="scrollbar-hide h-full max-w-full overflow-y-auto pb-20">
+      <div className="flex-1">
        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
-            </div>
-          </div>
-        ) : status === 'error' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <p className="text-center text-sm font-medium text-white">
-                Sorry, an unexpected error has occurred.
+          <div className="flex h-full w-full items-center justify-center ">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">
+                Loading trending posts...
              </p>
            </div>
          </div>
+        ) : status === 'error' ? (
+          <div className="flex h-full w-full flex-col items-center justify-center px-3">
+            <div className="flex flex-col items-center gap-4">
+              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
+              <div className="text-center">
+                <h3 className="font-semibold leading-tight">
+                  Sorry, an unexpected error has occurred.
+                </h3>
+              </div>
+            </div>
+          </div>
        ) : (
-          <div className="relative flex w-full flex-col">
+          <VList className="scrollbar-hide h-full">
            {data.map((item) => (
              <NoteWrapper key={item.event.id} event={item.event}>
                <TextNote content={item.event.content} />
              </NoteWrapper>
            ))}
-          </div>
+            <div className="h-16" />
+          </VList>
        )}
      </div>
    </WidgetWrapper>
--- a/src/shared/widgets/nostrBandUserProfile.tsx
+++ b/src/shared/widgets/nostrBandUserProfile.tsx
@@ -72,77 +72,79 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
  }

  return (
-    <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
-      <div className="flex items-center justify-between">
-        <div className="inline-flex items-center gap-2">
-          <Image
-            src={profile.picture}
-            className="h-11 w-11 shrink-0 rounded-lg object-cover"
-          />
-          <div className="inline-flex flex-col gap-1">
-            <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
-              {profile.display_name || profile.name}
-            </h3>
-            <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
-              {profile.nip05 || shortenKey(data.pubkey)}
-            </p>
+    <div className="h-min w-full px-3 pb-3">
+      <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
+        <div className="flex items-center justify-between">
+          <div className="inline-flex items-center gap-2">
+            <Image
+              src={profile.picture}
+              className="h-11 w-11 shrink-0 rounded-lg object-cover"
+            />
+            <div className="inline-flex flex-col gap-1">
+              <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+                {profile.display_name || profile.name}
+              </h3>
+              <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
+                {profile.nip05 || shortenKey(data.pubkey)}
+              </p>
+            </div>
+          </div>
+          <div className="inline-flex items-center gap-2">
+            {followed ? (
+              <button
+                type="button"
+                onClick={() => unfollowUser(data.pubkey)}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+              >
+                <UnfollowIcon className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => followUser(data.pubkey)}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+              >
+                <FollowIcon className="h-4 w-4" />
+              </button>
+            )}
          </div>
        </div>
-        <div className="inline-flex items-center gap-2">
-          {followed ? (
-            <button
-              type="button"
-              onClick={() => unfollowUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
-            >
-              <UnfollowIcon className="h-4 w-4" />
-            </button>
+        <div className="mt-2">
+          <p className="whitespace-pre-line break-words text-white">
+            {profile.about || profile.bio}
+          </p>
+        </div>
+        <div className="mt-8">
+          {status === 'loading' ? (
+            <p>Loading...</p>
          ) : (
-            <button
-              type="button"
-              onClick={() => followUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
-            >
-              <FollowIcon className="h-4 w-4" />
-            </button>
+            <div className="flex w-full items-center gap-8">
+              <div className="inline-flex flex-col gap-1">
+                <span className="font-semibold leading-none text-white">
+                  {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
+                </span>
+                <span className="text-sm leading-none text-white/50">Followers</span>
+              </div>
+              <div className="inline-flex flex-col gap-1">
+                <span className="font-semibold leading-none text-white">
+                  {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
+                </span>
+                <span className="text-sm leading-none text-white/50">Following</span>
+              </div>
+              <div className="inline-flex flex-col gap-1">
+                <span className="font-semibold leading-none text-white">
+                  {userStats.stats[data.pubkey].zaps_received
+                    ? compactNumber.format(
+                        userStats.stats[data.pubkey].zaps_received.msats / 1000
+                      )
+                    : 0}
+                </span>
+                <span className="text-sm leading-none text-white/50">Zaps received</span>
+              </div>
+            </div>
          )}
        </div>
      </div>
-      <div className="mt-2">
-        <p className="whitespace-pre-line break-words text-white">
-          {profile.about || profile.bio}
-        </p>
-      </div>
-      <div className="mt-8">
-        {status === 'loading' ? (
-          <p>Loading...</p>
-        ) : (
-          <div className="flex w-full items-center gap-8">
-            <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-white">
-                {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
-              </span>
-              <span className="text-sm leading-none text-white/50">Followers</span>
-            </div>
-            <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-white">
-                {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
-              </span>
-              <span className="text-sm leading-none text-white/50">Following</span>
-            </div>
-            <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-white">
-                {userStats.stats[data.pubkey].zaps_received
-                  ? compactNumber.format(
-                      userStats.stats[data.pubkey].zaps_received.msats / 1000
-                    )
-                  : 0}
-              </span>
-              <span className="text-sm leading-none text-white/50">Zaps received</span>
-            </div>
-          </div>
-        )}
-      </div>
    </div>
  );
 }
--- a/src/shared/widgets/tmp/hashtag.tsx
+++ b/src/shared/widgets/tmp/hashtag.tsx
@@ -48,7 +48,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
    try {
      setWidget(db, {
        kind: WidgetKinds.global.hashtag,
-        title: data.hashtag + ' in 24 hours ago',
+        title: data.hashtag,
        content: data.hashtag.replace('#', ''),
      });
      // remove temp widget