As a user I want simple and clear navigation on all pages so I can move around the app without confusion

[ChristopherRotnes]

Summary

The current single-row header mixes functional navigation (screens the user works in daily) with utility actions (logout, theme toggle, version, changelog). As the app grows this bar runs out of space — issue #59 already forced icons down to 36px on a 390px iPhone. The fix is to introduce a dedicated Settings view reachable via a single Settings icon in the top bar, freeing up two slots and giving all utility content a proper home that scales to future additions like language support.

Priority

Medium

UI spec (Carbon g100)

Top bar — revised

• Remove: Asleep/Light (theme toggle) and Logout
• Add: Settings icon (Carbon Settings icon) as the last item in the top bar
• Remaining icons in order: Camera, RecentlyViewed, Analytics, Book, EventSchedule, Settings — 6 icons total, each back to 48px width

Settings view — section order

1. Utseende

• Carbon Toggle component, label Mørkt tema
• Below the toggle: BodySVG front + back side-by-side (or Front/Bak toggle on mobile) with a fixed sample muscle set to demonstrate the theme live
  • Primary: chest, quads, lats
  • Secondary: shoulders_front, hamstrings, triceps
• The body map updates instantly when the toggle is flipped — no navigation required
• This is clearly decorative/demonstrative, not the user's personal data

2. Konto

• Logged-in email address (read-only, var(--cds-text-secondary))
• Logg ut button (kind="danger")

3. Om appen

• Version number (currently rendered as footer button in PageShell)
• Vis endringslogg button — opens existing ChangelogModal

4. Kontakt

• Short feedback invitation text
• Email link or button for contacting the developer
• Link to GitHub Issues for bug reports

5. Språk

• Placeholder row, grayed out, label Kommer snart

PageShell cleanup

• Remove version footer button
• Remove theme toggle NavBtn and logout NavBtn from header
• ChangelogModal moves from PageShell to Settings view

Acceptance criteria

• Top bar has exactly 6 icons, all fully visible on a 390px iPhone at 48px width
• Settings icon navigates to the new Settings view
• Theme toggle updates the theme live (g10 ↔ g100) and persists to localStorage
• Body map preview updates instantly when theme is toggled
• Body map always shows the fixed sample muscle set — never personal user data
• Konto section shows logged-in email and a working logout button
• Om appen section shows version number and opens changelog modal
• Kontakt section shows developer contact info and bug report link
• Språk placeholder row is visible but non-interactive
• Version footer button removed from PageShell
• Theme toggle and logout removed from top bar
• ChangelogModal no longer rendered in PageShell

Out of scope

• Language selector implementation
• Profile editing / avatar
• Push notification settings

[ChristopherRotnes]

PR #126 opened: #126

Implementation complete — awaiting CI and staging deploy verification before closing this issue.

---

Generated by Claude Code