settings are accordions

2026-01-06 21:24:04 +00:00
parent d6336d1bec
commit e6c37998b9
5 changed files with 628 additions and 480 deletions
@@ -8,6 +8,7 @@
      "name": "job-ops-orchestrator",
      "version": "1.0.0",
      "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
        "@radix-ui/react-alert-dialog": "^1.1.15",
        "@radix-ui/react-checkbox": "^1.3.2",
        "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -1329,6 +1330,36 @@
      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="
    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-alert-dialog": {
      "version": "1.1.15",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
@@ -1424,6 +1455,35 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-collection": {
      "version": "1.1.7",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -18,6 +18,7 @@
    "pipeline:run": "tsx src/server/pipeline/run.ts"
  },
  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-checkbox": "^1.3.2",
    "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -17,6 +17,12 @@ import {
  AlertDialogTitle,
  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -299,12 +305,13 @@ export const SettingsPage: React.FC = () => {
        <p className="text-sm text-muted-foreground">Configure runtime behavior for this app.</p>
      </div>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Model</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
+      <Accordion type="multiple" className="w-full space-y-4">
+        <AccordionItem value="model" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">Model</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium">Override model</div>
                <Input
@@ -330,15 +337,16 @@ export const SettingsPage: React.FC = () => {
                  <div className="break-words font-mono text-xs">{defaultModel || "—"}</div>
                </div>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Pipeline Webhook</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
+        <AccordionItem value="pipeline-webhook" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">Pipeline Webhook</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium">Pipeline status webhook URL</div>
                <Input
@@ -364,15 +372,16 @@ export const SettingsPage: React.FC = () => {
                  <div className="break-words font-mono text-xs">{defaultPipelineWebhookUrl || "—"}</div>
                </div>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Job Complete Webhook</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
+        <AccordionItem value="job-complete-webhook" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">Job Complete Webhook</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium">Job completion webhook URL</div>
                <Input
@@ -398,15 +407,16 @@ export const SettingsPage: React.FC = () => {
                  <div className="break-words font-mono text-xs">{defaultJobCompleteWebhookUrl || "—"}</div>
                </div>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">UKVisaJobs Extractor</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
+        <AccordionItem value="ukvisajobs" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">UKVisaJobs Extractor</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium">Max jobs to fetch</div>
                <Input
@@ -442,15 +452,16 @@ export const SettingsPage: React.FC = () => {
                  <div className="break-words font-mono text-xs">{defaultUkvisajobsMaxJobs}</div>
                </div>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Search Terms</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
+        <AccordionItem value="search-terms" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">Search Terms</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium">Global search terms</div>
                <textarea
@@ -488,15 +499,16 @@ export const SettingsPage: React.FC = () => {
                  <div className="break-words font-mono text-xs">{(defaultSearchTerms || []).join(', ') || "—"}</div>
                </div>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">JobSpy Scraper</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
+        <AccordionItem value="jobspy" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">JobSpy Scraper</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-6">
              <div className="grid gap-6 md:grid-cols-2">
                <div className="space-y-2">
                  <div className="text-sm font-medium">Location</div>
@@ -612,15 +624,16 @@ export const SettingsPage: React.FC = () => {
                  </div>
                </div>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Resume Projects</CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
+        <AccordionItem value="resume-projects" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold">Resume Projects</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium">Max projects included</div>
                <Input
@@ -728,26 +741,16 @@ export const SettingsPage: React.FC = () => {
                  })}
                </TableBody>
              </Table>
-        </CardContent>
-      </Card>
-
-      <div className="flex flex-wrap gap-2">
-        <Button onClick={handleSave} disabled={isLoading || isSaving || !canSave}>
-          {isSaving ? "Saving..." : "Save"}
-        </Button>
-        <Button variant="outline" onClick={handleReset} disabled={isLoading || isSaving || !settings}>
-          Reset to default
-        </Button>
            </div>
+          </AccordionContent>
+        </AccordionItem>

-      <Card className="border-destructive/20 bg-destructive/5">
-        <CardHeader>
-          <CardTitle className="text-destructive">Danger Zone</CardTitle>
-          <CardDescription>
-            Irreversible actions that modify your database.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
+        <AccordionItem value="danger-zone" className="border rounded-lg px-4 border-destructive/20 bg-destructive/5">
+          <AccordionTrigger className="hover:no-underline py-4">
+            <span className="text-base font-semibold text-destructive">Danger Zone</span>
+          </AccordionTrigger>
+          <AccordionContent className="pb-4">
+            <div className="space-y-4">
              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div className="space-y-0.5">
                  <div className="text-sm font-medium">Clear Discovered Jobs</div>
@@ -811,8 +814,19 @@ export const SettingsPage: React.FC = () => {
                  </AlertDialogContent>
                </AlertDialog>
              </div>
-        </CardContent>
-      </Card>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={handleSave} disabled={isLoading || isSaving || !canSave}>
+          {isSaving ? "Saving..." : "Save"}
+        </Button>
+        <Button variant="outline" onClick={handleReset} disabled={isLoading || isSaving || !settings}>
+          Reset to default
+        </Button>
+      </div>
    </main>
  )
 }
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
@@ -4,7 +4,22 @@ export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
  },
  plugins: [],
 } satisfies Config;