style: format code with prettier

src/app/admin/catalog/[id]/catalog-page-form.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import {
   Check,
@@ -11,17 +11,17 @@ import {
   Save,
   Settings,
   Trash2,
-} from 'lucide-react'
-import Link from 'next/link'
-import { useEffect, useRef, useState } from 'react'
-import { deleteCatalogPage, updateCatalogPage } from '@/actions/catalog'
-import { CatalogImagePicker } from '@/components/admin/catalog/catalog-image-picker'
-import { IconPicker } from '@/components/admin/catalog/icon-picker'
-import { ImagePreview } from '@/components/admin/catalog-manager/image-preview'
-import { CatalogIcon, LAYOUT_COLORS } from '@/components/admin/catalog-tree'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { deleteCatalogPage, updateCatalogPage } from "@/actions/catalog";
+import { CatalogImagePicker } from "@/components/admin/catalog/catalog-image-picker";
+import { IconPicker } from "@/components/admin/catalog/icon-picker";
+import { ImagePreview } from "@/components/admin/catalog-manager/image-preview";
+import { CatalogIcon, LAYOUT_COLORS } from "@/components/admin/catalog-tree";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Command,
   CommandEmpty,
@@ -29,120 +29,109 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/components/ui/command'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Textarea } from '@/components/ui/textarea'
-import { useServerAction } from '@/hooks/use-server-action'
-import { CATALOG_LAYOUTS, type CatalogLayout, LAYOUT_DESCRIPTIONS } from '@/lib/catalog-layouts'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { useServerAction } from "@/hooks/use-server-action";
+import { CATALOG_LAYOUTS, type CatalogLayout, LAYOUT_DESCRIPTIONS } from "@/lib/catalog-layouts";
+import { cn } from "@/lib/utils";
 
 interface CatalogPageData {
-  id: number
-  caption: string
-  parentId: number
-  pageLayout: string
-  enabled: string
-  visible: string
-  minRank: number
-  clubOnly: string
-  orderNum: number
-  iconImage: number
-  iconColor: number
-  pageHeadline: string
-  pageTeaser: string
-  pageSpecial: string | null
-  pageText1: string | null
-  pageText2: string | null
-  pageTextDetails: string | null
-  pageTextTeaser: string | null
+  id: number;
+  caption: string;
+  parentId: number;
+  pageLayout: string;
+  enabled: string;
+  visible: string;
+  minRank: number;
+  clubOnly: string;
+  orderNum: number;
+  iconImage: number;
+  iconColor: number;
+  pageHeadline: string;
+  pageTeaser: string;
+  pageSpecial: string | null;
+  pageText1: string | null;
+  pageText2: string | null;
+  pageTextDetails: string | null;
+  pageTextTeaser: string | null;
 }
 
 interface CatalogPageFormProps {
-  catalogPage: CatalogPageData
-  childPages: { id: number; caption: string; enabled: string }[]
-  canEdit: boolean
-  allPages: { id: number; caption: string }[]
+  catalogPage: CatalogPageData;
+  childPages: { id: number; caption: string; enabled: string }[];
+  canEdit: boolean;
+  allPages: { id: number; caption: string }[];
 }
 
-export function CatalogPageForm({
-  catalogPage,
-  childPages,
-  canEdit,
-  allPages,
-}: CatalogPageFormProps) {
-  const { isPending, run } = useServerAction()
-  const formRef = useRef<HTMLFormElement>(null)
+export function CatalogPageForm({ catalogPage, childPages, canEdit, allPages }: CatalogPageFormProps) {
+  const { isPending, run } = useServerAction();
+  const formRef = useRef<HTMLFormElement>(null);
 
   const [form, setForm] = useState({
     caption: catalogPage.caption,
     parentId: catalogPage.parentId,
     pageLayout: catalogPage.pageLayout,
-    enabled: catalogPage.enabled as '0' | '1',
-    visible: catalogPage.visible as '0' | '1',
+    enabled: catalogPage.enabled as "0" | "1",
+    visible: catalogPage.visible as "0" | "1",
     minRank: catalogPage.minRank,
-    clubOnly: catalogPage.clubOnly as '0' | '1',
+    clubOnly: catalogPage.clubOnly as "0" | "1",
     orderNum: catalogPage.orderNum,
     iconImage: catalogPage.iconImage,
     iconColor: catalogPage.iconColor,
     pageHeadline: catalogPage.pageHeadline,
     pageTeaser: catalogPage.pageTeaser,
-    pageSpecial: catalogPage.pageSpecial || '',
-    pageText1: catalogPage.pageText1 || '',
-    pageText2: catalogPage.pageText2 || '',
-    pageTextDetails: catalogPage.pageTextDetails || '',
-    pageTextTeaser: catalogPage.pageTextTeaser || '',
-  })
+    pageSpecial: catalogPage.pageSpecial || "",
+    pageText1: catalogPage.pageText1 || "",
+    pageText2: catalogPage.pageText2 || "",
+    pageTextDetails: catalogPage.pageTextDetails || "",
+    pageTextTeaser: catalogPage.pageTextTeaser || "",
+  });
 
   // Ctrl+S / Cmd+S to save
   useEffect(() => {
-    if (!canEdit) return
+    if (!canEdit) return;
     function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-        e.preventDefault()
-        formRef.current?.requestSubmit()
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        formRef.current?.requestSubmit();
       }
     }
-    document.addEventListener('keydown', onKeyDown)
-    return () => document.removeEventListener('keydown', onKeyDown)
-  }, [canEdit])
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [canEdit]);
 
   function update<K extends keyof typeof form>(key: K, value: (typeof form)[K]) {
-    setForm((prev) => ({ ...prev, [key]: value }))
+    setForm((prev) => ({ ...prev, [key]: value }));
   }
 
   function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
+    e.preventDefault();
     run(() => updateCatalogPage({ id: catalogPage.id, ...form }), {
-      successMessage: 'Page updated and catalog synced.',
-      errorMessage: 'Failed to update.',
-    })
+      successMessage: "Page updated and catalog synced.",
+      errorMessage: "Failed to update.",
+    });
   }
 
   function handleDelete() {
-    const childCount = childPages.length
+    const childCount = childPages.length;
     const msg =
       childCount > 0
         ? `Delete this catalog page? Its ${childCount} child page(s) will be moved to root. All items in this page will be deleted.`
-        : 'Delete this catalog page and all its items?'
-    if (!confirm(msg)) return
+        : "Delete this catalog page and all its items?";
+    if (!confirm(msg)) return;
     run(() => deleteCatalogPage({ id: catalogPage.id }), {
-      successMessage: 'Page deleted.',
-      redirectTo: '/admin/catalog',
-    })
+      successMessage: "Page deleted.",
+      redirectTo: "/admin/catalog",
+    });
   }
 
-  const layoutColorClass = LAYOUT_COLORS[form.pageLayout] || 'bg-muted text-muted-foreground'
+  const layoutColorClass = LAYOUT_COLORS[form.pageLayout] || "bg-muted text-muted-foreground";
 
   return (
     <form ref={formRef} onSubmit={handleSubmit}>
@@ -175,7 +164,7 @@ export function CatalogPageForm({
                       <Input
                         id="caption"
                         value={form.caption}
-                        onChange={(e) => update('caption', e.target.value)}
+                        onChange={(e) => update("caption", e.target.value)}
                         disabled={!canEdit}
                       />
                     </div>
@@ -183,7 +172,7 @@ export function CatalogPageForm({
                       <Label>Parent Page</Label>
                       <ParentCombobox
                         value={form.parentId}
-                        onChange={(id) => update('parentId', id)}
+                        onChange={(id) => update("parentId", id)}
                         pages={allPages}
                         currentPageId={catalogPage.id}
                         disabled={!canEdit}
@@ -195,11 +184,11 @@ export function CatalogPageForm({
                     <Label>Layout</Label>
                     <LayoutSelect
                       value={form.pageLayout}
-                      onChange={(v) => update('pageLayout', v)}
+                      onChange={(v) => update("pageLayout", v)}
                       disabled={!canEdit}
                     />
                     <p className="text-xs text-muted-foreground">
-                      {LAYOUT_DESCRIPTIONS[form.pageLayout as CatalogLayout] ?? 'Custom layout'}
+                      {LAYOUT_DESCRIPTIONS[form.pageLayout as CatalogLayout] ?? "Custom layout"}
                     </p>
                   </div>
 
@@ -210,7 +199,7 @@ export function CatalogPageForm({
                         id="orderNum"
                         type="number"
                         value={form.orderNum}
-                        onChange={(e) => update('orderNum', parseInt(e.target.value, 10) || 0)}
+                        onChange={(e) => update("orderNum", parseInt(e.target.value, 10) || 0)}
                         disabled={!canEdit}
                       />
                     </div>
@@ -222,7 +211,7 @@ export function CatalogPageForm({
                         min={1}
                         max={100}
                         value={form.minRank}
-                        onChange={(e) => update('minRank', parseInt(e.target.value, 10) || 1)}
+                        onChange={(e) => update("minRank", parseInt(e.target.value, 10) || 1)}
                         disabled={!canEdit}
                       />
                     </div>
@@ -235,7 +224,7 @@ export function CatalogPageForm({
                     <Label>Headline</Label>
                     <CatalogImagePicker
                       value={form.pageHeadline}
-                      onChange={(v) => update('pageHeadline', v)}
+                      onChange={(v) => update("pageHeadline", v)}
                       type="header"
                       label="Headline image"
                       disabled={!canEdit}
@@ -246,7 +235,7 @@ export function CatalogPageForm({
                     <Label>Teaser</Label>
                     <CatalogImagePicker
                       value={form.pageTeaser}
-                      onChange={(v) => update('pageTeaser', v)}
+                      onChange={(v) => update("pageTeaser", v)}
                       type="teaser"
                       label="Teaser image"
                       disabled={!canEdit}
@@ -258,7 +247,7 @@ export function CatalogPageForm({
                       id="pageText1"
                       label="Text 1"
                       value={form.pageText1}
-                      onChange={(v) => update('pageText1', v)}
+                      onChange={(v) => update("pageText1", v)}
                       disabled={!canEdit}
                       rows={4}
                       max={5000}
@@ -267,7 +256,7 @@ export function CatalogPageForm({
                       id="pageText2"
                       label="Text 2"
                       value={form.pageText2}
-                      onChange={(v) => update('pageText2', v)}
+                      onChange={(v) => update("pageText2", v)}
                       disabled={!canEdit}
                       rows={4}
                       max={5000}
@@ -278,7 +267,7 @@ export function CatalogPageForm({
                       id="pageTextDetails"
                       label="Details"
                       value={form.pageTextDetails}
-                      onChange={(v) => update('pageTextDetails', v)}
+                      onChange={(v) => update("pageTextDetails", v)}
                       disabled={!canEdit}
                       rows={3}
                       max={5000}
@@ -287,7 +276,7 @@ export function CatalogPageForm({
                       id="pageTextTeaser"
                       label="Text Teaser"
                       value={form.pageTextTeaser}
-                      onChange={(v) => update('pageTextTeaser', v)}
+                      onChange={(v) => update("pageTextTeaser", v)}
                       disabled={!canEdit}
                       rows={3}
                       max={5000}
@@ -297,7 +286,7 @@ export function CatalogPageForm({
                     id="pageSpecial"
                     label="Special"
                     value={form.pageSpecial}
-                    onChange={(v) => update('pageSpecial', v)}
+                    onChange={(v) => update("pageSpecial", v)}
                     disabled={!canEdit}
                     rows={2}
                     max={2048}
@@ -311,7 +300,7 @@ export function CatalogPageForm({
                     <div className="flex items-center gap-3">
                       <IconPicker
                         value={form.iconImage}
-                        onChange={(id) => update('iconImage', id)}
+                        onChange={(id) => update("iconImage", id)}
                         disabled={!canEdit}
                       />
                       <p className="text-xs text-muted-foreground">
@@ -328,12 +317,11 @@ export function CatalogPageForm({
                         min={0}
                         className="w-32"
                         value={form.iconColor}
-                        onChange={(e) => update('iconColor', parseInt(e.target.value, 10) || 0)}
+                        onChange={(e) => update("iconColor", parseInt(e.target.value, 10) || 0)}
                         disabled={!canEdit}
                       />
                       <p className="text-xs text-muted-foreground">
-                        Legacy tint value. Leave at default unless you need to match a specific
-                        theme.
+                        Legacy tint value. Leave at default unless you need to match a specific theme.
                       </p>
                     </div>
                   </div>
@@ -361,12 +349,10 @@ export function CatalogPageForm({
                     >
                       <span>
                         {child.caption}
-                        <span className="ml-2 text-muted-foreground font-mono text-xs">
-                          #{child.id}
-                        </span>
+                        <span className="ml-2 text-muted-foreground font-mono text-xs">#{child.id}</span>
                       </span>
-                      <Badge variant={child.enabled === '1' ? 'default' : 'outline'}>
-                        {child.enabled === '1' ? 'Enabled' : 'Disabled'}
+                      <Badge variant={child.enabled === "1" ? "default" : "outline"}>
+                        {child.enabled === "1" ? "Enabled" : "Disabled"}
                       </Badge>
                     </Link>
                   ))}
@@ -389,13 +375,8 @@ export function CatalogPageForm({
                   <CatalogIcon iconImage={form.iconImage} size={36} />
                 </div>
                 <div className="min-w-0">
-                  <p className="truncate text-sm font-medium">{form.caption || 'Untitled'}</p>
-                  <Badge
-                    className={cn(
-                      'mt-1 h-5 px-1.5 text-[10px] font-mono border-0',
-                      layoutColorClass,
-                    )}
-                  >
+                  <p className="truncate text-sm font-medium">{form.caption || "Untitled"}</p>
+                  <Badge className={cn("mt-1 h-5 px-1.5 text-[10px] font-mono border-0", layoutColorClass)}>
                     {form.pageLayout}
                   </Badge>
                 </div>
@@ -407,24 +388,24 @@ export function CatalogPageForm({
                   id="tg-enabled"
                   label="Enabled"
                   description="Active in the catalog"
-                  checked={form.enabled === '1'}
-                  onChange={(v) => update('enabled', v ? '1' : '0')}
+                  checked={form.enabled === "1"}
+                  onChange={(v) => update("enabled", v ? "1" : "0")}
                   disabled={!canEdit}
                 />
                 <ToggleRow
                   id="tg-visible"
                   label="Visible"
                   description="Shown in navigation"
-                  checked={form.visible === '1'}
-                  onChange={(v) => update('visible', v ? '1' : '0')}
+                  checked={form.visible === "1"}
+                  onChange={(v) => update("visible", v ? "1" : "0")}
                   disabled={!canEdit}
                 />
                 <ToggleRow
                   id="tg-club"
                   label="Club Only"
                   description="Requires HC subscription"
-                  checked={form.clubOnly === '1'}
-                  onChange={(v) => update('clubOnly', v ? '1' : '0')}
+                  checked={form.clubOnly === "1"}
+                  onChange={(v) => update("clubOnly", v ? "1" : "0")}
                   disabled={!canEdit}
                 />
               </div>
@@ -471,7 +452,7 @@ export function CatalogPageForm({
         </div>
       </div>
     </form>
-  )
+  );
 }
 
 // ── Toggle row ─────────────────────────────────────────────────
@@ -484,12 +465,12 @@ function ToggleRow({
   onChange,
   disabled,
 }: {
-  id: string
-  label: string
-  description: string
-  checked: boolean
-  onChange: (v: boolean) => void
-  disabled?: boolean
+  id: string;
+  label: string;
+  description: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
 }) {
   return (
     <div className="flex items-start justify-between gap-3">
@@ -501,7 +482,7 @@ function ToggleRow({
       </div>
       <Switch id={id} checked={checked} onCheckedChange={onChange} disabled={disabled} />
     </div>
-  )
+  );
 }
 
 // ── Text field with counter ────────────────────────────────────
@@ -514,12 +495,12 @@ function _TextField({
   disabled,
   max,
 }: {
-  id: string
-  label: string
-  value: string
-  onChange: (v: string) => void
-  disabled?: boolean
-  max?: number
+  id: string;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  max?: number;
 }) {
   return (
     <div className="space-y-2">
@@ -539,7 +520,7 @@ function _TextField({
         maxLength={max}
       />
     </div>
-  )
+  );
 }
 
 function TextareaField({
@@ -551,13 +532,13 @@ function TextareaField({
   rows = 3,
   max,
 }: {
-  id: string
-  label: string
-  value: string
-  onChange: (v: string) => void
-  disabled?: boolean
-  rows?: number
-  max?: number
+  id: string;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  rows?: number;
+  max?: number;
 }) {
   return (
     <div className="space-y-2">
@@ -578,7 +559,7 @@ function TextareaField({
         maxLength={max}
       />
     </div>
-  )
+  );
 }
 
 // ── Layout select with color swatch ────────────────────────────
@@ -588,9 +569,9 @@ function LayoutSelect({
   onChange,
   disabled,
 }: {
-  value: string
-  onChange: (v: string) => void
-  disabled?: boolean
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
 }) {
   return (
     <Select value={value} onValueChange={onChange} disabled={disabled}>
@@ -599,19 +580,19 @@ function LayoutSelect({
       </SelectTrigger>
       <SelectContent>
         {CATALOG_LAYOUTS.map((layout) => {
-          const colorClass = LAYOUT_COLORS[layout] || 'bg-muted text-muted-foreground'
+          const colorClass = LAYOUT_COLORS[layout] || "bg-muted text-muted-foreground";
           return (
             <SelectItem key={layout} value={layout}>
               <span className="flex items-center gap-2">
-                <span className={cn('inline-block h-2 w-2 rounded-full', colorClass)} />
+                <span className={cn("inline-block h-2 w-2 rounded-full", colorClass)} />
                 {layout}
               </span>
             </SelectItem>
-          )
+          );
         })}
       </SelectContent>
     </Select>
-  )
+  );
 }
 
 // ── Parent page combobox with search ────────────────────────────
@@ -623,16 +604,16 @@ function ParentCombobox({
   currentPageId,
   disabled,
 }: {
-  value: number
-  onChange: (id: number) => void
-  pages: { id: number; caption: string }[]
-  currentPageId: number
-  disabled?: boolean
+  value: number;
+  onChange: (id: number) => void;
+  pages: { id: number; caption: string }[];
+  currentPageId: number;
+  disabled?: boolean;
 }) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
 
-  const options = pages.filter((p) => p.id !== currentPageId)
-  const selected = value === -1 ? { id: -1, caption: 'Root' } : pages.find((p) => p.id === value)
+  const options = pages.filter((p) => p.id !== currentPageId);
+  const selected = value === -1 ? { id: -1, caption: "Root" } : pages.find((p) => p.id === value);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -648,7 +629,7 @@ function ParentCombobox({
           {selected ? (
             <span className="truncate">
               <span className="text-muted-foreground font-mono text-xs mr-1.5">
-                {selected.id === -1 ? '—' : `#${selected.id}`}
+                {selected.id === -1 ? "—" : `#${selected.id}`}
               </span>
               {selected.caption}
             </span>
@@ -667,11 +648,11 @@ function ParentCombobox({
               <CommandItem
                 value="root"
                 onSelect={() => {
-                  onChange(-1)
-                  setOpen(false)
+                  onChange(-1);
+                  setOpen(false);
                 }}
               >
-                <Check className={cn('mr-2 h-4 w-4', value === -1 ? 'opacity-100' : 'opacity-0')} />
+                <Check className={cn("mr-2 h-4 w-4", value === -1 ? "opacity-100" : "opacity-0")} />
                 <span className="text-muted-foreground font-mono text-xs mr-1.5">—</span>
                 Root
               </CommandItem>
@@ -680,13 +661,11 @@ function ParentCombobox({
                   key={page.id}
                   value={`${page.id} ${page.caption}`}
                   onSelect={() => {
-                    onChange(page.id)
-                    setOpen(false)
+                    onChange(page.id);
+                    setOpen(false);
                   }}
                 >
-                  <Check
-                    className={cn('mr-2 h-4 w-4', value === page.id ? 'opacity-100' : 'opacity-0')}
-                  />
+                  <Check className={cn("mr-2 h-4 w-4", value === page.id ? "opacity-100" : "opacity-0")} />
                   <span className="text-muted-foreground font-mono text-xs mr-1.5">#{page.id}</span>
                   <span className="truncate">{page.caption}</span>
                 </CommandItem>
@@ -696,5 +675,5 @@ function ParentCombobox({
         </Command>
       </PopoverContent>
     </Popover>
-  )
+  );
 }