Add build metadata and version display:

- Integrated build date, version, and commit hash generation in `vite.config.js`.
- Enhanced `MobileNavigation.vue` to display build metadata and development mode info.
- Added type definitions in `env.d.ts` for environment variables.

env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_BUILD_DATE: string,
+    readonly VITE_APP_VERSION: string,
+    readonly VITE_GIT_COMMIT_HASH: string,
+    readonly VITE_IS_DEV: string,
+}
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
+declare const __APP_GIT_COMMIT__: string

src/components/viewport/page/headers/MobileNavigation.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { toggleExpanded, isOpen } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
 import NavigationMenuItems from "@/components/viewport/page/headers/menu/NavigationMenuItems.vue";
+import SessionUser from "@/components/session/token/SessionUser.vue";
+const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || 'No build date';
+const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || 'No commit hash';
+const VITE_APP_VERSION = import.meta.env.VITE_APP_VERSION || 'No app version';
+const VITE_IS_DEV = import.meta.env.DEV || false;
 </script>
 
 <template>
@@ -45,6 +50,14 @@ import NavigationMenuItems from "@/components/viewport/page/headers/menu/Navigat
       </nav>
       <!-- Menu content -->
       <NavigationMenuItems />
+      <!-- Bottom version info -->
+      <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
+        <div>Version: {{ VITE_APP_VERSION }}</div>
+        <div>Commit: {{ VITE_COMMIT_HASH }}</div>
+        <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
+        <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
+        <SessionUser />
+      </div>
     </div>
 
   </div>

vite.config.js

@@ -6,48 +6,71 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 import { viteSingleFile } from 'vite-plugin-singlefile'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueJsx from '@vitejs/plugin-vue-jsx'
+import { execSync } from 'node:child_process'
 
-export default defineConfig({
-    base: './',
-    plugins: [
-        vue(),
-        VueJsx(),
-        vueDevTools(),
-        viteSingleFile(),
-        VitePWA({
-            registerType: 'autoUpdate',
-            devOptions: {
-                enabled: true // keep for local dev; it's ok
-            },
-            workbox: {
-                maximumFileSizeToCacheInBytes: 12 * 1024 * 1024,
-                skipWaiting: true,
-                clientsClaim: true
-            },
-            manifest: {
-                name: 'Pleno',
-                short_name: 'Pleno',
-                description: 'Access your Pleno accounts and transactions from anywhere.',
-                theme_color: '#063651',
-                background_color: '#0787bb',
-                // If you deploy at domain root, keep '/'.
-                // If you deploy under a subpath, change BOTH to '.' (relative scope).
-                start_url: '/',
-                scope: '/',
-                display: 'standalone',
-                orientation: 'portrait',
-                launch_handler: { client_mode: 'navigate-existing' },
-                icons: [
-                    { src: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
-                    { src: '/icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
-                ],
-                id: 'pleno-pwa-test'
-            }
-        })
-    ],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
-        }
+function getGitCommit() {
+    try {
+        return execSync('git rev-parse --short HEAD').toString().trim()
+    } catch {
+        return 'unknown'
     }
-})
+}
+export default defineConfig(() => {
+    // Set COMMIT_HASH env var for use in the app
+    const version = process.env.npm_package_version || '0.0.0'
+    const commit = getGitCommit()
+
+    console.log(`Building version ${version} (commit: ${commit})`)
+    process.env.COMMIT_HASH = commit
+    process.env.APP_VERSION = version
+    return {
+        base: './',
+        plugins: [
+            vue(),
+            VueJsx(),
+            vueDevTools(),
+            viteSingleFile(),
+            VitePWA({
+                registerType: 'autoUpdate',
+                devOptions: {
+                    enabled: true // keep for local dev; it's ok
+                },
+                workbox: {
+                    maximumFileSizeToCacheInBytes: 12 * 1024 * 1024,
+                    skipWaiting: true,
+                    clientsClaim: true
+                },
+                manifest: {
+                    name: 'Pleno',
+                    short_name: 'Pleno',
+                    description: 'Access your Pleno accounts and transactions from anywhere.',
+                    theme_color: '#063651',
+                    background_color: '#0787bb',
+                    // If you deploy at domain root, keep '/'.
+                    // If you deploy under a subpath, change BOTH to '.' (relative scope).
+                    start_url: '/',
+                    scope: '/',
+                    display: 'standalone',
+                    orientation: 'portrait',
+                    launch_handler: {client_mode: 'navigate-existing'},
+                    icons: [
+                        {src: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png'},
+                        {src: '/icons/icon-512x512.png', sizes: '512x512', type: 'image/png'}
+                    ],
+                    id: 'pleno-pwa-test'
+                }
+            })
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        },
+        define: {
+            'import.meta.env.VITE_BUILD_DATE': JSON.stringify(new Date().toISOString()),
+            'import.meta.env.VITE_APP_VERSION': JSON.stringify(process.env.APP_VERSION || '0.0.0'),
+            'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(process.env.COMMIT_HASH || 'dev'),
+            'import.meta.env.VITE_IS_DEV': JSON.stringify(process.env.NODE_ENV !== 'production')
+        },
+    }
+});