summaryrefslogtreecommitdiff
path: root/web/templates
diff options
context:
space:
mode:
authorPeter Stone <thepeterstone@gmail.com>2026-01-21 22:53:37 -1000
committerPeter Stone <thepeterstone@gmail.com>2026-01-21 22:53:37 -1000
commit583f90c5dedf0235fa45557359b0e6e7dd62b0f0 (patch)
tree304e4527b6668669197fc9ffdf2ffc87566478f0 /web/templates
parentdd4689a71de8f1c0b5a2d483827411a9645ad66a (diff)
Implement 10 UI/UX improvements and bug fixes
- Fix outdated Todoist task URL format (showTask -> app/task) - Fix quick-add date defaulting to tomorrow in evening (client-side JS) - Add tap-to-expand for task descriptions with checkbox completion - Add visual differentiation: overdue (red), future (gray), today (normal) - Sort tasks by urgency: overdue > today-timed > today-allday > future - Keep completed tasks visible with strikethrough until refresh - Add random Unsplash landscape background with content overlay - Hide future tasks behind collapsible fold with count badge - Unified modal menu for Quick Add + Bug Report (Ctrl+K shortcut) - Click task title to edit description in modal Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'web/templates')
-rw-r--r--web/templates/index.html130
-rw-r--r--web/templates/partials/tasks-tab.html89
2 files changed, 191 insertions, 28 deletions
diff --git a/web/templates/index.html b/web/templates/index.html
index 18aa56b..6732ffd 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -7,8 +7,8 @@
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/css/output.css">
</head>
-<body class="min-h-screen" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
- <div class="content-max-width py-3 sm:py-6">
+<body class="min-h-screen bg-gray-800" style="background-image: url('{{.BackgroundURL}}'); background-size: cover; background-position: center; background-attachment: fixed;" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
+ <div class="content-max-width py-3 sm:py-6 bg-white/80 backdrop-blur-sm rounded-lg my-4 sm:my-6 shadow-lg">
<!-- Minimal Header -->
<header class="flex mb-4 sm:mb-6 justify-between items-center no-print">
<button onclick="refreshData()"
@@ -66,26 +66,66 @@
</div>
</div>
- <!-- Bug Report Button -->
- <button onclick="document.getElementById('bug-modal').classList.remove('hidden')"
- class="fixed bottom-4 right-4 bg-red-500 hover:bg-red-600 text-white p-3 rounded-full shadow-lg no-print"
- title="Report a bug">
- 🐛
+ <!-- Unified Action Button (FAB) -->
+ <button onclick="openActionModal()"
+ class="fixed bottom-4 right-4 bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-full shadow-lg no-print"
+ title="Quick Actions (Ctrl+K)">
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+ </svg>
</button>
- <!-- Bug Report Modal -->
- <div id="bug-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+ <!-- Unified Action Modal -->
+ <div id="action-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
- <h2 class="font-semibold text-gray-900">Report Bug</h2>
- <button onclick="document.getElementById('bug-modal').classList.add('hidden')"
- class="text-gray-400 hover:text-gray-600">✕</button>
+ <div class="flex gap-2">
+ <button onclick="switchActionTab('add')" id="tab-add"
+ class="px-3 py-1 rounded-lg text-sm font-medium bg-primary-100 text-primary-700">
+ ✓ Quick Add
+ </button>
+ <button onclick="switchActionTab('bug')" id="tab-bug"
+ class="px-3 py-1 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100">
+ 🐛 Bug
+ </button>
+ </div>
+ <button onclick="closeActionModal()" class="text-gray-400 hover:text-gray-600">✕</button>
+ </div>
+
+ <!-- Quick Add Tab -->
+ <div id="panel-add" class="p-4">
+ <form hx-post="/unified-add"
+ hx-swap="none"
+ hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); htmx.trigger(document.body, 'refresh-tasks'); }">
+ <input type="text"
+ name="title"
+ placeholder="Task name..."
+ class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3"
+ required
+ autofocus>
+ <div class="flex gap-2 mb-3">
+ <input type="date"
+ name="due_date"
+ id="modal-add-date"
+ class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm">
+ <select name="source" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
+ <option value="todoist">Todoist</option>
+ <option value="trello">Trello</option>
+ </select>
+ </div>
+ <button type="submit"
+ class="w-full bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
+ Add Task
+ </button>
+ </form>
</div>
- <div class="p-4">
+
+ <!-- Bug Report Tab -->
+ <div id="panel-bug" class="p-4 hidden">
<form hx-post="/bugs"
hx-target="#bug-list"
hx-swap="innerHTML"
- hx-on::after-request="if(event.detail.successful) this.reset()">
+ hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); }">
<textarea name="description"
placeholder="Describe the bug..."
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3 h-24"
@@ -98,7 +138,7 @@
<div class="mt-4 border-t border-gray-200 pt-4">
<h3 class="text-sm font-medium text-gray-700 mb-2">Recent Reports</h3>
<div id="bug-list"
- class="max-h-48 overflow-y-auto"
+ class="max-h-32 overflow-y-auto"
hx-get="/bugs"
hx-trigger="load">
<p class="text-gray-400 text-sm">Loading...</p>
@@ -108,6 +148,66 @@
</div>
</div>
+ <script>
+ function openActionModal() {
+ document.getElementById('action-modal').classList.remove('hidden');
+ var dateInput = document.getElementById('modal-add-date');
+ if (dateInput) {
+ var d = new Date();
+ dateInput.value = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+ }
+ setTimeout(function() {
+ var input = document.querySelector('#panel-add input[name="title"]');
+ if (input && !document.getElementById('panel-add').classList.contains('hidden')) input.focus();
+ }, 100);
+ }
+ function closeActionModal() {
+ document.getElementById('action-modal').classList.add('hidden');
+ }
+ function switchActionTab(tab) {
+ document.getElementById('panel-add').classList.toggle('hidden', tab !== 'add');
+ document.getElementById('panel-bug').classList.toggle('hidden', tab !== 'bug');
+ document.getElementById('tab-add').classList.toggle('bg-primary-100', tab === 'add');
+ document.getElementById('tab-add').classList.toggle('text-primary-700', tab === 'add');
+ document.getElementById('tab-add').classList.toggle('text-gray-600', tab !== 'add');
+ document.getElementById('tab-bug').classList.toggle('bg-red-100', tab === 'bug');
+ document.getElementById('tab-bug').classList.toggle('text-red-700', tab === 'bug');
+ document.getElementById('tab-bug').classList.toggle('text-gray-600', tab !== 'bug');
+ }
+ // Keyboard shortcut: Ctrl+K or Cmd+K
+ document.addEventListener('keydown', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+ e.preventDefault();
+ var modal = document.getElementById('action-modal');
+ if (modal.classList.contains('hidden')) {
+ openActionModal();
+ } else {
+ closeActionModal();
+ }
+ }
+ if (e.key === 'Escape') {
+ closeActionModal();
+ closeTaskModal();
+ }
+ });
+ function closeTaskModal() {
+ document.getElementById('task-edit-modal').classList.add('hidden');
+ }
+ </script>
+
+ <!-- Task Edit Modal -->
+ <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+ <h2 class="font-semibold text-gray-900">Edit Task</h2>
+ <button onclick="closeTaskModal()" class="text-gray-400 hover:text-gray-600">✕</button>
+ </div>
+ <div id="task-edit-content">
+ <p class="p-4 text-gray-500 text-sm">Loading...</p>
+ </div>
+ </div>
+ </div>
+
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/app.js"></script>
</body>
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index 2a89a40..afbbe2c 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -10,7 +10,7 @@
onclick="document.getElementById('quick-add-form').classList.toggle('hidden')"
class="w-full p-3 sm:p-4 text-left flex justify-between items-center">
<span class="font-semibold text-gray-900">+ Quick Add</span>
- <span class="text-gray-400 text-sm">tap to expand</span>
+ <svg class="w-4 h-4 text-gray-400" 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>
</button>
<form id="quick-add-form"
class="hidden p-3 sm:p-4 pt-0 border-t border-gray-100"
@@ -28,8 +28,15 @@
<div>
<input type="date"
name="due_date"
- value="{{.Today}}"
+ id="quick-add-date"
class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500">
+ <script>
+ (function() {
+ var d = new Date();
+ var dateStr = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+ document.getElementById('quick-add-date').value = dateStr;
+ })();
+ </script>
</div>
<div>
<select name="source"
@@ -73,18 +80,23 @@
{{if .Atoms}}
<div class="space-y-2">
{{range .Atoms}}
- <div class="task-item bg-white rounded-lg p-3 sm:p-4 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} {{if .IsOverdue}}opacity-50{{end}}"
- hx-post="/complete-atom"
- hx-trigger="click"
- hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
- hx-target="this"
- hx-swap="outerHTML"
- hx-confirm="Mark as complete?">
- <div class="flex items-start gap-2 sm:gap-3">
+ <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} {{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"
+ hx-post="/complete-atom"
+ hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
+ hx-target="closest .task-item"
+ hx-swap="outerHTML"
+ class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
<span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between gap-2">
- <h3 class="text-sm font-medium {{if .IsOverdue}}text-gray-500{{else}}text-gray-900{{end}} break-words">{{.Title}}</h3>
+ <h3 class="text-sm {{if .IsOverdue}}text-red-600 font-semibold{{else if .IsFuture}}text-gray-400 font-normal{{else}}text-gray-900 font-medium{{end}} break-words cursor-pointer hover:underline"
+ hx-get="/tasks/detail?id={{.ID}}&source={{.Source}}"
+ hx-target="#task-edit-content"
+ hx-swap="innerHTML"
+ onclick="document.getElementById('task-edit-modal').classList.remove('hidden')">{{.Title}}</h3>
{{if .URL}}
<a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0" onclick="event.stopPropagation()">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -95,21 +107,72 @@
</div>
<div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
{{if .DueDate}}
- <span class="{{if .IsOverdue}}text-red-400{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+ <span class="{{if .IsOverdue}}text-red-500 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
{{end}}
{{if gt .Priority 2}}
<span class="text-red-500 font-medium">P{{.Priority}}</span>
{{end}}
+ {{if .Description}}
+ <span class="text-gray-400">+details</span>
+ {{end}}
</div>
</div>
</div>
+ {{if .Description}}
+ <details class="border-t border-gray-100">
+ <summary class="px-3 sm:px-4 py-2 text-xs text-gray-500 cursor-pointer hover:bg-gray-50">Tap to expand</summary>
+ <div class="px-3 sm:px-4 pb-3 text-sm text-gray-600">{{.Description}}</div>
+ </details>
+ {{end}}
</div>
{{end}}
</div>
{{else}}
<div class="bg-white/50 rounded-lg p-6 text-center">
- <p class="text-gray-500 text-sm">No tasks found.</p>
+ <p class="text-gray-500 text-sm">No current tasks.</p>
</div>
{{end}}
+
+ <!-- Future Tasks (Collapsed by default) -->
+ {{if .FutureAtoms}}
+ <details class="mt-4">
+ <summary class="bg-white/70 rounded-lg p-3 cursor-pointer hover:bg-white/90 transition-colors text-sm text-gray-600 flex items-center justify-between">
+ <span>+{{len .FutureAtoms}} later</span>
+ <svg class="w-4 h-4 transform transition-transform" 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 mt-2">
+ {{range .FutureAtoms}}
+ <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} opacity-60">
+ <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
+ <input type="checkbox"
+ hx-post="/complete-atom"
+ hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
+ hx-target="closest .task-item"
+ hx-swap="outerHTML"
+ class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+ <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
+ <div class="flex-1 min-w-0">
+ <div class="flex items-start justify-between gap-2">
+ <h3 class="text-sm text-gray-400 font-normal break-words">{{.Title}}</h3>
+ {{if .URL}}
+ <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 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 flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+ {{if .DueDate}}
+ <span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+ {{end}}
+ </div>
+ </div>
+ </div>
+ </div>
+ {{end}}
+ </div>
+ </details>
+ {{end}}
</div>
{{end}}
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 09:15:35 +0000