From fd32597a70a4e26c6189d8438303b8635c38381e Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 27 Jan 2026 17:09:02 -0300
Subject: [PATCH] refactor(list-form): implement drawer mode for list form
 component

- Added support for 'drawer' mode in ListForm, allowing it to be displayed in a drawer instead of a dialog.
- Updated ListFormProps to include a mode prop.
- Adjusted ListsDropdown to utilize both dialog and drawer modes for the ListForm component.
---
 .../[lang]/lists/_components/list-form.tsx    | 306 ++++++++++--------
 .../src/components/lists/lists-dropdown.tsx   |   2 +
 2 files changed, 174 insertions(+), 134 deletions(-)

diff --git a/apps/web/src/app/[lang]/lists/_components/list-form.tsx b/apps/web/src/app/[lang]/lists/_components/list-form.tsx
index f4fdb0df..9ed49189 100644
--- a/apps/web/src/app/[lang]/lists/_components/list-form.tsx
+++ b/apps/web/src/app/[lang]/lists/_components/list-form.tsx
@@ -9,6 +9,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@plotwist/ui/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@plotwist/ui/components/ui/drawer'
 import {
   Form,
   FormControl,
@@ -34,9 +41,15 @@ import { getGetListsQueryKey, usePostList, usePutListId } from '@/api/list'
 import { useLanguage } from '@/context/language'
 import { type ListFormValues, listFormSchema } from './list-form-schema'
 
-type ListFormProps = { trigger: React.ReactNode; list?: GetListById200List }
+type ListFormMode = 'dialog' | 'drawer'
+
+type ListFormProps = {
+  trigger: React.ReactNode
+  list?: GetListById200List
+  mode?: ListFormMode
+}
 
-export const ListForm = ({ trigger, list }: ListFormProps) => {
+export const ListForm = ({ trigger, list, mode = 'dialog' }: ListFormProps) => {
   const [open, setOpen] = useState(false)
   const { dictionary, language } = useLanguage()
   const { push, refresh } = useRouter()
@@ -94,142 +107,167 @@ export const ListForm = ({ trigger, list }: ListFormProps) => {
     )
   }
 
+  const Content = (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="w-full space-y-4"
+        >
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{dictionary.title}</FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder={dictionary.list_form.name_placeholder}
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{dictionary.list_form.description}</FormLabel>
+                <FormControl>
+                  <Textarea
+                    className="resize-none"
+                    rows={3}
+                    placeholder={dictionary.list_form.description_placeholder}
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="visibility"
+            render={({ field: { onChange, value } }) => (
+              <FormItem className="space-y-2">
+                <FormLabel>{dictionary.list_form.visibility}</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={onChange}
+                    defaultValue={value}
+                    className="flex flex-col gap-4"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="PUBLIC" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          {dictionary.list_form.visibility_option_public}
+                        </FormLabel>
+                      </FormItem>
+                      <span className="pl-7 text-sm text-muted-foreground">
+                        {
+                          dictionary.list_form
+                            .visibility_option_description_public
+                        }
+                      </span>
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="NETWORK" disabled />
+                        </FormControl>
+                        <FormLabel className="font-normal text-muted-foreground">
+                          {dictionary.list_form.visibility_option_network}
+                        </FormLabel>
+                      </FormItem>
+                      <span className="pl-7 text-sm text-muted-foreground">
+                        {
+                          dictionary.list_form
+                            .visibility_option_description_network
+                        }
+                      </span>
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="PRIVATE" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          {dictionary.list_form.visibility_option_private}
+                        </FormLabel>
+                      </FormItem>
+                      <span className="pl-7 text-sm text-muted-foreground">
+                        {
+                          dictionary.list_form
+                            .visibility_option_description_private
+                        }
+                      </span>
+                    </div>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-end space-x-2">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              {dictionary.list_form.submit}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  )
+
+  if (mode === 'dialog') {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {list
+                ? dictionary.list_form.edit_list
+                : dictionary.list_form.create_new_list}
+            </DialogTitle>
+          </DialogHeader>
+          {Content}
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
 
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
+      <DrawerContent className="w-full p-6">
+        <DrawerHeader>
+          <DrawerTitle>
             {list
               ? dictionary.list_form.edit_list
               : dictionary.list_form.create_new_list}
-          </DialogTitle>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="w-full space-y-4"
-          >
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{dictionary.title}</FormLabel>
-
-                  <FormControl>
-                    <Input
-                      placeholder={dictionary.list_form.name_placeholder}
-                      {...field}
-                    />
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{dictionary.list_form.description}</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      className="resize-none"
-                      rows={3}
-                      placeholder={dictionary.list_form.description_placeholder}
-                      {...field}
-                    />
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="visibility"
-              render={({ field: { onChange, value } }) => (
-                <FormItem className="space-y-2">
-                  <FormLabel>{dictionary.list_form.visibility}</FormLabel>
-                  <FormControl>
-                    <RadioGroup
-                      onValueChange={onChange}
-                      defaultValue={value}
-                      className="flex flex-col gap-4"
-                    >
-                      <div className="flex flex-col gap-1">
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="PUBLIC" />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            {dictionary.list_form.visibility_option_public}
-                          </FormLabel>
-                        </FormItem>
-                        <span className="pl-7 text-sm text-muted-foreground">
-                          {
-                            dictionary.list_form
-                              .visibility_option_description_public
-                          }
-                        </span>
-                      </div>
-
-                      <div className="flex flex-col gap-1">
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="NETWORK" disabled />
-                          </FormControl>
-                          <FormLabel className="font-normal text-muted-foreground">
-                            {dictionary.list_form.visibility_option_network}
-                          </FormLabel>
-                        </FormItem>
-                        <span className="pl-7 text-sm text-muted-foreground">
-                          {
-                            dictionary.list_form
-                              .visibility_option_description_network
-                          }
-                        </span>
-                      </div>
-
-                      <div className="flex flex-col gap-1">
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="PRIVATE" />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            {dictionary.list_form.visibility_option_private}
-                          </FormLabel>
-                        </FormItem>
-                        <span className="pl-7 text-sm text-muted-foreground">
-                          {
-                            dictionary.list_form
-                              .visibility_option_description_private
-                          }
-                        </span>
-                      </div>
-                    </RadioGroup>
-                  </FormControl>
-                  <FormMessage />
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex justify-end space-x-2">
-              <Button type="submit" loading={form.formState.isSubmitting}>
-                {dictionary.list_form.submit}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
+          </DrawerTitle>
+        </DrawerHeader>
+
+        {Content}
+      </DrawerContent>
+    </Drawer>
   )
 }
diff --git a/apps/web/src/components/lists/lists-dropdown.tsx b/apps/web/src/components/lists/lists-dropdown.tsx
index 6588a099..75c8e002 100644
--- a/apps/web/src/components/lists/lists-dropdown.tsx
+++ b/apps/web/src/components/lists/lists-dropdown.tsx
@@ -249,6 +249,7 @@ export const ListsDropdown = ({ item, ...props }: ListsDropdownProps) => {
             <DrawerTitle className="flex items-center justify-between">
               {myLists}
               <ListForm
+                mode="drawer"
                 trigger={
                   <Button
                     size="icon"
@@ -288,6 +289,7 @@ export const ListsDropdown = ({ item, ...props }: ListsDropdownProps) => {
             {myLists}
 
             <ListForm
+              mode="dialog"
               trigger={
                 <Button
                   size="icon"