Add user icon button to mobile title bar

- Add user initial button on the right side of mobile header
- Navigate to settings on click
- Style matches desktop sidebar (semi-transparent accent background)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/MobileTitleBar.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
 
 type MobileTitleBarProps = {
     title: string;
@@ -13,6 +15,8 @@ const MobileTitleBar = ({
     onMenuClick,
     variant = 'page'
 }: MobileTitleBarProps) => {
+    const { user } = useAuth();
+    const navigate = useNavigate();
     const containerRef = useRef<HTMLDivElement | null>(null);
     const menuButtonRef = useRef<HTMLButtonElement | null>(null);
     const mainContentRef = useRef<HTMLElement | null>(null);
@@ -155,6 +159,10 @@ const MobileTitleBar = ({
     const titleSectionClass = variant === 'admin' ? 'admin-title-section' : 'page-title-section';
     const titleTextClass = variant === 'admin' ? 'admin-title-text' : 'page-title-text';
 
+    const handleUserClick = () => {
+        navigate('/settings');
+    };
+
     return (
         <div className={`${containerClass} ${isHidden ? 'mobile-title-container--hidden' : ''}`} ref={containerRef}>
             <div className={`${sliderClass} mobile-title-slider`}>
@@ -169,6 +177,13 @@ const MobileTitleBar = ({
                 <div className={titleSectionClass}>
                     <span className={titleTextClass}>{title}</span>
                 </div>
+                <button
+                    className="mobile-user-btn"
+                    onClick={handleUserClick}
+                    aria-label="User settings"
+                >
+                    <span className="user-initial">{user?.username?.charAt(0).toUpperCase()}</span>
+                </button>
             </div>
         </div>
     );

frontend/src/styles/Layout.css

@@ -360,6 +360,31 @@ label,
   font-size: var(--icon-lg);
 }
 
+/* Mobile user button (right side of mobile title bar) */
+.mobile-user-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: rgba(var(--color-accent-rgb), 0.2);
+  border: none;
+  border-radius: 50%;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.mobile-user-btn:hover {
+  background: rgba(var(--color-accent-rgb), 0.35);
+}
+
+.mobile-user-btn .user-initial {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
 
 /* ==========  ACTION BUTTONS IN SLIDER ========== */
 
@@ -544,6 +569,20 @@ label,
     background-color: transparent;
   }
 
+  /* Show mobile user button on right side */
+  .mobile-user-btn {
+    display: flex;
+    grid-column: 3;
+    justify-self: end;
+    margin-right: 6px;
+  }
+
+  .mobile-title-slider .mobile-user-btn {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+  }
+
   .page-tabs-container,
   .admin-tabs-container {
     padding: 0.75rem;