diff options
Diffstat (limited to 'web/templates')
| -rw-r--r-- | web/templates/index.html | 9 | ||||
| -rw-r--r-- | web/templates/partials/buckets-section.html | 26 | ||||
| -rw-r--r-- | web/templates/partials/task-detail.html | 66 | ||||
| -rw-r--r-- | web/templates/partials/tasks-tab.html | 66 | ||||
| -rw-r--r-- | web/templates/settings.html | 50 |
5 files changed, 151 insertions, 66 deletions
diff --git a/web/templates/index.html b/web/templates/index.html index 7be2c52..b11b557 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -82,6 +82,15 @@ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg> </button> <button + class="tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}" + hx-get="/tabs/tasks" + hx-target="#tab-content" + hx-push-url="?tab=tasks" + onclick="setActiveTab(this)" + title="Tasks"> + <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/></svg> + </button> + <button class="tab-button {{if eq .ActiveTab "shopping"}}tab-button-active{{end}}" hx-get="/tabs/shopping" hx-target="#tab-content" diff --git a/web/templates/partials/buckets-section.html b/web/templates/partials/buckets-section.html index d2f5b7e..53b1e35 100644 --- a/web/templates/partials/buckets-section.html +++ b/web/templates/partials/buckets-section.html @@ -1,19 +1,19 @@ {{define "buckets-section"}} -<div id="buckets-list" class="grid gap-4"> +<div id="buckets-list" class="grid gap-3 sm:grid-cols-2"> {{if .Buckets}} {{range .Buckets}} - <div class="card" id="bucket-{{.Bucket.ID}}"> + <div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 p-4" id="bucket-{{.Bucket.ID}}"> <div class="flex items-center justify-between gap-4 mb-3"> <div> - <strong class="text-white">{{.Bucket.Name}}</strong> - <span class="text-xs text-slate-400 ml-2">every {{.Bucket.CycleDays}}d, picks {{.Bucket.PickN}}</span> + <strong class="text-white text-sm">{{.Bucket.Name}}</strong> + <span class="text-xs text-white/40 ml-2">every {{.Bucket.CycleDays}}d, picks {{.Bucket.PickN}}</span> </div> - <button class="text-xs text-red-400 hover:text-red-300 transition-colors" + <button class="text-xs text-red-400/80 hover:text-red-300 transition-colors flex-shrink-0" hx-delete="/settings/buckets/{{.Bucket.ID}}" hx-target="#buckets-list" hx-swap="outerHTML" hx-confirm="Delete bucket '{{.Bucket.Name}}'? Its tasks will be kept, just unbucketed."> - Delete Bucket + Delete </button> </div> @@ -21,10 +21,10 @@ {{if .Items}} {{range .Items}} <div class="flex items-center justify-between gap-2 text-sm py-1"> - <span class="text-slate-200">{{.Content}}</span> + <span class="text-white/80">{{.Content}}</span> <div class="flex items-center gap-3 flex-shrink-0"> - <span class="text-[10px] uppercase tracking-wider {{if eq .BucketState "active"}}text-green-400{{else}}text-slate-500{{end}}">{{.BucketState}}</span> - <button class="text-xs text-red-400/70 hover:text-red-300 transition-colors" + <span class="text-[10px] uppercase tracking-wider {{if eq .BucketState "active"}}text-green-400{{else}}text-white/30{{end}}">{{.BucketState}}</span> + <button class="text-xs text-red-400/60 hover:text-red-300 transition-colors" hx-post="/settings/buckets/items/remove" hx-vals='{"task_id": "{{.ID}}"}' hx-target="#buckets-list" @@ -35,19 +35,19 @@ </div> {{end}} {{else}} - <p class="text-xs text-slate-500 italic">Pool is empty.</p> + <p class="text-xs text-white/40 italic">Pool is empty.</p> {{end}} </div> <form class="flex gap-2" hx-post="/settings/buckets/{{.Bucket.ID}}/items" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()"> <input type="text" name="title" placeholder="Add a pool item..." required - class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-3 py-1.5 text-sm focus:ring-1 focus:ring-blue-500 outline-none"> - <button type="submit" class="text-sm bg-slate-800 hover:bg-slate-700 text-white px-3 py-1.5 rounded-lg transition-colors">Add</button> + class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-1.5 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30"> + <button type="submit" class="text-sm bg-white/10 hover:bg-white/20 text-white px-3 py-1.5 rounded-lg transition-colors">Add</button> </form> </div> {{end}} {{else}} - <div class="card text-center text-slate-500 py-10">No maintenance buckets yet.</div> + <div class="bg-card rounded-lg border border-white/5 text-center text-white/40 py-10 sm:col-span-2">No maintenance buckets yet.</div> {{end}} </div> {{end}} diff --git a/web/templates/partials/task-detail.html b/web/templates/partials/task-detail.html index ace604f..135c38f 100644 --- a/web/templates/partials/task-detail.html +++ b/web/templates/partials/task-detail.html @@ -1,12 +1,70 @@ {{define "task-detail"}} <div class="p-4"> - <h3 class="font-semibold text-gray-900 mb-3">{{.Title}}</h3> + <h3 class="font-semibold text-white mb-3">{{.Title}}</h3> <form hx-post="/tasks/update" hx-swap="none" hx-on::after-request="if(event.detail.successful) { closeTaskModal(); htmx.trigger(document.body, 'refresh-tasks'); }"> <input type="hidden" name="id" value="{{.ID}}"> <input type="hidden" name="source" value="{{.Source}}"> - <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> - <textarea name="description" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3 h-32">{{.Description}}</textarea> - <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium">Save</button> + <label class="block text-sm font-medium text-white/70 mb-1">Description</label> + <textarea name="description" class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-32">{{.Description}}</textarea> + <button type="submit" class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium">Save</button> </form> + + {{if .IsDoot}} + <div class="mt-4 pt-4 border-t border-white/10"> + <h4 class="text-sm font-medium text-white/70 mb-2">Recurrence</h4> + {{if .RecurrenceFreq}} + <p class="text-xs text-teal-300/80 mb-2"> + Repeats every {{if gt .RecurrenceInterval 1}}{{.RecurrenceInterval}} {{recurrenceUnit .RecurrenceFreq}}s{{else}}{{recurrenceUnit .RecurrenceFreq}}{{end}}{{if and (eq .RecurrenceFreq "weekly") .RecurrenceWeekdays}} on {{weekdayNames .RecurrenceWeekdays}}{{end}} + </p> + {{end}} + <form hx-post="/tasks/recurrence" hx-target="#task-edit-content" hx-swap="innerHTML"> + <input type="hidden" name="id" value="{{.ID}}"> + <div class="flex gap-2 mb-2"> + <select name="freq" class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white"> + <option value="" {{if eq .RecurrenceFreq ""}}selected{{end}}>None</option> + <option value="daily" {{if eq .RecurrenceFreq "daily"}}selected{{end}}>Daily</option> + <option value="weekly" {{if eq .RecurrenceFreq "weekly"}}selected{{end}}>Weekly</option> + <option value="monthly" {{if eq .RecurrenceFreq "monthly"}}selected{{end}}>Monthly</option> + <option value="yearly" {{if eq .RecurrenceFreq "yearly"}}selected{{end}}>Yearly</option> + </select> + <input type="number" name="interval" min="1" value="{{if gt .RecurrenceInterval 0}}{{.RecurrenceInterval}}{{else}}1{{end}}" + class="w-20 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white" title="Every N"> + </div> + <div class="flex flex-wrap gap-3 mb-3"> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="0" {{if hasInt .RecurrenceWeekdays 0}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + Su + </label> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="1" {{if hasInt .RecurrenceWeekdays 1}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + Mo + </label> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="2" {{if hasInt .RecurrenceWeekdays 2}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + Tu + </label> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="3" {{if hasInt .RecurrenceWeekdays 3}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + We + </label> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="4" {{if hasInt .RecurrenceWeekdays 4}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + Th + </label> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="5" {{if hasInt .RecurrenceWeekdays 5}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + Fr + </label> + <label class="flex items-center gap-1 text-xs text-white/60"> + <input type="checkbox" name="weekdays" value="6" {{if hasInt .RecurrenceWeekdays 6}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30"> + Sa + </label> + </div> + <button type="submit" class="w-full bg-white/10 hover:bg-white/20 text-white/90 px-4 py-2 rounded-lg text-sm font-medium"> + {{if .RecurrenceFreq}}Update{{else}}Set{{end}} Recurrence + </button> + </form> + </div> + {{end}} </div> {{end}} diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html index b506716..1ac6703 100644 --- a/web/templates/partials/tasks-tab.html +++ b/web/templates/partials/tasks-tab.html @@ -143,5 +143,71 @@ </div> </details> {{end}} + + <!-- Maintenance Buckets --> + <details class="group"> + <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 list-none"> + <span>🪣</span> Maintenance Buckets + <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> + </svg> + </summary> + {{template "buckets-section" .}} + <form class="mt-3 flex flex-wrap gap-2 p-3 bg-black/20 rounded-lg" hx-post="/settings/buckets" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()"> + <input type="text" name="name" placeholder="Bucket name" required + class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30"> + <input type="number" name="cycle_days" placeholder="Cycle (days)" required min="1" + class="w-28 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30"> + <input type="number" name="pick_n" placeholder="Pick N" required min="1" + class="w-24 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30"> + <button type="submit" class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Create Bucket</button> + </form> + </details> + + <!-- Projects (read-only) --> + <details class="group"> + <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 list-none"> + <span>📁</span> Projects + <span class="text-sm font-normal text-white/40">({{len .Projects}})</span> + <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> + </svg> + </summary> + <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3"> + {{if .Projects}} + {{range .Projects}} + <div class="bg-card rounded-lg border border-white/5 flex items-center gap-3 py-2 px-3"> + <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span> + <span class="text-sm text-white/80 truncate">{{.Name}}</span> + </div> + {{end}} + {{else}} + <div class="bg-card rounded-lg border border-white/5 col-span-full text-center text-white/40 py-6 text-sm italic">No projects yet.</div> + {{end}} + </div> + </details> + + <!-- Labels (read-only) --> + <details class="group"> + <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 list-none"> + <span>🏷️</span> Labels + <span class="text-sm font-normal text-white/40">({{len .Labels}})</span> + <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> + </svg> + </summary> + <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3"> + {{if .Labels}} + {{range .Labels}} + <div class="bg-card rounded-lg border border-white/5 flex items-center gap-3 py-2 px-3"> + <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span> + <span class="text-sm text-white/80 truncate">{{.Name}}</span> + </div> + {{end}} + {{else}} + <div class="bg-card rounded-lg border border-white/5 col-span-full text-center text-white/40 py-6 text-sm italic">No labels assigned a color yet.</div> + {{end}} + </div> + </details> </div> {{end}} diff --git a/web/templates/settings.html b/web/templates/settings.html index f07700d..acee1ee 100644 --- a/web/templates/settings.html +++ b/web/templates/settings.html @@ -17,7 +17,7 @@ <div class="max-w-4xl mx-auto"> <a href="/" onclick="if (window.history.length > 1) { history.back(); return false; }" class="inline-block mb-6 text-slate-400 hover:text-white transition-colors">← Back to Dashboard</a> <h1 class="text-4xl font-light text-white mb-2 tracking-tight">Settings</h1> - <p class="text-slate-400 mb-10">Configure feature toggles and data sources.</p> + <p class="text-slate-400 mb-10">Configure auth, agent access, and data sources.</p> <!-- Passkeys Section --> {{if .WebAuthnEnabled}} @@ -221,54 +221,6 @@ </div> </section> - <!-- Maintenance Buckets Section --> - <section class="mb-12"> - <h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Maintenance Buckets</h2> - {{template "buckets-section" .}} - <form class="mt-4 flex flex-wrap gap-3 p-4 bg-slate-900/40 rounded-xl border border-white/5" hx-post="/settings/buckets" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()"> - <input type="text" name="name" placeholder="Bucket name" required - class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none"> - <input type="number" name="cycle_days" placeholder="Cycle (days)" required min="1" - class="w-32 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none"> - <input type="number" name="pick_n" placeholder="Pick N" required min="1" - class="w-28 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none"> - <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">Create Bucket</button> - </form> - </section> - - <!-- Projects Section (read-only) --> - <section class="mb-12"> - <h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Projects</h2> - <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3"> - {{if .Projects}} - {{range .Projects}} - <div class="card flex items-center gap-3 py-2"> - <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span> - <span class="text-sm text-slate-200 truncate">{{.Name}}</span> - </div> - {{end}} - {{else}} - <div class="card col-span-full text-center text-slate-500 py-6 text-sm italic">No projects yet.</div> - {{end}} - </div> - </section> - - <!-- Labels Section (read-only) --> - <section class="mb-12"> - <h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Labels</h2> - <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3"> - {{if .Labels}} - {{range .Labels}} - <div class="card flex items-center gap-3 py-2"> - <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span> - <span class="text-sm text-slate-200 truncate">{{.Name}}</span> - </div> - {{end}} - {{else}} - <div class="card col-span-full text-center text-slate-500 py-6 text-sm italic">No labels assigned a color yet.</div> - {{end}} - </div> - </section> </div> </body> </html> |
