refactor: extract language toggle into reusable components
All checks were successful
CI / update (push) Successful in 24s

Create Toggle and LanguageToggle components to reduce code duplication
and enable shared state across pages.

- Add Toggle.svelte: Generic iOS-style toggle with customizable accent color
- Add LanguageToggle.svelte: Language-specific toggle with localStorage persistence
- Refactor rosary page to use new toggle components
- Add language toggle to gebete page
- Toggle state persists across both pages via localStorage
- Reduce min-height of Ave Maria decades in monolingual mode (50vh → 30vh)
This commit is contained in:
2025-12-26 17:34:34 +01:00
parent 01a31ae60a
commit 54cc31a03a
4 changed files with 142 additions and 101 deletions

View File

@@ -0,0 +1,39 @@
<script>
import { onMount } from 'svelte';
import { getLanguageContext } from '$lib/contexts/languageContext.js';
import Toggle from './Toggle.svelte';
// Get the language context (must be created by parent page)
const { showLatin } = getLanguageContext();
// Local state for the checkbox
let showBilingual = true;
// Flag to prevent saving before we've loaded from localStorage
let hasLoadedFromStorage = false;
// Sync checkbox with context
$: $showLatin = showBilingual;
// Save to localStorage whenever it changes (but only after initial load)
$: if (typeof localStorage !== 'undefined' && hasLoadedFromStorage) {
localStorage.setItem('rosary_showBilingual', showBilingual.toString());
}
onMount(() => {
// Load from localStorage
const saved = localStorage.getItem('rosary_showBilingual');
if (saved !== null) {
showBilingual = saved === 'true';
}
// Now allow saving
hasLoadedFromStorage = true;
});
</script>
<Toggle
bind:checked={showBilingual}
label="Lateinisch und Deutsch anzeigen"
accentColor="var(--nord14)"
/>