fix(backend): add ffmpeg to backend image for pocket-tts voice sample generation

handlePresignVoiceSample generates voice samples on demand via pocket-tts, which requires WAV→MP3 transcoding via ffmpeg. The backend was using distroless/static (no ffmpeg) so all pocket-tts preview requests returned 500. Switch backend stage to Alpine + ffmpeg, matching the runner image.
refactor(admin): replace tab bar with sidebar layout
2026-03-28 21:24:59 +05:00 · 2026-03-28 21:15:49 +05:00
3 changed files with 73 additions and 73 deletions
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -30,9 +30,14 @@ RUN --mount=type=cache,target=/root/go/pkg/mod \
      -o /out/healthcheck ./cmd/healthcheck

 # ── backend service ──────────────────────────────────────────────────────────
-FROM gcr.io/distroless/static:nonroot AS backend
+# Uses Alpine (not distroless) so ffmpeg is available for on-demand voice
+# sample generation via pocket-tts (WAV→MP3 transcoding).
+FROM alpine:3.21 AS backend
+RUN apk add --no-cache ffmpeg ca-certificates && \
+    addgroup -S appgroup && adduser -S appuser -G appgroup
 COPY --from=builder /out/healthcheck /healthcheck
 COPY --from=builder /out/backend /backend
+USER appuser
 ENTRYPOINT ["/backend"]

 # ── runner service ───────────────────────────────────────────────────────────
--- 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
--- 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?.()}
Author	SHA1	Message	Date
Admin	e71ddc2f8b	fix(backend): add ffmpeg to backend image for pocket-tts voice sample generation Some checks failed CI / Backend (push) Successful in 29s Details CI / UI (push) Successful in 27s Details Release / Test backend (push) Successful in 37s Details CI / Backend (pull_request) Failing after 11s Details Release / Check ui (push) Successful in 49s Details Release / Docker / caddy (push) Successful in 57s Details CI / UI (pull_request) Successful in 56s Details Release / Docker / runner (push) Failing after 1m22s Details Release / Docker / backend (push) Failing after 1m46s Details Release / Docker / ui (push) Successful in 2m25s Details Release / Gitea Release (push) Has been skipped Details handlePresignVoiceSample generates voice samples on demand via pocket-tts, which requires WAV→MP3 transcoding via ffmpeg. The backend was using distroless/static (no ffmpeg) so all pocket-tts preview requests returned 500. Switch backend stage to Alpine + ffmpeg, matching the runner image.	2026-03-28 21:24:59 +05:00
Admin	b783dae5f4	refactor(admin): replace tab bar with sidebar layout Some checks failed CI / Backend (push) Successful in 38s Details CI / UI (push) Successful in 42s Details Release / Test backend (push) Successful in 40s Details Release / Check ui (push) Successful in 33s Details CI / Backend (pull_request) Successful in 28s Details Release / Docker / caddy (push) Successful in 1m11s Details CI / UI (pull_request) Successful in 29s Details Release / Docker / ui (push) Successful in 1m54s Details Release / Docker / runner (push) Successful in 4m27s Details Release / Docker / backend (push) Failing after 5m11s Details Release / Gitea Release (push) Has been skipped Details 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.	2026-03-28 21:15:49 +05:00