From 97a0782bde9921def50477d98ad58481dc3c292c Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Tue, 20 Jan 2026 10:49:23 -0800
Subject: [PATCH] Feat: Add Account button and PAT management modal

---
 index.html | 80 ++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 72 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 36a8e8a..062d94e 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,12 @@
 </head>
 <body class="bg-white antialiased text-slate-900">
 
-    <div x-data="{ leftSidebar: false, rightSidebar: false }" class="min-h-screen flex flex-col">
+    <div x-data="{ 
+        leftSidebar: false, 
+        rightSidebar: false, 
+        accountModal: false,
+        githubPat: localStorage.getItem('github_pat') || ''
+    }" class="min-h-screen flex flex-col">
         
         <!-- Header -->
         <header class="flex items-center justify-between px-4 py-3 border-b border-gray-100 sticky top-0 bg-white z-50">
@@ -52,20 +57,79 @@
             </div>
         </main>
 
-        <!-- Mobile Sidebars (Placeholders for functionality) -->
+        <!-- Mobile Sidebars -->
         <div x-show="leftSidebar" x-cloak class="fixed inset-0 z-[60] flex">
             <div @click="leftSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
-            <div class="relative w-64 bg-white h-full shadow-xl p-4">
-                <h2 class="font-bold mb-4">Left Menu</h2>
-                <button @click="leftSidebar = false" class="text-sm text-blue-600">Close</button>
+            <div class="relative w-64 bg-white h-full shadow-xl p-4 flex flex-col">
+                <div class="flex-1">
+                    <h2 class="font-bold mb-4">Left Menu</h2>
+                </div>
+                <button @click="leftSidebar = false" class="text-sm text-blue-600 text-left">Close</button>
             </div>
         </div>
 
         <div x-show="rightSidebar" x-cloak class="fixed inset-0 z-[60] flex justify-end">
             <div @click="rightSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
-            <div class="relative w-64 bg-white h-full shadow-xl p-4">
-                <h2 class="font-bold mb-4">Right Menu</h2>
-                <button @click="rightSidebar = false" class="text-sm text-blue-600">Close</button>
+            <div class="relative w-72 bg-white h-full shadow-xl p-4 flex flex-col">
+                <div class="flex-1">
+                    <h2 class="font-bold mb-4 text-slate-800">Right Menu</h2>
+                    <!-- Menu items could go here -->
+                </div>
+                
+                <!-- Account Button -->
+                <button 
+                    @click="accountModal = true; rightSidebar = false"
+                    class="flex items-center justify-between w-full p-3 bg-slate-50 hover:bg-slate-100 rounded-2xl transition-colors group"
+                >
+                    <div class="flex items-center space-x-3">
+                        <div class="bg-slate-900 rounded-full p-2">
+                            <i data-lucide="user" class="w-4 h-4 text-blue-400 fill-blue-400"></i>
+                        </div>
+                        <span class="font-medium text-slate-700">Account</span>
+                    </div>
+                    <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Account Modal -->
+        <div x-show="accountModal" x-cloak class="fixed inset-0 z-[70] flex items-center justify-center p-4">
+            <div @click="accountModal = false" class="fixed inset-0 bg-black/40 backdrop-blur-sm"></div>
+            <div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden">
+                <div class="p-6 space-y-6">
+                    <div class="space-y-2">
+                        <h3 class="text-xl font-semibold text-slate-900">GitHub Settings</h3>
+                        <p class="text-sm text-slate-500">Provide your Personal Access Token to enable repository access.</p>
+                    </div>
+
+                    <div class="space-y-2">
+                        <label for="pat" class="block text-xs font-bold uppercase tracking-wider text-slate-400 ml-1">
+                            Personal Access Token
+                        </label>
+                        <input 
+                            id="pat"
+                            type="password" 
+                            x-model="githubPat"
+                            placeholder="ghp_xxxxxxxxxxxx"
+                            class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
+                        >
+                    </div>
+
+                    <div class="flex flex-col space-y-3">
+                        <button 
+                            @click="localStorage.setItem('github_pat', githubPat); accountModal = false"
+                            class="w-full py-3 bg-slate-900 text-white font-medium rounded-xl hover:bg-slate-800 transition-colors"
+                        >
+                            Save Changes
+                        </button>
+                        <button 
+                            @click="accountModal = false"
+                            class="w-full py-3 bg-white text-slate-500 font-medium rounded-xl hover:bg-slate-50 transition-colors"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
 
