fix: refresh side panel after loadTasks in non-landscape mode

After saveTask or setTaskStatus triggers loadTasks(), the side panel
now refreshes from the updated server data. If the selected task no
longer exists (deleted or goal changed), the side panel closes.
This ensures Edit Task always matches selectedTaskId.

database.py

@@ -202,19 +202,25 @@ def get_tasks_sorted(goal_id):
     try:
         cur = conn.execute(
             """SELECT * FROM tasks WHERE goal_id = ? AND status = 'done'
-               ORDER BY finished_time DESC""",
+               ORDER BY finished_time ASC""",
             (goal_id,)
         )
         finished = [row_to_dict(r) for r in cur.fetchall()]
 
         cur = conn.execute(
             """SELECT * FROM tasks WHERE goal_id = ? AND status != 'done'
-               ORDER BY CASE status
+               ORDER BY
-                   WHEN 'doing' THEN 1
+                   CASE status
-                   WHEN 'pending' THEN 2
+                       WHEN 'doing' THEN 0
-                   WHEN 'todo' THEN 3
+                       WHEN 'pending' THEN 1
-                   ELSE 4
+                       WHEN 'todo' THEN 2
-               END, "order" ASC""",
+                   END ASC,
+                   CASE status
+                       WHEN 'pending' THEN start_time
+                   END ASC,
+                   CASE status
+                       WHEN 'todo' THEN "order"
+                   END ASC""",
             (goal_id,)
         )
         unfinished = [row_to_dict(r) for r in cur.fetchall()]

static/css/style.css

@@ -182,6 +182,11 @@ body {
     background-color: #229954;
 }
 
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 .error-message {
     color: #e74c3c;
     margin-bottom: 1rem;

static/css/tasks.css

@@ -44,6 +44,7 @@
     flex: 1;
     height: 600px;
     overflow-y: auto;
+    position: relative;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -96,6 +97,81 @@
     border-color: #28a745;
 }
 
+.status-toggle {
+    display: flex;
+    gap: 0;
+    flex-wrap: nowrap;
+}
+
+.status-btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid #ddd;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.15s ease;
+    background: #f8f9fa;
+    color: #666;
+    margin-left: -1px;
+}
+
+.status-btn:first-child {
+    border-radius: 6px 0 0 6px;
+    margin-left: 0;
+}
+
+.status-btn:last-child {
+    border-radius: 0 6px 6px 0;
+}
+
+.status-btn.todo:hover {
+    border-color: #667eea;
+    color: #667eea;
+}
+
+.status-btn.todo.active {
+    background: #f8f9fa;
+    border-color: #667eea;
+    color: #667eea;
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.status-btn.doing:hover {
+    border-color: #ffc107;
+    color: #b8860b;
+}
+
+.status-btn.doing.active {
+    background: #fff3cd;
+    border-color: #ffc107;
+    color: #856404;
+    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
+}
+
+.status-btn.pending:hover {
+    border-color: #2196F3;
+    color: #2196F3;
+}
+
+.status-btn.pending.active {
+    background: #e7f3ff;
+    border-color: #2196F3;
+    color: #0d6efd;
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
+}
+
+.status-btn.done:hover {
+    border-color: #28a745;
+    color: #28a745;
+}
+
+.status-btn.done.active {
+    background: #d4edda;
+    border-color: #28a745;
+    color: #155724;
+    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
+}
+
 .task-item:hover {
     background: #e9ecef;
 }
@@ -284,7 +360,7 @@
     .side-panel {
         position: relative;
         right: 0;
-        width: 350px;
+        width: 400px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         border-radius: 8px;
         z-index: 1;

static/js/tasks.js

@@ -5,7 +5,6 @@ let selectedTaskId = null;
 let sortableInstance = null;
 let persistTimer = null;
 let currentUser = null;
-let isInitializing = false;
 
 async function loadGoals() {
     try {
@@ -38,31 +37,28 @@ async function loadGoals() {
 async function loadTasks() {
     if (!selectedGoalId) return;
 
-    isInitializing = true;
     try {
         tasks = await get(`/api/tasks?goal_id=${selectedGoalId}`);
-        console.log("loadTasks: got", tasks.length, "tasks");
-        console.log("Task order:", tasks.map(t => ({id: t.id, title: t.title, status: t.status})));
 
         renderTasks();
         initSortable();
 
         const currentGoal = goals.find(g => g.id === selectedGoalId);
         const savedTaskId = currentGoal ? currentGoal.selected_task_id : null;
-        console.log("loadTasks: savedTaskId from goal =", savedTaskId);
         const savedTaskExists = savedTaskId && tasks.some(t => t.id === savedTaskId);
-        console.log("loadTasks: savedTaskExists =", savedTaskExists);
+
+        let focusTaskId = null;
 
         if (savedTaskExists) {
-            console.log("loadTasks: using savedTaskId path");
+            focusTaskId = savedTaskId;
             scrollToTask(savedTaskId);
             if (isLandscapeMode()) {
                 selectTask(savedTaskId);
             }
         } else {
-            console.log("loadTasks: using fallback path");
             const doingTask = tasks.find(t => t.status === "doing");
             if (doingTask) {
+                focusTaskId = doingTask.id;
                 scrollToTask(doingTask.id);
                 if (isLandscapeMode()) {
                     selectTask(doingTask.id);
@@ -72,22 +68,46 @@ async function loadTasks() {
             }
         }
 
+        requestAnimationFrame(() => {
+            if (focusTaskId) {
+                document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
+                const focusEl = document.querySelector(`[data-task-id="${focusTaskId}"]`);
+                if (focusEl) {
+                    focusEl.classList.add("in-focus");
+                }
+            }
+
+            // Refresh side panel if a task was selected
+            if (selectedTaskId) {
+                const currentTask = tasks.find(t => t.id === selectedTaskId);
+                if (currentTask) {
+                    document.getElementById("edit-task-title").value = currentTask.title;
+                    document.getElementById("edit-task-desc").value = currentTask.desc || "";
+                    document.querySelectorAll(".status-btn").forEach(btn => {
+                        btn.classList.toggle("active", btn.dataset.status === currentTask.status);
+                    });
+                    updateSaveButton();
+                } else {
+                    closeSidePanel();
+                }
+            }
+
             initScrollFocus();
+        });
     } catch (error) {
         console.error("Failed to load tasks:", error);
-    } finally {
-        isInitializing = false;
     }
 }
 
 async function persistSelectedTask(taskId) {
-    if (!selectedGoalId || isInitializing) return;
+    if (!selectedGoalId) return;
     try {
         await patch(`/api/goals/${selectedGoalId}/selected-task`, { task_id: taskId });
         const goal = goals.find(g => g.id === selectedGoalId);
         if (goal) {
             goal.selected_task_id = taskId;
         }
+        console.log("Saved selected task:", taskId);
     } catch (error) {
         console.error("Failed to persist selected task:", error);
     }
@@ -150,19 +170,13 @@ function initSortable() {
 }
 
 function scrollToTask(taskId) {
-    console.log("scrollToTask called:", taskId);
     const taskElement = document.querySelector(`[data-task-id="${taskId}"]`);
     if (taskElement) {
         const scrollView = document.getElementById("scroll-view");
         const taskTop = taskElement.offsetTop;
         const scrollViewHeight = scrollView.clientHeight;
         const taskHeight = taskElement.offsetHeight;
-        const targetScrollTop = taskTop - (scrollViewHeight / 2) + (taskHeight / 2);
+        scrollView.scrollTop = taskTop - (scrollViewHeight / 2) + (taskHeight / 2);
-        console.log("Scrolling to:", targetScrollTop, "element offsetTop:", taskTop);
-        scrollView.scrollTop = targetScrollTop;
-        console.log("scrollTop after set:", scrollView.scrollTop);
-    } else {
-        console.log("Task element not found for id:", taskId);
     }
 }
 
@@ -170,7 +184,9 @@ function initScrollFocus() {
     const scrollView = document.getElementById("scroll-view");
 
     scrollView.removeEventListener("scroll", handleScrollFocus);
+    scrollView.removeEventListener("scroll", handleScrollSave);
     scrollView.addEventListener("scroll", handleScrollFocus);
+    scrollView.addEventListener("scroll", handleScrollSave);
 }
 
 function handleScrollFocus() {
@@ -201,9 +217,6 @@ function handleScrollFocus() {
 
         const taskId = parseInt(closestItem.dataset.taskId);
 
-        clearTimeout(persistTimer);
-        persistTimer = setTimeout(() => persistSelectedTask(taskId), 400);
-
         if (isLandscapeMode()) {
             if (taskId !== selectedTaskId) {
                 selectTask(taskId);
@@ -212,6 +225,16 @@ function handleScrollFocus() {
     }
 }
 
+function handleScrollSave() {
+    const inFocusTask = document.querySelector(".task-item.in-focus");
+
+    if (inFocusTask) {
+        const taskId = parseInt(inFocusTask.dataset.taskId);
+        clearTimeout(persistTimer);
+        persistTimer = setTimeout(() => persistSelectedTask(taskId), 400);
+    }
+}
+
 function isLandscapeMode() {
     return window.innerWidth > window.innerHeight && window.innerWidth >= 1024;
 }
@@ -222,10 +245,22 @@ function selectTask(taskId) {
 
     if (!task) return;
 
+    document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
+    const taskEl = document.querySelector(`[data-task-id="${taskId}"]`);
+    if (taskEl) {
+        taskEl.classList.add("in-focus");
+    }
+
+    scrollToTask(taskId);
+
     document.getElementById("edit-task-title").value = task.title;
     document.getElementById("edit-task-desc").value = task.desc || "";
-    document.getElementById("edit-task-status").value = task.status;
     document.getElementById("side-panel-error").textContent = "";
+    updateSaveButton();
+
+    document.querySelectorAll(".status-btn").forEach(btn => {
+        btn.classList.toggle("active", btn.dataset.status === task.status);
+    });
 
     const sidePanel = document.getElementById("side-panel");
     if (!sidePanel.classList.contains("active")) {
@@ -233,6 +268,17 @@ function selectTask(taskId) {
     }
 }
 
+function updateSaveButton() {
+    const task = tasks.find(t => t.id === selectedTaskId);
+    if (!task) return;
+
+    const title = document.getElementById("edit-task-title").value.trim();
+    const desc = document.getElementById("edit-task-desc").value;
+
+    const changed = title !== task.title || desc !== (task.desc || "");
+    document.getElementById("save-task-btn").disabled = !changed;
+}
+
 function closeSidePanel() {
     if (isLandscapeMode()) return;
     document.getElementById("side-panel").classList.remove("active");
@@ -247,7 +293,6 @@ async function saveTask() {
 
     const title = document.getElementById("edit-task-title").value.trim();
     const desc = document.getElementById("edit-task-desc").value;
-    const status = document.getElementById("edit-task-status").value;
 
     if (!title) {
         error.textContent = "Title is required";
@@ -256,12 +301,24 @@ async function saveTask() {
 
     try {
         await put(`/api/tasks/${selectedTaskId}`, { title, desc });
-
+        await loadTasks();
-        const currentTask = tasks.find(t => t.id === selectedTaskId);
+    } catch (err) {
-        if (status !== currentTask?.status) {
+        error.textContent = err.message;
-            await patch(`/api/tasks/${selectedTaskId}/status`, { status });
     }
+}
 
+async function setTaskStatus(status) {
+    if (!selectedTaskId) return;
+
+    const error = document.getElementById("side-panel-error");
+    error.textContent = "";
+
+    document.querySelectorAll(".status-btn").forEach(btn => {
+        btn.classList.toggle("active", btn.dataset.status === status);
+    });
+
+    try {
+        await patch(`/api/tasks/${selectedTaskId}/status`, { status });
         await loadTasks();
     } catch (err) {
         error.textContent = err.message;
@@ -368,8 +425,12 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.getElementById("side-panel-close").addEventListener("click", closeSidePanel);
     document.getElementById("save-task-btn").addEventListener("click", saveTask);
+    document.getElementById("save-task-btn").disabled = true;
     document.getElementById("delete-task-btn").addEventListener("click", deleteTask);
 
+    document.getElementById("edit-task-title").addEventListener("input", updateSaveButton);
+    document.getElementById("edit-task-desc").addEventListener("input", updateSaveButton);
+
     initWheelScroll();
     loadGoals();
 });

templates/tasks.html

@@ -39,13 +39,13 @@
                     <textarea id="edit-task-desc" rows="12" autocomplete="off"></textarea>
                 </div>
                 <div class="form-group">
-                    <label for="edit-task-status">Status</label>
+                    <label>Status</label>
-                    <select id="edit-task-status">
+                    <div class="status-toggle" id="status-toggle">
-                        <option value="todo">To Do</option>
+                        <button class="status-btn todo" data-status="todo" onclick="setTaskStatus('todo')">To Do</button>
-                        <option value="doing">Doing</option>
+                        <button class="status-btn doing" data-status="doing" onclick="setTaskStatus('doing')">Doing</button>
-                        <option value="pending">Pending</option>
+                        <button class="status-btn pending" data-status="pending" onclick="setTaskStatus('pending')">Pending</button>
-                        <option value="done">Done</option>
+                        <button class="status-btn done" data-status="done" onclick="setTaskStatus('done')">Done</button>
-                    </select>
+                    </div>
                 </div>
                 <div id="side-panel-error" class="error-message"></div>
                 <div class="side-panel-actions">