re-enable nip-04 with more polish, prepare for nip-44

src/app/chats/components/messages/form.tsx

@@ -1,8 +1,9 @@
 import { nip04 } from 'nostr-tools';
 import { useCallback, useState } from 'react';
 
+import { MediaUploader } from '@app/chats/components/messages/mediaUploader';
+
 import { EnterIcon } from '@shared/icons';
-import { MediaUploader } from '@shared/mediaUploader';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
@@ -34,7 +35,7 @@ export function ChatMessageForm({
 
   const handleEnterPress = (e: {
     key: string;
-    shiftKey: any;
+    shiftKey: KeyboardEvent['shiftKey'];
     preventDefault: () => void;
   }) => {
     if (e.key === 'Enter' && !e.shiftKey) {

src/app/chats/components/messages/item.tsx

@@ -1,32 +1,31 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+
 import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
 
-import { NoteContent } from '@shared/notes';
 import { User } from '@shared/user';
 
-import { parser } from '@utils/parser';
-
 export function ChatMessageItem({
-  data,
+  message,
   userPubkey,
   userPrivkey,
 }: {
-  data: any;
+  message: NDKEvent;
   userPubkey: string;
   userPrivkey: string;
 }) {
-  const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
+  const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
   // if we have decrypted content, use it instead of the encrypted content
   if (decryptedContent) {
-    data['content'] = decryptedContent;
+    message['content'] = decryptedContent;
   }
 
   return (
     <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
       <div className="flex flex-col">
-        <User pubkey={data.sender_pubkey} time={data.created_at} isChat={true} />
+        <User pubkey={message.pubkey} time={message.created_at} isChat={true} />
         <div className="-mt-[20px] pl-[49px]">
           <p className="select-text whitespace-pre-line break-words text-base text-white">
-            {data.content}
+            {message.content}
           </p>
         </div>
       </div>

src/app/chats/components/messages/mediaUploader.tsx

@@ -0,0 +1,53 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import { LoaderIcon, MediaIcon } from '@shared/icons';
+
+import { useImageUploader } from '@utils/hooks/useUploader';
+
+export function MediaUploader({
+  setState,
+}: {
+  setState: Dispatch<SetStateAction<string>>;
+}) {
+  const upload = useImageUploader();
+  const [loading, setLoading] = useState(false);
+
+  const uploadMedia = async () => {
+    setLoading(true);
+    const image = await upload(null);
+    if (image.url) {
+      setState((prev: string) => `${prev}\n${image.url}`);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={() => uploadMedia()}
+            className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
+          >
+            {loading ? (
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+            ) : (
+              <MediaIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+            sideOffset={5}
+          >
+            Upload media
+            <Tooltip.Arrow className="fill-black" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}