Refactoring Document storage (#5)

- Major refactoring that makes Doc a class with properties - Data made only shallow reactive, for a good speedup of initial load - Minor bugfixes and UX improvements along the way - Fixed handling of hash and question marks in URLs (was confusing Vue Router) - Search made stricter to find good results (not ignore all punctuation) Reviewed-on: #5
2023-11-13 17:52:57 +00:00 · 2023-11-13 17:52:57 +00:00 · 41e8c78ecd
commit 41e8c78ecd
parent dc4bb494f3
15 changed files with 141 additions and 248 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -17,7 +17,7 @@ import type { ComputedRef } from 'vue'
 import type HeaderMain from '@/components/HeaderMain.vue'
 import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { loadSession, watchConnect, watchDisconnect } from '@/repositories/WS'
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'

 import { computed } from 'vue'
 import Router from '@/router/index'
@ -27,7 +27,7 @@ interface Path {
  pathList: string[]
  query: string
 }
-const documentStore = useDocumentStore()
+const store = useMainStore()
 const path: ComputedRef<Path> = computed(() => {
  const p = decodeURIComponent(Router.currentRoute.value.path).split('//')
  const pathList = p[0].split('/').filter(value => value !== '')
@ -39,7 +39,7 @@ const path: ComputedRef<Path> = computed(() => {
  }
 })
 watchEffect(() => {
-  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || documentStore.server.name || 'Cista Storage'
+  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || store.server.name || 'Cista Storage'
 })
 onMounted(loadSession)
 onMounted(watchConnect)
@ -48,7 +48,7 @@ const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
 let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
-  const fileExplorer = documentStore.fileExplorer as any
+  const fileExplorer = store.fileExplorer as any
  if (!fileExplorer) return
  const c = fileExplorer.isCursor()
  const keyup = event.type === 'keyup'
@ -124,3 +124,4 @@ onUnmounted(() => {
 })
 export type { Path }
 </script>
+@/stores/main
--- a/frontend/src/components/BreadCrumb.vue
+++ b/frontend/src/components/BreadCrumb.vue
@ -4,7 +4,7 @@
    aria-label="Breadcrumb"
    @keyup.left.stop="move(-1)"
    @keyup.right.stop="move(1)"
-    @focus="move(0)"
+    @keyup.enter="move(0)"
  >
    <a href="#/"
      :ref="el => setLinkRef(0, el)"
@ -48,9 +48,11 @@ const navigate = (index: number) => {
  if (!link) throw Error(`No link at index ${index} (path: ${props.path})`)
  const url = `/${longest.value.slice(0, index).join('/')}/`
  const here = `/${longest.value.join('/')}/`
+  const current = decodeURIComponent(location.hash.slice(1).split('//')[0])
+  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
+  if (here.startsWith(current)) router.replace(u)
+  else router.push(u)
  link.focus()
-  if (here.startsWith(location.hash.slice(1))) router.replace(url)
-  else router.push(url)
 }

 const move = (dir: number) => {
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@ -17,7 +17,7 @@
        <td class="name">
          <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
        </td>
-        <FileModified :doc=editing />
+        <FileModified :doc=editing :key=nowkey />
        <FileSize :doc=editing />
        <td class="menu"></td>
      </tr>
@ -36,11 +36,11 @@
            <input
              type="checkbox"
              tabindex="-1"
-              :checked="documentStore.selected.has(doc.key)"
+              :checked="store.selected.has(doc.key)"
              @change="
                ($event.target as HTMLInputElement).checked
-                  ? documentStore.selected.add(doc.key)
-                  : documentStore.selected.delete(doc.key)
+                  ? store.selected.add(doc.key)
+                  : store.selected.delete(doc.key)
              "
            />
          </td>
@ -50,7 +50,7 @@
            </template>
            <template v-else>
              <a
-                :href="url_for(doc)"
+                :href="doc.url"
                tabindex="-1"
                @contextmenu.prevent
                @focus.stop="cursor = doc"
@ -61,7 +61,7 @@
              <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
            </template>
          </td>
-          <FileModified :doc=doc />
+          <FileModified :doc=doc :key=nowkey />
          <FileSize :doc=doc />
          <td class="menu">
            <button tabindex="-1" @click.stop="contextMenu($event, doc)">⋮</button>
@ -79,28 +79,24 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted, onUnmounted } from 'vue'
-import { useDocumentStore } from '@/stores/documents'
-import type { Document } from '@/repositories/Document'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
+import { useMainStore } from '@/stores/main'
+import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import { connect, controlUrl } from '@/repositories/WS'
-import { collator, formatSize, formatUnixDate } from '@/utils'
+import { collator, formatSize } from '@/utils'
 import { useRouter } from 'vue-router'

 const props = defineProps<{
  path: Array<string>
-  documents: Document[]
+  documents: Doc[]
 }>()
-const documentStore = useDocumentStore()
+const store = useMainStore()
 const router = useRouter()
-const url_for = (doc: Document) => {
-  const p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-  return doc.dir ? `#/${p}/` : `/files/${p}`
-}
-const cursor = ref<Document | null>(null)
+const cursor = shallowRef<Doc | null>(null)
 // File rename
-const editing = ref<Document | null>(null)
-const rename = (doc: Document, newName: string) => {
+const editing = shallowRef<Doc | null>(null)
+const rename = (doc: Doc, newName: string) => {
  const oldName = doc.name
  const control = connect(controlUrl, {
    message(ev: MessageEvent) {
@ -124,7 +120,7 @@ const rename = (doc: Document, newName: string) => {
  }
  doc.name = newName // We should get an update from watch but this is quicker
 }
-const sortedDocuments = computed(() => sorted(props.documents as Document[]))
+const sortedDocuments = computed(() => sorted(props.documents))
 const showFolderBreadcrumb = (i: number) => {
  const docs = sortedDocuments.value
  const docloc = docs[i].loc
@ -132,19 +128,15 @@ const showFolderBreadcrumb = (i: number) => {
 }
 defineExpose({
  newFolder() {
-    const now = Date.now() / 1000
-    editing.value = {
+    const now = Math.floor(Date.now() / 1000)
+    editing.value = new Doc({
      loc: loc.value,
      key: 'new',
      name: 'New Folder',
      dir: true,
      mtime: now,
      size: 0,
-      sizedisp: formatSize(0),
-      modified: formatUnixDate(now),
-      haystack: '',
-    }
-    console.log("New")
+    })
  },
  toggleSelectAll() {
    console.log('Select')
@ -163,10 +155,10 @@ defineExpose({
  cursorSelect() {
    const doc = cursor.value
    if (!doc) return
-    if (documentStore.selected.has(doc.key)) {
-      documentStore.selected.delete(doc.key)
+    if (store.selected.has(doc.key)) {
+      store.selected.delete(doc.key)
    } else {
-      documentStore.selected.add(doc.key)
+      store.selected.add(doc.key)
    }
    this.cursorMove(1)
  },
@ -191,8 +183,8 @@ defineExpose({
      for (let p = begin; p !== end; p = increment(p, 1)) {
        if (p === N) continue
        const key = documents[p].key
-        if (documentStore.selected.has(key)) documentStore.selected.delete(key)
-        else documentStore.selected.add(key)
+        if (store.selected.has(key)) store.selected.delete(key)
+        else store.selected.add(key)
      }
    }
    // @ts-ignore
@ -229,14 +221,14 @@ watchEffect(() => {
    focusBreadcrumb()
  }
 })
-// Update human-readable x seconds ago messages from mtimes
+let nowkey = ref(0)
 let modifiedTimer: any = null
 const updateModified = () => {
-  for (const doc of props.documents) doc.modified = formatUnixDate(doc.mtime)
+  nowkey.value = Math.floor(Date.now() / 1000)
 }
 onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
 onUnmounted(() => { clearInterval(modifiedTimer) })
-const mkdir = (doc: Document, name: string) => {
+const mkdir = (doc: Doc, name: string) => {
  const control = connect(controlUrl, {
    open() {
      control.send(
@ -253,11 +245,13 @@ const mkdir = (doc: Document, name: string) => {
        editing.value = null
      } else {
        console.log('mkdir', msg)
-        router.push(doc.loc ? `/${doc.loc}/${name}/` : `/${name}/`)
+        router.push(doc.urlrouter)
      }
    }
  })
-  doc.name = name // We should get an update from watch but this is quicker
+  // We should get an update from watch but this is quicker
+  doc.name = name
+  doc.key = crypto.randomUUID()
 }

 // Column sort
@ -266,11 +260,11 @@ const toggleSort = (name: string) => {
 }
 const sort = ref<string>('')
 const sortCompare = {
-  name: (a: Document, b: Document) => collator.compare(a.name, b.name),
-  modified: (a: Document, b: Document) => b.mtime - a.mtime,
-  size: (a: Document, b: Document) => b.size - a.size
+  name: (a: Doc, b: Doc) => collator.compare(a.name, b.name),
+  modified: (a: Doc, b: Doc) => b.mtime - a.mtime,
+  size: (a: Doc, b: Doc) => b.size - a.size
 }
-const sorted = (documents: Document[]) => {
+const sorted = (documents: Doc[]) => {
  const cmp = sortCompare[sort.value as keyof typeof sortCompare]
  const sorted = [...documents]
  if (cmp) sorted.sort(cmp)
@ -280,7 +274,7 @@ const selectionIndeterminate = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
-      props.documents.some((doc: Document) => documentStore.selected.has(doc.key)) &&
+      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
      !allSelected.value
    )
  },
@ -291,16 +285,16 @@ const allSelected = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
-      props.documents.every((doc: Document) => documentStore.selected.has(doc.key))
+      props.documents.every((doc: Doc) => store.selected.has(doc.key))
    )
  },
  set: (value: boolean) => {
    console.log('Setting allSelected', value)
    for (const doc of props.documents) {
      if (value) {
-        documentStore.selected.add(doc.key)
+        store.selected.add(doc.key)
      } else {
-        documentStore.selected.delete(doc.key)
+        store.selected.delete(doc.key)
      }
    }
  }
@ -308,7 +302,7 @@ const allSelected = computed({

 const loc = computed(() => props.path.join('/'))

-const contextMenu = (ev: Event, doc: Document) => {
+const contextMenu = (ev: Event, doc: Doc) => {
  cursor.value = doc
  console.log('Context menu', ev, doc)
 }
@ -458,3 +452,4 @@ tbody .selection input {
  color: #888;
 }
 </style>
+@/stores/main
--- a/frontend/src/components/FileModified.vue
+++ b/frontend/src/components/FileModified.vue
@ -5,7 +5,7 @@
 </template>

 <script setup lang="ts">
-import type { Document } from '@/repositories/Document'
+import { Doc } from '@/repositories/Document'
 import { computed } from 'vue'

 const datetime = computed(() =>
@ -17,6 +17,6 @@ const tooltip = computed(() =>
 )

 const props = defineProps<{
-    doc: Document
+    doc: Doc
 }>()
 </script>
--- a/frontend/src/components/FileRenameInput.vue
+++ b/frontend/src/components/FileRenameInput.vue
@ -12,7 +12,7 @@
 </template>

 <script setup lang="ts">
-import type { Document } from '@/repositories/Document'
+import { Doc } from '@/repositories/Document'
 import { ref, onMounted, nextTick } from 'vue'

 const input = ref<HTMLInputElement | null>(null)
@ -28,8 +28,8 @@ onMounted(() => {
 })

 const props = defineProps<{
-  doc: Document
-  rename: (doc: Document, newName: string) => void
+  doc: Doc
+  rename: (doc: Doc, newName: string) => void
  exit: () => void
 }>()

--- a/frontend/src/components/FileSize.vue
+++ b/frontend/src/components/FileSize.vue
@ -3,7 +3,7 @@
 </template>

 <script setup lang="ts">
-import type { Document } from '@/repositories/Document'
+import { Doc } from '@/repositories/Document'
 import { computed } from 'vue'

 const sizeClass = computed(() => {
@ -12,7 +12,7 @@ const sizeClass = computed(() => {
 })

 const props = defineProps<{
-    doc: Document
+    doc: Doc
 }>()
 </script>

--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@ -1,15 +1,15 @@
 <template>
  <nav class="headermain">
    <div class="buttons">
-      <template v-if="documentStore.error">
-        <div class="error-message" @click="documentStore.error = ''">{{ documentStore.error }}</div>
+      <template v-if="store.error">
+        <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
        <div class="smallgap"></div>
      </template>
      <UploadButton :path="props.path" />
      <SvgButton
        name="create-folder"
        data-tooltip="New folder"
-        @click="() => documentStore.fileExplorer!.newFolder()"
+        @click="() => store.fileExplorer!.newFolder()"
      />
      <slot></slot>
      <div class="spacer smallgap"></div>
@ -18,7 +18,6 @@
          ref="search"
          type="search"
          :value="query"
-          @blur="ev => { if (!query) closeSearch(ev) }"
          @input="updateSearch"
          placeholder="Search words"
          class="margin-input"
@ -32,15 +31,19 @@
 </template>

 <script setup lang="ts">
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'
 import { ref, nextTick, watchEffect } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import router from '@/router';

-const documentStore = useDocumentStore()
+const store = useMainStore()
 const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
+  const props = defineProps<{
+  path: Array<string>
+  query: string
+}>()

 const closeSearch = (ev: Event) => {
  if (!showSearchInput.value) return  // Already closing
@ -54,9 +57,9 @@ const updateSearch = (ev: Event) => {
  let p = props.path.join('/')
  p = p ? `/${p}` : ''
  const url = q ? `${p}//${q}` : (p || '/')
-  console.log("Update search", url)
-  if (!props.query && q) router.push(url)
-  else router.replace(url)
+  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
+  if (!props.query && q) router.push(u)
+  else router.replace(u)
 }
 const toggleSearchInput = (ev: Event) => {
  showSearchInput.value = !showSearchInput.value
@ -72,10 +75,10 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
  // show the context menu
  const items = []
-  if (documentStore.user.isLoggedIn) {
-    items.push({ label: `Logout ${documentStore.user.username ?? ''}`, onClick: () => documentStore.logout() })
+  if (store.user.isLoggedIn) {
+    items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
  } else {
-    items.push({ label: 'Login', onClick: () => documentStore.loginDialog() })
+    items.push({ label: 'Login', onClick: () => store.loginDialog() })
  }
  ContextMenu.showContextMenu({
    // @ts-ignore
@ -83,11 +86,6 @@ const settingsMenu = (e: Event) => {
    items,
  })
 }
-const props = defineProps<{
-  path: Array<string>
-  query: string
-}>()
-
 defineExpose({
  toggleSearchInput,
  closeSearch,
@ -116,3 +114,4 @@ input[type='search'] {
  max-width: 30vw;
 }
 </style>
+@/stores/main
--- a/frontend/src/components/HeaderSelected.vue
+++ b/frontend/src/components/HeaderSelected.vue
@ -1,29 +1,29 @@
 <template>
-  <template v-if="documentStore.selected.size">
+  <template v-if="store.selected.size">
    <div class="smallgap"></div>
-    <p class="select-text">{{ documentStore.selected.size }} selected ➤</p>
+    <p class="select-text">{{ store.selected.size }} selected ➤</p>
    <SvgButton name="download" data-tooltip="Download" @click="download" />
    <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
    <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
    <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
-    <button class="action-button unselect" data-tooltip="Unselect all" @click="documentStore.selected.clear()">❌</button>
+    <button class="action-button unselect" data-tooltip="Unselect all" @click="store.selected.clear()">❌</button>
  </template>
 </template>

 <script setup lang="ts">
 import {connect, controlUrl} from '@/repositories/WS'
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
 import type { SelectedItems } from '@/repositories/Document'

-const documentStore = useDocumentStore()
+const store = useMainStore()
 const props = defineProps({
  path: Array<string>
 })

 const dst = computed(() => props.path!.join('/'))
 const op = (op: string, dst?: string) => {
-  const sel = documentStore.selectedFiles
+  const sel = store.selectedFiles
  const msg = {
    op,
    sel: sel.keys.map(key => {
@ -38,12 +38,12 @@ const op = (op: string, dst?: string) => {
      const res = JSON.parse(ev.data)
      if ('error' in res) {
        console.error('Control socket error', msg, res.error)
-        documentStore.error = res.error.message
+        store.error = res.error.message
        return
      } else if (res.status === 'ack') {
        console.log('Control ack OK', res)
        control.close()
-        documentStore.selected.clear()
+        store.selected.clear()
        return
      } else console.log('Unknown control response', msg, res)
    }
@ -108,17 +108,17 @@ const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandl
 }

 const download = async () => {
-  const sel = documentStore.selectedFiles
+  const sel = store.selectedFiles
  console.log('Download', sel)
  if (sel.keys.length === 0) {
    console.warn('Attempted download but no files found. Missing selected keys:', sel.missing)
-    documentStore.selected.clear()
+    store.selected.clear()
    return
  }
  // Plain old a href download if only one file (ignoring any folders)
  const files = sel.recursive.filter(([rel, full, doc]) => !doc.dir)
  if (files.length === 1) {
-    documentStore.selected.clear()
+    store.selected.clear()
    return linkdl(`/files/${files[0][1]}`)
  }
  // Use FileSystem API if multiple files and the browser supports it
@ -130,7 +130,7 @@ const download = async () => {
        mode: 'readwrite'
      })
      filesystemdl(sel, handle).then(() => {
-        documentStore.selected.clear()
+        store.selected.clear()
      })
      return
    } catch (e) {
@ -140,7 +140,7 @@ const download = async () => {
  // Otherwise, zip and download
  const name = sel.keys.length === 1 ? sel.docs[sel.keys[0]].name : 'download'
  linkdl(`/zip/${Array.from(sel.keys).join('+')}/${name}.zip`)
-  documentStore.selected.clear()
+  store.selected.clear()
 }
 </script>

@ -152,3 +152,4 @@ const download = async () => {
  text-overflow: ellipsis;
 }
 </style>
+@/stores/main
--- a/frontend/src/components/LoginModal.vue
+++ b/frontend/src/components/LoginModal.vue
@ -39,10 +39,10 @@
 import { reactive, ref } from 'vue'
 import { loginUser } from '@/repositories/User'
 import type { ISimpleError } from '@/repositories/Client'
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'

 const confirmLoading = ref<boolean>(false)
-const store = useDocumentStore()
+const store = useMainStore()

 const loginForm = reactive({
  username: '',
@ -99,3 +99,4 @@ const login = async () => {
  height: 1em;
 }
 </style>
+@/stores/main
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { connect, uploadUrl } from '@/repositories/WS';
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'
 import { collator } from '@/utils';
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'

 const fileInput = ref()
 const folderInput = ref()
-const documentStore = useDocumentStore()
+const store = useMainStore()
 const props = defineProps({
  path: Array<string>
 })
@ -75,7 +75,7 @@ const uploadFiles = (infiles: File[]) => {
 const uploadCloudFiles = (files: CloudFile[]) => {
  const dotfiles = files.filter(f => f.cloudName.includes('/.'))
  if (dotfiles.length) {
-    documentStore.error = "Won't upload dotfiles"
+    store.error = "Won't upload dotfiles"
    console.log("Dotfiles omitted", dotfiles)
    files = files.filter(f => !f.cloudName.includes('/.'))
  }
@ -171,13 +171,13 @@ const WSCreate = async () => await new Promise<WebSocket>(resolve => {
    open(ev: Event) { resolve(ws) },
    error(ev: Event) {
      console.error('Upload socket error', ev)
-      documentStore.error = 'Upload socket error'
+      store.error = 'Upload socket error'
    },
    message(ev: MessageEvent) {
      const res = JSON.parse(ev!.data)
      if ('error' in res) {
        console.error('Upload socket error', res.error)
-        documentStore.error = res.error.message
+        store.error = res.error.message
        return
      }
      if (res.status === 'ack') {
@ -302,3 +302,4 @@ span {
 .position { min-width: 4em }
 .speed { min-width: 4em }
 </style>
+@/stores/main
--- a/frontend/src/repositories/Document.ts
+++ b/frontend/src/repositories/Document.ts
@ -1,17 +1,42 @@
+import { formatSize, formatUnixDate, haystackFormat } from "@/utils"
+
 export type FUID = string

-export type Document = {
+export type DocProps = {
  loc: string
  name: string
  key: FUID
  size: number
-  sizedisp: string
  mtime: number
-  modified: string
-  haystack: string
  dir: boolean
 }

+export class Doc {
+  private _name: string = ""
+  public loc: string = ""
+  public key: FUID = ""
+  public size: number = 0
+  public mtime: number = 0
+  public haystack: string = ""
+  public dir: boolean = false
+
+  constructor(props: Partial<DocProps> = {}) { Object.assign(this, props) }
+  get name() { return this._name }
+  set name(name: string) {
+    if (name.includes('/') || name.startsWith('.')) throw Error(`Invalid name: ${name}`)
+    this._name = name
+    this.haystack = haystackFormat(name)
+  }
+  get sizedisp(): string { return formatSize(this.size) }
+  get modified(): string { return formatUnixDate(this.mtime) }
+  get url(): string {
+    const p = this.loc ? `${this.loc}/${this.name}` : this.name
+    return this.dir ? '/#/' + `${p}/`.replaceAll('#', '%23') : `/files/${p}`.replaceAll('?', '%3F').replaceAll('#', '%23')
+  }
+  get urlrouter(): string {
+    return this.url.replace(/^\/#/, '')
+  }
+}
 export type errorEvent = {
  error: {
    code: number
@ -36,7 +61,7 @@ export type UpdateEntry = ['k', number] | ['d', number] | ['i', Array<FileEntry>
 // Helper structure for selections
 export interface SelectedItems {
  keys: FUID[]
-  docs: Record<FUID, Document>
-  recursive: Array<[string, string, Document]>
+  docs: Record<FUID, Doc>
+  recursive: Array<[string, string, Doc]>
  missing: Set<FUID>
 }
--- a/frontend/src/repositories/WS.ts
+++ b/frontend/src/repositories/WS.ts
@ -1,4 +1,4 @@
-import { useDocumentStore } from "@/stores/documents"
+import { useMainStore } from "@/stores/main"
 import type { FileEntry, UpdateEntry, errorEvent } from "./Document"

 export const controlUrl = '/api/control'
@ -12,7 +12,7 @@ let wsWatch = null as WebSocket | null
 export const loadSession = () => {
  const s = localStorage['cista-files']
  if (!s) return false
-  const store = useDocumentStore()
+  const store = useMainStore()
  try {
    tree = JSON.parse(s)
    store.updateRoot(tree)
@ -39,7 +39,7 @@ export const watchConnect = () => {
    clearTimeout(watchTimeout)
    watchTimeout = null
  }
-  const store = useDocumentStore()
+  const store = useMainStore()
  if (store.error !== 'Reconnecting...') store.error = 'Connecting...'
  console.log(store.error)

@ -81,7 +81,7 @@ export const watchDisconnect = () => {
 let watchTimeout: any = null

 const watchReconnect = (event: MessageEvent) => {
-  const store = useDocumentStore()
+  const store = useMainStore()
  if (store.connected) {
    console.warn("Disconnected from server", event)
    store.connected = false
@ -114,7 +114,7 @@ const handleWatchMessage = (event: MessageEvent) => {
 }

 function handleRootMessage({ root }: { root: FileEntry[] }) {
-  const store = useDocumentStore()
+  const store = useMainStore()
  console.log('Watch root', root)
  store.updateRoot(root)
  tree = root
@ -122,7 +122,7 @@ function handleRootMessage({ root }: { root: FileEntry[] }) {
 }

 function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
-  const store = useDocumentStore()
+  const store = useMainStore()
  const update = updateData.update
  console.log('Watch update', update)
  if (!tree) return console.error('Watch update before root')
@ -146,7 +146,7 @@ function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
 }

 function handleError(msg: errorEvent) {
-  const store = useDocumentStore()
+  const store = useMainStore()
  if (msg.error.code === 401) {
    store.user.isOpenLoginModal = true
    store.user.isLoggedIn = false
--- a/frontend/src/stores/documents.ts
+++ b/frontend/src/stores/documents.ts
@ -1,132 +0,0 @@
-import type { Document, FileEntry, FUID, SelectedItems } from '@/repositories/Document'
-import { formatSize, formatUnixDate, haystackFormat } from '@/utils'
-import { defineStore } from 'pinia'
-import { collator } from '@/utils'
-import { logoutUser } from '@/repositories/User'
-import { watchConnect } from '@/repositories/WS'
-
-type FileData = { id: string; mtime: number; size: number; dir: DirectoryData }
-type DirectoryData = {
-  [filename: string]: FileData
-}
-type User = {
-  username: string
-  privileged: boolean
-  isOpenLoginModal: boolean
-  isLoggedIn: boolean
-}
-
-export const useDocumentStore = defineStore({
-  id: 'documents',
-  state: () => ({
-    document: [] as Document[],
-    selected: new Set<FUID>(),
-    fileExplorer: null as any,
-    error: '' as string,
-    connected: false,
-    server: {} as Record<string, any>,
-    user: {
-      username: '',
-      privileged: false,
-      isLoggedIn: false,
-      isOpenLoginModal: false
-    } as User
-  }),
-  actions: {
-    updateRoot(root: FileEntry[]) {
-      const docs = []
-      let loc = [] as string[]
-      for (const [level, name, key, mtime, size, isfile] of root) {
-        loc = loc.slice(0, level - 1)
-        docs.push({
-          name,
-          loc: level ? loc.join('/') : '/',
-          key,
-          size,
-          sizedisp: formatSize(size),
-          mtime,
-          modified: formatUnixDate(mtime),
-          haystack: haystackFormat(name),
-          dir: !isfile,
-        })
-        loc.push(name)
-      }
-      this.document = docs as Document[]
-    },
-    login(username: string, privileged: boolean) {
-      this.user.username = username
-      this.user.privileged = privileged
-      this.user.isLoggedIn = true
-      this.user.isOpenLoginModal = false
-      if (!this.connected) watchConnect()
-    },
-    loginDialog() {
-      this.user.isOpenLoginModal = true
-    },
-    async logout() {
-      console.log("Logout")
-      await logoutUser()
-      this.$reset()
-      localStorage.clear()
-      history.go() // Reload page
-    }
-  },
-  getters: {
-    isUserLogged(): boolean {
-      return this.user.isLoggedIn
-    },
-    recentDocuments(): Document[] {
-      const ret = [...this.document]
-      ret.sort((a, b) => b.mtime - a.mtime)
-      return ret
-    },
-    largeDocuments(): Document[] {
-      const ret = [...this.document]
-      ret.sort((a, b) => b.size - a.size)
-      return ret
-    },
-    selectedFiles(): SelectedItems {
-      const selected = this.selected
-      const found = new Set<FUID>()
-      const ret: SelectedItems = {
-        missing: new Set(),
-        docs: {},
-        keys: [],
-        recursive: [],
-      }
-      for (const doc of this.document) {
-        if (selected.has(doc.key)) {
-          found.add(doc.key)
-          ret.keys.push(doc.key)
-          ret.docs[doc.key] = doc
-        }
-      }
-      // What did we not select?
-      for (const key of selected) if (!found.has(key)) ret.missing.add(key)
-      // Build a flat list including contents recursively
-      const relnames = new Set<string>()
-      function add(rel: string, full: string, doc: Document) {
-        if (!doc.dir && relnames.has(rel)) throw Error(`Multiple selections conflict for: ${rel}`)
-        relnames.add(rel)
-        ret.recursive.push([rel, full, doc])
-      }
-      for (const key of ret.keys) {
-        const base = ret.docs[key]
-        const basepath = base.loc ? `${base.loc}/${base.name}` : base.name
-        const nremove = base.loc.length
-        add(base.name, basepath, base)
-        for (const doc of this.document) {
-          if (doc.loc === basepath || doc.loc.startsWith(basepath) && doc.loc[basepath.length] === '/') {
-            const full = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-            const rel = full.slice(nremove)
-            add(rel, full, doc)
-          }
-        }
-      }
-      // Sort by rel (name stored as on download)
-      ret.recursive.sort((a, b) => collator.compare(a[0], b[0]))
-
-      return ret
-    }
-  }
-})
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@ -86,7 +86,7 @@ export function haystackFormat(str: string) {
 // Preformat search string for faster search
 export function needleFormat(query: string) {
  const based = query.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
-  return {based, words: based.split(/\W+/)}
+  return {based, words: based.split(/\s+/)}
 }

 // Test if haystack includes needle
--- a/frontend/src/views/ExplorerView.vue
+++ b/frontend/src/views/ExplorerView.vue
@ -10,11 +10,11 @@

 <script setup lang="ts">
 import { watchEffect, ref, computed } from 'vue'
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'
 import Router from '@/router/index'
 import { needleFormat, localeIncludes, collator } from '@/utils';

-const documentStore = useDocumentStore()
+const store = useMainStore()
 const fileExplorer = ref()
 const props = defineProps<{
  path: Array<string>
@ -24,12 +24,12 @@ const documents = computed(() => {
  const loc = props.path.join('/')
  const query = props.query
  // List the current location
-  if (!query) return documentStore.document.filter(doc => doc.loc === loc)
+  if (!query) return store.document.filter(doc => doc.loc === loc)
  // Find up to 100 newest documents that match the search
  const needle = needleFormat(query)
  let limit = 100
  let docs = []
-  for (const doc of documentStore.recentDocuments) {
+  for (const doc of store.recentDocuments) {
    if (localeIncludes(doc.haystack, needle)) {
      docs.push(doc)
      if (--limit === 0) break
@ -53,6 +53,6 @@ const documents = computed(() => {
 })

 watchEffect(() => {
-  documentStore.fileExplorer = fileExplorer.value
+  store.fileExplorer = fileExplorer.value
 })
 </script>