improvements

This commit is contained in:
Bryce
2025-08-03 22:45:36 -07:00
parent c13b22234b
commit ab7bc0d2c3

View File

@@ -21,13 +21,10 @@
} }
</style> </style>
</head> </head>
<body class="min-h-screen flex bg-base-200" <body class="min-h-screen flex flex-col" x-data="{}" x-on:open-modal.window="$refs.modal.showModal()"
x-data="{}"
x-on:open-modal.window="$refs.modal.showModal()"
x-on:close-modal.window="$refs.modal.close()"> x-on:close-modal.window="$refs.modal.close()">
<!-- Sidebar --> <header class="bg-base-100 border-b border-base-300 p-4 flex justify-between shadow-sm">
<div class="sidebar w-64 min-h-screen p-4 flex flex-col bg-base-100 shadow-lg"> <div>
<div class="mb-8">
<h1 class="text-2xl font-bold text-primary flex items-center"> <h1 class="text-2xl font-bold text-primary flex items-center">
<i class="fas fa-envelope mr-2"></i> <i class="fas fa-envelope mr-2"></i>
Email Organizer Email Organizer
@@ -35,6 +32,37 @@
<p class="text-sm mt-1 text-base-content/70">AI-powered email organization</p> <p class="text-sm mt-1 text-base-content/70">AI-powered email organization</p>
</div> </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>
<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"> <nav class="flex-grow menu bg-transparent rounded-lg">
<div class="active"> <div class="active">
<a class="btn btn-ghost justify-start"> <a class="btn btn-ghost justify-start">
@@ -81,49 +109,16 @@
<!-- Main Content --> <!-- Main Content -->
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<!-- Top Bar --> <!-- 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 Content Area -->
<main class="flex-1 p-6 overflow-auto bg-base-200"> <main class="flex-1 p-6 overflow-auto bg-base-100">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<div> <div>
<h2 class="text-2xl font-bold">Email Folders</h2> <h2 class="text-2xl font-bold">Email Folders</h2>
<p class="text-base-content/70">Create and manage your email organization rules</p> <p class="text-base-content/70">Create and manage your email organization rules</p>
</div> </div>
<button class="btn btn-primary" <button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder"
hx-get="/api/folders/new" hx-swap="innerHTML">
hx-target="#modal-holder"
hx-swap="innerHTML"
>
<i class="fas fa-plus mr-2"></i> <i class="fas fa-plus mr-2"></i>
Add Folder Add Folder
</button> </button>
@@ -134,11 +129,12 @@
</section> </section>
</main> </main>
</div> </div>
</div>
<!-- Modal Holder --> <!-- 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 --> <!-- Modals will be loaded here via HTMX -->
</dialog> </dialog>
</body> </body>
</html> </html>