design: apply Architectural Minimalist style to all Settings pages

- settings/layout: serif h1 title + uppercase tracking subtitle, matching Agents page
- SettingsNav: uppercase tracking-wider tabs with foreground underline on active
- All settings pages (general, ai, appearance, profile, mcp, about, data):
  remove duplicate h1 (now in layout header), replace with uppercase section label
- notes.ts: decouple history guards from global userAISettings
- note-document-info-panel: add 'Save version' button with loading feedback
This commit is contained in:
Antigravity
2026-05-09 07:39:35 +00:00
parent 97b08e5d0b
commit 1446463f04
9 changed files with 43 additions and 38 deletions

View File

@@ -11,10 +11,9 @@ export default function AboutSettingsPage() {
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold tracking-tight text-foreground">{t('about.title')}</h1>
<p className="text-muted-foreground mt-1">{t('about.description')}</p>
</div>
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
{t('about.description')}
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* App info */}

View File

@@ -6,9 +6,8 @@ export function AISettingsHeader() {
const { t } = useLanguage()
return (
<div>
<h1 className="text-2xl font-bold tracking-tight text-foreground">{t('aiSettings.title')}</h1>
<p className="text-muted-foreground mt-1">{t('aiSettings.description')}</p>
</div>
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
{t('aiSettings.description')}
</p>
)
}

View File

@@ -163,10 +163,10 @@ export function AppearanceSettingsClient({
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold tracking-tight text-foreground">{t('appearance.title')}</h1>
<p className="text-muted-foreground mt-1">{t('appearance.description')}</p>
</div>
{/* Section label — architectural style */}
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
{t('appearance.description') || "Personnalisez l'interface"}
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<SelectCard

View File

@@ -118,11 +118,10 @@ export default function DataSettingsPage() {
}
return (
<div className="max-w-4xl mx-auto space-y-8 p-6">
<div className="space-y-1">
<h1 className="text-3xl font-bold tracking-tight text-foreground">{t('dataManagement.title')}</h1>
<p className="text-muted-foreground">{t('dataManagement.toolsDescription')}</p>
</div>
<div className="space-y-8">
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
{t('dataManagement.toolsDescription')}
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Export card */}

View File

@@ -50,11 +50,9 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
return (
<div className="space-y-8">
{/* Page title */}
<div>
<h1 className="text-2xl font-bold tracking-tight text-foreground">{t('generalSettings.title')}</h1>
<p className="text-muted-foreground mt-1">{t('generalSettings.description')}</p>
</div>
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
{t('generalSettings.description')}
</p>
{/* 2-column card grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">

View File

@@ -9,17 +9,29 @@ export default function SettingsLayout({
}) {
return (
<div className="flex flex-col h-full">
{/* Horizontal Tab Navigation */}
<header className="flex items-center gap-1 px-8 bg-background border-b border-border shrink-0">
<SettingsNav />
{/* Architectural header — matches Agents page */}
<header className="flex flex-col px-12 pt-10 pb-0 border-b border-border/40 shrink-0">
<div className="flex items-end justify-between mb-6">
<div>
<h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight">
Paramètres
</h1>
<p className="text-[11px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-2">
Configuration &amp; Préférences
</p>
</div>
</div>
{/* Tab nav flush to the border-bottom of header */}
<SettingsNav className="-mb-px" />
</header>
{/* Page Content */}
<div className="flex-1 overflow-y-auto">
<div className="max-w-5xl mx-auto px-8 py-8 space-y-8">
<div className="max-w-5xl mx-auto px-12 py-10 space-y-8">
{children}
</div>
</div>
</div>
)
}

View File

@@ -14,10 +14,9 @@ export default async function McpSettingsPage() {
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold tracking-tight text-foreground">Paramètres MCP</h1>
<p className="text-muted-foreground mt-1">Gérez vos clés API et serveurs MCP connectés.</p>
</div>
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
Gérez vos clés API et serveurs MCP connectés.
</p>
<McpSettingsPanel initialKeys={keys} serverStatus={serverStatus} />
</div>
)

View File

@@ -13,10 +13,9 @@ export function ProfileForm({ user, userAISettings }: { user: any; userAISetting
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold tracking-tight text-foreground">{t('profile.title')}</h1>
<p className="text-muted-foreground mt-1">{t('profile.description')}</p>
</div>
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
{t('profile.description')}
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Profile info card */}

View File

@@ -34,16 +34,16 @@ export function SettingsNav({ className }: SettingsNavProps) {
const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
return (
<nav className={cn('flex items-center gap-1', className)}>
<nav className={cn('flex items-center gap-6 border-b border-border/40', className)}>
{sections.map((section) => (
<Link
key={section.id}
href={section.href}
className={cn(
'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap',
'flex items-center gap-2 pb-3 pt-4 text-xs font-semibold uppercase tracking-wider transition-colors whitespace-nowrap border-b-2',
isActive(section.href)
? 'border-primary text-primary'
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
? 'border-primary text-foreground'
: 'border-transparent text-muted-foreground hover:text-foreground'
)}
>
{section.icon}