Improve tasks UI: scroll-to-focus picker, landscape layout, height alignment

- Complete tasks now displayed in scroll view alongside unfinished tasks
- Priority order: completed tasks first (by finished_time desc), then unfinished (by order asc)
- Time picker-style scroll: wheel scroll snaps per task, center item gets visual focus
- Landscape mode (>=1024px): scroll view + edit panel side by side, panel always visible
- Portrait mode: edit panel slides in from right on tap
- Fixed flex layout so scroll view and edit panel align perfectly in height

database.py

@@ -134,4 +134,4 @@ def get_tasks_sorted(goal_id):
     unfinished.sort(key=lambda t: t.get("order", 0))
     finished.sort(key=lambda t: t.get("finished_time", ""), reverse=True)
 
-    return unfinished + finished
+    return finished + unfinished

static/css/tasks.css

@@ -42,7 +42,7 @@
 
 .scroll-view {
     flex: 1;
-    height: 300px;
+    height: 600px;
     overflow-y: auto;
     background: white;
     border-radius: 8px;
@@ -50,7 +50,7 @@
 }
 
 .tasks-list {
-    padding: 120px 1rem;
+    padding: 45vh 2rem;
 }
 
 .task-item {
@@ -165,63 +165,6 @@
     opacity: 1;
 }
 
-.finished-section {
-    flex: 0 0 300px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    padding: 1rem;
-    max-height: 600px;
-    overflow-y: auto;
-}
-
-.finished-section h2 {
-    color: #2c3e50;
-    margin-bottom: 1rem;
-    font-size: 1.2rem;
-}
-
-.finished-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.finished-item {
-    padding: 0.75rem;
-    background: #f8f9fa;
-    border-radius: 4px;
-    border-left: 3px solid #28a745;
-}
-
-.finished-item-title {
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-}
-
-.finished-item-time {
-    font-size: 0.8rem;
-    color: #6c757d;
-}
-
-.side-panel {
-    position: fixed;
-    top: 0;
-    right: -400px;
-    width: 400px;
-    height: 100%;
-    background: white;
-    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
-    transition: right 0.3s ease;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-}
-
-.side-panel.active {
-    right: 0;
-}
-
 .side-panel-header {
     padding: 1rem;
     border-bottom: 1px solid #ddd;
@@ -259,6 +202,82 @@
     margin-top: 1rem;
 }
 
+@media (orientation: portrait), (max-width: 1023px) {
+    .side-panel {
+        position: fixed;
+        top: 0;
+        right: -400px;
+        width: 400px;
+        height: 100%;
+        background: white;
+        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
+        transition: right 0.3s ease;
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .side-panel.active {
+        right: 0;
+    }
+}
+
+@media (orientation: landscape) and (min-width: 1024px) {
+    .tasks-page {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        height: calc(100vh - 2rem);
+    }
+
+    .tasks-header {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+    }
+
+    .tasks-main {
+        display: flex;
+        gap: 1rem;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .tasks-container {
+        flex: 1;
+        display: flex;
+        margin-bottom: 0;
+        overflow: hidden;
+    }
+
+    .scroll-view {
+        height: auto;
+        flex: 1;
+    }
+
+    .side-panel {
+        position: relative;
+        right: 0;
+        width: 350px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        z-index: 1;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .side-panel-close {
+        display: none;
+    }
+
+    .create-task-container {
+        flex-shrink: 0;
+    }
+}
+
 .empty-state {
     text-align: center;
     padding: 3rem;

static/js/tasks.js

@@ -1,6 +1,5 @@
 let goals = [];
 let tasks = [];
-let finishedTasks = [];
 let selectedGoalId = null;
 let selectedTaskId = null;
 let sortableInstance = null;
@@ -29,18 +28,20 @@ async function loadTasks() {
     if (!selectedGoalId) return;
 
     try {
-        const allTasks = await get(`/api/tasks?goal_id=${selectedGoalId}`);
-        tasks = allTasks.filter(t => t.status !== "done");
-        finishedTasks = allTasks.filter(t => t.status === "done");
+        tasks = await get(`/api/tasks?goal_id=${selectedGoalId}`);
 
         renderTasks();
-        renderFinishedTasks();
         initSortable();
         initScrollFocus();
 
         const doingTask = tasks.find(t => t.status === "doing");
         if (doingTask) {
             scrollToTask(doingTask.id);
+            if (isLandscapeMode()) {
+                selectTask(doingTask.id);
+            }
+        } else if (isLandscapeMode() && tasks.length > 0) {
+            selectTask(tasks[0].id);
         }
     } catch (error) {
         console.error("Failed to load tasks:", error);
@@ -68,22 +69,6 @@ function renderTasks() {
     `).join("");
 }
 
-function renderFinishedTasks() {
-    const container = document.getElementById("finished-list");
-    
-    if (finishedTasks.length === 0) {
-        container.innerHTML = '<p style="color: #7f8c8d;">No completed tasks yet</p>';
-        return;
-    }
-
-    container.innerHTML = finishedTasks.map(task => `
-        <div class="finished-item" onclick="selectTask(${task.id})">
-            <div class="finished-item-title">${escapeHtml(task.title)}</div>
-            <div class="finished-item-time">Completed: ${formatTime(task.finished_time)}</div>
-        </div>
-    `).join("");
-}
-
 function initSortable() {
     const container = document.getElementById("tasks-list");
     
@@ -164,12 +149,23 @@ function handleScrollFocus() {
 
     if (closestItem) {
         closestItem.classList.add("in-focus");
+
+        if (isLandscapeMode()) {
+            const taskId = parseInt(closestItem.dataset.taskId);
+            if (taskId !== selectedTaskId) {
+                selectTask(taskId);
+            }
+        }
     }
 }
 
+function isLandscapeMode() {
+    return window.innerWidth > window.innerHeight && window.innerWidth >= 1024;
+}
+
 function selectTask(taskId) {
     selectedTaskId = taskId;
-    const task = [...tasks, ...finishedTasks].find(t => t.id === taskId);
+    const task = tasks.find(t => t.id === taskId);
 
     if (!task) return;
 
@@ -178,10 +174,14 @@ function selectTask(taskId) {
     document.getElementById("edit-task-status").value = task.status;
     document.getElementById("side-panel-error").textContent = "";
 
-    document.getElementById("side-panel").classList.add("active");
+    const sidePanel = document.getElementById("side-panel");
+    if (!sidePanel.classList.contains("active")) {
+        sidePanel.classList.add("active");
+    }
 }
 
 function closeSidePanel() {
+    if (isLandscapeMode()) return;
     document.getElementById("side-panel").classList.remove("active");
     selectedTaskId = null;
 }
@@ -204,7 +204,7 @@ async function saveTask() {
     try {
         await put(`/api/tasks/${selectedTaskId}`, { title, desc });
         
-        const currentTask = [...tasks, ...finishedTasks].find(t => t.id === selectedTaskId);
+        const currentTask = tasks.find(t => t.id === selectedTaskId);
         if (status !== currentTask?.status) {
             await patch(`/api/tasks/${selectedTaskId}/status`, { status });
         }
@@ -282,6 +282,25 @@ function formatTime(isoString) {
     return date.toLocaleString();
 }
 
+function initWheelScroll() {
+    const scrollView = document.getElementById("scroll-view");
+    
+    scrollView.addEventListener("wheel", (e) => {
+        e.preventDefault();
+        
+        const taskItem = scrollView.querySelector(".task-item");
+        if (!taskItem) return;
+        
+        const taskHeight = taskItem.offsetHeight + 8;
+        const direction = e.deltaY > 0 ? 1 : -1;
+        
+        scrollView.scrollBy({
+            top: taskHeight * direction,
+            behavior: "smooth"
+        });
+    }, { passive: false });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("goal-selector").addEventListener("change", (e) => {
         selectedGoalId = parseInt(e.target.value);
@@ -297,5 +316,6 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("save-task-btn").addEventListener("click", saveTask);
     document.getElementById("delete-task-btn").addEventListener("click", deleteTask);
     
+    initWheelScroll();
     loadGoals();
 });

templates/tasks.html

@@ -16,18 +16,48 @@
         </div>
     </div>
 
-    <div class="tasks-container">
-        <div id="scroll-view" class="scroll-view">
-            <div id="tasks-list" class="tasks-list"></div>
+    <div class="tasks-main">
+        <div class="tasks-container">
+            <div id="scroll-view" class="scroll-view">
+                <div id="tasks-list" class="tasks-list"></div>
+            </div>
         </div>
 
-        <div id="finished-section" class="finished-section">
-            <h2>Completed Tasks</h2>
-            <div id="finished-list" class="finished-list"></div>
+        <div id="side-panel" class="side-panel">
+            <div class="side-panel-header">
+                <h2>Edit Task</h2>
+                <button class="side-panel-close" id="side-panel-close">&times;</button>
+            </div>
+            <div class="side-panel-content">
+                <div class="form-group">
+                    <label for="edit-task-title">Title</label>
+                    <input type="text" id="edit-task-title">
+                </div>
+                <div class="form-group">
+                    <label for="edit-task-desc">Description</label>
+                    <textarea id="edit-task-desc" rows="3"></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="edit-task-status">Status</label>
+                    <select id="edit-task-status">
+                        <option value="todo">To Do</option>
+                        <option value="doing">Doing</option>
+                        <option value="pending">Pending</option>
+                        <option value="done">Done</option>
+                    </select>
+                </div>
+                <div id="side-panel-error" class="error-message"></div>
+                <div class="side-panel-actions">
+                    <button class="btn-success" id="save-task-btn">Save</button>
+                    <button class="btn-danger" id="delete-task-btn">Delete</button>
+                </div>
+            </div>
         </div>
     </div>
 
-    <button id="create-task-btn" class="btn-success">+ Create Task</button>
+    <div class="create-task-container">
+        <button id="create-task-btn" class="btn-success">+ Create Task</button>
+    </div>
 </div>
 
 <div id="task-modal" class="modal">
@@ -54,37 +84,6 @@
         </form>
     </div>
 </div>
-
-<div id="side-panel" class="side-panel">
-    <div class="side-panel-header">
-        <h2>Edit Task</h2>
-        <button class="side-panel-close" id="side-panel-close">&times;</button>
-    </div>
-    <div class="side-panel-content">
-        <div class="form-group">
-            <label for="edit-task-title">Title</label>
-            <input type="text" id="edit-task-title">
-        </div>
-        <div class="form-group">
-            <label for="edit-task-desc">Description</label>
-            <textarea id="edit-task-desc" rows="3"></textarea>
-        </div>
-        <div class="form-group">
-            <label for="edit-task-status">Status</label>
-            <select id="edit-task-status">
-                <option value="todo">To Do</option>
-                <option value="doing">Doing</option>
-                <option value="pending">Pending</option>
-                <option value="done">Done</option>
-            </select>
-        </div>
-        <div id="side-panel-error" class="error-message"></div>
-        <div class="side-panel-actions">
-            <button class="btn-success" id="save-task-btn">Save</button>
-            <button class="btn-danger" id="delete-task-btn">Delete</button>
-        </div>
-    </div>
-</div>
 {% endblock %}
 
 {% block extra_js %}