betterstart-cli 0.0.91 → 0.0.93

package/dist/assets/adapters/next/templates/init/pages/settings/forms/form-notifications-drawer.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { upsertFormSettings } from '@admin/actions/forms'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from '@admin/components/ui/drawer'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { ScrollArea } from '@admin/components/ui/scroll-area'
+import { Textarea } from '@admin/components/ui/textarea'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const notificationsSchema = z.object({
+  notificationEmails: z.string().trim()
+})
+
+type NotificationsFormValues = z.infer<typeof notificationsSchema>
+
+interface FormNotificationsDrawerProps {
+  formLabel: string
+  settingsKey: string
+  initialEmails: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function FormNotificationsDrawer({
+  formLabel,
+  settingsKey,
+  initialEmails,
+  open,
+  onOpenChange
+}: FormNotificationsDrawerProps) {
+  const queryClient = useQueryClient()
+
+  const form = useForm<NotificationsFormValues>({
+    resolver: standardSchemaResolver(notificationsSchema),
+    defaultValues: { notificationEmails: initialEmails }
+  })
+
+  const mutation = useMutation({
+    mutationFn: async (values: NotificationsFormValues) => {
+      const result = await upsertFormSettings(settingsKey, {
+        notificationEmails: values.notificationEmails || null
+      })
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save notification emails')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('Notification emails saved')
+      await queryClient.invalidateQueries({ queryKey: ['form-settings'] })
+      onOpenChange(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  return (
+    <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
+      <DrawerContent className="h-full sm:max-w-xl">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
+            className="flex min-h-0 flex-1 flex-col gap-4"
+          >
+            <DrawerHeader>
+              <DrawerTitle>{formLabel} notifications</DrawerTitle>
+              <DrawerDescription>
+                Send an email to these addresses when a submission arrives. Webhooks are managed on
+                the Webhooks tab.
+              </DrawerDescription>
+            </DrawerHeader>
+
+            <ScrollArea className="min-h-0 flex-1 px-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Notifications</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <FormField
+                    control={form.control}
+                    name="notificationEmails"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Notification emails</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="sales@example.com, team@example.com"
+                            disabled={isPending}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          Comma-separated email addresses. Leave empty to disable notifications.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </ScrollArea>
+
+            <DrawerFooter className="flex-row justify-end">
+              <DrawerClose asChild>
+                <Button type="button" variant="outline" size="lg" disabled={isPending}>
+                  Cancel
+                </Button>
+              </DrawerClose>
+              <Button type="submit" disabled={isPending || !form.formState.isDirty} size="lg">
+                {isPending && <LoaderCircle className="animate-spin" />}
+                Save
+              </Button>
+            </DrawerFooter>
+          </form>
+        </Form>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-columns.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import type { ColumnDef } from '@tanstack/react-table'
+
+export interface FormSettingsRow {
+  settingsKey: string
+  label: string
+  notificationEmails: string | null
+}
+
+export function createFormSettingsColumns(isPending: boolean): ColumnDef<FormSettingsRow>[] {
+  return [
+    {
+      id: 'form',
+      header: 'Form',
+      cell: ({ row }) => <span className="truncate font-medium">{row.original.label}</span>
+    },
+    {
+      id: 'notificationEmails',
+      header: 'Notification emails',
+      cell: ({ row }) =>
+        isPending ? (
+          <span className="text-muted-foreground">Loading…</span>
+        ) : row.original.notificationEmails ? (
+          <span className="truncate font-mono text-xs">{row.original.notificationEmails}</span>
+        ) : (
+          <span className="text-muted-foreground">No emails configured</span>
+        )
+    }
+  ]
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page-content.tsx

@@ -1,111 +1,60 @@
 'use client'
 
 import { PageHeader } from '@admin/components/shared/page-header'
-import { Button } from '@admin/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from '@admin/components/ui/card'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@admin/components/ui/table'
 import { webhookEventSources } from '@admin/data/webhook-events'
 import { useFormSettingsList } from '@admin/hooks/use-webhooks'
 import * as React from 'react'
-import { EditFormNotificationsDialog } from './edit-form-notifications-dialog'
+import { FormNotificationsDrawer } from './form-notifications-drawer'
+import { createFormSettingsColumns, type FormSettingsRow } from './forms-settings-columns'
+import { FormsSettingsTable } from './forms-settings-table'
 
 export function FormsSettingsPageContent() {
-  const formSources = webhookEventSources.filter((source) => source.kind === 'form')
   const { data: settings, isPending } = useFormSettingsList()
-  const [editingKey, setEditingKey] = React.useState<string | null>(null)
+  const [selectedKey, setSelectedKey] = React.useState<string | null>(null)
 
-  const editingSource = formSources.find((source) => source.settingsKey === editingKey)
+  const rows = React.useMemo<FormSettingsRow[]>(
+    () =>
+      webhookEventSources.flatMap((source) => {
+        if (source.kind !== 'form' || !source.settingsKey) return []
+
+        return [
+          {
+            settingsKey: source.settingsKey,
+            label: source.label,
+            notificationEmails:
+              settings?.find((entry) => entry.formName === source.settingsKey)
+                ?.notificationEmails ?? null
+          }
+        ]
+      }),
+    [settings]
+  )
+
+  const columns = React.useMemo(() => createFormSettingsColumns(isPending), [isPending])
+  const selectedRow = rows.find((row) => row.settingsKey === selectedKey) ?? null
 
   return (
     <React.Fragment>
       <PageHeader title="Form Settings" />
-      <main className="mx-auto max-w-5xl w-full space-y-4 p-4">
-        <Card>
-          <CardHeader>
-            <CardTitle>Form notifications</CardTitle>
-            <CardDescription>
-              Emails notified when a submission arrives. Webhooks are managed on the Webhooks tab.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {formSources.length === 0 ? (
-              <p className="text-sm text-muted-foreground">
-                No forms yet. Create a form schema to configure its notifications here.
-              </p>
-            ) : (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Form</TableHead>
-                    <TableHead>Notification emails</TableHead>
-                    <TableHead className="w-20" />
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {formSources.map((source) => {
-                    const formSettings = settings?.find(
-                      (entry) => entry.formName === source.settingsKey
-                    )
-                    return (
-                      <TableRow key={source.schema}>
-                        <TableCell className="font-medium">{source.label}</TableCell>
-                        <TableCell>
-                          {isPending ? (
-                            <span className="text-muted-foreground">Loading…</span>
-                          ) : formSettings?.notificationEmails ? (
-                            <span className="font-mono text-xs">
-                              {formSettings.notificationEmails}
-                            </span>
-                          ) : (
-                            <span className="text-muted-foreground">No emails configured</span>
-                          )}
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => setEditingKey(source.settingsKey ?? source.schema)}
-                          >
-                            Edit
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    )
-                  })}
-                </TableBody>
-              </Table>
-            )}
-          </CardContent>
-        </Card>
+      <main className="space-y-4 px-4 pb-4 flex-1">
+        <FormsSettingsTable
+          columns={columns}
+          rows={rows}
+          onRowClick={(row) => setSelectedKey(row.settingsKey)}
+        />
       </main>
-      {editingSource?.settingsKey && (
-        <EditFormNotificationsDialog
-          key={editingSource.settingsKey}
-          formLabel={editingSource.label}
-          settingsKey={editingSource.settingsKey}
-          initialEmails={
-            settings?.find((entry) => entry.formName === editingSource.settingsKey)
-              ?.notificationEmails ?? ''
-          }
-          open={editingKey !== null}
+      {selectedRow ? (
+        <FormNotificationsDrawer
+          key={selectedRow.settingsKey}
+          formLabel={selectedRow.label}
+          settingsKey={selectedRow.settingsKey}
+          initialEmails={selectedRow.notificationEmails ?? ''}
+          open={selectedKey !== null}
           onOpenChange={(nextOpen) => {
-            if (!nextOpen) setEditingKey(null)
+            if (!nextOpen) setSelectedKey(null)
           }}
         />
-      )}
+      ) : null}
     </React.Fragment>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-table.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow
+} from '@admin/components/shared/data-table/data-grid'
+import { cn } from '@admin/utils/shared/cn'
+import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import type * as React from 'react'
+import type { FormSettingsRow } from './forms-settings-columns'
+
+interface FormsSettingsTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns: ColumnDef<FormSettingsRow>[]
+  rows: FormSettingsRow[]
+  onRowClick: (row: FormSettingsRow) => void
+}
+
+export function FormsSettingsTable({
+  columns,
+  rows,
+  onRowClick,
+  className
+}: FormsSettingsTableProps) {
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return (
+    <div className={cn('flex flex-col gap-6 pt-px pb-2 h-full', className)}>
+      <DataGrid
+        containerClassName="min-h-0 flex-1"
+        gridTemplateColumns="minmax(200px, 1fr) minmax(240px, 2fr)"
+      >
+        <DataGridHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <DataGridRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <DataGridHead key={header.id} className="overflow-hidden">
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </DataGridHead>
+              ))}
+            </DataGridRow>
+          ))}
+        </DataGridHeader>
+        <DataGridBody>
+          {table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row) => (
+              <DataGridRow
+                key={row.id}
+                className="cursor-pointer hover:bg-muted/50"
+                onClick={(event) => {
+                  const target = event.target as HTMLElement
+                  if (!event.currentTarget.contains(target)) return
+                  if (target.closest('button, a, input, [role="checkbox"]')) return
+                  onRowClick(row.original)
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <DataGridCell key={cell.id} data-column-id={cell.column.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </DataGridCell>
+                ))}
+              </DataGridRow>
+            ))
+          ) : (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center text-muted-foreground"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                No forms yet. Create a form schema to configure its notifications here.
+              </DataGridCell>
+            </DataGridRow>
+          )}
+        </DataGridBody>
+      </DataGrid>
+    </div>
+  )
+}