feat: dynamic navbar auth status with profile dropdown

- Added HTMX-loaded auth status in navbar
- Shows avatar/dropdown when logged in
- Shows guest indicator for guests
- Shows login button when not authenticated
- Profile page already exists with full stats

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: JacobCoffee

src/scribbl_py/auth/controller.py

@@ -317,6 +317,41 @@ async def profile_page(
             },
         )
 
+    @get("/navbar")
+    async def navbar_auth_status(
+        self,
+        request: Request,
+        auth_service: AuthService,
+    ) -> Template:
+        """Return navbar auth status partial.
+
+        Args:
+            request: The request object.
+            auth_service: Auth service instance.
+
+        Returns:
+            Navbar partial template.
+        """
+        session_id = request.cookies.get(auth_service._config.session_cookie_name)
+        user = None
+        guest_name = None
+
+        if session_id:
+            session = auth_service.get_session(session_id)
+            if session:
+                if session.user_id:
+                    user = auth_service.get_user(session.user_id)
+                elif session.guest_name:
+                    guest_name = session.guest_name
+
+        return Template(
+            template_name="auth/navbar.html",
+            context={
+                "user": user,
+                "guest_name": guest_name,
+            },
+        )
+
     @get("/leaderboard")
     async def leaderboard_page(
         self,

src/scribbl_py/templates/auth/navbar.html

@@ -0,0 +1,73 @@
+{% if user %}
+<!-- Logged in user -->
+<div class="dropdown dropdown-end">
+    <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+        {% if user.avatar_url %}
+        <div class="w-10 rounded-full">
+            <img alt="{{ user.username }}" src="{{ user.avatar_url }}" />
+        </div>
+        {% else %}
+        <div class="avatar placeholder">
+            <div class="bg-primary text-primary-content rounded-full w-10">
+                <span class="text-lg">{{ user.username[0] | upper }}</span>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+    <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+        <li class="menu-title">
+            <span>{{ user.username }}</span>
+        </li>
+        <li><a href="/auth/profile" hx-boost="false">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            Profile
+        </a></li>
+        <li><a href="/auth/leaderboard" hx-boost="false">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+            </svg>
+            Leaderboard
+        </a></li>
+        <div class="divider my-0"></div>
+        <li><a href="/auth/logout" hx-boost="false" class="text-error">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
+            Logout
+        </a></li>
+    </ul>
+</div>
+{% elif guest_name %}
+<!-- Guest user -->
+<div class="dropdown dropdown-end">
+    <div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-2">
+        <div class="avatar placeholder">
+            <div class="bg-neutral text-neutral-content rounded-full w-8">
+                <span class="text-sm">G</span>
+            </div>
+        </div>
+        <span class="hidden sm:inline">{{ guest_name }}</span>
+    </div>
+    <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+        <li class="menu-title">
+            <span>Playing as Guest</span>
+        </li>
+        <li><a href="/auth/login" hx-boost="false">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
+            </svg>
+            Sign in to save stats
+        </a></li>
+    </ul>
+</div>
+{% else %}
+<!-- Not logged in -->
+<a href="/auth/login" class="btn btn-primary btn-sm" hx-boost="false">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
+    </svg>
+    Login
+</a>
+{% endif %}

src/scribbl_py/templates/base.html

@@ -63,13 +63,11 @@
                 </svg>
             </button>
 
-            <!-- Login -->
-            <a href="/auth/login" class="btn btn-primary btn-sm ml-2" hx-boost="false">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
-                </svg>
-                Login
-            </a>
+            <!-- Auth Status (loaded via HTMX) -->
+            <div id="auth-status" class="ml-2" hx-get="/auth/navbar" hx-trigger="load" hx-swap="innerHTML">
+                <!-- Loading placeholder -->
+                <span class="loading loading-spinner loading-sm"></span>
+            </div>
         </div>
     </div>