From 822e75368a26d7c6187ca2a7d7479fb6316efd6c Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 20 Mar 2026 19:34:21 +0100
Subject: [PATCH] feat(shared): add DevBuildBadge component and
 getBuildDefines() helper

- shared-vite-config: getBuildDefines() injects __BUILD_HASH__ and
  __BUILD_TIME__ as compile-time constants via Vite define
- shared-ui: DevBuildBadge component shows git hash + build timestamp
  in a small fixed badge at bottom-right (click to expand)
- Integrated into mukke-web for deployment verification

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/mukke/apps/web/src/app.d.ts              |  2 +
 .../apps/web/src/routes/(app)/+layout.svelte  |  3 +-
 apps/mukke/apps/web/vite.config.ts            |  5 +-
 .../src/components/DevBuildBadge.svelte       | 77 +++++++++++++++++++
 packages/shared-ui/src/index.ts               |  1 +
 packages/shared-vite-config/src/index.ts      | 19 +++++
 6 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 apps/mukke/apps/web/src/app.d.ts
 create mode 100644 packages/shared-ui/src/components/DevBuildBadge.svelte

diff --git a/apps/mukke/apps/web/src/app.d.ts b/apps/mukke/apps/web/src/app.d.ts
new file mode 100644
index 000000000..c269fca6f
--- /dev/null
+++ b/apps/mukke/apps/web/src/app.d.ts
@@ -0,0 +1,2 @@
+declare const __BUILD_HASH__: string;
+declare const __BUILD_TIME__: string;
diff --git a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
index 32606826f..6349d65be 100644
--- a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
-	import { PillNavigation } from '@manacore/shared-ui';
+	import { PillNavigation, DevBuildBadge } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui';
 	import {
 		SplitPaneContainer,
@@ -166,6 +166,7 @@
 			<MiniPlayer />
 			<FullPlayer />
 			<QueuePanel />
+			<DevBuildBadge commitHash={__BUILD_HASH__} buildTime={__BUILD_TIME__} />
 		</div>
 	</SplitPaneContainer>
 {/if}
diff --git a/apps/mukke/apps/web/vite.config.ts b/apps/mukke/apps/web/vite.config.ts
index 2cd76c607..eb13508eb 100644
--- a/apps/mukke/apps/web/vite.config.ts
+++ b/apps/mukke/apps/web/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 import { createPWAConfig } from '@manacore/shared-pwa';
-import { MANACORE_SHARED_PACKAGES } from '@manacore/shared-vite-config';
+import { MANACORE_SHARED_PACKAGES, getBuildDefines } from '@manacore/shared-vite-config';
 
 export default defineConfig({
 	plugins: [
@@ -28,4 +28,7 @@ export default defineConfig({
 	optimizeDeps: {
 		exclude: [...MANACORE_SHARED_PACKAGES, '@mukke/shared'],
 	},
+	define: {
+		...getBuildDefines(),
+	},
 });
diff --git a/packages/shared-ui/src/components/DevBuildBadge.svelte b/packages/shared-ui/src/components/DevBuildBadge.svelte
new file mode 100644
index 000000000..1de94ebaf
--- /dev/null
+++ b/packages/shared-ui/src/components/DevBuildBadge.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	interface Props {
+		commitHash?: string;
+		buildTime?: string;
+	}
+
+	let { commitHash = 'unknown', buildTime = '' }: Props = $props();
+
+	let formattedTime = $derived.by(() => {
+		if (!buildTime) return '';
+		try {
+			const d = new Date(buildTime);
+			return d.toLocaleString('de-DE', {
+				month: '2-digit',
+				day: '2-digit',
+				hour: '2-digit',
+				minute: '2-digit',
+			});
+		} catch {
+			return buildTime;
+		}
+	});
+
+	let expanded = $state(false);
+</script>
+
+<button
+	class="dev-badge"
+	class:expanded
+	onclick={() => (expanded = !expanded)}
+	title="Build: {commitHash} | {buildTime}"
+>
+	{#if expanded}
+		<span class="dev-badge-detail">{commitHash} &middot; {formattedTime}</span>
+	{:else}
+		<span class="dev-badge-hash">{commitHash}</span>
+	{/if}
+</button>
+
+<style>
+	.dev-badge {
+		position: fixed;
+		bottom: 8px;
+		right: 8px;
+		z-index: 9999;
+		font-family: ui-monospace, monospace;
+		font-size: 10px;
+		line-height: 1;
+		padding: 3px 6px;
+		border-radius: 4px;
+		border: none;
+		background: rgba(0, 0, 0, 0.4);
+		color: rgba(255, 255, 255, 0.7);
+		cursor: pointer;
+		pointer-events: auto;
+		opacity: 0.5;
+		transition: opacity 150ms ease;
+		backdrop-filter: blur(4px);
+		-webkit-backdrop-filter: blur(4px);
+	}
+
+	.dev-badge:hover {
+		opacity: 1;
+	}
+
+	.dev-badge.expanded {
+		opacity: 0.85;
+	}
+
+	.dev-badge-hash {
+		letter-spacing: 0.5px;
+	}
+
+	.dev-badge-detail {
+		white-space: nowrap;
+	}
+</style>
diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts
index b6823779d..aa4414d68 100644
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@@ -200,6 +200,7 @@ export type {
 
 // Immersive Mode
 export { default as ImmersiveModeToggle } from './components/ImmersiveModeToggle.svelte';
+export { default as DevBuildBadge } from './components/DevBuildBadge.svelte';
 
 // Toast & Global Error Handling
 export {
diff --git a/packages/shared-vite-config/src/index.ts b/packages/shared-vite-config/src/index.ts
index 62bcce037..326347629 100644
--- a/packages/shared-vite-config/src/index.ts
+++ b/packages/shared-vite-config/src/index.ts
@@ -3,6 +3,7 @@
  * Provides consistent SSR and optimization settings.
  */
 
+import { execSync } from 'child_process';
 import type { UserConfig, UserConfigExport } from 'vite';
 
 /**
@@ -34,6 +35,24 @@ export const MANACORE_SHARED_PACKAGES = [
 	'@manacore/shared-help-ui',
 ] as const;
 
+/**
+ * Get build-time defines for version tracking.
+ * Injects __BUILD_HASH__ and __BUILD_TIME__ as compile-time constants.
+ */
+export function getBuildDefines(): Record<string, string> {
+	let commitHash = 'dev';
+	try {
+		commitHash = execSync('git rev-parse --short HEAD').toString().trim();
+	} catch {
+		// fallback if not in a git repo
+	}
+	const buildTime = new Date().toISOString();
+	return {
+		__BUILD_HASH__: JSON.stringify(commitHash),
+		__BUILD_TIME__: JSON.stringify(buildTime),
+	};
+}
+
 export interface ViteConfigOptions {
 	/** Server port */
 	port: number;