improvements
This commit is contained in:
Bryce
@@ -21,124 +21,120 @@
|
|||||||
}
|
}
|
||||||
</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
|
||||||
</h1>
|
</h1>
|
||||||
<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>
|
||||||
|
|
||||||
<nav class="flex-grow menu bg-transparent rounded-lg">
|
<div class="flex items-center space-x-4">
|
||||||
<div class="active">
|
<button class="relative p-2 rounded-full hover:bg-base-300 btn-circle">
|
||||||
<a class="btn btn-ghost justify-start">
|
<i class="fas fa-bell"></i>
|
||||||
<i class="fas fa-folder mr-3 text-primary"></i>
|
<span class="badge badge-sm badge-secondary absolute -top-1 -right-1">3</span>
|
||||||
Folders
|
</button>
|
||||||
</a>
|
|
||||||
</div>
|
<div class="relative" x-data="{ open: false }" @click.outside="open = false">
|
||||||
<div>
|
<button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-base-300"
|
||||||
<a class="btn btn-ghost justify-start">
|
@click="open = !open">
|
||||||
<i class="fas fa-inbox mr-3 text-secondary"></i>
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
|
||||||
Inbox
|
<span class="font-semibold text-primary-content">{{ current_user.first_name[0] }}{{
|
||||||
</a>
|
current_user.last_name[0] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<span class="hidden md:inline">{{ current_user.first_name }} {{ current_user.last_name }}</span>
|
||||||
<a class="btn btn-ghost justify-start">
|
<i class="fas fa-chevron-down"></i>
|
||||||
<i class="fas fa-cog mr-3 text-accent"></i>
|
</button>
|
||||||
Settings
|
|
||||||
</a>
|
<!-- User Dropdown -->
|
||||||
</div>
|
<div id="user-dropdown"
|
||||||
<div>
|
class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-base-100 z-10"
|
||||||
<a class="btn btn-ghost justify-start">
|
x-show="open">
|
||||||
<i class="fas fa-chart-bar mr-3 text-info"></i>
|
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Profile</a>
|
||||||
Analytics
|
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Settings</a>
|
||||||
</a>
|
<a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm hover:bg-base-300">Logout</a>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
<div class="flex">
|
||||||
<!-- Main Content -->
|
<div class="sidebar w-64 min-h-screen p-4 flex flex-col bg-base-200 shadow-lg">
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<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 -->
|
<!-- 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>
|
||||||
Reference in New Issue
Block a user