From 154df360ac3a1934e5da3316595f689da5cc2be0 Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Mon, 11 Nov 2024 21:58:38 +0100
Subject: [PATCH] feat(app): refactor page create/update forms

---
 apps/app/src/routes/page.$id.edit.lazy.tsx | 255 +++++++++++----------
 apps/app/src/routes/page.create.lazy.tsx   | 242 ++++++++++---------
 2 files changed, 276 insertions(+), 221 deletions(-)

diff --git a/apps/app/src/routes/page.$id.edit.lazy.tsx b/apps/app/src/routes/page.$id.edit.lazy.tsx
index fca09b8..ef22caf 100644
--- a/apps/app/src/routes/page.$id.edit.lazy.tsx
+++ b/apps/app/src/routes/page.$id.edit.lazy.tsx
@@ -1,6 +1,10 @@
 import { PageUpdateInput } from '@boring.tools/schema'
 import {
   Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Command,
   CommandEmpty,
   CommandGroup,
@@ -57,129 +61,146 @@ const Component = () => {
   return (
     <>
       <div className="flex flex-col gap-5">
-        <h1 className="text-3xl">Edit page</h1>
-
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-8 max-w-screen-md"
+            className="flex flex-col gap-10 w-full max-w-screen-lg"
           >
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="My page" {...field} autoFocus />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            <div className="flex gap-10 w-full">
+              <Card className="w-full">
+                <CardHeader>
+                  <CardTitle>Details</CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-5">
+                  <FormField
+                    control={form.control}
+                    name="title"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Title</FormLabel>
+                        <FormControl>
+                          <Input placeholder="My page" {...field} autoFocus />
+                        </FormControl>{' '}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Some details about the page..."
-                      {...field}
-                    />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                  <FormField
+                    control={form.control}
+                    name="description"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Description</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="Some details about the page..."
+                            {...field}
+                          />
+                        </FormControl>{' '}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
 
-            <FormField
-              control={form.control}
-              name="changelogIds"
-              render={({ field }) => (
-                <FormItem className="flex flex-col">
-                  <FormLabel>Changelogs</FormLabel>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <FormControl>
-                        <Button
-                          variant="outline"
-                          role="combobox"
-                          className={cn(
-                            'w-[200px] justify-between',
-                            !field.value && 'text-muted-foreground',
-                          )}
-                        >
-                          {field?.value?.length === 1 &&
-                            changelogList.data?.find((changelog) =>
-                              field.value?.includes(changelog.id),
-                            )?.title}
-                          {field?.value &&
-                            field.value.length <= 0 &&
-                            'No changelog selected'}
-                          {field?.value &&
-                            field.value.length > 1 &&
-                            `${field?.value?.length} selected`}
-                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                      </FormControl>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-[200px] p-0">
-                      <Command>
-                        <CommandInput placeholder="Search changelogs..." />
-                        <CommandList>
-                          <CommandEmpty>No changelog found.</CommandEmpty>
-                          <CommandGroup>
-                            {changelogList.data?.map((changelog) => (
-                              <CommandItem
-                                value={changelog.title}
-                                key={changelog.id}
-                                onSelect={() => {
-                                  const getIds = () => {
-                                    if (!field.value) {
-                                      return [changelog.id]
-                                    }
-
-                                    if (field.value?.includes(changelog.id)) {
-                                      return field.value.filter(
-                                        (id) => id !== changelog.id,
-                                      )
-                                    }
-
-                                    return [
-                                      ...(field?.value as string[]),
-                                      changelog.id,
-                                    ]
-                                  }
-                                  form.setValue('changelogIds', getIds())
-                                }}
+              <Card className="w-full">
+                <CardHeader>
+                  <CardTitle>Options</CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-5">
+                  <FormField
+                    control={form.control}
+                    name="changelogIds"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-col">
+                        <FormLabel>Changelogs</FormLabel>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <FormControl>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                className={cn(
+                                  'w-[200px] justify-between',
+                                  !field.value && 'text-muted-foreground',
+                                )}
                               >
-                                <Check
-                                  className={cn(
-                                    'mr-2 h-4 w-4',
-                                    field.value?.includes(changelog.id)
-                                      ? 'opacity-100'
-                                      : 'opacity-0',
-                                  )}
-                                />
-                                {changelog.title}
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                  <FormDescription>
-                    This changelogs are shown on this page.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex gap-5">
+                                {field?.value?.length === 1 &&
+                                  changelogList.data?.find((changelog) =>
+                                    field.value?.includes(changelog.id),
+                                  )?.title}
+                                {field?.value &&
+                                  field.value.length <= 0 &&
+                                  'No changelog selected'}
+                                {field?.value &&
+                                  field.value.length > 1 &&
+                                  `${field?.value?.length} selected`}
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              </Button>
+                            </FormControl>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[200px] p-0">
+                            <Command>
+                              <CommandInput placeholder="Search changelogs..." />
+                              <CommandList>
+                                <CommandEmpty>No changelog found.</CommandEmpty>
+                                <CommandGroup>
+                                  {changelogList.data?.map((changelog) => (
+                                    <CommandItem
+                                      value={changelog.title}
+                                      key={changelog.id}
+                                      onSelect={() => {
+                                        const getIds = () => {
+                                          if (!field.value) {
+                                            return [changelog.id]
+                                          }
+
+                                          if (
+                                            field.value?.includes(changelog.id)
+                                          ) {
+                                            return field.value.filter(
+                                              (id) => id !== changelog.id,
+                                            )
+                                          }
+
+                                          return [
+                                            ...(field?.value as string[]),
+                                            changelog.id,
+                                          ]
+                                        }
+                                        form.setValue('changelogIds', getIds())
+                                      }}
+                                    >
+                                      <Check
+                                        className={cn(
+                                          'mr-2 h-4 w-4',
+                                          field.value?.includes(changelog.id)
+                                            ? 'opacity-100'
+                                            : 'opacity-0',
+                                        )}
+                                      />
+                                      {changelog.title}
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                        <FormDescription>
+                          This changelogs are shown on this page.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="flex items-end justify-end gap-5">
               <Button
                 type="button"
                 variant={'ghost'}
@@ -187,7 +208,7 @@ const Component = () => {
               >
                 Cancel
               </Button>
-              <Button type="submit">Update</Button>
+              <Button type="submit">Save</Button>
             </div>
           </form>
         </Form>
diff --git a/apps/app/src/routes/page.create.lazy.tsx b/apps/app/src/routes/page.create.lazy.tsx
index 5639daf..83492a2 100644
--- a/apps/app/src/routes/page.create.lazy.tsx
+++ b/apps/app/src/routes/page.create.lazy.tsx
@@ -1,6 +1,10 @@
 import { PageCreateInput } from '@boring.tools/schema'
 import {
   Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Command,
   CommandEmpty,
   CommandGroup,
@@ -69,115 +73,145 @@ const Component = () => {
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-8 max-w-screen-md"
+            className="flex flex-col gap-10 w-full max-w-screen-lg"
           >
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="My page" {...field} autoFocus />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            <div className="flex gap-10 w-full">
+              <Card className="w-full">
+                <CardHeader>
+                  <CardTitle>Details</CardTitle>
+                </CardHeader>
 
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Some details about the page..."
-                      {...field}
-                    />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                <CardContent className="flex flex-col gap-5">
+                  <FormField
+                    control={form.control}
+                    name="title"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Title</FormLabel>
+                        <FormControl>
+                          <Input placeholder="My page" {...field} autoFocus />
+                        </FormControl>{' '}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-            <FormField
-              control={form.control}
-              name="changelogIds"
-              render={({ field }) => (
-                <FormItem className="flex flex-col">
-                  <FormLabel>Changelogs</FormLabel>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <FormControl>
-                        <Button
-                          variant="outline"
-                          role="combobox"
-                          className={cn(
-                            'w-[200px] justify-between',
-                            !field.value && 'text-muted-foreground',
-                          )}
-                        >
-                          {field.value.length === 1 &&
-                            changelogList.data?.find((changelog) =>
-                              field.value?.includes(changelog.id),
-                            )?.title}
-                          {field.value.length <= 0 && 'No changelog selected'}
-                          {field.value.length > 1 &&
-                            `${field.value.length} selected`}
-                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                      </FormControl>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-[200px] p-0">
-                      <Command>
-                        <CommandInput placeholder="Search changelogs..." />
-                        <CommandList>
-                          <CommandEmpty>No changelog found.</CommandEmpty>
-                          <CommandGroup>
-                            {changelogList.data?.map((changelog) => (
-                              <CommandItem
-                                value={changelog.title}
-                                key={changelog.id}
-                                onSelect={() => {
-                                  const getIds = () => {
-                                    if (field.value.includes(changelog.id)) {
-                                      const asd = field.value.filter(
-                                        (id) => id !== changelog.id,
-                                      )
-                                      return asd
-                                    }
+                  <FormField
+                    control={form.control}
+                    name="description"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Description</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="Some details about the page..."
+                            {...field}
+                          />
+                        </FormControl>{' '}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
 
-                                    return [...field.value, changelog.id]
-                                  }
-                                  form.setValue('changelogIds', getIds())
-                                }}
+              <Card className="w-full">
+                <CardHeader>
+                  <CardTitle>Options</CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-5">
+                  <FormField
+                    control={form.control}
+                    name="changelogIds"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-col">
+                        <FormLabel>Changelogs</FormLabel>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <FormControl>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                className={cn(
+                                  'w-[200px] justify-between',
+                                  !field.value && 'text-muted-foreground',
+                                )}
                               >
-                                <Check
-                                  className={cn(
-                                    'mr-2 h-4 w-4',
-                                    field.value.includes(changelog.id)
-                                      ? 'opacity-100'
-                                      : 'opacity-0',
-                                  )}
-                                />
-                                {changelog.title}
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                  <FormDescription>
-                    This changelogs are shown on this page.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit">Create</Button>
+                                {field.value.length === 1 &&
+                                  changelogList.data?.find((changelog) =>
+                                    field.value?.includes(changelog.id),
+                                  )?.title}
+                                {field.value.length <= 0 &&
+                                  'No changelog selected'}
+                                {field.value.length > 1 &&
+                                  `${field.value.length} selected`}
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              </Button>
+                            </FormControl>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[200px] p-0">
+                            <Command>
+                              <CommandInput placeholder="Search changelogs..." />
+                              <CommandList>
+                                <CommandEmpty>No changelog found.</CommandEmpty>
+                                <CommandGroup>
+                                  {changelogList.data?.map((changelog) => (
+                                    <CommandItem
+                                      value={changelog.title}
+                                      key={changelog.id}
+                                      onSelect={() => {
+                                        const getIds = () => {
+                                          if (
+                                            field.value.includes(changelog.id)
+                                          ) {
+                                            const asd = field.value.filter(
+                                              (id) => id !== changelog.id,
+                                            )
+                                            return asd
+                                          }
+
+                                          return [...field.value, changelog.id]
+                                        }
+                                        form.setValue('changelogIds', getIds())
+                                      }}
+                                    >
+                                      <Check
+                                        className={cn(
+                                          'mr-2 h-4 w-4',
+                                          field.value.includes(changelog.id)
+                                            ? 'opacity-100'
+                                            : 'opacity-0',
+                                        )}
+                                      />
+                                      {changelog.title}
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                        <FormDescription>
+                          This changelogs are shown on this page.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+            <div className="flex items-end justify-end gap-5">
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => navigate({ to: '/page' })}
+              >
+                Cancel
+              </Button>
+
+              <Button type="submit">Create</Button>
+            </div>
           </form>
         </Form>
       </div>