Add an Appearance settings page with color theme and corner options

src/components/layout/Sidebar.tsx

@@ -6,6 +6,7 @@
 
 import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import * as LucideIcons from 'lucide-react';
 const { ChevronDown, Lock } = LucideIcons;
 import { cn } from '@/lib/utils';
@@ -321,6 +322,7 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
 export function Sidebar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const { t } = useTranslation();
   const activeSection = useUIStore((s) => s.activeSection);
   const setActiveSection = useUIStore((s) => s.setActiveSection);
   const sidebarOpen = useUIStore((s) => s.sidebarOpen);
@@ -369,6 +371,9 @@ export function Sidebar() {
     if (first) navigate(`/${target.name}/${first}`);
   };
 
+  const isAppearanceActive =
+    location.pathname === '/Appearance' || location.pathname.startsWith('/Appearance/');
+
   return (
     <>
       <div
@@ -398,6 +403,22 @@ export function Sidebar() {
           </nav>
         </ScrollArea>
 
+        <div className="border-t px-2 py-2 [[data-radius='square']_&]:px-0">
+          <Button
+            variant="ghost"
+            data-sidebar-active={isAppearanceActive || undefined}
+            className={cn(
+              sidebarItemClass,
+              sidebarItemSquareClass,
+              isAppearanceActive && 'bg-accent text-accent-foreground hover:bg-accent',
+            )}
+            onClick={() => navigate('/Appearance')}
+          >
+            <LucideIcons.Palette className="h-4 w-4 shrink-0" />
+            <span className="truncate">{t('appearance.label', 'Appearance')}</span>
+          </Button>
+        </div>
+
         {layouts.length > 1 && (
           <TooltipProvider>
             <div className="flex items-center justify-around border-t bg-background px-2 py-2 [[data-radius='square']_&]:px-0 [[data-radius='square']_&]:py-0">

src/features/appearance/AppearancePage.tsx

@@ -0,0 +1,129 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Moon, Sun } from 'lucide-react';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { COLOR_THEMES, useUIStore } from '@/stores/uiStore';
+
+export function AppearancePage() {
+  const { t } = useTranslation();
+  const theme = useUIStore((s) => s.theme);
+  const setTheme = useUIStore((s) => s.setTheme);
+  const colorTheme = useUIStore((s) => s.colorTheme);
+  const setColorTheme = useUIStore((s) => s.setColorTheme);
+  const radius = useUIStore((s) => s.radius);
+  const setRadius = useUIStore((s) => s.setRadius);
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">{t('appearance.label', 'Appearance')}</h1>
+        <p className="text-sm text-muted-foreground">
+          {t('appearance.description', 'Customize how the interface looks and feels.')}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('appearance.mode', 'Mode')}</CardTitle>
+          <CardDescription>{t('appearance.modeDescription', 'Switch between light and dark mode.')}</CardDescription>
+        </CardHeader>
+        <CardContent className="grid grid-cols-2 gap-3">
+          <OptionCard
+            selected={theme === 'light'}
+            onClick={() => setTheme('light')}
+            label={t('appearance.light', 'Light')}
+          >
+            <Sun className="h-5 w-5" />
+          </OptionCard>
+          <OptionCard selected={theme === 'dark'} onClick={() => setTheme('dark')} label={t('appearance.dark', 'Dark')}>
+            <Moon className="h-5 w-5" />
+          </OptionCard>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('appearance.colorTheme', 'Color theme')}</CardTitle>
+          <CardDescription>
+            {t('appearance.colorThemeDescription', 'Pick the accent color used across the interface.')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          {COLOR_THEMES.map((entry) => (
+            <OptionCard
+              key={entry.value}
+              selected={colorTheme === entry.value}
+              onClick={() => setColorTheme(entry.value)}
+              label={t(entry.labelKey, entry.fallback)}
+            >
+              <span className="h-6 w-6 rounded-full border border-border" style={{ background: entry.swatch }} />
+            </OptionCard>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('appearance.corners', 'Corners')}</CardTitle>
+          <CardDescription>
+            {t('appearance.cornersDescription', 'Choose between rounded and square corners. Applies to every theme.')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid grid-cols-2 gap-3">
+          <OptionCard
+            selected={radius === 'rounded'}
+            onClick={() => setRadius('rounded')}
+            label={t('appearance.rounded', 'Rounded')}
+          >
+            <span className="h-6 w-10 rounded-md border-2 border-current" />
+          </OptionCard>
+          <OptionCard
+            selected={radius === 'square'}
+            onClick={() => setRadius('square')}
+            label={t('appearance.square', 'Square')}
+          >
+            <span className="h-6 w-10 rounded-none border-2 border-current" />
+          </OptionCard>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function OptionCard({
+  selected,
+  onClick,
+  label,
+  children,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  label: string;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={selected}
+      className={cn(
+        'relative flex flex-col items-center gap-2 rounded-lg border bg-field p-4 text-sm transition-colors',
+        selected
+          ? 'border-primary text-foreground'
+          : 'border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground',
+      )}
+    >
+      {selected && <Check className="absolute right-2 top-2 h-4 w-4 text-primary" />}
+      {children}
+      <span>{label}</span>
+    </button>
+  );
+}

src/i18n/en.json

@@ -2,11 +2,15 @@
   "accounts": "Accounts",
   "appearance": {
     "colorTheme": "Color theme",
+    "colorThemeDescription": "Pick the accent color used across the interface.",
     "corners": "Corners",
+    "cornersDescription": "Choose between rounded and square corners. Applies to every theme.",
     "dark": "Dark",
+    "description": "Customize how the interface looks and feels.",
     "label": "Appearance",
     "light": "Light",
     "mode": "Mode",
+    "modeDescription": "Switch between light and dark mode.",
     "rounded": "Rounded",
     "square": "Square",
     "switchToDark": "Switch to dark mode",

src/pages/AdminPanel.tsx

@@ -21,6 +21,7 @@ import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
 import { LoadingFallback } from '@/components/common/LoadingFallback';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { friendlyName } from '@/hooks/useGlobalSearch';
+import { AppearancePage } from '@/features/appearance/AppearancePage';
 import {
   findFirstAccessibleLinkInLayout,
   findFirstVisibleLinkInLayout,
@@ -81,6 +82,7 @@ export default function AdminPanel() {
   const setSession = useAuthStore((s) => s.setSession);
   const accessToken = useAuthStore((s) => s.accessToken);
   const setActiveSection = useUIStore((s) => s.setActiveSection);
+  const activeSection = useUIStore((s) => s.activeSection);
   const sidebarOpen = useUIStore((s) => s.sidebarOpen);
   const { canViewObject } = usePermissions();
 
@@ -92,6 +94,7 @@ export default function AdminPanel() {
   // Tab title mirrors the sidebar label (search index) so it always matches
   // what the user sees in the navigation, e.g. "MTA-STS · Settings".
   const pageTitle = useMemo(() => {
+    if (section === 'Appearance') return t('appearance.label', 'Appearance');
     if (!section) return t('dashboard.title', 'Dashboard');
     if (!viewName) return section;
     const entry =
@@ -207,6 +210,15 @@ export default function AdminPanel() {
       }
     }
 
+    if (section === 'Appearance') {
+      // Appearance is a client-side page outside the schema layouts: keep the
+      // sidebar bound to a real section while it is open.
+      if (!layouts.some((l) => l.name === activeSection)) {
+        setActiveSection(layouts[0]?.name ?? '');
+      }
+      return;
+    }
+
     if (section) {
       setActiveSection(section);
       return;
@@ -222,6 +234,7 @@ export default function AdminPanel() {
   }, [
     section,
     viewName,
+    activeSection,
     schema,
     setActiveSection,
     navigate,
@@ -284,7 +297,11 @@ export default function AdminPanel() {
           <div className="p-6">
             <div className="mx-auto w-full max-w-7xl">
               <ErrorBoundary>
+                {section === 'Appearance' ? (
+                  <AppearancePage />
+                ) : (
                   <MainContent viewName={viewName} id={id} section={section} />
+                )}
               </ErrorBoundary>
             </div>
           </div>