Add heart toggle on person pages, drop it elsewhere

docs/plan.md

@@ -7,7 +7,7 @@ What remains to build. Current behavior is documented in `docs/dev.md`, `docs/da
 - Remaining sections: My Family, Map.
 - Mobile chrome: brand-teal top bar and bottom tab navigation on narrow screens (see `docs/directory.md`); today only the desktop chrome is faithful.
 - Filter button behavior — currently visual only; the original filters by grade and classroom.
-- Favorites: heart toggles on detail pages; email-list rows already heart into the bookmarks tab, saved per-device in the browser.
+- Favorites: per-account storage; hearts on person pages and email-list rows feed the bookmarks tab, saved per-device in the browser.
 - Installable-app plumbing: manifest, icons, and meta tags per `docs/pwa.md`.
 - Self-service flows: photo and pronunciation upload, address update, opt-out.
 

web/static/directory/app.js

@@ -378,7 +378,7 @@ function referrerCrumbs() {
   return null;
 }
 
-function breadcrumbs(parts) {
+function breadcrumbs(parts, favoriteEmail) {
   const top = el('div', 'detail-top container');
   const crumbs = el('div', 'crumbs');
   const back = el('a', 'crumb-back');
@@ -399,9 +399,15 @@ function breadcrumbs(parts) {
     }
   });
   top.append(crumbs);
-  const heart = el('button', 'heart-button');
-  heart.append(svg('heart'));
-  top.append(heart);
+  if (favoriteEmail) {
+    const heart = el('button', 'heart-button' + (favorites.has(favoriteEmail) ? ' active' : ''));
+    heart.append(svg('heart'));
+    heart.addEventListener('click', () => {
+      toggleFavorite(favoriteEmail);
+      heart.classList.toggle('active');
+    });
+    top.append(heart);
+  }
   return top;
 }
 
@@ -521,7 +527,7 @@ function renderPersonDetail(email) {
     return;
   }
   const origin = referrerCrumbs() || [['People', '/people']];
-  main.append(breadcrumbs([...origin, [p.fullName, null]]));
+  main.append(breadcrumbs([...origin, [p.fullName, null]], p.email));
 
   const content = el('div', 'container detail-content');
   const grid = el('div', 'detail-grid');

web/static/directory/style.css

@@ -636,6 +636,18 @@ a.student-card:hover {
   padding: 4px;
 }
 
+.heart-button:hover {
+  color: var(--brand);
+}
+
+.heart-button.active {
+  color: var(--brand);
+}
+
+.heart-button.active svg {
+  fill: currentColor;
+}
+
 .detail-content {
   padding-bottom: 44px;
 }