From 4576d37c7ad44b1e026719a78a9682e2b30883fd Mon Sep 17 00:00:00 2001 From: Linus Rath Date: Wed, 11 Mar 2026 11:11:27 +0100 Subject: [PATCH] feat: enhance settings page with mobile layout and add tab groups to localization files --- app/[locale]/settings/page.tsx | 108 +++++++++++++++++++++++++++++---- locales/de/common.json | 8 ++- locales/en/common.json | 5 ++ locales/es/common.json | 8 ++- locales/fr/common.json | 8 ++- locales/it/common.json | 8 ++- locales/ja/common.json | 8 ++- locales/nl/common.json | 8 ++- locales/pt/common.json | 8 ++- 9 files changed, 151 insertions(+), 18 deletions(-) diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx index a58dd15b..8a866a87 100644 --- a/app/[locale]/settings/page.tsx +++ b/app/[locale]/settings/page.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'; import { useRouter } from '@/i18n/navigation'; import { useTranslations } from 'next-intl'; -import { ArrowLeft, Settings as SettingsIcon } from 'lucide-react'; +import { ArrowLeft, ChevronRight, Settings as SettingsIcon } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { AppearanceSettings } from '@/components/settings/appearance-settings'; import { EmailSettings } from '@/components/settings/email-settings'; @@ -16,6 +16,7 @@ import { TemplateSettings } from '@/components/settings/template-settings'; import { AdvancedSettings } from '@/components/settings/advanced-settings'; import { FolderSettings } from '@/components/settings/folder-settings'; import { useAuthStore } from '@/stores/auth-store'; +import { useIsDesktop } from '@/hooks/use-media-query'; import { cn } from '@/lib/utils'; type Tab = 'appearance' | 'email' | 'account' | 'identities' | 'vacation' | 'calendar' | 'filters' | 'templates' | 'folders' | 'advanced'; @@ -25,6 +26,8 @@ export default function SettingsPage() { const t = useTranslations('settings'); const { client, isAuthenticated } = useAuthStore(); const [activeTab, setActiveTab] = useState('appearance'); + const [mobileShowContent, setMobileShowContent] = useState(false); + const isDesktop = useIsDesktop(); useEffect(() => { if (!isAuthenticated) { @@ -53,6 +56,98 @@ export default function SettingsPage() { { id: 'advanced', label: t('tabs.advanced') }, ]; + const handleTabSelect = (tabId: Tab) => { + setActiveTab(tabId); + if (!isDesktop) { + setMobileShowContent(true); + } + }; + + const activeTabLabel = tabs.find((tab) => tab.id === activeTab)?.label ?? ''; + + const renderTabContent = () => ( + <> + {activeTab === 'appearance' && } + {activeTab === 'email' && } + {activeTab === 'account' && } + {activeTab === 'identities' && } + {activeTab === 'vacation' && } + {activeTab === 'calendar' && } + {activeTab === 'filters' && } + {activeTab === 'templates' && } + {activeTab === 'folders' && } + {activeTab === 'advanced' && } + + ); + + // Mobile layout + if (!isDesktop) { + // Mobile: show content view + if (mobileShowContent) { + return ( +
+ {/* Mobile content header */} +
+ +

{activeTabLabel}

+
+ + {/* Content */} +
+
+ {renderTabContent()} +
+
+
+ ); + } + + // Mobile: show tab list + return ( +
+ {/* Mobile header */} +
+ +
+ +

{t('title')}

+
+
+ + {/* Tab list */} +
+
+ {tabs.map((tab) => ( + + ))} +
+
+
+ ); + } + + // Desktop layout return (
{/* Settings Sidebar */} @@ -104,16 +199,7 @@ export default function SettingsPage() { {/* Active Tab Content */}
- {activeTab === 'appearance' && } - {activeTab === 'email' && } - {activeTab === 'account' && } - {activeTab === 'identities' && } - {activeTab === 'vacation' && } - {activeTab === 'calendar' && } - {activeTab === 'filters' && } - {activeTab === 'templates' && } - {activeTab === 'folders' && } - {activeTab === 'advanced' && } + {renderTabContent()}
diff --git a/locales/de/common.json b/locales/de/common.json index be7590ca..f043e9c2 100644 --- a/locales/de/common.json +++ b/locales/de/common.json @@ -446,7 +446,13 @@ "advanced": "Erweitert", "calendar": "Kalender", "filters": "Filter", - "templates": "Vorlagen" + "templates": "Vorlagen", + "folders": "Ordner" + }, + "tab_groups": { + "general": "Allgemein", + "account": "Konto", + "organization": "Organisation" }, "appearance": { "title": "Darstellung", diff --git a/locales/en/common.json b/locales/en/common.json index eb5f75fa..880587e8 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -457,6 +457,11 @@ "templates": "Templates", "folders": "Folders" }, + "tab_groups": { + "general": "General", + "account": "Account", + "organization": "Organization" + }, "appearance": { "title": "Appearance", "description": "Customize the look and feel of your webmail", diff --git a/locales/es/common.json b/locales/es/common.json index 529cecb3..ec7368f2 100644 --- a/locales/es/common.json +++ b/locales/es/common.json @@ -446,7 +446,13 @@ "advanced": "Avanzado", "calendar": "Calendario", "filters": "Filtros", - "templates": "Plantillas" + "templates": "Plantillas", + "folders": "Carpetas" + }, + "tab_groups": { + "general": "General", + "account": "Cuenta", + "organization": "Organización" }, "appearance": { "title": "Apariencia", diff --git a/locales/fr/common.json b/locales/fr/common.json index bf2909df..0c0d02b5 100644 --- a/locales/fr/common.json +++ b/locales/fr/common.json @@ -446,7 +446,13 @@ "advanced": "Avancé", "calendar": "Calendrier", "filters": "Filtres", - "templates": "Modèles" + "templates": "Modèles", + "folders": "Dossiers" + }, + "tab_groups": { + "general": "Général", + "account": "Compte", + "organization": "Organisation" }, "appearance": { "title": "Apparence", diff --git a/locales/it/common.json b/locales/it/common.json index 7833b8f1..a22ca085 100644 --- a/locales/it/common.json +++ b/locales/it/common.json @@ -446,7 +446,13 @@ "advanced": "Avanzate", "calendar": "Calendario", "filters": "Filtri", - "templates": "Modelli" + "templates": "Modelli", + "folders": "Cartelle" + }, + "tab_groups": { + "general": "Generale", + "account": "Account", + "organization": "Organizzazione" }, "appearance": { "title": "Aspetto", diff --git a/locales/ja/common.json b/locales/ja/common.json index cd363142..1e0cab76 100644 --- a/locales/ja/common.json +++ b/locales/ja/common.json @@ -446,7 +446,13 @@ "advanced": "詳細設定", "calendar": "カレンダー", "filters": "フィルター", - "templates": "テンプレート" + "templates": "テンプレート", + "folders": "フォルダー" + }, + "tab_groups": { + "general": "一般", + "account": "アカウント", + "organization": "整理" }, "appearance": { "title": "外観", diff --git a/locales/nl/common.json b/locales/nl/common.json index b26fd5de..c9b0fc1f 100644 --- a/locales/nl/common.json +++ b/locales/nl/common.json @@ -446,7 +446,13 @@ "advanced": "Geavanceerd", "calendar": "Agenda", "filters": "Filters", - "templates": "Sjablonen" + "templates": "Sjablonen", + "folders": "Mappen" + }, + "tab_groups": { + "general": "Algemeen", + "account": "Account", + "organization": "Organisatie" }, "appearance": { "title": "Uiterlijk", diff --git a/locales/pt/common.json b/locales/pt/common.json index 920cc096..9431fd59 100644 --- a/locales/pt/common.json +++ b/locales/pt/common.json @@ -446,7 +446,13 @@ "advanced": "Avançado", "calendar": "Calendário", "filters": "Filtros", - "templates": "Modelos" + "templates": "Modelos", + "folders": "Pastas" + }, + "tab_groups": { + "general": "Geral", + "account": "Conta", + "organization": "Organização" }, "appearance": { "title": "Aparência",