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>

cista-front/src/stores/documents.ts

@@ -29,6 +29,7 @@ export type DocumentStore = {
   uploadCount: number
   wsWatch: WebSocket | undefined
   wsUpload: WebSocket | undefined
+  fileExplorer: any
   user: User
   error: string
 }
@@ -43,6 +44,7 @@ export const useDocumentStore = defineStore({
     uploadCount: 0 as number,
     wsWatch: undefined,
     wsUpload: undefined,
+    fileExplorer: null,
     error: '' as string,
     user: {
       username: '',

cista-front/src/views/ExplorerView.vue

@@ -7,6 +7,7 @@
     @leave="leave"
   >
     <FileExplorer
+      ref="fileExplorer"
       :path="Router.currentRoute.value.path"
       :documents="documentStore.mainDocument"
     />
@@ -14,12 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { watchEffect, ref } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import Router from '@/router/index'
 
 const documentStore = useDocumentStore()
+const fileExplorer = ref()
 
+watchEffect(() => { documentStore.fileExplorer = fileExplorer.value })
 watchEffect(async () => {
   const path = new String(Router.currentRoute.value.path) as string
   documentStore.setActualDocument(path.toString())