Pinned prayers card: accent styling, check toggle, status badge, prayed count

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/PinnedPrayers.jsx

@@ -5,29 +5,37 @@ import { localDateString } from '../utils/readingPlans.js';
 
 export default function PinnedPrayers() {
   const { prayers, togglePrayed, openPrayer } = useApp();
-  const list = pinned(prayers).slice(0, 5);
+  const all = pinned(prayers);
+  const list = all.slice(0, 5);
+  const total = all.length;
   if (!list.length) return null;
   const today = localDateString();
   return (
-    <section aria-label="Pinned prayers" className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm">
+    <section aria-label="Pinned prayers" className="rounded-xl border border-[var(--r-accent)] border-l-4 bg-[var(--r-bar)] px-4 py-3 text-sm shadow-sm">
-      <div className="mb-2 flex items-center justify-between gap-3">
+      <div className="mb-1 flex items-baseline justify-between gap-3">
-        <span className="font-medium">Praying for</span>
+        <h2 className="flex items-center gap-1.5 font-semibold text-[var(--r-accent)]"><svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z" /></svg>Praying for <span className="text-xs font-normal text-[var(--r-sub)]">{total > list.length ? `${list.length} of ${total}` : total}</span></h2>
         <button type="button" onClick={openPrayer} className="text-xs text-[var(--r-accent)] hover:underline">Open journal →</button>
       </div>
-      <ul className="space-y-2">
+      <ul className="divide-y divide-[var(--r-line)]">
         {list.map((p) => {
           const done = p.prayedOn.includes(today);
+          const days = p.prayedOn.length;
           return (
-            <li key={p.id} className="flex items-start gap-3">
+            <li key={p.id} className="flex items-start gap-3 py-2.5 first:pt-1.5 last:pb-0.5">
-              <span className="min-w-0 flex-1">
-                {p.forWhom && <span className="font-medium">{p.forWhom}: </span>}
-                <span className="line-clamp-2">{p.text}</span>
-                {p.status && <span className="ml-2 text-xs text-[var(--r-sub)]">{STATUSES[p.status]}</span>}
-              </span>
               <button type="button" onClick={() => togglePrayed(p.id)} aria-pressed={done} aria-label={`${done ? 'Prayed today' : 'I prayed'}: ${p.text.slice(0, 40)}`}
-                className={`shrink-0 rounded-lg border px-2.5 py-1 text-xs hover:bg-black/5 ${done ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : 'border-[var(--r-line)]'}`}>
+                title={done ? 'Prayed today (tap to undo)' : 'Mark as prayed today'}
-                {done ? '✓ Prayed' : 'I prayed'}
+                className={`mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs ${done ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] text-transparent hover:border-[var(--r-accent)] hover:text-[var(--r-accent)]'}`}>✓</button>
-              </button>
+              <div className="min-w-0 flex-1">
+                {(p.forWhom || p.status) && (
+                  <p className="mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] font-medium uppercase tracking-wide text-[var(--r-sub)]">
+                    {p.forWhom && <span>{p.forWhom}</span>}
+                    {p.status && <span className="rounded-full border border-[var(--r-accent)] px-1.5 py-px text-[10px] normal-case tracking-normal text-[var(--r-accent)]">{STATUSES[p.status]}</span>}
+                  </p>
+                )}
+                <p className="line-clamp-3 leading-snug">{p.text}</p>
+                {p.status === 'partial' && p.answerNote && <p className="mt-1 line-clamp-2 text-xs italic text-[var(--r-sub)]">{p.answerNote}</p>}
+                {days > 0 && <p className="mt-1 text-[11px] text-[var(--r-sub)]">Prayed {days} day{days === 1 ? '' : 's'}</p>}
+              </div>
             </li>
           );
         })}