update thread widget

src/shared/notes/replies/form.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 
-import { Button } from '@shared/button';
+import { useStorage } from '@libs/storage/provider';
+
+import { User } from '@shared/user';
 
 import { useNostr } from '@utils/hooks/useNostr';
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
 
-export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
+export function NoteReplyForm({ id }: { id: string }) {
   const { publish } = useNostr();
-  const { status, user } = useProfile(pubkey);
+  const { db } = useStorage();
 
   const [value, setValue] = useState('');
 
@@ -23,47 +23,23 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
   };
 
   return (
-    <div className="mt-3 flex flex-col rounded-xl bg-neutral-200 dark:bg-neutral-800">
-      <div className="relative w-full flex-1 overflow-hidden">
+    <div className="mt-3 flex gap-3">
+      <User pubkey={db.account.pubkey} variant="miniavatar" />
+      <div className="relative flex flex-1 flex-col rounded-xl bg-neutral-100 dark:bg-neutral-900">
         <textarea
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Reply to this thread..."
-          className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+          className="relative h-24 w-full resize-none bg-transparent p-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
           spellCheck={false}
         />
-      </div>
-      <div className="w-full border-t border-neutral-300 px-3 py-3 dark:border-neutral-700">
-        {status === 'loading' ? (
-          <div>Loading</div>
-        ) : (
-          <div className="flex w-full items-center justify-between">
-            <div className="inline-flex items-center gap-2">
-              <div className="relative h-11 w-11 shrink-0 rounded">
-                <img
-                  src={user?.picture || user?.image}
-                  alt={pubkey}
-                  className="h-11 w-11 rounded-lg bg-white object-cover"
-                />
-              </div>
-              <div>
-                <p className="text-sm text-neutral-600 dark:text-neutral-400">Reply as</p>
-                <p className="font-semibold text-neutral-900 dark:text-neutral-100">
-                  {user?.name || displayNpub(pubkey, 16)}
-                </p>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                onClick={() => submit()}
-                disabled={value.length === 0 ? true : false}
-                preset="publish"
-              >
-                Reply
-              </Button>
-            </div>
-          </div>
-        )}
+        <button
+          onClick={() => submit()}
+          disabled={value.length === 0 ? true : false}
+          className="mb-2 ml-auto mr-2 h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
+        >
+          Reply
+        </button>
       </div>
     </div>
   );