Remove extra new folder button, instead make header button work

cista-front/src/components/FileExplorer.vue

@@ -1,6 +1,5 @@
 <template>
   <main>
-    <button @click="newFolder">New Folder</button>
     <table v-if="props.documents.length || editing">
       <thead>
         <tr>
@@ -140,18 +139,20 @@ const rename = (doc: FolderDocument, newName: string) => {
   }
   doc.name = newName // We should get an update from watch but this is quicker
 }
-const newFolder = () => {
-  const now = Date.now() / 1000
-  editing.value = {
-    key: 'new',
-    name: 'New Folder',
-    type: 'folder',
-    mtime: now,
-    size: 0,
-    sizedisp: formatSize(0),
-    modified: formatUnixDate(now)
-  }
-}
+defineExpose({
+  newFolder() {
+    const now = Date.now() / 1000
+    editing.value = {
+      key: 'new',
+      name: 'New Folder',
+      type: 'folder',
+      mtime: now,
+      size: 0,
+      sizedisp: formatSize(0),
+      modified: formatUnixDate(now)
+    }
+  },
+})
 const mkdir = (doc: FolderDocument, name: string) => {
   const control = createWebSocket('/api/control', (ev: MessageEvent) => {
     const msg = JSON.parse(ev.data)

cista-front/src/components/HeaderMain.vue

@@ -31,7 +31,7 @@ const executeSearch = (ev: InputEvent) => {
   <nav>
     <div class="buttons">
       <UploadButton />
-      <SvgButton name="create-folder" />
+      <SvgButton name="create-folder" @click="() => documentStore.fileExplorer.newFolder()"/>
       <template v-if="true">
         <div class="smallgap"></div>
         <p>N selected files:</p>