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:
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 & 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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user