From 6275b526d8cb186abfb939ee4f9dd0a79d22417d Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Tue, 5 May 2026 18:15:50 +0200 Subject: [PATCH] feat(faith): info pip on streak counters explaining habit vs piety MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New shared StreakInfoButton component — small (i) pip in the corner of the rosary, Angelus, and Regina Cæli streak counters that opens a modal with a short reflection on what the counter is for. The text frames the streak as a tool for forming the *habit* of regular prayer, not as a metric of piety; warns against mechanical repetition with Mt 6:7 ("do not heap up empty phrases"); and grounds the rest in CCC 2698 (rhythms of prayer), 2700 (heart present to him to whom we are speaking), 2702 (body+spirit, habit forms us), and 2728 (the wounded pride that comes from treating prayer as personal accomplishment). Available in DE/EN/LA. Modal dismissable via X, click-outside, or Escape; honours prefers-color-scheme. Refactoring: - StreakCounter and AngelusStreakCounter both render instead of duplicating the pip+modal. Parents just declare position:relative as the anchor. - AngelusStreakCounter is also used for Regina Cæli, so eastertide visitors get the same explanation there for free. Bump 1.67.0 -> 1.67.1. --- package.json | 2 +- .../faith/AngelusStreakCounter.svelte | 4 + src/lib/components/faith/StreakCounter.svelte | 4 + .../components/faith/StreakInfoButton.svelte | 202 ++++++++++++++++++ 4 files changed, 211 insertions(+), 1 deletion(-) create mode 100644 src/lib/components/faith/StreakInfoButton.svelte diff --git a/package.json b/package.json index 10cdcd3f..160e97d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "homepage", - "version": "1.67.0", + "version": "1.67.1", "private": true, "type": "module", "scripts": { diff --git a/src/lib/components/faith/AngelusStreakCounter.svelte b/src/lib/components/faith/AngelusStreakCounter.svelte index d18f55ce..14b21a73 100644 --- a/src/lib/components/faith/AngelusStreakCounter.svelte +++ b/src/lib/components/faith/AngelusStreakCounter.svelte @@ -2,6 +2,7 @@ import { browser } from '$app/environment'; import { getAngelusStreak, getCurrentTimeSlot, type TimeSlot } from '$lib/stores/angelusStreak.svelte'; import StreakAura from '$lib/components/faith/StreakAura.svelte'; +import StreakInfoButton from '$lib/components/faith/StreakInfoButton.svelte'; import Coffee from '@lucide/svelte/icons/coffee'; import Sun from '@lucide/svelte/icons/sun'; import Moon from '@lucide/svelte/icons/moon'; @@ -91,6 +92,7 @@ async function pray() {
+
@@ -146,6 +148,8 @@ async function pray() { border-radius: 12px; width: fit-content; margin: 1.5rem auto; + /* Anchor for the absolute-positioned StreakInfoButton pip */ + position: relative; } .streak-display { diff --git a/src/lib/components/faith/StreakCounter.svelte b/src/lib/components/faith/StreakCounter.svelte index 5baeb6ca..a604e3e4 100644 --- a/src/lib/components/faith/StreakCounter.svelte +++ b/src/lib/components/faith/StreakCounter.svelte @@ -2,6 +2,7 @@ import { browser } from '$app/environment'; import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte'; import StreakAura from '$lib/components/faith/StreakAura.svelte'; +import StreakInfoButton from '$lib/components/faith/StreakInfoButton.svelte'; import { m, type FaithLang } from '$lib/js/faithI18n'; import { tick, onMount } from 'svelte'; @@ -42,6 +43,7 @@ async function pray() {
+
{dayLabel} @@ -72,6 +74,8 @@ async function pray() { background: var(--nord1); border-radius: 12px; width: fit-content; + /* Anchor for the absolute-positioned StreakInfoButton pip */ + position: relative; } @media (prefers-color-scheme: light) { diff --git a/src/lib/components/faith/StreakInfoButton.svelte b/src/lib/components/faith/StreakInfoButton.svelte new file mode 100644 index 00000000..ea282596 --- /dev/null +++ b/src/lib/components/faith/StreakInfoButton.svelte @@ -0,0 +1,202 @@ + + + + + + +{#if open} + +{/if} + +