Add a persistent left sidebar to the signed-in layout

App.vue now renders a left AppSidebar beside the routed view for any
requiresAuth page, staying mounted as you move between the dashboard and
projects. The sidebar has a Dashboard link (icon), a divider, the project list
(each an icon link, current page highlighted via RouterLink active-class), and a
compact new-project form that jumps to the created project.

- New /dashboard route + DashboardView ("under construction"); / and unknown
  paths redirect there. HomeView removed -- its project list and form moved into
  the sidebar.
- <RouterView :key="route.path"> so navigating project -> project via the
  sidebar remounts and reloads instead of reusing the instance.
- Signed-out routes (login/register/verify-email) render without the sidebar.

Icons are inline SVG -- no new dependency.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -18,6 +18,7 @@ Each user owns **projects**, and each project holds ordered **cards**.
 | 8 | Passwordless login — magic-link by default, password login behind a toggle | ✅ done |
 | 9 | Per-project card statuses ("To do" / "Doing" / "Done"); status chip, new cards start with none | ✅ done |
 | 10 | Project view — full-width, tabbed: alphabetical "All tasks" list + "Kanban" board, per-column drag ordering | ✅ done |
+| 11 | Persistent left sidebar — Dashboard link + project list/new-project form; `/` → dashboard placeholder | ✅ done |
 
 Registration signs the user in immediately and emails a magic link that verifies
 the address; `user.email_verified` stays `false` until the link is opened. See

web/README.md

@@ -35,12 +35,27 @@ src/stores/auth.ts      Pinia store: token in localStorage, register/login/fetch
 src/stores/projects.ts  Pinia store: the user's projects (fetch + create)
 src/stores/cards.ts     Pinia store: one project's cards (CRUD + reorderColumn)
 src/lib/api.ts          fetch wrapper, bearer token, typed ApiError
+src/components/AppSidebar.vue left nav: Dashboard link, divider, project list + new-project form
 src/components/CardRow.vue    editable text + status chip + delete, one card
 src/components/KanbanCard.vue small draggable card for the board columns
-src/views/              HomeView, ProjectView, LoginView, RegisterView,
+src/views/              DashboardView, ProjectView, LoginView, RegisterView,
                         ProfileView, VerifyEmailView
 ```
 
+## Layout
+
+Signed-in "app" routes (`meta.requiresAuth`) render inside a persistent shell:
+the top bar, then a left **sidebar** (`AppSidebar.vue`) beside the routed view.
+The sidebar stays mounted across navigation — it holds a **Dashboard** link, a
+divider, the project list, and a compact new-project form (creating one jumps to
+it). The current page is highlighted via RouterLink's `active-class`.
+`<RouterView :key="route.path">` remounts the view on every path change so
+sidebar → project → project navigation always does a fresh load.
+
+`/` redirects to `/dashboard` (`DashboardView.vue`, an "under construction"
+placeholder). Signed-out routes (`/login`, `/register`, `/verify-email`) render
+without the sidebar.
+
 ## Project detail
 
 `/projects/:id` shows one project. It renders on a **full-width** layout (the
@@ -48,7 +63,7 @@ route sets `meta.wide`, which widens `.app__main` in `App.vue`). The title and
 description are inline-editable (saved on blur via `PATCH /api/projects/:id`; the
 description shows an "Add a description" placeholder when empty). A **Manage**
 menu (top right) has a **Delete project** action that opens a confirmation modal;
-confirming calls `DELETE /api/projects/:id` and returns to the all-projects view.
+confirming calls `DELETE /api/projects/:id` and returns to the dashboard.
 
 Below the header are two tabs (local `activeTab` state, `v-show` so both stay
 mounted):

web/src/App.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
+import AppSidebar from './components/AppSidebar.vue'
 import { useAuthStore } from './stores/auth'
 import { useCardsStore } from './stores/cards'
 import { useProjectsStore } from './stores/projects'
@@ -10,6 +12,10 @@ const cards = useCardsStore()
 const router = useRouter()
 const route = useRoute()
 
+// The sidebar rides along with every signed-in "app" page (dashboard, projects,
+// profile) and stays mounted as you navigate between them.
+const showSidebar = computed(() => auth.isAuthenticated && route.meta.requiresAuth === true)
+
 async function onLogout() {
   auth.logout()
   projects.reset()
@@ -32,8 +38,14 @@ async function onLogout() {
       </div>
     </header>
 
-    <main class="app__main" :class="{ 'app__main--wide': route.meta.wide }">
+    <div class="app__body">
-      <RouterView />
+      <AppSidebar v-if="showSidebar" />
-    </main>
+
+      <main class="app__main" :class="{ 'app__main--wide': route.meta.wide }">
+        <!-- Key by path so navigating between projects via the sidebar remounts
+             the view (each :id is a fresh load) rather than reusing the instance. -->
+        <RouterView :key="route.path" />
+      </main>
+    </div>
   </div>
 </template>

web/src/components/AppSidebar.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+import { ApiError } from '../lib/api'
+import { MAX_PROJECTS, useProjectsStore } from '../stores/projects'
+
+const projects = useProjectsStore()
+const router = useRouter()
+
+const title = ref('')
+const createError = ref<ApiError | null>(null)
+const submitting = ref(false)
+const loadError = ref<string | null>(null)
+
+const atLimit = computed(() => projects.projects.length >= MAX_PROJECTS)
+
+onMounted(() => {
+  if (!projects.loaded) void load()
+})
+
+async function load() {
+  loadError.value = null
+  try {
+    await projects.fetchProjects()
+  } catch (e) {
+    loadError.value = e instanceof ApiError ? e.message : 'Could not load your projects.'
+  }
+}
+
+async function onCreate() {
+  submitting.value = true
+  createError.value = null
+  try {
+    const project = await projects.createProject(title.value)
+    title.value = ''
+    await router.push({ name: 'project', params: { id: project.id } })
+  } catch (e) {
+    createError.value = e instanceof ApiError ? e : new ApiError('Could not create the project.', 0)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <aside class="sidebar">
+    <nav class="sidebar__nav">
+      <RouterLink :to="{ name: 'dashboard' }" class="sidebar__link" active-class="sidebar__link--active">
+        <svg class="sidebar__icon" viewBox="0 0 16 16" aria-hidden="true">
+          <rect x="1" y="1" width="6" height="6" rx="1.2" />
+          <rect x="9" y="1" width="6" height="6" rx="1.2" />
+          <rect x="1" y="9" width="6" height="6" rx="1.2" />
+          <rect x="9" y="9" width="6" height="6" rx="1.2" />
+        </svg>
+        <span>Dashboard</span>
+      </RouterLink>
+    </nav>
+
+    <hr class="sidebar__divider" />
+
+    <p class="sidebar__heading">Projects</p>
+
+    <p v-if="loadError" class="sidebar__note form-error">{{ loadError }}</p>
+    <p v-else-if="projects.loading && !projects.loaded" class="sidebar__note muted">Loading…</p>
+    <p v-else-if="projects.projects.length === 0" class="sidebar__note muted">No projects yet.</p>
+
+    <nav v-else class="sidebar__nav sidebar__projects">
+      <RouterLink
+        v-for="project in projects.projects"
+        :key="project.id"
+        :to="{ name: 'project', params: { id: project.id } }"
+        class="sidebar__link sidebar__link--project"
+        active-class="sidebar__link--active"
+      >
+        <svg class="sidebar__icon" viewBox="0 0 16 16" aria-hidden="true">
+          <rect x="1" y="2" width="3.5" height="12" rx="1" />
+          <rect x="6.25" y="2" width="3.5" height="9" rx="1" />
+          <rect x="11.5" y="2" width="3.5" height="6" rx="1" />
+        </svg>
+        <span class="sidebar__link-text">{{ project.title }}</span>
+      </RouterLink>
+    </nav>
+
+    <form class="sidebar__form" @submit.prevent="onCreate">
+      <input
+        v-model="title"
+        type="text"
+        maxlength="255"
+        required
+        :disabled="atLimit"
+        placeholder="New project"
+        aria-label="New project title"
+      />
+      <small v-if="createError?.fieldError('title')" class="field-error">
+        {{ createError.fieldError('title') }}
+      </small>
+      <small
+        v-else-if="createError && Object.keys(createError.details).length === 0"
+        class="field-error"
+      >
+        {{ createError.message }}
+      </small>
+      <button type="submit" :disabled="submitting || atLimit">
+        {{ submitting ? 'Creating…' : 'Add project' }}
+      </button>
+      <small v-if="atLimit" class="hint">Limit of {{ MAX_PROJECTS }} projects reached.</small>
+    </form>
+  </aside>
+</template>

web/src/router/index.ts

@@ -4,10 +4,11 @@ import { useAuthStore } from '../stores/auth'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    { path: '/', redirect: { name: 'dashboard' } },
     {
-      path: '/',
+      path: '/dashboard',
-      name: 'home',
+      name: 'dashboard',
-      component: () => import('../views/HomeView.vue'),
+      component: () => import('../views/DashboardView.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -40,22 +41,24 @@ const router = createRouter({
       component: () => import('../views/RegisterView.vue'),
       meta: { guestOnly: true },
     },
-    { path: '/:pathMatch(.*)*', redirect: { name: 'home' } },
+    { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },
   ],
 })
 
+const DEFAULT_PATHS = new Set(['/', '/dashboard'])
+
 router.beforeEach((to) => {
   const auth = useAuthStore()
 
   if (to.meta.requiresAuth && !auth.isAuthenticated) {
     return {
       name: 'login',
-      query: to.fullPath === '/' ? {} : { redirect: to.fullPath },
+      query: DEFAULT_PATHS.has(to.path) ? {} : { redirect: to.fullPath },
     }
   }
 
   if (to.meta.guestOnly && auth.isAuthenticated) {
-    return { name: 'home' }
+    return { name: 'dashboard' }
   }
 })
 

web/src/style.css

@@ -72,7 +72,14 @@ a.badge {
   text-decoration: none;
 }
 
+.app__body {
+  display: flex;
+  align-items: flex-start;
+}
+
 .app__main {
+  flex: 1;
+  min-width: 0;
   max-width: 32rem;
   margin: 2.5rem auto;
   padding: 0 1.25rem;
@@ -84,6 +91,112 @@ a.badge {
   margin: 1.5rem auto;
 }
 
+/* --- left sidebar (signed-in app pages) ------------------------------ */
+
+.sidebar {
+  flex: 0 0 15rem;
+  align-self: stretch;
+  position: sticky;
+  top: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+  padding: 1rem 0.75rem 1.5rem;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: 7px;
+  color: var(--text);
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.sidebar__link:hover {
+  background: var(--bg);
+}
+
+.sidebar__link--active,
+.sidebar__link--active:hover {
+  background: var(--accent);
+  color: var(--accent-text);
+}
+
+.sidebar__icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
+.sidebar__link-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar__divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 0.75rem 0;
+}
+
+.sidebar__heading {
+  margin: 0 0 0.35rem;
+  padding: 0 0.6rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+}
+
+.sidebar__projects {
+  max-height: 45vh;
+  overflow-y: auto;
+}
+
+.sidebar__note {
+  padding: 0 0.6rem;
+  font-size: 0.85rem;
+}
+
+.sidebar__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.sidebar__form input {
+  font: inherit;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.55rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.sidebar__form button[type='submit'] {
+  padding: 0.45rem 0.7rem;
+  font-size: 0.9rem;
+  border-radius: 6px;
+}
+
 .card {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -110,6 +223,23 @@ h1 {
   font-size: 0.9rem;
 }
 
+.under-construction {
+  margin-top: 1.5rem;
+  padding: 2.5rem 1rem;
+  text-align: center;
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+}
+
+.under-construction__icon {
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.under-construction p {
+  margin: 0.5rem 0 0;
+}
+
 .badge {
   padding: 0.1rem 0.45rem;
   border-radius: 999px;
@@ -126,43 +256,6 @@ h1 {
   color: inherit;
 }
 
-.projects {
-  list-style: none;
-  margin: 1.5rem 0 0;
-  padding: 0;
-  display: grid;
-  gap: 0.75rem;
-}
-
-.projects__item {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.projects__link {
-  display: block;
-  padding: 0.75rem 0.9rem;
-  color: inherit;
-  text-decoration: none;
-  border-radius: 8px;
-}
-
-.projects__link:hover {
-  background: var(--bg);
-}
-
-.projects__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.projects__title {
-  font-weight: 600;
-  word-break: break-word;
-}
-
 /* --- project detail: cards ------------------------------------------ */
 
 .cards {
@@ -546,7 +639,6 @@ h1 {
   margin: 1.25rem 0;
 }
 
-.form--new-project,
 .form--new-card {
   margin-top: 1.5rem;
   padding-top: 1.25rem;

web/src/views/DashboardView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAuthStore } from '../stores/auth'
+
+const auth = useAuthStore()
+</script>
+
+<template>
+  <section class="card">
+    <h1>Dashboard</h1>
+
+    <div v-if="!auth.emailVerified" class="notice">
+      Your email address <strong>{{ auth.user?.email }}</strong> has not been
+      verified yet.
+    </div>
+
+    <div class="under-construction">
+      <span class="under-construction__icon" aria-hidden="true">🚧</span>
+      <p>This page is under construction.</p>
+      <p class="muted">Pick a project from the sidebar to get started.</p>
+    </div>
+  </section>
+</template>

web/src/views/HomeView.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { ApiError } from '../lib/api'
-import { useAuthStore } from '../stores/auth'
-import { MAX_PROJECTS, useProjectsStore } from '../stores/projects'
-
-const auth = useAuthStore()
-const projects = useProjectsStore()
-
-const loadError = ref<string | null>(null)
-
-const title = ref('')
-const createError = ref<ApiError | null>(null)
-const submitting = ref(false)
-
-const atLimit = computed(() => projects.projects.length >= MAX_PROJECTS)
-const summary = computed(() => {
-  const n = projects.projects.length
-  return `You have ${n} ${n === 1 ? 'project' : 'projects'}.`
-})
-
-onMounted(load)
-
-async function load() {
-  loadError.value = null
-  try {
-    await projects.fetchProjects()
-  } catch (e) {
-    loadError.value = e instanceof ApiError ? e.message : 'Could not load your projects.'
-  }
-}
-
-async function onCreate() {
-  submitting.value = true
-  createError.value = null
-  try {
-    await projects.createProject(title.value)
-    title.value = ''
-  } catch (e) {
-    createError.value = e instanceof ApiError ? e : new ApiError('Could not create the project.', 0)
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<template>
-  <section class="card">
-    <h1>Your projects</h1>
-
-    <div v-if="!auth.emailVerified" class="notice">
-      Your email address <strong>{{ auth.user?.email }}</strong> has not been
-      verified yet.
-    </div>
-
-    <p v-if="loadError" class="form-error">{{ loadError }}</p>
-    <p v-else-if="projects.loading && !projects.loaded" class="muted">Loading…</p>
-
-    <template v-else>
-      <p class="muted">{{ summary }}</p>
-
-      <p v-if="projects.projects.length === 0" class="muted">
-        No projects yet — create your first one below.
-      </p>
-
-      <ul v-else class="projects">
-        <li v-for="project in projects.projects" :key="project.id" class="projects__item">
-          <RouterLink :to="{ name: 'project', params: { id: project.id } }" class="projects__link">
-            <div class="projects__head">
-              <span class="projects__title">{{ project.title }}</span>
-              <span class="badge">{{ project.completed_count }} / {{ project.card_count }} done</span>
-            </div>
-          </RouterLink>
-        </li>
-      </ul>
-
-      <form class="form form--new-project" @submit.prevent="onCreate">
-        <label>
-          <span>New project title</span>
-          <input v-model="title" type="text" maxlength="255" required :disabled="atLimit" />
-          <small v-if="createError?.fieldError('title')" class="field-error">
-            {{ createError.fieldError('title') }}
-          </small>
-        </label>
-
-        <p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
-          {{ createError.message }}
-        </p>
-
-        <button type="submit" :disabled="submitting || atLimit">
-          {{ submitting ? 'Creating…' : 'Create project' }}
-        </button>
-
-        <p v-if="atLimit" class="hint">
-          You have reached the maximum of {{ MAX_PROJECTS }} projects.
-        </p>
-      </form>
-    </template>
-  </section>
-</template>