wip: update browse user screen

src/app/browse/components/userDrawer.tsx

@@ -1,10 +1,10 @@
+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 { PlusIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 import { NIP05 } from '@shared/nip05';
 import { TextNote } from '@shared/notes';
@@ -18,9 +18,19 @@ 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);
@@ -51,26 +61,20 @@ export const UserDrawer = memo(function UserDrawer({ pubkey }: { pubkey: string
 
   return (
     <Dialog.Root>
-      <div className="group relative">
-        <Dialog.Trigger asChild>
-          <button type="button" className="relative z-10">
-            <User pubkey={pubkey} variant="avatar" />
-          </button>
-        </Dialog.Trigger>
-        <div className="absolute -bottom-14 left-0 flex flex-col opacity-0 transition-all duration-300 ease-smooth group-hover:-bottom-16 group-hover:opacity-100">
-          <div className="mt-4">
-            <button
-              type="button"
-              className="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-white/10 backdrop-blur-xl hover:bg-white/20"
-            >
-              <PlusIcon className="h-4 w-4 text-white" />
-            </button>
-          </div>
-        </div>
-      </div>
+      <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-xl">
+          <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>

src/app/browse/components/userDropable.tsx

@@ -0,0 +1,22 @@
+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/index.tsx

@@ -37,7 +37,7 @@ export function BrowseScreen() {
       <div className="absolute z-10 h-full w-full">
         <DotsPattern className="h-full w-full text-white/10" />
       </div>
-      <div className="relative z-20">
+      <div className="relative z-20 h-full w-full">
         <Outlet />
       </div>
     </div>

src/app/browse/users.tsx

@@ -1,6 +1,8 @@
+import { DndContext } from '@dnd-kit/core';
 import { useMemo } from 'react';
 
 import { UserDrawer } from '@app/browse/components/userDrawer';
+import { UserDropable } from '@app/browse/components/userDropable';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -10,16 +12,31 @@ import { getMultipleRandom } from '@utils/transform';
 
 export function BrowseUsersScreen() {
   const { db } = useStorage();
+
   const data = useMemo(() => getMultipleRandom(db.account.follows, 10), []);
 
+  const handleDragEnd = (event) => {
+    console.log(event.id);
+  };
+
   return (
-    <div>
-      <User pubkey={db.account.pubkey} variant="avatar" />
-      <div className="flex items-center gap-4">
-        {data.map((user) => (
-          <UserDrawer key={user} pubkey={user} />
-        ))}
+    <DndContext onDragEnd={handleDragEnd}>
+      <div className="scrollbar-hide flex h-full w-full flex-col items-center justify-center overflow-x-auto overflow-y-auto">
+        <div className="flex items-center gap-16">
+          <div className="flex flex-col gap-1">
+            <h3 className="text-sm font-semibold text-fuchsia-500">Follows</h3>
+            <div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-fuchsia-500/10 p-4">
+              {data.map((user) => (
+                <UserDrawer key={user} pubkey={user} />
+              ))}
+            </div>
+          </div>
+          <div className="flex items-center gap-16">
+            <User pubkey={db.account.pubkey} variant="avatar" />
+            <UserDropable />
+          </div>
+        </div>
       </div>
-    </div>
+    </DndContext>
   );
 }