feat: add 404 catch-all route with NotFound view

Unmatched URLs now show a glass-card 404 page with a link back
to the dashboard instead of a blank page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-15 04:50:24 +00:00
parent c1927ee6b2
commit 76a0910c0a
3 changed files with 21 additions and 1 deletions

View File

@@ -88,7 +88,7 @@
- [x] **Fix the 10 failing frontend tests**: Run `cd /Users/dorian/Projects/archy/neode-ui && npm run test -- --reporter=verbose 2>&1 | head -100` to see which tests fail. Known failures: (1) `src/stores/__tests__/appLauncher.test.ts` — URL rewriting tests expecting different proxy behavior, (2) `src/views/__tests__/settings.test.ts` — heading selector `h1` not finding the heading element. For each failing test, read the test file and the component/store it tests. Update test expectations to match current implementation. Do NOT change the production code to match tests — fix the tests. Run `npm run test` until all pass.
- [ ] **Add 404 catch-all route**: In `neode-ui/src/router/index.ts`, add a catch-all route at the end of the routes array: `{ path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFound.vue') }`. Create `neode-ui/src/views/NotFound.vue` — a simple view using the existing `.glass-card` class with "Page not found" message and a router-link back to `/dashboard`. Use `<script setup lang="ts">`, no props needed. Style with existing global classes only (`.glass-card`, `.glass-button`). Run `npm run type-check`.
- [x] **Add 404 catch-all route**: In `neode-ui/src/router/index.ts`, add a catch-all route at the end of the routes array: `{ path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFound.vue') }`. Create `neode-ui/src/views/NotFound.vue` — a simple view using the existing `.glass-card` class with "Page not found" message and a router-link back to `/dashboard`. Use `<script setup lang="ts">`, no props needed. Style with existing global classes only (`.glass-card`, `.glass-button`). Run `npm run type-check`.
---

View File

@@ -185,6 +185,11 @@ const router = createRouter({
},
],
},
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: () => import('../views/NotFound.vue'),
},
],
})

View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>
<template>
<div class="min-h-screen flex items-center justify-center px-4">
<div class="glass-card px-8 py-10 text-center max-w-md">
<h1 class="text-6xl font-bold text-white/30 mb-4">404</h1>
<p class="text-lg text-white/70 mb-6">Page not found</p>
<RouterLink to="/dashboard" class="glass-button inline-block px-6 py-3">
Back to Dashboard
</RouterLink>
</div>
</div>
</template>