feat(web): flatten admin shell — horizontal tabs, drop redundant banner

The /admin layout had three nested concentric shells: the global Shell
header + main nav, then a per-admin header banner with a Sword icon, then
a left-aligned admin sub-nav (AdminSidebar) — two competing left-edge
navigation columns plus a redundant 'Admin' label that the URL and active
nav already conveyed.

Replaces the side sub-nav with a horizontal tab strip across the top of
the admin content (matches the discover-page tab pattern), drops the
duplicate header banner, and removes the disabled Users/Library
placeholder items so the tab strip only shows surfaces that actually
ship today. The component is renamed AdminSidebar -> AdminTabs to match
its new shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-01 22:14:39 -04:00
co-authored by Claude Opus 4.7
parent 4b088e6b6f
commit 14c1895beb
5 changed files with 100 additions and 138 deletions
+38
View File
@@ -0,0 +1,38 @@
<script lang="ts">
import { page } from '$app/state';
type Item = { href: string; label: string };
// Users and Library are deferred until they have real routes.
// Adding them as disabled items clutters the tab strip without serving the
// operator — they'll be added back when each surface ships.
const items: Item[] = [
{ href: '/admin', label: 'Overview' },
{ href: '/admin/integrations', label: 'Integrations' },
{ href: '/admin/requests', label: 'Requests' },
{ href: '/admin/quarantine', label: 'Quarantine' }
];
function isActive(href: string): boolean {
if (href === '/admin') return page.url.pathname === '/admin';
return page.url.pathname.startsWith(href);
}
</script>
<nav aria-label="Admin sections" class="border-b border-border">
<ul class="flex gap-2">
{#each items as item (item.href)}
<li>
<a
href={item.href}
aria-current={isActive(item.href) ? 'page' : undefined}
class="block border-b-2 px-3 py-2 text-sm transition-colors {isActive(item.href)
? 'border-accent text-text-primary'
: 'border-transparent text-text-secondary hover:text-text-primary'}"
>
{item.label}
</a>
</li>
{/each}
</ul>
</nav>