Refactor AuthManager to use new Supabase initialization and helper functions; improve user avatar responsiveness and dropdown menu styles; enhance theme loader for better theme management.

Author: murdercode

package-lock.json

@@ -16,7 +16,6 @@
   },
   "dependencies": {
     "@aptabase/tauri": "^0.4.1",
-    "@supabase/supabase-js": "^2.50.0",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-dialog": "^2.2.2",
     "@tauri-apps/plugin-notification": "^2",

package.json

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="styles/main.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Presto</title>
+  <script src="https://cdn.jsdelivr.net/npm/@supabase/[email protected]/dist/umd/supabase.js"></script>
   <script src="/managers/update-manager-global.js" defer></script>
   <script type="module" src="/main.js" defer></script>
 </head>
@@ -39,23 +40,33 @@
     </div>
 
     <div class="sidebar-bottom">
-      <div class="user-avatar-container" id="user-avatar-container" style="display: none;">
-        <div class="user-avatar" id="user-avatar">
+      <div class="user-avatar-container" id="user-avatar-container">
+        <button class="user-avatar-btn" id="user-avatar-btn">
           <img id="user-avatar-img" src="" alt="User Avatar" style="display: none;">
-          <div id="user-avatar-fallback" class="avatar-fallback">G</div>
-        </div>
-        <div class="user-info" id="user-info">
-          <span class="user-name" id="user-name">Guest</span>
-          <div class="user-actions">
-            <button class="user-action-btn" id="user-sign-out" title="Sign Out" style="display: none;">
+          <div id="user-avatar-fallback" class="avatar-fallback">
+            <i id="user-guest-icon" class="ri-user-line" style="display: none;"></i>
+            <span id="user-initial" style="display: none;">U</span>
+          </div>
+        </button>
+        
+        <!-- User dropdown menu -->
+        <div class="user-dropdown" id="user-dropdown" style="display: none;">
+          <div class="user-dropdown-header" id="user-dropdown-header">
+            <span class="user-name" id="user-name">Guest</span>
+            <span class="user-status" id="user-status">Guest Mode</span>
+          </div>
+          <div class="user-dropdown-actions">
+            <button class="user-dropdown-action" id="user-sign-in" style="display: none;">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 005.25 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
               </svg>
+              Sign In
             </button>
-            <button class="user-action-btn" id="user-sign-in" title="Sign In">
+            <button class="user-dropdown-action" id="user-sign-out" style="display: none;">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 005.25 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
               </svg>
+              Sign Out
             </button>
           </div>
         </div>