From 3f0fccd218b23b1c045d893946925b3459ceb10c Mon Sep 17 00:00:00 2001
From: Yuyao Huang <huangyuyao@outlook.com>
Date: Sat, 9 May 2026 16:26:41 +0800
Subject: [PATCH] feat: disable Save button when content unchanged

- Save button starts disabled and only enables when title or description
  differs from the original task values
- updateSaveButton() compares current input values against task data
- input event listeners on title and desc fields call updateSaveButton
- Add global button:disabled style (opacity 0.5, cursor not-allowed)
---
 static/css/style.css |  5 +++++
 static/js/tasks.js   | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 0e5b643..9551db2 100644
--- a/static/css/style.css
+++ b/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;
diff --git a/static/js/tasks.js b/static/js/tasks.js
index 6b6f0fc..6b7ed26 100644
--- a/static/js/tasks.js
+++ b/static/js/tasks.js
@@ -235,6 +235,7 @@ function selectTask(taskId) {
     document.getElementById("edit-task-title").value = task.title;
     document.getElementById("edit-task-desc").value = task.desc || "";
     document.getElementById("side-panel-error").textContent = "";
+    updateSaveButton();
 
     document.querySelectorAll(".status-btn").forEach(btn => {
         btn.classList.toggle("active", btn.dataset.status === task.status);
@@ -246,6 +247,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");
@@ -392,8 +404,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();
 });