Display build time in settings view

env.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/vue" />
+
+declare const __VITE_BUILD_TIME__: string;

package.json

@@ -43,7 +43,7 @@
     "@types/canvas-confetti": "^1.6.4",
     "@types/jsdom": "^21.1.7",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.8.7",
+    "@types/node": "^22.9.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-istanbul": "^2.1.4",
     "@vitest/eslint-plugin": "^1.1.7",

src/components/BuildTime.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import {BUILD_TIME} from '@/utils/constants';
+</script>
+<template>
+  <div class="text-xs text-center">Build: {{ BUILD_TIME }}</div>
+</template>

src/components/__tests__/SettingsView.spec.ts

@@ -28,7 +28,13 @@ describe('SettingsView', () => {
   });
 
   it('renders', () => {
-    const wrapper = mount(SettingsView);
+    const wrapper = mount(SettingsView, {
+      global: {
+        stubs: {
+          BuildTime: true,
+        },
+      },
+    });
     expect(wrapper.html()).toMatchSnapshot();
   });
 

src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap

@@ -53,5 +53,6 @@ exports[`SettingsView > renders 1`] = `
 </div>
 <div class="flex-container flex-col justify-center"><label for="reset-button" class="label-like">Remove all data from the app</label><button data-v-24e38f3d="" class="button button--danger self-end" id="reset-button" data-test-id="reset-button"><svg data-v-24e38f3d="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z" class="transition-all"></path>
-    </svg>Reset</button></div>"
+    </svg>Reset</button></div>
+<build-time-stub></build-time-stub>"
 `;

src/i18n/fi.json

@@ -704,7 +704,7 @@
       "text": "Eat Your Veggies on ilmainen sovellus kasviperäisten ruoka-aineiden seuraamiseen ruokavaliossasi. Tutkimustulosten mukaan 30:n erilaisen kasviksen kuluttaminen viikoittain johtaa lukuisiin terveyshyötyihin vähemmän monipuoliseen ruokavalioon verrattuna. Avainasemassa ei siis tutkimuksen mukaan niinkään ole kulutettu määrä kuin monipuolisuus."
     },
     "categories": {
-      "title": "Mutta mansikkahan on..",
+      "title": "Mutta mansikkahan on...",
       "text": "...epähedelmä, tiedän. Tomaattikaan ei ole biologisessa mielessä vihannes, joten sovelluksessa otetaan pieniä vapauksia kategorioiden suhteen. Ilmoita silti suuret epätarkkuudet joita löydät. Voit myös ehdottaa puuttuvia vihanneksia sovellukseen lisättäväksi. Niiden pitäisi olla sellaisia, joita on kaupallisesti saatavilla maailmanlaajuisesti."
     },
     "contact": {

src/utils/constants.ts

@@ -1,6 +1,8 @@
 import type {InjectionKey, Ref} from 'vue';
 import {Category, type Locale} from './types';
 
+export const BUILD_TIME = __VITE_BUILD_TIME__;
+
 export const KEYS = {
   challenge: Symbol() as InjectionKey<Ref<string | undefined>>,
   dropdownOptions: Symbol() as InjectionKey<(active: boolean, selected: boolean) => string>,

src/views/SettingsView.vue

@@ -6,6 +6,7 @@ import {useAppStateStore} from '@/stores/appStateStore';
 import LocaleChanger from '@/components/LocaleChanger.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import QAComponent from '@/components/QAComponent.vue';
+import BuildTime from '@/components/BuildTime.vue';
 
 const router = useRouter();
 
@@ -37,6 +38,7 @@ const reset = () => {
       >{{ $t('settings.reset.button') }}</ButtonComponent
     >
   </div>
+  <BuildTime />
   <ModalDialog v-model="resetDialogOpen" :title="$t('settings.reset.title')">
     <template #content>
       <p>{{ $t('settings.reset.text') }}</p>

vite.config.ts

@@ -5,6 +5,9 @@ import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    __VITE_BUILD_TIME__: JSON.stringify(new Date().toISOString()),
+  },
   css: {
     preprocessorOptions: {
       scss: {