feat: ui version in footer

.env.example

@@ -1,3 +1,4 @@
+PUBLIC_UI_VERSION=dev
 PUBLIC_URI=http://localhost:5173
 # use local frontend with local backend
 API_URI=http://localhost:3030 # server reachable

.github/workflows/dockercicd.yml

@@ -35,6 +35,8 @@ jobs:
       # install dependencies and build
       - run: make install
       - run: make compile
+        env:
+          PUBLIC_UI_VERSION: ${{ github.ref }}
 
       # run tests
       - run: make check

src/lib/components/footer/main.svelte

@@ -1,13 +1,12 @@
 <script>
 	/**
 	 * @typedef {object} Props
+	 * @property {string} uiVersion
 	 * @property {string} apiVersion
 	 */
 
 	/** @type {Props} */
-	let { apiVersion } = $props();
-
-	const apiVersionWOSemicolon = $derived(apiVersion.replace(/\;$/, ''));
+	let { uiVersion, apiVersion } = $props();
 </script>
 
 <footer class="h-[10lvh] w-full border-t-2 border-neutral-100 dark:border-neutral-700">
@@ -18,8 +17,8 @@
 		>
 			Source code
 		</a>
-		<p class="text-neutral-600 dark:text-neutral-300 font-light">
-			Agent version: {apiVersionWOSemicolon}
+		<p class="text-sm text-neutral-600 dark:text-neutral-300 font-light">
+			UI ver: {uiVersion.replace(/\;$/, '')} | Agent ver: {apiVersion.replace(/\;$/, '')}
 		</p>
 	</div>
 </footer>

src/routes/+layout.js

@@ -1,9 +1,11 @@
+import { PUBLIC_UI_VERSION } from '$env/static/public';
 import { fetchVersion } from '$lib/functions/api/fetchversion';
 
 /** @type {import('./$types').LayoutLoad} */
 export async function load({ fetch }) {
 	const apiVersion = await fetchVersion(fetch);
 	return {
+		uiVersion: PUBLIC_UI_VERSION ?? 'dev',
 		apiVersion: apiVersion
 	};
 }

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import Footer from '$lib/components/footer/main.svelte';
 
 	let { data } = $props();
+	const uiVersion = $derived(data.uiVersion);
 	const apiVersion = $derived(data.apiVersion);
 </script>
 
@@ -18,4 +19,4 @@
 	<slot />
 </main>
 
-<Footer {apiVersion} />
+<Footer {uiVersion} {apiVersion} />