refactor: extract language toggle into reusable components
All checks were successful
CI / update (push) Successful in 24s
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:
39
src/lib/components/LanguageToggle.svelte
Normal file
39
src/lib/components/LanguageToggle.svelte
Normal 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)"
|
||||
/>
|
||||
Reference in New Issue
Block a user