Create from template

components/header.js

@@ -254,6 +254,22 @@ export class Header extends HTMLElement {
     return this.editing ? this.icons.check : this.icons.edit
   }
 
+  getTemplates() {
+    const text = this.storage.getItem(
+      'settings:templates'
+    )
+    if (text ?? undefined !== undefined) {
+      const data = JSON.parse(text)
+      return Object.entries(
+        data.templates
+      ).map(([id, data]) => (
+        {...data, id}
+      ))
+    } else {
+      return []
+    }
+  }
+
   addPage() {
     const dialog = document.createElement('m-dialog')
     this.dialogWrap.replaceChildren(dialog)
@@ -269,6 +285,13 @@ export class Header extends HTMLElement {
       el.innerText = this.text[value]
       return el
     }))
+    const templates = this.getTemplates()
+    select.append(...templates.map(t => {
+      const el = document.createElement('option')
+      el.value = t.id
+      el.innerText = t.name
+      return el
+    }))
     select.value = 'htmlCss'
     input.addEventListener('input', e => {
       const ext = e.target.value.match(/\.\w+$/)
@@ -295,10 +318,9 @@ export class Header extends HTMLElement {
         }
         return
       }
-      const value = (
-        select.value === 'singleFile' ?
-        '' :
-        JSON.stringify({
+      let value
+      if (select.value === 'htmlCss')  {
+        value = JSON.stringify({
           type: 'm-file-group',
           files: [
             {
@@ -311,7 +333,11 @@ export class Header extends HTMLElement {
             },
           ],
         })
-      )
+      } else {
+        value = this.storage.getItem(
+          select.value
+        ) ?? ''
+      }
       this.storage.setItem(newPath, value)
       this.storage.setItem(
         'settings/page:' + newPath, '{}'

components/page-actions.js

@@ -349,7 +349,7 @@ export class PageActions extends HTMLElement {
             const name = key.slice(
               'settings/page:'.length
             )
-            settings[name] = {name}
+            templates[name] = {name}
           }
         }
       } catch (err) {