@djangocfg/layouts 2.1.426 → 2.1.427

package/src/layouts/SettingsLayout/SettingsForm.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import { Preloader } from '@djangocfg/ui-core/components';
+
+import { SettingsShell } from './components';
+import { SettingsProvider } from './context';
+import { buildBuiltinSections, BUILTIN_GROUP } from './sections';
+import type { SettingsFormProps, SettingsSection } from './types';
+
+/**
+ * SettingsForm — the inline (non-dialog) settings surface.
+ *
+ * Composition:
+ *   SettingsProvider  (resolved sections, active selection, search)
+ *     SettingsShell   (nav rail + detail panel)
+ *
+ * Built-in sections get their data/labels/save from `useProfileSave` directly
+ * (no context wrapper) — see sections/useProfileSave.
+ *
+ * Selection is uncontrolled by default (local state); pass `activeSection` +
+ * `onSectionChange` to control it (the dialog does this, bound to its store).
+ * Built-in sections are merged ahead of app `sections`; ids must be unique.
+ */
+export const SettingsForm: React.FC<SettingsFormProps> = ({
+  title,
+  sections: appSections = [],
+  groups,
+  builtins = {},
+  initialSection,
+  searchable = true,
+  enableDeleteAccount = true,
+  activeSection,
+  onSectionChange,
+  onUnauthenticated,
+  className,
+  bare = false,
+}: SettingsFormProps) => {
+  const t = useAppT();
+  const { user, isLoading } = useAuth();
+
+  // Built-ins first, then app sections. Memoized so JSX identity is stable.
+  const allSections = useMemo<SettingsSection[]>(() => {
+    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount });
+    return [...builtin, ...appSections];
+  }, [builtins, enableDeleteAccount, appSections]);
+
+  // Ensure the built-in group exists/ordered even if the app passed its own groups.
+  const allGroups = useMemo(() => {
+    const provided = groups ?? [];
+    return provided.some((g) => g.id === BUILTIN_GROUP.id)
+      ? provided
+      : [BUILTIN_GROUP, ...provided];
+  }, [groups]);
+
+  // Uncontrolled selection fallback.
+  const [localActive, setLocalActive] = useState<string | null>(initialSection ?? null);
+  const isControlled = activeSection !== undefined;
+  const resolvedActive = isControlled ? activeSection ?? null : localActive;
+  const handleActiveChange = (id: string) => {
+    if (!isControlled) setLocalActive(id);
+    onSectionChange?.(id);
+  };
+
+  React.useEffect(() => {
+    if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
+  }, [onUnauthenticated, user, isLoading]);
+
+  if (isLoading) {
+    return (
+      <Preloader
+        variant="fullscreen"
+        text={t('ui.states.loading')}
+        size="lg"
+        backdrop
+        backdropOpacity={80}
+      />
+    );
+  }
+
+  // Default to "Settings" — this surface is broader than the old Profile page.
+  const resolvedTitle = title ?? 'Settings';
+
+  return (
+    <SettingsProvider
+      title={resolvedTitle}
+      sections={allSections}
+      groups={allGroups}
+      searchable={searchable}
+      activeId={resolvedActive}
+      onActiveChange={handleActiveChange}
+      initialSection={initialSection}
+    >
+      <SettingsShell bare={bare} className={className} />
+    </SettingsProvider>
+  );
+};

package/src/layouts/SettingsLayout/components/ApiKeySection/ApiKeySection.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { Check, FlaskConical, KeyRound, Loader2, RefreshCw } from 'lucide-react';
+import moment from 'moment';
+import React from 'react';
+
+import {
+  Badge,
+  Button,
+  CopyButton,
+  Preloader,
+  SettingRow,
+  SettingsBlock,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { ApiKeyProvider, useApiKeyContext } from './context';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function formatDate(iso: string | null, fallback: string): string {
+  if (!iso) return fallback;
+  return moment.utc(iso).local().format('MMM D, YYYY');
+}
+
+/** Returns true if the backend already masked the key (contains •). */
+function isMasked(key: string): boolean {
+  return key.includes('•');
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Inner component (uses context)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ApiKeyCard() {
+  const {
+    labels,
+    apiKey,
+    reissuedAt,
+    createdAt,
+    isLoading,
+    error,
+    isArmed,
+    arm,
+    disarm,
+    regenerate,
+    isRegenerating,
+    isFresh,
+    dismissFresh,
+    testKey,
+    isTesting,
+    testResult,
+  } = useApiKeyContext();
+
+  if (isLoading) {
+    return <Preloader variant="inline" className="py-10" />;
+  }
+
+  const masked = apiKey ? isMasked(apiKey) : false;
+  const displayKey = apiKey ?? '—';
+
+  // Title-row state badge (read-only "Active" indicator).
+  const titleDescription = (
+    <span className="inline-flex items-center gap-2">
+      {apiKey && <Badge variant="secondary" className="text-xs">Active</Badge>}
+      <span>{labels.description}</span>
+    </span>
+  );
+
+  // Action buttons (arm/regenerate/test) for the title row.
+  const actions = isArmed ? (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="destructive"
+        size="sm"
+        onClick={regenerate}
+        disabled={isRegenerating}
+      >
+        {isRegenerating
+          ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.regenerating}</>
+          : labels.confirmRegenerate}
+      </Button>
+      <Button variant="ghost" size="sm" onClick={disarm} disabled={isRegenerating}>
+        Cancel
+      </Button>
+    </div>
+  ) : (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={arm}
+        disabled={!apiKey || isRegenerating}
+      >
+        <RefreshCw className="mr-2 h-4 w-4" />
+        {labels.regenerate}
+      </Button>
+
+      {/* Test button only when we have a fresh (full) key */}
+      {isFresh && (
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={testKey}
+          disabled={isTesting}
+        >
+          {isTesting
+            ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.testing}</>
+            : <><FlaskConical className="mr-2 h-4 w-4" />{labels.test}</>}
+        </Button>
+      )}
+    </div>
+  );
+
+  return (
+    <SettingsBlock>
+      <SettingRow
+        label={labels.title}
+        description={titleDescription}
+        action={actions}
+      />
+
+      {/* Fresh-key banner — subtle, primary-tinted note */}
+      {isFresh && (
+        <div className="flex items-center gap-2 rounded-control bg-accent px-3 py-2 text-sm text-foreground">
+          <KeyRound className="w-4 h-4 flex-shrink-0 text-primary" />
+          <span className="flex-1">This is your new API key — copy it now. It will be masked when you leave this page.</span>
+          <Button variant="ghost" size="sm" className="h-7 px-2" onClick={dismissFresh}>
+            <Check className="w-4 h-4 mr-1" />
+            {labels.done}
+          </Button>
+        </div>
+      )}
+
+      {/* Test result banner */}
+      {testResult !== null && (
+        <div className={cn(
+          'flex items-center gap-2 rounded-control px-3 py-2 text-sm',
+          testResult
+            ? 'bg-accent text-foreground'
+            : 'bg-destructive/10 text-destructive',
+        )}>
+          <FlaskConical className="w-4 h-4 flex-shrink-0" />
+          <span>{testResult ? labels.testSuccess : labels.testFailed}</span>
+        </div>
+      )}
+
+      {/* API key value row */}
+      {apiKey && (
+        <SettingRow label="API key" stacked>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 min-w-0 rounded-control bg-muted px-3 py-2.5 font-mono text-sm select-all">
+              <span className={cn(masked && 'tracking-widest')}>
+                {displayKey}
+              </span>
+            </div>
+
+            {/* Copy only when the key is fresh (full key after regenerate) */}
+            {isFresh && <CopyButton value={apiKey} />}
+          </div>
+        </SettingRow>
+      )}
+
+      {/* Dates */}
+      {apiKey && createdAt && (
+        <SettingRow label={labels.created} value={formatDate(createdAt, '—')} />
+      )}
+      {apiKey && (
+        <SettingRow label={labels.reissued} value={formatDate(reissuedAt, labels.neverReissued)} />
+      )}
+
+      {error && (
+        <p className="pt-3 text-sm text-destructive">{error}</p>
+      )}
+    </SettingsBlock>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Export (wraps with provider)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ApiKeySection: React.FC = () => (
+  <ApiKeyProvider>
+    <ApiKeyCard />
+  </ApiKeyProvider>
+);

package/src/layouts/SettingsLayout/components/SettingsNav.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useSettingsContext } from '../context';
+import { SettingsNavItem } from './SettingsNavItem';
+import { SettingsSearch } from './SettingsSearch';
+
+/**
+ * Left rail: optional title, optional search, then grouped section items.
+ * Groups with a label render a small uppercase header; the default (unlabelled)
+ * group renders bare. Empty search results show a quiet "no matches" line.
+ */
+export const SettingsNav: React.FC = () => {
+  const { title, groups, searchable, activeId, setActive, query } = useSettingsContext();
+
+  const hasResults = groups.some((g) => g.sections.length > 0);
+
+  return (
+    <nav
+      role="tablist"
+      aria-orientation="vertical"
+      className="flex h-full flex-col gap-3"
+    >
+      <div className="px-1">
+        <h2 className="px-2.5 text-sm font-semibold text-foreground">{title}</h2>
+      </div>
+
+      {searchable && (
+        <div className="px-1">
+          <SettingsSearch />
+        </div>
+      )}
+
+      <div className="flex-1 space-y-4 overflow-y-auto px-1 pb-2">
+        {!hasResults && query && (
+          <p className="px-2.5 py-6 text-center text-xs text-muted-foreground">
+            No matching settings
+          </p>
+        )}
+
+        {groups.map((group) =>
+          group.sections.length === 0 ? null : (
+            <div key={group.id} className="space-y-0.5">
+              {group.label && (
+                <div
+                  className={cn(
+                    'px-2.5 pb-1 text-[11px] font-medium uppercase tracking-wider',
+                    'text-muted-foreground/70',
+                  )}
+                >
+                  {group.label}
+                </div>
+              )}
+              {group.sections.map((section) => (
+                <SettingsNavItem
+                  key={section.id}
+                  section={section}
+                  active={section.id === activeId}
+                  onSelect={setActive}
+                />
+              ))}
+            </div>
+          ),
+        )}
+      </div>
+    </nav>
+  );
+};

package/src/layouts/SettingsLayout/components/SettingsNavItem.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { SettingsSection } from '../types';
+
+interface SettingsNavItemProps {
+  section: SettingsSection;
+  active: boolean;
+  onSelect: (id: string) => void;
+}
+
+/**
+ * One row in the settings nav rail: icon + label, with a trailing badge slot.
+ * Active state uses the semantic `accent` token (theme-correct in dark/light)
+ * rather than a hard-coded colour, matching the rest of the design system.
+ */
+export const SettingsNavItem: React.FC<SettingsNavItemProps> = ({
+  section,
+  active,
+  onSelect,
+}) => {
+  const Icon = section.icon;
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={() => onSelect(section.id)}
+      className={cn(
+        'group flex w-full items-center gap-2.5 rounded-control px-2.5 py-2 text-left text-sm',
+        'outline-none transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+        active
+          // Solid raised surface (popover-level) — pops off the muted rail in
+          // BOTH themes (on light the rail-vs-accent gap is only ~2% and
+          // invisible; an elevated surface fixes that). No shadow — flat fill.
+          ? 'bg-popover text-foreground font-medium'
+          : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+      )}
+    >
+      {Icon && (
+        <Icon
+          className={cn(
+            'size-4 shrink-0 transition-colors',
+            active ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground',
+          )}
+        />
+      )}
+      <span className="flex-1 truncate">{section.label}</span>
+      {section.badge && <span className="shrink-0">{section.badge}</span>}
+    </button>
+  );
+};

package/src/layouts/SettingsLayout/components/SettingsPanel.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+
+import { ScrollArea } from '@djangocfg/ui-core/components';
+
+import { useSettingsContext } from '../context';
+
+/**
+ * Right side: the active section's detail. Renders a header (title + optional
+ * description) pinned above an independently scrolling body. The header falls
+ * back to the section's nav label when no explicit `title` is given.
+ *
+ * Only the active section's `content` is in the tree, so heavy panels don't
+ * render until selected (and unmount when the dialog closes — Radix default).
+ */
+export const SettingsPanel: React.FC = () => {
+  const { active } = useSettingsContext();
+
+  if (!active) {
+    return (
+      <div className="flex h-full items-center justify-center p-10">
+        <p className="text-sm text-muted-foreground">No section selected</p>
+      </div>
+    );
+  }
+
+  const heading = active.title ?? active.label;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <header className="shrink-0 border-b border-border px-6 py-4 md:px-8 md:py-5">
+        <h1 className="text-lg font-semibold tracking-tight text-foreground">{heading}</h1>
+        {active.description && (
+          <p className="mt-1 text-sm text-muted-foreground">{active.description}</p>
+        )}
+      </header>
+
+      <ScrollArea className="min-h-0 flex-1">
+        {/* key forces a fresh subtree per section: resets scroll + transient
+            form state when switching, which is the expected settings UX. */}
+        <div key={active.id} className="px-6 py-6 md:px-8">
+          {active.content}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};

package/src/layouts/SettingsLayout/components/SettingsSearch.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+
+import { useAppT } from '@djangocfg/i18n';
+import { cn } from '@djangocfg/ui-core/lib';
+import { Search, X } from 'lucide-react';
+
+import { useSettingsContext } from '../context';
+
+/**
+ * Search box atop the nav rail. Filters sections by label + keywords (logic in
+ * useSettingsSections). Mirrors the Claude.ai settings search affordance: a
+ * quiet, rounded field with a leading magnifier and a clear button.
+ */
+export const SettingsSearch: React.FC = () => {
+  const { query, setQuery } = useSettingsContext();
+  const t = useAppT();
+  const placeholder = t('ui.select.search') || 'Search';
+
+  return (
+    <div className="relative">
+      <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        className={cn(
+          'rounded-control h-9 w-full border border-border bg-muted/40 pl-8 pr-8 text-sm',
+          'text-foreground placeholder:text-muted-foreground',
+          'outline-none transition-[border-color,background-color,box-shadow]',
+          // Crisp thin accent outline (matches ui-core Input), no blurry halo.
+          'focus-visible:border-ring focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring',
+        )}
+      />
+      {query && (
+        <button
+          type="button"
+          onClick={() => setQuery('')}
+          aria-label="Clear search"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/layouts/SettingsLayout/components/SettingsShell.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useSettingsContext } from '../context';
+import { SettingsNav } from './SettingsNav';
+import { SettingsPanel } from './SettingsPanel';
+import { SettingsTabs } from './SettingsTabs';
+
+interface SettingsShellProps {
+  /** Drop the outer rounding/border when embedded in a bare dialog. */
+  bare?: boolean;
+  className?: string;
+}
+
+/**
+ * Master/detail shell that reshapes for mobile (Claude settings pattern):
+ *   - desktop (≥md): vertical nav rail on the left + detail panel on the right.
+ *   - mobile  (<md): a horizontal scrollable tab strip on top + panel below.
+ *
+ * The breakpoint is read with `useIsMobile` (SSR-safe; false on the server,
+ * re-syncs on mount) rather than CSS, because the two layouts use genuinely
+ * different nav components (vertical grouped rail vs. flat horizontal strip),
+ * not just a flex-direction flip.
+ *
+ * Height-bounded by its container (the dialog sets max-height); the panel
+ * scrolls independently inside it.
+ */
+export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, className }) => {
+  const isMobile = useIsMobile();
+  const { title } = useSettingsContext();
+
+  const frame = cn(
+    'flex h-full min-h-0 w-full flex-col overflow-hidden',
+    !bare && 'rounded-[var(--radius-dialog)] border border-border bg-background',
+    className,
+  );
+
+  // ── Mobile: title header + tab strip on top, panel below ──
+  if (isMobile) {
+    return (
+      <div className={frame}>
+        <div className="shrink-0 bg-muted">
+          {/* Title row — `pr-12` leaves room for the dialog's corner close button. */}
+          <div className="px-4 pb-2 pt-3.5 pr-12">
+            <h2 className="text-base font-semibold tracking-tight text-foreground">{title}</h2>
+          </div>
+          {/* Tabs on their own row (below the header), so nothing overlaps the X. */}
+          <div className="border-b border-border px-1.5 pb-2">
+            <SettingsTabs />
+          </div>
+        </div>
+        <section className="min-h-0 flex-1 bg-card">
+          <SettingsPanel />
+        </section>
+      </div>
+    );
+  }
+
+  // ── Desktop: rail + panel ──
+  return (
+    <div className={cn(frame, 'flex-row')}>
+      {/* Nav rail — recessed surface, one notch below the content panel. */}
+      <aside className="shrink-0 border-r border-border bg-muted p-3 md:w-52">
+        <SettingsNav />
+      </aside>
+
+      {/* Detail panel — the lighter, primary surface. */}
+      <section className="min-h-0 flex-1 bg-card">
+        <SettingsPanel />
+      </section>
+    </div>
+  );
+};

package/src/layouts/SettingsLayout/components/SettingsTabs.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useSettingsContext } from '../context';
+
+/**
+ * Mobile nav — a horizontal, scrollable strip of section chips (Claude's
+ * phone settings pattern). Shown instead of the vertical rail below `md`.
+ * Groups are flattened (a phone strip has no room for group headers); the
+ * active chip is a solid pill.
+ */
+export const SettingsTabs: React.FC = () => {
+  const { groups, activeId, setActive } = useSettingsContext();
+  const sections = groups.flatMap((g) => g.sections);
+  const activeRef = React.useRef<HTMLButtonElement>(null);
+
+  // Keep the active chip in view when it changes (e.g. deep-link).
+  React.useEffect(() => {
+    activeRef.current?.scrollIntoView({ inline: 'center', block: 'nearest' });
+  }, [activeId]);
+
+  return (
+    <div
+      role="tablist"
+      aria-orientation="horizontal"
+      className="flex gap-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      {sections.map((section) => {
+        const active = section.id === activeId;
+        return (
+          <button
+            key={section.id}
+            ref={active ? activeRef : undefined}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => setActive(section.id)}
+            // Text-only chips on mobile (no icons — keeps the strip compact, like Claude).
+            className={cn(
+              'rounded-control inline-flex shrink-0 items-center px-3 py-1.5 text-sm whitespace-nowrap',
+              'outline-none transition-colors focus-visible:ring-1 focus-visible:ring-ring',
+              active
+                ? 'bg-popover font-medium text-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            {section.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};