blob: 8486ab7a571008f4caffcf60e8c5497067b636a7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
{{define "timeline-tab"}}
<div class="space-y-6 text-shadow-sm"
hx-get="/tabs/timeline"
hx-trigger="refresh-tasks from:body"
hx-target="#tab-content"
hx-swap="innerHTML">
<!-- 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> {{.TodayLabel}}
</h2>
<div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
{{range .TodayItems}}
{{template "timeline-item" .}}
{{end}}
</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> {{.TomorrowLabel}}
<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> {{.LaterLabel}}
<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}}
{{/* Only show time if it's not midnight (12:00 AM = all-day/no specific time) */}}
{{if or (ne .Time.Hour 0) (ne .Time.Minute 0)}}
<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>
{{end}}
<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>
{{if .Description}}
<p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p>
{{end}}
{{/* Only show type badge for non-task items, and done badge if completed */}}
{{if or (ne .Type "task") .IsCompleted}}
<div class="flex items-center gap-2 mt-2">
{{if ne .Type "task"}}
<span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider">
{{.Type}}
</span>
{{end}}
{{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>
{{end}}
</div>
</div>
</div>
{{end}}
|
