added version check

src/App.vue

@@ -4,6 +4,9 @@
       <router-view />
     </main>
 
+    <VersionWarningModal v-if="showVersionWarningModal" :appVersion="appVersion" :backendVersion="backendVersion"
+      :expectedBackendVersion="expectedBackendVersion" @close="showVersionWarningModal = false" />
+
     <footer v-if="!$route.meta.hideNavbar">
       <Navbar />
     </footer>
@@ -11,7 +14,28 @@
 </template>
 
 <script setup lang="ts">
-import Navbar from './components/Navbar.vue';
+import { onMounted, ref } from 'vue'
+import Navbar from './components/Navbar.vue'
+import VersionWarningModal from './components/VersionWarningModal.vue'
+import { apiFetch } from './api/client'
+import { VersionResponse } from './types'
+
+const showVersionWarningModal = ref(false)
+const backendVersion = ref('')
+
+const appVersion = __APP_VERSION__
+const expectedBackendVersion = __BACKEND_VERSION__
+
+onMounted(async () => {
+  backendVersion.value = (await getBackendVersion()).version
+  if (backendVersion.value !== expectedBackendVersion) {
+    showVersionWarningModal.value = true
+  }
+})
+
+async function getBackendVersion() {
+  return await apiFetch<VersionResponse>('/version')
+}
 </script>
 
 <style scoped>

src/components/VersionWarningModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="backdrop">
+    <div class="modal">
+      <h2>{{ $t('warning-wrongversion-title') }}</h2>
+      <p>{{ $t('warning-wrongversion-message', {
+        appVersion: appVersion, expectedBackendVersion: expectedBackendVersion,
+        backendVersion: backendVersion
+      }) }}</p>
+
+      <div class="actions">
+        <button @click="emit('close')" class="secondary">
+          {{ $t('warning-wrongversion-dismiss') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ appVersion: string, expectedBackendVersion: string, backendVersion: string }>()
+const emit = defineEmits(['close']);
+</script>
+
+<style scoped>
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.secondary {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+</style>

src/locales/en.ftl

@@ -83,6 +83,11 @@ settings-updating = Updating...
 settings-error-required = Username and Email are required.
 settings-error-failed = Update failed
 
+## Warning
+warning-wrongversion-title = Wrong app version
+warning-wrongversion-message = The backend expects version {$expectedBackendVersion} while your version of the app ({$appVersion}) supports backend version {$backendVersion}. Please update to avoid potential issues.
+warning-wrongversion-dismiss = I know what I'm doing
+
 ## Shared
 shared-cancel = Cancel
 shared-error = An error occurred

src/locales/fr.ftl

@@ -81,6 +81,11 @@ settings-upload-avatar-title = Importer un avatar
 settings-error-required = Le nom d'utilisateur et l'email sont requis.
 settings-error-failed = Échec de la mise à jour
 
+## Warning
+warning-wrongversion-title = Mauvaise version de l'application
+warning-wrongversion-message = Le backend attend la version {$expectedBackendVersion} alors que votre version de l'application ({$appVersion}) prend en charge la version {$backendVersion} du backend. Veuillez mettre à jour pour éviter d'éventuels problèmes.
+warning-wrongversion-dismiss = Je sais ce que je fais
+
 ## Shared
 shared-cancel = Annuler
 shared-error = Une erreur est survenue

src/types.ts

@@ -50,3 +50,7 @@ export interface RoomInvite {
   sender_uuid: string
   sender_username: string
 }
+
+export interface VersionResponse {
+    version: string
+}

src/vite-env.d.ts

@@ -5,3 +5,6 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare const __APP_VERSION__: string
+declare const __BACKEND_VERSION__: string