Add server skeleton with directory app and local dev loop

web/directory/static/app.js

@@ -0,0 +1,68 @@
+const state = {people: []};
+
+function hue(text) {
+  let h = 0;
+  for (const c of text) {
+    h = (h * 31 + c.codePointAt(0)) % 360;
+  }
+  return h;
+}
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) {
+    node.className = className;
+  }
+  if (text) {
+    node.textContent = text;
+  }
+  return node;
+}
+
+function card(p) {
+  const root = el('div', 'card');
+  const avatar = el('div', 'avatar', (p.firstName[0] || '') + (p.lastName[0] || ''));
+  avatar.style.background = `hsl(${hue(p.firstName + p.lastName)} 60% 45%)`;
+  root.append(avatar);
+  const info = el('div');
+  info.append(el('div', 'name', `${p.firstName} ${p.lastName}`));
+  if (p.pronunciation) {
+    info.append(el('div', 'pronunciation', p.pronunciation));
+  }
+  const who = p.role === 'student' ? `Student, grade ${p.grade}` : 'Parent';
+  info.append(el('div', 'detail', `${who} · ${p.familyName}`));
+  info.append(el('div', 'detail', p.address));
+  const contact = [p.phone || p.familyPhone, p.email].filter(Boolean).join(' · ');
+  if (contact) {
+    info.append(el('div', 'detail', contact));
+  }
+  root.append(info);
+  return root;
+}
+
+function render() {
+  const q = document.querySelector('#search').value.trim().toLowerCase();
+  const list = document.querySelector('#people');
+  list.replaceChildren();
+  const matches = state.people.filter(p =>
+    `${p.firstName} ${p.lastName} ${p.familyName}`.toLowerCase().includes(q));
+  if (matches.length === 0) {
+    list.append(el('div', 'empty', 'No matches.'));
+    return;
+  }
+  for (const p of matches) {
+    list.append(card(p));
+  }
+}
+
+async function load() {
+  const res = await fetch('/directory/api/people');
+  if (!res.ok) {
+    throw new Error(`loading people failed: ${res.status}`);
+  }
+  state.people = await res.json();
+  render();
+}
+
+document.querySelector('#search').addEventListener('input', render);
+load();

web/directory/static/style.css

@@ -0,0 +1,96 @@
+:root {
+  --bg: #f6f7f9;
+  --card: #ffffff;
+  --line: #e2e6eb;
+  --text: #1c2430;
+  --muted: #5b6572;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+header {
+  position: sticky;
+  top: 0;
+  background: var(--card);
+  border-bottom: 1px solid var(--line);
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+header h1 {
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+#search {
+  flex: 1;
+  max-width: 24rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cdd3db;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+}
+
+#people {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+  gap: 1rem;
+  padding: 1.5rem;
+  max-width: 72rem;
+  margin: 0 auto;
+}
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  display: flex;
+  gap: 0.75rem;
+}
+
+.avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.name {
+  font-weight: 600;
+}
+
+.pronunciation {
+  color: var(--muted);
+  font-style: italic;
+  font-size: 0.875rem;
+}
+
+.detail {
+  color: var(--muted);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.empty {
+  color: var(--muted);
+  padding: 3rem;
+  text-align: center;
+  grid-column: 1 / -1;
+}