From 2476830c06b5d90b5fff9133694bcb7c127aa538 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Mar 2026 02:03:02 +0000
Subject: [PATCH 1/2] Initial plan


From dd204e879ee4aa16fa0c04d6ca10503bebea7d96 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Mar 2026 02:10:26 +0000
Subject: [PATCH 2/2] Add Group By options (Priority, Category) to tasks page

Co-authored-by: JoeProgrammer88 <7156063+JoeProgrammer88@users.noreply.github.com>
---
 e2e/app.spec.ts | 50 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html      |  5 +++++
 js/app.d.ts.map |  2 +-
 js/app.js       | 42 ++++++++++++++++++++++++++++++++++++++++-
 src/app.ts      | 39 +++++++++++++++++++++++++++++++++++++-
 5 files changed, 135 insertions(+), 3 deletions(-)

diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
index f41b46d..eae98c6 100644
--- a/e2e/app.spec.ts
+++ b/e2e/app.spec.ts
@@ -374,6 +374,56 @@ test.describe('Task Manager App', () => {
         });
     });
 
+    // ========================
+    // Task Group By
+    // ========================
+    test.describe('task group by', () => {
+        test.beforeEach(async ({ page }) => {
+            // Add tasks with different priorities and categories via localStorage
+            await page.evaluate(() => {
+                const data = JSON.parse(localStorage.getItem('taskManagerData') || '{}');
+                data.tasks = [
+                    { id: 'task-high', title: 'High Task', priority: 'high', points: 10, repeatType: 'none', completed: false, createdDate: new Date().toISOString(), category: 'Work' },
+                    { id: 'task-medium', title: 'Medium Task', priority: 'medium', points: 10, repeatType: 'none', completed: false, createdDate: new Date().toISOString(), category: 'Personal' },
+                    { id: 'task-low', title: 'Low Task', priority: 'low', points: 10, repeatType: 'none', completed: false, createdDate: new Date().toISOString() },
+                ];
+                localStorage.setItem('taskManagerData', JSON.stringify(data));
+            });
+            await page.reload();
+            await page.waitForSelector('.header');
+            await page.click('[data-tab="tasks"]');
+        });
+
+        test('should show group by dropdown', async ({ page }) => {
+            await expect(page.locator('#groupBySelect')).toBeVisible();
+        });
+
+        test('should group tasks by priority', async ({ page }) => {
+            await page.selectOption('#groupBySelect', 'priority');
+            const headers = page.locator('.task-section-header');
+            await expect(headers).toHaveCount(3);
+            await expect(headers.nth(0)).toHaveText('High Priority');
+            await expect(headers.nth(1)).toHaveText('Medium Priority');
+            await expect(headers.nth(2)).toHaveText('Low Priority');
+        });
+
+        test('should group tasks by category', async ({ page }) => {
+            await page.selectOption('#groupBySelect', 'category');
+            const headers = page.locator('.task-section-header');
+            await expect(headers).toHaveCount(3);
+            await expect(headers.nth(0)).toHaveText('Personal');
+            await expect(headers.nth(1)).toHaveText('Work');
+            await expect(headers.nth(2)).toHaveText('Ungrouped');
+        });
+
+        test('should revert to default grouping when no grouping selected', async ({ page }) => {
+            await page.selectOption('#groupBySelect', 'priority');
+            await page.selectOption('#groupBySelect', '');
+            // Default view shows no task-section-header for tasks with no due date
+            await expect(page.locator('.task-item')).toHaveCount(3);
+        });
+    });
+
     // ========================
     // Settings
     // ========================
diff --git a/index.html b/index.html
index 5638baa..76c8589 100644
--- a/index.html
+++ b/index.html
@@ -141,6 +141,11 @@ <h2>Tasks</h2>
                             <option value="completed">Completed</option>
                             <option value="overdue">Overdue</option>
                         </select>
+                        <select id="groupBySelect" class="filter-select">
+                            <option value="">No Grouping</option>
+                            <option value="priority">Group by Priority</option>
+                            <option value="category">Group by Category</option>
+                        </select>
                         <input type="text" id="searchTasks" class="filter-input" placeholder="Search tasks...">
                     </div>
 
diff --git a/js/app.d.ts.map b/js/app.d.ts.map
index e2cd5fc..9df7196 100644
--- a/js/app.d.ts.map
+++ b/js/app.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index 5a67412..9277339 100644
--- a/js/app.js
+++ b/js/app.js
@@ -65,6 +65,7 @@ class TaskManager {
         document.getElementById('taskCategoryCancel').addEventListener('click', () => this.cancelAddCategory('task'));
         document.getElementById('categoryFilter').addEventListener('change', () => this.filterTasks());
         document.getElementById('statusFilter').addEventListener('change', () => this.filterTasks());
+        document.getElementById('groupBySelect').addEventListener('change', () => this.filterTasks());
         document.getElementById('searchTasks').addEventListener('input', () => this.filterTasks());
         // Projects section
         document.getElementById('addProjectBtn').addEventListener('click', () => this.openProjectModal());
@@ -386,6 +387,7 @@ class TaskManager {
         const categoryFilter = document.getElementById('categoryFilter').value;
         const statusFilter = document.getElementById('statusFilter').value;
         const searchTerm = document.getElementById('searchTasks').value.toLowerCase();
+        const groupBy = document.getElementById('groupBySelect').value;
         const today = this.getSelectedDateStr();
         const filtersActive = statusFilter || searchTerm;
         let filtered = tasks.filter(task => {
@@ -412,7 +414,45 @@ class TaskManager {
             return;
         }
         let html = '';
-        if (filtersActive) {
+        if (groupBy === 'priority') {
+            const priorityLabels = { high: 'High Priority', medium: 'Medium Priority', low: 'Low Priority' };
+            const grouped = { high: [], medium: [], low: [], ungrouped: [] };
+            filtered.forEach(task => {
+                if (task.priority && grouped[task.priority]) {
+                    grouped[task.priority].push(task);
+                }
+                else {
+                    grouped['ungrouped'].push(task);
+                }
+            });
+            ['high', 'medium', 'low'].forEach(p => {
+                if (grouped[p].length > 0) {
+                    html += `<h3 class="task-section-header">${priorityLabels[p]}</h3>`;
+                    html += grouped[p].map(task => this.renderTaskItem(task)).join('');
+                }
+            });
+            if (grouped['ungrouped'].length > 0) {
+                html += `<h3 class="task-section-header">Ungrouped</h3>`;
+                html += grouped['ungrouped'].map(task => this.renderTaskItem(task)).join('');
+            }
+        }
+        else if (groupBy === 'category') {
+            const withCategory = filtered.filter(task => task.category);
+            const withoutCategory = filtered.filter(task => !task.category);
+            const categories = [...new Set(withCategory.map(task => task.category))].sort();
+            categories.forEach(cat => {
+                const group = withCategory.filter(task => task.category === cat);
+                if (group.length > 0) {
+                    html += `<h3 class="task-section-header">${cat}</h3>`;
+                    html += group.map(task => this.renderTaskItem(task)).join('');
+                }
+            });
+            if (withoutCategory.length > 0) {
+                html += `<h3 class="task-section-header">Ungrouped</h3>`;
+                html += withoutCategory.map(task => this.renderTaskItem(task)).join('');
+            }
+        }
+        else if (filtersActive) {
             html = filtered.map(task => this.renderTaskItem(task)).join('');
         }
         else {
diff --git a/src/app.ts b/src/app.ts
index ec346b4..054b5f4 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -82,6 +82,7 @@ class TaskManager {
         document.getElementById('taskCategoryCancel')!.addEventListener('click', () => this.cancelAddCategory('task'));
         document.getElementById('categoryFilter')!.addEventListener('change', () => this.filterTasks());
         document.getElementById('statusFilter')!.addEventListener('change', () => this.filterTasks());
+        document.getElementById('groupBySelect')!.addEventListener('change', () => this.filterTasks());
         document.getElementById('searchTasks')!.addEventListener('input', () => this.filterTasks());
 
         // Projects section
@@ -436,6 +437,7 @@ class TaskManager {
         const categoryFilter = (document.getElementById('categoryFilter') as HTMLSelectElement).value;
         const statusFilter = (document.getElementById('statusFilter') as HTMLSelectElement).value;
         const searchTerm = (document.getElementById('searchTasks') as HTMLInputElement).value.toLowerCase();
+        const groupBy = (document.getElementById('groupBySelect') as HTMLSelectElement).value;
         const today = this.getSelectedDateStr();
         const filtersActive = statusFilter || searchTerm;
 
@@ -464,7 +466,42 @@ class TaskManager {
 
         let html = '';
 
-        if (filtersActive) {
+        if (groupBy === 'priority') {
+            const priorityLabels: Record<string, string> = { high: 'High Priority', medium: 'Medium Priority', low: 'Low Priority' };
+            const grouped: Record<string, typeof filtered> = { high: [], medium: [], low: [], ungrouped: [] };
+            filtered.forEach(task => {
+                if (task.priority && grouped[task.priority]) {
+                    grouped[task.priority].push(task);
+                } else {
+                    grouped['ungrouped'].push(task);
+                }
+            });
+            (['high', 'medium', 'low'] as const).forEach(p => {
+                if (grouped[p].length > 0) {
+                    html += `<h3 class="task-section-header">${priorityLabels[p]}</h3>`;
+                    html += grouped[p].map(task => this.renderTaskItem(task)).join('');
+                }
+            });
+            if (grouped['ungrouped'].length > 0) {
+                html += `<h3 class="task-section-header">Ungrouped</h3>`;
+                html += grouped['ungrouped'].map(task => this.renderTaskItem(task)).join('');
+            }
+        } else if (groupBy === 'category') {
+            const withCategory = filtered.filter(task => task.category);
+            const withoutCategory = filtered.filter(task => !task.category);
+            const categories = [...new Set(withCategory.map(task => task.category as string))].sort();
+            categories.forEach(cat => {
+                const group = withCategory.filter(task => task.category === cat);
+                if (group.length > 0) {
+                    html += `<h3 class="task-section-header">${cat}</h3>`;
+                    html += group.map(task => this.renderTaskItem(task)).join('');
+                }
+            });
+            if (withoutCategory.length > 0) {
+                html += `<h3 class="task-section-header">Ungrouped</h3>`;
+                html += withoutCategory.map(task => this.renderTaskItem(task)).join('');
+            }
+        } else if (filtersActive) {
             html = filtered.map(task => this.renderTaskItem(task)).join('');
         } else {
             const priorityOrder: Record<string, number> = { high: 0, medium: 1, low: 2 };