summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/static/js/app.js58
-rw-r--r--web/templates/index.html116
-rw-r--r--web/templates/partials/shopping-tab.html32
-rw-r--r--web/templates/partials/tasks-tab.html4
-rw-r--r--web/templates/partials/timeline-tab.html162
5 files changed, 273 insertions, 99 deletions
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 52d0c91..6646400 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -207,3 +207,61 @@ function toggleTask(taskId) {
console.log('Toggle task:', taskId);
// To be implemented in Phase 2
}
+
+// Mobile Swipe Navigation
+(function() {
+ let touchStartX = 0;
+ let touchEndX = 0;
+ const SWIPE_THRESHOLD = 50; // Minimum px for a swipe
+
+ // Get ordered list of tab names (main tabs only for swipe)
+ const TAB_ORDER = ['timeline', 'shopping', 'tasks', 'planning', 'meals'];
+
+ function handleSwipe() {
+ const swipeDistance = touchEndX - touchStartX;
+
+ if (Math.abs(swipeDistance) < SWIPE_THRESHOLD) {
+ return; // Not a significant swipe
+ }
+
+ const currentIndex = TAB_ORDER.indexOf(currentTab);
+ if (currentIndex === -1) return;
+
+ let newIndex;
+ if (swipeDistance > 0) {
+ // Swiped right -> previous tab
+ newIndex = currentIndex - 1;
+ } else {
+ // Swiped left -> next tab
+ newIndex = currentIndex + 1;
+ }
+
+ // Bounds check
+ if (newIndex < 0 || newIndex >= TAB_ORDER.length) {
+ return;
+ }
+
+ const newTab = TAB_ORDER[newIndex];
+ const tabButton = document.querySelector(`[hx-get="/tabs/${newTab}"]`);
+
+ if (tabButton) {
+ console.log(`Swipe navigation: ${currentTab} -> ${newTab}`);
+ tabButton.click();
+ }
+ }
+
+ // Set up touch event listeners on the tab content area
+ document.addEventListener('DOMContentLoaded', function() {
+ const tabContent = document.getElementById('tab-content');
+ if (!tabContent) return;
+
+ tabContent.addEventListener('touchstart', function(e) {
+ touchStartX = e.changedTouches[0].screenX;
+ }, { passive: true });
+
+ tabContent.addEventListener('touchend', function(e) {
+ touchEndX = e.changedTouches[0].screenX;
+ handleSwipe();
+ }, { passive: true });
+ });
+})();
diff --git a/web/templates/index.html b/web/templates/index.html
index b55f348..f4c0b59 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -7,8 +7,23 @@
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/css/output.css">
<style>
+ :root {
+ --panel-bg: rgba(0, 0, 0, 0.4);
+ --card-bg: rgba(255, 255, 255, 0.05);
+ --card-bg-hover: rgba(255, 255, 255, 0.1);
+ --input-bg: rgba(0, 0, 0, 0.4);
+ --modal-bg: rgba(0, 0, 0, 0.8);
+ --modal-overlay: rgba(0, 0, 0, 0.7);
+ }
.text-shadow { text-shadow: 0 0 8px black, 0 0 8px black; }
.text-shadow-sm { text-shadow: 0 0 4px black; }
+ /* CSS variable-based backgrounds */
+ .bg-panel { background-color: var(--panel-bg); }
+ .bg-card { background-color: var(--card-bg); }
+ .bg-card-hover:hover { background-color: var(--card-bg-hover); }
+ .bg-input { background-color: var(--input-bg); }
+ .bg-modal { background-color: var(--modal-bg); }
+ .bg-modal-overlay { background-color: var(--modal-overlay); }
</style>
</head>
<body class="min-h-screen bg-gray-900 text-white" style="background-image: url('{{.BackgroundURL}}'); background-size: cover; background-position: center; background-attachment: fixed;" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
@@ -31,31 +46,8 @@
<!-- Tab Navigation -->
<div class="mb-4 sm:mb-6 no-print">
- <nav class="flex space-x-1 bg-black/50 backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
- <button
- class="tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
- hx-get="/tabs/tasks"
- hx-target="#tab-content"
- hx-push-url="?tab=tasks"
- onclick="setActiveTab(this)">
- ✓ Tasks
- </button>
- <button
- class="tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}"
- hx-get="/tabs/planning"
- hx-target="#tab-content"
- hx-push-url="?tab=planning"
- onclick="setActiveTab(this)">
- 📋 Planning
- </button>
- <button
- class="tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}"
- hx-get="/tabs/meals"
- hx-target="#tab-content"
- hx-push-url="?tab=meals"
- onclick="setActiveTab(this)">
- 🍽️ Meals
- </button>
+ <nav class="flex space-x-1 bg-panel backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
+ <!-- Main Tabs -->
<button
class="tab-button {{if eq .ActiveTab "timeline"}}tab-button-active{{end}}"
hx-get="/tabs/timeline"
@@ -77,6 +69,44 @@
target="_blank">
🌋 Conditions
</a>
+
+ <!-- Details Dropdown -->
+ <div class="relative" id="details-dropdown">
+ <button
+ class="tab-button {{if or (eq .ActiveTab "tasks") (eq .ActiveTab "planning") (eq .ActiveTab "meals")}}tab-button-active{{end}}"
+ onclick="toggleDetailsDropdown(event)">
+ 📁 Details
+ <svg class="w-3 h-3 ml-1 inline" 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>
+ <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-panel backdrop-blur-sm rounded-lg p-1 min-w-[140px] z-20">
+ <button
+ class="w-full text-left tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
+ hx-get="/tabs/tasks"
+ hx-target="#tab-content"
+ hx-push-url="?tab=tasks"
+ onclick="setActiveTab(this); closeDetailsDropdown();">
+ ✓ Tasks
+ </button>
+ <button
+ class="w-full text-left tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}"
+ hx-get="/tabs/planning"
+ hx-target="#tab-content"
+ hx-push-url="?tab=planning"
+ onclick="setActiveTab(this); closeDetailsDropdown();">
+ 📋 Planning
+ </button>
+ <button
+ class="w-full text-left tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}"
+ hx-get="/tabs/meals"
+ hx-target="#tab-content"
+ hx-push-url="?tab=meals"
+ onclick="setActiveTab(this); closeDetailsDropdown();">
+ 🍽️ Meals
+ </button>
+ </div>
+ </div>
</nav>
</div>
@@ -102,8 +132,8 @@
</button>
<!-- Unified Action Modal -->
- <div id="action-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
- <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+ <div id="action-modal" class="hidden fixed inset-0 bg-modal-overlay flex items-center justify-center p-4 z-50">
+ <div class="bg-modal backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
<div class="p-4 border-b border-white/10 flex justify-between items-center">
<div class="flex gap-2">
<button onclick="switchActionTab('add')" id="tab-add"
@@ -130,15 +160,15 @@
<input type="text"
name="title"
placeholder="Task name..."
- class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
+ class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
required
autofocus>
<div class="flex gap-2 mb-3">
<input type="date"
name="due_date"
id="modal-add-date"
- class="flex-1 bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
- <select name="source" class="bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
+ class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
+ <select name="source" class="bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
<option value="todoist">Todoist</option>
<option value="trello">Trello</option>
</select>
@@ -159,11 +189,11 @@
<input type="text"
name="title"
placeholder="Item name..."
- class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
+ class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
required>
<select name="list_id"
id="shopping-list-select"
- class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white mb-3"
+ class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white mb-3"
required>
<option value="">Loading stores...</option>
</select>
@@ -182,7 +212,7 @@
hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); }">
<textarea name="description"
placeholder="Describe the bug..."
- class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-24"
+ class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-24"
required></textarea>
<button type="submit"
class="w-full bg-red-900/50 hover:bg-red-900/70 text-red-300 px-4 py-2 rounded-lg text-sm font-medium">
@@ -272,11 +302,27 @@
function closeTaskModal() {
document.getElementById('task-edit-modal').classList.add('hidden');
}
+ // Details dropdown functions
+ function toggleDetailsDropdown(e) {
+ e.stopPropagation();
+ var menu = document.getElementById('details-menu');
+ menu.classList.toggle('hidden');
+ }
+ function closeDetailsDropdown() {
+ document.getElementById('details-menu').classList.add('hidden');
+ }
+ // Close dropdown when clicking outside
+ document.addEventListener('click', function(e) {
+ var dropdown = document.getElementById('details-dropdown');
+ if (dropdown && !dropdown.contains(e.target)) {
+ closeDetailsDropdown();
+ }
+ });
</script>
<!-- Task Edit Modal -->
- <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
- <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+ <div id="task-edit-modal" class="hidden fixed inset-0 bg-modal-overlay flex items-center justify-center p-4 z-50">
+ <div class="bg-modal backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
<div class="p-4 border-b border-white/10 flex justify-between items-center">
<h2 class="font-medium text-white">Edit Task</h2>
<button onclick="closeTaskModal()" class="text-white/40 hover:text-white">✕</button>
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}}
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 09:05:22 +0000