editor/index.html

<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
</style>
<script type="module">
class FileGroup extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.headerEl = document.createElement('div')
    this.filesEl = document.createElement('div')
    this.shadowRoot.appendChild(this.headerEl)
    this.shadowRoot.appendChild(this.filesEl)
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
      div.header {
        display: flex;
        flex-direction: row;
      }
      div.files {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow-y: auto;
      }
    `
    this.shadowRoot.appendChild(style)
    this.addNewFile()
  }

  addNewFile() {
    const el = document.createElement('m-file-view')
    this.filesEl.appendChild(el)
  }
}

class FileView extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.headerEl = document.createElement('div')
    this.headerEl.classList.add('header')
    this.contentEl = document.createElement('div')
    this.shadowRoot.appendChild(this.headerEl)
    this.shadowRoot.appendChild(this.contentEl)
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
      div.header {
        display: flex;
        flex-direction: row;
        background: yellow;
      }
      .name {
        flex-grow: 1;
      }
    `
    this.shadowRoot.appendChild(style)
    this.nameEl = document.createElement('input')
    this.nameEl.classList.add('name')
    this.headerEl.appendChild(this.nameEl)
  }
}

customElements.define('m-file-group', FileGroup)
customElements.define('m-file-view', FileView)

const fileGroup = document.createElement('m-file-group')
document.body.appendChild(fileGroup)
</script>

<!--

Each file has a header with the filename, an edit icon, and a menu icon. When editing or creating a new one, the filename is a text field. When not editing, tapping on the filename expands and collapses it.

Tapping on a line selects it and shows icons, tapping on another line selects down to that line.

At the top is a dropdown for selecting the file and a button for.

After all the files is a plus skeleton icon bar.

-->