Add prayer log and calendar view

Each prayer card now has a "Prayer Log" section where you can record
when you prayed, with an optional note per session. A Calendar tab
shows a monthly view with dots on days you prayed; clicking a day
reveals which prayers were covered and any notes.

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

package-lock.json

@@ -15977,23 +15977,6 @@
         }
       }
     },
-    "node_modules/tailwindcss/node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",

src/App.css

@@ -590,3 +590,309 @@ mark.highlight {
   border-top: 1px solid var(--border);
   padding-top: 0.5rem;
 }
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0;
+}
+
+.tab-btn {
+  padding: 0.5rem 1.1rem;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: color 0.12s, border-color 0.12s;
+  margin-bottom: -1px;
+}
+
+.tab-btn:hover { color: var(--text); }
+
+.tab-btn.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+
+/* Prayer count badge on card */
+.prayed-count {
+  font-size: 0.75rem;
+  font-family: sans-serif;
+  color: var(--text-muted);
+  background: var(--tag-bg);
+  border-radius: 4px;
+  padding: 0.1rem 0.4rem;
+}
+
+/* Prayer log section inside card */
+.prayed-log-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+}
+
+.prayed-log-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.prayed-log-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.log-date-input {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.4rem 0.6rem;
+  background: var(--surface);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  outline: none;
+  width: fit-content;
+}
+
+.log-date-input:focus { border-color: var(--primary); }
+
+.log-note-input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  background: var(--surface);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  resize: vertical;
+  outline: none;
+}
+
+.log-note-input:focus { border-color: var(--primary); }
+
+.prayed-log-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.prayed-log-entry {
+  padding: 0.4rem 0.6rem;
+  background: var(--bg);
+  border-radius: 5px;
+  border-left: 2px solid var(--primary);
+}
+
+.prayed-log-date {
+  font-size: 0.78rem;
+  font-family: sans-serif;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.prayed-log-note {
+  font-size: 0.88rem;
+  line-height: 1.5;
+  margin-top: 0.2rem;
+  color: var(--text);
+  white-space: pre-wrap;
+}
+
+.prayed-log-empty {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* Calendar view */
+.calendar-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+}
+
+.cal-month-name {
+  font-size: 1.2rem;
+  font-weight: normal;
+  min-width: 180px;
+  text-align: center;
+}
+
+.cal-nav-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.3rem 0.75rem;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: var(--text-muted);
+  line-height: 1;
+  transition: background 0.12s, color 0.12s;
+}
+
+.cal-nav-btn:hover {
+  background: var(--surface-hover);
+  color: var(--text);
+}
+
+.cal-summary {
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 3px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0.75rem;
+  box-shadow: var(--shadow);
+}
+
+.cal-dow {
+  text-align: center;
+  font-size: 0.72rem;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  padding: 0.3rem 0;
+}
+
+.cal-cell {
+  min-height: 52px;
+  border-radius: 6px;
+  padding: 0.3rem 0.4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  transition: background 0.1s;
+}
+
+.cal-blank { background: transparent; }
+
+.cal-cell:not(.cal-blank) {
+  cursor: default;
+}
+
+.cal-has-prayers {
+  cursor: pointer !important;
+}
+
+.cal-has-prayers:hover {
+  background: var(--surface-hover);
+}
+
+.cal-today .cal-day-num {
+  background: var(--primary);
+  color: #fff;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cal-selected {
+  background: var(--tag-bg);
+  outline: 1px solid var(--primary);
+}
+
+.cal-day-num {
+  font-size: 0.82rem;
+  font-family: sans-serif;
+  color: var(--text);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cal-dot-row {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.cal-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--primary);
+  flex-shrink: 0;
+}
+
+.cal-dot-more {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  font-family: sans-serif;
+}
+
+/* Calendar day detail */
+.cal-detail {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1rem 1.1rem;
+  box-shadow: var(--shadow);
+}
+
+.cal-detail-title {
+  font-size: 1rem;
+  font-weight: normal;
+  color: var(--primary);
+  margin-bottom: 0.75rem;
+  font-style: italic;
+}
+
+.cal-detail-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.cal-detail-entry {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg);
+  border-radius: 6px;
+  border-left: 2px solid var(--primary);
+}
+
+.cal-detail-prayer {
+  font-size: 0.92rem;
+  line-height: 1.4;
+}

src/App.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useMemo } from 'react';
 import { usePrayers } from './usePrayers';
-import { Prayer } from './types';
+import { Prayer, PrayedEntry } from './types';
 import './App.css';
 
 type Filter = 'active' | 'answered' | 'all';
+type Tab = 'prayers' | 'calendar';
 
 function normalize(s: string) {
   return s.toLowerCase().trim();
@@ -32,8 +33,10 @@ export default function App() {
     archivePrayer,
     deletePrayer,
     updateRequest,
+    logPrayed,
   } = usePrayers();
 
+  const [tab, setTab] = useState<Tab>('prayers');
   const [filter, setFilter] = useState<Filter>('active');
   const [activeTag, setActiveTag] = useState<string | null>(null);
   const [search, setSearch] = useState('');
@@ -125,6 +128,23 @@ export default function App() {
         <p className="subtitle">Bring your requests. Record His faithfulness.</p>
       </header>
 
+      <div className="tab-bar">
+        <button
+          className={`tab-btn ${tab === 'prayers' ? 'active' : ''}`}
+          onClick={() => setTab('prayers')}
+        >
+          Prayers
+        </button>
+        <button
+          className={`tab-btn ${tab === 'calendar' ? 'active' : ''}`}
+          onClick={() => setTab('calendar')}
+        >
+          Calendar
+        </button>
+      </div>
+
+      {tab === 'prayers' && (
+        <>
           <form className="add-form" onSubmit={handleAdd}>
             <input
               className="person-input"
@@ -242,10 +262,17 @@ export default function App() {
                 onArchive={() => archivePrayer(prayer.id)}
                 onDelete={() => deletePrayer(prayer.id)}
                 onEditRequest={text => updateRequest(prayer.id, text)}
+                onLogPrayed={(entry) => logPrayed(prayer.id, entry)}
                 formatDate={formatDate}
               />
             ))}
           </ul>
+        </>
+      )}
+
+      {tab === 'calendar' && (
+        <CalendarView prayers={prayers} formatDate={formatDate} />
+      )}
     </div>
   );
 }
@@ -279,6 +306,7 @@ interface CardProps {
   onArchive: () => void;
   onDelete: () => void;
   onEditRequest: (text: string) => void;
+  onLogPrayed: (entry: PrayedEntry) => void;
   formatDate: (iso: string) => string;
 }
 
@@ -297,8 +325,24 @@ function PrayerCard({
   onMarkActive,
   onArchive,
   onDelete,
+  onLogPrayed,
   formatDate,
 }: CardProps) {
+  const [logDate, setLogDate] = useState(new Date().toISOString().slice(0, 10));
+  const [logNote, setLogNote] = useState('');
+  const [showLogForm, setShowLogForm] = useState(false);
+
+  function handleLogSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    onLogPrayed({ date: logDate, note: logNote.trim() });
+    setLogNote('');
+    setShowLogForm(false);
+  }
+
+  const sortedLog = [...(prayer.prayedLog ?? [])].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+
   return (
     <li className={`prayer-card ${prayer.status}`}>
       <div className="card-top" onClick={onToggle}>
@@ -313,6 +357,11 @@ function PrayerCard({
         </div>
         <div className="card-meta">
           <span className="date">{formatDate(prayer.createdAt)}</span>
+          {prayer.prayedLog && prayer.prayedLog.length > 0 && (
+            <span className="prayed-count" title={`Prayed ${prayer.prayedLog.length} time${prayer.prayedLog.length !== 1 ? 's' : ''}`}>
+              🙏 {prayer.prayedLog.length}
+            </span>
+          )}
           {prayer.tags.map(tag => (
             <span
               key={tag}
@@ -362,6 +411,55 @@ function PrayerCard({
             </div>
           )}
 
+          <div className="prayed-log-section">
+            <div className="prayed-log-header">
+              <label className="answer-label">Prayer Log</label>
+              {!showLogForm && (
+                <button
+                  className="btn btn-sm btn-primary"
+                  onClick={() => setShowLogForm(true)}
+                >
+                  + I Prayed This
+                </button>
+              )}
+            </div>
+
+            {showLogForm && (
+              <form className="prayed-log-form" onSubmit={handleLogSubmit}>
+                <input
+                  type="date"
+                  className="log-date-input"
+                  value={logDate}
+                  onChange={e => setLogDate(e.target.value)}
+                />
+                <textarea
+                  className="log-note-input"
+                  placeholder="Notes from this prayer time (optional)"
+                  value={logNote}
+                  onChange={e => setLogNote(e.target.value)}
+                  rows={2}
+                />
+                <div className="card-actions">
+                  <button className="btn btn-primary btn-sm" type="submit">Save</button>
+                  <button className="btn btn-sm" type="button" onClick={() => setShowLogForm(false)}>Cancel</button>
+                </div>
+              </form>
+            )}
+
+            {sortedLog.length > 0 ? (
+              <ul className="prayed-log-list">
+                {sortedLog.map((entry, i) => (
+                  <li key={i} className="prayed-log-entry">
+                    <span className="prayed-log-date">{formatDate(entry.date)}</span>
+                    {entry.note && <p className="prayed-log-note">{entry.note}</p>}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              !showLogForm && <p className="prayed-log-empty">No prayer sessions logged yet.</p>
+            )}
+          </div>
+
           <div className="card-actions secondary">
             {prayer.status === 'answered' && (
               <button className="btn btn-sm ghost" onClick={onMarkActive}>
@@ -376,3 +474,126 @@ function PrayerCard({
     </li>
   );
 }
+
+function CalendarView({ prayers, formatDate }: { prayers: Prayer[]; formatDate: (iso: string) => string }) {
+  const today = new Date();
+  const [year, setYear] = useState(today.getFullYear());
+  const [month, setMonth] = useState(today.getMonth());
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
+
+  const prayedByDate = useMemo(() => {
+    const map = new Map<string, Array<{ prayer: Prayer; entry: PrayedEntry }>>();
+    prayers.forEach(prayer => {
+      (prayer.prayedLog ?? []).forEach(entry => {
+        const key = entry.date.slice(0, 10);
+        if (!map.has(key)) map.set(key, []);
+        map.get(key)!.push({ prayer, entry });
+      });
+    });
+    return map;
+  }, [prayers]);
+
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const firstDow = new Date(year, month, 1).getDay();
+
+  function prevMonth() {
+    if (month === 0) { setYear(y => y - 1); setMonth(11); }
+    else setMonth(m => m - 1);
+    setSelectedDate(null);
+  }
+
+  function nextMonth() {
+    if (month === 11) { setYear(y => y + 1); setMonth(0); }
+    else setMonth(m => m + 1);
+    setSelectedDate(null);
+  }
+
+  const monthName = new Date(year, month).toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  const selectedEntries = selectedDate ? (prayedByDate.get(selectedDate) ?? []) : [];
+
+  const totalThisMonth = useMemo(() => {
+    let count = 0;
+    prayedByDate.forEach((entries, date) => {
+      if (date.startsWith(`${year}-${String(month + 1).padStart(2, '0')}`)) {
+        count += entries.length;
+      }
+    });
+    return count;
+  }, [prayedByDate, year, month]);
+
+  return (
+    <div className="calendar-view">
+      <div className="calendar-header">
+        <button className="cal-nav-btn" onClick={prevMonth}>‹</button>
+        <span className="cal-month-name">{monthName}</span>
+        <button className="cal-nav-btn" onClick={nextMonth}>›</button>
+      </div>
+
+      {totalThisMonth > 0 && (
+        <p className="cal-summary">{totalThisMonth} prayer session{totalThisMonth !== 1 ? 's' : ''} this month</p>
+      )}
+
+      <div className="cal-grid">
+        {dayNames.map(d => (
+          <div key={d} className="cal-dow">{d}</div>
+        ))}
+
+        {Array.from({ length: firstDow }).map((_, i) => (
+          <div key={`blank-${i}`} className="cal-cell cal-blank" />
+        ))}
+
+        {Array.from({ length: daysInMonth }).map((_, i) => {
+          const day = i + 1;
+          const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+          const entries = prayedByDate.get(dateStr);
+          const isToday =
+            day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+          const isSelected = selectedDate === dateStr;
+
+          return (
+            <div
+              key={day}
+              className={`cal-cell ${isToday ? 'cal-today' : ''} ${isSelected ? 'cal-selected' : ''} ${entries ? 'cal-has-prayers' : ''}`}
+              onClick={() => setSelectedDate(isSelected ? null : dateStr)}
+            >
+              <span className="cal-day-num">{day}</span>
+              {entries && (
+                <span className="cal-dot-row">
+                  {entries.slice(0, 3).map((_, di) => (
+                    <span key={di} className="cal-dot" />
+                  ))}
+                  {entries.length > 3 && <span className="cal-dot-more">+{entries.length - 3}</span>}
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {selectedDate && (
+        <div className="cal-detail">
+          <h3 className="cal-detail-title">
+            {formatDate(selectedDate + 'T12:00:00')}
+          </h3>
+          {selectedEntries.length === 0 ? (
+            <p className="prayed-log-empty">No prayer sessions on this day.</p>
+          ) : (
+            <ul className="cal-detail-list">
+              {selectedEntries.map(({ prayer, entry }, i) => (
+                <li key={i} className="cal-detail-entry">
+                  <div className="cal-detail-prayer">
+                    {prayer.person && <span className="person-name">{prayer.person} — </span>}
+                    <span className="request-text">{prayer.request}</span>
+                  </div>
+                  {entry.note && <p className="prayed-log-note">{entry.note}</p>}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/types.ts

@@ -1,3 +1,8 @@
+export interface PrayedEntry {
+  date: string;
+  note: string;
+}
+
 export interface Prayer {
   id: string;
   person: string;
@@ -7,4 +12,5 @@ export interface Prayer {
   createdAt: string;
   answeredAt?: string;
   tags: string[];
+  prayedLog?: PrayedEntry[];
 }

src/usePrayers.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Prayer } from './types';
+import { Prayer, PrayedEntry } from './types';
 
 const API = '/api/prayers';
 
@@ -65,6 +65,13 @@ export function usePrayers() {
   const updateRequest = useCallback((id: string, request: string) =>
     patch(id, { request }), [patch]);
 
+  const logPrayed = useCallback(async (id: string, entry: PrayedEntry) => {
+    const prayer = prayers.find(p => p.id === id);
+    if (!prayer) return;
+    const prayedLog = [...(prayer.prayedLog ?? []), entry];
+    await patch(id, { prayedLog });
+  }, [prayers, patch]);
+
   const deletePrayer = useCallback(async (id: string) => {
     await fetch(`${API}/${id}`, { method: 'DELETE' }).then(checkResponse);
     setPrayers(prev => prev.filter(p => p.id !== id));
@@ -81,5 +88,6 @@ export function usePrayers() {
     archivePrayer,
     deletePrayer,
     updateRequest,
+    logPrayed,
   };
 }