From bcd9a23501cf253f52960b73647e16fcb610e10e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 14 May 2026 07:36:01 -0400
Subject: [PATCH] feat: add SPA app shell, router, system store, and route
 placeholders

Nav lists every FC-2 and FC-3 surface with a placeholder view that names
the sub-project that will fill it. System store polls /api/health on mount
and renders a status pip in the nav footer.

Favicon uses Curator's aged amber accent (#A87338).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/public/favicon.svg            |  5 ++
 frontend/src/components/AppShell.vue   | 78 ++++++++++++++++++++++++++
 frontend/src/router.js                 | 20 +++++++
 frontend/src/stores/system.js          | 18 ++++++
 frontend/src/views/PlaceholderView.vue | 34 +++++++++++
 5 files changed, 155 insertions(+)
 create mode 100644 frontend/public/favicon.svg
 create mode 100644 frontend/src/components/AppShell.vue
 create mode 100644 frontend/src/router.js
 create mode 100644 frontend/src/stores/system.js
 create mode 100644 frontend/src/views/PlaceholderView.vue

diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..6b07fb4
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#14171A"/>
+  <path d="M8 9 L8 23 L24 23 L24 9 L20 9 L16 13 L12 9 Z"
+        fill="#A87338" stroke="#E8E4D8" stroke-width="1" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
new file mode 100644
index 0000000..ce71c61
--- /dev/null
+++ b/frontend/src/components/AppShell.vue
@@ -0,0 +1,78 @@
+<template>
+  <v-navigation-drawer permanent :width="220" class="fc-nav">
+    <div class="fc-wordmark px-4 py-4">
+      <span class="fc-wordmark__text">FabledCurator</span>
+    </div>
+    <v-list nav density="compact">
+      <v-list-item
+        v-for="r in navRoutes"
+        :key="r.name"
+        :to="{ name: r.name }"
+        :title="r.meta.title"
+        :prepend-icon="iconFor(r.name)"
+        class="fc-nav-item"
+      />
+    </v-list>
+    <template #append>
+      <div class="px-4 py-3 fc-status">
+        <v-icon size="x-small" :color="health.color">{{ health.icon }}</v-icon>
+        <span class="text-caption fc-status__label">{{ health.label }}</span>
+      </div>
+    </template>
+  </v-navigation-drawer>
+
+  <v-main>
+    <slot />
+  </v-main>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useSystemStore } from '../stores/system.js'
+import router from '../router.js'
+
+const system = useSystemStore()
+onMounted(() => system.refreshHealth())
+
+const navRoutes = computed(() =>
+  router.getRoutes().filter(r => r.meta?.title)
+)
+
+function iconFor(name) {
+  const map = {
+    gallery: 'mdi-image-multiple',
+    showcase: 'mdi-view-dashboard-variant',
+    tags: 'mdi-tag-multiple',
+    settings: 'mdi-cog',
+    subscriptions: 'mdi-rss',
+    credentials: 'mdi-key-variant',
+    downloads: 'mdi-download'
+  }
+  return map[name] ?? 'mdi-circle-small'
+}
+
+const health = computed(() => {
+  if (system.healthy === null) return { icon: 'mdi-circle-outline', color: 'on-surface', label: 'checking…' }
+  if (system.healthy === true) return { icon: 'mdi-circle', color: 'success', label: 'healthy' }
+  return { icon: 'mdi-alert-circle', color: 'error', label: 'unreachable' }
+})
+</script>
+
+<style scoped>
+.fc-wordmark__text {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 20px;
+  font-weight: 500;
+  /* Accent color comes from the Vuetify theme via CSS var */
+  color: rgb(var(--v-theme-accent));
+}
+.fc-nav-item.v-list-item--active {
+  /* "you are here" indicator uses the accent per FabledDesignSystem */
+  color: rgb(var(--v-theme-accent));
+}
+.fc-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
new file mode 100644
index 0000000..d60b5e5
--- /dev/null
+++ b/frontend/src/router.js
@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import PlaceholderView from './views/PlaceholderView.vue'
+
+const routes = [
+  // FC-2: image backbone
+  { path: '/',          name: 'gallery',       component: PlaceholderView, meta: { title: 'Gallery'      } },
+  { path: '/showcase',  name: 'showcase',      component: PlaceholderView, meta: { title: 'Showcase'     } },
+  { path: '/tags',      name: 'tags',          component: PlaceholderView, meta: { title: 'Tags'         } },
+  { path: '/settings',  name: 'settings',      component: PlaceholderView, meta: { title: 'Settings'     } },
+
+  // FC-3: subscription backbone
+  { path: '/subscriptions', name: 'subscriptions', component: PlaceholderView, meta: { title: 'Subscriptions' } },
+  { path: '/credentials',   name: 'credentials',   component: PlaceholderView, meta: { title: 'Credentials'   } },
+  { path: '/downloads',     name: 'downloads',     component: PlaceholderView, meta: { title: 'Downloads'     } }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})
diff --git a/frontend/src/stores/system.js b/frontend/src/stores/system.js
new file mode 100644
index 0000000..4412640
--- /dev/null
+++ b/frontend/src/stores/system.js
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useSystemStore = defineStore('system', () => {
+  const healthy = ref(null)  // null=unknown, true=ok, false=down
+
+  async function refreshHealth() {
+    try {
+      const r = await fetch('/api/health')
+      const body = await r.json()
+      healthy.value = r.ok && body.status === 'ok'
+    } catch {
+      healthy.value = false
+    }
+  }
+
+  return { healthy, refreshHealth }
+})
diff --git a/frontend/src/views/PlaceholderView.vue b/frontend/src/views/PlaceholderView.vue
new file mode 100644
index 0000000..5c53509
--- /dev/null
+++ b/frontend/src/views/PlaceholderView.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-container class="py-8">
+    <h1 class="fc-h1 mb-4">{{ title }}</h1>
+    <v-alert type="info" variant="tonal" icon="mdi-toolbox">
+      This surface is a placeholder. It will be implemented in
+      <strong>{{ surfaceOwner }}</strong>.
+    </v-alert>
+  </v-container>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const title = computed(() => route.meta.title ?? 'FabledCurator')
+
+const surfaceOwner = computed(() => {
+  const fc2 = new Set(['gallery', 'showcase', 'tags', 'settings'])
+  const fc3 = new Set(['subscriptions', 'credentials', 'downloads'])
+  if (fc2.has(route.name)) return 'FC-2 (image backbone)'
+  if (fc3.has(route.name)) return 'FC-3 (subscription backbone)'
+  return 'a future sub-project'
+})
+</script>
+
+<style scoped>
+.fc-h1 {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 32px;
+  font-weight: 500;
+  color: rgb(var(--v-theme-on-surface));
+}
+</style>