Clarify navbar user identity and read-only access state

[Copilot]

The frontend now makes the current access state explicit in the navbar: authenticated users see their user ID, while unauthenticated users are shown as unknown and clearly marked read-only with a direct path to login.

• Navbar user state

  • Renames the navbar identity cue from a generic user label to User ID
  • Shows the resolved user ID for authenticated sessions
  • Falls back to unknown for unauthenticated sessions instead of implying edit access

• Read-only guidance

  • Adds a read-only indicator for unauthenticated users directly in the navbar control
  • Surfaces access state in the dropdown (logged in, read only, checking access)
  • Adds a dropdown action to route unauthenticated users to /login

• Focused frontend coverage

  • Updates navbar tests to assert:
    • authenticated user ID display
    • read-only unknown state
    • presence of the login prompt in the dropdown for unauthenticated users

<button className="btn btn-sm dropdown-toggle">
  User ID: {userLabel}{isReadOnlyUser ? ' (read only)' : ''}
</button>

{isReadOnlyUser && (
  <Link className="dropdown-item" to="/login">
    Login to edit bookings
  </Link>
)}

[Copilot]

Pull request overview

This PR updates the frontend navbar to make the user identity and access state explicit: authenticated sessions show a “User ID”, unauthenticated sessions are labeled unknown and marked as read-only, with a direct login call-to-action in the dropdown.

Changes:

• Introduces a tri-state auth UI (logged in / read only / checking access) and renames the navbar identity label to “User ID”.
• Adds a read-only visual cue (button color + “(read only)” suffix) and a “Login to edit bookings” dropdown action when unauthenticated.
• Updates navbar tests to assert the new label/status strings and the login prompt.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/components/Navbar.tsx	Adds explicit auth/read-only/checking state and updates the user dropdown label + actions.
frontend/src/components/tests/Navbar.test.tsx	Updates/extends tests to validate the new navbar identity and access-state UX.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.