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

src/App.css

@@ -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 {

src/App.tsx

@@ -5,6 +5,21 @@ import './App.css';
 
 type Filter = 'active' | 'answered' | 'all';
 
+function normalize(s: string) {
+  return s.toLowerCase().trim();
+}
+
+function matches(prayer: Prayer, query: string) {
+  const q = normalize(query);
+  if (!q) return true;
+  return (
+    normalize(prayer.person).includes(q) ||
+    normalize(prayer.request).includes(q) ||
+    normalize(prayer.answer).includes(q) ||
+    prayer.tags.some(t => normalize(t).includes(q))
+  );
+}
+
 export default function App() {
   const {
     prayers,
@@ -21,27 +36,29 @@ export default function App() {
 
   const [filter, setFilter] = useState<Filter>('active');
   const [activeTag, setActiveTag] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [newPerson, setNewPerson] = useState('');
   const [newRequest, setNewRequest] = useState('');
   const [newTags, setNewTags] = useState('');
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [editingAnswer, setEditingAnswer] = useState<{ id: string; text: string } | null>(null);
   const [writeError, setWriteError] = useState<string | null>(null);
 
-  // All unique tags across all non-archived prayers
   const allTags = useMemo(() => {
     const set = new Set<string>();
     prayers.filter(p => p.status !== 'archived').forEach(p => p.tags.forEach(t => set.add(t)));
     return Array.from(set).sort();
   }, [prayers]);
 
-  const filtered = prayers.filter(p => {
+  const filtered = useMemo(() => prayers.filter(p => {
     const statusMatch =
       filter === 'active' ? p.status === 'active' :
       filter === 'answered' ? p.status === 'answered' :
       p.status !== 'archived';
     const tagMatch = activeTag ? p.tags.includes(activeTag) : true;
-    return statusMatch && tagMatch;
-  });
+    const searchMatch = matches(p, search);
+    return statusMatch && tagMatch && searchMatch;
+  }), [prayers, filter, activeTag, search]);
 
   const counts = {
     active: prayers.filter(p => p.status === 'active').length,
@@ -53,7 +70,8 @@ export default function App() {
     if (!newRequest.trim()) return;
     const tags = newTags.split(',').map(t => t.trim()).filter(Boolean);
     try {
-      await addPrayer(newRequest.trim(), tags);
+      await addPrayer(newPerson.trim(), newRequest.trim(), tags);
+      setNewPerson('');
       setNewRequest('');
       setNewTags('');
       setWriteError(null);
@@ -77,9 +95,7 @@ export default function App() {
 
   function formatDate(iso: string) {
     return new Date(iso).toLocaleDateString(undefined, {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
+      month: 'short', day: 'numeric', year: 'numeric',
     });
   }
 
@@ -87,6 +103,14 @@ export default function App() {
     setActiveTag(prev => prev === tag ? null : tag);
   }
 
+  const emptyMessage = search
+    ? `No results for "${search}".`
+    : activeTag
+    ? `No ${filter === 'all' ? '' : filter + ' '}prayers tagged "${activeTag}".`
+    : filter === 'active'
+    ? 'No active prayers. Add one above.'
+    : 'Nothing here yet.';
+
   return (
     <div className="app">
       <header className="header">
@@ -95,6 +119,12 @@ export default function App() {
       </header>
 
       <form className="add-form" onSubmit={handleAdd}>
+        <input
+          className="person-input"
+          placeholder="Who are you praying for? (optional)"
+          value={newPerson}
+          onChange={e => setNewPerson(e.target.value)}
+        />
         <textarea
           className="request-input"
           placeholder="What would you like to pray about?"
@@ -115,30 +145,45 @@ export default function App() {
         </div>
       </form>
 
-      <div className="filter-bar">
-        <button
-          className={`filter-btn ${filter === 'active' ? 'active' : ''}`}
-          onClick={() => setFilter('active')}
-        >
-          Active <span className="count">{counts.active}</span>
-        </button>
-        <button
-          className={`filter-btn ${filter === 'answered' ? 'active' : ''}`}
-          onClick={() => setFilter('answered')}
-        >
-          Answered <span className="count">{counts.answered}</span>
-        </button>
-        <button
-          className={`filter-btn ${filter === 'all' ? 'active' : ''}`}
-          onClick={() => setFilter('all')}
-        >
-          All
-        </button>
+      <div className="toolbar">
+        <div className="filter-bar">
+          <button
+            className={`filter-btn ${filter === 'active' ? 'active' : ''}`}
+            onClick={() => setFilter('active')}
+          >
+            Active <span className="count">{counts.active}</span>
+          </button>
+          <button
+            className={`filter-btn ${filter === 'answered' ? 'active' : ''}`}
+            onClick={() => setFilter('answered')}
+          >
+            Answered <span className="count">{counts.answered}</span>
+          </button>
+          <button
+            className={`filter-btn ${filter === 'all' ? 'active' : ''}`}
+            onClick={() => setFilter('all')}
+          >
+            All
+          </button>
+        </div>
+
+        <div className="search-wrap">
+          <span className="search-icon">⌕</span>
+          <input
+            className="search-input"
+            placeholder="Search prayers…"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          />
+          {search && (
+            <button className="search-clear" onClick={() => setSearch('')}>✕</button>
+          )}
+        </div>
       </div>
 
       {allTags.length > 0 && (
         <div className="tag-filter-bar">
-          <span className="tag-filter-label">Filter by tag:</span>
+          <span className="tag-filter-label">Tags:</span>
           {allTags.map(tag => (
             <button
               key={tag}
@@ -149,30 +194,20 @@ export default function App() {
             </button>
           ))}
           {activeTag && (
-            <button className="tag-clear-btn" onClick={() => setActiveTag(null)}>
-              ✕ Clear
-            </button>
+            <button className="tag-clear-btn" onClick={() => setActiveTag(null)}>✕ Clear</button>
           )}
         </div>
       )}
 
       {(writeError || apiError) && (
-        <div className="error-banner">
-          ⚠ {writeError || apiError}
-        </div>
+        <div className="error-banner">⚠ {writeError || apiError}</div>
       )}
 
       {loading && <p className="loading">Loading prayers…</p>}
 
       <ul className="prayer-list">
         {filtered.length === 0 && !loading && (
-          <li className="empty">
-            {activeTag
-              ? `No ${filter === 'all' ? '' : filter + ' '}prayers tagged "${activeTag}".`
-              : filter === 'active'
-              ? 'No active prayers. Add one above.'
-              : 'Nothing here yet.'}
-          </li>
+          <li className="empty">{emptyMessage}</li>
         )}
 
         {filtered.map(prayer => (
@@ -182,10 +217,9 @@ export default function App() {
             expanded={expandedId === prayer.id}
             editingAnswer={editingAnswer?.id === prayer.id ? editingAnswer.text : null}
             activeTag={activeTag}
+            searchQuery={search}
             onTagClick={handleTagClick}
-            onToggle={() =>
-              setExpandedId(expandedId === prayer.id ? null : prayer.id)
-            }
+            onToggle={() => setExpandedId(expandedId === prayer.id ? null : prayer.id)}
             onStartAnswer={() => {
               setExpandedId(prayer.id);
               setEditingAnswer({ id: prayer.id, text: prayer.answer });
@@ -205,11 +239,25 @@ export default function App() {
   );
 }
 
+function highlight(text: string, query: string) {
+  if (!query.trim()) return <>{text}</>;
+  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+  const parts = text.split(regex);
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? <mark key={i} className="highlight">{part}</mark> : part
+      )}
+    </>
+  );
+}
+
 interface CardProps {
   prayer: Prayer;
   expanded: boolean;
   editingAnswer: string | null;
   activeTag: string | null;
+  searchQuery: string;
   onTagClick: (tag: string) => void;
   onToggle: () => void;
   onStartAnswer: () => void;
@@ -228,6 +276,7 @@ function PrayerCard({
   expanded,
   editingAnswer,
   activeTag,
+  searchQuery,
   onTagClick,
   onToggle,
   onStartAnswer,
@@ -244,7 +293,12 @@ function PrayerCard({
       <div className="card-top" onClick={onToggle}>
         <div className="card-main">
           <span className={`status-dot ${prayer.status}`} />
-          <p className="request-text">{prayer.request}</p>
+          <div className="card-text">
+            {prayer.person && (
+              <p className="person-name">{highlight(prayer.person, searchQuery)}</p>
+            )}
+            <p className="request-text">{highlight(prayer.request, searchQuery)}</p>
+          </div>
         </div>
         <div className="card-meta">
           <span className="date">{formatDate(prayer.createdAt)}</span>
@@ -266,11 +320,9 @@ function PrayerCard({
           {prayer.status === 'answered' && prayer.answer && editingAnswer === null && (
             <div className="answer-section">
               <label className="answer-label">Answer</label>
-              <p className="answer-text">{prayer.answer}</p>
+              <p className="answer-text">{highlight(prayer.answer, searchQuery)}</p>
               {prayer.answeredAt && (
-                <span className="answered-date">
-                  Answered {formatDate(prayer.answeredAt)}
-                </span>
+                <span className="answered-date">Answered {formatDate(prayer.answeredAt)}</span>
               )}
               <button className="btn btn-sm" onClick={onStartAnswer}>Edit answer</button>
             </div>

src/types.ts

@@ -1,5 +1,6 @@
 export interface Prayer {
   id: string;
+  person: string;
   request: string;
   answer: string;
   status: 'active' | 'answered' | 'archived';

src/usePrayers.ts

@@ -24,8 +24,9 @@ export function usePrayers() {
       .finally(() => setLoading(false));
   }, []);
 
-  const addPrayer = useCallback(async (request: string, tags: string[]) => {
+  const addPrayer = useCallback(async (person: string, request: string, tags: string[]) => {
     const prayer = {
+      person,
       request,
       answer: '',
       status: 'active',