From d4e91ea9a68c8bfebe6a1000b47023fc3ed2dd5b Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 13:56:54 +0000
Subject: [PATCH 1/7] Stricter search that doesn't ignore all punctuation.

---
 frontend/src/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index e8cf947..870ffca 100644
--- 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
-- 
2.45.2


From 3d3b078e60b729ba23c9d5381058f8bb6f920e5c Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 14:48:43 +0000
Subject: [PATCH 2/7] Refactor replacing Document type with Doc class with
 computed properties. Switched Doc storage to shallowRefs for extra
 performance and to keep the Doc class included.

---
 frontend/src/components/FileExplorer.vue    | 55 +++++++++------------
 frontend/src/components/FileModified.vue    |  4 +-
 frontend/src/components/FileRenameInput.vue |  6 +--
 frontend/src/components/FileSize.vue        |  4 +-
 frontend/src/repositories/Document.ts       | 29 ++++++++---
 frontend/src/stores/documents.ts            | 26 ++++------
 6 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index 3a0cdb0..593e305 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -79,28 +79,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watchEffect, shallowRef } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
-import type { Document } from '@/repositories/Document'
+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 router = useRouter()
-const url_for = (doc: Document) => {
+const url_for = (doc: Doc) => {
   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 +124,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 +132,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')
@@ -229,14 +225,7 @@ watchEffect(() => {
     focusBreadcrumb()
   }
 })
-// Update human-readable x seconds ago messages from mtimes
-let modifiedTimer: any = null
-const updateModified = () => {
-  for (const doc of props.documents) doc.modified = formatUnixDate(doc.mtime)
-}
-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(
@@ -257,7 +246,9 @@ const mkdir = (doc: Document, name: string) => {
       }
     }
   })
-  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 +257,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 +271,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) => documentStore.selected.has(doc.key)) &&
       !allSelected.value
     )
   },
@@ -291,7 +282,7 @@ const allSelected = computed({
   get: () => {
     return (
       props.documents.length > 0 &&
-      props.documents.every((doc: Document) => documentStore.selected.has(doc.key))
+      props.documents.every((doc: Doc) => documentStore.selected.has(doc.key))
     )
   },
   set: (value: boolean) => {
@@ -308,7 +299,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)
 }
diff --git a/frontend/src/components/FileModified.vue b/frontend/src/components/FileModified.vue
index b6950ae..2715122 100644
--- 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>
diff --git a/frontend/src/components/FileRenameInput.vue b/frontend/src/components/FileRenameInput.vue
index aaa6977..6f1aff2 100644
--- 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
 }>()
 
diff --git a/frontend/src/components/FileSize.vue b/frontend/src/components/FileSize.vue
index 00b4658..688efb1 100644
--- 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>
 
diff --git a/frontend/src/repositories/Document.ts b/frontend/src/repositories/Document.ts
index 022b260..cae8774 100644
--- a/frontend/src/repositories/Document.ts
+++ b/frontend/src/repositories/Document.ts
@@ -1,17 +1,34 @@
+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) {
+    this._name = name
+    this.haystack = haystackFormat(name)
+  }
+  get sizedisp(): string { return formatSize(this.size) }
+  get modified(): string { return formatUnixDate(this.mtime) }
+}
 export type errorEvent = {
   error: {
     code: number
@@ -36,7 +53,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>
 }
diff --git a/frontend/src/stores/documents.ts b/frontend/src/stores/documents.ts
index 7ea40da..71f2af3 100644
--- a/frontend/src/stores/documents.ts
+++ b/frontend/src/stores/documents.ts
@@ -1,14 +1,11 @@
-import type { Document, FileEntry, FUID, SelectedItems } from '@/repositories/Document'
-import { formatSize, formatUnixDate, haystackFormat } from '@/utils'
+import type { FileEntry, FUID, SelectedItems } from '@/repositories/Document'
+import { Doc } from '@/repositories/Document'
 import { defineStore } from 'pinia'
 import { collator } from '@/utils'
 import { logoutUser } from '@/repositories/User'
 import { watchConnect } from '@/repositories/WS'
+import { shallowRef } from 'vue'
 
-type FileData = { id: string; mtime: number; size: number; dir: DirectoryData }
-type DirectoryData = {
-  [filename: string]: FileData
-}
 type User = {
   username: string
   privileged: boolean
@@ -19,7 +16,7 @@ type User = {
 export const useDocumentStore = defineStore({
   id: 'documents',
   state: () => ({
-    document: [] as Document[],
+    document: shallowRef<Doc[]>([]),
     selected: new Set<FUID>(),
     fileExplorer: null as any,
     error: '' as string,
@@ -38,20 +35,17 @@ export const useDocumentStore = defineStore({
       let loc = [] as string[]
       for (const [level, name, key, mtime, size, isfile] of root) {
         loc = loc.slice(0, level - 1)
-        docs.push({
+        docs.push(new Doc({
           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[]
+      this.document = docs
     },
     login(username: string, privileged: boolean) {
       this.user.username = username
@@ -75,12 +69,12 @@ export const useDocumentStore = defineStore({
     isUserLogged(): boolean {
       return this.user.isLoggedIn
     },
-    recentDocuments(): Document[] {
+    recentDocuments(): Doc[] {
       const ret = [...this.document]
       ret.sort((a, b) => b.mtime - a.mtime)
       return ret
     },
-    largeDocuments(): Document[] {
+    largeDocuments(): Doc[] {
       const ret = [...this.document]
       ret.sort((a, b) => b.size - a.size)
       return ret
@@ -105,7 +99,7 @@ export const useDocumentStore = defineStore({
       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) {
+      function add(rel: string, full: string, doc: Doc) {
         if (!doc.dir && relnames.has(rel)) throw Error(`Multiple selections conflict for: ${rel}`)
         relnames.add(rel)
         ret.recursive.push([rel, full, doc])
-- 
2.45.2


From 19a5c4ad8a14d2fca191ff6927e877a0eb881910 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 15:17:45 +0000
Subject: [PATCH 3/7] Another approach to auto-update modified with current
 time

---
 frontend/src/components/FileExplorer.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index 593e305..b01d385 100644
--- 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>
@@ -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,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef } from 'vue'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
@@ -225,6 +225,13 @@ watchEffect(() => {
     focusBreadcrumb()
   }
 })
+let nowkey = ref(0)
+let modifiedTimer: any = null
+const updateModified = () => {
+  nowkey.value = Math.floor(Date.now() / 1000)
+}
+onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
+onUnmounted(() => { clearInterval(modifiedTimer) })
 const mkdir = (doc: Doc, name: string) => {
   const control = connect(controlUrl, {
     open() {
-- 
2.45.2


From e4a62e1197f23e99eb706520a2609d8faabc512f Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 08:12:58 -0800
Subject: [PATCH 4/7] Fix props use before props definition

---
 frontend/src/components/HeaderMain.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index f8206c1..77d2d12 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -41,6 +41,10 @@ const documentStore = useDocumentStore()
 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
@@ -83,11 +87,6 @@ const settingsMenu = (e: Event) => {
     items,
   })
 }
-const props = defineProps<{
-  path: Array<string>
-  query: string
-}>()
-
 defineExpose({
   toggleSearchInput,
   closeSearch,
-- 
2.45.2


From f0fc4a7d30c6acf92a1fadf91c48337110ce9fb6 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 08:26:32 -0800
Subject: [PATCH 5/7] Rename store

---
 frontend/src/App.vue                       |   9 +-
 frontend/src/components/FileExplorer.vue   |  29 ++---
 frontend/src/components/HeaderMain.vue     |  17 +--
 frontend/src/components/HeaderSelected.vue |  27 ++---
 frontend/src/components/LoginModal.vue     |   5 +-
 frontend/src/components/UploadButton.vue   |  11 +-
 frontend/src/repositories/WS.ts            |  14 +--
 frontend/src/stores/documents.ts           | 126 ---------------------
 frontend/src/views/ExplorerView.vue        |  11 +-
 9 files changed, 65 insertions(+), 184 deletions(-)
 delete mode 100644 frontend/src/stores/documents.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 104dd5a..88b2bf6 100644
--- 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
diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index b01d385..155da5f 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -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>
@@ -80,7 +80,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import { connect, controlUrl } from '@/repositories/WS'
@@ -91,7 +91,7 @@ const props = defineProps<{
   path: Array<string>
   documents: Doc[]
 }>()
-const documentStore = useDocumentStore()
+const store = useMainStore()
 const router = useRouter()
 const url_for = (doc: Doc) => {
   const p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
@@ -159,10 +159,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)
   },
@@ -187,8 +187,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
@@ -278,7 +278,7 @@ const selectionIndeterminate = computed({
   get: () => {
     return (
       props.documents.length > 0 &&
-      props.documents.some((doc: Doc) => documentStore.selected.has(doc.key)) &&
+      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
       !allSelected.value
     )
   },
@@ -289,16 +289,16 @@ const allSelected = computed({
   get: () => {
     return (
       props.documents.length > 0 &&
-      props.documents.every((doc: Doc) => 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)
       }
     }
   }
@@ -456,3 +456,4 @@ tbody .selection input {
   color: #888;
 }
 </style>
+@/stores/main
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index 77d2d12..8bae445 100644
--- 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>
@@ -32,12 +32,12 @@
 </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>()
@@ -76,10 +76,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
@@ -115,3 +115,4 @@ input[type='search'] {
   max-width: 30vw;
 }
 </style>
+@/stores/main
diff --git a/frontend/src/components/HeaderSelected.vue b/frontend/src/components/HeaderSelected.vue
index 3cf27a1..56b2c9d 100644
--- 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
diff --git a/frontend/src/components/LoginModal.vue b/frontend/src/components/LoginModal.vue
index 3d811e8..3735383 100644
--- 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
diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
index d203b19..2bc9efa 100644
--- 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
diff --git a/frontend/src/repositories/WS.ts b/frontend/src/repositories/WS.ts
index a57ff21..c877a6e 100644
--- 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
diff --git a/frontend/src/stores/documents.ts b/frontend/src/stores/documents.ts
deleted file mode 100644
index 71f2af3..0000000
--- a/frontend/src/stores/documents.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { FileEntry, FUID, SelectedItems } from '@/repositories/Document'
-import { Doc } from '@/repositories/Document'
-import { defineStore } from 'pinia'
-import { collator } from '@/utils'
-import { logoutUser } from '@/repositories/User'
-import { watchConnect } from '@/repositories/WS'
-import { shallowRef } from 'vue'
-
-type User = {
-  username: string
-  privileged: boolean
-  isOpenLoginModal: boolean
-  isLoggedIn: boolean
-}
-
-export const useDocumentStore = defineStore({
-  id: 'documents',
-  state: () => ({
-    document: shallowRef<Doc[]>([]),
-    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(new Doc({
-          name,
-          loc: level ? loc.join('/') : '/',
-          key,
-          size,
-          mtime,
-          dir: !isfile,
-        }))
-        loc.push(name)
-      }
-      this.document = docs
-    },
-    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(): Doc[] {
-      const ret = [...this.document]
-      ret.sort((a, b) => b.mtime - a.mtime)
-      return ret
-    },
-    largeDocuments(): Doc[] {
-      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: Doc) {
-        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
-    }
-  }
-})
diff --git a/frontend/src/views/ExplorerView.vue b/frontend/src/views/ExplorerView.vue
index 773d2ee..90939a5 100644
--- 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,7 @@ const documents = computed(() => {
 })
 
 watchEffect(() => {
-  documentStore.fileExplorer = fileExplorer.value
+  store.fileExplorer = fileExplorer.value
 })
 </script>
+@/stores/main
-- 
2.45.2


From ffafbc87d02c6c261087e9f86b673f0ecf4be5a5 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 09:39:20 -0800
Subject: [PATCH 6/7] Fix hash and question mark handling in URLs - broke Vue
 router

---
 frontend/src/components/BreadCrumb.vue   | 6 ++++--
 frontend/src/components/FileExplorer.vue | 8 ++------
 frontend/src/components/HeaderMain.vue   | 6 +++---
 frontend/src/repositories/Document.ts    | 8 ++++++++
 frontend/src/views/ExplorerView.vue      | 1 -
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/BreadCrumb.vue b/frontend/src/components/BreadCrumb.vue
index ce98fda..7016559 100644
--- a/frontend/src/components/BreadCrumb.vue
+++ b/frontend/src/components/BreadCrumb.vue
@@ -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) => {
diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index 155da5f..f873093 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -50,7 +50,7 @@
             </template>
             <template v-else>
               <a
-                :href="url_for(doc)"
+                :href="doc.url"
                 tabindex="-1"
                 @contextmenu.prevent
                 @focus.stop="cursor = doc"
@@ -93,10 +93,6 @@ const props = defineProps<{
 }>()
 const store = useMainStore()
 const router = useRouter()
-const url_for = (doc: Doc) => {
-  const p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-  return doc.dir ? `#/${p}/` : `/files/${p}`
-}
 const cursor = shallowRef<Doc | null>(null)
 // File rename
 const editing = shallowRef<Doc | null>(null)
@@ -249,7 +245,7 @@ const mkdir = (doc: Doc, name: string) => {
         editing.value = null
       } else {
         console.log('mkdir', msg)
-        router.push(doc.loc ? `/${doc.loc}/${name}/` : `/${name}/`)
+        router.push(doc.urlrouter)
       }
     }
   })
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index 8bae445..90e1ff4 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -58,9 +58,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
diff --git a/frontend/src/repositories/Document.ts b/frontend/src/repositories/Document.ts
index cae8774..7607083 100644
--- a/frontend/src/repositories/Document.ts
+++ b/frontend/src/repositories/Document.ts
@@ -23,11 +23,19 @@ export class Doc {
   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: {
diff --git a/frontend/src/views/ExplorerView.vue b/frontend/src/views/ExplorerView.vue
index 90939a5..a57976c 100644
--- a/frontend/src/views/ExplorerView.vue
+++ b/frontend/src/views/ExplorerView.vue
@@ -56,4 +56,3 @@ watchEffect(() => {
   store.fileExplorer = fileExplorer.value
 })
 </script>
-@/stores/main
-- 
2.45.2


From ba9c2671e51ee8d5b301e174496695e2470d751c Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 13 Nov 2023 09:48:52 -0800
Subject: [PATCH 7/7] Fix focus fighting between BreadCrumb and Search

---
 frontend/src/components/BreadCrumb.vue | 2 +-
 frontend/src/components/HeaderMain.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/BreadCrumb.vue b/frontend/src/components/BreadCrumb.vue
index 7016559..e0cbdc9 100644
--- 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)"
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index 90e1ff4..eefc739 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -18,7 +18,6 @@
           ref="search"
           type="search"
           :value="query"
-          @blur="ev => { if (!query) closeSearch(ev) }"
           @input="updateSearch"
           placeholder="Search words"
           class="margin-input"
-- 
2.45.2