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>
2026-05-01 22:14:39 -04:00
parent 4b088e6b6f
commit 14c1895beb
5 changed files with 100 additions and 138 deletions
@@ -0,0 +1,58 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+const state = vi.hoisted(() => ({
+  pageUrl: new URL('http://localhost/admin')
+}));
+
+vi.mock('$app/state', () => ({
+  page: { get url() { return state.pageUrl; } }
+}));
+
+import AdminTabs from './AdminTabs.svelte';
+
+describe('AdminTabs', () => {
+  test('Overview tab is current when on /admin', () => {
+    state.pageUrl = new URL('http://localhost/admin');
+    render(AdminTabs);
+    const overview = screen.getByRole('link', { name: /overview/i });
+    expect(overview).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('Integrations tab is current when on /admin/integrations', () => {
+    state.pageUrl = new URL('http://localhost/admin/integrations');
+    render(AdminTabs);
+    expect(screen.getByRole('link', { name: /integrations/i })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+    expect(screen.getByRole('link', { name: /overview/i })).not.toHaveAttribute('aria-current');
+  });
+
+  test('Requests tab is current when on /admin/requests', () => {
+    state.pageUrl = new URL('http://localhost/admin/requests');
+    render(AdminTabs);
+    expect(screen.getByRole('link', { name: /requests/i })).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('Quarantine tab is current when on /admin/quarantine', () => {
+    state.pageUrl = new URL('http://localhost/admin/quarantine');
+    render(AdminTabs);
+    expect(screen.getByRole('link', { name: /quarantine/i })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+  });
+
+  test('renders exactly four tabs (Users + Library deferred until built)', () => {
+    state.pageUrl = new URL('http://localhost/admin');
+    render(AdminTabs);
+    const links = screen.getAllByRole('link');
+    expect(links.map((l) => l.textContent?.trim())).toEqual([
+      'Overview',
+      'Integrations',
+      'Requests',
+      'Quarantine'
+    ]);
+  });
+});