Fix unsaved-changes detection to compare against initial form state

- Track dirtiness by comparing the current form serialization to a snapshot
  taken on load, so reverting an edit (typing then deleting it) correctly
  clears the warning instead of leaving the form permanently 'dirty'.
- Also listen for 'change' so status-select edits are detected, and guard the
  back/logo click handlers against missing elements on non-edit pages.
- Add a feature spec covering the revert-to-original case.

Author: JuanVqz

app/assets/javascripts/stories.js

@@ -32,11 +32,19 @@ document.addEventListener("DOMContentLoaded", () => {
   let isDirty = false;
 
   if (form) {
-    // Mark the form as dirty when any input changes
-    form.addEventListener("input", function () {
-      isDirty = true;
+    // Snapshot the initial form state so we can compare against it. Tracking a
+    // plain "changed at least once" flag reported the form as dirty even after
+    // the user undid their edits (e.g. typed some text and then deleted it).
+    const initialState = serializeForm(form);
+
+    const refreshDirtyState = function () {
+      isDirty = serializeForm(form) !== initialState;
       addBeforeUnloadEventListener(isDirty);
-    });
+    };
+
+    // "input" covers text fields; "change" covers selects like the status.
+    form.addEventListener("input", refreshDirtyState);
+    form.addEventListener("change", refreshDirtyState);
 
     // Reset isDirty on form submission
     form.addEventListener("submit", function () {
@@ -47,6 +55,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Attach a click event to the custom back button
   [backButton, logo].forEach(element => {
+    if (!element) return;
+
     element.addEventListener("click", function (event) {
       if (isDirty) {
         const confirmLeave = confirm("You have unsaved changes. Are you sure you want to go back?");
@@ -63,6 +73,10 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
+function serializeForm(form) {
+  return new URLSearchParams(new FormData(form)).toString();
+}
+
 function addBeforeUnloadEventListener(isDirty) {
   if (isDirty) {
     window.addEventListener("beforeunload", warnUserIfUnsavedEdits);

spec/features/stories_manage_spec.rb

@@ -94,6 +94,20 @@
     assert_current_path project_path(id: project.id)
   end
 
+  it "does not alert me when I revert my edits back to their original values", js: true do
+    visit edit_project_story_path(project, story)
+    original_title = find_field("story[title]").value
+
+    # Make a change and then undo it, returning the form to its initial state.
+    fill_in "story[title]", with: "A temporary edit"
+    fill_in "story[title]", with: original_title
+
+    # No unsaved-changes confirm should appear, so navigation happens directly.
+    click_link "Back"
+
+    assert_current_path project_path(id: project.id)
+  end
+
   it "allows me to delete a story" do
     visit project_path(id: project.id)