blob: 5f325309d9ce4ecc11dc4366aca3cfe6b7bd63dd (
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
|
{{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}}
<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>
{{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>
{{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>
</div>
</div>
{{end}}
|
