feat(mobile): add Profiles button to bottom navigation

[Bobby9228]

Closes #264

On mobile the sidebar nav tabs are hidden and the bottom navigation is the primary way to reach panels. This adds a Profiles entry to the bottom bar that opens the sidebar and switches to the Profiles panel.

[Bobby9228]

Confirmed ✅

On mobile, the bottom nav is the primary way to reach panels because the sidebar nav tabs are hidden. Without a Profiles entry there, switching/managing profiles is awkward (and breaks entirely when the topbar dropdown is unreliable on Android Chrome).

This PR makes Profiles accessible from the bottom bar and works as expected in manual testing.

[nesquena-hermes]

Thanks for this — the feature itself is exactly right. Mobile users have no way to reach the Profiles panel through the bottom nav, and the SVG icon you chose (person silhouette) matches what the desktop sidebar uses for Profiles. The panel and mobileSwitchPanel machinery already work for 'profiles', so this is genuinely close.

Three things need fixing before it's ready to merge:

1. Wrong onclick handler

The button uses:

onclick="toggleMobileSidebar(); switchPanel('profiles');"

This should be:

onclick="mobileSwitchPanel('profiles')"

mobileSwitchPanel() already does both of those things in one call — opens the sidebar, switches the panel view, and (critically) updates the active-highlight state on all bottom nav buttons. The manual two-call approach misses the active-state update, which leads to bug #2.

2. Missing data-panel attribute

All five existing bottom nav buttons have data-panel="X". mobileSwitchPanel() uses that attribute to find the right button and add the .active CSS class (the blue highlight). Without it, the Profiles button will never light up when selected — it'll always look inactive.

Add data-panel="profiles" to the button element:

<button class="mobile-nav-btn" data-panel="profiles" onclick="mobileSwitchPanel('profiles')" title="Profiles">

3. SVG sizing

The other five buttons use width="20" height="20" stroke-width="1.5". The Profiles button uses width="18" height="18" stroke-width="2". The icon will render slightly smaller and visually heavier than its neighbours. Change to 20/20/1.5 to match.

Placement

The button is currently inserted first (before Chat). Since Chat is the primary panel and the home tab, it makes more sense to put Profiles last — after Spaces — so the nav reads left-to-right as: Chat → Tasks → Skills → Memory → Spaces → Profiles.

Tests

A quick test in tests/test_mobile_layout.py (or a new sprint test file) confirming the button exists, has data-panel="profiles", and calls mobileSwitchPanel would keep this from regressing.

All of these are small edits to the single HTML file you've already touched. Once those are in place this should be straightforward to merge.

[nesquena-hermes]

Closing — the feature has been implemented with all 5 review fixes applied in PR #297. Thanks @gabogabucho!

Changes made on top of the original contribution:

1. mobileSwitchPanel('profiles') instead of broken two-call approach
2. data-panel="profiles" attribute added for active-highlight state
3. SVG sizing corrected: 20×20 / stroke-width 1.5 (matches other buttons)
4. Placed last in nav (Chat → Tasks → Skills → Memory → Spaces → Profiles)
5. 3 new tests added in test_mobile_layout.py

[nesquena-hermes]

Thank you, @Bobby9228!

Mobile Profiles button is live in v0.49.1! Small change, real UX improvement — profile switching on phones was a pain before. You're in the Contributors section. Thank you!