story: Added add story modal, reorganized story page to allow modals and live updates.

marko/components/modal/style.less

@@ -14,6 +14,15 @@ div.overlay {
   h1 {
     text-align: center;
   }
+
+  h2 {
+    opacity: 0.5;
+    margin: 0;
+    margin-top: 1em;
+    border-bottom: 0.5px solid;
+    padding-bottom: 0.125em;
+    text-align: center;
+  }
   
   div.modal {
     width: 60ch;

marko/components/story-tag-options/component.js

@@ -0,0 +1,62 @@
+const {tagApi} = require("../../../rpdata/api/Tag")
+
+module.exports = class {
+  onCreate() {
+    this.state = {
+      values: {
+        name: "",
+        kind: "Character",
+      },
+      tags: [],
+      suggestions: [],
+    }
+  }
+
+  onMount() {
+    tagApi.list().then(list => {
+      this.state.tags = list
+    }).catch(err => {})
+
+    this.getEl("name").addEventListener("keydown", ev => {
+      setTimeout(() => {
+        const name = this.getEl("name").value
+        const kind = this.getEl("kind").value
+        const search = name.toLowerCase()
+
+        this.state.values = {name, kind}
+        this.state.suggestions = []
+
+        const suggestions = this.state.tags.filter(t => t.name.toLowerCase().includes(search))
+        if (suggestions.length > 0 && suggestions.length < 20) {
+          if (suggestions.length > 1 || suggestions[0].name !== name) {
+            this.state.suggestions = suggestions
+          }
+        }
+      }, 100)
+    })
+  }
+  
+  add(tag) {
+    this.state.values = {
+      kind: "Event",
+      name: "",
+    }
+
+    this.emit("add", tag)
+  }
+
+  change(key, ev) {
+    const value = ev.target.value
+
+    this.state.values[key] = value
+  }
+
+  applySuggestion(tag) {
+    this.state.values = {
+      name: tag.name,
+      kind: tag.kind,
+    }
+
+    this.state.suggestions = []
+  }
+}

marko/components/story-tag-options/index.marko

@@ -0,0 +1,23 @@
+<div class="tag-options">
+  <label>Tag Name</label>
+  <input key="name" placeholder="Name" on-change("change", "name") value=state.values.name />
+  <label>Tag Kind</label>
+  <select key="kind" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
+    <option value="Character" selected=(state.values.kind === "Character")>Character</option>
+    <option value="Event" selected=(state.values.kind === "Event")>Event</option>
+    <option value="Location" selected=(state.values.kind === "Location")>Location</option>
+    <option value="Organization" selected=(state.values.kind === "Organization")>Organization</option>
+    <option value="Series" selected=(state.values.kind === "Series")>Series</option>
+  </select>
+  <div class="suggestion-list" if(state.suggestions.length > 0)>
+    <div class="header color-menu">Suggestions:</div>
+    <a for(tag in state.suggestions) on-click("applySuggestion", tag) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a>
+  </div>
+
+  <button disabled=(input.loading) on-click("add", state.values)>Add</button>
+
+  <div for(tag in (input.tags || [])) class="tag" key=(tag.kind+":"+tag.name)>
+    <div class=("content color-tag-"+tag.kind.toLowerCase())>${tag.name}</div>
+    <button on-click("emit", "remove", tag)>Remove</button>
+  </div>
+</div>

marko/components/story-tag-options/style.less

@@ -0,0 +1,46 @@
+div.tag-options {
+  div.tag {
+    padding: 0.25em;
+    border-bottom: 1px solid rgba(0, 220, 255, 0.125);
+
+    div.content {
+      width: 80%;
+      display: inline-block;
+    }
+
+    button {
+      width: 20%;
+      display: inline-block;
+      margin: 0;
+    }
+  }
+
+  div.suggestion-list {
+    margin: 2em 0;
+
+    a.tag {
+      display: inline-block;
+      margin: 0.25em 0.5ch;
+      padding: 0.0625em 0.5ch;
+  
+      outline: 1px solid;
+      opacity: 0.75;
+      
+      user-select: none;
+    }
+    a.tag:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
+  
+    div.header {
+      display: block;
+      margin: 0.5em 0.5ch;
+      padding: 0.0625em 0.5ch;
+  
+      opacity: 0.5;
+      
+      user-select: none;
+    }
+  }
+}