From 7cb96c3d745154011263faa9ee5043b36b903ef5 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Mon, 12 Oct 2026 10:08:08 +0200
Subject: [PATCH] fix(mobile): show the trek version as a footer in the mobile
 account menu

The avatar menu of the mobile dashboard lost the version pill that the
desktop account menu shows under sign out. It now renders the same
appVersion from the auth store as a small footer, with the wordmark
following the active theme. Discord, help and the prerelease badge stay
desktop only.

Refs #2581
---
 .../src/mobile/screens/dashboard/MUserMenu.tsx | 18 ++++++++++++++++--
 .../unit/mobile/dashboard/MUserMenu.test.tsx   | 16 ++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/client/src/mobile/screens/dashboard/MUserMenu.tsx b/client/src/mobile/screens/dashboard/MUserMenu.tsx
index 6cba921ea..94cf6d44e 100644
--- a/client/src/mobile/screens/dashboard/MUserMenu.tsx
+++ b/client/src/mobile/screens/dashboard/MUserMenu.tsx
@@ -4,6 +4,7 @@ import { LogOut, Moon, Settings2, Shield, Sun, SunMoon } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { useTranslation } from '../../../i18n'
 import { useAuthStore } from '../../../store/authStore'
+import { useIsDark } from '../../../hooks/useIsDark'
 import { useSettingsStore } from '../../../store/settingsStore'
 import MDropdownPanel from '../../components/MDropdownPanel'
 import MListRow from '../../components/MListRow'
@@ -33,14 +34,16 @@ interface MUserMenuProps {
 
 /**
  * Avatar popover of the mobile top bar: profile header (with admin badge),
- * settings, admin panel (admins only), the dark/light/auto theme cycle and
- * sign out.
+ * settings, admin panel (admins only), the dark/light/auto theme cycle, sign
+ * out and the app version as a footer, like the desktop account menu.
  */
 export default function MUserMenu({ open, onClose }: MUserMenuProps): React.ReactElement {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const user = useAuthStore(s => s.user)
   const logout = useAuthStore(s => s.logout)
+  const appVersion = useAuthStore(s => s.appVersion)
+  const dark = useIsDark()
   const darkMode = useSettingsStore(s => s.settings.dark_mode)
   const updateSetting = useSettingsStore(s => s.updateSetting)
 
@@ -88,6 +91,17 @@ export default function MUserMenu({ open, onClose }: MUserMenuProps): React.Reac
       />
       <div className="mx-2 my-1 h-px bg-[color:var(--m-rowbr)]" />
       <MListRow icon={LogOut} danger label={t('nav.bottomLogout')} onClick={signOut} />
+      {appVersion && (
+        <>
+          <div className="mx-2 my-1 h-px bg-[color:var(--m-rowbr)]" />
+          <div className="flex justify-center pb-1 pt-[6px]">
+            <span className="inline-flex items-center gap-[5px] rounded-full bg-[color:var(--m-ic)] px-3 py-1 font-geist text-[0.625rem] font-bold text-m-muted">
+              <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" className="h-[10px] opacity-50" />
+              v{appVersion}
+            </span>
+          </div>
+        </>
+      )}
     </MDropdownPanel>
   )
 }
diff --git a/client/tests/unit/mobile/dashboard/MUserMenu.test.tsx b/client/tests/unit/mobile/dashboard/MUserMenu.test.tsx
index 720acbd44..be81da68d 100644
--- a/client/tests/unit/mobile/dashboard/MUserMenu.test.tsx
+++ b/client/tests/unit/mobile/dashboard/MUserMenu.test.tsx
@@ -106,4 +106,20 @@ describe('MUserMenu', () => {
 
     expect(container.querySelector('img')).toHaveAttribute('src', '/uploads/avatars/m.jpg');
   });
+
+  it('FE-MOB-MENU-009: shows the app version as a footer under sign out', () => {
+    useAuthStore.setState({ appVersion: '5.0.0' });
+    render(<MUserMenu open onClose={() => {}} />);
+
+    expect(screen.getByText('v5.0.0')).toBeInTheDocument();
+    expect(screen.getByAltText('TREK')).toBeInTheDocument();
+  });
+
+  it('FE-MOB-MENU-010: renders no version footer while the version is unknown', () => {
+    useAuthStore.setState({ appVersion: '' });
+    render(<MUserMenu open onClose={() => {}} />);
+
+    expect(screen.queryByText(/^v\d/)).not.toBeInTheDocument();
+    expect(screen.queryByAltText('TREK')).not.toBeInTheDocument();
+  });
 });