update trending screen and add tauri shell plugin

src/app/trending/components/profile.tsx

@@ -11,14 +11,23 @@ import { compactNumber } from '@utils/number';
 import { shortenKey } from '@utils/shortenKey';
 
 export function Profile({ data }: { data: any }) {
-  const { status, data: userStats } = useQuery(['user-stats', data.pubkey], async () => {
-    const res = await fetch(`https://api.nostr.band/v0/stats/profile/${data.pubkey}`);
-    return res.json();
-  });
+  const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
+  const { status, data: userStats } = useQuery(
+    ['user-stats', data.pubkey],
+    async () => {
+      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${data.pubkey}`);
+      return res.json();
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    }
+  );
 
   const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
   const profile = embedProfile;
-  const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
 
   const [followed, setFollowed] = useState(false);
 
@@ -50,12 +59,13 @@ export function Profile({ data }: { data: any }) {
     }
   }, [status]);
 
-  if (!profile)
+  if (!profile) {
     return (
-      <div className="rounded-md bg-zinc-900 px-5 py-5">
+      <div className="rounded-xl bg-white/10 px-5 py-5">
         <p>Can&apos;t fetch profile</p>
       </div>
     );
+  }
 
   return (
     <div className="rounded-xl bg-white/10 px-5 py-5">

src/app/trending/components/trendingNotes.tsx

@@ -1,17 +1,36 @@
 import { useQuery } from '@tanstack/react-query';
+import { fetch } from '@tauri-apps/plugin-http';
 
 import { NoteKind_1 } from '@shared/notes';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
+import { LumeEvent } from '@utils/types';
+
+interface Response {
+  ok: boolean;
+  data: {
+    notes: Array<{ event: LumeEvent }>;
+  };
+}
+
 export function TrendingNotes() {
-  const { status, data, error } = useQuery(['trending-notes'], async () => {
-    const res = await fetch('https://api.nostr.band/v0/trending/notes');
-    if (!res.ok) {
-      throw new Error('Error');
+  const { status, data, error } = useQuery(
+    ['trending-notes'],
+    async () => {
+      const res: Response = await fetch('https://api.nostr.band/v0/trending/notes');
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      return res.data?.notes;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
     }
-    return res.json();
-  });
+  );
 
   return (
     <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
@@ -20,14 +39,14 @@ export function TrendingNotes() {
         {error && <p>Failed to fetch</p>}
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="shadow-input rounded-md px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>
         ) : (
           <div className="relative flex w-full flex-col">
-            {data.notes.map((item) => (
-              <NoteKind_1 key={item.id} event={item.event} skipMetadata={true} />
+            {data.map((item) => (
+              <NoteKind_1 key={item.event.id} event={item.event} skipMetadata={true} />
             ))}
           </div>
         )}

src/app/trending/components/trendingProfiles.tsx

@@ -1,18 +1,35 @@
 import { useQuery } from '@tanstack/react-query';
+import { fetch } from '@tauri-apps/plugin-http';
 
 import { Profile } from '@app/trending/components/profile';
 
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
+interface Response {
+  ok: boolean;
+  data: {
+    profiles: Array<{ pubkey: string }>;
+  };
+}
+
 export function TrendingProfiles() {
-  const { status, data, error } = useQuery(['trending-profiles'], async () => {
-    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
-    if (!res.ok) {
-      throw new Error('Error');
+  const { status, data, error } = useQuery(
+    ['trending-profiles'],
+    async () => {
+      const res: Response = await fetch('https://api.nostr.band/v0/trending/profiles');
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      return res.data?.profiles;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
     }
-    return res.json();
-  });
+  );
 
   return (
     <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
@@ -21,13 +38,13 @@ export function TrendingProfiles() {
         {error && <p>Failed to fetch</p>}
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>
         ) : (
           <div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
-            {data.profiles.map((item) => (
+            {data.map((item) => (
               <Profile key={item.pubkey} data={item} />
             ))}
           </div>

src/shared/accounts/active.tsx

@@ -88,7 +88,7 @@ export function ActiveAccount({ data }: { data: { pubkey: string; npub: string }
   }, []);
 
   if (status === 'loading') {
-    return <div className="h-9 w-9 animate-pulse rounded-md bg-zinc-800" />;
+    return <div className="h-9 w-9 animate-pulse rounded-md bg-white/50" />;
   }
 
   return (

src/shared/appLayout.tsx

@@ -1,7 +1,10 @@
+import { LogicalSize, appWindow } from '@tauri-apps/plugin-window';
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 
 import { Navigation } from '@shared/navigation';
 
+await appWindow.setSize(new LogicalSize(1080, 800));
+
 export function AppLayout() {
   return (
     <div className="flex h-screen w-screen">

src/shared/notes/metadata.tsx

@@ -66,10 +66,13 @@ export function NoteMetadata({ id }: { id: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="mb-3 flex items-center gap-3">
-        <div className="mt-2h-6 w-11 shrink-0"></div>
-        <div className="mt-2 inline-flex h-6 items-center">
-          <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+      <div>
+        <div className="absolute left-[18px] top-14 h-[calc(100%-6.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+        <div className="relative z-10 flex items-center gap-3 pb-3">
+          <div className="mt-2 h-6 w-11 shrink-0"></div>
+          <div className="mt-2 inline-flex h-6">
+            <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+          </div>
         </div>
       </div>
     );