From 16e14490a60daa5c964d70e9823e330a93ecb472 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 17 Jun 2025 15:40:20 +0200
Subject: [PATCH] feat: show frontend version separately if different (#974)

feat(frontend): show version info
---
 frontend/src/i18n/lang/en.json | 4 +++-
 frontend/src/views/About.vue   | 9 ++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index b3e305c9f..a028b3831 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -1236,7 +1236,9 @@
   },
   "about": {
     "title": "About",
-    "version": "Version: {version}"
+    "version": "Version: {version}",
+    "frontendVersion": "Frontend version: {version}",
+    "apiVersion": "API version: {version}"
   },
   "time": {
     "units": {
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index f84509f9e..df6896735 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -12,9 +12,13 @@
 			@close="$router.back()"
 		>
 			<div class="p-4">
-				<p>
+				<p v-if="versionsEqual">
 					{{ $t('about.version', {version: apiVersion}) }}
 				</p>
+				<template v-else>
+					<p>{{ $t('about.frontendVersion', {version: frontendVersion}) }}</p>
+					<p>{{ $t('about.apiVersion', {version: apiVersion}) }}</p>
+				</template>
 			</div>
 			<template #footer>
 				<XButton
@@ -31,8 +35,11 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 
+import {VERSION as frontendVersion} from '@/version.json'
+
 import {useConfigStore} from '@/stores/config'
 
 const configStore = useConfigStore()
 const apiVersion = computed(() => configStore.version)
+const versionsEqual = computed(() => apiVersion.value === frontendVersion)
 </script>