diff --git a/package-lock.json b/package-lock.json index d81a70c..bc9028d 100644 --- a/package-lock.json +++ b/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", diff --git a/src/App.css b/src/App.css index e2dca6a..d4f87e5 100644 --- a/src/App.css +++ b/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; +} diff --git a/src/App.tsx b/src/App.tsx index 93a1111..9361b28 100644 --- a/src/App.tsx +++ b/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('prayers'); const [filter, setFilter] = useState('active'); const [activeTag, setActiveTag] = useState(null); const [search, setSearch] = useState(''); @@ -125,127 +128,151 @@ export default function App() {

Bring your requests. Record His faithfulness.

-
- setNewPerson(e.target.value)} - /> -