story-content: Added remove story modal, added annotations

marko/page/story-content/components/page/component.js

@@ -3,6 +3,7 @@ module.exports = class {
     this.state = {
       story: input.story,
       modal: null,
+      removed: false,
     }
   }
 
@@ -60,6 +61,10 @@ module.exports = class {
     this.refreshStory()
   }
 
+  timeToDie() {
+    this.state.removed = true
+  }
+
   refreshStory() {
     this.state.story = Object.assign({}, this.state.story)
   }

marko/page/story-content/components/page/index.marko

@@ -1,11 +1,22 @@
 <story-content-menu key="menu" on-select("menuSelect") story=state.story selected=(input.selected || {}) user=input.user />
 <main>
   <div class="story-content">
-    <h1 class="color-primary">${state.story.name}</h1>
+    <div class="header">
+      <h1 class="color-primary">${state.story.name}</h1>
+      <a on-click("open", "story.edit") class="color-menu">Edit</a>
+      <a on-click("open", "story.remove") class="color-menu">Remove</a>
+    </div>
     <story-tags tags=state.story.tags on-select("open", "story.tags")/>
+    <annotation if(state.removed) level="error">
+      <p>
+        This story has been removed. Your browser has not refreshed the page yet, 
+        so you can still read it (or back it up) before leaving the page.
+      </p>
+    </annotation>
     <chapter for(chapter in state.story.chapters) key=chapter.id chapter=chapter on-edit("updateChapter", chapter.id) on-remove("removeChapter", chapter.id)/>
   </div>
 
   <create-chapter-modal storyId=state.story.id enabled=(state.modal === "chapter.add") chapter=input.chapter on-close("close") on-add("addChapter") />
   <edit-story-tags-modal enabled=(state.modal === "story.tags") story=state.story on-tags("updateStoryTags") on-close("close") />
+  <remove-story-modal enabled=(state.modal === "story.remove") story=state.story on-remove("timeToDie") on-close("close") />
 </main>

marko/page/story-content/components/page/style.less

@@ -7,4 +7,27 @@
     font-weight: 200;
     text-align: center;
   }
+
+  .header {
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 1em;
+    
+    h1 {
+      vertical-align: middle;
+      display: block;
+      margin-bottom: 0;
+    }
+    
+    a {
+      vertical-align: middle;
+      display: inline-block;
+      padding: 0.5em 0.5ch 0.5em 0.5ch;
+      opacity: 0.5;
+    }
+    a:hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
 }