expandable composer

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 (
-    <Dialog.Root open={open} onOpenChange={toggle}>
+    <Dialog.Root open={open} onOpenChange={toggleModal}>
       <Dialog.Trigger asChild>
         <button
           type="button"
@@ -30,7 +37,12 @@ export function ComposerModal() {
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10 backdrop-blur-xl">
+          <div
+            className={twMerge(
+              'relative h-min w-full rounded-xl bg-white/10 backdrop-blur-xl',
+              expand ? 'max-w-4xl' : 'max-w-2xl'
+            )}
+          >
             <div className="flex items-center justify-between px-4 py-4">
               <div className="flex items-center gap-2">
                 <ComposerUser pubkey={db.account.pubkey} />
@@ -42,12 +54,18 @@ export function ComposerModal() {
                   <ChevronDownIcon className="h-4 w-4" />
                 </div>
               </div>
-              <Dialog.Close
-                onClick={() => toggle(false)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
-              >
-                <CancelIcon className="h-5 w-5 text-white/50" />
-              </Dialog.Close>
+              <div className="inline-flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => toggleExpand()}
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-lg backdrop-blur-xl hover:bg-white/10"
+                >
+                  <ExpandIcon className="h-5 w-5 text-white/50" />
+                </button>
+                <Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg backdrop-blur-xl hover:bg-white/10">
+                  <CancelIcon className="h-5 w-5 text-white/50" />
+                </Dialog.Close>
+              </div>
             </div>
             <Composer />
           </div>