From 1eb35bce2e8af8841a028080aab2dbffa87cae60 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 18:08:04 +0000
Subject: [PATCH] Update user icon to open a menu with login or register
 options

Refactors the user icon component in `enhanced_header.html` to use Alpine.js for toggling a dropdown menu, displaying either user profile information or a login/register prompt.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d2cd90dd-df0e-4a8a-b6ca-d9a6c16df62b
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/d2cd90dd-df0e-4a8a-b6ca-d9a6c16df62b/1S0572H
---
 .../components/layout/enhanced_header.html    | 101 ++++++++++--------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 1e37fc99..16e4d89c 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -179,58 +179,58 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
       </button>
 
       <!-- User Icon -->
-      <button 
-        {% if user.is_authenticated %}
-          x-data="{ open: false }" 
+      <div class="relative" x-data="{ open: false }" @click.outside="open = false">
+        <button 
           @click="open = !open"
-          @click.outside="open = false"
-        {% else %}
-          @click="window.authModal.show('login')"
-        {% endif %}
-        class="relative inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
-      >
-        {% if user.is_authenticated %}
-          {% if user.profile.avatar %}
-            <img 
-              src="{{ user.profile.avatar.url }}" 
-              alt="{{ user.get_full_name|default:user.username }}"
-              class="h-6 w-6 rounded-full object-cover"
-            />
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
+        >
+          {% if user.is_authenticated %}
+            {% if user.profile.avatar %}
+              <img 
+                src="{{ user.profile.avatar.url }}" 
+                alt="{{ user.get_full_name|default:user.username }}"
+                class="h-6 w-6 rounded-full object-cover"
+              />
+            {% else %}
+              <div class="h-6 w-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium">
+                {{ user.get_full_name.0|default:user.username.0|upper }}
+              </div>
+            {% endif %}
           {% else %}
-            <div class="h-6 w-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium">
-              {{ user.get_full_name.0|default:user.username.0|upper }}
-            </div>
+            <i class="fas fa-user h-5 w-5"></i>
           {% endif %}
-          
-          <!-- User Dropdown -->
-          <div 
-            x-show="open"
-            x-transition:enter="transition ease-out duration-100"
-            x-transition:enter-start="transform opacity-0 scale-95"
-            x-transition:enter-end="transform opacity-100 scale-100"
-            x-transition:leave="transition ease-in duration-75"
-            x-transition:leave-start="transform opacity-100 scale-100"
-            x-transition:leave-end="transform opacity-0 scale-95"
-            x-cloak
-            class="absolute right-0 top-full mt-2 w-56 bg-background border rounded-md shadow-lg z-50"
-          >
-            <div class="flex items-center justify-start gap-2 p-2">
+        </button>
+        
+        <!-- User Dropdown -->
+        <div 
+          x-show="open"
+          x-transition:enter="transition ease-out duration-100"
+          x-transition:enter-start="transform opacity-0 scale-95"
+          x-transition:enter-end="transform opacity-100 scale-100"
+          x-transition:leave="transition ease-in duration-75"
+          x-transition:leave-start="transform opacity-100 scale-100"
+          x-transition:leave-end="transform opacity-0 scale-95"
+          x-cloak
+          class="absolute right-0 top-full mt-2 w-48 bg-background border rounded-md shadow-lg z-50"
+        >
+          {% if user.is_authenticated %}
+            <div class="flex items-center justify-start gap-2 p-3">
               <div class="flex flex-col space-y-1 leading-none">
                 <p class="font-medium">{{ user.get_full_name|default:user.username }}</p>
-                <p class="w-[200px] truncate text-sm text-muted-foreground">{{ user.email }}</p>
+                <p class="w-[180px] truncate text-sm text-muted-foreground">{{ user.email }}</p>
               </div>
             </div>
             <div class="border-t"></div>
-            <a href="{% url 'profile' user.username %}" class="flex items-center px-2 py-2 text-sm hover:bg-accent">
+            <a href="{% url 'profile' user.username %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
               <i class="fas fa-user mr-2 h-4 w-4"></i>
               Profile
             </a>
-            <a href="{% url 'settings' %}" class="flex items-center px-2 py-2 text-sm hover:bg-accent">
+            <a href="{% url 'settings' %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
               <i class="fas fa-cog mr-2 h-4 w-4"></i>
               Settings
             </a>
             {% if has_moderation_access %}
-            <a href="{% url 'moderation:dashboard' %}" class="flex items-center px-2 py-2 text-sm hover:bg-accent">
+            <a href="{% url 'moderation:dashboard' %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
               <i class="fas fa-shield-alt mr-2 h-4 w-4"></i>
               Moderation
             </a>
@@ -238,16 +238,31 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
             <div class="border-t"></div>
             <form method="post" action="{% url 'account_logout' %}">
               {% csrf_token %}
-              <button type="submit" class="flex items-center w-full px-2 py-2 text-sm text-red-600 hover:bg-accent">
+              <button type="submit" class="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-accent">
                 <i class="fas fa-sign-out-alt mr-2 h-4 w-4"></i>
                 Log out
               </button>
             </form>
-          </div>
-        {% else %}
-          <i class="fas fa-user h-5 w-5"></i>
-        {% endif %}
-      </button>
+          {% else %}
+            <div class="p-2">
+              <button 
+                @click="window.authModal.show('login'); open = false"
+                class="flex items-center w-full px-3 py-2 text-sm hover:bg-accent rounded-md"
+              >
+                <i class="fas fa-sign-in-alt mr-2 h-4 w-4"></i>
+                Login
+              </button>
+              <button 
+                @click="window.authModal.show('register'); open = false"
+                class="flex items-center w-full px-3 py-2 text-sm hover:bg-accent rounded-md"
+              >
+                <i class="fas fa-user-plus mr-2 h-4 w-4"></i>
+                Register
+              </button>
+            </div>
+          {% endif %}
+        </div>
+      </div>
     </div>
 
     <!-- Mobile Menu -->