Rewrite document store to keep all docs: filter and path selection without recreation. Much faster sorting and filtering.

cista-front/src/components/FileExplorer.vue

@@ -92,6 +92,7 @@
               "
           /></template>
           <template v-else>
+            <span class="loc" v-if="doc.loc.join('/') !== props.path.join('/')">{{ doc.loc.join('/') + '/'}}</span>
             <a
               :href="url_for(doc)"
               tabindex="-1"
@@ -136,7 +137,7 @@ import { useDocumentStore } from '@/stores/documents'
 import type { Document, FolderDocument } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import createWebSocket from '@/repositories/WS'
-import { formatSize, formatUnixDate } from '@/utils'
+import { collator, formatSize, formatUnixDate } from '@/utils'
 import { useRouter } from 'vue-router'
 
 const props = withDefaults(
@@ -292,8 +293,7 @@ const toggleSort = (name: string) => {
 }
 const sort = ref<string>('')
 const sortCompare = {
-  name: (a: Document, b: Document) =>
-    a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }),
+  name: (a: Document, b: Document) => collator.compare(a.name, b.name),
   modified: (a: FolderDocument, b: FolderDocument) => b.mtime - a.mtime,
   size: (a: FolderDocument, b: FolderDocument) => b.size - a.size
 }

cista-front/src/components/HeaderMain.vue

@@ -41,9 +41,10 @@ defineExpose({
         <input
           ref="search"
           type="search"
+          v-model="documentStore.search"
           class="margin-input"
+          @blur="() => { if (documentStore.search === '') toggleSearchInput() }"
           @keyup.esc="toggleSearchInput"
-          @input="executeSearch"
         />
       </template>
       <SvgButton ref="searchButton" name="find" @click="toggleSearchInput" />