diff --git a/AGENTS.md b/AGENTS.md index 3a7a0a8..7361f0a 100644 --- a/AGENTS.md +++ b/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 diff --git a/package.json b/package.json index 812066a..b822d00 100644 --- a/package.json +++ b/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": { diff --git a/src/App/AppTemplate.tsx b/src/App/AppTemplate.tsx index e90f703..34a6bcc 100644 --- a/src/App/AppTemplate.tsx +++ b/src/App/AppTemplate.tsx @@ -115,21 +115,43 @@ export class AppTemplate extends Component { } 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 (
{this.callText()} {this.addressBlock()} {this.menus.map((menu, index) => this.makeMenuLink(menu, index))} +
+ + v{__APP_VERSION__} + +
); } 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 (
{this.addressBlock()} {this.menus.map((menu, index) => this.makeMenuLink(menu, index))} +
+ + v{__APP_VERSION__} + +
); } diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..41fad5b --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1 @@ +declare const __APP_VERSION__: string; diff --git a/src/styles/_mobile.scss b/src/styles/_mobile.scss index 050fed0..7e88160 100644 --- a/src/styles/_mobile.scss +++ b/src/styles/_mobile.scss @@ -148,6 +148,7 @@ top : 0; right : 0; width : 220px; + height : 100%; margin : auto; padding-top : 1px; background-color: #505050; diff --git a/test/App/__snapshots__/App.spec.tsx.snap b/test/App/__snapshots__/App.spec.tsx.snap index 55c9857..cc6c89b 100644 --- a/test/App/__snapshots__/App.spec.tsx.snap +++ b/test/App/__snapshots__/App.spec.tsx.snap @@ -149,6 +149,18 @@ exports[`App component > renders the component 1`] = ` + diff --git a/test/App/__snapshots__/AppTemplate.spec.tsx.snap b/test/App/__snapshots__/AppTemplate.spec.tsx.snap index 5812412..8256ddf 100644 --- a/test/App/__snapshots__/AppTemplate.spec.tsx.snap +++ b/test/App/__snapshots__/AppTemplate.spec.tsx.snap @@ -145,6 +145,18 @@ exports[`AppTemplate > calls the mobile menu 1`] = ` + @@ -399,6 +411,18 @@ exports[`AppTemplate > renders the component 1`] = ` + diff --git a/vite.config.ts b/vite.config.ts index 11a7fcb..ad10ffe 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,13 @@ /// 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 = { ...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(),