Use taller edge pads (100vh) for before/after targets so images don't
peek at viewport top or bottom. Scroll to edge pads with zero offset
so previous/next images hide fully behind the sticky header.
- Resize handler calls pip.show()/hide() instead of just reposition(),
fixing PiP not appearing when resizing from desktop to mobile
- IntersectionObserver skips all updates when scrollY < 50, preventing
stale activeSection from re-scrolling SVG after jump-to-top
- One image per mystery (garden, flagellation, mocking, carry, crucifixion)
- Desktop: figcaption with artist, title (translated DE/EN), and year
- Fix Map.has vs `in` operator bug preventing PiP from showing
- Reposition PiP on image load to prevent off-screen positioning
- Mystery image column clips behind header (top: 0 + padding-top: 6rem)
- Snap SVG and images instantly to top; reset activeSection to cross
- Add "Bilder anzeigen" / "Show Images" toggle persisted to localStorage
- Bump mystery image column/PiP breakpoint from 900px to 1200px so
prayers keep full width on medium screens
- Fix PiP not appearing on page load by splitting $effect and using
tick() to wait for DOM before measuring element dimensions
- Fix Toggle checkbox default margin causing misalignment
Add a third grid column for sorrowful mystery images (mocking for
mysteries 2-3, crucifixion for mystery 5). Desktop uses a scrollable
sticky sidebar synced to prayer scroll position. Mobile shows a
floating PiP thumbnail. Extract prayer page PiP logic into reusable
StickyImage component.
Clicking a category on the bar chart now filters the recent activity
list to show only payments in that category. Includes a clear filter
button and empty state message. Also increases recent splits from 10
to 30 for better coverage when filtering.
The splitAmounts = { ...splitAmounts } pattern created a circular
dependency inside $effect blocks—reading and writing the same reactive
value—which Svelte 5 killed via loop protection, leaving the split
method selector non-reactive when selecting "50/50 + personal".
- Rosary: mystery selection, luminous toggle, and latin toggle fall back
to URL params (?mystery=, ?luminous=, ?latin=) for no-JS navigation
- Prayers/Angelus: latin toggle uses URL param fallback
- Search on prayers page hidden without JS (requires DOM queries)
- Toggle component supports href prop for link-based no-JS self-submit
- LanguageSelector uses <a> links with computed paths and :focus-within
dropdown for no-JS; displays correct language via server-provided prop
- Recipe language links use translated slugs from $page.data
- URL params cleaned via replaceState after hydration to avoid clutter
var(--color-bg-secondary) from app.css is not available since app.css
is never imported. Use var(--accent-dark) from nordtheme.css with
explicit light mode overrides using var(--nord5).
Replace var(--accent-dark) with var(--color-bg-secondary) which maps
to the correct color in both modes, removing dead @media overrides
that referenced the undefined var(--accent-light). Also match rosary
cross fill to Benedictus medal color in light mode.
Replace <text> elements using the crosses web font with inlined SVG
paths extracted from the font file. Web fonts in SVG <text> elements
don't load reliably on Android, causing fallback rendering.
Use sectionPositions as single source of truth for all bead coordinates.
Compute transition bead positions as midpoints between decades, generate
decade beads and hitboxes via loops, and adjust bead spacing.
Map each ending bead to its corresponding prayer (Gloria/Fatima,
Salve Regina, Schlussgebet, St. Michael, Paternoster, Sign of the Cross),
add scroll-to-top button with action_button styling, and fix SVG scroll
lock to prevent snap-back when scrolling to top.
Remove redundant CSS already handled by Prayer.svelte, drop unused
rosenkranz.css import, and replace inline BenedictusMedal component
(34KB, ~52 DOM elements) with a static SVG referenced via <image>.
Use fluid sidebar width (clamp) for smoother desktop/mobile transition.
The on:change handler on the Toggle component was silently ignored
since Toggle is a Svelte 5 component that doesn't support the Svelte 4
event directive. Replace with a reactive $effect that reverts to
today's mystery when luminous is excluded while selected.
- Extract Bible lookup logic into shared src/lib/server/bible.ts module
- Add build script to pre-generate all 20 mystery verse lookups as static data,
eliminating runtime API calls on rosary page load
- Update Prayer.svelte to pass showLatin/urlLang as snippet parameters; all 14
prayer components now conditionally render only visible language elements
instead of hiding via CSS
- Extract 4 inline mystery selector SVGs into MysteryIcon.svelte component
- Remove unused CSS selectors from angelus page
Rework the burst mode in FireEffect to use 24 data-driven particles
instead of the old scale-and-pop flame. Each particle has unique
position, size, delay, and duration for an organic rising effect.
Latch burst state in StreakAura so the animation plays its full
duration regardless of when the parent resets the prop.
- Add SearchInput component for reusable search UI
- Add search functionality to prayers list with two-tier results:
- Primary matches (name/searchTerms) shown first
- Secondary matches (text content) shown after with reduced opacity
- Add individual prayer pages with language-appropriate slugs
(e.g., /glaube/gebete/ave-maria, /faith/prayers/hail-mary)
- Make prayer cards clickable to navigate to individual pages
- Fix language visibility for prayers without Latin (BruderKlaus, Joseph)
- Add Prayer wrapper to MichaelGebet for consistent styling
- Use CSS columns for masonry layout with dynamic reordering
Add official Catholic English translations to all prayer components
for /faith/* routes. Prayer names on /faith/prayers are now displayed
in English. Remove unused Angelus.svelte component.
Add language toggle support for faith pages similar to recipes.
Routes now work in both German and English:
- /glaube ↔ /faith
- /glaube/gebete ↔ /faith/prayers
- /glaube/rosenkranz ↔ /faith/rosary
- /glaube/angelus ↔ /faith/angelus
- FireEffect now only contains fire-related styles
- StreakAura now only contains aura, number, halo, wing styles
- Fix unclosed <i> tags in JosephGebet.svelte
- Fetch streak data in +page.server.ts for logged-in users via API
- Initialize store once with server data, sync only runs once
- Only poll for reconnection in PWA mode when offline with pending changes
- Extract FireEffect to separate component with burst animation
- Convert StreakAura/StreakCounter to Svelte 5 runes ($props, $state, $derived)
- Fix SSR flash by using server data for initial render
Alexander