wip

src/shared/notes/replies/form.tsx

@@ -3,19 +3,15 @@ import { useState } from 'react';
 import { toast } from 'sonner';
 
 import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
 
 import { ReplyMediaUploader } from '@shared/notes';
-import { User } from '@shared/user';
 
-export function NoteReplyForm({ id }: { id: string }) {
-  const { db } = useStorage();
+export function NoteReplyForm({ eventId }: { eventId: string }) {
   const { ndk, relayUrls } = useNDK();
-
   const [value, setValue] = useState('');
 
   const submit = async () => {
-    const tags = [['e', id, relayUrls[0], 'root']];
+    const tags = [['e', eventId, relayUrls[0], 'root']];
 
     // publish event
     const event = new NDKEvent(ndk);
@@ -31,26 +27,23 @@ export function NoteReplyForm({ id }: { id: string }) {
   };
 
   return (
-    <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-36 w-full resize-none bg-transparent px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
-          spellCheck={false}
-        />
-        <div className="inline-flex items-center justify-end gap-2 rounded-b-xl border-t border-neutral-200 p-2 dark:border-neutral-800">
-          <ReplyMediaUploader setValue={setValue} />
-          <button
-            onClick={() => submit()}
-            disabled={value.length === 0 ? true : false}
-            className="h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
-          >
-            Reply
-          </button>
-        </div>
+    <div className="mt-3 flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="Reply to this post..."
+        className="h-28 w-full resize-none rounded-t-xl bg-neutral-100 px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+        spellCheck={false}
+      />
+      <div className="inline-flex items-center justify-end gap-2 rounded-b-xl p-2">
+        <ReplyMediaUploader setValue={setValue} />
+        <button
+          onClick={() => submit()}
+          disabled={value.length === 0 ? true : false}
+          className="h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
+        >
+          Reply
+        </button>
       </div>
     </div>
   );