From ab7bc0d2c30bfebdb4e93a83024850b173a86dc9 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@integreatconsult.com>
Date: Sun, 3 Aug 2025 22:45:36 -0700
Subject: [PATCH] improvements

---
 app/templates/index.html | 210 +++++++++++++++++++--------------------
 1 file changed, 103 insertions(+), 107 deletions(-)
diff --git a/app/templates/index.html b/app/templates/index.html
index dcb0b71..10275b0 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -21,124 +21,120 @@
         }
     </style>
 </head>
-<body class="min-h-screen flex bg-base-200" 
-    x-data="{}"
-    x-on:open-modal.window="$refs.modal.showModal()"
+<body class="min-h-screen flex flex-col" x-data="{}" x-on:open-modal.window="$refs.modal.showModal()"
     x-on:close-modal.window="$refs.modal.close()">
-    <!-- Sidebar -->
-    <div class="sidebar w-64 min-h-screen p-4 flex flex-col bg-base-100 shadow-lg">
-        <div class="mb-8">
+    <header class="bg-base-100 border-b border-base-300 p-4 flex justify-between  shadow-sm">
+        <div>
             <h1 class="text-2xl font-bold text-primary flex items-center">
                 <i class="fas fa-envelope mr-2"></i>
                 Email Organizer
             </h1>
             <p class="text-sm mt-1 text-base-content/70">AI-powered email organization</p>
         </div>
-        
-        <nav class="flex-grow menu bg-transparent rounded-lg">
-            <div class="active">
-                <a class="btn btn-ghost justify-start">
-                    <i class="fas fa-folder mr-3 text-primary"></i>
-                    Folders
-                </a>
-            </div>
-            <div>
-                <a class="btn btn-ghost justify-start">
-                    <i class="fas fa-inbox mr-3 text-secondary"></i>
-                    Inbox
-                </a>
-            </div>
-            <div>
-                <a class="btn btn-ghost justify-start">
-                    <i class="fas fa-cog mr-3 text-accent"></i>
-                    Settings
-                </a>
-            </div>
-            <div>
-                <a class="btn btn-ghost justify-start">
-                    <i class="fas fa-chart-bar mr-3 text-info"></i>
-                    Analytics
-                </a>
-            </div>
-            <div>
-                <a class="btn btn-ghost justify-start">
-                    <i class="fas fa-question-circle mr-3 text-warning"></i>
-                    Help
-                </a>
-            </div>
-        </nav>
-        
-        <div class="mt-auto pt-4 border-t border-base-300">
-            <div>
-                <a href="{{ url_for('auth.logout') }}" class="btn btn-ghost justify-start">
-                    <i class="fas fa-sign-out-alt mr-3 text-error"></i>
-                    Logout
-                </a>
+
+        <div class="flex items-center space-x-4">
+            <button class="relative p-2 rounded-full hover:bg-base-300 btn-circle">
+                <i class="fas fa-bell"></i>
+                <span class="badge badge-sm badge-secondary absolute -top-1 -right-1">3</span>
+            </button>
+
+            <div class="relative" x-data="{ open: false }" @click.outside="open = false">
+                <button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-base-300"
+                    @click="open = !open">
+                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+                        <span class="font-semibold text-primary-content">{{ current_user.first_name[0] }}{{
+                            current_user.last_name[0] }}</span>
+                    </div>
+                    <span class="hidden md:inline">{{ current_user.first_name }} {{ current_user.last_name }}</span>
+                    <i class="fas fa-chevron-down"></i>
+                </button>
+
+                <!-- User Dropdown -->
+                <div id="user-dropdown"
+                    class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-base-100 z-10"
+                    x-show="open">
+                    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Profile</a>
+                    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Settings</a>
+                    <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm hover:bg-base-300">Logout</a>
+                </div>
             </div>
         </div>
-    </div>
-    
-    <!-- Main Content -->
-    <div class="flex-1 flex flex-col">
-        <!-- Top Bar -->
-        <header class="bg-base-100 border-b border-base-300 p-4 flex justify-between items-center shadow-sm">
-            <div>
-                <h2 class="text-xl font-semibold">Folders</h2>
-                <p class="text-sm text-base-content/70">Manage your email organization rules</p>
-            </div>
-            
-            <div class="flex items-center space-x-4">
-                <button class="relative p-2 rounded-full hover:bg-base-300 btn-circle">
-                    <i class="fas fa-bell"></i>
-                    <span class="badge badge-sm badge-secondary absolute -top-1 -right-1">3</span>
-                </button>
-                
-                <div class="relative" x-data="{ open: false }" @click.outside="open = false">
-                    <button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-base-300" @click="open = !open">
-                        <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
-                            <span class="font-semibold text-primary-content">{{ current_user.first_name[0] }}{{ current_user.last_name[0] }}</span>
-                        </div>
-                        <span class="hidden md:inline">{{ current_user.first_name }} {{ current_user.last_name }}</span>
-                        <i class="fas fa-chevron-down"></i>
-                    </button>
-                    
-                    <!-- User Dropdown -->
-                    <div id="user-dropdown" class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-base-100 z-10" x-show="open">
-                        <a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Profile</a>
-                        <a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Settings</a>
-                        <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm hover:bg-base-300">Logout</a>
-                    </div>
-                </div>
-            </div>
-        </header>
-        
-        <!-- Main Content Area -->
-        <main class="flex-1 p-6 overflow-auto bg-base-200">
-            <div class="flex justify-between items-center mb-6">
-                <div>
-                    <h2 class="text-2xl font-bold">Email Folders</h2>
-                    <p class="text-base-content/70">Create and manage your email organization rules</p>
-                </div>
-                <button class="btn btn-primary" 
-                        hx-get="/api/folders/new"
-                        hx-target="#modal-holder"
-                        hx-swap="innerHTML"
-                        >
-                    <i class="fas fa-plus mr-2"></i>
-                    Add Folder
-                </button>
-            </div>
-            
-            <section id="folders-list" class="mb-12">
-                {% include 'partials/folders_list.html' %}
-            </section>
-        </main>
-    </div>
+    </header>
+    <div class="flex">
+        <div class="sidebar w-64 min-h-screen p-4 flex flex-col bg-base-200 shadow-lg">
 
+            <nav class="flex-grow menu bg-transparent rounded-lg">
+                <div class="active">
+                    <a class="btn btn-ghost justify-start">
+                        <i class="fas fa-folder mr-3 text-primary"></i>
+                        Folders
+                    </a>
+                </div>
+                <div>
+                    <a class="btn btn-ghost justify-start">
+                        <i class="fas fa-inbox mr-3 text-secondary"></i>
+                        Inbox
+                    </a>
+                </div>
+                <div>
+                    <a class="btn btn-ghost justify-start">
+                        <i class="fas fa-cog mr-3 text-accent"></i>
+                        Settings
+                    </a>
+                </div>
+                <div>
+                    <a class="btn btn-ghost justify-start">
+                        <i class="fas fa-chart-bar mr-3 text-info"></i>
+                        Analytics
+                    </a>
+                </div>
+                <div>
+                    <a class="btn btn-ghost justify-start">
+                        <i class="fas fa-question-circle mr-3 text-warning"></i>
+                        Help
+                    </a>
+                </div>
+            </nav>
+
+            <div class="mt-auto pt-4 border-t border-base-300">
+                <div>
+                    <a href="{{ url_for('auth.logout') }}" class="btn btn-ghost justify-start">
+                        <i class="fas fa-sign-out-alt mr-3 text-error"></i>
+                        Logout
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col">
+            <!-- Top Bar -->
+
+            <!-- Main Content Area -->
+            <main class="flex-1 p-6 overflow-auto bg-base-100">
+                <div class="flex justify-between items-center mb-6">
+                    <div>
+                        <h2 class="text-2xl font-bold">Email Folders</h2>
+                        <p class="text-base-content/70">Create and manage your email organization rules</p>
+                    </div>
+                    <button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder"
+                        hx-swap="innerHTML">
+                        <i class="fas fa-plus mr-2"></i>
+                        Add Folder
+                    </button>
+                </div>
+
+                <section id="folders-list" class="mb-12">
+                    {% include 'partials/folders_list.html' %}
+                </section>
+            </main>
+        </div>
+    </div>
     <!-- Modal Holder -->
-    <dialog id="modal-holder" x-ref="modal" class="modal" >
+    <dialog id="modal-holder" x-ref="modal" class="modal">
         <!-- Modals will be loaded here via HTMX -->
     </dialog>
-    
+
 </body>
-</html>
+
+</html>
\ No newline at end of file
