Add project URL

Update README
Remember sort order
2023-11-13 14:59:22 -08:00 · 2023-11-13 14:49:08 -08:00 · 2023-11-13 14:15:28 -08:00 · 2023-11-13 10:09:12 -08:00 · 2023-11-13 09:55:32 -08:00 · 2023-11-13 17:52:57 +00:00
115 changed files with 1867 additions and 1390 deletions
--- a/README.md
+++ b/README.md
@@ -1,25 +1,78 @@
 # Web File Storage
-Run directly from repository with Hatch (or use pip install as usual):
+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.
 ```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
-hatch run cista --user admin --privileged
+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
-Prebuilt frontend is provided in repository but for any changes it will need to be manually rebuilt:
+Frontend needs to be built before using and after any frontend changes:
 ```sh
-cd cista-front
+cd frontend
 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/public/favicon.ico
+++ b/cista-front/public/favicon.ico
--- a/cista-front/public/old-index.html
+++ b/cista-front/public/old-index.html
@@ -1,241 +0,0 @@
 <!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/components/FileViewer.vue
+++ b/cista-front/src/components/FileViewer.vue
@@ -1,52 +0,0 @@
 <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,79 +0,0 @@
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
 import { ref, nextTick } from 'vue'
 const documentStore = useDocumentStore()
 const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
 const toggleSearchInput = () => {
  showSearchInput.value = !showSearchInput.value
  nextTick(() => {
    const input = search.value
    if (input) input.focus()
    //else if (searchButton.value) document.querySelector('.breadcrumb')!.focus()
  })
 }
 defineExpose({
  toggleSearchInput
 })
 </script>
 <template>
  <nav class="headermain">
    <div class="buttons">
      <UploadButton />
      <SvgButton
        name="create-folder"
        data-tooltip="New folder"
        @click="() => documentStore.fileExplorer.newFolder()"
      />
      <slot></slot>
      <div class="spacer smallgap"></div>
      <template v-if="showSearchInput">
        <input
          ref="search"
          type="search"
          v-model="documentStore.search"
          placeholder="Search words"
          class="margin-input"
          @blur="() => { if (documentStore.search === '') toggleSearchInput() }"
          @keyup.esc="toggleSearchInput"
        />
      </template>
      <SvgButton ref="searchButton" name="find" @click="toggleSearchInput" />
      <SvgButton name="cog" @click="console.log('settings menu')" />
    </div>
  </nav>
 </template>
 <style scoped>
 .buttons {
  padding: 0;
  display: flex;
  align-items: center;
  height: 3.5em;
  z-index: 10;
 }
 .buttons > * {
  flex-shrink: 1;
 }
 .spacer {
  flex-grow: 1;
 }
 .smallgap {
  margin-left: 2em;
 }
 input[type='search'] {
  background: var(--primary-background);
  color: var(--primary-color);
  border: 0;
  border-radius: 0.1em;
  padding: 0.5em;
  outline: none;
  font-size: 1.5em;
  max-width: 30vw;
 }
 </style>
--- a/cista-front/src/components/NotificationLoading.vue
+++ b/cista-front/src/components/NotificationLoading.vue
@@ -1,27 +0,0 @@
 <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/UploadButton.vue
+++ b/cista-front/src/components/UploadButton.vue
@@ -1,96 +0,0 @@
 <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 uploadFileChangeHandler(event: Event) {
  const target = event.target as HTMLInputElement
  const chunkSize = 1 << 20
  if (target && target.files && target.files.length > 0) {
    const file = target.files[0]
    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="uploadFileChangeHandler"
      class="upload-input"
      type="file"
      multiple
    />
    <input
      ref="folderUploadButton"
      @change="uploadFileChangeHandler"
      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/repositories/Document.ts
+++ b/cista-front/src/repositories/Document.ts
@@ -1,162 +0,0 @@
 import { useDocumentStore } from '@/stores/documents'
 import createWebSocket from './WS'
 export type FUID = string
 export type Document = {
  loc: string
  name: string
  key: FUID
  type: 'folder' | 'file'
  size: number
  sizedisp: string
  mtime: number
  modified: string
  haystack: string
  dir?: DirList
 }
 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 {
  selected: Set<FUID>
  missing: Set<FUID>
  rootdir: DirList
  entries: Record<FUID, FileEntry | DirEntry>
  fullpath: Record<FUID, string>
  relpath: Record<FUID, string>
  url: Record<FUID, string>
  ids: FUID[]
 }
 export const url_document_watch_ws = '/api/watch'
 export const url_document_upload_ws = '/api/upload'
 export const url_document_get = '/files'
 export class DocumentHandler {
  constructor(private store = useDocumentStore()) {
    this.handleWebSocketMessage = this.handleWebSocketMessage.bind(this)
  }
  handleWebSocketMessage(event: MessageEvent) {
    const msg = JSON.parse(event.data)
    if ('error' in msg) {
      if (msg.error.code === 401) {
        this.store.user.isLoggedIn = false
        this.store.user.isOpenLoginModal = true
      } else {
        this.store.error = msg.error.message
      }
      // The server closes the websocket after errors, so we need to reopen it
      setTimeout(() => {
        this.store.wsWatch = createWebSocket(
          url_document_watch_ws,
          this.handleWebSocketMessage
        )
      }, 1000)
    }
    switch (true) {
      case !!msg.root:
        this.handleRootMessage(msg)
        break
      case !!msg.update:
        this.handleUpdateMessage(msg)
        break
      case !!msg.space:
        console.log('Watch space', msg.space)
        break
      case !!msg.error:
        this.handleError(msg)
        break
      default:
    }
  }
  private handleRootMessage({ root }: { root: DirEntry }) {
    console.log('Watch root', root)
    if (this.store) {
      this.store.user.isLoggedIn = true
      this.store.updateRoot(root)
    }
  }
  private handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
    console.log('Watch update', updateData.update)
    let node: DirEntry = this.store.root
    for (const elem of updateData.update) {
      if (elem.deleted) {
        delete node.dir[elem.name]
        break // Deleted elements can't have further children
      }
      if (elem.name !== undefined) {
        // @ts-ignore
        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
    }
    this.store.updateRoot()
  }
  private handleError(msg: errorEvent) {
    if (msg.error.code === 401) {
      this.store.user.isOpenLoginModal = true
      this.store.user.isLoggedIn = false
      return
    }
  }
 }
 export class DocumentUploadHandler {
  constructor(private store = useDocumentStore()) {
    this.handleWebSocketMessage = this.handleWebSocketMessage.bind(this)
  }
  handleWebSocketMessage(event: MessageEvent) {
    const msg = JSON.parse(event.data)
    switch (true) {
      case !!msg.written:
        this.handleWrittenMessage(msg)
        break
      default:
    }
  }
  private handleWrittenMessage(msg: { written: number }) {
    // if (this.store && this.store.root) this.store.root = root;
    console.log('Written message', msg.written)
  }
 }
--- a/cista-front/src/repositories/WS.ts
+++ b/cista-front/src/repositories/WS.ts
@@ -1,8 +0,0 @@
 function createWebSocket(url: string, eventHandler: (event: MessageEvent) => void) {
  const urlObject = new URL(url, location.origin.replace(/^http/, 'ws'))
  const webSocket = new WebSocket(urlObject)
  webSocket.onmessage = eventHandler
  return webSocket
 }
 export default createWebSocket
--- a/cista-front/src/stores/documents.ts
+++ b/cista-front/src/stores/documents.ts
@@ -1,172 +0,0 @@
 import type {
  Document,
  DirEntry,
  FileEntry,
  FUID,
  DirList,
  SelectedItems
 } from '@/repositories/Document'
 import { formatSize, formatUnixDate, haystackFormat } from '@/utils'
 import { defineStore } from 'pinia'
 import { collator } from '@/utils'
 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: () => ({
    root: {} as DirEntry,
    document: [] as Document[],
    search: "" as string,
    selected: new Set<FUID>(),
    uploadingDocuments: [],
    uploadCount: 0 as number,
    wsWatch: undefined,
    wsUpload: undefined,
    fileExplorer: null,
    error: '' as string,
    user: {
      username: '',
      privileged: false,
      isLoggedIn: false,
      isOpenLoginModal: false
    } as User
  }),
  actions: {
    updateRoot(root: DirEntry | null = null) {
      root ??= this.root
      // Transform tree data to flat documents array
      let loc = ""
      const mapper = ([name, attr]: [string, FileEntry | DirEntry]) => ({
        loc,
        name,
        type: 'dir' in attr ? 'folder' : 'file' as 'folder' | 'file',
        ...attr,
        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) {
          loc = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
          queue.push(...Object.entries(doc.dir).map(mapper))
        }
      }
      // Pre sort directory entries folders first then files, names in natural ordering
      docs.sort((a, b) =>
        // @ts-ignore
        (a.type === "file") - (b.type === "file") ||
        collator.compare(a.name, b.name)
      )
      this.root = root
      this.document = docs
    },
    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
    }
  },
  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 {
      function traverseDir(data: DirEntry | FileEntry, path: string, relpath: string) {
        if (!('dir' in data)) return
        for (const [name, attr] of Object.entries(data.dir)) {
          const fullname = path ? `${path}/${name}` : name
          const key = attr.key
          // Is this the file we are looking for? Ignore if nested within another selection.
          let r = relpath
          if (selected.has(key) && !relpath) {
            ret.selected.add(key)
            ret.rootdir[name] = attr
            r = name
          } else if (relpath) {
            r = `${relpath}/${name}`
          }
          if (r) {
            ret.entries[key] = attr
            ret.fullpath[key] = fullname
            ret.relpath[key] = r
            ret.ids.push(key)
            if (!('dir' in attr)) ret.url[key] = `/files/${fullname}`
          }
          traverseDir(attr, fullname, r)
        }
      }
      const selected = this.selected
      const ret: SelectedItems = {
        selected: new Set<FUID>(),
        missing: new Set<FUID>(),
        rootdir: {} as DirList,
        entries: {} as Record<FUID, FileEntry | DirEntry>,
        fullpath: {} as Record<FUID, string>,
        relpath: {} as Record<FUID, string>,
        url: {} as Record<FUID, string>,
        ids: [] as FUID[]
      }
      traverseDir(this.root, '', '')
      // What did we not select?
      for (const id of selected) {
        if (!ret.selected.has(id)) ret.missing.add(id)
      }
      // Sorted array of FUIDs for easy traversal
      ret.ids.sort((a, b) =>
        ret.relpath[a].localeCompare(ret.relpath[b], undefined, {
          numeric: true,
          sensitivity: 'base'
        })
      )
      return ret
    }
  }
 })
--- 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 cista.toml, use parent
+            # Accidentally pointed to the db.toml, use parent
            confdir = confdir.parent
-        config.conffile = config.conffile.with_parent(confdir)
+        config.conffile = confdir / config.conffile.name
 def _user(args):
--- a/cista/api.py
+++ b/cista/api.py
@@ -1,10 +1,11 @@
 import asyncio
 import typing
 from secrets import token_bytes
 import msgspec
 from sanic import Blueprint
-from cista import watching
+from cista import __version__, config, watching
 from cista.fileio import FileServer
 from cista.protocol import ControlTypes, FileRange, StatusMsg
 from cista.util.apphelpers import asend, websocket_wrapper
@@ -36,10 +37,18 @@ async def upload(req, ws):
            )
        req = msgspec.json.decode(text, type=FileRange)
        pos = req.start
-        data = None
+        while True:
-        while pos < req.end and (data := await ws.recv()) and isinstance(data, bytes):
+            data = await ws.recv()
            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}")
@@ -83,14 +92,32 @@ async def control(req, ws):
@bp.websocket("watch")
@websocket_wrapper
 async def watch(req, ws):
    await ws.send(
        msgspec.json.encode(
            {
                "server": {
                    "name": config.config.name or config.config.path.name,
                    "version": __version__,
                    "public": config.config.public,
                },
                "user": {
                    "username": req.ctx.username,
                    "privileged": req.ctx.user.privileged,
                }
                if req.ctx.user
                else None,
            }
        ).decode()
    )
    uuid = token_bytes(16)
    try:
-        with watching.tree_lock:
+        with watching.state.lock:
-            q = watching.pubsub[ws] = asyncio.Queue()
+            q = watching.pubsub[uuid] = asyncio.Queue()
            # Init with disk usage and full tree
-            await ws.send(watching.format_du())
+            await ws.send(watching.format_space(watching.state.space))
-            await ws.send(watching.format_tree())
+            await ws.send(watching.format_root(watching.state.root))
        # Send updates
        while True:
            await ws.send(await q.get())
    finally:
-        del watching.pubsub[ws]
+        del watching.pubsub[uuid]
--- a/cista/app.py
+++ b/cista/app.py
@@ -1,6 +1,9 @@
 import asyncio
 import datetime
 import mimetypes
-from importlib.resources import files
+from concurrent.futures import ThreadPoolExecutor
 from pathlib import Path, PurePath, PurePosixPath
 from stat import S_IFDIR, S_IFREG
 from urllib.parse import unquote
 from wsgiref.handlers import format_date_time
@@ -8,7 +11,9 @@ import brotli
 import sanic.helpers
 from blake3 import blake3
 from sanic import Blueprint, Sanic, empty, raw
-from sanic.exceptions import Forbidden, NotFound
+from sanic.exceptions import Forbidden, NotFound, ServerError
 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
@@ -27,19 +32,25 @@ app.exception(Exception)(handle_sanic_exception)
 async def main_start(app, loop):
    config.load_config()
    await watching.start(app, loop)
    app.ctx.threadexec = ThreadPoolExecutor(
        max_workers=8, thread_name_prefix="cista-ioworker"
    )
@app.after_server_stop
 async def main_stop(app, loop):
    await watching.stop(app, loop)
    app.ctx.threadexec.shutdown()
@app.on_request
 async def use_session(req):
    req.ctx.session = session.get(req)
    try:
-        req.ctx.user = config.config.users[req.ctx.session["username"]]  # type: ignore
+        req.ctx.username = req.ctx.session["username"]  # type: ignore
        req.ctx.user = config.config.users[req.ctx.username]
    except (AttributeError, KeyError, TypeError):
        req.ctx.username = None
        req.ctx.user = None
    # CSRF protection
    if req.method == "GET" and req.headers.upgrade != "websocket":
@@ -68,22 +79,16 @@ 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 = files("cista") / "wwwroot"
+    base = Path(__file__).with_name("wwwroot")
-    paths = ["."]
+    paths = [PurePath()]
    while paths:
        path = paths.pop(0)
        current = base / path
        for p in current.iterdir():
            if p.is_dir():
-                paths.append(current / p.parts[-1])
+                paths.append(p.relative_to(base))
                continue
            name = p.relative_to(base).as_posix()
            mime = mimetypes.guess_type(name)[0] or "application/octet-stream"
@@ -114,15 +119,35 @@ 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.add_task
+@app.before_server_start
 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()
+            await load_wwwroot(app)
            changes = ""
            for name in sorted(www):
                attr = www[name]
@@ -138,7 +163,6 @@ 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"])
@@ -153,9 +177,87 @@ async def wwwroot(req, path=""):
        return empty(304, headers=headers)
    # Brotli compressed?
    if br and "br" in req.headers.accept_encoding.split(", "):
-        headers = {
+        headers = {**headers, "content-encoding": "br"}
            **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)
    if not files:
        raise NotFound(
            "No files found",
            context={"keys": keys, "zipfile": f"{zipfile}.{ext}", "wanted": wanted},
        )
    if wanted:
        raise NotFound("Files not found", context={"missing": wanted})
    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"")
            else:
                yield name, modified, S_IFREG | 0o644, ZIP_AUTO(size), contents(p, size)
    def contents(name, size):
        with name.open("rb") as f:
            while size > 0 and (chunk := f.read(min(size, 1 << 20))):
                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()
        except Exception:
            logging.exception("Error streaming ZIP")
            raise
        finally:
            asyncio.run_coroutine_threadsafe(queue.put(None), loop)
    # Don't block the event loop: run in a thread
    queue = asyncio.Queue(maxsize=1)
    loop = asyncio.get_event_loop()
    thread = loop.run_in_executor(app.ctx.threadexec, worker)
    # Stream the response
    res = await req.respond(
        content_type="application/zip",
        headers={"cache-control": "no-store"},
    )
    while chunk := await queue.get():
        await res.send(chunk)
    await thread  # If it raises, the response will fail download
--- 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")
+            raise Forbidden("Access Forbidden: Only for privileged users", quiet=True)
    elif config.config.public or request.ctx.user:
        return
-    raise Unauthorized("Login required", "cookie", context={"redirect": "/login"})
+    raise Unauthorized("Login required", "cookie", quiet=True)
 bp = Blueprint("auth")
--- a/cista/config.py
+++ b/cista/config.py
@@ -14,6 +14,7 @@ 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,9 +34,11 @@ 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)
-        os.lseek(self.fd, pos, os.SEEK_SET)
+        if buffer:
-        os.write(self.fd, buffer)
+            os.lseek(self.fd, pos, os.SEEK_SET)
            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=False, exist_ok=False)
+        path.mkdir(parents=True, exist_ok=False)
 class Rename(ControlBase):
@@ -45,7 +45,7 @@ class Rm(ControlBase):
        sel = [root / filename.sanitize(p) for p in self.sel]
        for p in sel:
            if p.is_dir():
-                shutil.rmtree(p, ignore_errors=True)
+                shutil.rmtree(p)
            else:
                p.unlink()
@@ -112,47 +112,43 @@ class ErrorMsg(msgspec.Struct):
 ## Directory listings
-class FileEntry(msgspec.Struct):
+class FileEntry(msgspec.Struct, array_like=True):
    level: int
    name: str
    key: str
    size: int
    mtime: int
 class DirEntry(msgspec.Struct):
    key: str
    size: int
-    mtime: int
+    isfile: int
    dir: DirList
-    def __getitem__(self, name):
+    def __repr__(self):
-        return self.dir[name]
+        return self.key or "FileEntry()"
    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 Update(msgspec.Struct, array_like=True):
    ...
-class UpdateEntry(msgspec.Struct, omit_defaults=True):
+class UpdKeep(Update, tag="k"):
-    """Updates the named entry in the tree. Fields that are set replace old values. A list of entries recurses directories."""
+    count: int
-    name: str = ""
+
-    deleted: bool = False
+class UpdDel(Update, tag="d"):
-    key: str | None = None
+    count: int
-    size: int | None = None
+
-    mtime: int | None = None
+
-    dir: DirList | None = None
+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/cista/serve.py
+++ b/cista/serve.py
@@ -1,6 +1,6 @@
 import os
 import re
-from pathlib import Path, PurePath
+from pathlib import Path
 from sanic import Sanic
@@ -15,7 +15,6 @@ def run(*, dev=False):
    # Silence Sanic's warning about running in production rather than debug
    os.environ["SANIC_IGNORE_PRODUCTION_WARNING"] = "1"
    confdir = config.conffile.parent
    wwwroot = PurePath(__file__).parent / "wwwroot"
    if opts.get("ssl"):
        # Run plain HTTP redirect/acme server on port 80
        server80.app.prepare(port=80, motd=False)
@@ -27,10 +26,13 @@ def run(*, dev=False):
        motd=False,
        dev=dev,
        auto_reload=dev,
-        reload_dir={confdir, wwwroot},
+        reload_dir={confdir},
        access_log=True,
    )  # type: ignore
-    Sanic.serve()
+    if dev:
        Sanic.serve()
    else:
        Sanic.serve_single()
 def check_cert(certdir, domain):
--- a/cista/util/filename.py
+++ b/cista/util/filename.py
@@ -10,4 +10,7 @@ def sanitize(filename: str) -> str:
    filename = filename.replace("\\", "-")
    filename = sanitize_filepath(filename)
    filename = filename.strip("/")
-    return PurePosixPath(filename).as_posix()
+    p = PurePosixPath(filename)
    if any(n.startswith(".") for n in p.parts):
        raise ValueError("Filenames starting with dot are not allowed")
    return p.as_posix()
--- a/cista/watching.py
+++ b/cista/watching.py
@@ -1,19 +1,137 @@
 import asyncio
 import shutil
 import stat
 import sys
 import threading
 import time
 from os import stat_result
 from pathlib import Path, PurePosixPath
 import inotify.adapters
 import msgspec
 from natsort import humansorted, natsort_keygen, ns
 from sanic.log import logging
 from cista import config
 from cista.fileio import fuid
-from cista.protocol import DirEntry, FileEntry, UpdateEntry
+from cista.protocol import FileEntry, Space, UpdDel, UpdIns, UpdKeep
 pubsub = {}
-tree = {"": None}
+sortkey = natsort_keygen(alg=ns.LOCALE)
-tree_lock = threading.Lock()
+
 class State:
    def __init__(self):
        self.lock = threading.RLock()
        self._space = Space(0, 0, 0, 0)
        self._listing: list[FileEntry] = []
    @property
    def space(self):
        with self.lock:
            return self._space
    @space.setter
    def space(self, space):
        with self.lock:
            self._space = space
    @property
    def root(self) -> list[FileEntry]:
        with self.lock:
            return self._listing[:]
    @root.setter
    def root(self, listing: list[FileEntry]):
        with self.lock:
            self._listing = listing
    def _slice(self, idx: PurePosixPath | tuple[PurePosixPath, int]):
        relpath, relfile = idx if isinstance(idx, tuple) else (idx, 0)
        begin, end = 0, len(self._listing)
        level = 0
        isfile = 0
        # Special case for root
        if not relpath.parts:
            return slice(begin, end)
        begin += 1
        for part in relpath.parts:
            level += 1
            found = False
            while begin < end:
                entry = self._listing[begin]
                if entry.level < level:
                    break
                if entry.level == level:
                    if entry.name == part:
                        found = True
                        if level == len(relpath.parts):
                            isfile = relfile
                        else:
                            begin += 1
                        break
                    cmp = entry.isfile - isfile or sortkey(entry.name) > sortkey(part)
                    if cmp > 0:
                        break
                begin += 1
            if not found:
                return slice(begin, begin)
        # Found the starting point, now find the end of the slice
        for end in range(begin + 1, len(self._listing) + 1):
            if end == len(self._listing) or self._listing[end].level <= level:
                break
        return slice(begin, end)
    def __getitem__(self, index: PurePosixPath | tuple[PurePosixPath, int]):
        with self.lock:
            return self._listing[self._slice(index)]
    def __setitem__(
        self, index: tuple[PurePosixPath, int], value: list[FileEntry]
    ) -> None:
        rel, isfile = index
        with self.lock:
            if rel.parts:
                parent = self._slice(rel.parent)
                if parent.start == parent.stop:
                    raise ValueError(
                        f"Parent folder {rel.as_posix()} is missing for {rel.name}"
                    )
            self._listing[self._slice(index)] = value
    def __delitem__(self, relpath: PurePosixPath):
        with self.lock:
            del self._listing[self._slice(relpath)]
    def _index(self, rel: PurePosixPath):
        idx = 0
        ret = []
    def _dir(self, idx: int):
        level = self._listing[idx].level + 1
        end = len(self._listing)
        idx += 1
        ret = []
        while idx < end and (r := self._listing[idx]).level >= level:
            if r.level == level:
                ret.append(idx)
        return ret, idx
    def update(self, rel: PurePosixPath, value: FileEntry):
        begin = 0
        parents = []
        while self._listing[begin].level < len(rel.parts):
            parents.append(begin)
 state = State()
 rootpath: Path = None  # type: ignore
 quit = False
 modified_flags = (
@@ -25,22 +143,22 @@ modified_flags = (
    "IN_MOVED_FROM",
    "IN_MOVED_TO",
 )
 disk_usage = None
 def watcher_thread(loop):
-    global disk_usage
+    global rootpath
    import inotify.adapters
    while True:
        rootpath = config.config.path
        i = inotify.adapters.InotifyTree(rootpath.as_posix())
-        old = format_tree() if tree[""] else None
+        # Initialize the tree from filesystem
-        with tree_lock:
+        new = walk()
-            # Initialize the tree from filesystem
+        with state.lock:
-            tree[""] = walk(rootpath)
+            old = state.root
-        msg = format_tree()
+            if old != new:
-        if msg != old:
+                state.root = new
-            asyncio.run_coroutine_threadsafe(broadcast(msg), loop)
+                broadcast(format_update(old, new), loop)
        # The watching is not entirely reliable, so do a full refresh every minute
        refreshdl = time.monotonic() + 60.0
@@ -50,9 +168,10 @@ def watcher_thread(loop):
                return
            # Disk usage update
            du = shutil.disk_usage(rootpath)
-            if du != disk_usage:
+            space = Space(*du, storage=state.root[0].size)
-                disk_usage = du
+            if space != state.space:
-                asyncio.run_coroutine_threadsafe(broadcast(format_du()), loop)
+                state.space = space
                broadcast(format_space(space), loop)
                break
            # Do a full refresh?
            if time.monotonic() > refreshdl:
@@ -67,141 +186,162 @@ def watcher_thread(loop):
            try:
                update(path.relative_to(rootpath), loop)
            except Exception as e:
-                print("Watching error", e)
+                print("Watching error", e, path, rootpath)
-                break
+                raise
        i = None  # Free the inotify object
-def format_du():
+def watcher_thread_poll(loop):
-    return msgspec.json.encode(
+    global rootpath
-        {
+
-            "space": {
+    while not quit:
-                "disk": disk_usage.total,
+        rootpath = config.config.path
-                "used": disk_usage.used,
+        new = walk()
-                "free": disk_usage.free,
+        with state.lock:
-                "storage": tree[""].size,
+            old = state.root
-            },
+            if old != new:
-        },
+                state.root = new
-    ).decode()
+                broadcast(format_update(old, new), loop)
        # Disk usage update
        du = shutil.disk_usage(rootpath)
        space = Space(*du, storage=state.root[0].size)
        if space != state.space:
            state.space = space
            broadcast(format_space(space), loop)
        time.sleep(2.0)
-def format_tree():
+def walk(rel=PurePosixPath()) -> list[FileEntry]:  # noqa: B008
-    root = tree[""]
+    path = rootpath / rel
    return msgspec.json.encode(
        {
            "update": [
                UpdateEntry(
                    key=root.key, size=root.size, mtime=root.mtime, dir=root.dir
                ),
            ],
        },
    ).decode()
 def walk(path: Path) -> DirEntry | FileEntry | None:
    try:
-        s = path.stat()
+        st = path.stat()
-        key = fuid(s)
+    except OSError:
-        assert key, repr(key)
+        return []
-        mtime = int(s.st_mtime)
+    return _walk(rel, int(not stat.S_ISDIR(st.st_mode)), st)
        if path.is_file():
            return FileEntry(key, s.st_size, mtime)
-        tree = {
+
-            p.name: v
+def _walk(rel: PurePosixPath, isfile: int, st: stat_result) -> list[FileEntry]:
-            for p in path.iterdir()
+    entry = FileEntry(
-            if not p.name.startswith(".")
+        level=len(rel.parts),
-            if (v := walk(p)) is not None
+        name=rel.name,
-        }
+        key=fuid(st),
-        if tree:
+        mtime=int(st.st_mtime),
-            size = sum(v.size for v in tree.values())
+        size=st.st_size if isfile else 0,
-            mtime = max(mtime, *(v.mtime for v in tree.values()))
+        isfile=isfile,
-        else:
+    )
-            size = 0
+    if isfile:
-        return DirEntry(key, size, mtime, tree)
+        return [entry]
    ret = [entry]
    path = rootpath / rel
    try:
        li = []
        for f in path.iterdir():
            if f.name.startswith("."):
                continue  # No dotfiles
            s = f.stat()
            li.append((int(not stat.S_ISDIR(s.st_mode)), f.name, s))
        for [isfile, name, s] in humansorted(li):
            subtree = _walk(rel / name, isfile, s)
            child = subtree[0]
            entry.mtime = max(entry.mtime, child.mtime)
            entry.size += child.size
            ret.extend(subtree)
    except FileNotFoundError:
-        return None
+        pass  # Things may be rapidly in motion
    except OSError as e:
        print("OS error walking path", path, e)
-        return None
+    return ret
 def update(relpath: PurePosixPath, loop):
    """Called by inotify updates, check the filesystem and broadcast any changes."""
-    new = walk(rootpath / relpath)
+    if rootpath is None or relpath is None:
-    with tree_lock:
+        print("ERROR", rootpath, relpath)
-        update = update_internal(relpath, new)
+    new = walk(relpath)
-        if not update:
+    with state.lock:
-            return  # No changes
+        old = state[relpath]
-        msg = msgspec.json.encode({"update": update}).decode()
+        if old == new:
-        asyncio.run_coroutine_threadsafe(broadcast(msg), loop)
+            return
        old = state.root
        if new:
            state[relpath, new[0].isfile] = new
        else:
            del state[relpath]
        broadcast(format_update(old, state.root), loop)
-def update_internal(
+def format_update(old, new):
-    relpath: PurePosixPath,
+    # Make keep/del/insert diff until one of the lists ends
-    new: DirEntry | FileEntry | None,
+    oidx, nidx = 0, 0
 ) -> list[UpdateEntry]:
    path = "", *relpath.parts
    old = tree
    elems = []
    for name in path:
        if name not in old:
            # File or folder created
            old = None
            elems.append((name, None))
            if len(elems) < len(path):
                # We got a notify for an item whose parent is not in tree
                print("Tree out of sync DEBUG", relpath)
                print(elems)
                print("Current tree:")
                print(tree[""])
                print("Walking all:")
                print(walk(rootpath))
                raise ValueError("Tree out of sync")
            break
        old = old[name]
        elems.append((name, old))
    if old == new:
        return []
    mt = new.mtime if new else 0
    szdiff = (new.size if new else 0) - (old.size if old else 0)
    # Update parents
    update = []
-    for name, entry in elems[:-1]:
+    keep_count = 0
-        u = UpdateEntry(name)
+    while oidx < len(old) and nidx < len(new):
-        if szdiff:
+        if old[oidx] == new[nidx]:
-            entry.size += szdiff
+            keep_count += 1
-            u.size = entry.size
+            oidx += 1
-        if mt > entry.mtime:
+            nidx += 1
-            u.mtime = entry.mtime = mt
+            continue
-        update.append(u)
+        if keep_count > 0:
-    # The last element is the one that changed
+            update.append(UpdKeep(keep_count))
-    name, entry = elems[-1]
+            keep_count = 0
-    parent = elems[-2][1] if len(elems) > 1 else tree
+
-    u = UpdateEntry(name)
+        del_count = 0
-    if new:
+        rest = new[nidx:]
-        parent[name] = new
+        while oidx < len(old) and old[oidx] not in rest:
-        if u.size != new.size:
+            del_count += 1
-            u.size = new.size
+            oidx += 1
-        if u.mtime != new.mtime:
+        if del_count:
-            u.mtime = new.mtime
+            update.append(UpdDel(del_count))
-        if isinstance(new, DirEntry) and u.dir == new.dir:
+            continue
-            u.dir = new.dir
+
-    else:
+        insert_items = []
-        del parent[name]
+        rest = old[oidx:]
-        u.deleted = True
+        while nidx < len(new) and new[nidx] not in rest:
-    update.append(u)
+            insert_items.append(new[nidx])
-    return update
+            nidx += 1
        update.append(UpdIns(insert_items))
    # Diff any remaining
    if keep_count > 0:
        update.append(UpdKeep(keep_count))
    if oidx < len(old):
        update.append(UpdDel(len(old) - oidx))
    elif nidx < len(new):
        update.append(UpdIns(new[nidx:]))
    return msgspec.json.encode({"update": update}).decode()
-async def broadcast(msg):
+def format_space(usage):
-    for queue in pubsub.values():
+    return msgspec.json.encode({"space": usage}).decode()
-        await queue.put_nowait(msg)
+
 def format_root(root):
    return msgspec.json.encode({"root": root}).decode()
 def broadcast(msg, loop):
    return asyncio.run_coroutine_threadsafe(abroadcast(msg), loop).result()
 async def abroadcast(msg):
    try:
        for queue in pubsub.values():
            queue.put_nowait(msg)
    except Exception:
        # Log because asyncio would silently eat the error
        logging.exception("Broadcast error")
 async def start(app, loop):
    config.load_config()
-    app.ctx.watcher = threading.Thread(target=watcher_thread, args=[loop])
+    use_inotify = False and sys.platform == "linux"
    app.ctx.watcher = threading.Thread(
        target=watcher_thread if use_inotify else watcher_thread_poll,
        args=[loop],
    )
    app.ctx.watcher.start()
--- 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</title>
+<title>Cista Storage</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<link rel="icon" href="/favicon.ico">
+<link rel="icon" href="/src/assets/logo.svg">
 <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": "front",
+  "name": "cista-frontend",
  "version": "0.0.0",
  "private": true,
  "scripts": {
@@ -13,6 +13,7 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@imengyu/vue3-context-menu": "^1.3.3",
    "@vueuse/core": "^10.4.1",
    "esbuild": "^0.19.5",
    "lodash": "^4.17.21",
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
 User-agent: *
 Disallow: /
--- a/cista-front/src/App.vue
+++ b/cista-front/src/App.vue
@@ -1,13 +1,13 @@
 <template>
  <LoginModal />
  <header>
-    <HeaderMain ref="headerMain">
+    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
      <HeaderSelected :path="path.pathList" />
    </HeaderMain>
    <BreadCrumb :path="path.pathList" tabindex="-1"/>
  </header>
  <main>
-    <RouterView :path="path.pathList" />
+    <RouterView :path="path.pathList" :query="path.query" />
  </main>
 </template>
@@ -16,14 +16,8 @@ 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 createWebSocket from '@/repositories/WS'
+import { loadSession, watchConnect, watchDisconnect } from '@/repositories/WS'
-import {
+import { useMainStore } from '@/stores/main'
  url_document_watch_ws,
  url_document_upload_ws,
  DocumentHandler,
  DocumentUploadHandler
 } from '@/repositories/Document'
 import { useDocumentStore } from '@/stores/documents'
 import { computed } from 'vue'
 import Router from '@/router/index'
@@ -31,38 +25,30 @@ import Router from '@/router/index'
 interface Path {
  path: string
  pathList: string[]
  query: string
 }
-const documentStore = useDocumentStore()
+const store = useMainStore()
 const path: ComputedRef<Path> = computed(() => {
-  const p = decodeURIComponent(Router.currentRoute.value.path)
+  const p = decodeURIComponent(Router.currentRoute.value.path).split('//')
-  const pathList = p.split('/').filter(value => value !== '')
+  const pathList = p[0].split('/').filter(value => value !== '')
  const query = p.slice(1).join('//')
  return {
-    path: p,
+    path: p[0],
-    pathList
+    pathList,
    query
  }
 })
 // Update human-readable x seconds ago messages from mtimes
 setInterval(documentStore.updateModified, 1000)
 watchEffect(() => {
-  const documentHandler = new DocumentHandler()
+  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || store.server.name || 'Cista Storage'
  const documentUploadHandler = new DocumentUploadHandler()
  const wsWatch = createWebSocket(
    url_document_watch_ws,
    documentHandler.handleWebSocketMessage
  )
  const wsUpload = createWebSocket(
    url_document_upload_ws,
    documentUploadHandler.handleWebSocketMessage
  )
  documentStore.wsWatch = wsWatch
  documentStore.wsUpload = wsUpload
 })
 onMounted(loadSession)
 onMounted(watchConnect)
 onUnmounted(watchDisconnect)
 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'
@@ -138,3 +124,4 @@ onUnmounted(() => {
 })
 export type { Path }
 </script>
@/stores/main
--- a/frontend/src/assets/logo.svg
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f80" rx="64" ry="64"/><path fill="#fff" d="M381 298h-84V167h-66L339 35l108 132h-66zm-168-84h-84v131H63l108 132 108-132h-66z"/></svg>
--- a/cista-front/src/assets/main.css
+++ b/cista-front/src/assets/main.css
@@ -3,46 +3,39 @@
 :root {
  --primary-color: #000;
  --primary-background: #ddd;
-  --header-background: #246;
+  --header-background: var(--soft-color);
  --header-color: #ccc;
  --input-background: #fff;
  --input-color: #000;
  --primary-color: #000;
  --soft-color: #146;
  --accent-color: #f80;
  --transition-time: 0.2s;
  /* The following are overridden by responsive layouts */
  --root-font-size: 1rem;
  --header-font-size: 1rem;
-  --header-height: calc(8 * var(--header-font-size));
+  --header-height: calc(6.5 * var(--header-font-size));
 }
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #ddd;
-    --primary-background: #003;
+    --primary-background: var(--soft-color);
    --header-background: #000;
    --header-color: #ccc;
-  }
+    --input-background: var(--soft-color);
    --input-color: #ddd;
    }
 }
@media screen and (max-width: 600px) {
  .size,
-  .modified {
+  .modified,
  .summary {
    display: none;
  }
 }
-@media screen and (orientation: landscape) and (min-width: 1200px) {
+@media screen and (min-width: 1000px) {
  /* Breadcrumbs and buttons side by side */
  header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: end;
  }
  header .breadcrumb {
    font-size: 1.7em;
    flex-shrink: 10;
  }
 }
@media screen and (min-width: 800px) and (--webkit-min-device-pixel-ratio: 2) {
  :root {
-    --root-font-size: calc(16 * 100vw / 800);
+    --root-font-size: calc(8px + 8 * 100vw / 1000);
  }
  header .buttons:has(input[type='search']) > div {
    display: none;
@@ -51,20 +44,51 @@
    display: inherit;
  }
 }
-@media screen and (min-width: 1600px) and (--webkit-min-device-pixel-ratio: 3) {
+@media screen and (min-width: 2000px) {
  :root {
-    --root-font-size: 2rem;
+    --root-font-size: 1.5rem;
  }
 }
 /* Low (landscape) screens: smaller header */
@media screen and (max-height: 600px) {
  :root {
-    --header-font-size: calc(16 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
+    --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
    --root-font-size: 0.8rem;
  }
  header .breadcrumb > * {
    padding-top: calc(8 + 8 * 100vh / 600) !important;
    padding-bottom: calc(8 + 8 * 100vh / 600) !important;
  }
 }
@media screen and (max-height: 300px) {
  :root {
-    --header-font-size: 0.5rem;  /* Don't go smaller than this, no benefit */
+    --header-font-size: 15px;  /* Don't go smaller than this, no benefit */
    --header-height: calc(1.75 * 16px);
    --root-font-size: 0.6rem;
  }
  header .breadcrumb > * {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
 }
@media screen and (orientation: landscape) and (min-width: 700px) {
  /* Breadcrumbs and buttons side by side */
  :root {
    --header-font-size: calc(8px + 8 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
  }
  header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: end;
  }
  header .breadcrumb {
    flex-shrink: 1;
  }
  header .breadcrumb > * {
    flex-shrink: 1;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
 }
@media print {
@@ -119,6 +143,7 @@
  }
 }
 html {
  font-size: var(--root-font-size);
  overflow: hidden;
 }
 /* Hide scrollbar for all browsers */
@@ -197,6 +222,9 @@ main {
  padding-bottom: 3em; /* convenience space on the bottom */
  overflow-y: scroll;
 }
 .spacer { flex-grow: 1 }
 .smallgap { flex-shrink: 1; width: 2em }
 [data-tooltip]:hover:after {
  z-index: 101;
  content: attr(data-tooltip);
@@ -206,7 +234,7 @@ main {
  padding: .5rem 1rem;
  border-radius: 3rem 0 3rem 0;
  box-shadow: 0 0 1rem var(--accent-color);
-  transform: translate(calc(1rem + -50%), 100%);
+  transform: translate(calc(1rem + -50%), 150%);
  background-color: var(--accent-color);
  color: var(--primary-color);
  white-space: pre;
@@ -232,3 +260,9 @@ main {
    opacity: 0;
  }
 }
 .error-message {
  padding: .5em;
  font-weight: bold;
  background: var(--accent-color);
  color: #000;
 }
--- 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)"
-    @focus="move(0)"
+    @keyup.enter="move(0)"
  >
    <a href="#/"
      :ref="el => setLinkRef(0, el)"
@@ -46,8 +46,13 @@ 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,34 +3,11 @@
    <thead>
      <tr>
        <th class="selection">
-          <input
+          <input type="checkbox" tabindex="-1" v-model="allSelected" :indeterminate="selectionIndeterminate">
            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>
@@ -38,38 +15,20 @@
      <tr v-if="editing?.key === 'new'" class="folder">
        <td class="selection"></td>
        <td class="name">
-          <FileRenameInput
+          <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
            :doc="editing"
            :rename="mkdir"
            :exit="
              () => {
                editing = null
              }
            "
          />
        </td>
-        <td class="modified right">
+        <FileModified :doc=editing :key=nowkey />
-          <time :datetime="new Date(editing.mtime).toISOString().replace('.000', '')">{{
+        <FileSize :doc=editing />
            editing.modified
          }}</time>
        </td>
        <td class="size right">{{ editing.sizedisp }}</td>
        <td class="menu"></td>
      </tr>
-      <template
+      <template v-for="(doc, index) in documents" :key="doc.key">
-        v-for="doc of sorted(props.documents as Document[])"
+        <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
        :key="doc.key">
        <tr v-if="doc.loc !== prevloc && ((prevloc = doc.loc) || true)">
          <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
        </tr>
        <tr
          :id="`file-${doc.key}`"
-          :class="{
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: cursor === doc }"
            file: doc.type === 'file',
            folder: doc.type === 'folder',
            cursor: cursor === doc
          }"
          @click="cursor = cursor === doc ? null : doc"
          @contextmenu.prevent="contextMenu($event, doc)"
        >
@@ -77,106 +36,79 @@
            <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)
+                  ? store.selected.add(doc.key)
-                  : documentStore.selected.delete(doc.key)
+                  : store.selected.delete(doc.key)
              "
            />
          </td>
          <td class="name">
-            <template v-if="editing === doc"
+            <template v-if="editing === doc">
-              ><FileRenameInput
+              <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
-                :doc="doc"
+            </template>
                :rename="rename"
                :exit="
                  () => {
                    editing = null
                  }
                "
            /></template>
            <template v-else>
              <a
-                :href="url_for(doc)"
+                :href="doc.url"
                tabindex="-1"
                @contextmenu.prevent
                @focus.stop="cursor = doc"
                @blur="ev => { if (!editing) cursor = null }"
                @keyup.left="router.back()"
-                @keyup.right.stop="ev => { if (doc.type === 'folder') (ev.target as HTMLElement).click() }"
+                @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                >{{ doc.name }}</a
              >
-              <button
+              <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
                v-if="cursor == doc"
                class="rename-button"
                @click="() => (editing = doc)"
              >
                🖊️
              </button>
            </template>
          </td>
-          <td class="modified right">
+          <FileModified :doc=doc :key=nowkey />
-            <time
+          <FileSize :doc=doc />
              :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
+            <button tabindex="-1" @click.stop="contextMenu($event, doc)">⋮</button>
              tabindex="-1"
              @click.stop="contextMenu($event, doc)"
            >
              ⋮
            </button>
          </td>
        </tr>
      </template>
-    <tr>
+      <tr class="summary" v-if="props.documents.length > 1">
-      <td colspan="3" class="right">{{props.documents.length}} items shown:</td>
+        <td colspan="3" class="right">{{props.documents.length}} items</td>
-      <td class="size right">{{ formatSize(props.documents.reduce((a, b) => a + b.size, 0)) }}</td>
+        <td class="size right">{{ formatSize(props.documents.reduce((a, b) => a + b.size, 0)) }}</td>
-      <td class="menu"></td>
+        <td class="menu"></td>
-    </tr>
+      </tr>
    </tbody>
  </table>
  <div v-else class="empty-container">Nothing to see here</div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watchEffect, onBeforeUpdate } from 'vue'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
-import { useDocumentStore } from '@/stores/documents'
+import { useMainStore } from '@/stores/main'
-import type { Document } from '@/repositories/Document'
+import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
-import createWebSocket from '@/repositories/WS'
+import { connect, controlUrl } from '@/repositories/WS'
-import { collator, formatSize, formatUnixDate } from '@/utils'
+import { formatSize } from '@/utils'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import type { SortOrder } from '@/utils/docsort'
-const props = withDefaults(
+const props = defineProps<{
-  defineProps<{
+  path: Array<string>
-    path: Array<string>
+  documents: Doc[]
-    documents: Document[]
+}>()
-  }>(),
+const store = useMainStore()
  {}
 )
 const documentStore = useDocumentStore()
 const router = useRouter()
-const url_for = (doc: Document) => {
+const cursor = shallowRef<Doc | null>(null)
  const p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
  return doc.type === 'folder' ? `#/${p}/` : `/files/${p}`
 }
 const cursor = ref<Document | null>(null)
 // File rename
-const editing = ref<Document | null>(null)
+const editing = shallowRef<Doc | null>(null)
-const rename = (doc: Document, newName: string) => {
+const rename = (doc: Doc, newName: string) => {
  const oldName = doc.name
-  const control = createWebSocket('/api/control', (ev: MessageEvent) => {
+  const control = connect(controlUrl, {
-    const msg = JSON.parse(ev.data)
+    message(ev: MessageEvent) {
-    if ('error' in msg) {
+      const msg = JSON.parse(ev.data)
-      console.error('Rename failed', msg.error.message, msg.error)
+      if ('error' in msg) {
-      doc.name = oldName
+        console.error('Rename failed', msg.error.message, msg.error)
-    } else {
+        doc.name = oldName
-      console.log('Rename succeeded', msg)
+      } else {
        console.log('Rename succeeded', msg)
      }
    }
  })
  control.onopen = () => {
@@ -192,26 +124,23 @@ const rename = (doc: Document, newName: string) => {
 }
 defineExpose({
  newFolder() {
-    const now = Date.now() / 1000
+    const now = Math.floor(Date.now() / 1000)
-    editing.value = {
+    editing.value = new Doc({
      loc: loc.value,
      key: 'new',
      name: 'New Folder',
-      type: 'folder',
+      dir: true,
      mtime: now,
      size: 0,
-      sizedisp: formatSize(0),
+    })
      modified: formatUnixDate(now),
      haystack: '',
    }
  },
  toggleSelectAll() {
    console.log('Select')
    allSelected.value = !allSelected.value
  },
  toggleSortColumn(column: number) {
-    const columns = ['', 'name', 'modified', 'size', '']
+    const order = ['', 'name', 'modified', 'size', ''][column]
-    toggleSort(columns[column])
+    if (order) store.toggleSort(order as SortOrder)
  },
  isCursor() {
    return cursor.value !== null && editing.value === null
@@ -222,36 +151,36 @@ defineExpose({
  cursorSelect() {
    const doc = cursor.value
    if (!doc) return
-    if (documentStore.selected.has(doc.key)) {
+    if (store.selected.has(doc.key)) {
-      documentStore.selected.delete(doc.key)
+      store.selected.delete(doc.key)
    } else {
-      documentStore.selected.add(doc.key)
+      store.selected.add(doc.key)
    }
    this.cursorMove(1)
  },
  cursorMove(d: number, select = false) {
    // Move cursor up or down (keyboard navigation)
-    const documents = sorted(props.documents as Document[])
+    const docs = props.documents
-    if (documents.length === 0) {
+    if (docs.length === 0) {
      cursor.value = null
      return
    }
-    const N = documents.length
+    const N = docs.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 ? documents.indexOf(cursor.value) : documents.length
+      cursor.value !== null ? docs.indexOf(cursor.value) : docs.length
    const moveto = increment(index, d)
-    cursor.value = documents[moveto] ?? null
+    cursor.value = docs[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 = documents[p].key
+        const key = docs[p].key
-        if (documentStore.selected.has(key)) documentStore.selected.delete(key)
+        if (store.selected.has(key)) store.selected.delete(key)
-        else documentStore.selected.add(key)
+        else store.selected.add(key)
      }
    }
    // @ts-ignore
@@ -288,49 +217,48 @@ watchEffect(() => {
    focusBreadcrumb()
  }
 })
-const mkdir = (doc: Document, name: string) => {
+let nowkey = ref(0)
-  const control = createWebSocket('/api/control', (ev: MessageEvent) => {
+let modifiedTimer: any = null
-    const msg = JSON.parse(ev.data)
+const updateModified = () => {
-    if ('error' in msg) {
+  nowkey.value = Math.floor(Date.now() / 1000)
-      console.error('Mkdir failed', msg.error.message, msg.error)
+}
-      editing.value = null
+onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
-    } else {
+onUnmounted(() => { clearInterval(modifiedTimer) })
-      console.log('mkdir', msg)
+const mkdir = (doc: Doc, name: string) => {
-      router.push(`/${doc.loc}/${name}/`)
+  const control = connect(controlUrl, {
    open() {
      control.send(
        JSON.stringify({
          op: 'mkdir',
          path: `${doc.loc}/${name}`
        })
      )
    },
    message(ev: MessageEvent) {
      const msg = JSON.parse(ev.data)
      if ('error' in msg) {
        console.error('Mkdir failed', msg.error.message, msg.error)
        editing.value = null
      } else {
        console.log('mkdir', msg)
        router.push(doc.urlrouter)
      }
    }
  })
-  control.onopen = () => {
+  // We should get an update from watch but this is quicker
-    control.send(
+  doc.name = name
-      JSON.stringify({
+  doc.key = crypto.randomUUID()
        op: 'mkdir',
        path: `${doc.loc}/${name}`
      })
    )
  }
  doc.name = name // We should get an update from watch but this is quicker
 }
-
+const showFolderBreadcrumb = (i: number) => {
-// Column sort
+  const docs = props.documents
-const toggleSort = (name: string) => {
+  const docloc = docs[i].loc
-  sort.value = sort.value === name ? '' : name
+  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
 }
 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: Document) => documentStore.selected.has(doc.key)) &&
+      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
      !allSelected.value
    )
  },
@@ -341,28 +269,30 @@ const allSelected = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
-      props.documents.every((doc: Document) => documentStore.selected.has(doc.key))
+      props.documents.every((doc: Doc) => store.selected.has(doc.key))
    )
  },
  set: (value: boolean) => {
    console.log('Setting allSelected', value)
    for (const doc of props.documents) {
      if (value) {
-        documentStore.selected.add(doc.key)
+        store.selected.add(doc.key)
      } else {
-        documentStore.selected.delete(doc.key)
+        store.selected.delete(doc.key)
      }
    }
  }
 })
 const loc = computed(() => props.path.join('/'))
 let prevloc = ''
 onBeforeUpdate(() => { prevloc = loc.value })
-const contextMenu = (ev: Event, doc: Document) => {
+const contextMenu = (ev: MouseEvent, doc: Doc) => {
  cursor.value = doc
-  console.log('Context menu', ev, doc)
+  ContextMenu.showContextMenu({
    x: ev.x, y: ev.y, items: [
      { label: 'Rename', onClick: () => { editing.value = doc } },
    ],
  })
 }
 </script>
@@ -396,7 +326,7 @@ table .selection {
  text-overflow: clip;
 }
 table .modified {
-  width: 8em;
+  width: 9em;
 }
 table .size {
  width: 5em;
@@ -437,6 +367,7 @@ table td {
  }
 }
 thead tr {
  font-size: var(--header-font-size);
  background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
  color: #000;
  box-shadow: 0 0 .2rem black;
@@ -499,7 +430,14 @@ tbody .selection input {
  font-size: 3rem;
  color: var(--accent-color);
 }
 .folder-change {
  margin-left: -.5rem;
 }
 .loc {
  color: #888;
 }
 .summary {
  color: #888;
 }
 </style>
@/stores/main
--- a/frontend/src/components/FileModified.vue
+++ b/frontend/src/components/FileModified.vue
@@ -0,0 +1,22 @@
 <template>
  <td class="modified right">
    <time :data-tooltip=tooltip :datetime=datetime>{{ doc.modified }}</time>
  </td>
 </template>
 <script setup lang="ts">
 import { Doc } from '@/repositories/Document'
 import { computed } from 'vue'
 const datetime = computed(() =>
  new Date(1000 * props.doc.mtime).toISOString().replace('.000Z', 'Z')
 )
 const tooltip = computed(() =>
  datetime.value.replace('T', '\n').replace('Z', ' UTC')
 )
 const props = defineProps<{
    doc: Doc
 }>()
 </script>
--- a/cista-front/src/components/FileRenameInput.vue
+++ b/cista-front/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
+  doc: Doc
-  rename: (doc: Document, newName: string) => void
+  rename: (doc: Doc, newName: string) => void
  exit: () => void
 }>()
@@ -46,8 +46,8 @@ const apply = () => {
 <style>
 input#FileRenameInput {
-  color: var(--primary-color);
+  color: var(--input-color);
-  background: var(--primary-background);
+  background: var(--input-background);
  border: 0;
  border-radius: 0.3rem;
  padding: 0.4rem;
--- a/frontend/src/components/FileSize.vue
+++ b/frontend/src/components/FileSize.vue
@@ -0,0 +1,43 @@
 <template>
  <td class="size right" :class=sizeClass>{{ doc.sizedisp }}</td>
 </template>
 <script setup lang="ts">
 import { Doc } from '@/repositories/Document'
 import { computed } from 'vue'
 const sizeClass = computed(() => {
  const unit = props.doc.sizedisp.split('\u202F').slice(-1)[0]
  return +unit ? "bytes" : unit
 })
 const props = defineProps<{
    doc: Doc
 }>()
 </script>
 <style scoped>
 .size.empty { color: #555 }
 .size.bytes { color: #77a }
 .size.kB { color: #474 }
 .size.MB { color: #a80 }
 .size.GB { color: #f83 }
 .size.TB, .size.PB, .size.EB, .size.huge {
  color: #f44;
  text-shadow: 0 0 .2em;
 }
@media (prefers-color-scheme: dark) {
  .size.empty { color: #bbb }
  .size.bytes { color: #99d }
  .size.kB { color: #aea }
  .size.MB { color: #ff4 }
  .size.GB { color: #f86 }
  .size.TB, .size.PB, .size.EB, .size.huge { color: #f55 }
 }
 .cursor .size {
  color: inherit;
  text-shadow: none;
 }
 </style>
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -0,0 +1,117 @@
 <template>
  <nav class="headermain">
    <div class="buttons">
      <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="() => store.fileExplorer!.newFolder()"
      />
      <slot></slot>
      <div class="spacer smallgap"></div>
      <template v-if="showSearchInput">
        <input
          ref="search"
          type="search"
          :value="query"
          @input="updateSearch"
          placeholder="Search words"
          class="margin-input"
          @keyup.escape="closeSearch"
        />
      </template>
      <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
      <SvgButton name="cog" @click="settingsMenu" />
    </div>
  </nav>
 </template>
 <script setup lang="ts">
 import { useMainStore } from '@/stores/main'
 import { ref, nextTick, watchEffect } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import router from '@/router';
 const store = useMainStore()
 const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
  const props = defineProps<{
  path: Array<string>
  query: string
 }>()
 const closeSearch = (ev: Event) => {
  if (!showSearchInput.value) return  // Already closing
  showSearchInput.value = false
  const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
  breadcrumb.focus()
  updateSearch(ev)
 }
 const updateSearch = (ev: Event) => {
  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)
  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) {
    items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
  } else {
    items.push({ label: 'Login', onClick: () => store.loginDialog() })
  }
  ContextMenu.showContextMenu({
    // @ts-ignore
    x: e.target.getBoundingClientRect().right, y: e.target.getBoundingClientRect().bottom,
    items,
  })
 }
 defineExpose({
  toggleSearchInput,
  closeSearch,
 })
 </script>
 <style scoped>
 .buttons {
  padding: 0;
  display: flex;
  align-items: center;
  height: 3.5em;
  z-index: 10;
 }
 .buttons > * {
  flex-shrink: 1;
 }
 input[type='search'] {
  background: var(--input-background);
  color: var(--input-color);
  border: 0;
  border-radius: 0.1em;
  padding: 0.5em;
  outline: none;
  font-size: 1.5em;
  max-width: 30vw;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/HeaderSelected.vue
+++ b/cista-front/src/components/HeaderSelected.vue
@@ -1,46 +1,52 @@
 <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 createWebSocket from '@/repositories/WS'
+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.ids.filter(id => sel.selected.has(id)).map(id => sel.fullpath[id])
+    sel: sel.keys.map(key => {
      const doc = sel.docs[key]
      return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
    })
  }
  // @ts-ignore
  if (dst !== undefined) msg.dst = dst
-  const control = createWebSocket('/api/control', ev => {
+  const control = connect(controlUrl, {
-    const res = JSON.parse(ev.data)
+    message(ev: MessageEvent) {
-    if ('error' in res) {
+      const res = JSON.parse(ev.data)
-      console.error('Control socket error', msg, res.error)
+      if ('error' in res) {
-      return
+        console.error('Control socket error', msg, res.error)
-    } else if (res.status === 'ack') {
+        store.error = res.error.message
-      console.log('Control ack OK', res)
+        return
-      control.close()
+      } else if (res.status === 'ack') {
-      documentStore.selected.clear()
+        console.log('Control ack OK', res)
-      return
+        control.close()
-    } else console.log('Unknown control respons', msg, res)
+        store.selected.clear()
        return
      } else console.log('Unknown control response', msg, res)
    }
  })
  control.onopen = () => {
    control.send(JSON.stringify(msg))
@@ -57,21 +63,15 @@ const linkdl = (href: string) => {
 const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandle) => {
  let hdir = ''
  let h = handle
-  let filelist = []
+  console.log('Downloading to filesystem', sel.recursive)
-  for (const id of sel.ids) {
+  for (const [rel, full, doc] of sel.recursive) {
    filelist.push(sel.relpath[id])
  }
  console.log('Downloading to filesystem', filelist)
  for (const id of sel.ids) {
    const rel = sel.relpath[id]
    const url = sel.url[id] // Only files, not folders
    // Create any missing directories
-    if (!rel.startsWith(hdir)) {
+    if (hdir && !rel.startsWith(hdir + '/')) {
      hdir = ''
      h = handle
    }
    const r = rel.slice(hdir.length)
-    for (const dir of r.split('/').slice(0, url ? -1 : undefined)) {
+    for (const dir of r.split('/').slice(0, doc.dir ? undefined : -1)) {
      hdir += `${dir}/`
      try {
        h = await h.getDirectoryHandle(dir.normalize('NFC'), { create: true })
@@ -81,17 +81,18 @@ const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandl
      }
      console.log('Created', hdir)
    }
-    if (!url) continue // Target was a folder and was created
+    if (doc.dir) continue // Target was a folder and was created
    const name = rel.split('/').pop()!.normalize('NFC')
    // Download file
    let fileHandle
    try {
      fileHandle = await h.getFileHandle(name, { create: true })
    } catch (error) {
-      console.error('Failed to create file', hdir + name, error)
+      console.error('Failed to create file', rel, full, hdir + name, error)
      return
    }
    const writable = await fileHandle.createWritable()
    const url = `/files/${rel}`
    console.log('Fetching', url)
    const res = await fetch(url)
    if (!res.ok)
@@ -107,18 +108,18 @@ const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandl
 }
 const download = async () => {
-  const sel = documentStore.selectedFiles
+  const sel = store.selectedFiles
  console.log('Download', sel)
-  if (sel.selected.size === 0) {
+  if (sel.keys.length === 0) {
-    console.warn('Attempted download but no files found. Missing:', sel.missing)
+    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 urls = Object.values(sel.url)
+  const files = sel.recursive.filter(([rel, full, doc]) => !doc.dir)
-  if (urls.length === 1) {
+  if (files.length === 1) {
-    documentStore.selected.clear()
+    store.selected.clear()
-    return linkdl(urls[0] as string)
+    return linkdl(`/files/${files[0][1]}`)
  }
  // Use FileSystem API if multiple files and the browser supports it
  if ('showDirectoryPicker' in window) {
@@ -129,7 +130,7 @@ const download = async () => {
        mode: 'readwrite'
      })
      filesystemdl(sel, handle).then(() => {
-        documentStore.selected.clear()
+        store.selected.clear()
      })
      return
    } catch (e) {
@@ -137,16 +138,18 @@ const download = async () => {
    }
  }
  // Otherwise, zip and download
-  linkdl(`/zip/${Array.from(sel.selected).join('+')}/download.zip`)
+  const name = sel.keys.length === 1 ? sel.docs[sel.keys[0]].name : 'download'
-  documentStore.selected.clear()
+  linkdl(`/zip/${Array.from(sel.keys).join('+')}/${name}.zip`)
  store.selected.clear()
 }
 </script>
 <style>
 .select-text {
  color: var(--accent-color);
-  text-wrap: nowrap;
+  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/LoginModal.vue
+++ b/cista-front/src/components/LoginModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <button v-if="store.isUserLogged" @click="logout" class="action-button">
+  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required" @blur="store.user.isOpenLoginModal = false">
    Logout {{ store.user.username }}
  </button>
  <ModalDialog v-if="store.user.isOpenLoginModal" title="Login">
    <form @submit.prevent="login">
      <div class="login-container">
        <label for="username">Username:</label>
@@ -10,6 +7,8 @@
          id="username"
          name="username"
          autocomplete="username"
          spellcheck="false"
          autocorrect="off"
          required
          v-model="loginForm.username"
        />
@@ -19,34 +18,31 @@
          name="password"
          type="password"
          autocomplete="current-password"
          spellcheck="false"
          autocorrect="off"
          required
          v-model="loginForm.password"
        />
      </div>
-      <h3 v-if="loginForm.error.length > 0" class="error-text">
+      <h3 class="error-text">
-        {{ loginForm.error }}
+        {{ loginForm.error || '\u00A0' }}
      </h3>
-      <input id="submit" type="submit" class="button-login" />
+      <div class="dialog-buttons">
        <div class="spacer"></div>
        <input id="submit" type="submit" value="Login" class="button-login" />
      </div>
    </form>
  </ModalDialog>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
-import { loginUser, logoutUser } from '@/repositories/User'
+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 logout = async () => {
  try {
    await logoutUser()
  } finally {
    location.reload()
  }
 }
 const loginForm = reactive({
  username: '',
@@ -59,13 +55,10 @@ const login = async () => {
    loginForm.error = ''
    confirmLoading.value = true
    const msg = await loginUser(loginForm.username, loginForm.password)
-    console.log('Logged in', msg)
+    store.login(msg.data.username, !!msg.data.privileged)
    store.login(msg.username, !!msg.privileged)
  } catch (error) {
    const httpError = error as ISimpleError
-    if (httpError.name) {
+    loginForm.error = httpError.message || '🛑 Unknown error'
      loginForm.error = httpError.message
    }
  } finally {
    confirmLoading.value = false
  }
@@ -81,15 +74,29 @@ const login = async () => {
  align-items: center;
  margin: 1rem 0;
 }
-.button-login {
+.dialog-buttons {
-  margin-left: auto;
+  display: flex;
-  background-color: var(--secondary-color);
+  justify-content: space-between;
-  color: var(--secondary-background);
+  align-items: center;
 }
-.ant-btn-primary:not(:disabled):hover {
+.button-login {
-  background-color: var(--blue-color);
+  color: #fff;
  background: var(--soft-color);
  cursor: pointer;
  font-weight: bold;
  border: 0;
  border-radius: .5rem;
  padding: .5rem 2rem;
  margin-left: auto;
  transition: all var(--transition-time) linear;
 }
 .button-login:hover, .button-login:focus {
  background: var(--accent-color);
  box-shadow: 0 0 .3rem #000;
 }
 .error-text {
  color: var(--red-color);
  height: 1em;
 }
 </style>
@/stores/main
--- a/cista-front/src/components/ModalDialog.vue
+++ b/cista-front/src/components/ModalDialog.vue
@@ -23,15 +23,18 @@ const props = withDefaults(
    title: ''
  }
 )
-
+const show = () => {
 onMounted(() => {
  dialog.value!.showModal()
 }
 defineExpose({ show })
 onMounted(() => {
  show()
 })
 </script>
 <style>
 /* Style for the background */
-body:has(dialog[open])::before {
+dialog::backdrop {
  content: '';
  display: block;
  position: fixed;
@@ -40,14 +43,17 @@ body:has(dialog[open])::before {
  width: 100%;
  height: 100%;
  background: #0008;
-  backdrop-filter: blur(0.2em);
+  backdrop-filter: blur(0.4em);
  z-index: 1000;
 }
 /* Hide the dialog by default */
 dialog[open] {
  background: #ddd;
  color: black;
  display: block;
  border: none;
  font-size: 1.2rem;
  border-radius: 0.5rem;
  box-shadow: 0.2rem 0.2rem 1rem #000;
  padding: 1rem;
@@ -56,11 +62,13 @@ dialog[open] {
  left: 0;
  z-index: 1001;
 }
-
+input {
  font: inherit;
 }
 dialog[open] > h1 {
-  background: #00f;
+  background: var(--soft-color);
  color: #fff;
-  font-size: 1rem;
+  font-size: 1.2rem;
  margin: -1rem -1rem 0 -1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
 }
--- a/cista-front/src/components/SvgButton.vue
+++ b/cista-front/src/components/SvgButton.vue
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@@ -0,0 +1,305 @@
 <script setup lang="ts">
 import { connect, uploadUrl } from '@/repositories/WS';
 import { useMainStore } from '@/stores/main'
 import { collator } from '@/utils';
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 const fileInput = ref()
 const folderInput = ref()
 const store = useMainStore()
 const props = defineProps({
  path: Array<string>
 })
 type CloudFile = {
  file: File
  cloudName: string
  cloudPos: number
 }
 function pasteHandler(event: ClipboardEvent) {
  const items = Array.from(event.clipboardData?.items ?? [])
  const infiles = [] as File[]
  const dirs = [] as FileSystemDirectoryEntry[]
  for (const item of items) {
    if (item.kind !== 'file') continue
    const entry = item.webkitGetAsEntry()
    if (entry?.isFile) {
      const file = item.getAsFile()
      if (file) infiles.push(file)
    } else if (entry?.isDirectory) {
      dirs.push(entry as FileSystemDirectoryEntry)
    }
  }
  if (infiles.length || dirs.length) {
    event.preventDefault()
    uploadFiles(infiles)
    for (const entry of dirs) pasteDirectory(entry, `${props.path!.join('/')}/${entry.name}`)
  }
 }
 const pasteDirectory = async (entry: FileSystemDirectoryEntry, loc: string) => {
  const reader = entry.createReader()
  const entries = await new Promise<any[]>(resolve => reader.readEntries(resolve))
  const cloudfiles = [] as CloudFile[]
  for (const entry of entries) {
    const cloudName = `${loc}/${entry.name}`
    if (entry.isFile) {
      const file = await new Promise(resolve => entry.file(resolve)) as File
      cloudfiles.push({file, cloudName, cloudPos: 0})
    } else if (entry.isDirectory) {
      await pasteDirectory(entry, cloudName)
    }
  }
  if (cloudfiles.length) uploadCloudFiles(cloudfiles)
 }
 function uploadHandler(event: Event) {
  event.preventDefault()
  // @ts-ignore
  const input = event.target as HTMLInputElement | null
  const infiles = Array.from((input ?? (event as DragEvent).dataTransfer)?.files ?? []) as File[]
  if (input) input.value = ''
  if (infiles.length) uploadFiles(infiles)
 }
 const uploadFiles = (infiles: File[]) => {
  const loc = props.path!.join('/')
  let files = []
  for (const file of infiles) {
    files.push({
      file,
      cloudName: loc + '/' + (file.webkitRelativePath || file.name),
      cloudPos: 0,
    })
  }
  uploadCloudFiles(files)
 }
 const uploadCloudFiles = (files: CloudFile[]) => {
  const dotfiles = files.filter(f => f.cloudName.includes('/.'))
  if (dotfiles.length) {
    store.error = "Won't upload dotfiles"
    console.log("Dotfiles omitted", dotfiles)
    files = files.filter(f => !f.cloudName.includes('/.'))
  }
  if (!files.length) return
  files.sort((a, b) => collator.compare(a.cloudName, b.cloudName))
  // @ts-ignore
  upqueue = [...upqueue, ...files]
  statsAdd(files)
  startWorker()
 }
 const cancelUploads = () => {
  upqueue = []
  statReset()
 }
 const uprogress_init = {
  total: 0,
  uploaded: 0,
  t0: 0,
  tlast: 0,
  statbytes: 0,
  statdur: 0,
  files: [] as CloudFile[],
  filestart: 0,
  fileidx: 0,
  filecount: 0,
  filename: '',
  filesize: 0,
  filepos: 0,
  status: 'idle',
 }
 const uprogress = reactive({...uprogress_init})
 const percent = computed(() => uprogress.uploaded / uprogress.total * 100)
 const speed = computed(() => {
  let s = uprogress.statbytes / uprogress.statdur / 1e3
  const tsince = (Date.now() - uprogress.tlast) / 1e3
  if (tsince > 5 / s) return 0  // Less than fifth of previous speed => stalled
  if (tsince > 1 / s) return 1 / tsince  // Next block is late or not coming, decay
  return s  // "Current speed"
 })
 const speeddisp = computed(() => speed.value ? speed.value.toFixed(speed.value < 10 ? 1 : 0) + '\u202FMB/s': 'stalled')
 setInterval(() => {
  if (Date.now() - uprogress.tlast > 3000) {
    // Reset
    uprogress.statbytes = 0
    uprogress.statdur = 1
  } else {
    // Running average by decay
    uprogress.statbytes *= .9
    uprogress.statdur *= .9
  }
 }, 100)
 const statUpdate = ({name, size, start, end}: {name: string, size: number, start: number, end: number}) => {
  if (name !== uprogress.filename) return  // If stats have been reset
  const now = Date.now()
  uprogress.uploaded = uprogress.filestart + end
  uprogress.filepos = end
  uprogress.statbytes += end - start
  uprogress.statdur += now - uprogress.tlast
  uprogress.tlast = now
  // File finished?
  if (end === size) {
    uprogress.filestart += size
    statNextFile()
    if (++uprogress.fileidx >= uprogress.filecount) statReset()
  }
 }
 const statNextFile = () => {
  const f = uprogress.files.shift()
  if (!f) return statReset()
  uprogress.filepos = 0
  uprogress.filesize = f.file.size
  uprogress.filename = f.cloudName
 }
 const statReset = () => {
  Object.assign(uprogress, uprogress_init)
  uprogress.t0 = Date.now()
  uprogress.tlast = uprogress.t0 + 1
 }
 const statsAdd = (f: CloudFile[]) => {
  if (uprogress.files.length === 0) statReset()
  uprogress.total += f.reduce((a, b) => a + b.file.size, 0)
  uprogress.filecount += f.length
  uprogress.files = [...uprogress.files, ...f]
  statNextFile()
 }
 let upqueue = [] as CloudFile[]
 // TODO: Rewrite as WebSocket class
 const WSCreate = async () => await new Promise<WebSocket>(resolve => {
  const ws = connect(uploadUrl, {
    open(ev: Event) { resolve(ws) },
    error(ev: Event) {
      console.error('Upload socket error', ev)
      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)
        store.error = res.error.message
        return
      }
      if (res.status === 'ack') {
        statUpdate(res.req)
      } else console.log('Unknown upload response', res)
    },
  })
  // @ts-ignore
  ws.sendMsg = (msg: any) => ws.send(JSON.stringify(msg))
  // @ts-ignore
  ws.sendData = async (data: any) => {
    // Wait until the WS is ready to send another message
    uprogress.status = "uploading"
    await new Promise(resolve => {
      const t = setInterval(() => {
        if (ws.bufferedAmount > 1<<20) return
        resolve(undefined)
        clearInterval(t)
      }, 1)
    })
    uprogress.status = "processing"
    ws.send(data)
  }
 })
 const worker = async () => {
  const ws = await WSCreate()
  while (upqueue.length) {
    const f = upqueue[0]
    const start = f.cloudPos
    const end = Math.min(f.file.size, start + (1<<20))
    const control = { name: f.cloudName, size: f.file.size, start, end }
    const data = f.file.slice(start, end)
    f.cloudPos = end
    // Note: files may get modified during I/O
    // @ts-ignore FIXME proper WebSocket class, avoid attaching functions to WebSocket object
    ws.sendMsg(control)
    // @ts-ignore
    await ws.sendData(data)
    if (f.cloudPos === f.file.size) upqueue.shift()
  }
  if (upqueue.length) startWorker()
  uprogress.status = "idle"
  workerRunning = false
 }
 let workerRunning: any = false
 const startWorker = () => {
  if (workerRunning === false) workerRunning = setTimeout(() => {
    workerRunning = true
    worker()
  }, 0)
 }
 onMounted(() => {
  // Need to prevent both to prevent browser from opening the file
  addEventListener('dragover', uploadHandler)
  addEventListener('drop', uploadHandler)
  addEventListener('paste', pasteHandler)
 })
 onUnmounted(() => {
  removeEventListener('paste', pasteHandler)
  removeEventListener('dragover', uploadHandler)
  removeEventListener('drop', uploadHandler)
 })
 </script>
 <template>
  <template>
    <input ref="fileInput" @change="uploadHandler" type="file" multiple>
    <input ref="folderInput" @change="uploadHandler" type="file" webkitdirectory>
  </template>
  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileInput.click()" />
  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.click()" />
  <div class="uploadprogress" v-if="uprogress.total" :style="`background: linear-gradient(to right, var(--bar) 0, var(--bar) ${percent}%, var(--nobar) ${percent}%, var(--nobar) 100%);`">
    <div class="statustext">
      <span v-if="uprogress.filecount > 1" class="index">
        [{{ uprogress.fileidx }}/{{ uprogress.filecount }}]
      </span>
      <span class="filename">{{ uprogress.filename.split('/').pop() }}
        <span v-if="uprogress.filesize > 1e7" class="percent">
          {{ (uprogress.filepos / uprogress.filesize * 100).toFixed(0) + '\u202F%' }}
        </span>
      </span>
      <span class="position" v-if="uprogress.total > 1e7">
        {{ (uprogress.uploaded / 1e6).toFixed(0) + '\u202F/\u202F' + (uprogress.total / 1e6).toFixed(0) + '\u202FMB' }}
      </span>
      <span class="speed">{{ speeddisp }}</span>
      <button class="close" @click="cancelUploads">❌</button>
    </div>
  </div>
 </template>
 <style scoped>
 .uploadprogress {
  --bar: var(--accent-color);
  --nobar: var(--header-background);
  display: flex;
  flex-direction: column;
  color: var(--primary-color);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
 }
 .statustext {
  display: flex;
  padding: 0.5rem 0;
 }
 span {
  color: #ccc;
  white-space: nowrap;
  text-align: right;
  padding: 0 0.5em;
 }
 .filename {
  color: #fff;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
 }
 .index { min-width: 3.5em }
 .position { min-width: 4em }
 .speed { min-width: 4em }
 </style>
@/stores/main
--- a/cista-front/src/main.ts
+++ b/cista-front/src/main.ts
@@ -8,6 +8,9 @@ import router from './router'
 import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 const app = createApp(App)
 app.config.errorHandler = err => {
  /* handle error */
@@ -17,6 +20,6 @@ app.config.errorHandler = err => {
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedState)
 app.use(pinia)
 app.use(router)
 app.use(ContextMenu)
 app.mount('#app')
--- a/cista-front/src/repositories/Client.ts
+++ b/cista-front/src/repositories/Client.ts
@@ -12,7 +12,7 @@ class ClientClass {
    try {
      msg = await res.json()
    } catch (e) {
-      throw new SimpleError(res.status, `HTTP ${res.status} ${res.statusText}`)
+      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
    }
    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
    return msg
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leo Vasanko	938c5ca657	Add project URL	2023-11-13 14:59:22 -08:00
Leo Vasanko	e0aef07783	Update README	2023-11-13 14:49:08 -08:00
Leo Vasanko	36826a83c1	Remember sort order	2023-11-13 14:15:28 -08:00
Leo Vasanko	6880f82c19	Add file context menu (only rename for now).	2023-11-13 10:09:12 -08:00
Leo Vasanko	5dd1bd9bdc	Add missing file	2023-11-13 09:55:32 -08:00
Leo Vasanko	41e8c78ecd	Refactoring Document storage (#5 ) - Major refactoring that makes Doc a class with properties - Data made only shallow reactive, for a good speedup of initial load - Minor bugfixes and UX improvements along the way - Fixed handling of hash and question marks in URLs (was confusing Vue Router) - Search made stricter to find good results (not ignore all punctuation) Reviewed-on: #5	2023-11-13 17:52:57 +00:00
Leo Vasanko	dc4bb494f3	Use localStoragerather than sessionStorage for cache. Rename variable.	2023-11-13 13:04:39 +00:00
Leo Vasanko	9b58b887b4	Log messages on session loading	2023-11-13 12:17:47 +00:00
Leo Vasanko	07848907f3	Typing error	2023-11-13 12:11:02 +00:00
Leo Vasanko	7a08f7cbe2	Pasteing files and folders to upload.	2023-11-13 03:39:10 -08:00
Leo Vasanko	dd37238510	Update modified immediately when entering a folder	2023-11-13 02:19:13 -08:00
Leo Vasanko	c8d5f335b1	Fix upload of zero-sized files.	2023-11-13 02:13:11 -08:00
Leo Vasanko	bb80b3ee54	Clear file upload input to allow re-uploading the same item.	2023-11-13 01:38:22 -08:00
Leo Vasanko	06d860c601	Only update time-ago modified field on current folder (optimization, full update was slow for large storages).	2023-11-13 00:52:03 -08:00
Leo Vasanko	c321de13fd	Don't reload backend on wwwroot changes.	2023-11-13 00:48:45 -08:00
Leo Vasanko	278e8303c4	Upload manager UI fix/tuning.	2023-11-13 00:37:56 -08:00
Leo Vasanko	9854dd01cc	More efficient flat file list format and various UX improvements (#3 ) This is a major upgrade with assorted things included. - Navigation flows improved, search appears in URL history, cleared when navigating to another folder - More efficient file list format for faster loads - Efficient updates, never re-send full root another time (except at connection) - Large number of watching and filelist updates (inotify issues remain) - File size coloring - Fixed ZIP generation random glitches (thread race condition) - Code refactoring, cleanup, typing fixes - More tests Reviewed-on: #3	2023-11-12 23:20:40 +00:00
Leo Vasanko	fb03fa5430	Favicon, title, automatic & manual server naming (#2 ) Server name may be set in config file. If unset, backend uses the folder name being served. This is shown in page title for site root, and subfolder names are also now shown. New icon of Droppy icon, changing only the color. Reviewed-on: #2	2023-11-08 23:00:07 +00:00
Leo Vasanko	e26cb8f70a	Linting, removed extra line from pyproject.toml.	2023-11-08 13:08:46 -08:00
Leo Vasanko	9bbbc829a1	Correct processing of custom config dir	2023-11-08 12:56:43 -08:00
Leo Vasanko	876d76bc1f	Frontend created and rewritten a few times, with some backend fixes (#1 ) The software is fully operational. Reviewed-on: #1	2023-11-08 20:38:40 +00:00
Leo Vasanko	4a53d0b8e2	Formatting and fix Internal Server Error on upload	2023-10-26 18:59:19 +03:00
		`@@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f80" rx="64" ry="64"/><path fill="#fff" d="M381 298h-84V167h-66L339 35l108 132h-66zm-168-84h-84v131H63l108 132 108-132h-66z"/></svg>`