diff --git a/package.json b/package.json index 60f6aa3a..f2374381 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f5acb6c..f1b1d843 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/app/chats/components/list.tsx b/src/app/chats/components/list.tsx index 0f6cd25f..d2505fe7 100644 --- a/src/app/chats/components/list.tsx +++ b/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 (
- {chats.follows.map((item) => renderItem(item))} {chats.unknowns.length > 0 && } diff --git a/src/app/chats/components/messages/form.tsx b/src/app/chats/components/messages/form.tsx index 096d610f..cdeb9844 100644 --- a/src/app/chats/components/messages/form.tsx +++ b/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 ( -
- + 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" /> -
-
- - -
+
+ +
); diff --git a/src/app/chats/components/messages/mediaUploader.tsx b/src/app/chats/components/messages/mediaUploader.tsx index 7827fddb..72fe3037 100644 --- a/src/app/chats/components/messages/mediaUploader.tsx +++ b/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 ? ( - + ) : ( - + )} diff --git a/src/app/chats/components/self.tsx b/src/app/chats/components/self.tsx deleted file mode 100644 index b0a9ec16..00000000 --- a/src/app/chats/components/self.tsx +++ /dev/null @@ -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 ( -
-
-
-
- ); - } - - return ( - - twMerge( - 'inline-flex h-9 items-center gap-2.5 rounded-md px-2', - isActive ? 'bg-white/10 text-white' : 'text-white/80' - ) - } - > - {pubkey} -
-
- {user?.nip05 || user?.name || displayNpub(pubkey, 16)} -
- (you) -
- - ); -} diff --git a/src/app/chats/index.tsx b/src/app/chats/index.tsx index 5692d77d..fa5c1761 100644 --- a/src/app/chats/index.tsx +++ b/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() {
{status === 'loading' ? ( -

Loading...

+
+
+ +

Loading messages

+
+
) : (