blob: ba9aa80f69aa6689a27424e41b56adac496d842f (
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
{{define "tasks-tab"}}
<div class="space-y-6"
hx-get="/tabs/tasks"
hx-trigger="refresh-tasks from:body"
hx-target="#tab-content"
hx-swap="innerHTML">
<!-- Quick Add Form -->
<section class="bg-white rounded-lg p-4 shadow-sm">
<h3 class="text-lg font-semibold text-gray-900 mb-3">Quick Add</h3>
<form hx-post="/unified-add"
hx-swap="none"
hx-on::after-request="if(event.detail.successful) { this.reset(); document.getElementById('trello-fields').style.display = 'none'; }">
<div class="flex flex-wrap gap-2 items-end">
<div class="flex-1 min-w-[200px]">
<input type="text"
name="title"
placeholder="Task name..."
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
required>
</div>
<div>
<input type="date"
name="due_date"
class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500">
</div>
<div>
<select name="source"
class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500"
onchange="document.getElementById('trello-fields').style.display = this.value === 'trello' ? 'flex' : 'none'">
<option value="todoist">Todoist</option>
<option value="trello">Trello</option>
</select>
</div>
<button type="submit"
class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors font-medium">
Add
</button>
</div>
<!-- Trello Fields (Hidden by default) -->
<div id="trello-fields" class="flex flex-wrap gap-2 mt-3" style="display: none;">
<div>
<select name="board_id"
class="border border-gray-300 rounded-lg px-3 py-2 text-sm"
hx-get="/partials/lists"
hx-target="#list-select"
hx-trigger="change"
hx-swap="innerHTML">
<option value="">Select Board...</option>
{{range .Boards}}
<option value="{{.ID}}">{{.Name}}</option>
{{end}}
</select>
</div>
<div>
<select id="list-select" name="list_id" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
<option value="">Select List...</option>
</select>
</div>
</div>
</form>
</section>
<!-- Unified Tasks Section -->
<section>
<h2 class="section-header mb-6">
<span class="section-accent bg-gradient-to-r from-red-500 to-blue-500"></span>
Upcoming Tasks
</h2>
{{if .Atoms}}
<div class="space-y-4">
{{range .Atoms}}
<div class="task-item bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}}">
<div class="flex items-start gap-4">
<!-- Checkbox -->
<div class="pt-1">
<input type="checkbox"
class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
hx-post="/complete-atom"
hx-trigger="change"
hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
hx-target="closest .task-item"
hx-swap="outerHTML">
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<span class="text-2xl">{{.SourceIcon}}</span>
<h3 class="text-lg font-semibold text-gray-900">{{.Title}}</h3>
</div>
{{if .URL}}
<a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 transition-colors">
<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="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-sm text-gray-600 mb-3">{{.Description}}</p>
{{end}}
<div class="flex items-center gap-4 text-sm text-gray-500">
{{if .DueDate}}
<div class="flex items-center gap-1">
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span>{{.DueDate.Format "Jan 2, 3:04 PM"}}</span>
</div>
{{end}}
<div class="flex items-center gap-1">
<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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
<span>{{if eq .Source "trello"}}Trello{{else if eq .Source "todoist"}}Todoist{{else}}{{.Source}}{{end}}</span>
</div>
{{if gt .Priority 2}}
<div class="flex items-center gap-1 text-red-600 font-medium">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"></path>
</svg>
<span>Priority {{.Priority}}</span>
</div>
{{end}}
</div>
</div>
</div>
</div>
{{end}}
</div>
{{else}}
<div class="bg-gray-50 rounded-lg p-8 text-center">
<p class="text-gray-600">No upcoming tasks found.</p>
</div>
{{end}}
</section>
</div>
{{end}}
|
