wip: finish browse users

src/app/browse/components/edge.tsx

@@ -0,0 +1,29 @@
+import { BaseEdge, EdgeProps, getBezierPath } from 'reactflow';
+
+export function Edge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: EdgeProps) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={markerEnd}
+      style={{ ...style, stroke: '#71717a' }}
+    />
+  );
+}

src/app/browse/components/groupTitle.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+
+import { useProfile } from '@utils/hooks/useProfile';
+
+export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) {
+  const { status, user } = useProfile(pubkey);
+
+  if (status === 'loading') {
+    return <div className="h-3 w-24 animate-pulse rounded bg-white/10" />;
+  }
+
+  return (
+    <h3 className="text-sm font-semibold text-fuchsia-500">{`${
+      user.name || user.display_name
+    }'s network`}</h3>
+  );
+});

src/app/browse/components/line.tsx

@@ -0,0 +1,14 @@
+export function Line({ fromX, fromY, toX, toY }) {
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke="#f5d0fe"
+        strokeWidth={1.5}
+        className="animated"
+        d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
+      />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#f5d0fe" strokeWidth={1.5} />
+    </g>
+  );
+}

src/app/browse/components/userDrawer.tsx

@@ -1,142 +0,0 @@
-import { useDraggable } from '@dnd-kit/core';
-import * as Dialog from '@radix-ui/react-dialog';
-import { memo, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { Image } from '@shared/image';
-import { NIP05 } from '@shared/nip05';
-import { TextNote } from '@shared/notes';
-import { User } from '@shared/user';
-
-import { useNostr } from '@utils/hooks/useNostr';
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
-
-export const UserDrawer = memo(function UserDrawer({ pubkey }: { pubkey: string }) {
-  const { db } = useStorage();
-  const { status, user } = useProfile(pubkey);
-  const { addContact, removeContact } = useNostr();
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: pubkey,
-  });
-
-  const [followed, setFollowed] = useState(false);
-
-  const style = transform
-    ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        zIndex: 20,
-      }
-    : undefined;
-
-  const followUser = (pubkey: string) => {
-    try {
-      addContact(pubkey);
-
-      // update state
-      setFollowed(true);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const unfollowUser = (pubkey: string) => {
-    try {
-      removeContact(pubkey);
-
-      // update state
-      setFollowed(false);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    if (db.account.follows.includes(pubkey)) {
-      setFollowed(true);
-    }
-  }, []);
-
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button
-          type="button"
-          ref={setNodeRef}
-          style={style}
-          {...listeners}
-          {...attributes}
-        >
-          <User pubkey={pubkey} variant="avatar" />
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] items-center justify-center px-4 pb-4 pt-16">
-          <div className="h-full w-full overflow-y-auto rounded-lg border-t border-white/10 bg-white/20 px-3 py-3 backdrop-blur-3xl">
-            {status === 'loading' ? (
-              <div>
-                <p>Loading...</p>
-              </div>
-            ) : (
-              <div className="flex flex-col">
-                <Image
-                  src={user?.picture || user?.image}
-                  alt={pubkey}
-                  className="h-14 w-14 rounded-lg"
-                />
-                <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'}
-                    </h5>
-                    {user?.nip05 ? (
-                      <NIP05
-                        pubkey={pubkey}
-                        nip05={user?.nip05}
-                        className="max-w-[15rem] truncate text-sm leading-none text-white/50"
-                      />
-                    ) : (
-                      <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
-                        {displayNpub(pubkey, 16)}
-                      </span>
-                    )}
-                  </div>
-                  <div className="flex flex-col gap-4">
-                    {user.about ? <TextNote content={user.about} /> : null}
-                  </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>
-            )}
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-});

src/app/browse/components/userDropable.tsx

@@ -1,22 +0,0 @@
-import { useDroppable } from '@dnd-kit/core';
-import { twMerge } from 'tailwind-merge';
-
-import { PlusIcon } from '@shared/icons';
-
-export function UserDropable() {
-  const { isOver, setNodeRef } = useDroppable({
-    id: 'newBlock',
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={twMerge(
-        'inline-flex h-12 w-12 items-center justify-center rounded-lg border-t border-white/10 backdrop-blur-xl',
-        isOver ? 'bg-fuchsia-500' : 'bg-white/20 hover:bg-white/30'
-      )}
-    >
-      <PlusIcon className="h-4 w-4 text-white" />
-    </div>
-  );
-}

src/app/browse/components/userGroupNode.tsx

@@ -0,0 +1,34 @@
+import { Handle, Position } from 'reactflow';
+
+import { UserWithDrawer } from '@app/browse/components/userWithDrawer';
+
+import { GroupTitle } from './groupTitle';
+
+export function UserGroupNode({ data }) {
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="h-2 w-5 rounded-full border-none !bg-fuchsia-400"
+      />
+      <div className="relative mx-3 my-3 flex flex-col gap-1">
+        {data.title ? (
+          <h3 className="text-sm font-semibold text-fuchsia-500">{data.title}</h3>
+        ) : (
+          <GroupTitle pubkey={data.pubkey} />
+        )}
+        <div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-fuchsia-500/10 p-4">
+          {data.list.map((user: string) => (
+            <UserWithDrawer key={user} pubkey={user} />
+          ))}
+        </div>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="h-2 w-5 rounded-full border-none !bg-fuchsia-400"
+      />
+    </>
+  );
+}

src/app/browse/components/userLatestPosts.tsx

@@ -0,0 +1,80 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+import { LoaderIcon } from '@shared/icons';
+import {
+  ArticleNote,
+  FileNote,
+  NoteWrapper,
+  Repost,
+  TextNote,
+  UnknownNote,
+} from '@shared/notes';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function UserLatestPosts({ pubkey }: { pubkey: string }) {
+  const { getEventsByPubkey } = useNostr();
+  const { status, data } = useQuery(['user-posts', pubkey], async () => {
+    return await getEventsByPubkey(pubkey);
+  });
+
+  const renderItem = useCallback(
+    (event: NDKEvent) => {
+      switch (event.kind) {
+        case NDKKind.Text:
+          return (
+            <NoteWrapper key={event.id} event={event}>
+              <TextNote content={event.content} />
+            </NoteWrapper>
+          );
+        case NDKKind.Repost:
+          return <Repost key={event.id} event={event} />;
+        case 1063:
+          return (
+            <NoteWrapper key={event.id} event={event}>
+              <FileNote event={event} />
+            </NoteWrapper>
+          );
+        case NDKKind.Article:
+          return (
+            <NoteWrapper key={event.id} event={event}>
+              <ArticleNote event={event} />
+            </NoteWrapper>
+          );
+        default:
+          return (
+            <NoteWrapper key={event.id} event={event}>
+              <UnknownNote event={event} />
+            </NoteWrapper>
+          );
+      }
+    },
+    [data]
+  );
+
+  return (
+    <div className="mt-4 border-t border-white/5 pt-3">
+      <h3 className="mb-4 px-3 font-semibold text-white">Latest post</h3>
+      <div>
+        {status === 'loading' ? (
+          <div className="px-3">
+            <div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-white/10 text-sm font-medium text-white/70">
+              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+              Loading latest posts...
+            </div>
+          </div>
+        ) : data.length < 1 ? (
+          <div className="px-3">
+            <div className="inline-flex h-16 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white/70">
+              No posts from 24 hours ago
+            </div>
+          </div>
+        ) : (
+          data.map((event) => renderItem(event))
+        )}
+      </div>
+    </div>
+  );
+}

src/app/browse/components/userNode.tsx

@@ -0,0 +1,21 @@
+import { Handle, Position } from 'reactflow';
+
+import { User } from '@shared/user';
+
+export function UserNode({ data }) {
+  return (
+    <>
+      <div className="relative mx-3 my-3 inline-flex h-12 w-12 shrink-0 items-center justify-center">
+        <span className="absolute inline-flex h-8 w-8 animate-ping rounded-lg bg-green-400 opacity-75"></span>
+        <div className="relative z-10">
+          <User pubkey={data.pubkey} variant="avatar" />
+        </div>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="h-2 w-2 rounded-full border-none !bg-white/20"
+      />
+    </>
+  );
+}

src/app/browse/components/userWithDrawer.tsx

@@ -0,0 +1,130 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { memo, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { Image } from '@shared/image';
+import { NIP05 } from '@shared/nip05';
+import { TextNote } from '@shared/notes';
+import { User } from '@shared/user';
+
+import { useNostr } from '@utils/hooks/useNostr';
+import { useProfile } from '@utils/hooks/useProfile';
+import { displayNpub } from '@utils/shortenKey';
+
+import { UserLatestPosts } from './userLatestPosts';
+
+export const UserWithDrawer = memo(function UserWithDrawer({
+  pubkey,
+}: {
+  pubkey: string;
+}) {
+  const { addContact, removeContact } = useNostr();
+  const { db } = useStorage();
+  const { status, user } = useProfile(pubkey);
+
+  const [followed, setFollowed] = useState(false);
+
+  const followUser = (pubkey: string) => {
+    try {
+      addContact(pubkey);
+      // update state
+      setFollowed(true);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const unfollowUser = (pubkey: string) => {
+    try {
+      removeContact(pubkey);
+      // update state
+      setFollowed(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (db.account.follows.includes(pubkey)) {
+      setFollowed(true);
+    }
+  }, []);
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button type="button">
+          <User pubkey={pubkey} variant="avatar" />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] items-center justify-center px-4 pb-4 pt-16">
+          <div className="h-full w-full overflow-y-auto rounded-lg border-t border-white/10 bg-white/20 py-3 backdrop-blur-3xl">
+            {status === 'loading' ? (
+              <div>
+                <p>Loading...</p>
+              </div>
+            ) : (
+              <>
+                <div className="flex flex-col gap-3 px-3">
+                  <Image
+                    src={user?.picture || user?.image}
+                    alt={pubkey}
+                    className="h-12 w-12 rounded-lg"
+                  />
+                  <div className="flex flex-1 flex-col gap-2">
+                    <div className="flex flex-col gap-1.5">
+                      <h5 className="text-lg font-semibold leading-none">
+                        {user?.displayName || user?.name || 'No name'}
+                      </h5>
+                      {user?.nip05 ? (
+                        <NIP05
+                          pubkey={pubkey}
+                          nip05={user?.nip05}
+                          className="max-w-[15rem] truncate text-sm leading-none text-white/50"
+                        />
+                      ) : (
+                        <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
+                          {displayNpub(pubkey, 16)}
+                        </span>
+                      )}
+                      {user.about ? <TextNote content={user.about} /> : null}
+                    </div>
+                    <div className="mt-3 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>
+                <UserLatestPosts pubkey={pubkey} />
+              </>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+});