From 4e38269b807bf753cee2c60f65a49a56477340e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Fri, 21 Jun 2024 01:22:31 +0200
Subject: [PATCH] feat: ui version in footer

---
 .env.example                          | 1 +
 .github/workflows/dockercicd.yml      | 2 ++
 src/lib/components/footer/main.svelte | 9 ++++-----
 src/routes/+layout.js                 | 2 ++
 src/routes/+layout.svelte             | 3 ++-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/.env.example b/.env.example
index 61f645c5..3a5fe342 100644
--- a/.env.example
+++ b/.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
diff --git a/.github/workflows/dockercicd.yml b/.github/workflows/dockercicd.yml
index 9707ed73..6b278978 100644
--- a/.github/workflows/dockercicd.yml
+++ b/.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
diff --git a/src/lib/components/footer/main.svelte b/src/lib/components/footer/main.svelte
index dd548b00..4b72722b 100644
--- a/src/lib/components/footer/main.svelte
+++ b/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>
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
index ac251094..431aeaec 100644
--- a/src/routes/+layout.js
+++ b/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
 	};
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 45747691..256c46dc 100644
--- a/src/routes/+layout.svelte
+++ b/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} />