Vue 3 + Vite + TypeScript scaffold with theme-aware CSS variables, router, LibraryView (PDF library grid), DocumentCard (per-doc status + actions), IngestProgress (polling progress bar), and ChatView stub for Task 9.
33 lines
850 B
Vue
33 lines
850 B
Vue
<template>
|
|
<div id="app">
|
|
<nav class="nav">
|
|
<span class="nav-brand">Pagepiper</span>
|
|
<RouterLink to="/" class="nav-link">Library</RouterLink>
|
|
<RouterLink to="/chat" class="nav-link">Chat</RouterLink>
|
|
</nav>
|
|
<RouterView />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { RouterLink, RouterView } from "vue-router"
|
|
</script>
|
|
|
|
<style>
|
|
@import "@/theme.css";
|
|
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.nav-brand { font-weight: 700; color: var(--color-accent); }
|
|
.nav-link { color: var(--color-text-muted); text-decoration: none; }
|
|
.nav-link:hover, .nav-link.router-link-active { color: var(--color-text); }
|
|
</style>
|