update message form

package.json

@@ -71,6 +71,7 @@
     "react-markdown": "^8.0.7",
     "react-player": "^2.12.0",
     "react-router-dom": "^6.15.0",
+    "react-textarea-autosize": "^8.5.3",
     "react-virtuoso": "^4.5.0",
     "remark-gfm": "^3.0.1",
     "tippy.js": "^6.3.7",

pnpm-lock.yaml

@@ -163,6 +163,9 @@ dependencies:
   react-router-dom:
     specifier: ^6.15.0
     version: 6.15.0(react-dom@18.2.0)(react@18.2.0)
+  react-textarea-autosize:
+    specifier: ^8.5.3
+    version: 8.5.3(@types/react@18.2.21)(react@18.2.0)
   react-virtuoso:
     specifier: ^4.5.0
     version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
@@ -6073,6 +6076,20 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /react-textarea-autosize@8.5.3(@types/react@18.2.21)(react@18.2.0):
+    resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.22.10
+      react: 18.2.0
+      use-composed-ref: 1.3.0(react@18.2.0)
+      use-latest: 1.2.1(@types/react@18.2.21)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-virtuoso@4.5.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OMP6XrzJMMos1vbJZC16RxGW7utAxUMP7i5PNPi6epBNVH7nz+CF/DlmecNBep5wyjLud51dQ5epjb2A0w9W/Q==}
     engines: {node: '>=10'}
@@ -6918,6 +6935,41 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-composed-ref@1.3.0(react@18.2.0):
+    resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.21)(react@18.2.0):
+    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.21
+      react: 18.2.0
+    dev: false
+
+  /use-latest@1.2.1(@types/react@18.2.21)(react@18.2.0):
+    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.21
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.21)(react@18.2.0)
+    dev: false
+
   /use-sidecar@1.1.2(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}

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}