diff options
Diffstat (limited to 'web/templates/partials')
| -rw-r--r-- | web/templates/partials/shopping-tab.html | 32 | ||||
| -rw-r--r-- | web/templates/partials/tasks-tab.html | 4 | ||||
| -rw-r--r-- | web/templates/partials/timeline-tab.html | 162 |
3 files changed, 134 insertions, 64 deletions
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html index 19c570f..1f589e5 100644 --- a/web/templates/partials/shopping-tab.html +++ b/web/templates/partials/shopping-tab.html @@ -4,25 +4,47 @@ hx-trigger="refresh-tasks from:body" hx-target="#tab-content" hx-swap="innerHTML"> + + <!-- Quick Add Form --> + <form hx-post="/shopping/add" + hx-target="#tab-content" + hx-swap="innerHTML" + class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5"> + <div class="flex gap-2"> + <input type="text" name="name" placeholder="Add item..." + class="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm" + required> + <select name="store" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30"> + <option value="Quick Add">Quick Add</option> + {{range .Stores}} + <option value="{{.Name}}">{{.Name}}</option> + {{end}} + </select> + <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> + Add + </button> + </div> + </form> + {{if .Stores}} {{range .Stores}} - <section class="bg-black/40 backdrop-blur-sm rounded-xl p-4 sm:p-5"> + <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5"> <h2 class="text-xl font-medium mb-4 text-white">{{.Name}}</h2> {{range .Categories}} <div class="mb-4 last:mb-0"> {{if .Name}}<h3 class="text-sm text-white/60 mb-2 uppercase tracking-wide">{{.Name}}</h3>{{end}} <ul class="space-y-2"> {{range .Items}} - <li class="flex items-center gap-3 p-3 bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}"> + <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}"> <input type="checkbox" {{if .Checked}}checked{{end}} hx-post="/shopping/toggle" - hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}}}' + hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}},"name":"{{.Name}}"}' hx-target="closest li" hx-swap="outerHTML" class="h-5 w-5 rounded bg-black/40 border-white/30 text-green-500 focus:ring-white/30 cursor-pointer flex-shrink-0"> <span class="flex-1 {{if .Checked}}line-through text-white/40{{else}}text-white{{end}}">{{.Name}}</span> {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}} - <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else}}bg-green-900/50 text-green-300{{end}}"> + <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}"> {{.Source}} </span> </li> @@ -35,7 +57,7 @@ {{else}} <div class="text-center py-16 text-white/50"> <p class="text-lg mb-2">No shopping items</p> - <p class="text-sm">Add items from PlanToEat or Trello's Shopping board</p> + <p class="text-sm">Use the form above to add items quickly</p> </div> {{end}} </div> diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html index db986bb..9e030e4 100644 --- a/web/templates/partials/tasks-tab.html +++ b/web/templates/partials/tasks-tab.html @@ -8,7 +8,7 @@ {{if .Atoms}} <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> {{range .Atoms}} - <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}"> + <div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}"> <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4"> <!-- Checkbox for completing --> <input type="checkbox" @@ -70,7 +70,7 @@ </summary> <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 mt-2"> {{range .FutureAtoms}} - <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 opacity-60"> + <div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 opacity-60"> <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4"> <input type="checkbox" hx-post="/complete-atom" diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html index e73a643..aeaba40 100644 --- a/web/templates/partials/timeline-tab.html +++ b/web/templates/partials/timeline-tab.html @@ -5,70 +5,118 @@ hx-target="#tab-content" hx-swap="innerHTML"> - {{$currentDay := ""}} - {{range .Items}} - {{$day := .Time.Format "Monday, January 2"}} - {{if ne $day $currentDay}} - {{if ne $currentDay ""}} - </div> <!-- Close previous day items --> - </div> <!-- Close previous day container --> + <!-- Today Section --> + {{if .TodayItems}} + <div> + <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2"> + <span>📅</span> Today + </h2> + <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2"> + {{range .TodayItems}} + {{template "timeline-item" .}} {{end}} - {{$currentDay = $day}} - <div> - <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2"> - <span>🗓️</span> {{$day}} - </h2> - <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2"> + </div> + </div> + {{end}} + + <!-- Tomorrow Section (Collapsed) --> + {{if .TomorrowItems}} + <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 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none"> + <span>🗓️</span> Tomorrow + <span class="text-sm font-normal text-white/50">({{len .TomorrowItems}} items)</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="space-y-2 relative pl-4 border-l border-white/10 ml-2"> + {{range .TomorrowItems}} + {{template "timeline-item" .}} + {{end}} + </div> + </details> + {{end}} + + <!-- Later Section (Collapsed) --> + {{if .LaterItems}} + <details class="group"> + <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/60 cursor-pointer hover:text-white/80 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none"> + <span>📆</span> Later + <span class="text-sm font-normal text-white/40">({{len .LaterItems}} items)</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="space-y-2 relative pl-4 border-l border-white/10 ml-2"> + {{range .LaterItems}} + {{template "timeline-item" .}} + {{end}} + </div> + </details> + {{end}} + + {{if and (not .TodayItems) (not .TomorrowItems) (not .LaterItems)}} + <div class="text-center py-8 text-white/50"> + <p>No items found for the selected range.</p> + </div> + {{end}} + +</div> +{{end}} + +{{define "timeline-item"}} +<div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 relative {{if .IsCompleted}}opacity-60{{end}}"> + <!-- Time Indicator --> + <div class="absolute -left-[21px] top-4 w-2.5 h-2.5 rounded-full + {{if eq .Type "event"}}bg-blue-500{{else if eq .Type "meal"}}bg-orange-500{{else if eq .Type "task"}}bg-green-500{{else}}bg-purple-500{{end}}"> + </div> + + <div class="flex items-start gap-3 p-3"> + <!-- Checkbox for tasks/cards --> + {{if or (eq .Type "task") (eq .Type "card")}} + <input type="checkbox" + {{if .IsCompleted}}checked{{end}} + hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}" + hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}' + 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}} - <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 relative"> - <!-- Time Indicator --> - <div class="absolute -left-[21px] top-4 w-2.5 h-2.5 rounded-full - {{if eq .Type "event"}}bg-blue-500{{else if eq .Type "meal"}}bg-orange-500{{else if eq .Type "task"}}bg-green-500{{else}}bg-purple-500{{end}}"> + <div class="flex flex-col items-center min-w-[60px] text-xs text-white/50 pt-0.5"> + <span class="font-medium text-white/80">{{.Time.Format "3:04 PM"}}</span> + {{if .EndTime}} + <span class="text-[10px] opacity-70">{{.EndTime.Format "3:04 PM"}}</span> + {{end}} + </div> + + <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 {{if .IsCompleted}}line-through text-white/50{{end}}">{{.Title}}</h3> + {{if .URL}} + <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white flex-shrink-0"> + <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> + </svg> + </a> + {{end}} </div> - <div class="flex items-start gap-3 p-3"> - <div class="flex flex-col items-center min-w-[60px] text-xs text-white/50 pt-0.5"> - <span class="font-medium text-white/80">{{.Time.Format "3:04 PM"}}</span> - {{if .EndTime}} - <span class="text-[10px] opacity-70">{{.EndTime.Format "3:04 PM"}}</span> - {{end}} - </div> - - <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">{{.Title}}</h3> - {{if .URL}} - <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white flex-shrink-0"> - <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> - </svg> - </a> - {{end}} - </div> - - {{if .Description}} - <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p> - {{end}} + {{if .Description}} + <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p> + {{end}} - <div class="flex items-center gap-2 mt-2"> - <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider"> - {{.Type}} - </span> - </div> - </div> + <div class="flex items-center gap-2 mt-2"> + <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider"> + {{.Type}} + </span> + {{if .IsCompleted}} + <span class="text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-400 uppercase tracking-wider"> + done + </span> + {{end}} </div> </div> - {{end}} - - {{if ne $currentDay ""}} - </div> <!-- Close last day items --> - </div> <!-- Close last day container --> - {{else}} - <div class="text-center py-8 text-white/50"> - <p>No items found for the selected range.</p> - </div> - {{end}} - + </div> </div> {{end}} |