From b783dae5f487d9a00a5564787f329cf608e3dbbe Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sat, 28 Mar 2026 21:15:49 +0500
Subject: [PATCH] refactor(admin): replace tab bar with sidebar layout

Move admin navigation from a two-row tab strip into a persistent left
sidebar with grouped sections (Pages / Tools). Consolidate Scrape and
Audio entries in the global top nav into a single Admin link.
---
 ui/src/routes/+layout.svelte       | 58 +++++++--------------
 ui/src/routes/admin/+layout.svelte | 81 ++++++++++++++++++------------
 2 files changed, 67 insertions(+), 72 deletions(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 71a417b..5808fd1 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -257,20 +257,14 @@
 
 				<div class="ml-auto flex items-center gap-4">
 					<!-- Desktop: admin + profile + sign out (hidden on mobile) -->
-					{#if data.user?.role === 'admin'}
-						<a
-							href="/admin/scrape"
-							class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
-						>
-							Scrape
-						</a>
-						<a
-							href="/admin/audio"
-							class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
-						>
-							Audio
-						</a>
-					{/if}
+				{#if data.user?.role === 'admin'}
+					<a
+						href="/admin/scrape"
+						class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+					>
+						Admin
+					</a>
+				{/if}
 					<a
 						href="/profile"
 						class="hidden sm:block text-sm transition-colors {page.url.pathname === '/profile' ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
@@ -350,31 +344,17 @@
 				>
 					Profile <span class="text-zinc-500 font-normal">({data.user.username})</span>
 				</a>
-				{#if data.user?.role === 'admin'}
-					<div class="my-1 border-t border-zinc-700/60"></div>
-					<p class="px-3 pt-1 pb-0.5 text-xs text-zinc-600 uppercase tracking-widest">Admin</p>
-					<a
-						href="/admin/scrape"
-						onclick={() => (menuOpen = false)}
-						class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
-					>
-						Scrape tasks
-					</a>
-					<a
-						href="/admin/audio"
-						onclick={() => (menuOpen = false)}
-						class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname === '/admin/audio' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
-					>
-						Audio cache
-					</a>
-					<a
-						href="/admin/audio-jobs"
-						onclick={() => (menuOpen = false)}
-						class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin/audio-jobs') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
-					>
-						Audio jobs
-					</a>
-				{/if}
+			{#if data.user?.role === 'admin'}
+				<div class="my-1 border-t border-zinc-700/60"></div>
+				<p class="px-3 pt-1 pb-0.5 text-xs text-zinc-600 uppercase tracking-widest">Admin</p>
+				<a
+					href="/admin/scrape"
+					onclick={() => (menuOpen = false)}
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+				>
+					Admin panel
+				</a>
+			{/if}
 			<div class="my-1 border-t border-zinc-700/60"></div>
 			<form method="POST" action="/logout">
 				<Button
diff --git a/ui/src/routes/admin/+layout.svelte b/ui/src/routes/admin/+layout.svelte
index 74b6f40..671a64c 100644
--- a/ui/src/routes/admin/+layout.svelte
+++ b/ui/src/routes/admin/+layout.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/state';
 
-	const adminTabs = [
+	const internalLinks = [
 		{ href: '/admin/scrape', label: 'Scrape' },
 		{ href: '/admin/audio', label: 'Audio' }
 	];
 
-	const toolTabs = [
+	const externalLinks = [
 		{ href: 'https://feedback.libnovel.cc', label: 'Feedback' },
 		{ href: 'https://errors.libnovel.cc', label: 'Errors' },
 		{ href: 'https://analytics.libnovel.cc', label: 'Analytics' },
@@ -21,36 +21,51 @@
 	let { children }: Props = $props();
 </script>
 
-<!-- Admin nav: internal pages + external tools -->
-<div class="mb-6 flex flex-wrap items-center gap-3">
-	<!-- Internal admin pages -->
-	<div class="flex gap-1 bg-zinc-800 rounded-lg p-1 border border-zinc-700">
-		{#each adminTabs as tab}
-			<a
-				href={tab.href}
-				class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
-					{page.url.pathname.startsWith(tab.href)
-						? 'bg-zinc-700 text-zinc-100'
-						: 'text-zinc-400 hover:text-zinc-200'}"
-			>
-				{tab.label}
-			</a>
-		{/each}
-	</div>
+<div class="flex min-h-[calc(100vh-4rem)] gap-0">
+	<!-- Sidebar -->
+	<aside class="w-48 shrink-0 border-r border-zinc-800 px-3 py-6 flex flex-col gap-6">
+		<!-- Internal pages -->
+		<div>
+			<p class="px-2 mb-2 text-xs font-semibold text-zinc-600 uppercase tracking-widest">Pages</p>
+			<nav class="flex flex-col gap-0.5">
+				{#each internalLinks as link}
+					<a
+						href={link.href}
+						class="px-2 py-1.5 rounded-md text-sm font-medium transition-colors
+							{page.url.pathname.startsWith(link.href)
+								? 'bg-zinc-800 text-zinc-100'
+								: 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200'}"
+					>
+						{link.label}
+					</a>
+				{/each}
+			</nav>
+		</div>
 
-	<!-- External tools (open in new tab) -->
-	<div class="flex gap-1 bg-zinc-800 rounded-lg p-1 border border-zinc-700">
-		{#each toolTabs as tool}
-			<a
-				href={tool.href}
-				target="_blank"
-				rel="noopener noreferrer"
-				class="px-4 py-1.5 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors"
-			>
-				{tool.label} ↗
-			</a>
-		{/each}
-	</div>
+		<!-- External tools -->
+		<div>
+			<p class="px-2 mb-2 text-xs font-semibold text-zinc-600 uppercase tracking-widest">Tools</p>
+			<nav class="flex flex-col gap-0.5">
+				{#each externalLinks as link}
+					<a
+						href={link.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="px-2 py-1.5 rounded-md text-sm font-medium text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200 transition-colors flex items-center justify-between"
+					>
+						{link.label}
+						<svg class="w-3 h-3 shrink-0 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+						</svg>
+					</a>
+				{/each}
+			</nav>
+		</div>
+	</aside>
+
+	<!-- Main content -->
+	<main class="flex-1 min-w-0 px-8 py-6">
+		{@render children?.()}
+	</main>
 </div>
-
-{@render children?.()}