polish

src/app/space/components/userProfile.tsx

@@ -0,0 +1,154 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { FollowIcon, LoaderIcon, UnfollowIcon } from '@shared/icons';
+import { Image } from '@shared/image';
+
+import { useSocial } from '@utils/hooks/useSocial';
+import { compactNumber } from '@utils/number';
+import { shortenKey } from '@utils/shortenKey';
+
+export interface Profile {
+  pubkey: string;
+  profile: { content: string };
+}
+
+export function UserProfile({ data }: { data: Profile }) {
+  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 [followed, setFollowed] = useState(false);
+
+  const followUser = (pubkey: string) => {
+    try {
+      follow(pubkey);
+      // update state
+      setFollowed(true);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const unfollowUser = (pubkey: string) => {
+    try {
+      unfollow(pubkey);
+      // update state
+      setFollowed(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (status === 'success' && userFollows) {
+      if (userFollows.includes(data.pubkey)) {
+        setFollowed(true);
+      }
+    }
+  }, [status]);
+
+  if (!profile) {
+    return (
+      <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">
+      <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">
+          {socialStatus === 'loading' ? (
+            <button
+              type="button"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 hover:bg-fuchsia-500"
+            >
+              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+            </button>
+          ) : 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 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 hover:bg-fuchsia-500 hover:text-white"
+            >
+              <FollowIcon className="h-4 w-4" />
+            </button>
+          )}
+        </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>
+  );
+}

src/app/space/components/widgets/thread.tsx

@@ -15,11 +15,11 @@ import { useEvent } from '@utils/hooks/useEvent';
 import { Widget } from '@utils/types';
 
 export function ThreadBlock({ params }: { params: Widget }) {
-  const { status, data } = useEvent(params.content);
   const { db } = useStorage();
+  const { status, data } = useEvent(params.content);
 
   return (
-    <div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
+    <div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
       <TitleBar id={params.id} title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (

src/app/space/components/widgets/trendingNotes.tsx

@@ -0,0 +1,62 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+
+import { NoteKind_1 } from '@shared/notes';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+import { TitleBar } from '@shared/titleBar';
+
+import { Widget } from '@utils/types';
+
+interface Response {
+  notes: Array<{ event: NDKEvent }>;
+}
+
+export function TrendingNotesWidget({ params }: { params: Widget }) {
+  const { status, data } = useQuery(
+    ['trending-notes'],
+    async () => {
+      const res = await fetch(params.content);
+      if (!res.ok) {
+        throw new Error('failed to fecht trending notes');
+      }
+      const json: Response = await res.json();
+      if (!json.notes) return null;
+      return json.notes;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    }
+  );
+
+  return (
+    <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
+      <TitleBar title={params.title} />
+      <div className="h-full">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : status === 'error' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <p className="text-center text-sm font-medium text-white">
+                Sorry, an unexpected error has occurred.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="relative flex w-full flex-col">
+            {data.map((item) => (
+              <NoteKind_1 key={item.event.id} event={item.event} skipMetadata={true} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/space/components/widgets/trendingProfile.tsx

@@ -0,0 +1,62 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { type Profile, UserProfile } from '@app/space/components/userProfile';
+
+import { NoteSkeleton } from '@shared/notes/skeleton';
+import { TitleBar } from '@shared/titleBar';
+
+import { Widget } from '@utils/types';
+
+interface Response {
+  profiles: Array<{ pubkey: string }>;
+}
+
+export function TrendingProfilesWidget({ params }: { params: Widget }) {
+  const { status, data } = useQuery(
+    ['trending-profiles'],
+    async () => {
+      const res = await fetch(params.content);
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      const json: Response = await res.json();
+      if (!json.profiles) return [];
+      return json.profiles;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    }
+  );
+
+  return (
+    <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
+      <TitleBar title={params.title} />
+      <div className="h-full">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : status === 'error' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <p className="text-center text-sm font-medium text-white">
+                Sorry, an unexpected error has occurred.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
+            {data.map((item: Profile) => (
+              <UserProfile key={item.pubkey} data={item} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/space/components/widgets/user.tsx

@@ -11,7 +11,7 @@ import { TitleBar } from '@shared/titleBar';
 import { UserProfile } from '@shared/userProfile';
 
 import { nHoursAgo } from '@utils/date';
-import { DBEvent, Widget } from '@utils/types';
+import { Widget } from '@utils/types';
 
 export function UserWidget({ params }: { params: Widget }) {
   const { ndk } = useNDK();
@@ -19,13 +19,18 @@ export function UserWidget({ params }: { params: Widget }) {
     ['user-widget', params.content],
     async () => {
       const events = await ndk.fetchEvents({
-        kinds: [1],
+        kinds: [1, 6],
         authors: [params.content],
         since: nHoursAgo(24),
       });
-      return [...events] as unknown as DBEvent[];
+      return [...events] as unknown as NDKEvent[];
     },
-    { refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false }
+    {
+      staleTime: Infinity,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    }
   );
 
   const parentRef = useRef<HTMLDivElement>(null);
@@ -87,7 +92,7 @@ export function UserWidget({ params }: { params: Widget }) {
           <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">
-                <div className="rounded-md bg-white/10 px-3 py-3">
+                <div className="rounded-xl bg-white/10 px-3 py-3">
                   <NoteSkeleton />
                 </div>
               </div>

src/app/space/index.tsx

@@ -68,7 +68,7 @@ export function SpaceScreen() {
           <HashtagModal />
         </div>
       </div>
-      <div className="w-[150px] shrink-0" />
+      <div className="w-[250px] shrink-0" />
     </div>
   );
 }