notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvement

Browse Source
This commit is contained in:
Bryce
2025-08-03 12:18:54 -07:00
parent 4c2333a110
commit f5938c5586
8 changed files with 224 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
app/templates/index.html
View File

@@ -1,62 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Organizer - Prototype</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B5CF6', /* Purple 500 */
secondary: '#A78BFA', /* Purple 400 */
accent: '#C4B5FD', /* Purple 300 */
background: '#0F172A', /* Slate 900 */
surface: '#1E293B', /* Slate 800 */
text: '#F1F5F9', /* Slate 100 */
}
}
}
}
</script>
<style>
body {
background-color: #0F172A; /* background */
color: #F1F5F9; /* text */
font-family: 'Inter', sans-serif;
}
.sidebar {
background-color: #1E293B; /* surface */
border-right: 1px solid #334155; /* slate 700 */
}
.card {
background-color: #1E293B; /* surface */
border: 1px solid #334155; /* slate 700 */
}
/* Using DaisyUI classes instead of custom CSS */
.user-dropdown {
background-color: #1E293B; /* surface */
border: 1px solid #334155; /* slate 700 */
}
.modal-box {
background-color: #1E293B; /* surface */
border: 1px solid #334155; /* slate 700 */
}
.notification-badge {
background-color: #F87171; /* red 400 */
border-radius: 50%;
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
}
</style>
</head>
<body class="min-h-screen flex" x-data @open-add-folder-modal.window="document.getElementById('add-folder-modal').showModal()">
<body class="min-h-screen flex"
x-data="{
editFolderData: { id: null, name: '', rule_text: '', priority: 0 },
openEditFolderModal(folderData) {
console.log(folderData)
this.editFolderData = {
id: folderData.detail.id,
name: folderData.detail.name,
rule_text: folderData.detail.rule_text,
priority: folderData.detail.priority
};
document.getElementById('edit-folder-modal').showModal();
}
}"
@open-add-folder-modal.window="document.getElementById('add-folder-modal').showModal()"
@open-edit-folder-modal.window="openEditFolderModal($event.detail)">
<!-- Sidebar -->
<div class="sidebar w-64 min-h-screen p-4 flex flex-col">
<div class="mb-8">
@@ -64,7 +34,7 @@
<i class="fas fa-envelope mr-2"></i>
Email Organizer
</h1>
<p class="text-secondary text-sm mt-1">AI-powered email organization</p>
<p class="text-sm mt-1">AI-powered email organization</p>
</div>
<nav class="flex-grow menu bg-transparent">
@@ -116,7 +86,7 @@
<header class="border-b border-slate-700 p-4 flex justify-between items-center">
<div>
<h2 class="text-xl font-semibold">Folders</h2>
<p class="text-secondary text-sm">Manage your email organization rules</p>
<p class="text-sm">Manage your email organization rules</p>
</div>
<div class="flex items-center space-x-4">
@@ -149,7 +119,7 @@
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-semibold">Email Folders</h2>
<p class="text-secondary">Create and manage your email organization rules</p>
<p class="">Create and manage your email organization rules</p>
</div>
<button class="btn btn-primary" onclick="document.getElementById('add-folder-modal').showModal()">
<i class="fas fa-plus mr-2"></i>
@@ -192,5 +162,40 @@
</div>
</dialog>
<!-- Edit Folder Modal -->
<dialog id="edit-folder-modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg mb-4">Edit Folder</h3>
<p x-text="`/api/folders/${editFolderData.id}`" />
<form id="edit-folder-form"
:hx-put="`/api/folders/${editFolderData.id}`"
x-effect="editFolderData.id; htmx.process($el)"
hx-target="#folders-list"
hx-swap="innerHTML"
hx-on:htmx:after-request="document.getElementById('edit-folder-modal').close()">
<div class="mb-4">
<label for="edit-folder-name" class="block text-sm font-medium mb-1">Name</label>
<input type="text" id="edit-folder-name" name="name" class="input input-bordered w-full" placeholder="e.g., Work, Personal, Newsletters" required x-model="editFolderData.name">
</div>
<div class="mb-4">
<label for="edit-folder-rule" class="block text-sm font-medium mb-1">Rule (Natural Language)</label>
<textarea id="edit-folder-rule" name="rule_text" class="textarea textarea-bordered w-full h-24" placeholder="e.g., Move emails from 'newsletter@company.com' to this folder" required x-model="editFolderData.rule_text"></textarea>
</div>
<div class="mb-4">
<label for="edit-folder-priority" class="block text-sm font-medium mb-1">Priority</label>
<select id="edit-folder-priority" name="priority" class="select select-bordered w-full" x-model="editFolderData.priority">
<option value="1" :selected="editFolderData.priority == 1">High</option>
<option value="0" :selected="editFolderData.priority == 0">Normal</option>
<option value="-1" :selected="editFolderData.priority == -1">Low</option>
</select>
</div>
<div class="modal-action">
<button type="button" class="btn btn-outline" onclick="document.getElementById('edit-folder-modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary">Update Folder</button>
</div>
</form>
</div>
</dialog>
</body>
</html>