Add person field, full-text search, and search highlighting

- New 'Who are you praying for?' field on prayer cards (optional)
- Person name shown in primary color above the request text
- Search bar filters across person, request, answer, and tags simultaneously
- Search terms highlighted in yellow/amber in results
- Tag filter and search combine with status filter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DReRqHxSYuVfCzTzQGD9hZ
This commit is contained in:
Claude committed 2026-07-18 23:32:37 +00:00
1 parent 8bda0b814c
commit af836d4ec9
4 files changed
+211 -53

No files matched your search

+107 -3
View File
@@ -181,13 +181,89 @@ body {
background: var(--surface-hover);
}
/* Person field */
.person-input {
width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
padding: .5rem .75rem;
background: var(--bg);
color: var(--text);
font-family: inherit;
font-size: .95rem;
outline: none;
margin-bottom: .6rem;
transition: border-color .15s;
}
.person-input:focus { border-color: var(--primary); }
.person-input::placeholder { color: var(--text-muted); }
/* Toolbar: filter + search on one row */
.toolbar {
display: flex;
gap: .75rem;
align-items: center;
margin-bottom: 1rem;
flex-wrap: wrap;
}
/* Filter bar */
.filter-bar {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
gap: .5rem;
}
/* Search */
.search-wrap {
position: relative;
flex: 1;
min-width: 160px;
}
.search-icon {
position: absolute;
left: .6rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 1.1rem;
pointer-events: none;
line-height: 1;
}
.search-input {
width: 100%;
border: 1px solid var(--border);
border-radius: 20px;
padding: .38rem .75rem .38rem 1.9rem;
background: var(--surface);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: .88rem;
outline: none;
transition: border-color .15s;
}
.search-input:focus { border-color: var(--primary); }
.search-input::placeholder { color: var(--text-muted); }
.search-clear {
position: absolute;
right: .5rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: .75rem;
padding: .2rem;
line-height: 1;
}
.search-clear:hover { color: var(--text); }
.filter-btn {
padding: 0.4rem 0.9rem;
border-radius: 20px;
@@ -388,10 +464,38 @@ body {
.status-dot.answered { background: var(--answered-dot); }
.status-dot.archived { background: var(--text-muted); }
.card-text {
flex: 1;
display: flex;
flex-direction: column;
gap: .15rem;
}
.person-name {
font-size: .82rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 600;
color: var(--primary);
letter-spacing: .01em;
}
mark.highlight {
background: #fde68a;
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
@media (prefers-color-scheme: dark) {
mark.highlight { background: #78540a; }
}
:root[data-theme="dark"] mark.highlight { background: #78540a; }
:root[data-theme="light"] mark.highlight { background: #fde68a; }
.request-text {
font-size: 0.97rem;
line-height: 1.5;
flex: 1;
}
.card-meta {