diff options
Diffstat (limited to 'web/templates')
| -rw-r--r-- | web/templates/index.html | 17 | ||||
| -rw-r--r-- | web/templates/partials/chain-detail.html | 52 | ||||
| -rw-r--r-- | web/templates/partials/tasks-tab.html | 40 |
3 files changed, 109 insertions, 0 deletions
diff --git a/web/templates/index.html b/web/templates/index.html index 19f1c7e..7be2c52 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -262,11 +262,15 @@ if (e.key === 'Escape') { closeActionModal(); closeTaskModal(); + closeChainModal(); } }); function closeTaskModal() { document.getElementById('task-edit-modal').classList.add('hidden'); } + function closeChainModal() { + document.getElementById('chain-view-modal').classList.add('hidden'); + } </script> <!-- Task Edit Modal --> @@ -282,6 +286,19 @@ </div> </div> + <!-- Chain Checklist Modal --> + <div id="chain-view-modal" class="hidden fixed inset-0 bg-modal-overlay flex items-center justify-center p-4 z-50"> + <div class="bg-modal backdrop-blur-sm rounded-lg max-w-lg w-full max-h-[80vh] flex flex-col" style="box-shadow: 0 0 20px black;"> + <div class="p-4 border-b border-white/10 flex justify-between items-center flex-shrink-0"> + <h2 class="font-medium text-white">Chain</h2> + <button onclick="closeChainModal()" class="text-white/40 hover:text-white">✕</button> + </div> + <div id="chain-view-content" class="overflow-y-auto"> + <p class="p-4 text-white/50 text-sm">Loading...</p> + </div> + </div> + </div> + <div class="fixed bottom-0 right-0 p-2 text-[10px] text-white/20 pointer-events-none"> {{.BuildVersion}} </div> diff --git a/web/templates/partials/chain-detail.html b/web/templates/partials/chain-detail.html new file mode 100644 index 0000000..3372f03 --- /dev/null +++ b/web/templates/partials/chain-detail.html @@ -0,0 +1,52 @@ +{{define "chain-detail"}} +<div class="p-4 space-y-4"> + <div class="flex items-center justify-between gap-2"> + <div> + <h3 class="text-white font-medium">{{.ProjectName}}</h3> + <p class="text-xs text-white/50 mt-0.5"> + {{.Chain.Status}} + {{range $i, $t := .Tasks}}{{if $t.ChainUnlocked}} · step {{add $i 1}} of {{len $.Tasks}}{{end}}{{end}} + </p> + </div> + <div class="flex gap-2 flex-shrink-0"> + {{if eq .Chain.Status "active"}} + <button hx-post="/chains/{{.Chain.ID}}/pause" + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); closeChainModal(); }" + class="text-xs px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/70">Pause</button> + {{else if eq .Chain.Status "paused"}} + <button hx-post="/chains/{{.Chain.ID}}/resume" + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); closeChainModal(); }" + class="text-xs px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/70">Resume</button> + {{end}} + <button hx-post="/chains/{{.Chain.ID}}/abandon" + hx-confirm="Abandon this chain? This can't be undone." + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); closeChainModal(); }" + class="text-xs px-2 py-1 rounded bg-red-500/10 hover:bg-red-500/20 text-red-300/80">Abandon</button> + </div> + </div> + + <div class="space-y-1"> + {{range $i, $t := .Tasks}} + <div class="flex items-start gap-2 py-2 px-2 rounded-lg {{if $t.Completed}}opacity-50{{else if not $t.ChainUnlocked}}opacity-40{{end}}"> + {{if $t.Completed}} + <span class="mt-0.5 text-green-400 flex-shrink-0">✓</span> + {{else if $t.ChainUnlocked}} + <input type="checkbox" + hx-post="/complete-atom" + hx-vals='{"id": "{{$t.ID}}", "source": "doot"}' + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); htmx.ajax('GET', '/chains/{{$.Chain.ID}}', {target:'#chain-view-content', swap:'innerHTML'}); }" + class="mt-0.5 h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0"> + {{else}} + <span class="mt-0.5 text-white/30 flex-shrink-0">🔒</span> + {{end}} + <div class="flex-1 min-w-0"> + <span class="text-sm {{if $t.Completed}}line-through text-white/50{{else if $t.ChainUnlocked}}text-white{{else}}text-white/40{{end}}">{{add $i 1}}. {{$t.Content}}</span> + {{if $t.Description}} + <p class="text-xs text-white/40 mt-0.5">{{$t.Description}}</p> + {{end}} + </div> + </div> + {{end}} + </div> +</div> +{{end}} diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html index 04c20da..b506716 100644 --- a/web/templates/partials/tasks-tab.html +++ b/web/templates/partials/tasks-tab.html @@ -5,6 +5,40 @@ hx-target="#tab-content" hx-swap="innerHTML"> + <!-- Chains --> + {{if .Chains}} + <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> + {{range .Chains}} + <div class="bg-card bg-card-hover transition-colors rounded-lg border border-purple-400/20"> + <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4"> + {{if .CurrentTask}} + <input type="checkbox" + hx-post="/complete-atom" + hx-vals='{"id": "{{.CurrentTask.ID}}", "source": "doot"}' + hx-target="closest div.rounded-lg" + hx-swap="outerHTML" + class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0"> + {{end}} + <span class="text-lg flex-shrink-0">🔗</span> + <div class="flex-1 min-w-0"> + <div class="flex items-start justify-between gap-2"> + <h3 class="text-sm text-white font-medium break-words cursor-pointer hover:underline" + hx-get="/chains/{{.Chain.ID}}" + hx-target="#chain-view-content" + hx-swap="innerHTML" + onclick="document.getElementById('chain-view-modal').classList.remove('hidden')">{{if .CurrentTask}}{{.CurrentTask.Content}}{{else}}{{.ProjectName}}{{end}}</h3> + </div> + <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50"> + <span class="text-purple-300/80">{{.ProjectName}} · {{.Position}}/{{.Total}}</span> + {{if eq .Chain.Status "paused"}}<span class="text-amber-300/80">paused</span>{{end}} + </div> + </div> + </div> + </div> + {{end}} + </div> + {{end}} + <!-- Tasks List --> {{if .Atoms}} <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> @@ -35,6 +69,9 @@ {{end}} </div> <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50"> + {{if .ProjectName}} + <span class="text-teal-300/70">{{.ProjectName}}</span> + {{end}} {{if .DueDate}} <span class="{{if .IsOverdue}}text-amber-300/80{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span> {{end}} @@ -92,6 +129,9 @@ {{end}} </div> <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/40"> + {{if .ProjectName}} + <span class="text-teal-300/60">{{.ProjectName}}</span> + {{end}} {{if .DueDate}} <span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span> {{end}} |