Refactor to make full file list completely non-reactive because pinia persistence was causing long delays especially while searching when there were a lot of files. Implement better ghosts that do not alter the file list.

2026-02-04 02:03:22 +00:00
parent 1af6cd82fe
commit 8270dd0cc2
10 changed files with 178 additions and 51 deletions
@@ -3,7 +3,7 @@
    <component :is="cog" :class="['cog', { stopped: store.dialog === 'accessdenied' || store.authInProgress }]"/>
    <p v-if="store.dialog === 'accessdenied'">Access Denied</p>
    <p v-else-if="!store.connected">No Connection</p>
-    <p v-else-if="store.document.length === 0">Waiting for File List</p>
+    <p v-else-if="store.documentCount === 0">Waiting for File List</p>
    <p v-else-if="store.query">No matches!</p>
    <p v-else-if="!exists(props.path)">Folder not found</p>
    <p v-else>Empty folder</p>
@@ -251,8 +251,7 @@ const mkdir = (doc: Doc, name: string) => {
  })
  doc.name = name
  doc.key = crypto.randomUUID()
-  doc.ghost = true
-  store.document.push(doc)
+  store.addGhost(doc)
  editing.value = null
 }
 const showFolderBreadcrumb = (i: number) => {
@@ -351,13 +350,13 @@ const copyImage = async (doc: Doc) => {

 const deleteFile = (doc: Doc) => {
  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-  doc.ghost = true
+  store.hideDoc(path)
  const control = connect(controlUrl, {
    message(ev: MessageEvent) {
      const res = JSON.parse(ev.data)
      if ('error' in res) {
        console.error('Delete failed', res.error)
-        doc.ghost = false
+        store.unhideDoc(path)
        store.showToast(res.error.message || 'Delete failed')
      } else if (res.status === 'ack') {
        store.showToast(`🗑️ Deleted ${doc.name}`)
@@ -205,8 +205,7 @@ const mkdir = (doc: Doc, name: string) => {
  })
  doc.name = name
  doc.key = crypto.randomUUID()
-  doc.ghost = true
-  store.document.push(doc)
+  store.addGhost(doc)
  editing.value = null
 }
 const showFolderBreadcrumb = (i: number) => {
@@ -295,13 +294,13 @@ const copyImage = async (doc: Doc) => {

 const deleteFile = (doc: Doc) => {
  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-  doc.ghost = true
+  store.hideDoc(path)
  const control = connect(controlUrl, {
    message(ev: MessageEvent) {
      const res = JSON.parse(ev.data)
      if ('error' in res) {
        console.error('Delete failed', res.error)
-        doc.ghost = false
+        store.unhideDoc(path)
        store.showToast(res.error.message || 'Delete failed')
      } else if (res.status === 'ack') {
        store.showToast(`🗑️ Deleted ${doc.name}`)
@@ -31,23 +31,30 @@ const props = defineProps({
 const dst = computed(() => props.path!.join('/'))
 const op = (opName: string, dst?: string) => {
  const sel = store.selectedFiles
+  const paths = sel.keys.map(key => {
+    const doc = sel.docs[key]!
+    return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  })
  const msg = {
    op: opName,
-    sel: sel.keys.map(key => {
-      const doc = sel.docs[key]!
-      return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-    })
+    sel: paths
  }
  // @ts-ignore
  if (dst !== undefined) msg.dst = dst
-  if (opName === 'rm' || opName === 'mv')
-    for (const key of sel.keys) sel.docs[key]!.ghost = true
+  // Hide items being deleted or moved (optimistic update)
+  if (opName === 'rm' || opName === 'mv') {
+    for (const path of paths) store.hideDoc(path)
+  }
  const control = connect(controlUrl, {
    message(ev: MessageEvent) {
      const res = JSON.parse(ev.data)
      if ('error' in res) {
        console.error('Control socket error', msg, res.error)
        store.error = res.error.message
+        // Restore hidden items on error
+        if (opName === 'rm' || opName === 'mv') {
+          for (const path of paths) store.unhideDoc(path)
+        }
        return
      } else if (res.status === 'ack') {
        console.log('Control ack OK', res)
@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import { connect, uploadUrl } from '@/repositories/WS';
 import { useMainStore } from '@/stores/main'
+import { getDocuments } from '@/stores/documentStore'
 import { Doc } from '@/repositories/Document'
 import { collator } from '@/utils';
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
@@ -98,7 +99,12 @@ const uploadCloudFiles = (files: CloudFile[]) => {
  files.sort((a, b) => collator.compare(a.cloudName, b.cloudName))
  // Optimistic update: ghost folders and files
  const now = Math.floor(Date.now() / 1000)
-  const byPath = store.docsByPath
+  const docs = getDocuments()
+  const byPath = new Map(docs.map(d => [d.loc ? `${d.loc}/${d.name}` : d.name, d]))
+  // Also check existing ghosts
+  for (const g of store.ghosts) {
+    byPath.set(g.loc ? `${g.loc}/${g.name}` : g.name, g)
+  }
  const added = new Set<string>()
  for (const f of files) {
    const lastSlash = f.cloudName.lastIndexOf('/')
@@ -109,14 +115,13 @@ const uploadCloudFiles = (files: CloudFile[]) => {
    for (let i = 0; i < parts.length; i++) {
      const folderPath = parts.slice(0, i + 1).join('/')
      if (folderPath && !byPath.has(folderPath) && !added.has(folderPath)) {
-        store.document.push(new Doc({ loc: parts.slice(0, i).join('/'), name: parts[i], key: crypto.randomUUID(), size: 0, mtime: now, dir: true, ghost: true }))
+        store.addGhost(new Doc({ loc: parts.slice(0, i).join('/'), name: parts[i], key: crypto.randomUUID(), size: 0, mtime: now, dir: true }))
        added.add(folderPath)
      }
    }
-    // Ghost file or update existing
+    // Ghost file or update existing (overwrite case doesn't need ghost, file already visible)
    const existing = byPath.get(f.cloudName)
-    if (existing) { existing.size = f.file.size; existing.mtime = now; existing.ghost = true }
-    else store.document.push(new Doc({ loc, name, key: crypto.randomUUID(), size: f.file.size, mtime: now, dir: false, ghost: true }))
+    if (!existing) store.addGhost(new Doc({ loc, name, key: crypto.randomUUID(), size: f.file.size, mtime: now, dir: false }))
  }
  // @ts-ignore
  upqueue = [...upqueue, ...files]