1
0
forked from wrenn/wrenn

Move metrics to dedicated nav item, simplify capsules page

- Add Metrics nav item to sidebar with bar chart icon
- Create /dashboard/metrics page wrapping StatsPanel
- Remove tabs from capsules page (list is now the only view)
- Flatten capsules route: /capsules directly shows the list,
  removing the /list and /stats sub-routes
- Strip redundant title/subtitle from StatsPanel (page header
  provides context)
This commit is contained in:
2026-03-25 15:24:21 +06:00
parent 47b0ed5b52
commit 930da8a578
10 changed files with 825 additions and 808 deletions

View File

@ -1,7 +1,6 @@
<script lang="ts">
import Sidebar from '$lib/components/Sidebar.svelte';
import { capsuleRunningCount } from '$lib/capsule-store.svelte';
import { page } from '$app/stores';
let { children } = $props();
@ -10,10 +9,6 @@
? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
: false
);
let activeTab = $derived(
$page.url.pathname.startsWith('/dashboard/capsules/stats') ? 'stats' : 'list'
);
</script>
<svelte:head>
@ -26,8 +21,7 @@
<div class="flex flex-1 flex-col overflow-hidden">
<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
<!-- Header area -->
<div class="px-7 pt-8">
<!-- Top row: title + status chip -->
<div class="px-7 pt-8 pb-6">
<div class="flex items-center justify-between">
<div>
<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
@ -39,7 +33,6 @@
</div>
<div class="flex items-center gap-3">
<!-- Status chip -->
<div
class="flex items-center gap-2.5 rounded-[var(--radius-card)] border border-[var(--color-accent)]/20 bg-[var(--color-bg-2)] px-3.5 py-2"
>
@ -54,33 +47,6 @@
</div>
</div>
</div>
<!-- Tab bar -->
<div class="mt-5 flex gap-1 border-b border-[var(--color-border)]">
<a
href="/dashboard/capsules/list"
class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-ui font-medium transition-colors duration-150 {activeTab === 'list'
? 'border-[var(--color-accent)] text-[var(--color-accent-bright)]'
: 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'}"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
<line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" />
</svg>
List
</a>
<a
href="/dashboard/capsules/stats"
class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-ui font-medium transition-colors duration-150 {activeTab === 'stats'
? 'border-[var(--color-accent)] text-[var(--color-accent-bright)]'
: 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'}"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</svg>
Stats
</a>
</div>
</div>
{@render children()}