From 0dd2bd3625d11272f4d9cc3045330105be6f964b Mon Sep 17 00:00:00 2001
From: calboo <cal@rabooboo.de>
Date: Tue, 10 Feb 2026 20:08:46 +0100
Subject: [PATCH] logbook search

---
 templates/logbook.html        |  45 +++++++++++++--
 templates/logbook_detail.html |  44 ++++++++++-----
 templates/tasks.html          | 100 ++++++++++++++++++++--------------
 3 files changed, 128 insertions(+), 61 deletions(-)

diff --git a/templates/logbook.html b/templates/logbook.html
index a1305aa..3d47ed4 100644
--- a/templates/logbook.html
+++ b/templates/logbook.html
@@ -1,19 +1,29 @@
 {% extends "layout.html" %}
 {% block content %}
-    <h2>Logbook</h2>
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+        <h2 style="margin: 0;">Logbook</h2>
+    </div>
+
+    <!-- Search Bar -->
+    <div style="margin-bottom: 2rem;">
+        <input type="text" id="logSearchInput" placeholder="Search logbook (Activity, Subcategory, Notes)..." onkeyup="filterLog()" 
+               style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; padding-left: 36px;">
+    </div>
+
     {% if not log %}
         <p>No activities recorded yet.</p>
     {% else %}
+        <div id="logbook-container">
         {% for entry in log %}
         <!-- Wrapped whole card in a link to the detail view -->
-        <a href="{{ url_for('log_entry_detail', entry_id=entry._id) }}" style="text-decoration: none; color: inherit; display: block;">
+        <a href="{{ url_for('log_entry_detail', entry_id=entry._id) }}" class="log-entry-item" style="text-decoration: none; color: inherit; display: block;">
             <div class="card" style="border-left: 5px solid {{ entry.activity.color }}; transition: transform 0.1s;">
                 <div style="display: flex; justify-content: space-between; align-items: center;">
                     <div>
-                        <h3 style="margin: 0;">
+                        <h3 style="margin: 0;" class="entry-title">
                             {{ entry.activity.name }}
                             {% if entry.subcategory %}
-                                <span style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
+                                <span class="entry-subcat" style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
                                     {{ entry.subcategory }}
                                 </span>
                             {% endif %}
@@ -22,7 +32,10 @@
                             {{ entry.start_time.strftime('%Y-%m-%d %H:%M') }} - {{ entry.end_time.strftime('%H:%M') }}
                         </small>
                         {% if entry.note %}
-                            <p style="margin: 5px 0; font-style: italic; color: #555;">"{{ entry.note }}"</p>
+                            <p class="entry-note" style="margin: 5px 0; font-style: italic; color: #555;">"{{ entry.note }}"</p>
+                        {% else %}
+                            <!-- Hidden span for consistent JS selection if note empty -->
+                            <span class="entry-note" style="display:none;"></span>
                         {% endif %}
                     </div>
                     <div style="font-weight: bold; font-size: 1.2rem;">
@@ -43,8 +56,30 @@
             </div>
         </a>
         {% endfor %}
+        </div>
     {% endif %}
     
+    <script>
+        function filterLog() {
+            const input = document.getElementById('logSearchInput');
+            const filter = input.value.toLowerCase();
+            const items = document.getElementsByClassName('log-entry-item');
+
+            for (let i = 0; i < items.length; i++) {
+                const title = items[i].querySelector('.entry-title').textContent || "";
+                const note = items[i].querySelector('.entry-note').textContent || "";
+                // Combine text content for searching
+                const textValue = (title + " " + note).toLowerCase();
+                
+                if (textValue.indexOf(filter) > -1) {
+                    items[i].style.display = "";
+                } else {
+                    items[i].style.display = "none";
+                }
+            }
+        }
+    </script>
+    
     <style>
         /* Small hover effect to indicate clickability */
         a .card:hover {
diff --git a/templates/logbook_detail.html b/templates/logbook_detail.html
index 8fc327a..d702c63 100644
--- a/templates/logbook_detail.html
+++ b/templates/logbook_detail.html
@@ -69,26 +69,40 @@
 <div class="card">
     <h3>Tasks in this Session</h3>
     {% if not tasks %}
-        <p style="color: #999;">No tasks were tracked for this session.</p>
+        <p style="color: var(--text-secondary);">No tasks were tracked for this session.</p>
     {% else %}
-        <ul style="list-style: none; padding: 0;">
+        <div class="checklist-container">
         {% for task in tasks %}
-            <li style="border-bottom: 1px solid #eee; padding: 15px 0; display: flex; align-items: center;">
-                <span style="margin-right: 15px; font-size: 1.2rem;">
-                    {% if task.status == 'completed' %}Done{% else %}Open{% endif %}
-                </span>
-                <div style="flex-grow: 1;">
-                    <a href="{{ url_for('task_detail', task_id=task._id) }}" style="font-weight: bold; display: block; font-size: 1.1rem;">{{ task.name }}</a>
-                    {% if task.completed_at %}
-                        <small style="color: #27ae60;">Completed at {{ task.completed_at.strftime('%H:%M') }}</small>
-                    {% else %}
-                        <small style="color: #e67e22;">Not completed</small>
+            <div class="checklist-item {% if task.status == 'completed' %}completed{% endif %}" style="padding: 12px 0;">
+                <!-- Visual Checkbox (Read Only) -->
+                <div style="
+                    width: 18px; height: 18px; 
+                    border: 2px solid {% if task.status == 'completed' %}var(--primary-color){% else %}var(--text-secondary){% endif %}; 
+                    border-radius: 4px; 
+                    background: {% if task.status == 'completed' %}var(--primary-color){% else %}transparent{% endif %};
+                    margin-right: 12px; margin-top: 3px;
+                    display: flex; align-items: center; justify-content: center;
+                ">
+                    {% if task.status == 'completed' %}
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                     {% endif %}
                 </div>
-                <a href="{{ url_for('task_detail', task_id=task._id) }}" class="btn" style="font-size: 0.8rem; padding: 5px 10px;">View Task ></a>
-            </li>
+
+                <div style="flex-grow: 1;">
+                    <a href="{{ url_for('task_detail', task_id=task._id) }}" style="text-decoration: none; color: inherit; font-weight: 500; display: block;">
+                        {{ task.name }}
+                    </a>
+                    {% if task.completed_at %}
+                        <small style="color: var(--text-secondary); font-size: 0.8rem;">Completed at {{ task.completed_at.strftime('%H:%M') }}</small>
+                    {% endif %}
+                </div>
+                
+                <a href="{{ url_for('task_detail', task_id=task._id) }}" style="color: var(--text-secondary); text-decoration: none; font-size: 1.2rem; line-height: 1;">
+                    ›
+                </a>
+            </div>
         {% endfor %}
-        </ul>
+        </div>
     {% endif %}
 </div>
 {% endblock %}
diff --git a/templates/tasks.html b/templates/tasks.html
index 87d792b..c6af1bd 100644
--- a/templates/tasks.html
+++ b/templates/tasks.html
@@ -8,15 +8,21 @@
         <button class="btn" onclick="openTaskModal()">+ New Task</button>
     </div>
 
+    <!-- Search Bar -->
+    <div style="margin-bottom: 1.5rem;">
+        <input type="text" id="taskSearchInput" placeholder="Search tasks..." onkeyup="applyFilters()" 
+               style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; padding-left: 36px;">
+    </div>
+
     <!-- Filters -->
     <div style="border-bottom: 1px solid var(--border-dim); margin-bottom: 2rem; padding-bottom: 0.5rem; display: flex; gap: 20px;">
-        <div class="filter-tab active" id="filter-open" onclick="setFilter('open')" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">
+        <div class="filter-tab active" id="filter-open" onclick="setFilter('open')" data-filter="open" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">
             Open
         </div>
-        <div class="filter-tab" id="filter-today" onclick="setFilter('today')" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
+        <div class="filter-tab" id="filter-today" onclick="setFilter('today')" data-filter="today" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
             Due Today
         </div>
-        <div class="filter-tab" id="filter-completed" onclick="setFilter('completed')" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
+        <div class="filter-tab" id="filter-completed" onclick="setFilter('completed')" data-filter="completed" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
             Completed
         </div>
     </div>
@@ -41,38 +47,37 @@
                             title="Add task to {{ act.name }}">+</button>
                 </div>
 
-                {% if act_tasks %}
-                    <ul style="list-style: none; padding: 0; margin-top: 0;">
-                        {% for task in act_tasks %}
-                            <!-- Inline Task Row -->
-                            <li class="task-item-row" 
-                                data-due-date="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}"
-                                data-status="{{ task.status }}"
-                                style="padding: 8px 0; border-bottom: 1px solid var(--border-dim); display: flex; justify-content: space-between; align-items: center;">
-                                
-                                <div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
-                                    <a href="{{ url_for('task_detail', task_id=task._id) }}" style="text-decoration: none; color: var(--text-primary); font-weight: 500; {% if task.status == 'completed' %}text-decoration: line-through; color: var(--text-secondary);{% endif %}">
-                                        {{ task.name }}
-                                    </a>
-                                    {% if task.due_date %}
-                                        <span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">
-                                            {{ task.due_date.strftime('%d. %b %H:%M') }}
-                                        </span>
-                                    {% endif %}
-                                </div>
-                                
-                                <div style="display: flex; gap: 10px;">
-                                    <form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin: 0;">
-                                        <input type="hidden" name="note" value="{{ task.name }}">
-                                        <button type="submit" title="Start Timer" style="background: none; border: 1px solid var(--border-dim); cursor: pointer; border-radius: 4px; padding: 2px 6px; color: var(--text-secondary); font-size: 0.8rem;">
-                                            ▶
-                                        </button>
-                                    </form>
-                                </div>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                {% endif %}
+                <!-- Always render the UL, just empty if no tasks initially -->
+                <ul style="list-style: none; padding: 0; margin-top: 0;">
+                    {% for task in act_tasks %}
+                        <!-- Inline Task Row -->
+                        <li class="task-item-row" 
+                            data-due-date="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}"
+                            data-status="{{ task.status }}"
+                            style="padding: 8px 0; border-bottom: 1px solid var(--border-dim); display: flex; justify-content: space-between; align-items: center;">
+                            
+                            <div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
+                                <a href="{{ url_for('task_detail', task_id=task._id) }}" class="task-name-link" style="text-decoration: none; color: var(--text-primary); font-weight: 500; {% if task.status == 'completed' %}text-decoration: line-through; color: var(--text-secondary);{% endif %}">
+                                    {{ task.name }}
+                                </a>
+                                {% if task.due_date %}
+                                    <span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">
+                                        {{ task.due_date.strftime('%d. %b %H:%M') }}
+                                    </span>
+                                {% endif %}
+                            </div>
+                            
+                            <div style="display: flex; gap: 10px;">
+                                <form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin: 0;">
+                                    <input type="hidden" name="note" value="{{ task.name }}">
+                                    <button type="submit" title="Start Timer" style="background: none; border: 1px solid var(--border-dim); cursor: pointer; border-radius: 4px; padding: 2px 6px; color: var(--text-secondary); font-size: 0.8rem;">
+                                        ▶
+                                    </button>
+                                </form>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </ul>
             </div>
         {% endfor %}
 
@@ -204,7 +209,11 @@
     });
 
     // Filtering Logic
+    let currentFilterType = 'open';
+
     function setFilter(type) {
+        currentFilterType = type;
+        
         document.querySelectorAll('.filter-tab').forEach(el => {
             el.style.color = 'var(--text-secondary)';
             el.classList.remove('active');
@@ -212,28 +221,37 @@
         document.getElementById('filter-' + type).style.color = 'var(--text-primary)';
         document.getElementById('filter-' + type).classList.add('active');
         
+        applyFilters();
+    }
+    
+    function applyFilters() {
+        const searchVal = document.getElementById('taskSearchInput').value.toLowerCase();
         const taskItems = document.querySelectorAll('.task-item-row');
         const today = new Date().toISOString().split('T')[0];
 
         taskItems.forEach(item => {
             const status = item.getAttribute('data-status');
             const dateStr = item.getAttribute('data-due-date');
+            const name = item.querySelector('.task-name-link').innerText.toLowerCase();
             
             let show = false;
             
-            if (type === 'open') {
+            // 1. Check Tabs
+            if (currentFilterType === 'open') {
                 if (status !== 'completed') show = true;
-            } else if (type === 'today') {
-                // Open tasks due today
+            } else if (currentFilterType === 'today') {
                 if (status !== 'completed' && dateStr && dateStr.startsWith(today)) show = true;
-            } else if (type === 'completed') {
+            } else if (currentFilterType === 'completed') {
                 if (status === 'completed') show = true;
             }
             
+            // 2. Check Search
+            if (show && searchVal) {
+                if (!name.includes(searchVal)) show = false;
+            }
+            
             item.style.display = show ? 'flex' : 'none';
         });
-        
-        // Removed the group hiding logic block here to ensure Activity headers always stay visible
     }
     
     // Initialize filter