add file with input for name

index.html

@@ -1,23 +1,70 @@
 <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;
+      }
+      div.header {
+      }
+      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'})
   }
 
   connectedCallback() {
     const style = document.createElement('style')
     style.textContent = `
+      :host {
+        height: 100px;
+        background: #777;
+      }
     `
-    this.shadowRoot.appendChild('style')
+    this.shadowRoot.appendChild(style)
+    this.nameEl = document.createElement('input')
+    this.shadowRoot.appendChild(this.nameEl)
   }
 }
 
-customElements.add('m-file-view', FileView)
+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, the . When not editing, tapping on the filename expands and collapses it.
+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.