From 24bd9c1d1bc4b826275dabb5c681a746962fb585 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 20 Apr 2026 08:41:18 +0200
Subject: [PATCH] feat(header): Versionsnummer unter dem Logo

Liest KOCHWAS_TAG via +layout.server.ts aus $env/dynamic/private
und zeigt den Tag als kleine graue Zeile unter dem Brand-Text auf
der Startseite. Fallback "dev" wenn nicht gesetzt. Auf engen
Screens mit ausgeblendetem Brand verschwindet auch die Version.

docker-compose.prod.yml reicht die Host-Env-Variable jetzt in den
Container durch (vorher nur fuers Image-Tag-Binding interpoliert).
---
 docker-compose.prod.yml      |  2 ++
 src/routes/+layout.server.ts |  8 ++++++++
 src/routes/+layout.svelte    | 23 ++++++++++++++++++++---
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/+layout.server.ts

diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 5039e03..3bab38f 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -11,6 +11,8 @@ services:
       - IMAGE_DIR=/data/images
       - SEARXNG_URL=http://searxng:8080
       - NODE_ENV=production
+      # Im Header als kleine Versionsnummer unter dem Logo angezeigt.
+      - KOCHWAS_TAG=${KOCHWAS_TAG:-dev}
     depends_on:
       - searxng
     restart: unless-stopped
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..8a6d14f
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,8 @@
+import type { LayoutServerLoad } from './$types';
+import { env } from '$env/dynamic/private';
+
+export const load: LayoutServerLoad = () => {
+  return {
+    version: env.KOCHWAS_TAG ?? 'dev'
+  };
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 646eb86..f460a8a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,7 +19,7 @@
   import { registerServiceWorker } from '$lib/client/sw-register';
   import { SearchStore } from '$lib/client/search.svelte';
 
-  let { children } = $props();
+  let { data, children } = $props();
 
   const navStore = new SearchStore({
     pageSize: 30,
@@ -115,7 +115,10 @@
 <header class="bar">
   <div class="bar-inner">
     {#if $page.url.pathname === '/'}
-      <a href="/" class="brand">Kochwas</a>
+      <div class="brand-stack">
+        <a href="/" class="brand">Kochwas</a>
+        <span class="version" title="Deployment-Tag">{data.version}</span>
+      </div>
     {:else}
       <a href="/" class="home-back" aria-label="Zurück zur Startseite">
         <ArrowLeft size={22} strokeWidth={2} />
@@ -307,6 +310,13 @@
     padding: 0.6rem 1rem;
     position: relative;
   }
+  .brand-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1;
+    flex-shrink: 0;
+  }
   .brand {
     font-size: 1.15rem;
     font-weight: 700;
@@ -314,6 +324,13 @@
     color: #2b6a3d;
     flex-shrink: 0;
   }
+  .version {
+    margin-top: 2px;
+    font-size: 0.65rem;
+    color: #9aa8a0;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+  }
   .home-back {
     display: inline-flex;
     align-items: center;
@@ -544,7 +561,7 @@
   }
   @media (max-width: 520px) {
     /* App-Icon auf engen Screens komplett aus — die Suche bekommt den Platz. */
-    .brand {
+    .brand-stack {
       display: none;
     }
     .nav-link {