@djangocfg/layouts 2.1.591 → 2.1.592

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

@@ -13,6 +13,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { useSettingsLocale } from '../../i18n';
 import { ApiKeyProvider, useApiKeyContext } from './context';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -26,12 +27,12 @@ import { ApiKeyProvider, useApiKeyContext } from './context';
 //
 // A bare `new Date(iso)` would read a timestamp without a zone designator as
 // LOCAL time; the API sends UTC, so the `Z` is appended when it is missing.
-function formatDate(iso: string | null, fallback: string): string {
+function formatDate(iso: string | null, fallback: string, locale: string): string {
   if (!iso) return fallback;
   const utc = /(?:Z|[+-]\d{2}:?\d{2})$/.test(iso) ? iso : `${iso}Z`;
   const date = new Date(utc);
   if (Number.isNaN(date.getTime())) return fallback;
-  return new Intl.DateTimeFormat('en-US', {
+  return new Intl.DateTimeFormat(locale, {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
@@ -48,6 +49,7 @@ function isMasked(key: string): boolean {
 // ─────────────────────────────────────────────────────────────────────────────
 
 function ApiKeyCard() {
+  const locale = useSettingsLocale();
   const {
     labels,
     apiKey,
@@ -79,7 +81,7 @@ function ApiKeyCard() {
   // SettingRow renders `description` inside a block, so this is valid.
   const titleDescription = (
     <div className="flex flex-wrap items-center gap-2">
-      {apiKey && <Badge variant="secondary" className="text-xs">Active</Badge>}
+      {apiKey && <Badge variant="secondary" className="text-xs">{labels.active}</Badge>}
       <span>{labels.description}</span>
     </div>
   );
@@ -127,7 +129,7 @@ function ApiKeyCard() {
       {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>
+          <span className="flex-1">{labels.freshKey}</span>
           <Button variant="ghost" size="sm" className="h-7 px-2" onClick={dismissFresh}>
             <Check className="w-4 h-4 mr-1" />
             {labels.done}
@@ -150,7 +152,7 @@ function ApiKeyCard() {
 
       {/* API key value row */}
       {apiKey && (
-        <SettingRow label="API key" stacked>
+        <SettingRow label={labels.keyRow} 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')}>
@@ -181,10 +183,10 @@ function ApiKeyCard() {
 
       {/* Dates */}
       {apiKey && createdAt && (
-        <SettingRow label={labels.created} value={formatDate(createdAt, '—')} />
+        <SettingRow label={labels.created} value={formatDate(createdAt, '—', locale)} />
       )}
       {apiKey && (
-        <SettingRow label={labels.reissued} value={formatDate(reissuedAt, labels.neverReissued)} />
+        <SettingRow label={labels.reissued} value={formatDate(reissuedAt, labels.neverReissued, locale)} />
       )}
 
       {error && (

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

@@ -5,45 +5,9 @@ import React, { createContext, useCallback, useContext, useMemo, useState } from
 import { useApiKey } from '@djangocfg/api/hooks';
 import { toast } from '@djangocfg/ui-core/hooks';
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Labels (hardcoded English — same pattern as TwoFactorSection)
-// ─────────────────────────────────────────────────────────────────────────────
+import { useSettingsCopy, type SettingsCopy } from '../../i18n';
 
-export interface ApiKeyLabels {
-  title: string;
-  description: string;
-  created: string;
-  reissued: string;
-  neverReissued: string;
-  regenerate: string;
-  confirmRegenerate: string;
-  regenerating: string;
-  regenerated: string;
-  failedToRegenerate: string;
-  done: string;
-  test: string;
-  testing: string;
-  testSuccess: string;
-  testFailed: string;
-}
-
-const LABELS: ApiKeyLabels = {
-  title: 'API Key',
-  description: 'Your personal API key for programmatic access',
-  created: 'Created',
-  reissued: 'Last reissued',
-  neverReissued: 'Never reissued',
-  regenerate: 'Regenerate API Key',
-  confirmRegenerate: 'Click to confirm',
-  regenerating: 'Regenerating…',
-  regenerated: 'API key regenerated',
-  failedToRegenerate: 'Failed to regenerate API key',
-  done: 'Done',
-  test: 'Test API Key',
-  testing: 'Testing…',
-  testSuccess: 'API key is valid',
-  testFailed: 'API key test failed',
-};
+export type ApiKeyLabels = SettingsCopy['apiKey'];
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Context
@@ -83,6 +47,7 @@ export const useApiKeyContext = (): ApiKeyContextValue => {
 export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { apiKey, reissuedAt, createdAt, isLoading, isRegenerating, isTesting, regenerate, testKey, refresh } = useApiKey();
 
+  const LABELS = useSettingsCopy().apiKey;
   const [isArmed, setIsArmed] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [testResult, setTestResult] = useState<boolean | null>(null);
@@ -109,7 +74,7 @@ export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       setError(LABELS.failedToRegenerate);
       toast.error(LABELS.failedToRegenerate);
     }
-  }, [regenerate]);
+  }, [regenerate, LABELS]);
 
   const handleTest = useCallback(async () => {
     if (!apiKey) return;
@@ -126,7 +91,7 @@ export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       setTestResult(false);
       toast.error(LABELS.testFailed);
     }
-  }, [apiKey, testKey]);
+  }, [apiKey, testKey, LABELS]);
 
   const value = useMemo<ApiKeyContextValue>(() => ({
     labels: LABELS,
@@ -146,7 +111,7 @@ export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     isTesting,
     testResult,
   }), [
-    apiKey, reissuedAt, createdAt, isLoading, error,
+    LABELS, apiKey, reissuedAt, createdAt, isLoading, error,
     isArmed, arm, disarm, handleRegenerate, isRegenerating, isFresh, dismissFresh,
     handleTest, isTesting, testResult,
   ]);

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

@@ -7,6 +7,7 @@ import { toast } from '@djangocfg/ui-core/hooks';
 import { useAuth } from '@djangocfg/api/auth';
 import { Avatar, AvatarFallback, Button } from '@djangocfg/ui-core/components';
 
+import { useSettingsCopy } from '../i18n';
 import { profileLogger } from '../../../utils/logger';
 
 const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
@@ -16,7 +17,7 @@ const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
  * settings rows, not inside one. Avatar isn't a form field like "First name";
  * it's the user's identity, so it gets the canonical Apple-ID / Slack / Linear
  * treatment: large centered avatar → name/email → a single "Change avatar"
- * action.
+ * action, on a soft primary-tinted hero card.
  *
  * UX: the avatar is a preview only; "Change avatar" opens the picker and
  * uploads immediately (no Save/Cancel step). The preview is optimistic — shown
@@ -24,6 +25,7 @@ const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
  * The whole avatar is also clickable for a faster path.
  */
 export const AvatarSection = () => {
+  const copy = useSettingsCopy();
   const { user, uploadAvatar } = useAuth();
   const inputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
@@ -70,13 +72,19 @@ export const AvatarSection = () => {
   const initials = user?.initials || 'UN';
 
   return (
-    <div className="flex flex-col items-center gap-3 py-2">
+    <div
+      className={
+        'flex flex-col items-center gap-3 rounded-2xl border border-foreground/5 px-6 pb-6 pt-8 ' +
+        // Soft hero wash tinted by the theme primary — works in light and dark.
+        'bg-[radial-gradient(ellipse_at_50%_0%,color-mix(in_oklab,var(--primary)_22%,transparent),transparent_70%),linear-gradient(to_bottom,color-mix(in_oklab,var(--primary)_6%,transparent),transparent)]'
+      }
+    >
       <button
         type="button"
         onClick={handlePick}
         disabled={isUploading}
         className="group relative rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-        aria-label="Change avatar"
+        aria-label={copy.account.changeAvatar}
       >
         <Avatar className="h-16 w-16 overflow-hidden rounded-full ring-1 ring-foreground/10 transition-transform group-hover:scale-105 md:h-20 md:w-20">
           {displayUrl ? (

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

@@ -10,11 +10,11 @@ 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)
+ * Groups with a label render a small muted 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 { groups, searchable, activeId, setActive, query } = useSettingsContext();
 
   const hasResults = groups.some((g) => g.sections.length > 0);
 
@@ -22,12 +22,8 @@ export const SettingsNav: React.FC = () => {
     <nav
       role="tablist"
       aria-orientation="vertical"
-      className="flex h-full flex-col gap-3"
+      className="flex h-full flex-col gap-2"
     >
-      <div className="px-1">
-        <h2 className="px-2.5 text-sm font-semibold text-foreground">{title}</h2>
-      </div>
-
       {searchable && (
         <div className="px-1">
           <SettingsSearch />
@@ -47,8 +43,8 @@ export const SettingsNav: React.FC = () => {
               {group.label && (
                 <div
                   className={cn(
-                    'px-2.5 pb-1 text-[11px] font-medium uppercase tracking-wider',
-                    'text-muted-foreground/70',
+                    'px-2.5 pb-1 pt-1 text-xs',
+                    'text-muted-foreground',
                   )}
                 >
                   {group.label}

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

@@ -31,22 +31,20 @@ export const SettingsNavItem: React.FC<SettingsNavItemProps> = ({
       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',
+        'group flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-base',
         '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',
+          // Neutral foreground overlay, like the app sidebar — theme-agnostic.
+          ? 'bg-foreground/10 text-foreground'
+          : 'text-foreground/90 hover:bg-foreground/[0.07]',
       )}
     >
       {Icon && (
         <Icon
           className={cn(
             'size-4 shrink-0 transition-colors',
-            active ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground',
+            'text-foreground/80 group-hover:text-foreground',
           )}
         />
       )}

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

@@ -7,9 +7,9 @@ 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.
+ * Right side: the active section's detail in an independently scrolling body.
+ * The heading is screen-reader only (the nav already names the section); the
+ * visible structure comes from each section's own blocks, like Claude.
  *
  * 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).
@@ -29,17 +29,12 @@ export const SettingsPanel: React.FC = () => {
 
   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>
+      <h1 className="sr-only">{heading}</h1>
 
       <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">
+        <div key={active.id} className="px-6 py-5 md:px-8 md:py-6">
           {active.content}
         </div>
       </ScrollArea>

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

@@ -6,6 +6,7 @@ import { useAppT } from '@djangocfg/i18n';
 import { cn } from '@djangocfg/ui-core/lib';
 import { Search, X } from 'lucide-react';
 
+import { useSettingsCopy } from '../i18n';
 import { useSettingsContext } from '../context';
 
 /**
@@ -16,6 +17,7 @@ import { useSettingsContext } from '../context';
 export const SettingsSearch: React.FC = () => {
   const { query, setQuery } = useSettingsContext();
   const t = useAppT();
+  const copy = useSettingsCopy();
   const placeholder = t('ui.select.search') || 'Search';
 
   return (
@@ -28,18 +30,18 @@ export const SettingsSearch: React.FC = () => {
         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',
+          'h-8 w-full rounded-lg border border-transparent bg-foreground/[0.05] pl-8 pr-8 text-base',
           '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',
+          'focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring',
         )}
       />
       {query && (
         <button
           type="button"
           onClick={() => setQuery('')}
-          aria-label="Clear search"
+          aria-label={copy.search.clear}
           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" />

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

@@ -8,7 +8,6 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { useSettingsContext } from '../context';
 import { SettingsNav } from './SettingsNav';
 import { SettingsPanel } from './SettingsPanel';
-import { SettingsRailFooter } from './SettingsRailFooter';
 import { SettingsTabs } from './SettingsTabs';
 
 interface SettingsShellProps {
@@ -44,18 +43,15 @@ export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, clas
   if (isMobile) {
     return (
       <div className={frame}>
-        <div className="shrink-0 bg-muted">
+        <div className="shrink-0 bg-background">
           {/* Title row — `pr-12` leaves room for the dialog's corner close button. */}
           <div className="flex items-center gap-3 px-4 pb-2 pt-3.5 pr-12">
             <h2 className="flex-1 truncate text-base font-semibold tracking-tight text-foreground">
               {title}
             </h2>
-            {/* Global prefs (theme + language) mirror the desktop rail footer —
-                on phones they ride the header instead of a bottom rail. */}
-            <SettingsRailFooter horizontal className="border-t-0" />
           </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">
+          <div className="border-b border-foreground/10 px-1.5 pb-2">
             <SettingsTabs />
           </div>
         </div>
@@ -66,23 +62,20 @@ export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, clas
     );
   }
 
-  // ── Desktop: rail + panel ──
+  // ── Desktop: header bar, then rail + panel on one surface ──
   return (
-    <div className={cn(frame, 'flex-row')}>
-      {/* Nav rail — recessed surface, one notch below the content panel.
-          Column layout so the section list scrolls in the middle and the
-          global-preferences footer (theme + language) pins to the bottom. */}
-      <aside className="flex shrink-0 flex-col border-r border-border bg-muted p-3 md:w-52">
-        <div className="min-h-0 flex-1">
+    <div className={frame}>
+      <header className="flex h-11 shrink-0 items-center border-b border-foreground/[0.12] px-5 pr-14">
+        <h2 className="truncate text-lg font-medium text-foreground">{title}</h2>
+      </header>
+      <div className="flex min-h-0 flex-1">
+        <aside className="flex w-[13.25rem] shrink-0 flex-col border-e border-foreground/10 bg-background p-3">
           <SettingsNav />
-        </div>
-        <SettingsRailFooter className="mt-3" />
-      </aside>
-
-      {/* Detail panel — the lighter, primary surface. */}
-      <section className="min-h-0 flex-1 bg-card">
-        <SettingsPanel />
-      </section>
+        </aside>
+        <section className="min-h-0 flex-1">
+          <SettingsPanel />
+        </section>
+      </div>
     </div>
   );
 };