Commit Graph

314 Commits

Author SHA1 Message Date
Alexander 6f4a88682d rosary: add show/hide images toggle, fix PiP timing and breakpoint
- 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
2026-02-09 09:12:34 +01:00
Alexander a08b77a454 extract PiP drag/snap/enlarge logic into shared createPip() utility
Both StickyImage and rosary page now use the same pip.svelte.ts factory
for mobile drag-to-corner, snap, and double-tap enlarge behavior.
2026-02-09 08:48:20 +01:00
Alexander 23e9bfec08 rosary: add mystery images with scrollable sticky column and mobile PiP
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.
2026-02-09 08:47:53 +01:00
Alexander bd0dc70380 ablassgebete: add prayer page with sticky crucifix and draggable PiP
- Add AblassGebete component and crucifix images
- Desktop: sticky crucifix on right, centered prayer with balanced spacing
- Mobile: draggable picture-in-picture thumbnail that snaps to corners
- Double-tap to enlarge/shrink with directional animation
- Monolingual sections override bilingual grey styling
- 404 for English route /faith/prayers/ablassgebete (German only)
- Reposition on window resize including desktop/mobile breakpoint crossing
2026-02-08 22:13:23 +01:00
Alexander 56e3bd1791 cospend: filter recent activity by chart category selection
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.
2026-02-04 16:57:49 +01:00
Alexander 9826ff8480 faith: progressive enhancement for all faith pages without JS
- 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
2026-02-04 14:14:13 +01:00
Alexander 9054d3935e fix: use accent-dark with nord5 light override for prayer backgrounds
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).
2026-02-04 13:05:08 +01:00
Alexander 813c938f26 fix: use semantic color for prayer section backgrounds in light mode
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.
2026-02-04 13:01:54 +01:00
Alexander 536ae907a7 rosary: inline cross glyph as SVG path for consistent rendering
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.
2026-02-04 12:09:00 +01:00
Alexander 8a74bda83a rosary: derive SVG bead positions from sectionPositions dictionary
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.
2026-02-04 12:04:08 +01:00
Alexander c5744780f3 rosary: split final prayers into individual bead sections with scroll tracking
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.
2026-02-04 11:18:54 +01:00
Alexander d098d8bf01 rosary: progressively shrink mystery selectors instead of stacking on small screens 2026-02-04 10:03:58 +01:00
Alexander 72d924cc7c rosary: reduce bundle size and improve responsive layout
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.
2026-02-03 20:51:32 +01:00
Alexander ac4c03e5f8 rosary: fix mystery selection lost when excluding luminous
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.
2026-02-03 15:01:53 +01:00
Alexander 480b0d687b rosary: fix today badge z-index 2026-02-03 14:48:47 +01:00
Alexander 3eccb7ca50 perf: pre-generate Bible verse data and reduce DOM via conditional rendering
- 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
2026-02-03 14:28:09 +01:00
Alexander 91686a6841 rosary: add SVG hitboxes for easier bead tapping on mobile 2026-02-03 08:14:50 +01:00
Alexander 8587059473 angelus: align styling with other faith routes 2026-02-02 23:13:02 +01:00
Alexander b2971dc5bc rosary: add missing saint Michael prayer 2026-02-02 23:08:20 +01:00
Alexander 68811b2abd angelus: add missing Ave Maria 2026-02-02 22:59:11 +01:00
Alexander 6ab6d3f0a5 prayers: add angelus link 2026-02-02 22:51:51 +01:00
Alexander acfbd0ed9d prayers: add search and individual prayer pages
- 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
2026-02-02 22:22:56 +01:00
Alexander 32d68fbbe7 move glaube higher up in main LinksGrid 2026-02-02 20:47:10 +01:00
Alexander 7412bf3bdc prayers: bow-emphasis only for main language 2026-02-02 20:39:11 +01:00
Alexander 19757f3561 angelus: cleaner and now in Header 2026-02-02 16:59:25 +01:00
Alexander ce4c9cf71e prayers: add English translations for all prayer components
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.
2026-02-02 16:39:40 +01:00
Alexander 4b9dff2f25 faith: add bilingual routes /glaube ↔ /faith
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
2026-02-02 16:15:51 +01:00
Alexander 5d7d86bff9 rosary: server-side streak fetch, remove aggressive polling
- 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
2026-02-01 13:50:33 +01:00
Alexander 8976940537 rosary: cleaner light mode 2026-01-31 16:12:18 +01:00
Alexander 64dbce1d45 rosary: fade-in shadow removed 2026-01-31 15:53:59 +01:00
Alexander 7824c97e0e remove jukit garbage 2026-01-31 10:12:45 +01:00
Alexander 9e68f6d6d7 rosary: less colourful mystery selector 2026-01-30 15:47:58 +01:00
Alexander 55630589e5 rosary: cleanup 2026-01-30 15:36:13 +01:00
Alexander 156f20bc3b fix logged in state broken on rosary due to prerendering 2026-01-30 12:47:28 +01:00
Alexander 8a56661d31 feat: add server persistence for rosary streak
- Add RosaryStreak MongoDB model for logged-in users
- Add /api/glaube/rosary-streak GET/POST endpoints
- Sync streak to server when logged in, merge local/server data
- Auto-sync when coming back online (PWA offline support)
- Falls back to localStorage for guests
2026-01-30 12:37:01 +01:00
Alexander 1b73032305 feat: add streak counter to rosary page
Track daily rosary prayer streaks using localStorage. Shows consecutive
days prayed and disables button if already prayed today.
2026-01-30 12:36:55 +01:00
Alexander 6c45aa8438 prayers: add Confiteor 2026-01-30 08:40:29 +01:00
Alexander fc8b2c1204 refactor: reduce all_brief payload to first image's alt and mediapath
Only include the necessary image fields for Card.svelte instead of
the entire images array to reduce API response size.
2026-01-29 14:22:57 +01:00
Alexander f501d0c7eb fix: include images in all_brief API endpoints
Card.svelte uses recipe.images[0].mediapath for the hashed image path,
but the all_brief endpoints weren't fetching the images field, causing
new recipes to fall back to short_name.webp instead of the correct path.
2026-01-29 13:40:33 +01:00
Alexander 5e7f441e3b fix: include images and translations in offline-db brief recipes
The offline sync wasn't caching thumbnails because the images field
was missing from the MongoDB projection. Also add translations for
caching English recipe __data.json URLs.
2026-01-29 10:18:23 +01:00
Alexander 374bb6dcc4 feat: extend PWA offline support to all recipe routes and glaube pages
- Add offline support for category, tag, icon list pages
- Add offline support for favorites page (stores locally for offline)
- Add offline support for season list page
- Cache root page and glaube pages for offline access
- Dynamically discover glaube routes at build time using Vite glob
- Add db functions for getAllCategories, getAllTags, getAllIcons
- Pre-cache __data.json for all category, tag, icon, season subroutes
- Update service worker to cache glaube and root page responses
2026-01-29 09:57:58 +01:00
Alexander be9a8dad16 feat: add PWA offline support for recipe pages
- Add service worker with caching for build assets, static files, images, and pages
- Add IndexedDB storage for recipes (brief and full data)
- Add offline-db API endpoint for bulk recipe download
- Add offline sync button component in header
- Add offline-shell page for direct navigation fallback
- Pre-cache __data.json for client-side navigation
- Add +page.ts universal load functions with IndexedDB fallback
- Add PWA manifest and icons for installability
- Update recipe page to handle missing data gracefully
2026-01-28 21:38:33 +01:00
Alexander 97a0c9d8a9 perf: preload crosses font on glaube pages
Add preload hint to fetch the crosses.woff2 font early,
improving First Contentful Paint on /glaube routes.
2026-01-26 10:35:04 +01:00
Alexander e9f18d40a2 refactor: reduce DOM nesting and simplify templates
- Remove nested .wrapper div in recipe page using CSS Grid with full-bleed background
- Consolidate multiplier forms in IngredientsPage into single form
- Simplify fermentation conditionals in InstructionsPage with optional chaining
- Use conditional rendering instead of visibility wrapper in Search
- Remove unnecessary dialog wrapper in TitleImgParallax
2026-01-25 20:24:48 +01:00
Alexander baaaa630d5 refactor: simplify Card HTML and extract search filter composable
- Remove unnecessary wrapper divs in Card component (.card_anchor, .div_div_image)
- Flatten Card HTML from 4 levels to 2 levels of nesting
- Create reusable createSearchFilter composable in $lib/js/searchFilter.svelte.ts
- Apply search filter composable to category, tag, and favorites pages
2026-01-25 14:48:55 +01:00
Alexander 23adc92d44 Move more CSS styling to a global css files to reduce bundle size 2026-01-23 15:37:32 +01:00
Alexander 16aa6a6f7d refactor: clean up recipe routes and reduce bundle size
- Eliminate duplicate API fetch in recipe page by passing item from
  server load to universal load instead of fetching twice
- Replace cheerio with simple regex in stripHtmlTags, removing ~200KB
  dependency
- Refactor multiplier buttons in IngredientsPage to use loop instead
  of 5 repeated form elements
- Move /rezepte/untranslated to /[recipeLang]/admin/untranslated and
  delete legacy /rezepte/ layout files
2026-01-23 15:04:58 +01:00
Alexander 990c685857 feat: add page titles to recipe and glaube routes
- Add titles to category, tag, icon, season routes
- Add bilingual support (German/English) for recipe route titles
- Use consistent "Bocken Recipes" / "Bocken Rezepte" branding
- Change English tagline from "Bocken's Recipes" to "Bocken Recipes"
- Add titles to /glaube and /glaube/gebete pages
- Make tips-and-tricks page language-aware
2026-01-20 19:54:33 +01:00
Alexander 8c857f66fd fix: include server load data in universal load for recipe page title
The +page.server.ts fetches recipe data and strips HTML tags server-side
to avoid bundling cheerio in the client. However, the universal load in
+page.ts wasn't including this data in its return value.

Fixed by:
1. Having +page.server.ts fetch the recipe directly (since it runs before
   +page.ts and can't access its data via parent())
2. Adding the `data` parameter to +page.ts and spreading it in the return
2026-01-20 19:44:52 +01:00
Alexander b0fbebd326 fix: append image to FormData before submission in use:enhance
The image upload broke because formData.append() was being called in the
async callback of use:enhance, which runs AFTER the form submission.
Moved the append call to the outer function which runs BEFORE submission.

Also cleaned up debug console.log statements from CardAdd.svelte.
2026-01-20 19:37:16 +01:00