b434c9b68d
Adds the SvelteKit /admin route tree backed by the admin endpoints landed in PR 1-4. Pages: Overview (alerts + summary cards), Users (list / promote-demote / delete), Mangas (list with sync state + expandable per-chapter state), System (live disk/mem/cpu bars, refreshing every 5s). Security model: the backend's RequireAdmin extractor is the actual boundary. /admin/+layout.ts calls getSystemStats() at load and translates the response — 401 → redirect to /login, 403 → throw SvelteKit error(403) which renders the framework error page. The header's "Admin" link is hidden unless `session.user?.is_admin`, but that's UX only. Carries `is_admin: boolean` through to the frontend User TS type so the header check works and so admin tables can show role per row. Vitest covers lib/api/admin.ts (10 tests: list/delete/PATCH for users, sync-state filter for mangas, nested chapter route, system disk-nullable case). Playwright is intentionally deferred until the routes stabilise — admin UI is operator-only and changes shape often in v0.
76 lines
1.8 KiB
Svelte
76 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
let { children } = $props();
|
|
|
|
const tabs = [
|
|
{ href: '/admin', label: 'Overview' },
|
|
{ href: '/admin/users', label: 'Users' },
|
|
{ href: '/admin/mangas', label: 'Mangas' },
|
|
{ href: '/admin/system', label: 'System' }
|
|
];
|
|
</script>
|
|
|
|
<div class="admin-frame">
|
|
<aside aria-label="admin">
|
|
<h2>Admin</h2>
|
|
<nav>
|
|
{#each tabs as t (t.href)}
|
|
<a
|
|
href={t.href}
|
|
class:active={$page.url.pathname === t.href}
|
|
data-testid={`admin-nav-${t.label.toLowerCase()}`}
|
|
>
|
|
{t.label}
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
</aside>
|
|
<section>
|
|
{@render children()}
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.admin-frame {
|
|
display: grid;
|
|
grid-template-columns: 12rem 1fr;
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.admin-frame {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
aside {
|
|
position: sticky;
|
|
top: calc(var(--app-header-h) + var(--space-4));
|
|
}
|
|
aside h2 {
|
|
margin: 0 0 var(--space-3) 0;
|
|
font-size: var(--font-base);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
nav a {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
font-size: var(--font-sm);
|
|
}
|
|
nav a:hover {
|
|
background: var(--surface-elevated);
|
|
text-decoration: none;
|
|
}
|
|
nav a.active {
|
|
background: var(--surface-elevated);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
</style>
|