From 2f87ed89494867c41891143a723fe6ae8f00b72e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 29 Sep 2023 09:11:38 +0700
Subject: [PATCH] polish widget code

---
 src/app/users/index.tsx                       |   6 +-
 src/index.css                                 |  58 ++++----
 src/shared/accounts/active.tsx                |   2 -
 src/shared/notes/kinds/article.tsx            |   4 +-
 src/shared/notes/preview/video.tsx            |   3 +
 src/shared/user.tsx                           |   6 +-
 src/shared/userProfile.tsx                    |  70 +++++-----
 src/shared/widgets/global/articles.tsx        |  27 ++--
 src/shared/widgets/global/files.tsx           |  30 ++--
 src/shared/widgets/global/hashtag.tsx         |  29 ++--
 src/shared/widgets/local/articles.tsx         |  23 ++-
 src/shared/widgets/local/feeds.tsx            |  20 ++-
 src/shared/widgets/local/files.tsx            |  23 +--
 src/shared/widgets/local/follows.tsx          |  20 ++-
 src/shared/widgets/local/network.tsx          |   2 +-
 src/shared/widgets/local/thread.tsx           |   1 +
 src/shared/widgets/local/user.tsx             |  20 +--
 .../widgets/nostrBand/trendingAccounts.tsx    |  36 +++--
 .../widgets/nostrBand/trendingNotes.tsx       |  37 +++--
 src/shared/widgets/nostrBandUserProfile.tsx   | 132 +++++++++---------
 src/shared/widgets/tmp/hashtag.tsx            |   2 +-
 src/stores/activities.ts                      |   2 +-
 22 files changed, 293 insertions(+), 260 deletions(-)

diff --git a/src/app/users/index.tsx b/src/app/users/index.tsx
index 12bc7973..5213ed0f 100644
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -2,7 +2,7 @@ import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useParams } from 'react-router-dom';
-import { VList } from 'virtua';
+import { WVList } from 'virtua';
 
 import { UserProfile } from '@app/users/components/profile';
 
@@ -93,10 +93,10 @@ export function UserScreen() {
               </div>
             </div>
           ) : (
-            <VList className="scrollbar-hide h-full">
+            <WVList>
               {data.map((item) => renderItem(item))}
               <div className="h-16" />
-            </VList>
+            </WVList>
           )}
         </div>
       </div>
diff --git a/src/index.css b/src/index.css
index 645cad4a..74909906 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 14px;
+}
+
+a {
+  @apply cursor-default no-underline !important;
+}
+
+button {
+  @apply cursor-default focus:outline-none;
+}
+
+iframe {
+  height: auto !important;
+}
+
+span[data-slate-placeholder] {
+  margin-top: 0;
+}
+
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+
+::-webkit-input-placeholder {
+  line-height: normal;
+}
+
 .border {
   background-clip: padding-box;
 }
@@ -38,32 +67,3 @@
 .ProseMirror img.ProseMirror-selectednode {
   @apply outline-fuchsia-500;
 }
-
-html {
-  font-size: 14px;
-}
-
-a {
-  @apply cursor-default no-underline !important;
-}
-
-button {
-  @apply cursor-default focus:outline-none;
-}
-
-iframe {
-  height: auto !important;
-}
-
-span[data-slate-placeholder] {
-  margin-top: 0;
-}
-
-input::-ms-reveal,
-input::-ms-clear {
-  display: none;
-}
-
-::-webkit-input-placeholder {
-  line-height: normal;
-}
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index 0f0c8249..b84c9b37 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -32,9 +32,7 @@ export function ActiveAccount() {
     sub(
       filter,
       async (event) => {
-        console.log('new notify: ', event);
         addActivity(event);
-
         switch (event.kind) {
           case NDKKind.Text:
             return await sendNativeNotification('Mention');
diff --git a/src/shared/notes/kinds/article.tsx b/src/shared/notes/kinds/article.tsx
index 66bb0441..2f06b781 100644
--- a/src/shared/notes/kinds/article.tsx
+++ b/src/shared/notes/kinds/article.tsx
@@ -14,7 +14,7 @@ export function ArticleNote(props: { event?: NDKEvent }) {
       (tag) => tag[0] === 'published_at'
     )?.[1];
     if (publishedAt) {
-      publishedAt = new Date(parseInt(publishedAt)).toLocaleDateString('en-US');
+      publishedAt = new Date(parseInt(publishedAt) * 1000).toLocaleDateString('en-US');
     } else {
       publishedAt = new Date(props.event.created_at * 1000).toLocaleDateString('en-US');
     }
@@ -29,7 +29,7 @@ export function ArticleNote(props: { event?: NDKEvent }) {
 
   return (
     <Link to={`/notes/article/${props.event.id}`} preventScrollReset={true}>
-      <div className="mb-2 mt-3 flex flex-col rounded-lg">
+      <div className="mb-2 mt-2 flex flex-col rounded-lg">
         {metadata.image && (
           <Image
             src={metadata.image}
diff --git a/src/shared/notes/preview/video.tsx b/src/shared/notes/preview/video.tsx
index 183fa407..b3a505ce 100644
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -17,6 +17,9 @@ export function VideoPreview({ urls }: { urls: string[] }) {
               src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
               alt={url}
               className="aspect-video h-full w-full bg-white object-cover"
+              loading="lazy"
+              decoding="async"
+              style={{ contentVisibility: 'auto' }}
             />
           }
         />
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index eddb77c9..13c1a519 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -56,7 +56,7 @@ export const User = memo(function User({
 
     return (
       <div className="flex items-start gap-3">
-        <div className="h-10 w-10 shrink-0 animate-pulse overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
+        <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
         <div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
       </div>
     );
@@ -150,10 +150,10 @@ export const User = memo(function User({
             loading="lazy"
             decoding="async"
             style={{ contentVisibility: 'auto' }}
-            className="h-12 w-12 rounded-lg"
+            className="h-10 w-10 rounded-lg"
           />
           <Avatar.Fallback delayMs={300}>
-            <img src={svgURI} alt={pubkey} className="h-12 w-12 rounded-lg bg-black" />
+            <img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
           </Avatar.Fallback>
         </Avatar.Root>
         <div className="flex w-full flex-col items-start gap-1">
diff --git a/src/shared/userProfile.tsx b/src/shared/userProfile.tsx
index 7212bba0..c574be03 100644
--- a/src/shared/userProfile.tsx
+++ b/src/shared/userProfile.tsx
@@ -5,7 +5,6 @@ import { UserStats } from '@app/users/components/stats';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { Image } from '@shared/image';
 import { NIP05 } from '@shared/nip05';
 
 import { useNostr } from '@utils/hooks/useNostr';
@@ -49,15 +48,45 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
 
   return (
     <div>
-      <Image
-        src={user?.picture || user?.image}
-        alt={pubkey}
-        className="h-14 w-14 rounded-md"
-      />
+      <div className="flex items-center justify-between">
+        <img
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          className="h-12 w-12 shrink-0 rounded-lg"
+          loading="lazy"
+          decoding="async"
+          style={{ contentVisibility: 'auto' }}
+        />
+        <div className="inline-flex items-center gap-2">
+          {followed ? (
+            <button
+              type="button"
+              onClick={() => unfollowUser(pubkey)}
+              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+            >
+              Unfollow
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => followUser(pubkey)}
+              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+            >
+              Follow
+            </button>
+          )}
+          <Link
+            to={`/chats/${pubkey}`}
+            className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+          >
+            Message
+          </Link>
+        </div>
+      </div>
       <div className="mt-2 flex flex-1 flex-col gap-2">
         <div className="flex flex-col gap-2">
           <h5 className="text-lg font-semibold leading-none">
-            {user?.displayName || user?.name || 'No name'}
+            {user?.name || user?.display_name || user?.displayName || 'Anon'}
           </h5>
           {user?.nip05 ? (
             <NIP05
@@ -72,36 +101,11 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
           )}
         </div>
         <div className="flex flex-col gap-4">
-          <p className="mt-2 max-w-[500px] select-text break-words text-white">
+          <p className="mb-3 mt-2 max-w-[500px] select-text break-words text-sm text-white">
             {user?.about}
           </p>
           <UserStats pubkey={pubkey} />
         </div>
-        <div className="mt-4 inline-flex items-center gap-2">
-          {followed ? (
-            <button
-              type="button"
-              onClick={() => unfollowUser(pubkey)}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
-            >
-              Unfollow
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={() => followUser(pubkey)}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
-            >
-              Follow
-            </button>
-          )}
-          <Link
-            to={`/chats/${pubkey}`}
-            className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
-          >
-            Message
-          </Link>
-        </div>
       </div>
     </div>
   );
diff --git a/src/shared/widgets/global/articles.tsx b/src/shared/widgets/global/articles.tsx
index a303e818..d7fbc3b1 100644
--- 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>
diff --git a/src/shared/widgets/global/files.tsx b/src/shared/widgets/global/files.tsx
index f6ce8c91..554fd13e 100644
--- 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>
diff --git a/src/shared/widgets/global/hashtag.tsx b/src/shared/widgets/global/hashtag.tsx
index 60e828de..d2dc6d30 100644
--- 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>
         )}
diff --git a/src/shared/widgets/local/articles.tsx b/src/shared/widgets/local/articles.tsx
index 035112bc..0e4e798d 100644
--- 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>
diff --git a/src/shared/widgets/local/feeds.tsx b/src/shared/widgets/local/feeds.tsx
index 5f0afa2e..5b418238 100644
--- 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>
diff --git a/src/shared/widgets/local/files.tsx b/src/shared/widgets/local/files.tsx
index 3282e753..ad8c5b22 100644
--- 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>
diff --git a/src/shared/widgets/local/follows.tsx b/src/shared/widgets/local/follows.tsx
index 4f56762e..c1f2c60a 100644
--- 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>
diff --git a/src/shared/widgets/local/network.tsx b/src/shared/widgets/local/network.tsx
index b26fb12a..91773f73 100644
--- 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">
diff --git a/src/shared/widgets/local/thread.tsx b/src/shared/widgets/local/thread.tsx
index a6c959d7..21e2e489 100644
--- 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>
   );
diff --git a/src/shared/widgets/local/user.tsx b/src/shared/widgets/local/user.tsx
index 682339be..79f1c813 100644
--- 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>
diff --git a/src/shared/widgets/nostrBand/trendingAccounts.tsx b/src/shared/widgets/nostrBand/trendingAccounts.tsx
index 6dfa8358..7d1eff00 100644
--- 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>
diff --git a/src/shared/widgets/nostrBand/trendingNotes.tsx b/src/shared/widgets/nostrBand/trendingNotes.tsx
index 5056e9e9..80ff21e0 100644
--- 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>
diff --git a/src/shared/widgets/nostrBandUserProfile.tsx b/src/shared/widgets/nostrBandUserProfile.tsx
index 2c36a4f5..b583b8bf 100644
--- 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>
   );
 }
diff --git a/src/shared/widgets/tmp/hashtag.tsx b/src/shared/widgets/tmp/hashtag.tsx
index 76393c4c..5ee3eb2a 100644
--- 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
diff --git a/src/stores/activities.ts b/src/stores/activities.ts
index a5a3b9cb..21a1b0f7 100644
--- a/src/stores/activities.ts
+++ b/src/stores/activities.ts
@@ -22,7 +22,7 @@ export const useActivities = create<ActivitiesState>((set) => ({
   addActivity: (event: NDKEvent) => {
     set((state) => ({
       activities: state.activities ? [event, ...state.activities] : [event],
-      totalNewActivities: (state.totalNewActivities += 1),
+      totalNewActivities: state.totalNewActivities++,
     }));
   },
   clearTotalNewActivities: () => {