EvoScientist-WebUI/src/app/components/ConfigDialog.tsx

"use client";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { useCollapseAgentActions } from "@/lib/uiSettings";
import { RegistryEditor } from "@/app/components/RegistryEditor";

interface ConfigDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function ConfigDialog({ open, onOpenChange }: ConfigDialogProps) {
  // The hook owns the UI-preference localStorage round-trip.
  const { value: collapseAgentActions, setValue: setCollapseAgentActions } =
    useCollapseAgentActions();

  return (
    <Dialog
      open={open}
      onOpenChange={onOpenChange}
    >
      <DialogContent
        className="sm:max-w-6xl"
        onPointerDownOutside={(event) => event.preventDefault()}
        onInteractOutside={(event) => event.preventDefault()}
        onEscapeKeyDown={(event) => event.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle>Model registry</DialogTitle>
          <DialogDescription>
            Manage providers, models, credentials and defaults. Admin only;
            every save is validated by the backend.
          </DialogDescription>
        </DialogHeader>
        {open && <RegistryEditor />}
        <div className="flex items-start gap-2">
          <input
            id="collapseAgentActions"
            type="checkbox"
            checked={collapseAgentActions}
            onChange={(e) => setCollapseAgentActions(e.target.checked)}
            aria-label="Collapse agent actions by default"
            className="mt-1 size-4 rounded border-border accent-[var(--brand)]"
          />
          <Label
            htmlFor="collapseAgentActions"
            className="text-sm font-normal leading-snug"
          >
            Collapse agent actions by default
          </Label>
        </div>
        <DialogFooter>
          <Button onClick={() => onOpenChange(false)}>Close</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}