Update navbar user status cues

Author: Copilot

frontend/src/components/Navbar.tsx

@@ -10,8 +10,11 @@ import { getCurrentUser } from '../components/currentUserCache';
 
 export const Navbar: React.FC = () => {
   const [appVersion, setAppVersion] = useState<string>('\u2026');
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [currentUser, setCurrentUser] = useState<string>('\u2026');
+  const isAuthenticatedUser = isAuthenticated === true;
+  const isReadOnlyUser = isAuthenticated === false;
+  const userLabel = isReadOnlyUser ? 'unknown' : currentUser;
 
   useEffect(() => {
     let mounted = true;
@@ -75,7 +78,7 @@ export const Navbar: React.FC = () => {
             <a className="nav-link text-white" target="_blank" rel="noopener noreferrer" href="/admin">
               Django-Admin
             </a>
-            {isAuthenticated ? (
+            {isAuthenticatedUser ? (
               <Link className="nav-link text-white" to="/logout">
                 Logout
               </Link>
@@ -100,16 +103,36 @@ export const Navbar: React.FC = () => {
                 id="userDropdown"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
-                style={{ backgroundColor: '#9370DB', color: '#fff', border: 'none' }}
+                style={{
+                  backgroundColor: isReadOnlyUser ? '#6c757d' : '#9370DB',
+                  color: '#fff',
+                  border: 'none',
+                }}
               >
-                User: {currentUser}
+                User ID: {userLabel}{isReadOnlyUser ? ' (read only)' : ''}
               </button>
               <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                 <li>
                   <span className="dropdown-item-text" id="currentUserId">
-                    {currentUser}
+                    {userLabel}
                   </span>
                 </li>
+                <li>
+                  <span className="dropdown-item-text">
+                    {isReadOnlyUser
+                      ? 'Status: read only'
+                      : isAuthenticatedUser
+                        ? 'Status: logged in'
+                        : 'Status: checking access'}
+                  </span>
+                </li>
+                {isReadOnlyUser && (
+                  <li>
+                    <Link className="dropdown-item" to="/login">
+                      Login to edit bookings
+                    </Link>
+                  </li>
+                )}
               </ul>
             </div>
           </div>

frontend/src/components/__tests__/Navbar.test.tsx

@@ -102,7 +102,8 @@ describe('Navbar', () => {
     (getAuthStatus as jest.Mock).mockResolvedValue({ authenticated: false });
     (getCurrentUser as jest.Mock).mockImplementation(() => new Promise(() => {}));
     renderWithRouter(<Navbar />);
-    expect(screen.getByText(/User: \u2026/)).toBeInTheDocument();
+    expect(screen.getByText(/User ID: \u2026/)).toBeInTheDocument();
+    expect(screen.getByText('Status: checking access')).toBeInTheDocument();
   });
 
   it('fetches and displays the current user on success', async () => {
@@ -111,17 +112,20 @@ describe('Navbar', () => {
     (getCurrentUser as jest.Mock).mockResolvedValue('admin');
     renderWithRouter(<Navbar />);
     await waitFor(() => {
-      expect(screen.getByText('User: admin')).toBeInTheDocument();
+      expect(screen.getByText('User ID: admin')).toBeInTheDocument();
+      expect(screen.getByText('Status: logged in')).toBeInTheDocument();
     });
   });
 
-  it('displays "unknown" for user if fetch fails', async () => {
+  it('shows read only user state and login prompt when unauthenticated', async () => {
     (getAppVersion as jest.Mock).mockResolvedValue('1.2.3');
     (getAuthStatus as jest.Mock).mockResolvedValue({ authenticated: false });
     (getCurrentUser as jest.Mock).mockRejectedValue(new Error('Network error'));
     renderWithRouter(<Navbar />);
     await waitFor(() => {
-      expect(screen.getByText('User: unknown')).toBeInTheDocument();
+      expect(screen.getByText('User ID: unknown (read only)')).toBeInTheDocument();
+      expect(screen.getByText('Status: read only')).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Login to edit bookings' })).toHaveAttribute('href', '/login');
     });
   });