Migrated all components and routes from Svelte 4 to Svelte 5 syntax:
- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax
- Updated deprecated event directives to Svelte 5 syntax:
- on:click → onclick
- on:submit → onsubmit
- on:change → onchange
- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks
- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity
- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes
- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings
All functionality tested and working. No breaking changes to user experience.
- Wrap rosary page toggles in centered container with left-aligned items
- Reduce spacing between toggles from 2rem to 0.5rem
- Simplify Toggle component styling (remove centering/margins)
- Add centered wrapper for gebete page toggle
- Add spacing between German verses in monolingual mode for readability
- Add RosaryFinalPrayer component with Latin and German text
- Display short mystery titles in decade headings (e.g., "5. Gesätz: Kreuzigung")
- Add descriptive titles to initial three Ave Marias (Glaube, Hoffnung, Liebe)
- Add closing cross symbol to signal final sign of the cross
- Mystery titles update dynamically when switching between rosary types
Extract inline prayer content into dedicated components in $lib/components/prayers/
for better code organization and reusability. This reduces the gebete page from ~339
to ~95 lines while maintaining the same functionality.
- Add SalveRegina component with full bilingual Latin/German text
- Wrap FatimaGebet in paragraph tags for consistent styling with other prayers
- Combine final prayers (Gloria Patri, Fatima, Salve Regina) into single Abschluss section
- Change Ave Maria titles from German to Latin ('Ave Maria' instead of 'Gegrüßet seist du Maria')
- Add h3 titles to all Gloria Patri prayers for consistency
- Extend SVG viewBox to show more curve area at top and bottom
- Add CSS mask with gradients for smooth fade-out of circular connection curve
- Adjust viewBox dimensions for better bead visibility
- Create reusable prayer components (Paternoster, AveMaria, GloriaPatri, Kreuzzeichen, Credo, FatimaGebet)
- Add bilingual display (Latin/German) with proper styling differentiation
- Implement scrolling SVG visualization that syncs with prayers
- Add mystery highlighting for Ave Maria (Latin in red, German in orange)
- Separate Gesätze (decades) from transition prayers (Gloria, Fatima, Paternoster)
- Complete full Nicene Creed text
- Split initial three Ave Marias into individual sections (Faith, Hope, Love)
- Add Latin versions for all rosary mysteries (joyful, sorrowful, glorious, luminous)
- Make visualization beads larger and remove container styling for seamless background integration
- Fix SVG coordinate-to-pixel conversion for accurate scroll synchronization
