k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-22 15:06:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): show the trek version as a footer in the mobile account menu

Browse Source 
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
This commit is contained in:
Maurice
2026-10-12 10:08:08 +02:00
parent 8de40db40e
commit 7cb96c3d74
2 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/mobile/screens/dashboard/MUserMenu.tsx
+16 -2
View File
@@ -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>
)
}
client/tests/unit/mobile/dashboard/MUserMenu.test.tsx
+16
View File
@@ -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();
});
});