From f96f59bc5b53d729a5a00da1afc40f835c28724a Mon Sep 17 00:00:00 2001
From: Lyssieth <lys@lys.ee>
Date: Sat, 6 Jan 2024 19:03:05 +0200
Subject: [PATCH] A theoretically working v3.

---
 README.md                           |   2 +-
 package.json                        |   8 +-
 pnpm-lock.yaml                      |  75 +++++++++++++
 src/App.svelte                      |  12 +-
 src/app.scss                        |  13 +++
 src/lib/Controls.svelte             | 164 ++++++++++++++++++++++-----
 src/lib/EditButton.svelte           |  12 ++
 src/lib/EditableText.svelte         |  41 +++++++
 src/lib/ExportBlock.svelte          |  14 ++-
 src/lib/ImportModal.svelte          |  93 ++++++++++++++++
 src/lib/PermissionModal.svelte      | 109 ++++++++++++++++++
 src/lib/Question.svelte             |  30 ++++-
 src/lib/Questionnaire.svelte        | 121 ++++++++++++++------
 src/lib/Section.svelte              |  58 +++++++++-
 src/lib/store.ts                    |  14 ++-
 src/lib/template.ts                 |  90 +++++++--------
 src/lib/types/template.ts           |  42 +++++++
 src/lib/types/template.validator.ts | 165 ++++++++++++++++++++++++++++
 todo.md                             |   2 -
 19 files changed, 937 insertions(+), 128 deletions(-)
 create mode 100644 src/lib/EditButton.svelte
 create mode 100644 src/lib/EditableText.svelte
 create mode 100644 src/lib/ImportModal.svelte
 create mode 100644 src/lib/PermissionModal.svelte
 create mode 100644 src/lib/types/template.ts
 create mode 100644 src/lib/types/template.validator.ts

diff --git a/README.md b/README.md
index c3279e9..cdeb709 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 The purpose of this website is to act as a questionnaire for worldbuilding purposes.
 
-Version two of the experiment brings in templates and a more modular approach to the UI.
+Version three of the experiment brings editing/saving/loading.
 
 ## Current State
 
diff --git a/package.json b/package.json
index 4cf7490..c8b4e7b 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/object-inspect": "^1.8.4",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
+    "ajv": "^8.12.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
@@ -24,11 +26,15 @@
     "sass": "^1.69.7",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
+    "svelte-feather-icons": "^4.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.11"
   },
   "dependencies": {
-    "docx": "^8.5.0"
+    "docx": "^8.5.0",
+    "feather-icons": "^4.29.1",
+    "hash-wasm": "^4.11.0",
+    "object-inspect": "^1.13.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ea9c8e..bb1d84c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,15 @@ dependencies:
   docx:
     specifier: ^8.5.0
     version: 8.5.0
+  feather-icons:
+    specifier: ^4.29.1
+    version: 4.29.1
+  hash-wasm:
+    specifier: ^4.11.0
+    version: 4.11.0
+  object-inspect:
+    specifier: ^1.13.1
+    version: 1.13.1
 
 devDependencies:
   '@sveltejs/vite-plugin-svelte':
@@ -16,12 +25,18 @@ devDependencies:
   '@tsconfig/svelte':
     specifier: ^5.0.2
     version: 5.0.2
+  '@types/object-inspect':
+    specifier: ^1.8.4
+    version: 1.8.4
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.17.0
     version: 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
   '@typescript-eslint/parser':
     specifier: ^6.17.0
     version: 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+  ajv:
+    specifier: ^8.12.0
+    version: 8.12.0
   eslint:
     specifier: ^8.56.0
     version: 8.56.0
@@ -49,6 +64,9 @@ devDependencies:
   svelte-check:
     specifier: ^3.6.2
     version: 3.6.2(postcss@8.4.33)(sass@1.69.7)(svelte@4.2.8)
+  svelte-feather-icons:
+    specifier: ^4.1.0
+    version: 4.1.0
   tslib:
     specifier: ^2.6.2
     version: 2.6.2
@@ -552,6 +570,10 @@ packages:
       undici-types: 5.26.5
     dev: false
 
+  /@types/object-inspect@1.8.4:
+    resolution: {integrity: sha512-2yh72JxmDney1h7LQvkyO8p8FOmNMQXGs8HjuXS3SXvE/dLydLLjBqKCdHqcTUo66CQVHfn7yFR680bvi9jlVw==}
+    dev: true
+
   /@types/pug@2.0.10:
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
     dev: true
@@ -719,6 +741,15 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -821,6 +852,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
     dependencies:
@@ -846,6 +881,11 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /core-js@3.35.0:
+    resolution: {integrity: sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==}
+    requiresBuild: true
+    dev: false
+
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
@@ -1169,6 +1209,13 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /feather-icons@4.29.1:
+    resolution: {integrity: sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==}
+    dependencies:
+      classnames: 2.5.1
+      core-js: 3.35.0
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1273,6 +1320,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /hash-wasm@4.11.0:
+    resolution: {integrity: sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ==}
+    dev: false
+
   /ignore@5.3.0:
     resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
@@ -1367,6 +1418,10 @@ packages:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
+  /json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
@@ -1519,6 +1574,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /object-inspect@1.13.1:
+    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
+    dev: false
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -1711,6 +1770,11 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -1918,6 +1982,12 @@ packages:
       svelte: 4.2.8
     dev: true
 
+  /svelte-feather-icons@4.1.0:
+    resolution: {integrity: sha512-fcTL4VzEN4BoccQJjKiui0b9DWEsmO6zGpI0tQTJbthRtNrYheoU487zyA1BD8rj9kj6jbKGmGVo7zbSdRvMvA==}
+    dependencies:
+      svelte: 3.59.2
+    dev: true
+
   /svelte-hmr@0.15.3(svelte@4.2.8):
     resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -1976,6 +2046,11 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /svelte@3.59.2:
+    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /svelte@4.2.8:
     resolution: {integrity: sha512-hU6dh1MPl8gh6klQZwK/n73GiAHiR95IkFsesLPbMeEZi36ydaXL/ZAb4g9sayT0MXzpxyZjR28yderJHxcmYA==}
     engines: {node: '>=16'}
diff --git a/src/App.svelte b/src/App.svelte
index e50e45b..048fd03 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import Controls from "./lib/Controls.svelte";
   import ExportBlock from "./lib/ExportBlock.svelte";
+  import ImportModal from "./lib/ImportModal.svelte";
+  import PermissionModal from "./lib/PermissionModal.svelte";
   import Questionnaire from "./lib/Questionnaire.svelte";
   import ScrollButton from "./lib/ScrollButton.svelte";
   import { changed } from "./lib/store";
@@ -21,10 +23,9 @@
   <h2>What is this?</h2>
   <p>
     The purpose of this website is to act as a questionnaire for worldbuilding
-    purposes. This is v2 of the experiment, where I've added templates for
-    different things one might want to build, automatic generation of sections,
-    and collapsible sections. There is also change tracking for the sections, so
-    changing the template can't break things.
+    purposes. This is v3 of the experiment, where I've added
+    saving/loading/editing functionality. Import/export theoretically also
+    works. To export a template, you must now be in Edit Mode.
   </p>
 
   <p>
@@ -39,7 +40,6 @@
     >.
   </p>
   <hr />
-
   <div id="questionnaire">
     <Controls />
     <Questionnaire />
@@ -50,3 +50,5 @@
   <ExportBlock />
 </main>
 <ScrollButton />
+<PermissionModal />
+<ImportModal />
diff --git a/src/app.scss b/src/app.scss
index 2993699..f3acf63 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -141,3 +141,16 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.edit-button {
+  padding: 0.25em;
+  background-color: color-mix(in srgb, #1a1a1a 55%, #09f 45%);
+  display: inline-flex;
+  place-items: center;
+  place-content: center;
+  gap: 0.25em;
+
+  @media (prefers-color-scheme: light) {
+    background-color: color-mix(in srgb, #f9f9f9 55%, #09f 45%);
+  }
+}
diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
index 23c48ce..192f1b8 100644
--- a/src/lib/Controls.svelte
+++ b/src/lib/Controls.svelte
@@ -1,6 +1,16 @@
 <script lang="ts">
-  import { changed, current } from "./store";
-  import { DEFAULT_TEMPLATES, getTemplate, savedTemplates } from "./template";
+  import { changed, current, editMode, importModalOpen } from "./store";
+  import {
+    DEFAULT_TEMPLATES,
+    getTemplate,
+    hashTemplate,
+    saveToLocalStorage,
+    savedTemplates,
+    savedToLocalStorage
+  } from "./template";
+  import type { Template } from "./types/template";
+
+  let templateSelect: HTMLSelectElement;
 
   function onChange(evt: Event) {
     const el = evt.target as HTMLSelectElement;
@@ -37,7 +47,7 @@
         }
       }
     } else {
-      // TODO: Error modal
+      window.alert(`Template ${el.value} not found`);
       console.error(`Template ${el.value} not found`);
     }
 
@@ -46,11 +56,80 @@
     el.blur();
   }
 
-  function exportAsJson() {
+  function newTemplate() {
+    if ($current && $changed) {
+      const confirm = window.confirm(
+        "You have unsaved changes. Are you sure you want to create a new template?"
+      );
+
+      if (!confirm) {
+        return;
+      }
+    }
+
+    $current = {
+      name: "New Template",
+      description: "A New Template",
+      sections: [],
+      author: "Someone"
+    };
+  }
+
+  async function copyTemplate() {
+    if ($current) {
+      const template = JSON.parse(JSON.stringify($current)) as Template;
+      template.name = `${template.name} (copy)`;
+      template.id = await hashTemplate(template);
+
+      $current = template;
+    } else {
+      alert("No template is currently selected.");
+    }
+  }
+
+  async function deleteTemplate() {
+    if ($current) {
+      const confirm = window.confirm(
+        "Are you sure you want to delete this template?"
+      );
+
+      if (confirm) {
+        const index = $savedTemplates.findIndex(
+          (template) => template.id === $current?.id
+        );
+
+        if (index !== -1) {
+          savedTemplates.update((c) => {
+            c.splice(index, 1);
+            return c;
+          });
+          $current = null;
+          await savedToLocalStorage();
+        } else {
+          window.alert("Template not found in saved templates.");
+          return;
+        }
+      }
+    } else {
+      alert("No template is currently selected.");
+    }
+  }
+
+  async function saveTemplate() {
     if ($current) {
-      const data = JSON.stringify($current, null, 2);
+      await saveToLocalStorage($current);
+    } else {
+      alert("No template is currently selected.");
+    }
+  }
+
+  async function exportTemplate() {
+    if ($current) {
+      $current.id = await hashTemplate($current);
 
-      const blob = new Blob([data], { type: "application/json" });
+      const blob = new Blob([JSON.stringify($current)], {
+        type: "application/json"
+      });
       const url = URL.createObjectURL(blob);
 
       const a = document.createElement("a");
@@ -64,33 +143,64 @@
       alert("No template is currently selected.");
     }
   }
+
+  function templateName(template: Template): string {
+    if ($editMode) {
+      return `${template.name} | ${template.id}`;
+    } else {
+      return template.name;
+    }
+  }
 </script>
 
 <div class="controls">
-  <label>
-    <span>Template Selection</span>
-    <select id="templateSelect" on:change="{onChange}">
-      <option disabled selected id="gremlin">--- SELECT A TEMPLATE ---</option>
-      <option disabled>--- DEFAULT TEMPLATES ---</option>
-      {#each DEFAULT_TEMPLATES as template}
-        <option>{template.name}</option>
-      {/each}
-      <option disabled>--- SAVED TEMPLATES ---</option>
-      {#each savedTemplates as template}
-        <option>{template.name}</option>
-      {/each}
-    </select>
-  </label>
-  <button on:click="{exportAsJson}" class="small"
-    >Export template as JSON</button
-  >
+  <div class="row">
+    <label>
+      <span>Template Selection</span>
+      {#key $savedTemplates}
+        <select
+          bind:this="{templateSelect}"
+          id="templateSelect"
+          on:change="{onChange}"
+        >
+          <option disabled selected id="gremlin"
+            >--- SELECT A TEMPLATE ---</option
+          >
+          <option disabled>--- DEFAULT TEMPLATES ---</option>
+          {#each DEFAULT_TEMPLATES as template}
+            <option>{template.name}</option>
+          {/each}
+          <option disabled>--- SAVED TEMPLATES ---</option>
+          {#each $savedTemplates as template}
+            <option>{templateName(template)}</option>
+          {/each}
+        </select>
+      {/key}
+    </label>
+    <button on:click="{() => ($editMode = !$editMode)}" class="small">
+      {$editMode ? "Exit Edit Mode" : "Enter Edit Mode"}</button
+    >
+    <button on:click="{() => ($importModalOpen = true)}" class="small">
+      Import Template</button
+    >
+  </div>
+  {#if $editMode}
+    <div class="row">
+      <button on:click="{newTemplate}" class="small">New Blank Template</button>
+      <button on:click="{copyTemplate}" class="small">Copy Template</button>
+      <button on:click="{saveTemplate}" class="small">Save Template</button>
+      <button on:click="{deleteTemplate}" class="small">Delete Template</button>
+      <button on:click="{exportTemplate}" class="small">Export Template</button>
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
   .controls {
-    flex-direction: row;
-    place-items: space-between;
+    flex-direction: column;
+    place-items: start;
     padding: 0.25em 0;
+    gap: 0.25em;
 
     background-color: darken(#242424, 10%);
     border: 1px solid darken(#242424, 10%);
@@ -100,6 +210,10 @@
       background-color: darken(#f9f9f9, 10%);
       border: 1px solid darken(#f9f9f9, 10%);
     }
+
+    .row {
+      flex-direction: row;
+    }
   }
 
   .small {
diff --git a/src/lib/EditButton.svelte b/src/lib/EditButton.svelte
new file mode 100644
index 0000000..7b1fa26
--- /dev/null
+++ b/src/lib/EditButton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Edit3Icon } from "svelte-feather-icons";
+  import { editMode } from "./store";
+
+  export let inputMode: boolean;
+</script>
+
+{#if $editMode}
+  <button class="edit-button" on:click="{() => (inputMode = !inputMode)}"
+    ><Edit3Icon size="1x" /></button
+  >
+{/if}
diff --git a/src/lib/EditableText.svelte b/src/lib/EditableText.svelte
new file mode 100644
index 0000000..b1298a4
--- /dev/null
+++ b/src/lib/EditableText.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import EditButton from "./EditButton.svelte";
+  import { editMode } from "./store";
+
+  export let value: string | null | undefined;
+  export let type: "text" | "textarea" = "text";
+  let inputMode = false;
+  let input: HTMLElement;
+
+  function key(e: KeyboardEvent) {
+    if (e.key == "Enter") {
+      input.blur();
+    }
+  }
+</script>
+
+{#if $editMode && inputMode}
+  {#if type == "text"}
+    <input
+      bind:this="{input}"
+      on:blur="{() => (inputMode = false)}"
+      on:keypress="{key}"
+      type="text"
+      bind:value
+    />
+  {:else if type == "textarea"}
+    <textarea
+      bind:this="{input}"
+      on:blur="{() => (inputMode = false)}"
+      on:keypress="{key}"
+      bind:value
+      cols="70"
+      rows="5"
+    ></textarea>
+  {/if}
+{:else}
+  {value}
+  {#if $editMode}
+    <EditButton bind:inputMode />
+  {/if}
+{/if}
diff --git a/src/lib/ExportBlock.svelte b/src/lib/ExportBlock.svelte
index 92e30ad..e23f5cd 100644
--- a/src/lib/ExportBlock.svelte
+++ b/src/lib/ExportBlock.svelte
@@ -4,15 +4,17 @@
   import { current, shouldRefresh } from "./store";
   import { exportQuestions } from "./util";
 
-  let exportBlock: HTMLTextAreaElement;
+  let exportBlock: HTMLTextAreaElement | null;
 
   current.subscribe(() => {
     if (exportBlock) exportBlock.value = "";
   });
 
   shouldRefresh.subscribe(() => {
-    if (exportBlock) exportQuestions(exportBlock);
-    $shouldRefresh = false;
+    if (exportBlock) {
+      exportQuestions(exportBlock);
+      $shouldRefresh = false;
+    }
   });
 </script>
 
@@ -33,14 +35,14 @@
     readonly
     placeholder="{$current == null
       ? 'No template is selected, so this is pointless :3'
-      : 'Hit the button to refresh me!'}"
+      : 'Write some words and text will appear!'}"
   ></textarea><br />
 </label>
 <div class="export-buttons">
   <button
-    on:click="{() => {
+    on:click="{async () => {
       if (exportBlock && exportBlock.value.length > 0) {
-        navigator.clipboard.writeText(exportBlock.value);
+        await navigator.clipboard.writeText(exportBlock.value);
         alert('Copied to clipboard!');
       } else {
         alert('Nothing to copy!');
diff --git a/src/lib/ImportModal.svelte b/src/lib/ImportModal.svelte
new file mode 100644
index 0000000..b38780b
--- /dev/null
+++ b/src/lib/ImportModal.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { current, importModalOpen } from "./store";
+  import validate from "./types/template.validator";
+
+  let dialog: HTMLDialogElement;
+  let importArea: HTMLTextAreaElement;
+
+  function importEnter(evt: KeyboardEvent) {
+    if (evt.key === "Enter") {
+      importModal();
+    }
+  }
+
+  function importModal() {
+    const template = importArea.value;
+    console.log(template);
+
+    try {
+      const data = validate(JSON.parse(template));
+      $current = data;
+      $importModalOpen = false;
+      dialog.close();
+    } catch (e) {
+      alert("Invalid template!");
+    }
+  }
+
+  $: if ($importModalOpen) dialog.showModal();
+</script>
+
+<dialog
+  bind:this="{dialog}"
+  on:close="{() => ($importModalOpen = false)}"
+  class="import-modal"
+>
+  <div>
+    <p>
+      To import a template, you must paste the template code into the box below.
+      and then click the import button or hit enter.
+    </p>
+    <textarea
+      bind:this="{importArea}"
+      rows="20"
+      cols="100"
+      on:keypress="{importEnter}"
+    ></textarea>
+    <div class="horizontal">
+      <button class="import" on:click="{importModal}">Import</button>
+    </div>
+  </div>
+</dialog>
+
+<style lang="scss">
+  button.import {
+    background-color: color-mix(in srgb, #242424 80%, #0f0 20%);
+
+    @media (prefers-color-scheme: light) {
+      background-color: color-mix(in srgb, #f9f9f9 80%, #0f0 20%);
+    }
+  }
+
+  dialog.import-modal {
+    max-width: 64em;
+    border-radius: 0.5em;
+    border: 2px ridge rgba(255, 255, 255, 0.44);
+    padding: 0;
+
+    @media (prefers-color-scheme: light) {
+      border: 4px ridge rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  dialog::backdrop {
+    background: blur(5px);
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  dialog > div {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    gap: 0.5em;
+  }
+
+  div.horizontal {
+    display: flex;
+    flex-direction: row;
+    place-items: center;
+    place-content: space-between;
+    gap: 1em;
+  }
+</style>
diff --git a/src/lib/PermissionModal.svelte b/src/lib/PermissionModal.svelte
new file mode 100644
index 0000000..81bd187
--- /dev/null
+++ b/src/lib/PermissionModal.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { permissionGranted, permissionModalOpen } from "./store";
+
+  let dialog: HTMLDialogElement;
+
+  function allowPermission() {
+    console.debug("Permission granted");
+    $permissionModalOpen = false;
+    $permissionGranted = true;
+    dialog.close();
+  }
+
+  function denyPermission() {
+    console.debug("Permission denied");
+    $permissionModalOpen = false;
+    $permissionGranted = false;
+    dialog.close();
+  }
+
+  $: if ($permissionModalOpen) dialog.showModal();
+</script>
+
+<dialog
+  bind:this="{dialog}"
+  on:close="{() => ($permissionModalOpen = false)}"
+  class="permission-modal"
+>
+  <div>
+    <p>
+      To save/load custom templates, this website requires the use of <a
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API"
+        >LocalStorage</a
+      >. This is a feature of your browser that allows websites to store data on
+      your computer. This data is only accessible by this website, and is not
+      shared with anyone else.
+    </p>
+    <p>
+      However, if you do not want anything stored, simply say no. You will still
+      be able to edit, export, and import templates, but won't be able to save
+      them without saying yes.
+    </p>
+    <p>
+      To my knowledge, this isn't a security issue, but I'm not an expert, and
+      you don't know what you don't know.
+    </p>
+    <p>
+      Note that you will have to hit 'Save'/'Load' again, this is a limitation
+      of v3 of the experiment, and might not remain in the final version.
+    </p>
+    <div class="horizontal">
+      <button class="allow" on:click="{allowPermission}"
+        >Grant Permission</button
+      >
+      <button class="deny" on:click="{denyPermission}"
+        >Deny and Clear LocalStorage</button
+      >
+    </div>
+  </div>
+</dialog>
+
+<style lang="scss">
+  button.allow {
+    background-color: color-mix(in srgb, #242424 80%, #0f0 20%);
+
+    @media (prefers-color-scheme: light) {
+      background-color: color-mix(in srgb, #f9f9f9 80%, #0f0 20%);
+    }
+  }
+
+  button.deny {
+    background-color: color-mix(in srgb, #242424 80%, #f00 20%);
+
+    @media (prefers-color-scheme: light) {
+      background-color: color-mix(in srgb, #f9f9f9 80%, #f00 20%);
+    }
+  }
+
+  dialog.permission-modal {
+    max-width: 32em;
+    border-radius: 0.5em;
+    border: 2px ridge rgba(255, 255, 255, 0.44);
+    padding: 0;
+
+    @media (prefers-color-scheme: light) {
+      border: 4px ridge rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  dialog::backdrop {
+    background: blur(5px);
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  dialog > div {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    gap: 0.1em;
+  }
+
+  div.horizontal {
+    display: flex;
+    flex-direction: row;
+    place-items: center;
+    place-content: space-between;
+    gap: 1em;
+  }
+</style>
diff --git a/src/lib/Question.svelte b/src/lib/Question.svelte
index 58f94c4..d75dbf1 100644
--- a/src/lib/Question.svelte
+++ b/src/lib/Question.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+  import EditableText from "./EditableText.svelte";
   import QuestionTitle from "./QuestionTitle.svelte";
-  import type { TemplateQuestion } from "./template";
+  import { editMode } from "./store";
+  import type { TemplateQuestion } from "./types/template";
 
   export let question: TemplateQuestion;
   export let questionChanged: (
@@ -33,8 +35,30 @@
 
 <li class="question" data-question="{question.question}">
   <label>
-    <QuestionTitle {changed}>{question.question}</QuestionTitle>
-    {#if type === "textarea"}
+    <QuestionTitle {changed}
+      ><EditableText bind:value="{question.question}" /> <slot /></QuestionTitle
+    >
+    {#if $editMode}
+      <p><EditableText bind:value="{question.placeholder}" /></p>
+      <label style="flex-direction: row; gap: 0.5em;">
+        <span>What type of question is this?</span>
+        <select bind:value="{question.type}">
+          <option value="textarea">Text area</option>
+          <option value="text">Text box</option>
+          <option value="number">Number</option>
+        </select>
+      </label>
+      {#if question.type === "textarea" || question.type === "text"}
+        <label style="flex-direction: row; gap: 0.5em;">
+          <span>How large the text area/box should be:</span>
+          <select bind:value="{question.length}">
+            <option value="short">Short</option>
+            <option value="medium">Medium</option>
+            <option value="long">Long</option>
+          </select>
+        </label>
+      {/if}
+    {:else if type === "textarea"}
       {@const { length } = question}
       <textarea
         data-flub="{question.placeholder}"
diff --git a/src/lib/Questionnaire.svelte b/src/lib/Questionnaire.svelte
index 5f1f8f1..59bc1dc 100644
--- a/src/lib/Questionnaire.svelte
+++ b/src/lib/Questionnaire.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { PlusIcon, XIcon } from "svelte-feather-icons";
+  import EditableText from "./EditableText.svelte";
   import Section from "./Section.svelte";
-  import { changed, current, shouldRefresh } from "./store";
-  import type { TemplateSection } from "./template";
-
-  $: template = $current;
+  import { changed, current, editMode, shouldRefresh } from "./store";
+  import type { TemplateSection } from "./types/template";
 
   let sectionMap: Map<string, boolean> = new Map();
 
@@ -19,45 +19,94 @@
       $shouldRefresh = true;
     }
   }
+
+  function addSection() {
+    current.update((c) => {
+      if (c)
+        c.sections.push({
+          title: "New Section",
+          description: "New Section's Description",
+          questions: []
+        });
+
+      return c;
+    });
+  }
+
+  function deleteSection(i: number) {
+    current.update((c) => {
+      if (c) c.sections.splice(i, 1);
+
+      return c;
+    });
+  }
 </script>
 
-{#if template == null}
+<p style="font-size: 0.75em;">Note: the sections are collapsible :3</p>
+{#if $editMode}
+  <p style="padding: 0 0.25em;">
+    When in edit mode, questions will not display the answer box, instead
+    displaying a selection box for their type and an editable text for their
+    placeholder. Clicking outside of, or hitting enter inside of, the text boxes
+    that appear will save the changes.
+  </p>
+{/if}
+{#if $current == null}
   <p>No template is currently selected. Please remain calm and select one:3</p>
 {:else}
-  {#key template}
-    <h2 class="template-title">{template.name}</h2>
-    {#if template.author}
-      <!-- check if it's an Author type -->
-      {#if template.author instanceof Object}
-        <h5 class="template-author">
-          by <a
-            href="{template.author.url}"
-            title="A link to the author of the template."
-            >{template.author.name}</a
+  <h2 class="template-title">
+    <EditableText bind:value="{$current.name}" />
+  </h2>
+  {#if $current.author}
+    <!-- check if it's an Author type -->
+    {#if $current.author instanceof Object}
+      <h5 class="template-author">
+        by <a
+          href="{$current.author.url}"
+          title="A link to the author of the template."
+          >{$current.author.name}</a
+        >
+      </h5>
+    {:else}
+      <h5 class="template-author">
+        by <EditableText bind:value="{$current.author}" />
+      </h5>
+    {/if}
+  {/if}
+  <p class="template-description">
+    <EditableText type="textarea" bind:value="{$current.description}" />
+  </p>
+  <hr />
+  {#if $editMode}
+    <button class="edit-button" on:click="{addSection}">
+      <PlusIcon size="1x" />Add Section
+    </button>
+  {/if}
+  {#if $current.sections.length > 0}
+    {#each $current.sections as section, i}
+      <Section {section} {sectionChanged}>
+        {#if $editMode}
+          <button
+            class="edit-button"
+            on:click="{() => {
+              deleteSection(i);
+            }}"
+            title="Delete this section."
           >
-        </h5>
-      {:else}
-        <h5 class="template-author">by {template.author}</h5>
+            <XIcon size="1x" />
+          </button>
+        {/if}
+      </Section>
+      {#if i !== $current.sections.length - 1}
+        <hr />
       {/if}
-    {/if}
-    <p class="template-description">
-      {template.description}
+    {/each}
+  {:else}
+    <p>
+      There are no sections in this template. You can add more once I implement
+      this feature.
     </p>
-    <hr />
-    {#if template.sections.length > 0}
-      {#each template.sections as section, i}
-        <Section {section} {sectionChanged} />
-        {#if i !== template.sections.length - 1}
-          <hr />
-        {/if}
-      {/each}
-    {:else}
-      <p>
-        There are no sections in this template. You can add more once I
-        implement this feature.
-      </p>
-    {/if}
-  {/key}
+  {/if}
 {/if}
 
 <style lang="scss">
diff --git a/src/lib/Section.svelte b/src/lib/Section.svelte
index 6ede612..be4b97d 100644
--- a/src/lib/Section.svelte
+++ b/src/lib/Section.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+  import { PlusIcon } from "svelte-feather-icons";
+  import EditableText from "./EditableText.svelte";
   import Question from "./Question.svelte";
   import SectionTitle from "./SectionTitle.svelte";
-  import type { TemplateQuestion, TemplateSection } from "./template";
+  import { current, editMode } from "./store";
+  import type { TemplateQuestion, TemplateSection } from "./types/template";
 
   export let section: TemplateSection;
   export let sectionChanged: (
@@ -27,21 +30,66 @@
 
     count = Array.from(questionMap.values()).filter((v) => v).length;
   }
+
+  function addQuestion() {
+    current.update((c) => {
+      if (c)
+        section.questions.push({
+          question: "New Question",
+          type: "textarea",
+          length: "medium",
+          placeholder: "New Placeholder"
+        });
+
+      return c;
+    });
+  }
+
+  function removeQuestion(i: number) {
+    current.update((c) => {
+      if (c) section.questions.splice(i, 1);
+
+      return c;
+    });
+  }
 </script>
 
 <details class="section" data-section="{section.title}">
   <summary title="Click to expand/collapse">
     <SectionTitle {changed}
-      >{section.title} ({count}/{section.questions.length})</SectionTitle
+      ><EditableText bind:value="{section.title}" /> ({count}/{section.questions
+        .length}) <slot /></SectionTitle
     >
     {#if section.description}
-      <p class="section-description">{section.description}</p>
+      <p class="section-description">
+        <EditableText type="textarea" bind:value="{section.description}" />
+      </p>
     {/if}
   </summary>
   <ul class="section-questions">
+    {#if $editMode}
+      <li>
+        <button
+          class="edit-button"
+          title="Add a new question to this section."
+          on:click="{addQuestion}"
+          ><PlusIcon size="1x" />Add a new question</button
+        >
+      </li>
+    {/if}
     {#if section.questions.length > 0}
-      {#each section.questions as question}
-        <Question bind:question {questionChanged} />
+      {#each section.questions as question, i}
+        <Question bind:question {questionChanged}>
+          {#if $editMode}
+            <button
+              class="edit-button"
+              title="Remove this question from the section."
+              on:click="{() => {
+                removeQuestion(i);
+              }}">Remove</button
+            >
+          {/if}
+        </Question>
       {/each}
     {:else}
       <p>
diff --git a/src/lib/store.ts b/src/lib/store.ts
index a6ff546..558813b 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,9 +1,21 @@
 import { writable } from "svelte/store";
-import { type Template } from "./template";
+import { type Template } from "./types/template";
 
 export const current = writable(null as Template | null);
 export const changed = writable(false);
 export const shouldRefresh = writable(false);
+export const editMode = writable(false);
 export const permissionGranted = writable(
   localStorage.getItem("permissionGranted") === "true"
 );
+
+permissionGranted.subscribe((value) => {
+  if (value) {
+    localStorage.setItem("permissionGranted", value.toString());
+  } else {
+    localStorage.clear();
+  }
+});
+
+export const permissionModalOpen = writable(false);
+export const importModalOpen = writable(false);
diff --git a/src/lib/template.ts b/src/lib/template.ts
index 7413990..3572070 100644
--- a/src/lib/template.ts
+++ b/src/lib/template.ts
@@ -1,44 +1,7 @@
-export interface TemplateAuthor {
-  name: string;
-  url: string;
-}
-
-export interface Template {
-  name: string;
-  author?: TemplateAuthor | string;
-  description: string;
-  sections: TemplateSection[];
-}
-
-export interface TemplateSection {
-  title: string;
-  description?: string;
-  questions: TemplateQuestion[];
-}
-
-export interface TemplateQuestionBase {
-  question: string;
-  placeholder?: string;
-}
-
-export interface TemplateTextQuestion extends TemplateQuestionBase {
-  type: "text";
-  length?: "short" | "medium" | "long";
-}
-
-export interface TemplateTextareaQuestion extends TemplateQuestionBase {
-  type: "textarea";
-  length?: "short" | "medium" | "long";
-}
-
-export interface TemplateNumberQuestion extends TemplateQuestionBase {
-  type: "number";
-}
-
-export type TemplateQuestion =
-  | TemplateTextQuestion
-  | TemplateTextareaQuestion
-  | TemplateNumberQuestion;
+import { blake3 } from "hash-wasm";
+import { get, writable } from "svelte/store";
+import { permissionGranted, permissionModalOpen } from "./store";
+import type { Template } from "./types/template";
 
 const CHARACTER_TEMPLATE: Template = {
   name: "Character",
@@ -1086,11 +1049,52 @@ export const DEFAULT_TEMPLATES: Template[] = [
 ];
 
 const ls = localStorage.getItem("savedTemplates") ?? "[]";
-export const savedTemplates: Template[] = JSON.parse(ls) as Template[];
+export const savedTemplates = writable(JSON.parse(ls) as Template[]);
+
+export async function hashTemplate(template: Template): Promise<string> {
+  const temp = { ...template };
+  temp.id = "HASHING_ID";
+  const hash = await blake3(JSON.stringify(temp));
+
+  return hash;
+}
+
+export async function saveToLocalStorage(template: Template) {
+  if (get(permissionGranted)) {
+    template.id = await hashTemplate(template);
+
+    savedTemplates.update((c) => [...c, template]);
+    localStorage.setItem("savedTemplates", JSON.stringify(get(savedTemplates)));
+  } else {
+    permissionModalOpen.set(true);
+  }
+}
+
+export async function savedToLocalStorage() {
+  if (get(permissionGranted)) {
+    for (const template of get(savedTemplates)) {
+      const hash = await hashTemplate(template);
+
+      savedTemplates.update((c) => {
+        const index = c.findIndex((t) => t == template);
+        c[index].id = hash;
+        return c;
+      });
+    }
+
+    localStorage.setItem("savedTemplates", JSON.stringify(get(savedTemplates)));
+  } else {
+    permissionModalOpen.set(true);
+  }
+}
 
 export function getTemplate(name: string): Template | null {
+  if (name.includes("|")) {
+    name = name.split("|")[0].trim();
+  }
+
   return (
-    [...DEFAULT_TEMPLATES, ...savedTemplates].find(
+    [...DEFAULT_TEMPLATES, ...get(savedTemplates)].find(
       (template) => template.name === name
     ) ?? null
   );
diff --git a/src/lib/types/template.ts b/src/lib/types/template.ts
new file mode 100644
index 0000000..07b362d
--- /dev/null
+++ b/src/lib/types/template.ts
@@ -0,0 +1,42 @@
+export interface TemplateAuthor {
+  name: string;
+  url: string;
+}
+
+export interface Template {
+  name: string;
+  author?: TemplateAuthor | string;
+  id?: string;
+  description: string;
+  sections: TemplateSection[];
+}
+
+export interface TemplateSection {
+  title: string;
+  description?: string;
+  questions: TemplateQuestion[];
+}
+
+export interface TemplateQuestionBase {
+  question: string;
+  placeholder?: string;
+}
+
+export interface TemplateTextQuestion extends TemplateQuestionBase {
+  type: "text";
+  length?: "short" | "medium" | "long";
+}
+
+export interface TemplateTextareaQuestion extends TemplateQuestionBase {
+  type: "textarea";
+  length?: "short" | "medium" | "long";
+}
+
+export interface TemplateNumberQuestion extends TemplateQuestionBase {
+  type: "number";
+}
+
+export type TemplateQuestion =
+  | TemplateTextQuestion
+  | TemplateTextareaQuestion
+  | TemplateNumberQuestion;
diff --git a/src/lib/types/template.validator.ts b/src/lib/types/template.validator.ts
new file mode 100644
index 0000000..d828219
--- /dev/null
+++ b/src/lib/types/template.validator.ts
@@ -0,0 +1,165 @@
+/* eslint-disable */
+// generated by typescript-json-validator
+import Ajv from "ajv";
+import inspect from "object-inspect";
+import { type Template } from "./template";
+
+export const ajv: Ajv = new Ajv({
+  allErrors: true,
+  coerceTypes: false,
+  useDefaults: true
+});
+
+export type { Template };
+export const TemplateSchema = {
+  $schema: "http://json-schema.org/draft-07/schema#",
+  definitions: {
+    TemplateAuthor: {
+      properties: {
+        name: {
+          type: "string"
+        },
+        url: {
+          type: "string"
+        }
+      },
+      required: ["name", "url"],
+      type: "object"
+    },
+    TemplateNumberQuestion: {
+      properties: {
+        placeholder: {
+          type: "string"
+        },
+        question: {
+          type: "string"
+        },
+        type: {
+          enum: ["number"],
+          type: "string"
+        }
+      },
+      required: ["question", "type"],
+      type: "object"
+    },
+    TemplateSection: {
+      properties: {
+        description: {
+          type: "string"
+        },
+        questions: {
+          items: {
+            anyOf: [
+              {
+                $ref: "#/definitions/TemplateTextQuestion"
+              },
+              {
+                $ref: "#/definitions/TemplateTextareaQuestion"
+              },
+              {
+                $ref: "#/definitions/TemplateNumberQuestion"
+              }
+            ]
+          },
+          type: "array"
+        },
+        title: {
+          type: "string"
+        }
+      },
+      required: ["questions", "title"],
+      type: "object"
+    },
+    TemplateTextQuestion: {
+      properties: {
+        length: {
+          enum: ["long", "medium", "short"],
+          type: "string"
+        },
+        placeholder: {
+          type: "string"
+        },
+        question: {
+          type: "string"
+        },
+        type: {
+          enum: ["text"],
+          type: "string"
+        }
+      },
+      required: ["question", "type"],
+      type: "object"
+    },
+    TemplateTextareaQuestion: {
+      properties: {
+        length: {
+          enum: ["long", "medium", "short"],
+          type: "string"
+        },
+        placeholder: {
+          type: "string"
+        },
+        question: {
+          type: "string"
+        },
+        type: {
+          enum: ["textarea"],
+          type: "string"
+        }
+      },
+      required: ["question", "type"],
+      type: "object"
+    }
+  },
+  properties: {
+    author: {
+      anyOf: [
+        {
+          $ref: "#/definitions/TemplateAuthor"
+        },
+        {
+          type: "string"
+        }
+      ]
+    },
+    description: {
+      type: "string"
+    },
+    id: {
+      type: "string"
+    },
+    name: {
+      type: "string"
+    },
+    sections: {
+      items: {
+        $ref: "#/definitions/TemplateSection"
+      },
+      type: "array"
+    }
+  },
+  required: ["description", "name", "sections"],
+  type: "object"
+};
+
+export type ValidateFunction<T> = ((data: unknown) => data is T) &
+  Pick<Ajv.ValidateFunction, "errors">;
+
+export const isTemplate = ajv.compile(
+  TemplateSchema
+) as ValidateFunction<Template>;
+
+export default function validate(value: unknown): Template {
+  if (isTemplate(value)) {
+    return value;
+  } else {
+    throw new Error(
+      ajv.errorsText(
+        isTemplate.errors!.filter((e: any) => e.keyword !== "if"),
+        { dataVar: "Template" }
+      ) +
+        "\n\n" +
+        inspect(value)
+    );
+  }
+}
diff --git a/todo.md b/todo.md
index 3a320ba..dd1540c 100644
--- a/todo.md
+++ b/todo.md
@@ -1,8 +1,6 @@
 # A TODO list of things I want to implement
 
 - [ ] Creation/modification/saving of templates
-
   - [ ] Ask for permission to use localStorage to store user templates before doing it (https://svelte.dev/examples/modal)
-
 - [ ] Import/export of templates (json)
 - [ ] Other export formats than markdown (html, pdf, etc.)