Fix a bunch of shit, hopefully

src/App.svelte

@@ -39,6 +39,11 @@
       >on one of these places I exist on</a
     >.
   </p>
+  <p>
+    Currently, entering Edit Mode forcibly refreshes the display without giving
+    a prompt to save first. Please be aware of this and don't edit a template
+    while filling it in.
+  </p>
   <hr />
   <div id="questionnaire">
     <Controls />

src/lib/Controls.svelte

@@ -151,6 +151,15 @@
       return template.name;
     }
   }
+
+  editMode.subscribe((v) => {
+    if (v && $current) {
+      current.update((v) => v); // noop just to trigger the update
+
+      if ($current.author instanceof Object)
+        $current.author = $current.author.name; // remove the link so nobody can claim it's an official template
+    }
+  });
 </script>
 
 <div class="controls">

src/lib/Question.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
   import EditableText from "./EditableText.svelte";
   import QuestionTitle from "./QuestionTitle.svelte";
-  import { editMode } from "./store";
+  import { current, editMode } from "./store";
   import type { TemplateQuestion } from "./types/template";
 
+  let self: HTMLLIElement | null;
   export let question: TemplateQuestion;
   export let questionChanged: (
     question: TemplateQuestion,
     hasValue: boolean
   ) => void;
 
-  let changed = false;
+  let qChanged = false;
   const { type, placeholder } = question;
 
   const rows = {
@@ -23,17 +24,32 @@
     const el = evt.target as HTMLInputElement | HTMLTextAreaElement;
 
     if (el.value.length === 0) {
-      changed = false;
+      qChanged = false;
       questionChanged(question, false);
       return;
     }
 
-    changed = true;
+    qChanged = true;
     questionChanged(question, true);
   }
+
+  current.subscribe(() => {
+    qChanged = false;
+
+    if (self) {
+      const inputElement = self.querySelector(".answer");
+
+      if (
+        inputElement instanceof HTMLInputElement ||
+        inputElement instanceof HTMLTextAreaElement
+      ) {
+        inputElement.value = "";
+      }
+    }
+  });
 </script>
 
-<li class="question" data-question="{question.question}">
+<li class="question" data-question="{question.question}" bind:this="{self}">
   {#if $editMode}
     <div class="editable-block">
       <h3>Title</h3>
@@ -66,7 +82,7 @@
     </div>
   {:else}
     <label>
-      <QuestionTitle {changed}
+      <QuestionTitle changed="{qChanged}"
         ><EditableText bind:value="{question.question}" />
         <slot /></QuestionTitle
       >

src/lib/Questionnaire.svelte

@@ -41,11 +41,8 @@
     });
   }
 
-  editMode.subscribe((v) => {
-    if (v && $current) {
-      if ($current.author instanceof Object)
-        $current.author = $current.author.name; // remove the link so nobody can claim it's an official template
-    }
+  current.subscribe(() => {
+    sectionMap = new Map();
   });
 </script>
 

src/lib/Section.svelte

@@ -15,7 +15,7 @@
   let questionMap: Map<string, boolean> = new Map(
     section.questions.map((q) => [q.question, false])
   );
-  let changed = false;
+  let sChanged = false;
   let count = 0;
 
   function anyHasValue() {
@@ -24,8 +24,7 @@
 
   function questionChanged(question: TemplateQuestion, hasValue: boolean) {
     questionMap.set(question.question, hasValue);
-    changed = anyHasValue();
-    // TODO: make it mark the section as changed somehow
+    sChanged = anyHasValue();
     sectionChanged(section, anyHasValue());
 
     count = Array.from(questionMap.values()).filter((v) => v).length;
@@ -52,11 +51,17 @@
       return c;
     });
   }
+
+  current.subscribe(() => {
+    questionMap = new Map(section.questions.map((q) => [q.question, false]));
+    sChanged = false;
+    count = 0;
+  });
 </script>
 
 <details class="section" data-section="{section.title}">
   <summary title="Click to expand/collapse">
-    <SectionTitle {changed}
+    <SectionTitle changed="{sChanged}"
       ><EditableText bind:value="{section.title}" /> ({count}/{section.questions
         .length}) <slot /></SectionTitle
     >