Fix server exit hang on MacOS, cleanup, include directories in zips, natural sort.

Stricter filename sanitation
Zip download done.
2023-11-07 16:54:46 -08:00 · 2023-11-07 16:47:41 -08:00 · 2023-11-07 15:57:42 -08:00 · 2023-11-07 15:37:47 -08:00 · 2023-11-07 23:30:35 +00:00 · 2023-11-07 20:15:09 +00:00
112 changed files with 1155 additions and 1394 deletions
--- a/README.md
+++ b/README.md
@@ -1,78 +1,25 @@
 # Web File Storage
-The Python package installs a `cista` executable. Use `hatch shell` to initiate and install in a virtual environment, or `pip install` it on your system. Alternatively `hatch run cista` may be used to skip the shell step but stay virtual. `pip install hatch` first if needed.
+Run directly from repository with Hatch (or use pip install as usual):
 ```sh
 hatch run cista -l :3000 /path/to/files
 ```
 Settings incl. these arguments are stored to config file on the first startup and later `hatch run cista` is sufficient. If the `cista` script is missing, consider `pip install -e .` (within `hatch shell`) or some other trickery (known issue with installs made prior to adding the startup script).
 Create your user account:
 ```sh
-cista --user admin --privileged
+hatch run cista --user admin --privileged
 ```
 ## Running the server
 Serve your files on localhost:8000:
 ```sh
 cista -l :8000 /path/to/files
 ```
 The Git repository does not contain a frontend build, so you should first do that...
 ## Build frontend
-Frontend needs to be built before using and after any frontend changes:
+Prebuilt frontend is provided in repository but for any changes it will need to be manually rebuilt:
 ```sh
-cd frontend
+cd cista-front
 npm install
 npm run build
 ```
 This will place the front in `cista/wwwroot` from where the backend server delivers it, and that also gets included in the Python package built via `hatch build`.
 ## Development setup
 For rapid turnaround during development, you should run `npm run dev` Vite development server on the Vue frontend. While that is running, start the backend on another terminal `hatch run cista --dev -l :8000` and connect to the frontend.
 The backend and the frontend will each reload automatically at any code or config changes.
 ## System deployment
 Clone the repository to `/srv/cista/cista-storage` or other suitable location accessible to the storage user account you plan to use. `sudo -u storage -s` and build the frontend if you hadn't already.
 Create **/etc/systemd/system/cista@.service**:
 ```ini
 [Unit]
 Description=Cista storage %i
 [Service]
 User=storage
 WorkingDirectory=/srv/cista/cista-storage
 ExecStart=hatch run cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/@%i/
 TimeoutStopSec=2
 Restart=always
 [Install]
 WantedBy=multi-user.target
 ```
 This assumes you may want to run multiple separate storages, each having their files under `/media/storage/<domain>` and configuration under `/srv/cista/<domain>/`. Instead of numeric ports, we use UNIX sockets for convenience.
 ```sh
 systemctl daemon-reload
 systemctl enable --now cista@foo.example.com
 systemctl enable --now cista@bar.example.com
 ```
 Exposing this publicly online is the most convenient using the [Caddy](https://caddyserver.com/) web server but you can of course use Nginx or others as well. Or even run the server with `-l domain.example.com` given TLS certificates in the config folder.
 **/etc/caddy/Caddyfile**:
 ```Caddyfile
 foo.example.com, bar.example.com {
    reverse_proxy unix//srv/cista/{host}/socket
 }
 ```
 Using the `{host}` placeholder we can just put all the domains on the same block. That's the full server configuration you need. `systemctl enable --now caddy` or `systemctl restart caddy` for the config to take effect.
--- a/cista-front/.gitignore
+++ b/cista-front/.gitignore
--- a/cista-front/README.md
+++ b/cista-front/README.md
--- a/cista-front/env.d.ts
+++ b/cista-front/env.d.ts
--- a/cista-front/index.html
+++ b/cista-front/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang=en>
 <meta charset=UTF-8>
-<title>Cista Storage</title>
+<title>Cista</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<link rel="icon" href="/src/assets/logo.svg">
+<link rel="icon" href="/favicon.ico">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
--- a/cista-front/package.json
+++ b/cista-front/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "cista-frontend",
+  "name": "front",
  "version": "0.0.0",
  "private": true,
  "scripts": {
--- a/cista-front/public/favicon.ico
+++ b/cista-front/public/favicon.ico
--- a/cista-front/public/old-index.html
+++ b/cista-front/public/old-index.html
@@ -0,0 +1,241 @@
 <!DOCTYPE html>
 <title>Storage</title>
 <style>
  body {
    font-family: sans-serif;
    max-width: 100ch;
    margin: 0 auto;
    padding: 1em;
    background-color: #333;
    color: #eee;
  }
  td {
    text-align: right;
    padding: .5em;
  }
  td:first-child {
    text-align: left;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
 </style>
 <div>
  <h2>Quick file upload</h2>
  <p>Uses parallel WebSocket connections for increased bandwidth /api/upload</p>
  <input type=file id=fileInput>
  <progress id=progressBar value=0 max=1></progress>
 </div>
 <div>
  <h2>Files</h2>
  <ul id=file_list></ul>
 </div>
 <script>
 let files = {}
 let flatfiles = {}
 function createWatchSocket() {
  const wsurl = new URL("/api/watch", location.href.replace(/^http/, 'ws'))
  const ws = new WebSocket(wsurl)
  ws.onmessage = event => {
    msg = JSON.parse(event.data)
    if (msg.update) {
      tree_update(msg.update)
      file_list(files)
    } else {
      console.log("Unkonwn message from watch socket", msg)
    }
  }
 }
 createWatchSocket()
 function tree_update(msg) {
  console.log("Tree update", msg)
  let node = files
  for (const elem of msg) {
    if (elem.deleted) {
      const p = node.dir[elem.name].path
      delete node.dir[elem.name]
      delete flatfiles[p]
      break
    }
    if (elem.name !== undefined) node = node.dir[elem.name] ||= {}
    if (elem.size !== undefined) node.size = elem.size
    if (elem.mtime !== undefined) node.mtime = elem.mtime
    if (elem.dir !== undefined) node.dir = elem.dir
  }
  // Update paths and flatfiles
  files.path = "/"
  const nodes = [files]
  flatfiles = {}
  while (node = nodes.pop()) {
    flatfiles[node.path] = node
    if (node.dir === undefined) continue
    for (const name of Object.keys(node.dir)) {
      const child = node.dir[name]
      child.path = node.path + name + (child.dir === undefined ? "" : "/")
      nodes.push(child)
    }
  }
 }
 var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
 const compare_path = (a, b) => collator.compare(a.path, b.path)
 const compare_time = (a, b) => a.mtime > b.mtime
 function file_list(files) {
  const table = document.getElementById("file_list")
  const sorted = Object.values(flatfiles).sort(compare_time)
  table.innerHTML = ""
  for (const f of sorted) {
    const {path, size, mtime} = f
    const tr = document.createElement("tr")
    const name_td = document.createElement("td")
    const size_td = document.createElement("td")
    const mtime_td = document.createElement("td")
    const a = document.createElement("a")
    table.appendChild(tr)
    tr.appendChild(name_td)
    tr.appendChild(size_td)
    tr.appendChild(mtime_td)
    name_td.appendChild(a)
    size_td.textContent = size
    mtime_td.textContent = formatUnixDate(mtime)
    a.textContent = path
    a.href = `/files${path}`
    /*a.onclick = event => {
      if (window.showSaveFilePicker) {
        event.preventDefault()
        download_ws(name, size)
      }
    }
    a.download = ""*/
  }
 }
 function formatUnixDate(t) {
    const date = new Date(t * 1000)
    const now = new Date()
    const diff = date - now
    const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
    if (Math.abs(diff) <= 60000) {
        return formatter.format(Math.round(diff / 1000), 'second')
    }
    if (Math.abs(diff) <= 3600000) {
        return formatter.format(Math.round(diff / 60000), 'minute')
    }
    if (Math.abs(diff) <= 86400000) {
        return formatter.format(Math.round(diff / 3600000), 'hour')
    }
    if (Math.abs(diff) <= 604800000) {
        return formatter.format(Math.round(diff / 86400000), 'day')
    }
    return date.toLocaleDateString()
 }
 async function download_ws(name, size) {
  const fh = await window.showSaveFilePicker({
    suggestedName: name,
  })
  const writer = await fh.createWritable()
  writer.truncate(size)
  const wsurl = new URL("/api/download", location.href.replace(/^http/, 'ws'))
  const ws = new WebSocket(wsurl)
  let pos = 0
  ws.onopen = () => {
    console.log("Downloading over WebSocket", name, size)
    ws.send(JSON.stringify({name, start: 0, end: size, size}))
  }
  ws.onmessage = event => {
    if (typeof event.data === 'string') {
      const msg = JSON.parse(event.data)
      console.log("Download finished", msg)
      ws.close()
      return
    }
    console.log("Received chunk", name, pos, pos + event.data.size)
    pos += event.data.size
    writer.write(event.data)
  }
  ws.onclose = () => {
    if (pos < size) {
      console.log("Download aborted", name, pos)
      writer.truncate(pos)
    }
    writer.close()
  }
 }
 const fileInput = document.getElementById("fileInput")
 const progress = document.getElementById("progressBar")
 const numConnections = 2
 const chunkSize = 1<<20
 const wsConnections = new Set()
 //for (let i = 0; i < numConnections; i++) createUploadWS()
 function createUploadWS() {
  const wsurl = new URL("/api/upload", location.href.replace(/^http/, 'ws'))
  const ws = new WebSocket(wsurl)
  ws.binaryType = 'arraybuffer'
  ws.onopen = () => {
    wsConnections.add(ws)
    console.log("Upload socket connected")
  }
  ws.onmessage = event => {
    msg = JSON.parse(event.data)
    if (msg.written) progress.value += +msg.written
    else console.log(`Error: ${msg.error}`)
  }
  ws.onclose = () => {
    wsConnections.delete(ws)
    console.log("Upload socket disconnected, reconnecting...")
    setTimeout(createUploadWS, 1000)
  }
 }
 async function load(file, start, end) {
  const reader = new FileReader()
  const load = new Promise(resolve => reader.onload = resolve)
  reader.readAsArrayBuffer(file.slice(start, end))
  const event = await load
  return event.target.result
 }
 async function sendChunk(file, start, end, ws) {
  const chunk = await load(file, start, end)
  ws.send(JSON.stringify({
    name: file.name,
    size: file.size,
    start: start,
    end: end
  }))
  ws.send(chunk)
 }
 fileInput.addEventListener("change", async function() {
  const file = this.files[0]
  const numChunks = Math.ceil(file.size / chunkSize)
  progress.value = 0
  progress.max = file.size
  console.log(wsConnections)
  for (let i = 0; i < numChunks; i++) {
    const ws = Array.from(wsConnections)[i % wsConnections.size]
    const start = i * chunkSize
    const end = Math.min(file.size, start + chunkSize)
    const res = await sendChunk(file, start, end, ws)
  }
 })
 </script>
--- a/cista-front/src/App.vue
+++ b/cista-front/src/App.vue
@@ -1,13 +1,13 @@
 <template>
  <LoginModal />
  <header>
-    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
+    <HeaderMain ref="headerMain">
      <HeaderSelected :path="path.pathList" />
    </HeaderMain>
    <BreadCrumb :path="path.pathList" tabindex="-1"/>
  </header>
  <main>
-    <RouterView :path="path.pathList" :query="path.query" />
+    <RouterView :path="path.pathList" />
  </main>
 </template>
@@ -15,9 +15,9 @@
 import { RouterView } from 'vue-router'
 import type { ComputedRef } from 'vue'
 import type HeaderMain from '@/components/HeaderMain.vue'
-import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
-import { loadSession, watchConnect, watchDisconnect } from '@/repositories/WS'
+import { watchConnect, watchDisconnect } from '@/repositories/WS'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 import { computed } from 'vue'
 import Router from '@/router/index'
@@ -25,30 +25,25 @@ import Router from '@/router/index'
 interface Path {
  path: string
  pathList: string[]
  query: string
 }
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const path: ComputedRef<Path> = computed(() => {
-  const p = decodeURIComponent(Router.currentRoute.value.path).split('//')
+  const p = decodeURIComponent(Router.currentRoute.value.path)
-  const pathList = p[0].split('/').filter(value => value !== '')
+  const pathList = p.split('/').filter(value => value !== '')
  const query = p.slice(1).join('//')
  return {
-    path: p[0],
+    path: p,
-    pathList,
+    pathList
    query
  }
 })
 watchEffect(() => {
  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || store.server.name || 'Cista Storage'
 })
 onMounted(loadSession)
 onMounted(watchConnect)
 onUnmounted(watchDisconnect)
 // Update human-readable x seconds ago messages from mtimes
 setInterval(documentStore.updateModified, 1000)
 const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
 let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
-  const fileExplorer = store.fileExplorer as any
+  const fileExplorer = documentStore.fileExplorer as any
  if (!fileExplorer) return
  const c = fileExplorer.isCursor()
  const keyup = event.type === 'keyup'
@@ -124,4 +119,3 @@ onUnmounted(() => {
 })
 export type { Path }
 </script>
@/stores/main
--- a/cista-front/src/assets/main.css
+++ b/cista-front/src/assets/main.css
--- a/cista-front/src/assets/svg/add-file.svg
+++ b/cista-front/src/assets/svg/add-file.svg
--- a/cista-front/src/assets/svg/add-folder.svg
+++ b/cista-front/src/assets/svg/add-folder.svg
--- a/cista-front/src/assets/svg/arrow.svg
+++ b/cista-front/src/assets/svg/arrow.svg
--- a/cista-front/src/assets/svg/arrows-h.svg
+++ b/cista-front/src/assets/svg/arrows-h.svg
--- a/cista-front/src/assets/svg/arrows-v.svg
+++ b/cista-front/src/assets/svg/arrows-v.svg
--- a/cista-front/src/assets/svg/check.svg
+++ b/cista-front/src/assets/svg/check.svg
--- a/cista-front/src/assets/svg/code.svg
+++ b/cista-front/src/assets/svg/code.svg
--- a/cista-front/src/assets/svg/cog.svg
+++ b/cista-front/src/assets/svg/cog.svg
--- a/cista-front/src/assets/svg/copy.svg
+++ b/cista-front/src/assets/svg/copy.svg
--- a/cista-front/src/assets/svg/create-file.svg
+++ b/cista-front/src/assets/svg/create-file.svg
--- a/cista-front/src/assets/svg/create-folder.svg
+++ b/cista-front/src/assets/svg/create-folder.svg
--- a/cista-front/src/assets/svg/cross.svg
+++ b/cista-front/src/assets/svg/cross.svg
--- a/cista-front/src/assets/svg/disk.svg
+++ b/cista-front/src/assets/svg/disk.svg
--- a/cista-front/src/assets/svg/download.svg
+++ b/cista-front/src/assets/svg/download.svg
--- a/cista-front/src/assets/svg/exclamation.svg
+++ b/cista-front/src/assets/svg/exclamation.svg
--- a/cista-front/src/assets/svg/eye.svg
+++ b/cista-front/src/assets/svg/eye.svg
--- a/cista-front/src/assets/svg/find.svg
+++ b/cista-front/src/assets/svg/find.svg
--- a/cista-front/src/assets/svg/fullscreen.svg
+++ b/cista-front/src/assets/svg/fullscreen.svg
--- a/cista-front/src/assets/svg/github.svg
+++ b/cista-front/src/assets/svg/github.svg
--- a/cista-front/src/assets/svg/home.svg
+++ b/cista-front/src/assets/svg/home.svg
--- a/cista-front/src/assets/svg/info.svg
+++ b/cista-front/src/assets/svg/info.svg
--- a/cista-front/src/assets/svg/link.svg
+++ b/cista-front/src/assets/svg/link.svg
--- a/cista-front/src/assets/svg/logo.svg
+++ b/cista-front/src/assets/svg/logo.svg
--- a/cista-front/src/assets/svg/loop.svg
+++ b/cista-front/src/assets/svg/loop.svg
--- a/cista-front/src/assets/svg/menu.svg
+++ b/cista-front/src/assets/svg/menu.svg
--- a/cista-front/src/assets/svg/next.svg
+++ b/cista-front/src/assets/svg/next.svg
--- a/cista-front/src/assets/svg/open.svg
+++ b/cista-front/src/assets/svg/open.svg
--- a/cista-front/src/assets/svg/paste.svg
+++ b/cista-front/src/assets/svg/paste.svg
--- a/cista-front/src/assets/svg/pause.svg
+++ b/cista-front/src/assets/svg/pause.svg
--- a/cista-front/src/assets/svg/pencil.svg
+++ b/cista-front/src/assets/svg/pencil.svg
--- a/cista-front/src/assets/svg/play.svg
+++ b/cista-front/src/assets/svg/play.svg
--- a/cista-front/src/assets/svg/plus.svg
+++ b/cista-front/src/assets/svg/plus.svg
--- a/cista-front/src/assets/svg/previous.svg
+++ b/cista-front/src/assets/svg/previous.svg
--- a/cista-front/src/assets/svg/reload.svg
+++ b/cista-front/src/assets/svg/reload.svg
--- a/cista-front/src/assets/svg/rename.svg
+++ b/cista-front/src/assets/svg/rename.svg
--- a/cista-front/src/assets/svg/scissors.svg
+++ b/cista-front/src/assets/svg/scissors.svg
--- a/cista-front/src/assets/svg/shuffle.svg
+++ b/cista-front/src/assets/svg/shuffle.svg
--- a/cista-front/src/assets/svg/signin.svg
+++ b/cista-front/src/assets/svg/signin.svg
--- a/cista-front/src/assets/svg/signout.svg
+++ b/cista-front/src/assets/svg/signout.svg
--- a/cista-front/src/assets/svg/skip.svg
+++ b/cista-front/src/assets/svg/skip.svg
--- a/cista-front/src/assets/svg/spinner.svg
+++ b/cista-front/src/assets/svg/spinner.svg
--- a/cista-front/src/assets/svg/stop.svg
+++ b/cista-front/src/assets/svg/stop.svg
--- a/cista-front/src/assets/svg/trash.svg
+++ b/cista-front/src/assets/svg/trash.svg
--- a/cista-front/src/assets/svg/triangle.svg
+++ b/cista-front/src/assets/svg/triangle.svg
--- a/cista-front/src/assets/svg/unfullscreen.svg
+++ b/cista-front/src/assets/svg/unfullscreen.svg
--- a/cista-front/src/assets/svg/up-arrow.svg
+++ b/cista-front/src/assets/svg/up-arrow.svg
--- a/cista-front/src/assets/svg/upload-cloud.svg
+++ b/cista-front/src/assets/svg/upload-cloud.svg
--- a/cista-front/src/assets/svg/user-cog.svg
+++ b/cista-front/src/assets/svg/user-cog.svg
--- a/cista-front/src/assets/svg/user.svg
+++ b/cista-front/src/assets/svg/user.svg
--- a/cista-front/src/assets/svg/volume-high.svg
+++ b/cista-front/src/assets/svg/volume-high.svg
--- a/cista-front/src/assets/svg/volume-low.svg
+++ b/cista-front/src/assets/svg/volume-low.svg
--- a/cista-front/src/assets/svg/volume-medium.svg
+++ b/cista-front/src/assets/svg/volume-medium.svg
--- a/cista-front/src/assets/svg/volume-mute.svg
+++ b/cista-front/src/assets/svg/volume-mute.svg
--- a/cista-front/src/assets/svg/window-cross.svg
+++ b/cista-front/src/assets/svg/window-cross.svg
--- a/cista-front/src/assets/svg/window.svg
+++ b/cista-front/src/assets/svg/window.svg
--- a/cista-front/src/assets/svg/wordwrap.svg
+++ b/cista-front/src/assets/svg/wordwrap.svg
--- a/cista-front/src/assets/svg/zoomin.svg
+++ b/cista-front/src/assets/svg/zoomin.svg
--- a/cista-front/src/assets/svg/zoomout.svg
+++ b/cista-front/src/assets/svg/zoomout.svg
--- a/cista-front/src/components/BreadCrumb.vue
+++ b/cista-front/src/components/BreadCrumb.vue
@@ -4,7 +4,7 @@
    aria-label="Breadcrumb"
    @keyup.left.stop="move(-1)"
    @keyup.right.stop="move(1)"
-    @keyup.enter="move(0)"
+    @focus="move(0)"
  >
    <a href="#/"
      :ref="el => setLinkRef(0, el)"
@@ -46,13 +46,8 @@ const isCurrent = (index: number) => index == props.path.length ? 'location' : u
 const navigate = (index: number) => {
  const link = links[index]
  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()
  router.replace(`/${longest.value.slice(0, index).join('/')}`)
 }
 const move = (dir: number) => {
--- a/cista-front/src/components/FileExplorer.vue
+++ b/cista-front/src/components/FileExplorer.vue
@@ -3,11 +3,34 @@
    <thead>
      <tr>
        <th class="selection">
-          <input type="checkbox" tabindex="-1" v-model="allSelected" :indeterminate="selectionIndeterminate">
+          <input
            type="checkbox"
            tabindex="-1"
            v-model="allSelected"
            :indeterminate="selectionIndeterminate"
          />
        </th>
        <th
          class="sortcolumn"
          :class="{ sortactive: sort === 'name' }"
          @click="toggleSort('name')"
        >
          Name
        </th>
        <th
          class="sortcolumn modified right"
          :class="{ sortactive: sort === 'modified' }"
          @click="toggleSort('modified')"
        >
          Modified
        </th>
        <th
          class="sortcolumn size right"
          :class="{ sortactive: sort === 'size' }"
          @click="toggleSort('size')"
        >
          Size
        </th>
        <th class="sortcolumn" :class="{ sortactive: store.sortOrder === 'name' }" @click="store.toggleSort('name')">Name</th>
        <th class="sortcolumn modified right" :class="{ sortactive: store.sortOrder === 'modified' }" @click="store.toggleSort('modified')">Modified</th>
        <th class="sortcolumn size right" :class="{ sortactive: store.sortOrder === 'size' }" @click="store.toggleSort('size')">Size</th>
        <th class="menu"></th>
      </tr>
    </thead>
@@ -15,13 +38,27 @@
      <tr v-if="editing?.key === 'new'" class="folder">
        <td class="selection"></td>
        <td class="name">
-          <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
+          <FileRenameInput
            :doc="editing"
            :rename="mkdir"
            :exit="
              () => {
                editing = null
              }
            "
          />
        </td>
-        <FileModified :doc=editing :key=nowkey />
+        <td class="modified right">
-        <FileSize :doc=editing />
+          <time :datetime="new Date(editing.mtime).toISOString().replace('.000', '')">{{
            editing.modified
          }}</time>
        </td>
        <td class="size right">{{ editing.sizedisp }}</td>
        <td class="menu"></td>
      </tr>
-      <template v-for="(doc, index) in documents" :key="doc.key">
+      <template
        v-for="(doc, index) in sortedDocuments"
        :key="doc.key">
        <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
          <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
        </tr>
@@ -36,35 +73,59 @@
            <input
              type="checkbox"
              tabindex="-1"
-              :checked="store.selected.has(doc.key)"
+              :checked="documentStore.selected.has(doc.key)"
              @change="
                ($event.target as HTMLInputElement).checked
-                  ? store.selected.add(doc.key)
+                  ? documentStore.selected.add(doc.key)
-                  : store.selected.delete(doc.key)
+                  : documentStore.selected.delete(doc.key)
              "
            />
          </td>
          <td class="name">
-            <template v-if="editing === doc">
+            <template v-if="editing === doc"
-              <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
+              ><FileRenameInput
-            </template>
+                :doc="doc"
                :rename="rename"
                :exit="
                  () => {
                    editing = null
                  }
                "
            /></template>
            <template v-else>
              <a
-                :href="doc.url"
+                :href="url_for(doc)"
                tabindex="-1"
                @contextmenu.prevent
                @focus.stop="cursor = doc"
                @blur="ev => { if (!editing) cursor = null }"
                @keyup.left="router.back()"
                @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                >{{ doc.name }}</a
              >
-              <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
+              <button
                v-if="cursor == doc"
                class="rename-button"
                @click="() => (editing = doc)"
              >
                🖊️
              </button>
            </template>
          </td>
-          <FileModified :doc=doc :key=nowkey />
+          <td class="modified right">
-          <FileSize :doc=doc />
+            <time
              :data-tooltip="new Date(1000 * doc.mtime).toISOString().replace('T', '\n').replace('.000Z', ' UTC')"
              >{{ doc.modified }}</time
            >
          </td>
          <td class="size right">{{ doc.sizedisp }}</td>
          <td class="menu">
-            <button tabindex="-1" @click.stop="contextMenu($event, doc)">⋮</button>
+            <button
              tabindex="-1"
              @click.stop="contextMenu($event, doc)"
            >
              ⋮
            </button>
          </td>
        </tr>
      </template>
@@ -79,26 +140,31 @@
 </template>
 <script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
-import { Doc } from '@/repositories/Document'
+import type { Document } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import { connect, controlUrl } from '@/repositories/WS'
-import { formatSize } from '@/utils'
+import { collator, formatSize, formatUnixDate } from '@/utils'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import type { SortOrder } from '@/utils/docsort'
-const props = defineProps<{
+const props = withDefaults(
-  path: Array<string>
+  defineProps<{
-  documents: Doc[]
+    path: Array<string>
-}>()
+    documents: Document[]
-const store = useMainStore()
+  }>(),
  {}
 )
 const documentStore = useDocumentStore()
 const router = useRouter()
-const cursor = shallowRef<Doc | null>(null)
+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)
 // File rename
-const editing = shallowRef<Doc | null>(null)
+const editing = ref<Document | null>(null)
-const rename = (doc: Doc, newName: string) => {
+const rename = (doc: Document, newName: string) => {
  const oldName = doc.name
  const control = connect(controlUrl, {
    message(ev: MessageEvent) {
@@ -122,25 +188,35 @@ const rename = (doc: Doc, 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 showFolderBreadcrumb = (i: number) => {
  const docs = sortedDocuments.value
  const docloc = docs[i].loc
  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
 }
 defineExpose({
  newFolder() {
-    const now = Math.floor(Date.now() / 1000)
+    const now = Date.now() / 1000
-    editing.value = new Doc({
+    editing.value = {
      loc: loc.value,
      key: 'new',
      name: 'New Folder',
-      dir: true,
+      type: 'folder',
      mtime: now,
      size: 0,
-    })
+      sizedisp: formatSize(0),
      modified: formatUnixDate(now),
      haystack: '',
    }
    console.log("New")
  },
  toggleSelectAll() {
    console.log('Select')
    allSelected.value = !allSelected.value
  },
  toggleSortColumn(column: number) {
-    const order = ['', 'name', 'modified', 'size', ''][column]
+    const columns = ['', 'name', 'modified', 'size', '']
-    if (order) store.toggleSort(order as SortOrder)
+    toggleSort(columns[column])
  },
  isCursor() {
    return cursor.value !== null && editing.value === null
@@ -151,36 +227,36 @@ defineExpose({
  cursorSelect() {
    const doc = cursor.value
    if (!doc) return
-    if (store.selected.has(doc.key)) {
+    if (documentStore.selected.has(doc.key)) {
-      store.selected.delete(doc.key)
+      documentStore.selected.delete(doc.key)
    } else {
-      store.selected.add(doc.key)
+      documentStore.selected.add(doc.key)
    }
    this.cursorMove(1)
  },
  cursorMove(d: number, select = false) {
    // Move cursor up or down (keyboard navigation)
-    const docs = props.documents
+    const documents = sortedDocuments.value
-    if (docs.length === 0) {
+    if (documents.length === 0) {
      cursor.value = null
      return
    }
-    const N = docs.length
+    const N = documents.length
    const mod = (a: number, b: number) => ((a % b) + b) % b
    const increment = (i: number, d: number) => mod(i + d, N + 1)
    const index =
-      cursor.value !== null ? docs.indexOf(cursor.value) : docs.length
+      cursor.value !== null ? documents.indexOf(cursor.value) : documents.length
    const moveto = increment(index, d)
-    cursor.value = docs[moveto] ?? null
+    cursor.value = documents[moveto] ?? null
    const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
    if (select) {
      // Go forwards, possibly wrapping over the end; the last entry is not toggled
      let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
      for (let p = begin; p !== end; p = increment(p, 1)) {
        if (p === N) continue
-        const key = docs[p].key
+        const key = documents[p].key
-        if (store.selected.has(key)) store.selected.delete(key)
+        if (documentStore.selected.has(key)) documentStore.selected.delete(key)
-        else store.selected.add(key)
+        else documentStore.selected.add(key)
      }
    }
    // @ts-ignore
@@ -217,14 +293,7 @@ watchEffect(() => {
    focusBreadcrumb()
  }
 })
-let nowkey = ref(0)
+const mkdir = (doc: Document, name: string) => {
 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() {
      control.send(
@@ -241,24 +310,34 @@ const mkdir = (doc: Doc, name: string) => {
        editing.value = null
      } else {
        console.log('mkdir', msg)
-        router.push(doc.urlrouter)
+        router.push(`/${doc.loc}/${name}/`)
      }
    }
  })
-  // We should get an update from watch but this is quicker
+  doc.name = name // We should get an update from watch but this is quicker
  doc.name = name
  doc.key = crypto.randomUUID()
 }
-const showFolderBreadcrumb = (i: number) => {
+
-  const docs = props.documents
+// Column sort
-  const docloc = docs[i].loc
+const toggleSort = (name: string) => {
-  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
+  sort.value = sort.value === name ? '' : name
 }
 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
 }
 const sorted = (documents: Document[]) => {
  const cmp = sortCompare[sort.value as keyof typeof sortCompare]
  const sorted = [...documents]
  if (cmp) sorted.sort(cmp)
  return sorted
 }
 const selectionIndeterminate = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
-      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
+      props.documents.some((doc: Document) => documentStore.selected.has(doc.key)) &&
      !allSelected.value
    )
  },
@@ -269,16 +348,16 @@ const allSelected = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
-      props.documents.every((doc: Doc) => store.selected.has(doc.key))
+      props.documents.every((doc: Document) => documentStore.selected.has(doc.key))
    )
  },
  set: (value: boolean) => {
    console.log('Setting allSelected', value)
    for (const doc of props.documents) {
      if (value) {
-        store.selected.add(doc.key)
+        documentStore.selected.add(doc.key)
      } else {
-        store.selected.delete(doc.key)
+        documentStore.selected.delete(doc.key)
      }
    }
  }
@@ -286,13 +365,9 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
-const contextMenu = (ev: MouseEvent, doc: Doc) => {
+const contextMenu = (ev: Event, doc: Document) => {
  cursor.value = doc
-  ContextMenu.showContextMenu({
+  console.log('Context menu', ev, doc)
    x: ev.x, y: ev.y, items: [
      { label: 'Rename', onClick: () => { editing.value = doc } },
    ],
  })
 }
 </script>
@@ -326,7 +401,7 @@ table .selection {
  text-overflow: clip;
 }
 table .modified {
-  width: 9em;
+  width: 8em;
 }
 table .size {
  width: 5em;
@@ -440,4 +515,3 @@ tbody .selection input {
  color: #888;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/FileRenameInput.vue
+++ b/cista-front/src/components/FileRenameInput.vue
@@ -12,7 +12,7 @@
 </template>
 <script setup lang="ts">
-import { Doc } from '@/repositories/Document'
+import type { Document } from '@/repositories/Document'
 import { ref, onMounted, nextTick } from 'vue'
 const input = ref<HTMLInputElement | null>(null)
@@ -28,8 +28,8 @@ onMounted(() => {
 })
 const props = defineProps<{
-  doc: Doc
+  doc: Document
-  rename: (doc: Doc, newName: string) => void
+  rename: (doc: Document, newName: string) => void
  exit: () => void
 }>()
@@ -46,8 +46,8 @@ const apply = () => {
 <style>
 input#FileRenameInput {
-  color: var(--input-color);
+  color: var(--primary-color);
-  background: var(--input-background);
+  background: var(--primary-background);
  border: 0;
  border-radius: 0.3rem;
  padding: 0.4rem;
--- a/cista-front/src/components/FileViewer.vue
+++ b/cista-front/src/components/FileViewer.vue
@@ -0,0 +1,52 @@
 <template>
  <object
    v-if="props.type === 'pdf'"
    :data="dataURL"
    type="application/pdf"
    width="100%"
    height="100%"
  ></object>
  <a-image
    v-else-if="props.type === 'image'"
    width="50%"
    :src="dataURL"
    @click="() => setVisible(true)"
    :previewMask="false"
    :preview="{
      visibleImg,
      onVisibleChange: setVisible
    }"
  />
  <!-- Unknown case -->
  <h1 v-else>Unsupported file type</h1>
 </template>
 <script setup lang="ts">
 import { watchEffect, ref } from 'vue'
 import Router from '@/router/index'
 import { url_document_get } from '@/repositories/Document'
 const dataURL = ref('')
 watchEffect(() => {
  dataURL.value = new URL(
    url_document_get + Router.currentRoute.value.path,
    location.origin
  ).toString()
 })
 const emit = defineEmits({
  visibleImg(value: boolean) {
    return value
  }
 })
 function setVisible(value: boolean) {
  emit('visibleImg', value)
 }
 const props = defineProps<{
  type?: string
  visibleImg: boolean
 }>()
 </script>
 <style></style>
--- a/cista-front/src/components/HeaderMain.vue
+++ b/cista-front/src/components/HeaderMain.vue
@@ -1,15 +1,15 @@
 <template>
  <nav class="headermain">
    <div class="buttons">
-      <template v-if="store.error">
+      <template v-if="documentStore.error">
-        <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
+        <div class="error-message" @click="documentStore.error = ''">{{ documentStore.error }}</div>
        <div class="smallgap"></div>
      </template>
-      <UploadButton :path="props.path" />
+      <UploadButton />
      <SvgButton
        name="create-folder"
        data-tooltip="New folder"
-        @click="() => store.fileExplorer!.newFolder()"
+        @click="() => documentStore.fileExplorer.newFolder()"
      />
      <slot></slot>
      <div class="spacer smallgap"></div>
@@ -17,8 +17,7 @@
        <input
          ref="search"
          type="search"
-          :value="query"
+          v-model="documentStore.search"
          @input="updateSearch"
          placeholder="Search words"
          class="margin-input"
          @keyup.escape="closeSearch"
@@ -31,54 +30,38 @@
 </template>
 <script setup lang="ts">
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
-import { ref, nextTick, watchEffect } from 'vue'
+import { ref, nextTick } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import router from '@/router';
-const store = useMainStore()
+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) => {
+const closeSearch = () => {
  if (!showSearchInput.value) return  // Already closing
  showSearchInput.value = false
  documentStore.search = ''
  const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
  breadcrumb.focus()
  updateSearch(ev)
 }
-const updateSearch = (ev: Event) => {
+const toggleSearchInput = () => {
  const q = (ev.target as HTMLInputElement).value
  let p = props.path.join('/')
  p = p ? `/${p}` : ''
  const url = q ? `${p}//${q}` : (p || '/')
  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
-  if (!showSearchInput.value) return closeSearch(ev)
+  if (!showSearchInput.value) return closeSearch()
  nextTick(() => {
    const input = search.value
    if (input) input.focus()
  })
 }
-watchEffect(() => {
+
  if (props.query) showSearchInput.value = true
 })
 const settingsMenu = (e: Event) => {
  // show the context menu
  const items = []
-  if (store.user.isLoggedIn) {
+  if (documentStore.user.isLoggedIn) {
-    items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
+    items.push({ label: `Logout ${documentStore.user.username ?? ''}`, onClick: () => documentStore.logout() })
  } else {
-    items.push({ label: 'Login', onClick: () => store.loginDialog() })
+    items.push({ label: 'Login', onClick: () => documentStore.loginDialog() })
  }
  ContextMenu.showContextMenu({
    // @ts-ignore
@@ -86,6 +69,7 @@ const settingsMenu = (e: Event) => {
    items,
  })
 }
 defineExpose({
  toggleSearchInput,
  closeSearch,
@@ -114,4 +98,3 @@ input[type='search'] {
  max-width: 30vw;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/HeaderSelected.vue
+++ b/cista-front/src/components/HeaderSelected.vue
@@ -1,29 +1,29 @@
 <template>
-  <template v-if="store.selected.size">
+  <template v-if="documentStore.selected.size">
    <div class="smallgap"></div>
-    <p class="select-text">{{ store.selected.size }} selected ➤</p>
+    <p class="select-text">{{ documentStore.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="store.selected.clear()">❌</button>
+    <button class="action-button unselect" data-tooltip="Unselect all" @click="documentStore.selected.clear()">❌</button>
  </template>
 </template>
 <script setup lang="ts">
 import {connect, controlUrl} from '@/repositories/WS'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 import { computed } from 'vue'
 import type { SelectedItems } from '@/repositories/Document'
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const props = defineProps({
  path: Array<string>
 })
 const dst = computed(() => props.path!.join('/'))
 const op = (op: string, dst?: string) => {
-  const sel = store.selectedFiles
+  const sel = documentStore.selectedFiles
  const msg = {
    op,
    sel: sel.keys.map(key => {
@@ -34,16 +34,16 @@ const op = (op: string, dst?: string) => {
  // @ts-ignore
  if (dst !== undefined) msg.dst = dst
  const control = connect(controlUrl, {
-    message(ev: MessageEvent) {
+    message(ev: WebSocmetMessageEvent) {
      const res = JSON.parse(ev.data)
      if ('error' in res) {
        console.error('Control socket error', msg, res.error)
-        store.error = res.error.message
+        documentStore.error = res.error.message
        return
      } else if (res.status === 'ack') {
        console.log('Control ack OK', res)
        control.close()
-        store.selected.clear()
+        documentStore.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 = store.selectedFiles
+  const sel = documentStore.selectedFiles
  console.log('Download', sel)
  if (sel.keys.length === 0) {
    console.warn('Attempted download but no files found. Missing selected keys:', sel.missing)
-    store.selected.clear()
+    documentStore.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) {
-    store.selected.clear()
+    documentStore.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(() => {
-        store.selected.clear()
+        documentStore.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`)
-  store.selected.clear()
+  documentStore.selected.clear()
 }
 </script>
@@ -152,4 +152,3 @@ const download = async () => {
  text-overflow: ellipsis;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/LoginModal.vue
+++ b/cista-front/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 { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 const confirmLoading = ref<boolean>(false)
-const store = useMainStore()
+const store = useDocumentStore()
 const loginForm = reactive({
  username: '',
@@ -99,4 +99,3 @@ const login = async () => {
  height: 1em;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/ModalDialog.vue
+++ b/cista-front/src/components/ModalDialog.vue
--- a/cista-front/src/components/NotificationLoading.vue
+++ b/cista-front/src/components/NotificationLoading.vue
@@ -0,0 +1,27 @@
 <template>
  <template v-for="upload in documentStore.uploadingDocuments" :key="upload.key">
    <span>{{ upload.name }}</span>
    <div class="progress-container">
      <a-progress :percent="upload.progress" />
      <CloseCircleOutlined class="close-button" @click="dismissUpload(upload.key)" />
    </div>
  </template>
 </template>
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
 const documentStore = useDocumentStore()
 function dismissUpload(key: number) {
  documentStore.deleteUploadingDocument(key)
 }
 </script>
 <style scoped>
 .progress-container {
  display: flex;
  align-items: center;
 }
 .close-button:hover {
  color: #b81414;
 }
 </style>
--- a/cista-front/src/components/SvgButton.vue
+++ b/cista-front/src/components/SvgButton.vue
--- a/cista-front/src/components/UploadButton.vue
+++ b/cista-front/src/components/UploadButton.vue
@@ -0,0 +1,101 @@
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
 import { h, ref } from 'vue'
 const fileUploadButton = ref()
 const folderUploadButton = ref()
 const documentStore = useDocumentStore()
 const open = (placement: any) => openNotification(placement)
 const isNotificationOpen = ref(false)
 const openNotification = (placement: any) => {
  if (!isNotificationOpen.value) {
    /*
    api.open({
      message: `Uploading documents`,
      description: h(NotificationLoading),
      placement,
      duration: 0,
      onClose: () => { isNotificationOpen.value = false }
    });*/
    isNotificationOpen.value = true
  }
 }
 function uploadFileHandler() {
  fileUploadButton.value.click()
 }
 async function load(file: File, start: number, end: number): Promise<ArrayBuffer> {
  const reader = new FileReader()
  const load = new Promise<Event>(resolve => (reader.onload = resolve))
  reader.readAsArrayBuffer(file.slice(start, end))
  const event = await load
  if (event.target && event.target instanceof FileReader) {
    return event.target.result as ArrayBuffer
  } else {
    throw new Error('Error loading file')
  }
 }
 async function sendChunk(file: File, start: number, end: number) {
  const ws = documentStore.wsUpload
  if (ws) {
    const chunk = await load(file, start, end)
    ws.send(
      JSON.stringify({
        name: file.name,
        size: file.size,
        start: start,
        end: end
      })
    )
    ws.send(chunk)
  }
 }
 async function uploadHandler(event: Event) {
  const target = event.target as HTMLInputElement
  const chunkSize = 1 << 20
  if (!target?.files?.length) {
    documentStore.error = 'No files selected'
    return
  }
  for (const idx in target.files) {
    const file = target.files[idx]
    console.log('Uploading', file)
    const numChunks = Math.ceil(file.size / chunkSize)
    const document = documentStore.pushUploadingDocuments(file.name)
    open('bottomRight')
    for (let i = 0; i < numChunks; i++) {
      const start = i * chunkSize
      const end = Math.min(file.size, start + chunkSize)
      const res = await sendChunk(file, start, end)
      console.log('progress: ' + (100 * (i + 1)) / numChunks)
      console.log('Num Chunks: ' + numChunks)
      documentStore.updateUploadingDocuments(document.key, (100 * (i + 1)) / numChunks)
    }
  }
 }
 </script>
 <template>
  <template>
    <input
      ref="fileUploadButton"
      @change="uploadHandler"
      class="upload-input"
      type="file"
      multiple
    />
    <input
      ref="folderUploadButton"
      @change="uploadHandler"
      class="upload-input"
      type="file"
      webkitdirectory
    />
  </template>
  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileUploadButton.click()" />
  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderUploadButton.click()" />
 </template>
--- a/cista-front/src/main.ts
+++ b/cista-front/src/main.ts
--- a/cista-front/src/repositories/Client.ts
+++ b/cista-front/src/repositories/Client.ts
--- a/cista-front/src/repositories/Document.ts
+++ b/cista-front/src/repositories/Document.ts
@@ -0,0 +1,55 @@
 export type FUID = string
 export type Document = {
  loc: string
  name: string
  key: FUID
  size: number
  sizedisp: string
  mtime: number
  modified: string
  haystack: string
  dir: boolean
 }
 export type errorEvent = {
  error: {
    code: number
    message: string
    redirect: string
  }
 }
 // Raw types the backend /api/watch sends us
 export type FileEntry = {
  key: FUID
  size: number
  mtime: number
 }
 export type DirEntry = {
  key: FUID
  size: number
  mtime: number
  dir: DirList
 }
 export type DirList = Record<string, FileEntry | DirEntry>
 export type UpdateEntry = {
  name: string
  deleted?: boolean
  key?: FUID
  size?: number
  mtime?: number
  dir?: DirList
 }
 // Helper structure for selections
 export interface SelectedItems {
  keys: FUID[]
  docs: Record<FUID, Document>
  recursive: Array<[string, string, Document]>
  missing: Set<FUID>
 }
--- a/cista-front/src/repositories/User.ts
+++ b/cista-front/src/repositories/User.ts
--- a/cista-front/src/repositories/WS.ts
+++ b/cista-front/src/repositories/WS.ts
@@ -1,33 +1,14 @@
-import { useMainStore } from "@/stores/main"
+import { useDocumentStore } from "@/stores/documents"
-import type { FileEntry, UpdateEntry, errorEvent } from "./Document"
+import type { DirEntry, UpdateEntry, errorEvent } from "./Document"
 export const controlUrl = '/api/control'
 export const uploadUrl = '/api/upload'
 export const watchUrl = '/api/watch'
-let tree = [] as FileEntry[]
+let tree = null as DirEntry | null
-let reconnDelay = 500
+let reconnectDuration = 500
 let wsWatch = null as WebSocket | null
 export const loadSession = () => {
  const s = localStorage['cista-files']
  if (!s) return false
  const store = useMainStore()
  try {
    tree = JSON.parse(s)
    store.updateRoot(tree)
    console.log(`Loaded session with ${tree.length} items cached`)
    return true
  } catch (error) {
    console.log("Loading session failed", error)
    return false
  }
 }
 const saveSession = () => {
  localStorage["cista-files"] = JSON.stringify(tree)
 }
 export const connect = (path: string, handlers: Partial<Record<keyof WebSocketEventMap, any>>) => {
  const webSocket = new WebSocket(new URL(path, location.origin.replace(/^http/, 'ws')))
  for (const [event, handler] of Object.entries(handlers)) webSocket.addEventListener(event, handler)
@@ -39,7 +20,7 @@ export const watchConnect = () => {
    clearTimeout(watchTimeout)
    watchTimeout = null
  }
-  const store = useMainStore()
+  const store = useDocumentStore()
  if (store.error !== 'Reconnecting...') store.error = 'Connecting...'
  console.log(store.error)
@@ -61,9 +42,8 @@ export const watchConnect = () => {
    }
    if ("server" in msg) {
      console.log('Connected to backend', msg)
      store.server = msg.server
      store.connected = true
-      reconnDelay = 500
+      reconnectDuration = 500
      store.error = ''
      if (msg.user) store.login(msg.user.username, msg.user.privileged)
      else if (store.isUserLogged) store.logout()
@@ -81,16 +61,16 @@ export const watchDisconnect = () => {
 let watchTimeout: any = null
 const watchReconnect = (event: MessageEvent) => {
-  const store = useMainStore()
+  const store = useDocumentStore()
  if (store.connected) {
    console.warn("Disconnected from server", event)
    store.connected = false
    store.error = 'Reconnecting...'
  }
-  reconnDelay = Math.min(5000, reconnDelay + 500)
+  reconnectDuration = Math.min(5000, reconnectDuration + 500)
  // The server closes the websocket after errors, so we need to reopen it
  if (watchTimeout !== null) clearTimeout(watchTimeout)
-  watchTimeout = setTimeout(watchConnect, reconnDelay)
+  watchTimeout = setTimeout(watchConnect, reconnectDuration)
 }
@@ -113,40 +93,38 @@ const handleWatchMessage = (event: MessageEvent) => {
  }
 }
-function handleRootMessage({ root }: { root: FileEntry[] }) {
+function handleRootMessage({ root }: { root: DirEntry }) {
-  const store = useMainStore()
+  const store = useDocumentStore()
  console.log('Watch root', root)
  store.updateRoot(root)
  tree = root
  saveSession()
 }
 function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
-  const store = useMainStore()
+  const store = useDocumentStore()
-  const update = updateData.update
+  console.log('Watch update', updateData.update)
  console.log('Watch update', update)
  if (!tree) return console.error('Watch update before root')
-  let newtree = []
+  let node: DirEntry = tree
-  let oidx = 0
+  for (const elem of updateData.update) {
-
+    if (elem.deleted) {
-  for (const [action, arg] of update) {
+      delete node.dir[elem.name]
-    if (action === 'k') {
+      break // Deleted elements can't have further children
      newtree.push(...tree.slice(oidx, oidx + arg))
      oidx += arg
    }
-    else if (action === 'd') oidx += arg
+    if (elem.name) {
-    else if (action === 'i') newtree.push(...arg)
+      // @ts-ignore
-    else console.log("Unknown update action", action, arg)
+      console.log(node, elem.name)
      node = node.dir[elem.name] ||= {}
    }
    if (elem.key !== undefined) node.key = elem.key
    if (elem.size !== undefined) node.size = elem.size
    if (elem.mtime !== undefined) node.mtime = elem.mtime
    if (elem.dir !== undefined) node.dir = elem.dir
  }
-  if (oidx != tree.length)
+  store.updateRoot(tree)
    throw Error(`Tree update out of sync, number of entries mismatch: got ${oidx}, expected ${tree.length}, new tree ${newtree.length}`)
  store.updateRoot(newtree)
  tree = newtree
  saveSession()
 }
 function handleError(msg: errorEvent) {
-  const store = useMainStore()
+  const store = useDocumentStore()
  if (msg.error.code === 401) {
    store.user.isOpenLoginModal = true
    store.user.isLoggedIn = false
--- a/cista-front/src/router/index.ts
+++ b/cista-front/src/router/index.ts
--- a/cista-front/src/stores/documents.ts
+++ b/cista-front/src/stores/documents.ts
@@ -0,0 +1,183 @@
 import type {
  Document,
  DirEntry,
  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[],
    search: "" as string,
    selected: new Set<FUID>(),
    uploadingDocuments: [],
    uploadCount: 0 as number,
    fileExplorer: null,
    error: '' as string,
    connected: false,
    user: {
      username: '',
      privileged: false,
      isLoggedIn: false,
      isOpenLoginModal: false
    } as User
  }),
  persist: {
    storage: sessionStorage,
    paths: ['document'],
  },
  actions: {
    updateRoot(root: DirEntry | null = null) {
      if (!root) {
        this.document = []
        return
      }
      // Transform tree data to flat documents array
      let loc = ""
      const mapper = ([name, attr]: [string, FileEntry | DirEntry]) => ({
        ...attr,
        loc,
        name,
        sizedisp: formatSize(attr.size),
        modified: formatUnixDate(attr.mtime),
        haystack: haystackFormat(name),
      })
      const queue = [...Object.entries(root.dir ?? {}).map(mapper)]
      const docs = []
      for (let doc; (doc = queue.shift()) !== undefined;) {
        docs.push(doc)
        if ("dir" in doc) {
          // Recurse but replace recursive structure with boolean
          loc = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
          queue.push(...Object.entries(doc.dir).map(mapper))
          // @ts-ignore
          doc.dir = true
        }
        // @ts-ignore
        else doc.dir = false
      }
      // Pre sort directory entries folders first then files, names in natural ordering
      docs.sort((a, b) =>
        // @ts-ignore
        b.dir - a.dir ||
        collator.compare(a.name, b.name)
      )
      this.document = docs as Document[]
    },
    updateUploadingDocuments(key: number, progress: number) {
      for (const d of this.uploadingDocuments) {
        if (d.key === key) d.progress = progress
      }
    },
    pushUploadingDocuments(name: string) {
      this.uploadCount++
      const document = {
        key: this.uploadCount,
        name: name,
        progress: 0
      }
      this.uploadingDocuments.push(document)
      return document
    },
    deleteUploadingDocument(key: number) {
      this.uploadingDocuments = this.uploadingDocuments.filter(e => e.key !== key)
    },
    updateModified() {
      for (const d of this.document) {
        if ('mtime' in d) d.modified = formatUnixDate(d.mtime)
      }
    },
    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()
      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/cista-front/src/utils/index.ts
+++ b/cista-front/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(/\s+/)}
+  return {based, words: based.split(/\W+/)}
 }
 // Test if haystack includes needle
--- a/cista-front/src/views/ExplorerView.vue
+++ b/cista-front/src/views/ExplorerView.vue
@@ -10,40 +10,33 @@
 <script setup lang="ts">
 import { watchEffect, ref, computed } from 'vue'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 import Router from '@/router/index'
 import { needleFormat, localeIncludes, collator } from '@/utils';
 import { sorted } from '@/utils/docsort';
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const fileExplorer = ref()
-const props = defineProps<{
+const props = defineProps({
  path: Array<string>
-  query: string
+})
 }>()
 const documents = computed(() => {
  if (!props.path) return []
  const loc = props.path.join('/')
  const query = props.query
  // List the current location
-  if (!query) return sorted(
+  if (!documentStore.search) return documentStore.document.filter(doc => doc.loc === loc)
    store.document.filter(doc => doc.loc === loc),
    store.prefs.sortListing,
  )
  // Find up to 100 newest documents that match the search
-  const needle = needleFormat(query)
+  const search = documentStore.search
  const needle = needleFormat(search)
  let limit = 100
  let docs = []
-  for (const doc of store.recentDocuments) {
+  for (const doc of documentStore.recentDocuments) {
    if (localeIncludes(doc.haystack, needle)) {
      docs.push(doc)
      if (--limit === 0) break
    }
  }
  // Organize by folder, by relevance
  const locsub = loc + '/'
  // Custom sort override in effect?
  const order = store.prefs.sortFiltered
  if (order) return sorted(docs, order)
  // Sort by relevance - current folder, then subfolders, then others
  docs.sort((a, b) => (
    // @ts-ignore
    (b.loc === loc) - (a.loc === loc) ||
@@ -53,14 +46,13 @@ const documents = computed(() => {
    // @ts-ignore
    (a.type === 'file') - (b.type === 'file') ||
    // @ts-ignore
-    b.name.includes(query) - a.name.includes(query) ||
+    b.name.includes(search) - a.name.includes(search) ||
    collator.compare(a.name, b.name)
  ))
  return docs
 })
 watchEffect(() => {
-  store.fileExplorer = fileExplorer.value
+  documentStore.fileExplorer = fileExplorer.value
  store.query = props.query
 })
 </script>
--- a/cista-front/tsconfig.app.json
+++ b/cista-front/tsconfig.app.json
--- a/cista-front/tsconfig.json
+++ b/cista-front/tsconfig.json
--- a/cista-front/tsconfig.node.json
+++ b/cista-front/tsconfig.node.json
--- a/cista-front/tsconfig.vitest.json
+++ b/cista-front/tsconfig.vitest.json
--- a/cista-front/vite.config.ts
+++ b/cista-front/vite.config.ts
--- a/cista/main.py
+++ b/cista/main.py
@@ -105,9 +105,9 @@ def _confdir(args):
        if confdir.exists() and not confdir.is_dir():
            if confdir.name != config.conffile.name:
                raise ValueError("Config path is not a directory")
-            # Accidentally pointed to the db.toml, use parent
+            # Accidentally pointed to the cista.toml, use parent
            confdir = confdir.parent
-        config.conffile = confdir / config.conffile.name
+        config.conffile = config.conffile.with_parent(confdir)
 def _user(args):
--- a/cista/api.py
+++ b/cista/api.py
@@ -37,18 +37,10 @@ async def upload(req, ws):
            )
        req = msgspec.json.decode(text, type=FileRange)
        pos = req.start
-        while True:
+        data = None
-            data = await ws.recv()
+        while pos < req.end and (data := await ws.recv()) and isinstance(data, bytes):
            if not isinstance(data, bytes):
                break
            if len(data) > req.end - pos:
                raise ValueError(
                    f"Expected up to {req.end - pos} bytes, got {len(data)} bytes"
                )
            sentsize = await alink(("upload", req.name, pos, data, req.size))
            pos += typing.cast(int, sentsize)
            if pos >= req.end:
                break
        if pos != req.end:
            d = f"{len(data)} bytes" if isinstance(data, bytes) else data
            raise ValueError(f"Expected {req.end - pos} more bytes, got {d}")
@@ -96,7 +88,7 @@ async def watch(req, ws):
        msgspec.json.encode(
            {
                "server": {
-                    "name": config.config.name or config.config.path.name,
+                    "name": "Cista",  # Should be configurable
                    "version": __version__,
                    "public": config.config.public,
                },
@@ -111,11 +103,11 @@ async def watch(req, ws):
    )
    uuid = token_bytes(16)
    try:
-        with watching.state.lock:
+        with watching.tree_lock:
            q = watching.pubsub[uuid] = asyncio.Queue()
            # Init with disk usage and full tree
-            await ws.send(watching.format_space(watching.state.space))
+            await ws.send(watching.format_du())
-            await ws.send(watching.format_root(watching.state.root))
+            await ws.send(watching.format_tree())
        # Send updates
        while True:
            await ws.send(await q.get())
--- a/cista/app.py
+++ b/cista/app.py
@@ -1,8 +1,10 @@
 import asyncio
 import datetime
 import mimetypes
 from collections import deque
 from concurrent.futures import ThreadPoolExecutor
-from pathlib import Path, PurePath, PurePosixPath
+from importlib.resources import files
 from pathlib import Path
 from stat import S_IFDIR, S_IFREG
 from urllib.parse import unquote
 from wsgiref.handlers import format_date_time
@@ -10,13 +12,15 @@ from wsgiref.handlers import format_date_time
 import brotli
 import sanic.helpers
 from blake3 import blake3
 from natsort import natsorted, ns
 from sanic import Blueprint, Sanic, empty, raw
-from sanic.exceptions import Forbidden, NotFound, ServerError
+from sanic.exceptions import Forbidden, NotFound
 from sanic.log import logging
 from stream_zip import ZIP_AUTO, stream_zip
 from cista import auth, config, session, watching
 from cista.api import bp
 from cista.protocol import DirEntry
 from cista.util.apphelpers import handle_sanic_exception
 # Workaround until Sanic PR #2824 is merged
@@ -32,9 +36,7 @@ app.exception(Exception)(handle_sanic_exception)
 async def main_start(app, loop):
    config.load_config()
    await watching.start(app, loop)
-    app.ctx.threadexec = ThreadPoolExecutor(
+    app.ctx.threadexec = ThreadPoolExecutor(max_workers=8)
        max_workers=8, thread_name_prefix="cista-ioworker"
    )
@app.after_server_stop
@@ -47,8 +49,8 @@ async def main_stop(app, loop):
 async def use_session(req):
    req.ctx.session = session.get(req)
    try:
-        req.ctx.username = req.ctx.session["username"]  # type: ignore
+        req.ctx.username = req.ctx.session["username"]
-        req.ctx.user = config.config.users[req.ctx.username]
+        req.ctx.user = config.config.users[req.ctx.session["username"]]  # type: ignore
    except (AttributeError, KeyError, TypeError):
        req.ctx.username = None
        req.ctx.user = None
@@ -79,16 +81,22 @@ def http_fileserver(app, _):
 www = {}
@app.before_server_start
 async def load_wwwroot(*_ignored):
    global www
    www = await asyncio.get_event_loop().run_in_executor(None, _load_wwwroot, www)
 def _load_wwwroot(www):
    wwwnew = {}
-    base = Path(__file__).with_name("wwwroot")
+    base = files("cista") / "wwwroot"
-    paths = [PurePath()]
+    paths = ["."]
    while paths:
        path = paths.pop(0)
        current = base / path
        for p in current.iterdir():
            if p.is_dir():
-                paths.append(p.relative_to(base))
+                paths.append(current / p.parts[-1])
                continue
            name = p.relative_to(base).as_posix()
            mime = mimetypes.guess_type(name)[0] or "application/octet-stream"
@@ -119,35 +127,15 @@ def _load_wwwroot(www):
            if len(br) >= len(data):
                br = False
            wwwnew[name] = data, br, headers
    if not wwwnew:
        raise ServerError(
            "Web frontend missing. Did you forget npm run build?",
            extra={"wwwroot": str(base)},
            quiet=True,
        )
    return wwwnew
-@app.before_server_start
+@app.add_task
 async def start(app):
    await load_wwwroot(app)
    if app.debug:
        app.add_task(refresh_wwwroot())
 async def load_wwwroot(app):
    global www
    www = await asyncio.get_event_loop().run_in_executor(
        app.ctx.threadexec, _load_wwwroot, www
    )
 async def refresh_wwwroot():
    while True:
        await asyncio.sleep(0.5)
        try:
            wwwold = www
-            await load_wwwroot(app)
+            await load_wwwroot()
            changes = ""
            for name in sorted(www):
                attr = www[name]
@@ -163,6 +151,7 @@ async def refresh_wwwroot():
            print("Error loading wwwroot", e)
        if not app.debug:
            return
        await asyncio.sleep(0.5)
@app.route("/<path:path>", methods=["GET", "HEAD"])
@@ -177,70 +166,66 @@ async def wwwroot(req, path=""):
        return empty(304, headers=headers)
    # Brotli compressed?
    if br and "br" in req.headers.accept_encoding.split(", "):
-        headers = {**headers, "content-encoding": "br"}
+        headers = {
            **headers,
            "content-encoding": "br",
        }
        data = br
    return raw(data, headers=headers)
 def get_files(wanted: set) -> list[tuple[PurePosixPath, Path]]:
    loc = PurePosixPath()
    idx = 0
    ret = []
    level: int | None = None
    parent: PurePosixPath | None = None
    with watching.state.lock:
        root = watching.state.root
        while idx < len(root):
            f = root[idx]
            loc = PurePosixPath(*loc.parts[: f.level - 1]) / f.name
            if parent is not None and f.level <= level:
                level = parent = None
            if f.key in wanted:
                level, parent = f.level, loc.parent
            if parent is not None:
                wanted.discard(f.key)
                ret.append((loc.relative_to(parent), watching.rootpath / loc))
            idx += 1
    return ret
@app.get("/zip/<keys>/<zipfile:ext=zip>")
 async def zip_download(req, keys, zipfile, ext):
    """Download a zip archive of the given keys"""
    wanted = set(keys.split("+"))
-    files = get_files(wanted)
+    with watching.tree_lock:
        q = deque([([], None, watching.tree[""].dir)])
        files = []
        while q:
            locpar, relpar, d = q.pop()
            for name, attr in d.items():
                loc = [*locpar, name]
                rel = None
                if relpar or attr.key in wanted:
                    rel = [*relpar, name] if relpar else [name]
                    wanted.discard(attr.key)
                isdir = isinstance(attr, DirEntry)
                if isdir:
                    q.append((loc, rel, attr.dir))
                if rel:
                    files.append(
                        ("/".join(rel), Path(watching.rootpath.joinpath(*loc)))
                    )
    if not files:
        raise NotFound(
            "No files found",
-            context={"keys": keys, "zipfile": f"{zipfile}.{ext}", "wanted": wanted},
+            context={"keys": keys, "zipfile": zipfile, "wanted": wanted},
        )
    if wanted:
        raise NotFound("Files not found", context={"missing": wanted})
    files = natsorted(files, key=lambda f: f[0], alg=ns.IGNORECASE)
    def local_files(files):
        for rel, p in files:
            s = p.stat()
            size = s.st_size
            modified = datetime.datetime.fromtimestamp(s.st_mtime, datetime.UTC)
            name = rel.as_posix()
            if p.is_dir():
-                yield f"{name}/", modified, S_IFDIR | 0o755, ZIP_AUTO(size), iter(b"")
+                yield rel, modified, S_IFDIR | 0o755, ZIP_AUTO(size), b""
            else:
-                yield name, modified, S_IFREG | 0o644, ZIP_AUTO(size), contents(p, size)
+                yield rel, modified, S_IFREG | 0o644, ZIP_AUTO(size), contents(p)
-    def contents(name, size):
+    def contents(name):
        with name.open("rb") as f:
-            while size > 0 and (chunk := f.read(min(size, 1 << 20))):
+            while chunk := f.read(65536):
                size -= len(chunk)
                yield chunk
        assert size == 0
    def worker():
        try:
            for chunk in stream_zip(local_files(files)):
-                asyncio.run_coroutine_threadsafe(queue.put(chunk), loop).result()
+                asyncio.run_coroutine_threadsafe(queue.put(chunk), loop)
        except Exception:
            logging.exception("Error streaming ZIP")
            raise
@@ -253,10 +238,7 @@ async def zip_download(req, keys, zipfile, ext):
    thread = loop.run_in_executor(app.ctx.threadexec, worker)
    # Stream the response
-    res = await req.respond(
+    res = await req.respond(content_type="application/zip")
        content_type="application/zip",
        headers={"cache-control": "no-store"},
    )
    while chunk := await queue.get():
        await res.send(chunk)
--- a/cista/auth.py
+++ b/cista/auth.py
@@ -68,10 +68,10 @@ def verify(request, *, privileged=False):
        if request.ctx.user:
            if request.ctx.user.privileged:
                return
-            raise Forbidden("Access Forbidden: Only for privileged users", quiet=True)
+            raise Forbidden("Access Forbidden: Only for privileged users")
    elif config.config.public or request.ctx.user:
        return
-    raise Unauthorized("Login required", "cookie", quiet=True)
+    raise Unauthorized("Login required", "cookie")
 bp = Blueprint("auth")
--- a/cista/config.py
+++ b/cista/config.py
@@ -14,7 +14,6 @@ class Config(msgspec.Struct):
    listen: str
    secret: str = secrets.token_hex(12)
    public: bool = False
    name: str = ""
    users: dict[str, User] = {}
    links: dict[str, Link] = {}
--- a/cista/fileio.py
+++ b/cista/fileio.py
@@ -34,11 +34,9 @@ class File:
            self.open_rw()
        assert self.fd is not None
        if file_size is not None:
            assert pos + len(buffer) <= file_size
            os.ftruncate(self.fd, file_size)
-        if buffer:
+        os.lseek(self.fd, pos, os.SEEK_SET)
-            os.lseek(self.fd, pos, os.SEEK_SET)
+        os.write(self.fd, buffer)
            os.write(self.fd, buffer)
    def __getitem__(self, slice):
        if self.fd is None:
--- a/cista/protocol.py
+++ b/cista/protocol.py
@@ -22,7 +22,7 @@ class MkDir(ControlBase):
    def __call__(self):
        path = config.config.path / filename.sanitize(self.path)
-        path.mkdir(parents=True, exist_ok=False)
+        path.mkdir(parents=False, exist_ok=False)
 class Rename(ControlBase):
@@ -112,43 +112,47 @@ class ErrorMsg(msgspec.Struct):
 ## Directory listings
-class FileEntry(msgspec.Struct, array_like=True):
+class FileEntry(msgspec.Struct):
-    level: int
+    key: str
    size: int
    mtime: int
 class DirEntry(msgspec.Struct):
    key: str
    size: int
    mtime: int
    dir: DirList
    def __getitem__(self, name):
        return self.dir[name]
    def __setitem__(self, name, value):
        self.dir[name] = value
    def __contains__(self, name):
        return name in self.dir
    def __delitem__(self, name):
        del self.dir[name]
    @property
    def props(self):
        return {k: v for k, v in self.__struct_fields__ if k != "dir"}
 DirList = dict[str, FileEntry | DirEntry]
 class UpdateEntry(msgspec.Struct, omit_defaults=True):
    """Updates the named entry in the tree. Fields that are set replace old values. A list of entries recurses directories."""
    name: str
    key: str
-    mtime: int
+    deleted: bool = False
-    size: int
+    size: int | None = None
-    isfile: int
+    mtime: int | None = None
-
+    dir: DirList | None = None
    def __repr__(self):
        return self.key or "FileEntry()"
 class Update(msgspec.Struct, array_like=True):
    ...
 class UpdKeep(Update, tag="k"):
    count: int
 class UpdDel(Update, tag="d"):
    count: int
 class UpdIns(Update, tag="i"):
    items: list[FileEntry]
 class UpdateMessage(msgspec.Struct):
    update: list[UpdKeep | UpdDel | UpdIns]
 class Space(msgspec.Struct):
    disk: int
    free: int
    usage: int
    storage: int
 def make_dir_data(root):
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leo Vasanko	37167a41a6	Fix server exit hang on MacOS, cleanup, include directories in zips, natural sort.	2023-11-07 16:54:46 -08:00
Leo Vasanko	63f6008a0a	Stricter filename sanitation	2023-11-07 16:47:41 -08:00
Leo Vasanko	4fd769cce2	Zip download done.	2023-11-07 15:57:42 -08:00
Leo Vasanko	2695fc67f3	Offer polling instead of inotify for OSes other than Linux	2023-11-07 15:37:47 -08:00
Leo Vasanko	d42f0f7601	Zip download support, streaming. Needs cleanup	2023-11-07 23:30:35 +00:00
Leo Vasanko	4c51029c9f	A number of bugfixed on watching, which now works much better.	2023-11-07 20:15:09 +00:00
Leo Vasanko	4de2027959	Fix scaling and mobile layouts	2023-11-07 19:05:21 +00:00
Leo Vasanko	d5e1304c0d	Connection status/error messages	2023-11-07 18:01:34 +00:00
Leo Vasanko	54d6ea6332	Implement proper login/logout UI, fix breadcrumbs on file listing.	2023-11-07 16:10:56 +00:00
Leo Vasanko	c695c09ecc	Persist document in sessionStorage for fast reloads and offline use.	2023-11-07 14:53:36 +00:00
Leo Vasanko	d36605cd5b	Rewritten WS handling, file selections. Minor UI fixes.	2023-11-07 14:48:48 +00:00
Leo Vasanko	fc1fb3ea5d	Give full tree updates as root message rather than everything as update messages	2023-11-07 14:47:40 +00:00
Leo Vasanko	32fa005c62	Add summary row on file listing	2023-11-07 02:27:04 +00:00
Leo Vasanko	fabec4dd7e	Even faster search	2023-11-07 02:26:50 +00:00
Leo Vasanko	ece64f48be	Cleanup, TS errors but it compiles and works...	2023-11-07 01:26:41 +00:00
Leo Vasanko	1f24313d23	Bugfixes on tooltip z-indexing. Search using breadcrumbs in table. Link fixes.	2023-11-07 00:44:55 +00:00
Leo Vasanko	e3af21af91	Rewrite document store to keep all docs: filter and path selection without recreation. Much faster sorting and filtering.	2023-11-06 21:50:29 +00:00
Leo Vasanko	6938740b0f	Improved responsive styles. Improved focus changes.	2023-11-06 19:23:21 +00:00
Leo Vasanko	b25d0fc14b	Breadcrumbs keep longest path, browsing breadcrumbs with left/right arrows, highlight current.	2023-11-06 18:51:51 +00:00
Leo Vasanko	5386508e28	Improved mobile layout for landscape. Oneline header.	2023-11-06 16:51:10 +00:00
Leo Vasanko	129250e072	Implement tooltips and other UI tuning.	2023-11-06 15:33:43 +00:00
Leo Vasanko	c2be2ecd31	Fix copying of files.	2023-11-06 15:32:58 +00:00
Leo Vasanko	dd1d85f412	dateformat code cleanup	2023-11-06 11:38:11 +00:00
Leo Vasanko	4c7b310f82	Added time element on mtimes, dates smaller, code formatted	2023-11-05 23:12:42 +00:00
Leo Vasanko	1250037cfd	Always the same date formatting by fixing a suitable locale	2023-11-05 17:14:10 +00:00
Leo Vasanko	cdc936d2d5	Fix bug when browsing around the end	2023-11-05 16:49:24 +00:00
Leo Vasanko	4f370440d9	Shift-Up/Down selection	2023-11-05 16:07:28 +00:00
Leo Vasanko	feaa8e315e	Tighter table	2023-11-05 15:55:23 +00:00
Leo Vasanko	14f7253ece	Rename FUID field to key everywhere.	2023-11-05 15:54:55 +00:00
Leo Vasanko	9d3d27faf3	Remove generated file from repo	2023-11-05 15:36:37 +00:00
Leo Vasanko	dd235e8f25	Fix clicking files	2023-11-05 14:15:48 +00:00
Leo Vasanko	139ff51dcd	Remove build (wwwroot) from repo. UI tweaks.	2023-11-05 14:07:07 +00:00
Leo Vasanko	589e5a682c	Smoother UI and various other adjustments.	2023-11-05 13:13:32 +00:00
Leo Vasanko	8114d679ef	Merged checkboxes and file icons.	2023-11-05 04:11:24 +00:00
Leo Vasanko	32b8e0702c	Fix file deletion, now erases folders and files.	2023-11-05 02:19:46 +00:00
Leo Vasanko	cc74912bb9	Print CSS	2023-11-05 01:31:18 +00:00
Leo Vasanko	c3cf4caa9a	Create new folder automatically navigates into it. Rename still flaky.	2023-11-04 21:41:44 +00:00
Leo Vasanko	b3eacf04f7	Fix selection button visibility	2023-11-04 21:04:29 +00:00
Leo Vasanko	047facaacb	Style tuning	2023-11-04 20:54:14 +00:00
Leo Vasanko	41fbd3d122	Multiple file downloads via Filesystem API, and other tuning.	2023-11-04 19:50:05 +00:00
Leo Vasanko	40a45568c1	Remove width and height attributes of SVGs to make them scalable via CSS	2023-11-04 14:29:49 +00:00
Leo Vasanko	8c6690ea98	Major changes: - File selections working - CSS more responsive, more consistent use of colors and variables - Keyboard navigation - Added context menu buttons and handler, the menu is still missing - Added download and settings buttons (no functions yet) - Various minor fixes everywhere	2023-11-04 14:10:18 +00:00
Leo Vasanko	997e0b8549	Numeric sorting and filter. "New Folder 12" > "New Folder 2"	2023-11-04 01:27:09 +00:00
Leo Vasanko	115bb5db59	Restore quick search functionality.	2023-11-04 00:57:54 +00:00
Leo Vasanko	5f1eb0503a	...	2023-11-04 00:44:13 +00:00
Leo Vasanko	4aae194060	Remove extra new folder button, instead make header button work	2023-11-04 00:43:37 +00:00
Leo Vasanko	12eabd29c3	Recreated page navigation buttons.	2023-11-04 00:21:35 +00:00
Leo Vasanko	589b21f944	Don't need to import components anymore	2023-11-03 22:26:30 +00:00
Leo Vasanko	d3f584b738	URL decode before using control API	2023-11-03 21:59:44 +00:00
Leo Vasanko	225f2b0651	A bit hacky but working mkdir	2023-11-03 21:54:11 +00:00
Leo Vasanko	b759d8324c	Login still a bit buggy but working...	2023-11-03 21:19:26 +00:00
Leo Vasanko	119aba2b3c	Cleanup, lint, format etc.	2023-11-03 20:07:05 +00:00
Leo Vasanko	f52d58d645	Big changes... - Added Droppy SVG icons - Implemented Droppy-style Breadcrumb component - Implemented a Dialog component - Attempted transition effects on file explorer (not yet functional) - Changed FileExplorer to take list of documents and current path via props. - Various other cleanup etc.	2023-11-03 16:19:21 +00:00
Leo Vasanko	6cba674b30	Build down to 90 kB, 1.5 MB less after removing ant-design.	2023-11-02 22:34:57 +00:00
Leo Vasanko	831b2716f7	Removing stuff, refactoring for simplicity	2023-11-02 21:52:21 +00:00
Leo Vasanko	7e5901a2cf	Fix indent	2023-11-02 18:51:34 +00:00
Leo Vasanko	a4f95d730b	Fix file links	2023-11-02 17:58:36 +00:00
Leo Vasanko	56082cba15	Faster animation to match the fast update	2023-11-02 17:56:55 +00:00
Leo Vasanko	3479a0da57	Remove node_modules	2023-11-02 17:40:25 +00:00
Leo Vasanko	f99d92b217	Add support for actual renaming of files, and UI on plain tree.	2023-11-02 17:37:28 +00:00
Leo Vasanko	68a701538b	Prototyping plain table for files list	2023-11-02 15:34:37 +00:00
Leo Vasanko	05a16e3037	New build, typing ignores...	2023-11-01 23:07:13 +00:00
Leo Vasanko	52ecbc3d36	Search filtering	2023-11-01 23:00:59 +00:00
Leo Vasanko	042f1b7f42	cista.util submodule	2023-11-01 21:29:34 +00:00
Leo Vasanko	d27cb2133a	Rewrite folder selection. Needs better error handling still.	2023-11-01 21:29:13 +00:00
Leo Vasanko	a8ea43194d	Add settings to use npm run dev server with cista -l :8000 backend	2023-11-01 21:12:47 +00:00
Leo Vasanko	07fe7448cc	Update front build.	2023-11-01 20:16:37 +00:00
Leo Vasanko	783af44e26	Ruff	2023-11-01 19:58:59 +00:00
Leo Vasanko	0d6180e8a4	Add charset=UTF-8	2023-11-01 17:32:48 +00:00
Leo Vasanko	bdc0bbd44f	Implemented HTTP caching and updates on wwwroot, much faster page loads.	2023-11-01 17:08:05 +00:00
Leo Vasanko	ba36eaec1b	Allow multiple commands on control socket without disconnecting.	2023-11-01 14:57:54 +00:00
Leo Vasanko	a435a30c88	Realtime updates of wwwroot files when --dev is used.	2023-11-01 14:53:57 +00:00
Leo Vasanko	742b05ed66	Faster wwwroot serving, uses RAM cache of brotli compressed data for all assets.	2023-11-01 14:40:08 +00:00
Leo Vasanko	a26dc42d88	Fix control message decoding.	2023-11-01 14:12:06 +00:00
Leo Vasanko	9002afbc7e	Merged something	2023-11-01 14:03:17 +00:00
Leo Vasanko	acdd776b92	Formatting and fix Internal Server Error on upload	2023-10-28 20:20:34 +00:00
Andy-Ruda	b3fd9637eb	Login, Download and visuals update	2023-10-28 04:13:01 -05:00
Andy-Ruda	2b72508206	Search Bar UI update	2023-10-27 15:32:21 +00:00
Leo Vasanko	8cc3ed1a04	Human-readable sizes	2023-10-27 08:28:03 +03:00
Leo Vasanko	0d186726b5	Prettier file listing, using browser instead of viewer for file display (for now), sorting improved, modified timestamps improved.	2023-10-27 07:53:30 +03:00
Leo Vasanko	63bbe84859	Provide file/dir id from server. The value will stay the same if the file is renamed/moved, but will change if a file is replaced by another with the same name.	2023-10-27 07:51:51 +03:00
Leo Vasanko	202f28ff15	Add esbuild dependency	2023-10-27 04:34:27 +03:00
Andy-Ruda	41772e6c18	Fix get files #build_commit	2023-10-26 10:01:54 -05:00
Andy-Ruda	e52379d515	Fix get files #build_commit	2023-10-26 09:48:12 -05:00
Andy-Ruda	74987898c9	Fix get files #build_commit	2023-10-26 09:34:24 -05:00
Andy-Ruda	859d312913	Fix get files	2023-10-26 09:14:24 -05:00
Andy-Ruda	4bc9cf4534	Update endpoints and URL bases configuration	2023-10-26 09:06:07 -05:00
Andy-Ruda	754d779069	Test frontend #only_compile	2023-10-26 00:10:52 -05:00
Andy-Ruda	367e4ba0ea	Test frontend #only_compile	2023-10-26 00:08:06 -05:00
Andy-Ruda	c2e9a4af05	Test frontend #only_compile	2023-10-26 00:06:45 -05:00
Andy-Ruda	6cdc37a172	Test frontend #only_compile	2023-10-26 00:05:11 -05:00
Andy-Ruda	19699564c2	Test frontend #only_compile	2023-10-26 00:02:45 -05:00
Andy-Ruda	7baf8b3f9b	Test frontend #only_compile	2023-10-25 23:55:50 -05:00
Andy-Ruda	47329ac04e	Test frontend #only_compile	2023-10-25 23:46:21 -05:00
Andy-Ruda	f4013d1196	Test frontend #only_compile	2023-10-25 23:34:20 -05:00
Andy-Ruda	3672156b5e	Test frontend #only_compile	2023-10-25 23:31:13 -05:00
Andy-Ruda	f2b37852da	Test frontend #only_compile	2023-10-25 21:56:45 -05:00
Andy-Ruda	708e54d080	Test frontend #only_compile	2023-10-25 21:52:08 -05:00
Andy-Ruda	d051265f40	Test frontend #only_compile	2023-10-25 21:47:45 -05:00
Andy-Ruda	5cf133465e	Test frontend #only_compile	2023-10-25 21:40:44 -05:00
Andy-Ruda	1c91bf2e87	Test frontend #only_compile	2023-10-25 21:26:37 -05:00
Andy-Ruda	9cd6f83bec	Initialize VUE project with WS connection, main pages, and various small features	2023-10-25 18:43:44 -05:00