Merge pull request 'create from template' (#77) from templates into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/77

app.js

@@ -1,3 +1,4 @@
+import { Storage } from "/storage/storage.js"
 import { Layout } from "/components/layout.js"
 import { Page } from "/components/page.js"
 import { PageActions } from "/components/page-actions.js"
@@ -7,14 +8,26 @@ import { NavMenu } from "/components/nav-menu.js"
 import { Dialog } from "/dialog/dialog.js"
 import { ButtonGroup } from "/forms/button-group.js"
 import { Dropdown } from "/menu/dropdown.js"
+import { NetworkSettings } from "/settings/network-settings.js"
 import { PageSettings } from "/settings/page-settings.js"
+import { Connections } from "/settings/connections.js"
+import { ConnectionEdit } from "/settings/connection-edit.js"
 
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
 customElements.define('m-page-actions', PageActions)
+customElements.define(
+  'm-settings-network-settings', NetworkSettings
+)
 customElements.define(
   'm-settings-page-settings', PageSettings
 )
+customElements.define(
+  'm-settings-connections', Connections
+)
+customElements.define(
+  'm-settings-connection-edit', ConnectionEdit
+)
 customElements.define(
   'm-file-group-page', FileGroupPage
 )
@@ -29,6 +42,13 @@ customElements.define(
 )
 
 class Setup {
+  constructor() {
+    this.layout = document.createElement(
+      'm-layout'
+    )
+    this.layout.storage = new Storage()
+  }
+
   async runWithSw() {
     navigator.serviceWorker.addEventListener(
       'controllerchange',
@@ -43,12 +63,10 @@ class Setup {
   }
 
   async runWithoutSw() {
-    const layout = document.createElement(
+    this.layout.storage = new Storage()
-      'm-layout'
+    this.layout.csp = undefined
-    )
+    this.layout.header.menu.handleLinks = true
-    layout.csp = undefined
+    document.body.appendChild(this.layout)
-    layout.header.menu.handleLinks = true
-    document.body.appendChild(layout)
   }
 
   async register() {
@@ -58,6 +76,9 @@ class Setup {
           '/sw.js',
           {scope: '/'}
         )
+      if (this.registration.waiting) {
+        this.registration.active.postMessage(['skipWaiting'])
+      }
     } catch (err) {
       console.error(
         'error registering service worker', err
@@ -68,7 +89,7 @@ class Setup {
   load() {
     if (this.registration.active) {
       document.body.appendChild(
-        document.createElement('m-layout')
+        this.layout
       )
     }
   }

components/file-group-page.js

@@ -29,7 +29,10 @@ addEventListener('message', event => {
     frame !== undefined && event.source == frame.contentWindow
   )
   if (isChild) {
-    parent.postMessage(event.data, '*')
+    const transferArg = (
+      event.ports?.length ? [[...event.ports]] : []
+    )
+    parent.postMessage(event.data, '*', ...transferArg)
   } else {
     let isNew = false
     const d = event.data
@@ -44,7 +47,12 @@ addEventListener('message', event => {
         document.body.appendChild(frame)
       }
     } else if (frame !== undefined) {
-      frame.contentWindow.postMessage(event.data, '*')
+      const transferArg = (
+        event.ports?.length ? [[...event.ports]] : []
+      )
+      frame.contentWindow.postMessage(
+        event.data, '*', ...transferArg
+      )
     }
   }
 })
@@ -167,7 +175,11 @@ export class FileGroupPage extends HTMLElement {
 
   async displayEdit() {
     const doc = await this.editorBuild.build()
-    const msg = ['srcdoc', doc]
+    const msg = [
+      'srcdoc',
+      doc,
+      {codeMirror: this.settings.codeMirror},
+    ]
     this.editFrame.contentWindow.postMessage(
       msg, '*'
     )
@@ -184,13 +196,23 @@ export class FileGroupPage extends HTMLElement {
   }
 
   async handleViewMessage(event) {
+    if (Array.isArray(event.data)) {
+      if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('view', event)
+      }
+    }
   }
 
   async handleEditMessage(event) {
     if (Array.isArray(event.data)) {
       if (event.data[0] === 'ready') {
         this.editFrame.contentWindow.postMessage(
-          ['doc', this.body], '*'
+          [
+            'doc',
+            this.body,
+            {codeMirror: !!(this.settings.codeMirror)}
+          ],
+          '*'
         )
       } else if (event.data[0] === 'html') {
         const html = event.data[1]
@@ -198,13 +220,88 @@ export class FileGroupPage extends HTMLElement {
       } else if (event.data[0] === 'save') {
         const doc = event.data[1]
         this.body = doc
+      } else if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('edit', event)
+      } else if (event.data[0] === 'load') {
+        if (event.data[1] === '/editor-lib-codemirror/codemirror-bundle.js') {
+          const url = event.data[1]
+          const resp = await fetch(url)
+          const text = await resp.text()
+          const port = event.ports[0]
+          port.postMessage({
+            status: 200,
+            body: text,
+          })
+          port.close()
+        }
       }
     }
   }
 
+  async handleRequestMessage(frame, event) {
+    if (event.ports.length === 1) {
+      const port = event.ports[0]
+      const method = event.data[0]
+      const path = event.data[1]
+      const access = this.getAccess(path)
+      if (method === 'get') {
+        if (['read', 'readWrite'].includes(access)) {
+          port.postMessage({
+            status: 200,
+            body: this.getPage(path),
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      } else if (method === 'put') {
+        const body = event.data[2]
+        if (access === 'readWrite') {
+          this.setPage(path, body)
+          port.postMessage({
+            status: 200,
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      }
+      port.close()
+    } else {
+      throw new Error('request message without port')
+    }
+  }
+
+  getAccess(path) {
+    const settings = this.settings
+    const outbound = settings.connections?.outbound
+    if (outbound && outbound[path]) {
+      return outbound[path]
+    }
+  }
+
+  getPage(path) {
+    const body = this.storage.getItem(path)
+    try {
+      return JSON.parse(body)
+    } catch (err) {
+      return body
+    }
+  }
+
+  setPage(path, body) {
+    let value = body
+    if (typeof value !== 'string') {
+      value = JSON.stringify(value)
+    }
+    this.storage.setItem(path, value)
+  }
+
   set body(value) {
     try {
-      localStorage.setItem(this.path, value)
+      this.storage.setItem(this.path, value)
     } catch (err) {
       console.error(err)
     }
@@ -212,7 +309,7 @@ export class FileGroupPage extends HTMLElement {
 
   get body() {
     try {
-      return localStorage.getItem(this.path)
+      return this.storage.getItem(this.path)
     } catch (err) {
       console.error(err)
       return ''
@@ -221,7 +318,7 @@ export class FileGroupPage extends HTMLElement {
 
   set settings(value) {
     try {
-      localStorage.setItem(
+      this.storage.setItem(
         'settings/page:' + this.path,
         JSON.stringify(value)
       )
@@ -233,7 +330,7 @@ export class FileGroupPage extends HTMLElement {
   get settings() {
     let data
     try {
-      data = localStorage.getItem(
+      data = this.storage.getItem(
         'settings/page:' + this.path
       )
       if (data === null || data === undefined) {
@@ -254,9 +351,11 @@ export class FileGroupPage extends HTMLElement {
     if (this.cspOff) {
       return undefined
     } else {
-      return this.cspProfiles[
+      return (
-        this.settings.networkAccess
+        this.settings.networkAccess in this.cspProfiles ?
-      ] ?? this.cspProfiles.local
+        this.cspProfiles[this.settings.networkAccess] :
+        this.cspProfiles.local
+      )
     }
   }
 

components/header.js

@@ -28,6 +28,7 @@ export class Header extends HTMLElement {
     htmlCss: 'HTML/CSS',
     singleFile: 'Single File',
     newPage: 'New Page',
+    go: 'Go',
   }
 
   textEs = {
@@ -40,6 +41,7 @@ export class Header extends HTMLElement {
     htmlCss: 'HTML/CSS',
     singleFile: 'Archivo único',
     newPage: 'Nueva Página',
+    go: 'Ir',
   }
 
   constructor() {
@@ -50,11 +52,12 @@ export class Header extends HTMLElement {
     this.appBar = document.createElement('div')
     this.appBar.classList.add('app-bar')
     this.shadowRoot.appendChild(this.appBar)
-    this.addButton(this.icons.menu, 'nav', () => {
+    const navBtn = this.addButton(
-      this.menu.pages = this.getPages()
+      this.icons.menu,
-      this.menuPanel.classList.add('open')
+      'nav',
-      this.overlay.classList.add('open')
+      () => this.openNav(),
-    }).classList.add('left-end')
+    )
+    navBtn.classList.add('left-end')
     this.addButton(this.icons.add, 'add', () => {
       this.addPage()
     })
@@ -185,6 +188,13 @@ export class Header extends HTMLElement {
     this.menu.addEventListener('close-menu', () => {
       this.close()
     })
+    this.menu.addEventListener(
+      'click-location',
+      () => {
+        this.close()
+        this.navPage()
+      },
+    )
   }
 
   addPageMenu() {
@@ -194,6 +204,14 @@ export class Header extends HTMLElement {
     this.shadowRoot.appendChild(this.pageMenu)
   }
 
+  openNav() {
+    this.menu.location = this.path
+    this.menu.pages = this.getPages()
+    this.menu.storageUse = this.getStorageUse()
+    this.menuPanel.classList.add('open')
+    this.overlay.classList.add('open')
+  }
+
   close() {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
@@ -204,7 +222,21 @@ export class Header extends HTMLElement {
   }
 
   getPages() {
-    return Object.keys(localStorage).slice().sort()
+    return (
+      this.storage.keys().slice()
+      .filter(s => s.startsWith('/'))
+      .sort()
+    )
+  }
+
+  getStorageUse() {
+    let bytes = 0
+    const entries = this.storage.entries()
+    for (const [k, v] of entries) {
+      bytes += k.length
+      bytes += v.length
+    }
+    return bytes / 5000000
   }
 
   set editing(value) {
@@ -222,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)
@@ -237,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+$/)
@@ -251,7 +306,7 @@ export class Header extends HTMLElement {
     )
     bGroup.addPrimary(this.text.createPage, () => {
       const newPath = this.encodePath(input.value)
-      const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
       if (v !== null || newPath === this.path) {
         if (!errorEl) {
           errorEl = document.createElement('p')
@@ -263,10 +318,9 @@ export class Header extends HTMLElement {
         }
         return
       }
-      const value = (
+      let value
-        select.value === 'singleFile' ?
+      if (select.value === 'htmlCss')  {
-        '' :
+        value = JSON.stringify({
-        JSON.stringify({
           type: 'm-file-group',
           files: [
             {
@@ -279,9 +333,13 @@ export class Header extends HTMLElement {
             },
           ],
         })
-      )
+      } else {
-      localStorage.setItem(newPath, value)
+        value = this.storage.getItem(
-      localStorage.setItem(
+          select.value
+        ) ?? ''
+      }
+      this.storage.setItem(newPath, value)
+      this.storage.setItem(
         'settings/page:' + newPath, '{}'
       )
       location.hash = newPath
@@ -297,6 +355,30 @@ export class Header extends HTMLElement {
     dialog.open()
   }
 
+  navPage() {
+    const dialog = document.createElement('m-dialog')
+    this.dialogWrap.replaceChildren(dialog)
+    const input = document.createElement('input')
+    input.value = this.path
+    input.style.minWidth = '300px'
+    dialog.bodyEl.appendChild(input)
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.go, () => {
+      dialog.close()
+      location.hash = (
+        input.value.startsWith('/') ?
+        input.value : '/'
+      )
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
   get language() {
     return this._language
   }

components/layout.js

@@ -3,7 +3,7 @@ import { EditorBuild } from "/loader/editor-build.js"
 export class Layout extends HTMLElement {
   cspProfiles = {
     local: "default-src 'self' 'unsafe-inline' 'unsafe-eval'",
-    jsCdns: "default-src cdn.jsdelivr.com data.jsdelivr.com unpkg.com 'self' 'unsafe-inline' 'unsafe-eval'",
+    unpkg: "default-src unpkg.com 'self' 'unsafe-inline' 'unsafe-eval'",
     open: undefined,
   }
 
@@ -68,9 +68,10 @@ export class Layout extends HTMLElement {
 
   load() {
     const path = this.path
+    this.editing = false
     const prevPage = this.page
     let isGroup = false
-    const body = localStorage.getItem(path) || ''
+    const body = this.storage.getItem(path) || ''
     if (body.match(/^\s*{/)) {
       try {
         const bodyData = JSON.parse(body)
@@ -85,6 +86,7 @@ export class Layout extends HTMLElement {
     this.page = document.createElement(
       isGroup ? 'm-file-group-page' : 'm-page'
     )
+    this.page.storage = this.storage
     if (isGroup) {
       this.page.cspOff = this.csp === undefined
       this.page.cspProfiles = this.cspProfiles
@@ -116,7 +118,7 @@ export class Layout extends HTMLElement {
   }
 
   set editing(value) {
-    sessionStorage.setItem(
+    this.storage.session.setItem(
       'editing', value ? 'true' : 'false'
     )
     this.header.editing = this.editing
@@ -128,7 +130,7 @@ export class Layout extends HTMLElement {
   get editing() {
     try {
       return (
-        sessionStorage.getItem('editing') === 'true'
+        this.storage.session.getItem('editing') === 'true'
       )
     } catch (e) {
       return false
@@ -141,4 +143,14 @@ export class Layout extends HTMLElement {
     }
     return this._editorBuild
   }
+
+  set storage(value) {
+    this._storage = value
+    this.header.storage = value
+    this.pageActions.storage = value
+  }
+
+  get storage() {
+    return this._storage
+  }
 }

components/nav-menu.js

@@ -1,4 +1,17 @@
 export class NavMenu extends HTMLElement {
+  textByLang = {
+    en: {
+      pages: 'Pages',
+      localStorage: 'Local storage',
+      full: 'full',
+    },
+    es: {
+      pages: 'Páginas',
+      localStorage: 'Almacenamiento local',
+      full: 'lleno',
+    },
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
@@ -14,8 +27,21 @@ export class NavMenu extends HTMLElement {
         display: flex;
         flex-direction: column;
         color: #000;
+        height: 100dvh;
         max-height: 100dvh;
       }
+      .location-bar {
+        padding: 5px 25px;
+        display: flex;
+        flex-direction: row;
+      }
+      .location-box {
+        border: 2px solid #aaa;
+        border-radius: 3px;
+        flex-grow: 1;
+        padding: 5px;
+        font-size: 14px;
+      }
       h1 {
         width: 100%;
         text-align: center;
@@ -32,15 +58,45 @@ export class NavMenu extends HTMLElement {
         display: block;
         margin: 8px 10px;
       }
+      .footer {
+        padding: 3px 5px;
+      }
     `
     this.shadowRoot.append(style)
+    this.locationBar = document.createElement(
+      'div'
+    )
+    this.locationBar.classList.add(
+      'location-bar'
+    )
+    this.locationBox = document.createElement(
+      'div'
+    )
+    this.locationBox.classList.add(
+      'location-box'
+    )
+    this.locationBar.append(this.locationBox)
+    this.locationBox.addEventListener(
+      'click',
+      () => {
+        this.dispatchEvent(new CustomEvent(
+          'click-location', {bubbles: true}
+        ))
+      }
+    )
+    this.shadowRoot.append(this.locationBar)
+    this.renderLocation()
     this.header = document.createElement('h1')
-    this.header.innerText = this.pagesText
+    this.header.innerText = this.text.pages
     this.shadowRoot.append(this.header)
     this.pageList = document.createElement('div')
     this.pageList.classList.add('page-list')
     this.shadowRoot.append(this.pageList)
     this.renderPageList()
+    this.footer = document.createElement('div')
+    this.footer.classList.add('footer')
+    this.shadowRoot.append(this.footer)
+    this.renderFooter()
     this.shadowRoot.addEventListener('click', e => {
       if (e.target.classList.contains('page')) {
         if (this.handleLinks) {
@@ -63,14 +119,28 @@ export class NavMenu extends HTMLElement {
 
   set language(language) {
     this._language = language
+    this.text = this.textByLang[
+      this.langEs ? 'es' : 'en'
+    ]
   }
 
   get langEs() {
     return /^es\b/.test(this.language)
   }
 
-  get pagesText() {
+  set location(location) {
-    return this.langEs ? 'Páginas' : 'Pages'
+    this._location = location
+    if (this.locationBox) {
+      this.renderLocation()
+    }
+  }
+
+  get location() {
+    return this._location
+  }
+
+  renderLocation() {
+    this.locationBox.innerText = this.location
   }
 
   set pages(pages) {
@@ -94,4 +164,35 @@ export class NavMenu extends HTMLElement {
     })
     this.pageList.replaceChildren(...els)
   }
+
+  set storageUse(n) {
+    this._storageUse = n
+    if (this.footer) {
+      this.renderFooter()
+    }
+  }
+
+  get storageUse() {
+    return this._storageUse
+  }
+
+  renderFooter() {
+    if (this.storageUse !== undefined) {
+      const fmt = new Intl.NumberFormat(
+        this.language,
+        {
+          style: 'percent',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        },
+      )
+      this.footer.innerText = (
+        this.text.localStorage + ' ' +
+        fmt.format(
+          this.storageUse
+        ).replaceAll(/\s+/g, '') + ' ' +
+        this.text.full
+      )
+    }
+  }
 }

components/page-actions.js

@@ -80,7 +80,7 @@ export class PageActions extends HTMLElement {
   }
 
   download() {
-    const text = localStorage.getItem(this.path)
+    const text = this.storage.getItem(this.path)
     const sp = this.path.split('/')
     const filename = sp[sp.length - 1]
     const el = document.createElement('a')
@@ -111,7 +111,7 @@ export class PageActions extends HTMLElement {
     )
     bGroup.addPrimary(this.text.rename, () => {
       const newPath = input.value
-      const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
       if (v !== null || newPath === this.path) {
         if (!errorEl) {
           errorEl = document.createElement('p')
@@ -122,18 +122,36 @@ export class PageActions extends HTMLElement {
         }
         return
       }
-      localStorage.setItem(
+      const sKeyOld = 'settings/page:' + this.path
+      const sKeyNew = 'settings/page:' + newPath
+      const settingsJson = this.storage.getItem(sKeyOld)
+      if (settingsJson ?? true === true) {
+        this.storage.setItem(sKeyNew, settingsJson)
+        this.storage.removeItem(sKeyOld)
+        let settingsData
+        try {
+          settingsData = JSON.parse(settingsJson)
+        } catch (err) {
+          settingsData = {}
+        }
+        if (settingsData?.connections) {
+          for (const dir of ['outbound', 'inbound']) {
+            const otherDir = (
+              dir === 'outbound' ? 'inbound' : 'outbound'
+            )
+            this.applyInverseRename(
+              settingsData, dir, otherDir, this.path, newPath
+            )
+          }
+        }
+      } else {
+        this.storage.removeItem(sKeyNew)
+      }
+      this.storage.setItem(
         newPath,
-        localStorage.getItem(this.path)
+        this.storage.getItem(this.path)
-      )
-      localStorage.setItem(
-        'settings/page:' + newPath,
-        localStorage.getItem(this.path)
-      )
-      localStorage.removeItem(this.path)
-      localStorage.removeItem(
-        'settings/page:' + newPath,
       )
+      this.storage.removeItem(this.path)
       dialog.close()
       location.hash = newPath
     })
@@ -160,7 +178,7 @@ export class PageActions extends HTMLElement {
     const btnText = this.text.duplicate
     bGroup.addPrimary(btnText, () => {
       const newPath = input.value
-      const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
       if (v !== null || newPath === this.path) {
         if (!errorEl) {
           errorEl = document.createElement('p')
@@ -171,13 +189,13 @@ export class PageActions extends HTMLElement {
         }
         return
       }
-      localStorage.setItem(
+      this.storage.setItem(
         newPath,
-        localStorage.getItem(this.path)
+        this.storage.getItem(this.path)
       )
-      localStorage.setItem(
+      this.storage.setItem(
         'settings/page:' + newPath,
-        localStorage.getItem(this.path) ?? '{}'
+        this.storage.getItem(this.path) ?? '{}'
       )
       dialog.close()
       location.hash = newPath
@@ -204,8 +222,8 @@ export class PageActions extends HTMLElement {
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.delete_, () => {
-      localStorage.removeItem(this.path)
+      this.storage.removeItem(this.path)
-      localStorage.removeItem(
+      this.storage.removeItem(
         'settings/page:' + this.path
       )
       location.hash = '/'
@@ -227,13 +245,30 @@ export class PageActions extends HTMLElement {
       'm-settings-page-settings'
     )
     settingsEl.cspProfiles = this.cspProfiles
+    settingsEl.path = this.path
+    settingsEl.checkExists = path => (
+      this.storage.getItem(path) !== null
+    )
     settingsEl.data = this.page.settings
-    dialog.bodyEl.appendChild(settingsEl)
+    const h = document.createElement('h2')
+    h.innerText = this.text.settings
+    dialog.headerEl.append(h)
+    dialog.bodyEl.append(settingsEl)
     const bGroup = document.createElement(
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.save, () => {
-      this.page.settings = settingsEl.data
+      const settingsData = settingsEl.data
+      this.page.settings = settingsData
+      for (const dir of ['outbound', 'inbound']) {
+        const otherDir = (
+          dir === 'outbound' ? 'inbound' : 'outbound'
+        )
+        this.applyInverseSettings(
+          settingsData, dir, otherDir
+        )
+      }
+      this.applyTemplateSettings()
       dialog.close()
       this.dispatchEvent(new CustomEvent(
         'settings-change', {bubbles: true, composed: true}
@@ -246,6 +281,87 @@ export class PageActions extends HTMLElement {
     dialog.open()
   }
 
+  applyInverseSettings(settingsData, dir, otherDir) {
+    const selfEntries = Object.entries(
+      settingsData.connections[dir]
+    )
+    for (const [path, access] of selfEntries) {
+      const key = 'settings/page:' + path
+      let val = this.storage.getItem(key)
+      try {
+        if (val !== null) {
+          val = JSON.parse(val)
+        }
+      } catch (err) {
+        // ignore
+      }
+      const data = val ?? {}
+      data.connections = data.connections ?? {}
+      data.connections[otherDir] = (
+        data.connections[otherDir] ?? {}
+      )
+      data.connections[otherDir][this.path] = access
+      this.storage.setItem(
+        key, JSON.stringify(data)
+      )
+    }
+  }
+
+  applyInverseRename(
+    settingsData, dir, otherDir, oldPath, newPath
+  ) {
+    const selfEntries = Object.entries(
+      settingsData.connections[dir] ?? {}
+    )
+    for (const [path, access] of selfEntries) {
+      const key = 'settings/page:' + path
+      let val = this.storage.getItem(key)
+      try {
+        if (val !== null) {
+          val = JSON.parse(val)
+        }
+      } catch (err) {
+        // ignore
+      }
+      const data = val ?? {}
+      data.connections = data.connections ?? {}
+      data.connections[otherDir] = (
+        data.connections[otherDir] ?? {}
+      )
+      const accessValue = data.connections[otherDir][oldPath]
+      data.connections[otherDir][newPath] = accessValue
+      data.connections[otherDir][oldPath] = undefined
+      this.storage.setItem(
+        key, JSON.stringify(data)
+      )
+    }
+  }
+
+  applyTemplateSettings() {
+    const templates = {}
+    for (const key of this.storage.keys()) {
+      try {
+        if (key.startsWith('settings/page:')) {
+          const data = JSON.parse(
+            this.storage.getItem(key)
+          )
+          if (data.template) {
+            const name = key.slice(
+              'settings/page:'.length
+            )
+            templates[name] = {name}
+          }
+        }
+      } catch (err) {
+        // do nothing
+      }
+    }
+    this.storage.setItem(
+      'settings:templates',
+      JSON.stringify({templates}),
+    )
+  }
+
   get language() {
     return this._language
   }

components/page.js

@@ -141,7 +141,7 @@ export class Page extends HTMLElement {
 
   set body(value) {
     try {
-      localStorage.setItem(this.path, value)
+      this.storage.setItem(this.path, value)
     } catch (err) {
       console.error(err)
     }
@@ -149,7 +149,7 @@ export class Page extends HTMLElement {
 
   get body() {
     try {
-      return localStorage.getItem(this.path)
+      return this.storage.getItem(this.path)
     } catch (err) {
       console.error(err)
       return ''

sw.js

@@ -13,12 +13,19 @@ async function initCache() {
     '/editor/file-group.js',
     '/editor/file-view.js',
     '/editor/text-edit.js',
+    '/editor/code-edit.js',
+    '/editor/header.js',
     '/forms/button-group.js',
     '/index.html',
     '/loader/builder.js',
     '/loader/editor-build.js',
     '/menu/dropdown.js',
     '/settings/page-settings.js',
+    '/settings/network-settings.js',
+    '/settings/connections.js',
+    '/settings/connection-edit.js',
+    '/editor-lib-codemirror/codemirror-bundle.js',
+    '/storage/storage.js', //2
   ])
 }
 
@@ -56,3 +63,9 @@ self.addEventListener('fetch', event => {
 self.addEventListener('activate', event => {
   event.waitUntil(clients.claim())
 })
+
+self.addEventListener('message', e => {
+  if (Array.isArray(e.data) && e.data[0] === 'skipWaiting') {
+    self.skipWaiting()
+  }
+})