+
@@ -139,6 +136,7 @@ export function Composer() {
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
+ className={twMerge('scrollbar-hide markdown break-all max-h-[500px] overflow-y-auto outline-none pr-2', expand ? 'min-h-[500px]' : 'min-h-[120px]')}
/>
{reply.id && (
@@ -154,21 +152,21 @@ export function Composer() {
)}
-
+
-
);
diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx
index 11fa2429..83f64915 100644
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -1,4 +1,5 @@
import * as Dialog from '@radix-ui/react-dialog';
+import { twMerge } from 'tailwind-merge';
import { useStorage } from '@libs/storage/provider';
@@ -8,16 +9,22 @@ import {
ChevronDownIcon,
ChevronRightIcon,
ComposeIcon,
+ ExpandIcon,
} from '@shared/icons';
import { useComposer } from '@stores/composer';
export function ComposerModal() {
const { db } = useStorage();
- const [toggle, open] = useComposer((state) => [state.toggleModal, state.open]);
+
+ const [toggleModal, open] = useComposer((state) => [state.toggleModal, state.open]);
+ const [toggleExpand, expand] = useComposer((state) => [
+ state.toggleExpand,
+ state.expand,
+ ]);
return (
-
+
-
+
@@ -42,12 +54,18 @@ export function ComposerModal() {
-
toggle(false)}
- className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
- >
-
-
+
+ toggleExpand()}
+ className="inline-flex h-10 w-10 items-center justify-center rounded-lg backdrop-blur-xl hover:bg-white/10"
+ >
+
+
+
+
+
+
diff --git a/src/shared/composer/user.tsx b/src/shared/composer/user.tsx
index 0e4e6262..2dccbfed 100644
--- a/src/shared/composer/user.tsx
+++ b/src/shared/composer/user.tsx
@@ -10,7 +10,7 @@ export function ComposerUser({ pubkey }: { pubkey: string }) {
{user?.nip05 || user?.name || (
diff --git a/src/shared/icons/expand.tsx b/src/shared/icons/expand.tsx
new file mode 100644
index 00000000..84ae261b
--- /dev/null
+++ b/src/shared/icons/expand.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function ExpandIcon(props: JSX.IntrinsicAttributes & SVGProps) {
+ return (
+
+ );
+}
diff --git a/src/shared/icons/index.tsx b/src/shared/icons/index.tsx
index 5e61fdf4..c6cbd08c 100644
--- a/src/shared/icons/index.tsx
+++ b/src/shared/icons/index.tsx
@@ -51,3 +51,4 @@ export * from './arrowRightCircle';
export * from './hashtag';
export * from './file';
export * from './share';
+export * from './expand';
diff --git a/src/stores/composer.ts b/src/stores/composer.ts
index 3cb93c62..736dac60 100644
--- a/src/stores/composer.ts
+++ b/src/stores/composer.ts
@@ -1,18 +1,24 @@
import { create } from 'zustand';
interface ComposerState {
+ expand: boolean;
open: boolean;
reply: { id: string; pubkey: string; root?: string };
- toggleModal: (status: boolean) => void;
+ toggleModal: () => void;
+ toggleExpand: () => void;
setReply: (id: string, pubkey: string, root?: string) => void;
clearReply: () => void;
}
export const useComposer = create((set) => ({
+ expand: false,
open: false,
reply: { id: null, pubkey: null, root: null },
- toggleModal: (status: boolean) => {
- set({ open: status });
+ toggleModal: () => {
+ set((state) => ({ open: !state.open }));
+ },
+ toggleExpand: () => {
+ set((state) => ({ expand: !state.expand }));
},
setReply: (id: string, pubkey: string, root?: string) => {
set({ reply: { id: id, pubkey: pubkey, root: root } });