Add "Hide Completed" toggle to task filter bar

css/styles.css

@@ -1043,6 +1043,15 @@ html, body {
     background: #d1d5db;
 }
 
+.btn-secondary.active {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-secondary.active:hover {
+    background: #2563eb;
+}
+
 .btn-danger {
     background: var(--danger-color);
     color: white;

index.html

@@ -147,6 +147,7 @@ <h2>Tasks</h2>
                             <option value="category">Group by Category</option>
                         </select>
                         <input type="text" id="searchTasks" class="filter-input" placeholder="Search tasks...">
+                        <button class="btn btn-secondary" id="hideCompletedBtn">👁 Hide Completed</button>
                     </div>
 
                     <!-- Task List -->

src/app.ts

@@ -26,6 +26,7 @@ class TaskManager {
     dragSrcWishId: string | null = null;
     selectedDate: Date = new Date();
     tasksExpanded: boolean = false;
+    hideCompleted: boolean = false;
     emojis: string[] = [
         // Activity
         '💪', '🏃', '🚴', '🏊', '🧘', '💃', '🕺', '⛹️',
@@ -84,6 +85,7 @@ class TaskManager {
         document.getElementById('statusFilter')!.addEventListener('change', () => this.filterTasks());
         document.getElementById('groupBySelect')!.addEventListener('change', () => this.filterTasks());
         document.getElementById('searchTasks')!.addEventListener('input', () => this.filterTasks());
+        document.getElementById('hideCompletedBtn')!.addEventListener('click', () => this.toggleHideCompleted());
 
         // Projects section
         document.getElementById('addProjectBtn')!.addEventListener('click', () => this.openProjectModal());
@@ -419,6 +421,14 @@ class TaskManager {
 
     // ========================
     // Tasks Management
+    toggleHideCompleted(): void {
+        this.hideCompleted = !this.hideCompleted;
+        const btn = document.getElementById('hideCompletedBtn')!;
+        btn.textContent = this.hideCompleted ? '👁 Show Completed' : '👁 Hide Completed';
+        btn.classList.toggle('active', this.hideCompleted);
+        this.filterTasks();
+    }
+
     // ========================
     toggleTaskView(): void {
         this.tasksExpanded = !this.tasksExpanded;
@@ -442,6 +452,9 @@ class TaskManager {
         const filtersActive = statusFilter || searchTerm;
 
         let filtered = tasks.filter(task => {
+            // Hide completed filter
+            if (this.hideCompleted && task.completed) return false;
+
             // Category filter
             if (categoryFilter && task.category !== categoryFilter) return false;