feat(appearance): mark the Readability section as experimental

Transparency-off, density and per-size typography are best-effort while the token migration is ongoing, so the section carries an Experimental badge. Adds the i18n key across all locales.

client/src/components/Settings/AppearanceSettingsTab.tsx

@@ -255,7 +255,15 @@ export default function AppearanceSettingsTab(): React.ReactElement {
       </Section>
 
       {/* ── Readability ─────────────────────────────────────────── */}
-      <Section title={tr('settings.appearance.readability', 'Readability')} icon={Eye}>
+      <Section
+        title={tr('settings.appearance.readability', 'Readability')}
+        icon={Eye}
+        badge={
+          <span className="text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-full bg-warning-soft text-warning">
+            {tr('settings.appearance.experimental', 'Experimental')}
+          </span>
+        }
+      >
         <ToggleRow
           label={tr('settings.appearance.transparency', 'Transparency')}
           hint={tr('settings.appearance.transparencyHint', 'Glassy translucent surfaces. Turn off for solid, higher-contrast backgrounds.')}

client/src/components/Settings/Section.tsx

@@ -4,15 +4,17 @@ import type { LucideIcon } from 'lucide-react'
 interface SectionProps {
   title: string
   icon: LucideIcon
+  badge?: React.ReactNode
   children: React.ReactNode
 }
 
-export default function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
+export default function Section({ title, icon: Icon, badge, children }: SectionProps): React.ReactElement {
   return (
     <div className="rounded-xl border overflow-hidden bg-surface-card border-edge" style={{ marginBottom: 24 }}>
       <div className="px-6 py-4 border-b flex items-center gap-2 border-edge-secondary">
         <Icon className="w-5 h-5 text-content-secondary" />
         <h2 className="font-semibold text-content">{title}</h2>
+        {badge}
       </div>
       <div className="p-6 space-y-4">
         {children}

shared/src/i18n/ar/settings.ts

@@ -392,6 +392,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/br/settings.ts

@@ -402,6 +402,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/cs/settings.ts

@@ -399,6 +399,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/de/settings.ts

@@ -406,6 +406,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Zwischenüberschriften',
   'settings.appearance.example.normal': 'Ortsnamen, Beschreibungen',
   'settings.appearance.example.small': 'Adressen, Labels',
+  'settings.appearance.experimental': 'Experimentell',
 };
 
 export default settings;

shared/src/i18n/en/settings.ts

@@ -400,6 +400,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/es/settings.ts

@@ -405,6 +405,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/fr/settings.ts

@@ -410,6 +410,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/gr/settings.ts

@@ -411,6 +411,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/hu/settings.ts

@@ -404,6 +404,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/id/settings.ts

@@ -403,6 +403,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/it/settings.ts

@@ -403,6 +403,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/ja/settings.ts

@@ -380,6 +380,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/ko/settings.ts

@@ -395,6 +395,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/nl/settings.ts

@@ -403,6 +403,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/pl/settings.ts

@@ -404,6 +404,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/ru/settings.ts

@@ -405,6 +405,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/sv/settings.ts

@@ -400,6 +400,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/tr/settings.ts

@@ -400,6 +400,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/uk/settings.ts

@@ -404,6 +404,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/zh-TW/settings.ts

@@ -384,6 +384,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;

shared/src/i18n/zh/settings.ts

@@ -382,6 +382,7 @@ const settings: TranslationStrings = {
   'settings.appearance.example.medium': 'Sub-headings',
   'settings.appearance.example.normal': 'Place names, descriptions',
   'settings.appearance.example.small': 'Addresses, labels',
+  'settings.appearance.experimental': 'Experimental',
 };
 
 export default settings;