feat(frontend): add triage list, item modal, and theme

2026-07-13 14:21:45 -07:00 · 2026-07-13 14:21:45 -07:00 · 13b41cc438
commit 13b41cc438
parent b9c0eda8b5
15 changed files with 3477 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,2 @@
+node_modules/
+dist/
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -0,0 +1,9 @@
+FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chorus</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,20 @@
+{
+  "name": "chorus-frontend",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "vue": "^3.4.38"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^25.0.0",
+    "vite": "^5.4.3",
+    "vitest": "^2.0.5"
+  }
+}
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -0,0 +1,36 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import TriageList from './components/TriageList.vue'
+import ItemModal from './components/ItemModal.vue'
+import { fetchItems, fetchItem } from './api.js'
+
+const items = ref([])
+const selectedItem = ref(null)
+
+async function loadItems() {
+  items.value = await fetchItems()
+}
+
+async function openItem(id) {
+  selectedItem.value = await fetchItem(id)
+}
+
+function closeModal() {
+  selectedItem.value = null
+}
+
+async function onSaved() {
+  closeModal()
+  await loadItems()
+}
+
+onMounted(loadItems)
+</script>
+
+<template>
+  <div class="container">
+    <h1>Chorus</h1>
+    <TriageList :items="items" @select-item="openItem" />
+    <ItemModal :item="selectedItem" @close="closeModal" @saved="onSaved" />
+  </div>
+</template>
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@ -0,0 +1,23 @@
+const BASE_URL = import.meta.env.VITE_CHORUS_API_BASE_URL || '/api'
+
+export async function fetchItems({ includeDone = false } = {}) {
+  const resp = await fetch(`${BASE_URL}/items?include_done=${includeDone}`)
+  if (!resp.ok) throw new Error(`Failed to fetch items: ${resp.status}`)
+  return resp.json()
+}
+
+export async function fetchItem(id) {
+  const resp = await fetch(`${BASE_URL}/items/${id}`)
+  if (!resp.ok) throw new Error(`Failed to fetch item ${id}: ${resp.status}`)
+  return resp.json()
+}
+
+export async function updateItem(id, fields) {
+  const resp = await fetch(`${BASE_URL}/items/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(fields),
+  })
+  if (!resp.ok) throw new Error(`Failed to update item ${id}: ${resp.status}`)
+  return resp.json()
+}
--- a/frontend/src/components/ItemModal.vue
+++ b/frontend/src/components/ItemModal.vue
@ -0,0 +1,115 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { updateItem } from '../api.js'
+
+const props = defineProps({ item: { type: Object, default: null } })
+const emit = defineEmits(['close', 'saved'])
+
+const senderId = ref('')
+const type = ref('')
+const stage = ref('')
+const notes = ref('')
+const followUpDate = ref('')
+
+const DONATION_STAGES = ['new', 'replied', 'pickup_scheduled', 'picked_up', 'logged_in_bookmark']
+const OTHER_STAGES = ['new', 'done']
+
+watch(() => props.item, (item) => {
+  if (!item) return
+  senderId.value = item.sender_id || ''
+  type.value = item.type || ''
+  stage.value = item.stage || 'new'
+  notes.value = item.notes || ''
+  followUpDate.value = item.follow_up_date || ''
+}, { immediate: true })
+
+function stagesForType() {
+  return type.value === 'donation' ? DONATION_STAGES : OTHER_STAGES
+}
+
+async function save() {
+  const updated = await updateItem(props.item.id, {
+    sender_id: senderId.value || null,
+    type: type.value || null,
+    stage: stage.value,
+    notes: notes.value || null,
+    follow_up_date: followUpDate.value || null,
+  })
+  emit('saved', updated)
+}
+</script>
+
+<template>
+  <div v-if="item" class="modal-backdrop" @click.self="emit('close')">
+    <div class="modal">
+      <p class="raw-content">{{ item.raw_content }}</p>
+
+      <label>Sender/ID
+        <input v-model="senderId" type="text" />
+      </label>
+
+      <label>Type
+        <select v-model="type">
+          <option value="">unset</option>
+          <option value="donation">Donation</option>
+          <option value="other">Other</option>
+        </select>
+      </label>
+
+      <label>Stage
+        <select v-model="stage">
+          <option v-for="s in stagesForType()" :key="s" :value="s">{{ s }}</option>
+        </select>
+      </label>
+
+      <label>Notes
+        <textarea v-model="notes" placeholder="Save for later..."></textarea>
+      </label>
+
+      <label>Follow-up date
+        <input v-model="followUpDate" type="date" />
+      </label>
+
+      <div class="actions">
+        <button @click="save">Save</button>
+        <button @click="emit('close')">Close</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background: var(--color-bg);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  max-width: 480px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+}
+
+.actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+}
+</style>
--- a/frontend/src/components/ModalityBadge.vue
+++ b/frontend/src/components/ModalityBadge.vue
@ -0,0 +1,19 @@
+<script setup>
+defineProps({ modality: { type: String, required: true } })
+</script>
+
+<template>
+  <span class="badge" :style="{ backgroundColor: `var(--modality-${modality}, var(--color-accent))` }">
+    {{ modality }}
+  </span>
+</template>
+
+<style scoped>
+.badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--radius);
+  color: white;
+  font-size: 0.85rem;
+}
+</style>
--- a/frontend/src/components/TriageList.vue
+++ b/frontend/src/components/TriageList.vue
@ -0,0 +1,69 @@
+<script setup>
+import ModalityBadge from './ModalityBadge.vue'
+
+defineProps({ items: { type: Array, required: true } })
+const emit = defineEmits(['select-item'])
+</script>
+
+<template>
+  <table class="triage-table">
+    <thead>
+      <tr>
+        <th>Modality</th>
+        <th>Sender/ID</th>
+        <th>Date</th>
+        <th>Type</th>
+        <th>Stage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="item in items"
+        :key="item.id"
+        data-test="item-row"
+        @click="emit('select-item', item.id)"
+      >
+        <td><ModalityBadge :modality="item.modality" /></td>
+        <td>{{ item.sender_id || '—' }}</td>
+        <td>{{ new Date(item.captured_at).toLocaleDateString() }}</td>
+        <td>{{ item.type || 'unset' }}</td>
+        <td>{{ item.stage }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.triage-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.triage-table th, .triage-table td {
+  padding: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+}
+
+.triage-table tr[data-test="item-row"] {
+  cursor: pointer;
+}
+
+.triage-table tr[data-test="item-row"]:hover {
+  background: var(--color-surface);
+}
+
+@media (max-width: 640px) {
+  .triage-table thead {
+    display: none;
+  }
+  .triage-table tr {
+    display: block;
+    margin-bottom: var(--spacing-sm);
+  }
+  .triage-table td {
+    display: block;
+    border-bottom: none;
+  }
+}
+</style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './theme.css'
+
+createApp(App).mount('#app')
--- a/frontend/src/theme.css
+++ b/frontend/src/theme.css
@ -0,0 +1,54 @@
+:root {
+  --color-bg: #ffffff;
+  --color-surface: #f4f4f6;
+  --color-text: #1a1a1e;
+  --color-text-muted: #5b5b63;
+  --color-border: #d8d8dd;
+  --color-accent: #4a6fa5;
+
+  --modality-bh_email: #4a6fa5;
+  --modality-personal_email: #6f9c8f;
+  --modality-bh_text: #a5764a;
+  --modality-personal_text: #a58a4a;
+  --modality-voice: #8a6fa5;
+  --modality-fb_messenger: #4a6fa5;
+  --modality-nd_messenger: #6f8fa5;
+
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --radius: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #17171a;
+    --color-surface: #202024;
+    --color-text: #e8e8ea;
+    --color-text-muted: #a0a0a8;
+    --color-border: #33333a;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: var(--spacing-md);
+}
+
+@media (max-width: 640px) {
+  .container {
+    padding: var(--spacing-sm);
+  }
+}
--- a/frontend/tests/TriageList.spec.js
+++ b/frontend/tests/TriageList.spec.js
@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TriageList from '../src/components/TriageList.vue'
+
+const sampleItems = [
+  {
+    id: 1, modality: 'bh_email', sender_id: 'jane@example.com',
+    captured_at: '2026-07-13T07:00:00Z', type: 'donation', stage: 'new',
+  },
+  {
+    id: 2, modality: 'voice', sender_id: null,
+    captured_at: '2026-07-12T18:00:00Z', type: null, stage: 'new',
+  },
+]
+
+describe('TriageList', () => {
+  it('renders one row per item', () => {
+    const wrapper = mount(TriageList, { props: { items: sampleItems } })
+    const rows = wrapper.findAll('[data-test="item-row"]')
+    expect(rows.length).toBe(2)
+  })
+
+  it('emits select-item with the item id when a row is clicked', async () => {
+    const wrapper = mount(TriageList, { props: { items: sampleItems } })
+    await wrapper.findAll('[data-test="item-row"]')[0].trigger('click')
+    expect(wrapper.emitted('select-item')[0]).toEqual([1])
+  })
+
+  it('shows the modality badge text for each row', () => {
+    const wrapper = mount(TriageList, { props: { items: sampleItems } })
+    expect(wrapper.text()).toContain('bh_email')
+    expect(wrapper.text()).toContain('voice')
+  })
+})
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})
--- a/frontend/vitest.config.js
+++ b/frontend/vitest.config.js
@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+  },
+})