openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add categorized settings tabs (#30)

Browse Source 
Six tabs (General, Meals, Budget, Shopping, Calendar, Account) replace
the flat single-page layout. Active tab persists via sessionStorage.
Calendar tab auto-activates on OAuth redirect. Tab bar is sticky.
All labels translated in de/en/es/it/sv.
This commit is contained in:
Ulas
2026-04-06 14:33:49 +02:00
parent 81ee1eaf18
commit 61e663ef72
8 changed files with 401 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+9
View File
@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
## [0.16.0] - 2026-04-06
### Added
- Settings: categorized tab navigation - six tabs (General, Meals, Budget, Shopping, Calendar, Account) replace the flat scrolling layout (#30)
- Settings: active tab persists across page navigations via sessionStorage
- Settings: Calendar tab is automatically activated when returning from a Google/Apple OAuth callback
- Settings: tab bar is sticky so it stays visible while scrolling through tab content
- Settings: all tab labels fully translated in de, en, es, it, sv
## [0.15.0] - 2026-04-06
### Changed
public/locales/de.json
+10 -18
View File
@@ -30,7 +30,6 @@
"confirm": "Bestätigen",
"undo": "Rückgängig"
},
"nav": {
"dashboard": "Übersicht",
"tasks": "Aufgaben",
@@ -45,7 +44,6 @@
"navigation": "Navigation",
"quickActions": "Schnellaktionen"
},
"dashboard": {
"title": "Übersicht",
"greetingMorning": "Guten Morgen, {{name}}",
@@ -81,7 +79,6 @@
"allDay": "Ganztägig",
"shoppingMore": "+{{count}} weitere"
},
"tasks": {
"title": "Aufgaben",
"newTask": "Neue Aufgabe",
@@ -149,7 +146,6 @@
"listView": "Listenansicht",
"kanbanView": "Kanban-Ansicht"
},
"shopping": {
"title": "Einkauf",
"noLists": "Keine Listen",
@@ -190,7 +186,6 @@
"catDrugstore": "Drogerie",
"catMisc": "Sonstiges"
},
"meals": {
"title": "Essensplan",
"noMealPlanned": "Kein Essen geplant",
@@ -239,7 +234,6 @@
"recipeUrlPlaceholder": "https://…",
"openRecipe": "Rezept öffnen"
},
"calendar": {
"title": "Kalender",
"newEvent": "Neuer Termin",
@@ -272,7 +266,7 @@
"locationPlaceholder": "Optional",
"assignedLabel": "Zugewiesen an",
"assignedNobody": "- Niemand -",
"colorLabel": "Farbe",
"colorLabel": "Farbe {{color}}",
"descriptionLabel": "Beschreibung",
"descriptionPlaceholder": "Optional…",
"popupEdit": "Bearbeiten",
@@ -310,10 +304,8 @@
"dayLongThursday": "Donnerstag",
"dayLongFriday": "Freitag",
"dayLongSaturday": "Samstag",
"timeSuffix": "Uhr",
"colorLabel": "Farbe {{color}}"
"timeSuffix": "Uhr"
},
"notes": {
"title": "Pinnwand",
"newNote": "Neue Notiz",
@@ -352,7 +344,6 @@
"formatQuote": "Zitat",
"formatDivider": "Trennlinie"
},
"contacts": {
"title": "Kontakte",
"newContact": "Neuer Kontakt",
@@ -406,7 +397,6 @@
"categoryEmergency": "Notfall",
"categoryOther": "Sonstiges"
},
"budget": {
"title": "Budget",
"newEntry": "Neuer Eintrag",
@@ -454,9 +444,15 @@
"catMisc": "Sonstiges",
"loadingIndicator": "Lade…"
},
"settings": {
"title": "Einstellungen",
"tabGeneral": "Allgemein",
"tabMeals": "Mahlzeiten",
"tabBudget": "Budget",
"tabShopping": "Einkauf",
"tabCalendar": "Kalender",
"tabAccount": "Konto",
"tabsAriaLabel": "Einstellungsbereiche",
"sectionDesign": "Design",
"sectionShopping": "Einkauf",
"shoppingCategoriesLabel": "Einkaufskategorien",
@@ -547,7 +543,6 @@
"currencyHint": "Legt die Währung für den gesamten Budget-Bereich fest.",
"currencySaved": "Währung gespeichert."
},
"login": {
"tagline": "Familienplanung. Sicher. Datenschutzfreundlich. Open Source.",
"usernameLabel": "Benutzername",
@@ -559,20 +554,17 @@
"tooManyAttempts": "Zu viele Versuche. Bitte warte kurz.",
"invalidCredentials": "Ungültige Anmeldedaten."
},
"install": {
"title": "Oikos installieren",
"subtitle": "Zur App hinzufügen",
"iosTip1": "Tippe auf ",
"iosTip2": " \u2192 \"Zum Home-Bildschirm\"",
"iosTip2": " → \"Zum Home-Bildschirm\"",
"installButton": "Installieren",
"dismissLabel": "Schließen"
},
"modal": {
"closeLabel": "Schließen"
},
"rrule": {
"freqNone": "Keine Wiederholung",
"freqDaily": "Täglich",
public/locales/en.json
+9 -17
View File
@@ -30,7 +30,6 @@
"confirm": "Confirm",
"undo": "Undo"
},
"nav": {
"dashboard": "Overview",
"tasks": "Tasks",
@@ -45,7 +44,6 @@
"navigation": "Navigation",
"quickActions": "Quick actions"
},
"dashboard": {
"title": "Overview",
"greetingMorning": "Good morning, {{name}}",
@@ -81,7 +79,6 @@
"allDay": "All day",
"shoppingMore": "+{{count}} more"
},
"tasks": {
"title": "Tasks",
"newTask": "New Task",
@@ -149,7 +146,6 @@
"listView": "List view",
"kanbanView": "Kanban view"
},
"shopping": {
"title": "Shopping",
"noLists": "No lists",
@@ -190,7 +186,6 @@
"catDrugstore": "Drugstore",
"catMisc": "Miscellaneous"
},
"meals": {
"title": "Meal Plan",
"noMealPlanned": "No meal planned",
@@ -239,7 +234,6 @@
"recipeUrlPlaceholder": "https://…",
"openRecipe": "Open recipe"
},
"calendar": {
"title": "Calendar",
"newEvent": "New Event",
@@ -272,7 +266,7 @@
"locationPlaceholder": "Optional",
"assignedLabel": "Assigned to",
"assignedNobody": "- Nobody -",
"colorLabel": "Color",
"colorLabel": "Color {{color}}",
"descriptionLabel": "Description",
"descriptionPlaceholder": "Optional…",
"popupEdit": "Edit",
@@ -310,10 +304,8 @@
"dayLongThursday": "Thursday",
"dayLongFriday": "Friday",
"dayLongSaturday": "Saturday",
"timeSuffix": "",
"colorLabel": "Color {{color}}"
"timeSuffix": ""
},
"notes": {
"title": "Board",
"newNote": "New Note",
@@ -352,7 +344,6 @@
"formatQuote": "Quote",
"formatDivider": "Divider"
},
"contacts": {
"title": "Contacts",
"newContact": "New Contact",
@@ -406,7 +397,6 @@
"categoryEmergency": "Emergency",
"categoryOther": "Other"
},
"budget": {
"title": "Budget",
"newEntry": "New Entry",
@@ -454,9 +444,15 @@
"catMisc": "Miscellaneous",
"loadingIndicator": "Loading…"
},
"settings": {
"title": "Settings",
"tabGeneral": "General",
"tabMeals": "Meals",
"tabBudget": "Budget",
"tabShopping": "Shopping",
"tabCalendar": "Calendar",
"tabAccount": "Account",
"tabsAriaLabel": "Settings sections",
"sectionDesign": "Appearance",
"sectionShopping": "Shopping",
"shoppingCategoriesLabel": "Shopping Categories",
@@ -547,7 +543,6 @@
"currencyHint": "Sets the currency used throughout the budget section.",
"currencySaved": "Currency saved."
},
"login": {
"tagline": "Family planning. Secure. Privacy-friendly. Open source.",
"usernameLabel": "Username",
@@ -559,7 +554,6 @@
"tooManyAttempts": "Too many attempts. Please wait a moment.",
"invalidCredentials": "Invalid credentials."
},
"install": {
"title": "Install Oikos",
"subtitle": "Add to home screen",
@@ -568,11 +562,9 @@
"installButton": "Install",
"dismissLabel": "Close"
},
"modal": {
"closeLabel": "Close"
},
"rrule": {
"freqNone": "No recurrence",
"freqDaily": "Daily",
public/locales/es.json
+9 -17
View File
@@ -30,7 +30,6 @@
"confirm": "Confirmar",
"undo": "Deshacer"
},
"nav": {
"dashboard": "Inicio",
"tasks": "Tareas",
@@ -45,7 +44,6 @@
"navigation": "Navegación",
"quickActions": "Acciones rápidas"
},
"dashboard": {
"title": "Inicio",
"greetingMorning": "Buenos días, {{name}}",
@@ -81,7 +79,6 @@
"allDay": "Todo el día",
"shoppingMore": "+{{count}} más"
},
"tasks": {
"title": "Tareas",
"newTask": "Nueva tarea",
@@ -149,7 +146,6 @@
"listView": "Vista de lista",
"kanbanView": "Vista Kanban"
},
"shopping": {
"title": "Compras",
"noLists": "Sin listas",
@@ -190,7 +186,6 @@
"catDrugstore": "Droguería",
"catMisc": "Otros"
},
"meals": {
"title": "Plan de comidas",
"noMealPlanned": "Sin comida planificada",
@@ -239,7 +234,6 @@
"recipeUrlPlaceholder": "https://…",
"openRecipe": "Abrir receta"
},
"calendar": {
"title": "Calendario",
"newEvent": "Nuevo evento",
@@ -272,7 +266,7 @@
"locationPlaceholder": "Opcional",
"assignedLabel": "Asignado a",
"assignedNobody": "- Nadie -",
"colorLabel": "Color",
"colorLabel": "Color {{color}}",
"descriptionLabel": "Descripción",
"descriptionPlaceholder": "Opcional…",
"popupEdit": "Editar",
@@ -310,10 +304,8 @@
"dayLongThursday": "Jueves",
"dayLongFriday": "Viernes",
"dayLongSaturday": "Sábado",
"timeSuffix": "",
"colorLabel": "Color {{color}}"
"timeSuffix": ""
},
"notes": {
"title": "Notas",
"newNote": "Nueva nota",
@@ -352,7 +344,6 @@
"formatQuote": "Cita",
"formatDivider": "Separador"
},
"contacts": {
"title": "Contactos",
"newContact": "Nuevo contacto",
@@ -406,7 +397,6 @@
"categoryEmergency": "Emergencia",
"categoryOther": "Otros"
},
"budget": {
"title": "Presupuesto",
"newEntry": "Nueva entrada",
@@ -454,9 +444,15 @@
"catMisc": "Otros",
"loadingIndicator": "Cargando…"
},
"settings": {
"title": "Ajustes",
"tabGeneral": "General",
"tabMeals": "Comidas",
"tabBudget": "Presupuesto",
"tabShopping": "Compras",
"tabCalendar": "Calendario",
"tabAccount": "Cuenta",
"tabsAriaLabel": "Secciones de configuración",
"sectionDesign": "Diseño",
"sectionShopping": "Compras",
"shoppingCategoriesLabel": "Categorías de compra",
@@ -547,7 +543,6 @@
"currencyHint": "Establece la moneda para toda la sección de presupuesto.",
"currencySaved": "Moneda guardada."
},
"login": {
"tagline": "Planificación familiar. Segura. Privada. Código abierto.",
"usernameLabel": "Nombre de usuario",
@@ -559,7 +554,6 @@
"tooManyAttempts": "Demasiados intentos. Por favor, espera un momento.",
"invalidCredentials": "Credenciales incorrectas."
},
"install": {
"title": "Instalar Oikos",
"subtitle": "Añadir a la pantalla de inicio",
@@ -568,11 +562,9 @@
"installButton": "Instalar",
"dismissLabel": "Cerrar"
},
"modal": {
"closeLabel": "Cerrar"
},
"rrule": {
"freqNone": "Sin repetición",
"freqDaily": "Diariamente",
public/locales/it.json
+9 -16
View File
@@ -30,7 +30,6 @@
"confirm": "Conferma",
"undo": "Annulla"
},
"nav": {
"dashboard": "Panoramica",
"tasks": "Compiti",
@@ -45,7 +44,6 @@
"navigation": "Navigazione",
"quickActions": "Azioni rapide"
},
"dashboard": {
"title": "Panoramica",
"greetingMorning": "Buongiorno, {{name}}",
@@ -81,7 +79,6 @@
"allDay": "Tutto il giorno",
"shoppingMore": "+{{count}} altri"
},
"tasks": {
"title": "Compiti",
"newTask": "Nuovo compito",
@@ -149,7 +146,6 @@
"listView": "Vista elenco",
"kanbanView": "Vista Kanban"
},
"shopping": {
"title": "Spesa",
"noLists": "Nessuna lista",
@@ -190,7 +186,6 @@
"catDrugstore": "Drogheria",
"catMisc": "Varie"
},
"meals": {
"title": "Piano pasti",
"noMealPlanned": "Nessun pasto pianificato",
@@ -239,7 +234,6 @@
"recipeUrlPlaceholder": "https://…",
"openRecipe": "Apri ricetta"
},
"calendar": {
"title": "Calendario",
"newEvent": "Nuovo evento",
@@ -272,7 +266,7 @@
"locationPlaceholder": "Opzionale",
"assignedLabel": "Assegnato a",
"assignedNobody": "- Nessuno -",
"colorLabel": "Colore",
"colorLabel": "Colore {{color}}",
"descriptionLabel": "Descrizione",
"descriptionPlaceholder": "Opzionale…",
"popupEdit": "Modifica",
@@ -310,10 +304,8 @@
"dayLongThursday": "Giovedì",
"dayLongFriday": "Venerdì",
"dayLongSaturday": "Sabato",
"timeSuffix": "",
"colorLabel": "Colore {{color}}"
"timeSuffix": ""
},
"notes": {
"title": "Bacheca",
"newNote": "Nuova nota",
@@ -352,7 +344,6 @@
"formatQuote": "Citazione",
"formatDivider": "Divisore"
},
"contacts": {
"title": "Contatti",
"newContact": "Nuovo contatto",
@@ -406,7 +397,6 @@
"categoryEmergency": "Emergenza",
"categoryOther": "Altro"
},
"budget": {
"title": "Bilancio",
"newEntry": "Nuova voce",
@@ -454,9 +444,15 @@
"catMisc": "Varie",
"loadingIndicator": "Caricamento…"
},
"settings": {
"title": "Impostazioni",
"tabGeneral": "Generale",
"tabMeals": "Pasti",
"tabBudget": "Budget",
"tabShopping": "Spesa",
"tabCalendar": "Calendario",
"tabAccount": "Account",
"tabsAriaLabel": "Sezioni impostazioni",
"sectionDesign": "Aspetto",
"sectionShopping": "Spesa",
"shoppingCategoriesLabel": "Categorie spesa",
@@ -547,7 +543,6 @@
"currencyHint": "Imposta la valuta utilizzata in tutta la sezione budget.",
"currencySaved": "Valuta salvata."
},
"login": {
"tagline": "Pianificazione familiare. Sicura. Rispettosa della privacy. Open source.",
"usernameLabel": "Nome utente",
@@ -559,7 +554,6 @@
"tooManyAttempts": "Troppi tentativi. Attendi un momento.",
"invalidCredentials": "Credenziali non valide."
},
"install": {
"title": "Installa Oikos",
"subtitle": "Aggiungi alla schermata home",
@@ -568,7 +562,6 @@
"installButton": "Installa",
"dismissLabel": "Chiudi"
},
"modal": {
"closeLabel": "Chiudi"
}
public/locales/sv.json
+9 -17
View File
@@ -30,7 +30,6 @@
"confirm": "Bekräfta",
"undo": "Ångra"
},
"nav": {
"dashboard": "Översikt",
"tasks": "Uppgifter",
@@ -45,7 +44,6 @@
"navigation": "Navigering",
"quickActions": "Snabba åtgärder"
},
"dashboard": {
"title": "Översikt",
"greetingMorning": "God morgon, {{name}}",
@@ -81,7 +79,6 @@
"allDay": "Hela dagen",
"shoppingMore": "+{{count}} till"
},
"tasks": {
"title": "Uppgifter",
"newTask": "Ny uppgift",
@@ -149,7 +146,6 @@
"listView": "Listvy",
"kanbanView": "Kanban-vy"
},
"shopping": {
"title": "Shopping",
"noLists": "Inga listor",
@@ -190,7 +186,6 @@
"catDrugstore": "Apotek",
"catMisc": "Diverse"
},
"meals": {
"title": "Måltidsplan",
"noMealPlanned": "Ingen måltid planerad",
@@ -239,7 +234,6 @@
"recipeUrlPlaceholder": "https://…",
"openRecipe": "Öppna recept"
},
"calendar": {
"title": "Kalender",
"newEvent": "Ny händelse",
@@ -272,7 +266,7 @@
"locationPlaceholder": "Frivillig",
"assignedLabel": "Tilldelad till",
"assignedNobody": "- Ingen -",
"colorLabel": "Färg",
"colorLabel": "Färg {{color}}",
"descriptionLabel": "Beskrivning",
"descriptionPlaceholder": "Frivillig…",
"popupEdit": "Redigera",
@@ -310,10 +304,8 @@
"dayLongThursday": "Torsdag",
"dayLongFriday": "Fredag",
"dayLongSaturday": "Lördag",
"timeSuffix": "",
"colorLabel": "Färg {{color}}"
"timeSuffix": ""
},
"notes": {
"title": "Anteckningar",
"newNote": "Ny anteckning",
@@ -352,7 +344,6 @@
"formatQuote": "Citationstecken",
"formatDivider": "Delare"
},
"contacts": {
"title": "Kontakter",
"newContact": "Ny kontakt",
@@ -406,7 +397,6 @@
"categoryEmergency": "Nödsituation",
"categoryOther": "Andra"
},
"budget": {
"title": "Budget",
"newEntry": "Nytt inlägg",
@@ -454,9 +444,15 @@
"catMisc": "Diverse",
"loadingIndicator": "Laddar…"
},
"settings": {
"title": "Inställningar",
"tabGeneral": "Allmänt",
"tabMeals": "Måltider",
"tabBudget": "Budget",
"tabShopping": "Inköp",
"tabCalendar": "Kalender",
"tabAccount": "Konto",
"tabsAriaLabel": "Inställningsavsnitt",
"sectionDesign": "Utseende",
"sectionShopping": "Inköp",
"shoppingCategoriesLabel": "Inköpskategorier",
@@ -547,7 +543,6 @@
"currencyHint": "Ställer in valutan som används i hela budgetavsnittet.",
"currencySaved": "Valuta sparad."
},
"login": {
"tagline": "Familjeplanering. Säker. Sekretessvänlig. Öppen källkod.",
"usernameLabel": "Användarnamn",
@@ -559,7 +554,6 @@
"tooManyAttempts": "För många försök. Vänta ett ögonblick.",
"invalidCredentials": "Ogiltiga användaruppgifter."
},
"install": {
"title": "Installera Oikos",
"subtitle": "Lägg till på startskärmen",
@@ -568,11 +562,9 @@
"installButton": "Installera",
"dismissLabel": "Stäng"
},
"modal": {
"closeLabel": "Stäng"
},
"rrule": {
"freqNone": "Ingen upprepning",
"freqDaily": "Dagligen",
public/pages/settings.js
+100 -44
View File
@@ -11,6 +11,7 @@ import { esc } from '/utils/html.js';
import '/components/oikos-locale-picker.js';
const SUPPORTED_CURRENCIES = ['AUD', 'CAD', 'CHF', 'CZK', 'DKK', 'EUR', 'GBP', 'HUF', 'JPY', 'NOK', 'PLN', 'SEK', 'USD'];
const SETTINGS_TAB_KEY = 'oikos:settings:tab';
function buildCurrencyOptions(selected) {
const display = typeof Intl.DisplayNames !== 'undefined'
@@ -67,6 +68,14 @@ export async function render(container, { user }) {
? (appleStatus.lastSync ? t('settings.configuredLastSync', { date: formatDateTime(appleStatus.lastSync) }) : t('settings.configured'))
: t('settings.notConnected');
const activeTab = (syncOk || syncErr)
? 'calendar'
: (sessionStorage.getItem(SETTINGS_TAB_KEY) ?? 'general');
const panelHidden = (id) => id === activeTab ? '' : ' hidden';
const btnClass = (id) => `settings-tab-btn${id === activeTab ? ' settings-tab-btn--active' : ''}`;
const btnAria = (id) => id === activeTab ? 'true' : 'false';
container.innerHTML = `
<div class="page settings-page">
<div class="page__header">
@@ -76,7 +85,17 @@ export async function render(container, { user }) {
${syncOk ? `<div class="settings-banner settings-banner--success">${syncOk === 'google' ? t('settings.syncSuccessGoogle') : t('settings.syncSuccessApple')}</div>` : ''}
${syncErr ? `<div class="settings-banner settings-banner--error">${syncErr === 'google' ? t('settings.syncErrorGoogle') : t('settings.syncErrorApple')}</div>` : ''}
<!-- Design -->
<nav class="settings-tabs" role="tablist" aria-label="${t('settings.tabsAriaLabel')}">
<button class="${btnClass('general')}" role="tab" data-tab="general" aria-selected="${btnAria('general')}">${t('settings.tabGeneral')}</button>
<button class="${btnClass('meals')}" role="tab" data-tab="meals" aria-selected="${btnAria('meals')}">${t('settings.tabMeals')}</button>
<button class="${btnClass('budget')}" role="tab" data-tab="budget" aria-selected="${btnAria('budget')}">${t('settings.tabBudget')}</button>
<button class="${btnClass('shopping')}" role="tab" data-tab="shopping" aria-selected="${btnAria('shopping')}">${t('settings.tabShopping')}</button>
<button class="${btnClass('calendar')}" role="tab" data-tab="calendar" aria-selected="${btnAria('calendar')}">${t('settings.tabCalendar')}</button>
<button class="${btnClass('account')}" role="tab" data-tab="account" aria-selected="${btnAria('account')}">${t('settings.tabAccount')}</button>
</nav>
<!-- Panel: Allgemein (Design + Sprache) -->
<div class="settings-tab-panel" data-panel="general" role="tabpanel"${panelHidden('general')}>
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionDesign')}</h2>
<div class="settings-card">
@@ -98,15 +117,16 @@ export async function render(container, { user }) {
</div>
</section>
<!-- Sprache -->
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.languageTitle')}</h2>
<div class="settings-card">
<oikos-locale-picker></oikos-locale-picker>
</div>
</section>
</div>
<!-- Essensplan -->
<!-- Panel: Mahlzeiten -->
<div class="settings-tab-panel" data-panel="meals" role="tabpanel"${panelHidden('meals')}>
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionMeals')}</h2>
<div class="settings-card">
@@ -132,8 +152,10 @@ export async function render(container, { user }) {
</div>
</div>
</section>
</div>
<!-- Budget -->
<!-- Panel: Budget -->
<div class="settings-tab-panel" data-panel="budget" role="tabpanel"${panelHidden('budget')}>
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionBudget')}</h2>
<div class="settings-card">
@@ -144,8 +166,10 @@ export async function render(container, { user }) {
</select>
</div>
</section>
</div>
<!-- Einkauf: Kategorien -->
<!-- Panel: Einkauf -->
<div class="settings-tab-panel" data-panel="shopping" role="tabpanel"${panelHidden('shopping')}>
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionShopping')}</h2>
<div class="settings-card">
@@ -162,45 +186,10 @@ export async function render(container, { user }) {
</form>
</div>
</section>
<!-- Mein Konto -->
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionAccount')}</h2>
<div class="settings-card">
<div class="settings-user-info">
<div class="settings-avatar" style="background:${esc(user?.avatar_color) || '#007AFF'}">
${esc(initials(user?.display_name))}
</div>
<div>
<div class="settings-user-info__name">${esc(user?.display_name)}</div>
<div class="settings-user-info__username">@${esc(user?.username)}</div>
</div>
</div>
</div>
<div class="settings-card">
<h3 class="settings-card__title">${t('settings.changePassword')}</h3>
<form id="password-form" class="settings-form">
<div class="form-group">
<label class="form-label" for="current-password">${t('settings.currentPasswordLabel')}</label>
<input class="form-input" type="password" id="current-password" autocomplete="current-password" required />
</div>
<div class="form-group">
<label class="form-label" for="new-password">${t('settings.newPasswordLabel')}</label>
<input class="form-input" type="password" id="new-password" autocomplete="new-password" minlength="8" required />
</div>
<div class="form-group">
<label class="form-label" for="confirm-password">${t('settings.confirmPasswordLabel')}</label>
<input class="form-input" type="password" id="confirm-password" autocomplete="new-password" minlength="8" required />
</div>
<div id="password-error" class="form-error" hidden></div>
<button type="submit" class="btn btn--primary">${t('settings.savePassword')}</button>
</form>
</div>
</section>
<!-- Kalender-Synchronisation -->
<!-- Panel: Kalender -->
<div class="settings-tab-panel" data-panel="calendar" role="tabpanel"${panelHidden('calendar')}>
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionCalendarSync')}</h2>
@@ -275,8 +264,46 @@ export async function render(container, { user }) {
` : `<span class="form-hint">${t('settings.appleOnlyAdmin')}</span>`}
</div>
</section>
</div>
<!-- Panel: Konto -->
<div class="settings-tab-panel" data-panel="account" role="tabpanel"${panelHidden('account')}>
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionAccount')}</h2>
<div class="settings-card">
<div class="settings-user-info">
<div class="settings-avatar" style="background:${esc(user?.avatar_color) || '#007AFF'}">
${esc(initials(user?.display_name))}
</div>
<div>
<div class="settings-user-info__name">${esc(user?.display_name)}</div>
<div class="settings-user-info__username">@${esc(user?.username)}</div>
</div>
</div>
</div>
<div class="settings-card">
<h3 class="settings-card__title">${t('settings.changePassword')}</h3>
<form id="password-form" class="settings-form">
<div class="form-group">
<label class="form-label" for="current-password">${t('settings.currentPasswordLabel')}</label>
<input class="form-input" type="password" id="current-password" autocomplete="current-password" required />
</div>
<div class="form-group">
<label class="form-label" for="new-password">${t('settings.newPasswordLabel')}</label>
<input class="form-input" type="password" id="new-password" autocomplete="new-password" minlength="8" required />
</div>
<div class="form-group">
<label class="form-label" for="confirm-password">${t('settings.confirmPasswordLabel')}</label>
<input class="form-input" type="password" id="confirm-password" autocomplete="new-password" minlength="8" required />
</div>
<div id="password-error" class="form-error" hidden></div>
<button type="submit" class="btn btn--primary">${t('settings.savePassword')}</button>
</form>
</div>
</section>
<!-- Familienmitglieder (nur Admin) -->
${user?.role === 'admin' ? `
<section class="settings-section">
<h2 class="settings-section__title">${t('settings.sectionFamily')}</h2>
@@ -323,11 +350,11 @@ export async function render(container, { user }) {
</section>
` : ''}
<!-- Abmelden -->
<section class="settings-section">
<button class="btn btn--danger-outline settings-logout-btn" id="logout-btn">${t('settings.logout')}</button>
</section>
</div>
</div>
`;
// Meal-Type-Checkboxen initialisieren
@@ -346,6 +373,7 @@ export async function render(container, { user }) {
// --------------------------------------------------------
function bindEvents(container, user, categories) {
bindTabEvents(container);
bindCategoryEvents(container);
// Theme-Toggle
const themeToggle = container.querySelector('#theme-toggle');
@@ -586,6 +614,34 @@ function bindEvents(container, user, categories) {
}
}
// --------------------------------------------------------
// Tab-Navigation
// --------------------------------------------------------
function bindTabEvents(container) {
const tabList = container.querySelector('.settings-tabs');
if (!tabList) return;
tabList.addEventListener('click', (e) => {
const btn = e.target.closest('[data-tab]');
if (!btn) return;
const tab = btn.dataset.tab;
tabList.querySelectorAll('[data-tab]').forEach((b) => {
const active = b.dataset.tab === tab;
b.classList.toggle('settings-tab-btn--active', active);
b.setAttribute('aria-selected', String(active));
});
container.querySelectorAll('[data-panel]').forEach((panel) => {
panel.hidden = panel.dataset.panel !== tab;
});
try { sessionStorage.setItem(SETTINGS_TAB_KEY, tab); } catch (_) {}
});
}
function bindDeleteButtons(container, user) {
container.querySelectorAll('[data-delete-user]').forEach((btn) => {
btn.replaceWith(btn.cloneNode(true)); // Doppelte Listener vermeiden
public/styles/settings.css
+48
View File
@@ -42,6 +42,54 @@
border: 1px solid var(--color-danger);
}
/* --------------------------------------------------------
Tab-Navigation
-------------------------------------------------------- */
.settings-tabs {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-6);
position: sticky;
top: 0;
background: var(--color-background);
z-index: 10;
padding-top: var(--space-1);
}
.settings-tabs::-webkit-scrollbar {
display: none;
}
.settings-tab-btn {
flex-shrink: 0;
padding: var(--space-3) var(--space-4);
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
min-height: 44px;
white-space: nowrap;
margin-bottom: -1px;
}
.settings-tab-btn:hover {
color: var(--color-text-primary);
}
.settings-tab-btn--active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* --------------------------------------------------------
Sections
-------------------------------------------------------- */