Display app/package version at the bottom of the side menu

AGENTS.md

@@ -33,7 +33,9 @@ A React + TypeScript + Vite front-end for Apperson Auto.
   manual cleanup.
 
 ## Memory
-(Add lessons learned here, one bullet each.)
+- Declare Vite `define` variables (e.g., `__APP_VERSION__`) in `src/global.d.ts` to ensure TypeScript resolves them cleanly.
+- Ensure the mobile navigation list (`.nav-list`) has `height: 100%` when using absolute positioning for bottom-anchored elements.
+
 
 ## Pull requests
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appersonautomotive.com",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "appersonautomotive.com",
   "main": "dist/index.html",
   "repository": {

src/App/AppTemplate.tsx

@@ -115,21 +115,43 @@ export class AppTemplate extends Component<AppTemplateProps, AppTemplateState> {
   }
 
   mobileMenu() {
+    const labelStyle: React.CSSProperties = {
+      position: 'absolute', bottom: '15px', left: 0, right: 0, justifyContent: 'center', opacity: 0.6, pointerEvents: 'none',
+    };
+    const spanStyle: React.CSSProperties = {
+      fontSize: '13px', color: '#c0c0c0', fontFamily: 'Habibi, ChivoBlack, Arial, sans-serif',
+    };
     return (
       <div className="nav-list">
         {this.callText()}
         {this.addressBlock()}
         {this.menus.map((menu, index) => this.makeMenuLink(menu, index))}
+        <div className="menu-item version-label" style={labelStyle}>
+          <span id="app-version" style={spanStyle}>
+            v{__APP_VERSION__}
+          </span>
+        </div>
       </div>
     );
   }
 
   navLinks(width: number) {
     if (width < 1162) return this.mobileMenu();
+    const labelStyle: React.CSSProperties = {
+      position: 'absolute', bottom: '15px', left: 0, right: 0, justifyContent: 'center', opacity: 0.6, pointerEvents: 'none',
+    };
+    const spanStyle: React.CSSProperties = {
+      fontSize: '13px', color: '#c0c0c0', fontFamily: 'Habibi, ChivoBlack, Arial, sans-serif',
+    };
     return (
       <div className="nav-list">
         {this.addressBlock()}
         {this.menus.map((menu, index) => this.makeMenuLink(menu, index))}
+        <div className="menu-item version-label" style={labelStyle}>
+          <span id="app-version" style={spanStyle}>
+            v{__APP_VERSION__}
+          </span>
+        </div>
       </div>
     );
   }

src/global.d.ts

@@ -0,0 +1 @@
+declare const __APP_VERSION__: string;

src/styles/_mobile.scss

@@ -148,6 +148,7 @@
     top             : 0;
     right           : 0;
     width           : 220px;
+    height          : 100%;
     margin          : auto;
     padding-top     : 1px;
     background-color: #505050;

test/App/__snapshots__/App.spec.tsx.snap

@@ -149,6 +149,18 @@ exports[`App component > renders the component 1`] = `
                 </span>
               </a>
             </div>
+            <div
+              class="menu-item version-label"
+              style="position: absolute; bottom: 15px; left: 0px; right: 0px; justify-content: center; opacity: 0.6; pointer-events: none;"
+            >
+              <span
+                id="app-version"
+                style="font-size: 13px; color: rgb(192, 192, 192); font-family: Habibi, ChivoBlack, Arial, sans-serif;"
+              >
+                v
+                3.2.0
+              </span>
+            </div>
           </div>
         </div>
       </div>

test/App/__snapshots__/AppTemplate.spec.tsx.snap

@@ -145,6 +145,18 @@ exports[`AppTemplate > calls the mobile menu 1`] = `
               </span>
             </a>
           </div>
+          <div
+            class="menu-item version-label"
+            style="position: absolute; bottom: 15px; left: 0px; right: 0px; justify-content: center; opacity: 0.6; pointer-events: none;"
+          >
+            <span
+              id="app-version"
+              style="font-size: 13px; color: rgb(192, 192, 192); font-family: Habibi, ChivoBlack, Arial, sans-serif;"
+            >
+              v
+              3.2.0
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -399,6 +411,18 @@ exports[`AppTemplate > renders the component 1`] = `
               </span>
             </a>
           </div>
+          <div
+            class="menu-item version-label"
+            style="position: absolute; bottom: 15px; left: 0px; right: 0px; justify-content: center; opacity: 0.6; pointer-events: none;"
+          >
+            <span
+              id="app-version"
+              style="font-size: 13px; color: rgb(192, 192, 192); font-family: Habibi, ChivoBlack, Arial, sans-serif;"
+            >
+              v
+              3.2.0
+            </span>
+          </div>
         </div>
       </div>
     </div>

vite.config.ts

@@ -1,10 +1,13 @@
 /// <reference types="vitest" />
 import { defineConfig, loadEnv, type Plugin } from 'vite';
 import { fileURLToPath } from 'node:url';
+import { readFileSync } from 'node:fs';
 import react from '@vitejs/plugin-react';
 import checker from 'vite-plugin-checker';
 
 const srcDir = fileURLToPath(new URL('./src', import.meta.url));
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8'));
+
 
 const APP_ENV_KEYS = [
   'BackendUrl',
@@ -31,6 +34,9 @@ export default defineConfig(({ mode }) => {
   const env: Record<string, string> = { ...loadEnv(mode, process.cwd(), ''), NODE_ENV: mode };
   const isTest = mode === 'test' || process.env.VITEST;
   return {
+    define: {
+      __APP_VERSION__: JSON.stringify(pkg.version),
+    },
     plugins: [
       ...(isTest ? [] : [replaceProcessEnv(env), checker({ typescript: { tsconfigPath: './tsconfig.build.json' } })]),
       react(),