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>