feat: show frontend version separately if different (#974)

feat(frontend): show version info

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": {

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>