gawells/Stalwart-webui
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add an Appearance settings page with color theme and corner options

Browse Source
This commit is contained in:
Steven RYDELL
2026-07-29 11:21:44 +02:00
parent dca6082039
commit 2ac9a6b90e
4 changed files with 172 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Sidebar.tsx
+21
View File
@@ -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
+129
View File
@@ -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
+4
View File
@@ -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
+18 -1
View File
@@ -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>
<MainContent viewName={viewName} id={id} section={section} />
{section === 'Appearance' ? (
<AppearancePage />
) : (
<MainContent viewName={viewName} id={id} section={section} />
)}
</ErrorBoundary>
</div>
</div>