check if exists before creating page, switch to editing mode

components/header.js

@@ -309,14 +309,31 @@ export class Header extends HTMLElement {
     const input = document.createElement('input')
     input.value = '/'
     input.style.minWidth = '300px'
-    dialog.bodyEl.appendChi
+    dialog.bodyEl.appendChild(input)
+    let errorEl
     const bGroup = document.createElement(
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.createPage, () => {
       const newPath = this.encodePath(input.value)
+      const v = localStorage.getItem(newPath)
+      if (v !== null || newPath === this.path) {
+        if (!errorEl) {
+          errorEl = document.createElement('p')
+          errorEl.style.color = 'red'
+          const errText = this.text.alreadyExists
+          errorEl.innerText = errText
+          dialog.bodyEl.appendChild(errorEl)
+          return
+        }
+        return
+      }
+      localStorage.setItem(newPath, '')
       location.hash = newPath
       dialog.close()
+      this.dispatchEvent(new CustomEvent(
+        'create-page', {bubbles: true}
+      ))
     })
     bGroup.addCancel(this.text.cancel, () => {
       dialog.close()

components/layout.js

@@ -28,6 +28,9 @@ export class Layout extends HTMLElement {
     this.header.addEventListener('click-edit', () => {
       this.editing = !this.editing
     })
+    this.header.addEventListener('create-page', () => {
+      this.editing = true
+    })
     this.shadowRoot.appendChild(this.header)
     this.load()
     addEventListener('hashchange', () => {