update message form

src/app/chats/components/list.tsx

@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 
 import { ChatsListItem } from '@app/chats/components/item';
 import { NewMessageModal } from '@app/chats/components/modal';
-import { ChatsListSelfItem } from '@app/chats/components/self';
 import { UnknownsModal } from '@app/chats/components/unknowns';
 
 import { useStorage } from '@libs/storage/provider';
@@ -47,7 +46,6 @@ export function ChatsList() {
 
   return (
     <div className="flex flex-col">
-      <ChatsListSelfItem pubkey={db.account.pubkey} />
       {chats.follows.map((item) => renderItem(item))}
       {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
       <NewMessageModal />

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

@@ -1,5 +1,6 @@
 import { nip04 } from 'nostr-tools';
 import { useCallback, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 
 import { MediaUploader } from '@app/chats/components/messages/mediaUploader';
 
@@ -45,27 +46,28 @@ export function ChatMessageForm({
   };
 
   return (
-    <div className="relative h-11 w-full">
-      <input
+    <div className="flex w-full items-center justify-between rounded-md bg-white/20 px-3">
+      <TextareaAutosize
         value={value}
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={handleEnterPress}
         spellCheck={false}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
         placeholder="Message"
-        className="relative h-11 w-full resize-none rounded-md bg-white/10 px-5 text-white !outline-none placeholder:text-white/50"
+        className="min-h-[44px] flex-1 resize-none bg-transparent py-3 text-white !outline-none placeholder:text-white"
       />
-      <div className="absolute right-2 top-0 h-11">
-        <div className="flex h-full items-center justify-end gap-3 text-white/50">
-          <MediaUploader setState={setValue} />
-          <button
-            type="button"
-            onClick={submit}
-            className="inline-flex items-center gap-1 text-sm leading-none"
-          >
-            <EnterIcon width={14} height={14} className="" />
-            Send
-          </button>
-        </div>
+      <div className="inline-flex items-center gap-2">
+        <MediaUploader setState={setValue} />
+        <button
+          type="button"
+          onClick={submit}
+          className="inline-flex items-center gap-1.5 text-sm font-medium leading-none text-white/50"
+        >
+          <EnterIcon className="h-5 w-5" />
+          Send
+        </button>
       </div>
     </div>
   );

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

@@ -32,9 +32,9 @@ export function MediaUploader({
             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" />
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
             ) : (
-              <MediaIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+              <MediaIcon className="h-5 w-5 text-white" />
             )}
           </button>
         </Tooltip.Trigger>

src/app/chats/components/self.tsx

@@ -1,45 +0,0 @@
-import { NavLink } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
-
-export function ChatsListSelfItem({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
-
-  if (status === 'loading') {
-    return (
-      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
-        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
-      </div>
-    );
-  }
-
-  return (
-    <NavLink
-      to={`/chats/${pubkey}`}
-      preventScrollReset={true}
-      className={({ isActive }) =>
-        twMerge(
-          'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
-          isActive ? 'bg-white/10 text-white' : 'text-white/80'
-        )
-      }
-    >
-      <Image
-        src={user?.picture || user?.image}
-        alt={pubkey}
-        className="h-6 w-6 shrink-0 rounded bg-white object-cover"
-      />
-      <div className="inline-flex items-baseline gap-1">
-        <h5 className="max-w-[10rem] truncate">
-          {user?.nip05 || user?.name || displayNpub(pubkey, 16)}
-        </h5>
-        <span className="text-white/50">(you)</span>
-      </div>
-    </NavLink>
-  );
-}

src/app/chats/index.tsx

@@ -11,6 +11,8 @@ import { ChatSidebar } from '@app/chats/components/sidebar';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
+import { LoaderIcon } from '@shared/icons';
+
 import { useStronghold } from '@stores/stronghold';
 
 import { useNostr } from '@utils/hooks/useNostr';
@@ -78,7 +80,12 @@ export function ChatScreen() {
           <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10">
             <div className="h-full w-full flex-1">
               {status === 'loading' ? (
-                <p>Loading...</p>
+                <div className="flex h-full w-full items-center justify-center">
+                  <div className="flex flex-col items-center gap-1.5">
+                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                    <p className="text-sm font-medium text-white/50">Loading messages</p>
+                  </div>
+                </div>
               ) : (
                 <Virtuoso
                   ref={virtuosoRef}