Download progress bar

Preserve cursor and selection across reloads.
Keep current cursor when switching gallery/details.
2023-11-20 16:27:51 -08:00 · 2023-11-20 14:49:15 -08:00 · 2023-11-20 14:11:05 -08:00 · 2023-11-20 13:47:41 -08:00 · 2023-11-20 12:22:03 -08:00 · 2023-11-20 12:08:17 -08:00
130 changed files with 3275 additions and 1729 deletions
--- a/README.md
+++ b/README.md
@@ -1,25 +1,118 @@
-# Web File Storage
+# Cista Web Storage
-
+
-Run directly from repository with Hatch (or use pip install as usual):
+<img src="https://git.zi.fi/Vasanko/cista-storage/raw/branch/main/docs/cista.webp" align=left width=250>
-```sh
+
-hatch run cista -l :3000 /path/to/files
+Cista takes its name from the ancient *cistae*, metal containers used by Greeks and Egyptians to safeguard valuable items. This modern application provides a browser interface for secure and accessible file storage, echoing the trust and reliability of its historical namesake.
-```
+
-
+This is a cutting-edge **file and document server** designed for speed, efficiency, and unparalleled ease of use. Experience **lightning-fast browsing**, thanks to the file list maintained directly in your browser and updated from server filesystem events, coupled with our highly optimized code. Fully **keyboard-navigable** and with a responsive layout, Cista flawlessly adapts to your devices, providing a seamless experience wherever you are. Our powerful **instant search** means you're always just a few keystrokes away from finding exactly what you need. Press **1/2/3** to switch ordering, navigate with all four arrow keys (+Shift to select). Or click your way around on **breadcrumbs that remember where you were**.
-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).
+
-
+The Cista project started as an inevitable remake of [Droppy](https://github.com/droppyjs/droppy) which we used and loved despite its numerous bugs. Cista Storage stands out in handling even the most exotic filenames, ensuring a smooth experience where others falter.
-Create your user account:
+
-```sh
+All of this is wrapped in an intuitive interface with automatic light and dark themes, making Cista Storage the ideal choice for anyone seeking a reliable, versatile, and quick file storage solution. Quickly setup your own Cista where your files are just a click away, safe, and always accessible.
-hatch run cista --user admin --privileged
+
-```
+Experience Cista by visiting [Cista Demo](https://drop.zi.fi) for a test run and perhaps upload something...
-
+
-## Build frontend
+
-
+## Getting Started
-Prebuilt frontend is provided in repository but for any changes it will need to be manually rebuilt:
+### Installation
-
+
-```sh
+To install the cista application, use:
-cd cista-front
+
-npm install
+```fish
-npm run build
+pip install cista
-```
+```
-
+
-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`.
+Note: Some Linux distributions might need `--break-system-packages` to install Python packages, which are safely installed in the user's home folder. As an alternative to avoid installation, run it with command `pipx run cista`
 ### Running the Server
 Create an account: (or run a public server without authentication)
 ```fish
 cista --user yourname --privileged
 ```
 Serve your files at http://localhost:8000:
 ```fish
 cista -l :8000 /path/to/files
 ```
 The server remembers its settings in the config folder (default `~/.local/share/cista/`), including the listen port and directory, for future runs without arguments.
 ### Internet Access
 To use your own TLS certificates, place them in the config folder and run:
 ```fish
 cista -l cista.example.com
 ```
 Most admins instead find the [Caddy](https://caddyserver.com/) web server convenient for its auto TLS certificates and all. A proxy also allows running multiple web services or Cista instances on the same IP address but different (sub)domains.
 `/etc/caddy/Caddyfile`:
 ```Caddyfile
 cista.example.com {
    reverse_proxy :8000
 }
 ```
 ## Development setup
 For rapid development, we use the Vite development server for the Vue frontend, while running the backend on port 8000 that Vite proxies backend requests to. Each server live reloads whenever its code or configuration are modified.
 ```fish
 cd frontend
 npm install
 npm run dev
 ```
 Concurrently, start the backend on another terminal:
 ```fish
 hatch shell
 pip install -e '.[dev]'
 cista --dev -l :8000 /path/to/files
 ```
 We use `hatch shell` for installing on a virtual environment, to avoid disturbing the rest of the system with our hacking.
 Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python package. Running `hatch build` builds the frontend and creates a NodeJS-independent Python package.
 ## System Deployment
 This setup allows easy addition of storages, each with its own domain, configuration, and files.
 Assuming a restricted user account `storage` for serving files and that cista is installed system-wide or on this account (check with `sudo -u storage -s`). Alternatively, use `pipx run cista` or `hatch run cista` as the ExecStart command.
 Create `/etc/systemd/system/cista@.service`:
 ```ini
 [Unit]
 Description=Cista storage %i
 [Service]
 User=storage
 ExecStart=cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
 Restart=always
 [Install]
 WantedBy=multi-user.target
 ```
 This setup supports multiple storages, each under `/media/storage/<domain>` for files and `/srv/cista/<domain>/` for configuration. UNIX sockets are used instead of numeric ports for convenience.
 ```fish
 systemctl daemon-reload
 systemctl enable --now cista@foo.example.com
 systemctl enable --now cista@bar.example.com
 ```
 Public exposure is easiest using the Caddy web server.
 `/etc/caddy/Caddyfile`:
 ```Caddyfile
 foo.example.com, bar.example.com {
    reverse_proxy unix//srv/cista/{host}/socket
 }
 ```
--- 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/App.vue
+++ b/cista-front/src/App.vue
@@ -1,121 +0,0 @@
 <template>
  <LoginModal />
  <header>
    <HeaderMain ref="headerMain">
      <HeaderSelected :path="path.pathList" />
    </HeaderMain>
    <BreadCrumb :path="path.pathList" tabindex="-1"/>
  </header>
  <main>
    <RouterView :path="path.pathList" />
  </main>
 </template>
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import type { ComputedRef } from 'vue'
 import type HeaderMain from '@/components/HeaderMain.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { watchConnect, watchDisconnect } from '@/repositories/WS'
 import { useDocumentStore } from '@/stores/documents'
 import { computed } from 'vue'
 import Router from '@/router/index'
 interface Path {
  path: string
  pathList: string[]
 }
 const documentStore = useDocumentStore()
 const path: ComputedRef<Path> = computed(() => {
  const p = decodeURIComponent(Router.currentRoute.value.path)
  const pathList = p.split('/').filter(value => value !== '')
  return {
    path: p,
    pathList
  }
 })
 onMounted(watchConnect)
 onUnmounted(watchDisconnect)
 // Update human-readable x seconds ago messages from mtimes
 setInterval(documentStore.updateModified, 1000)
 const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
 let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
  const fileExplorer = documentStore.fileExplorer as any
  if (!fileExplorer) return
  const c = fileExplorer.isCursor()
  const keyup = event.type === 'keyup'
  if (event.repeat) {
    if (
      event.key === 'ArrowUp' ||
      event.key === 'ArrowDown' ||
      (c && event.code === 'Space')
    ) {
      event.preventDefault()
    }
    return
  }
  //console.log("key pressed", event)
  // For up/down implement custom fast repeat
  if (event.key === 'ArrowUp') vert = keyup ? 0 : event.altKey ? -10 : -1
  else if (event.key === 'ArrowDown') vert = keyup ? 0 : event.altKey ? 10 : 1
  // Find: process on keydown so that we can bypass the built-in search hotkey
  else if (!keyup && event.key === 'f' && (event.ctrlKey || event.metaKey)) {
    headerMain.value!.toggleSearchInput()
  }
  // Select all (toggle); keydown to prevent builtin
  else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
    fileExplorer.toggleSelectAll()
  }
  // Keys 1-3 to sort columns
  else if (
    c &&
    keyup &&
    (event.key === '1' || event.key === '2' || event.key === '3')
  ) {
    fileExplorer.toggleSortColumn(+event.key)
  }
  // Rename
  else if (c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {
    fileExplorer.cursorRename()
  }
  // Toggle selections on file explorer; ignore all spaces to prevent scrolling built-in hotkey
  else if (c && event.code === 'Space') {
    if (keyup && !event.altKey && !event.ctrlKey)
      fileExplorer.cursorSelect()
  } else return
  event.preventDefault()
  if (!vert) {
    if (timer) {
      clearTimeout(timer) // Good for either timeout or interval
      timer = null
    }
    return
  }
  if (!timer) {
    // Initial move, then t0 delay until repeats at tr intervals
    const select = event.shiftKey
    fileExplorer.cursorMove(vert, select)
    const t0 = 200,
      tr = 30
    timer = setTimeout(
      () =>
        (timer = setInterval(() => {
          fileExplorer.cursorMove(vert, select)
        }, tr)),
      t0 - tr
    )
  }
 }
 onMounted(() => {
  window.addEventListener('keydown', globalShortcutHandler)
  window.addEventListener('keyup', globalShortcutHandler)
 })
 onUnmounted(() => {
  window.removeEventListener('keydown', globalShortcutHandler)
  window.removeEventListener('keyup', globalShortcutHandler)
 })
 export type { Path }
 </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,100 +0,0 @@
 <template>
  <nav class="headermain">
    <div class="buttons">
      <template v-if="documentStore.error">
        <div class="error-message" @click="documentStore.error = ''">{{ documentStore.error }}</div>
        <div class="smallgap"></div>
      </template>
      <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"
          @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 { useDocumentStore } from '@/stores/documents'
 import { ref, nextTick } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 const documentStore = useDocumentStore()
 const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
 const closeSearch = () => {
  if (!showSearchInput.value) return  // Already closing
  showSearchInput.value = false
  documentStore.search = ''
  const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
  breadcrumb.focus()
 }
 const toggleSearchInput = () => {
  showSearchInput.value = !showSearchInput.value
  if (!showSearchInput.value) return closeSearch()
  nextTick(() => {
    const input = search.value
    if (input) input.focus()
  })
 }
 const settingsMenu = (e: Event) => {
  // show the context menu
  const items = []
  if (documentStore.user.isLoggedIn) {
    items.push({ label: `Logout ${documentStore.user.username ?? ''}`, onClick: () => documentStore.logout() })
  } else {
    items.push({ label: 'Login', onClick: () => documentStore.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>
--- 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,55 +0,0 @@
 export type FUID = string
 export type Document = {
  loc: string
  name: string
  key: FUID
  size: number
  sizedisp: string
  mtime: number
  modified: string
  haystack: string
  dir: boolean
 }
 export type errorEvent = {
  error: {
    code: number
    message: string
    redirect: string
  }
 }
 // Raw types the backend /api/watch sends us
 export type FileEntry = {
  key: FUID
  size: number
  mtime: number
 }
 export type DirEntry = {
  key: FUID
  size: number
  mtime: number
  dir: DirList
 }
 export type DirList = Record<string, FileEntry | DirEntry>
 export type UpdateEntry = {
  name: string
  deleted?: boolean
  key?: FUID
  size?: number
  mtime?: number
  dir?: DirList
 }
 // Helper structure for selections
 export interface SelectedItems {
  keys: FUID[]
  docs: Record<FUID, Document>
  recursive: Array<[string, string, Document]>
  missing: Set<FUID>
 }
--- a/cista-front/src/repositories/User.ts
+++ b/cista-front/src/repositories/User.ts
@@ -1,15 +0,0 @@
 import Client from '@/repositories/Client'
 export const url_login = '/login'
 export const url_logout = '/logout '
 export async function loginUser(username: string, password: string) {
  const user = await Client.post(url_login, {
    username,
    password
  })
  return user
 }
 export async function logoutUser() {
  const data = await Client.post(url_logout)
  return data
 }
--- a/cista-front/src/stores/documents.ts
+++ b/cista-front/src/stores/documents.ts
@@ -1,183 +0,0 @@
 import type {
  Document,
  DirEntry,
  FileEntry,
  FUID,
  SelectedItems
 } from '@/repositories/Document'
 import { formatSize, formatUnixDate, haystackFormat } from '@/utils'
 import { defineStore } from 'pinia'
 import { collator } from '@/utils'
 import { logoutUser } from '@/repositories/User'
 import { watchConnect } from '@/repositories/WS'
 type FileData = { id: string; mtime: number; size: number; dir: DirectoryData }
 type DirectoryData = {
  [filename: string]: FileData
 }
 type User = {
  username: string
  privileged: boolean
  isOpenLoginModal: boolean
  isLoggedIn: boolean
 }
 export const useDocumentStore = defineStore({
  id: 'documents',
  state: () => ({
    document: [] as Document[],
    search: "" as string,
    selected: new Set<FUID>(),
    uploadingDocuments: [],
    uploadCount: 0 as number,
    fileExplorer: null,
    error: '' as string,
    connected: false,
    user: {
      username: '',
      privileged: false,
      isLoggedIn: false,
      isOpenLoginModal: false
    } as User
  }),
  persist: {
    storage: sessionStorage,
    paths: ['document'],
  },
  actions: {
    updateRoot(root: DirEntry | null = null) {
      if (!root) {
        this.document = []
        return
      }
      // Transform tree data to flat documents array
      let loc = ""
      const mapper = ([name, attr]: [string, FileEntry | DirEntry]) => ({
        ...attr,
        loc,
        name,
        sizedisp: formatSize(attr.size),
        modified: formatUnixDate(attr.mtime),
        haystack: haystackFormat(name),
      })
      const queue = [...Object.entries(root.dir ?? {}).map(mapper)]
      const docs = []
      for (let doc; (doc = queue.shift()) !== undefined;) {
        docs.push(doc)
        if ("dir" in doc) {
          // Recurse but replace recursive structure with boolean
          loc = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
          queue.push(...Object.entries(doc.dir).map(mapper))
          // @ts-ignore
          doc.dir = true
        }
        // @ts-ignore
        else doc.dir = false
      }
      // Pre sort directory entries folders first then files, names in natural ordering
      docs.sort((a, b) =>
        // @ts-ignore
        b.dir - a.dir ||
        collator.compare(a.name, b.name)
      )
      this.document = docs as Document[]
    },
    updateUploadingDocuments(key: number, progress: number) {
      for (const d of this.uploadingDocuments) {
        if (d.key === key) d.progress = progress
      }
    },
    pushUploadingDocuments(name: string) {
      this.uploadCount++
      const document = {
        key: this.uploadCount,
        name: name,
        progress: 0
      }
      this.uploadingDocuments.push(document)
      return document
    },
    deleteUploadingDocument(key: number) {
      this.uploadingDocuments = this.uploadingDocuments.filter(e => e.key !== key)
    },
    updateModified() {
      for (const d of this.document) {
        if ('mtime' in d) d.modified = formatUnixDate(d.mtime)
      }
    },
    login(username: string, privileged: boolean) {
      this.user.username = username
      this.user.privileged = privileged
      this.user.isLoggedIn = true
      this.user.isOpenLoginModal = false
      if (!this.connected) watchConnect()
    },
    loginDialog() {
      this.user.isOpenLoginModal = true
    },
    async logout() {
      console.log("Logout")
      await logoutUser()
      this.$reset()
      history.go() // Reload page
    }
  },
  getters: {
    isUserLogged(): boolean {
      return this.user.isLoggedIn
    },
    recentDocuments(): Document[] {
      const ret = [...this.document]
      ret.sort((a, b) => b.mtime - a.mtime)
      return ret
    },
    largeDocuments(): Document[] {
      const ret = [...this.document]
      ret.sort((a, b) => b.size - a.size)
      return ret
    },
    selectedFiles(): SelectedItems {
      const selected = this.selected
      const found = new Set<FUID>()
      const ret: SelectedItems = {
        missing: new Set(),
        docs: {},
        keys: [],
        recursive: [],
      }
      for (const doc of this.document) {
        if (selected.has(doc.key)) {
          found.add(doc.key)
          ret.keys.push(doc.key)
          ret.docs[doc.key] = doc
        }
      }
      // What did we not select?
      for (const key of selected) if (!found.has(key)) ret.missing.add(key)
      // Build a flat list including contents recursively
      const relnames = new Set<string>()
      function add(rel: string, full: string, doc: Document) {
        if (!doc.dir && relnames.has(rel)) throw Error(`Multiple selections conflict for: ${rel}`)
        relnames.add(rel)
        ret.recursive.push([rel, full, doc])
      }
      for (const key of ret.keys) {
        const base = ret.docs[key]
        const basepath = base.loc ? `${base.loc}/${base.name}` : base.name
        const nremove = base.loc.length
        add(base.name, basepath, base)
        for (const doc of this.document) {
          if (doc.loc === basepath || doc.loc.startsWith(basepath) && doc.loc[basepath.length] === '/') {
            const full = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
            const rel = full.slice(nremove)
            add(rel, full, doc)
          }
        }
      }
      // Sort by rel (name stored as on download)
      ret.recursive.sort((a, b) => collator.compare(a[0], b[0]))
      return ret
    }
  }
 })
--- a/cista-front/src/views/ExplorerView.vue
+++ b/cista-front/src/views/ExplorerView.vue
@@ -1,58 +0,0 @@
 <template>
  <FileExplorer
    ref="fileExplorer"
    :key="Router.currentRoute.value.path"
    :path="props.path"
    :documents="documents"
    v-if="props.path"
  />
 </template>
 <script setup lang="ts">
 import { watchEffect, ref, computed } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import Router from '@/router/index'
 import { needleFormat, localeIncludes, collator } from '@/utils';
 const documentStore = useDocumentStore()
 const fileExplorer = ref()
 const props = defineProps({
  path: Array<string>
 })
 const documents = computed(() => {
  if (!props.path) return []
  const loc = props.path.join('/')
  // List the current location
  if (!documentStore.search) return documentStore.document.filter(doc => doc.loc === loc)
  // Find up to 100 newest documents that match the search
  const search = documentStore.search
  const needle = needleFormat(search)
  let limit = 100
  let docs = []
  for (const doc of documentStore.recentDocuments) {
    if (localeIncludes(doc.haystack, needle)) {
      docs.push(doc)
      if (--limit === 0) break
    }
  }
  // Organize by folder, by relevance
  const locsub = loc + '/'
  docs.sort((a, b) => (
    // @ts-ignore
    (b.loc === loc) - (a.loc === loc) ||
    // @ts-ignore
    (b.loc.slice(0, locsub.length) === locsub) - (a.loc.slice(0, locsub.length) === locsub) ||
    collator.compare(a.loc, b.loc) ||
    // @ts-ignore
    (a.type === 'file') - (b.type === 'file') ||
    // @ts-ignore
    b.name.includes(search) - a.name.includes(search) ||
    collator.compare(a.name, b.name)
  ))
  return docs
 })
 watchEffect(() => {
  documentStore.fileExplorer = fileExplorer.value
 })
 </script>
--- a/cista/main.py
+++ b/cista/main.py
@@ -62,12 +62,15 @@ def _main():
    _confdir(args)
    exists = config.conffile.exists()
    import_droppy = args["--import-droppy"]
-    necessary_opts = exists or import_droppy or path and listen
+    necessary_opts = exists or import_droppy or path
    if not necessary_opts:
        # Maybe run without arguments
        print(doc)
        print(
-            "No config file found! Get started with:\n  cista -l :8000 /path/to/files, or\n  cista -l example.com --import-droppy  # Uses Droppy files\n",
+            "No config file found! Get started with one of:\n"
            "  cista --user yourname --privileged\n"
            "  cista --import-droppy\n"
            "  cista -l :8000 /path/to/files\n"
        )
        return 1
    settings = {}
@@ -79,8 +82,15 @@ def _main():
        settings = droppy.readconf()
    if path:
        settings["path"] = path
    elif not exists:
        settings["path"] = Path.home() / "Downloads"
    if listen:
        settings["listen"] = listen
    elif not exists:
        settings["listen"] = ":8000"
    if not exists and not import_droppy:
        # We have no users, so make it public
        settings["public"] = True
    operation = config.update_config(settings)
    print(f"Config {operation}: {config.conffile}")
    # Prepare to serve
@@ -105,18 +115,30 @@ 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):
    _confdir(args)
-    config.load_config()
+    if config.conffile.exists():
        config.load_config()
        operation = False
    else:
        # Defaults for new config when user is created
        operation = config.update_config(
            {
                "listen": ":8000",
                "path": Path.home() / "Downloads",
                "public": False,
            }
        )
        print(f"Config {operation}: {config.conffile}\n")
    name = args["--user"]
    if not name or not name.isidentifier():
        raise ValueError("Invalid username")
    config.load_config()
    u = config.config.users.get(name)
    info = f"User {name}" if u else f"New user {name}"
    changes = {}
@@ -128,12 +150,17 @@ def _user(args):
        info += " (admin)" if oldadmin else ""
    if args["--password"] or not u:
        changes["password"] = pw = pwgen.generate()
-        info += f"\n  Password: {pw}"
+        info += f"\n  Password: {pw}\n"
-    res = config.update_user(args["--user"], changes)
+    res = config.update_user(name, changes)
    print(info)
    if res == "read":
        print("  No changes")
    if operation == "created":
        print(
            "Now you can run the server:\n  cista    # defaults set: -l :8000 ~/Downloads\n"
        )
 if __name__ == "__main__":
    sys.exit(main())
--- a/cista/api.py
+++ b/cista/api.py
@@ -37,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}")
@@ -88,7 +96,7 @@ async def watch(req, ws):
        msgspec.json.encode(
            {
                "server": {
-                    "name": "Cista",  # Should be configurable
+                    "name": config.config.name or config.config.path.name,
                    "version": __version__,
                    "public": config.config.public,
                },
@@ -103,13 +111,24 @@ async def watch(req, ws):
    )
    uuid = token_bytes(16)
    try:
-        with watching.tree_lock:
+        q, space, root = await asyncio.get_event_loop().run_in_executor(
-            q = watching.pubsub[uuid] = asyncio.Queue()
+            req.app.ctx.threadexec, subscribe, uuid, ws
-            # Init with disk usage and full tree
+        )
-            await ws.send(watching.format_du())
+        await ws.send(space)
-            await ws.send(watching.format_tree())
+        await ws.send(root)
        # Send updates
        while True:
            await ws.send(await q.get())
    finally:
        del watching.pubsub[uuid]
 def subscribe(uuid, ws):
    with watching.state.lock:
        q = watching.pubsub[uuid] = asyncio.Queue()
        # Init with disk usage and full tree
        return (
            q,
            watching.format_space(watching.state.space),
            watching.format_root(watching.state.root),
        )
--- a/cista/app.py
+++ b/cista/app.py
@@ -1,20 +1,23 @@
 import asyncio
 import datetime
 import mimetypes
 import threading
 from concurrent.futures import ThreadPoolExecutor
-from importlib.resources import files
+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
 import brotli
 import sanic.helpers
 from blake3 import blake3
-from sanic import Blueprint, Sanic, empty, raw
+from sanic import Blueprint, Sanic, empty, raw, redirect
 from sanic.exceptions import Forbidden, NotFound
-from sanic.log import logging
+from sanic.log import logger
 from stream_zip import ZIP_AUTO, stream_zip
-from cista import auth, config, session, watching
+from cista import auth, config, preview, session, watching
 from cista.api import bp
 from cista.protocol import DirEntry
 from cista.util.apphelpers import handle_sanic_exception
 # Workaround until Sanic PR #2824 is merged
@@ -22,6 +25,7 @@ sanic.helpers._ENTITY_HEADERS = frozenset()
 app = Sanic("cista", strict_slashes=True)
 app.blueprint(auth.bp)
 app.blueprint(preview.bp)
 app.blueprint(bp)
 app.exception(Exception)(handle_sanic_exception)
@@ -29,12 +33,15 @@ app.exception(Exception)(handle_sanic_exception)
@app.before_server_start
 async def main_start(app, loop):
    config.load_config()
    app.ctx.threadexec = ThreadPoolExecutor(
        max_workers=8, thread_name_prefix="cista-ioworker"
    )
    await watching.start(app, loop)
    app.ctx.threadexec = ThreadPoolExecutor(max_workers=8)
@app.after_server_stop
 async def main_stop(app, loop):
    quit.set()
    await watching.stop(app, loop)
    app.ctx.threadexec.shutdown()
@@ -43,8 +50,8 @@ async def main_stop(app, loop):
 async def use_session(req):
    req.ctx.session = session.get(req)
    try:
-        req.ctx.username = req.ctx.session["username"]
+        req.ctx.username = req.ctx.session["username"]  # type: ignore
-        req.ctx.user = config.config.users[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
@@ -75,22 +82,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"
@@ -121,31 +122,63 @@ def _load_wwwroot(www):
            if len(br) >= len(data):
                br = False
            wwwnew[name] = data, br, headers
    if not wwwnew:
        msg = f"Web frontend missing from {base}\n  Did you forget: hatch build\n"
        if not www:
            logger.warning(msg)
        if not app.debug:
            msg = "Web frontend missing. Cista installation is broken.\n"
        wwwnew[""] = (
            msg.encode(),
            False,
            {
                "etag": "error",
                "content-type": "text/plain",
                "cache-control": "no-store",
            },
        )
    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(), name="refresh_wwwroot")
 async def load_wwwroot(app):
    global www
    www = await asyncio.get_event_loop().run_in_executor(
        app.ctx.threadexec, _load_wwwroot, www
    )
 quit = threading.Event()
 async def refresh_wwwroot():
-    while True:
+    try:
-        try:
+        while not quit.is_set():
-            wwwold = www
+            try:
-            await load_wwwroot()
+                wwwold = www
-            changes = ""
+                await load_wwwroot(app)
-            for name in sorted(www):
+                changes = ""
-                attr = www[name]
+                for name in sorted(www):
-                if wwwold.get(name) == attr:
+                    attr = www[name]
-                    continue
+                    if wwwold.get(name) == attr:
-                headers = attr[2]
+                        continue
-                changes += f"{headers['last-modified']} {headers['etag']} /{name}\n"
+                    headers = attr[2]
-            for name in sorted(set(wwwold) - set(www)):
+                    changes += f"{headers['last-modified']} {headers['etag']} /{name}\n"
-                changes += f"Deleted /{name}\n"
+                for name in sorted(set(wwwold) - set(www)):
-            if changes:
+                    changes += f"Deleted /{name}\n"
-                print(f"Updated wwwroot:\n{changes}", end="", flush=True)
+                if changes:
-        except Exception as e:
+                    print(f"Updated wwwroot:\n{changes}", end="", flush=True)
-            print("Error loading wwwroot", e)
+            except Exception as e:
-        if not app.debug:
+                print(f"Error loading wwwroot: {e!r}")
-            return
+            await asyncio.sleep(0.5)
-        await asyncio.sleep(0.5)
+    except asyncio.CancelledError:
        pass
@app.route("/<path:path>", methods=["GET", "HEAD"])
@@ -160,77 +193,78 @@ 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)
-import datetime
+@app.route("/favicon.ico", methods=["GET", "HEAD"])
-from collections import deque
+async def favicon(req):
-from pathlib import Path
+    # Browsers keep asking for it when viewing files (not HTML with icon link)
-from stat import S_IFREG
+    return redirect("/assets/logo-97d1d7eb.svg", status=308)
-from stream_zip import ZIP_AUTO, stream_zip
+
 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("+"))
-    with watching.tree_lock:
+    files = get_files(wanted)
        q = deque([([], None, watching.tree[""].dir)])
        files = []
        while q:
            locpar, relpar, d = q.pop()
            for name, attr in d.items():
                loc = [*locpar, name]
                rel = None
                if relpar or attr.key in wanted:
                    rel = [*relpar, name] if relpar else [name]
                    wanted.remove(attr.key)
                if isinstance(attr, DirEntry):
                    q.append((loc, rel, attr.dir))
                elif rel:
                    files.append(
                        (
                            "/".join(rel),
                            Path(watching.rootpath.joinpath(*loc)),
                            attr.mtime,
                            attr.size,
                        )
                    )
    if not files:
        raise NotFound(
            "No files found",
-            context={"keys": keys, "zipfile": zipfile, "wanted": wanted},
+            context={"keys": keys, "zipfile": f"{zipfile}.{ext}", "wanted": wanted},
        )
    if wanted:
        raise NotFound("Files not found", context={"missing": wanted})
    for rel, p, mtime, size in files:
        if not p.is_file():
            raise NotFound(f"File not found {rel}")
    def local_files(files):
-        for rel, p, mtime, size in files:
+        for rel, p in files:
-            modified = datetime.datetime.fromtimestamp(mtime, datetime.UTC)
+            s = p.stat()
-            yield rel, modified, S_IFREG | 0o644, ZIP_AUTO(size), contents(p)
+            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):
+    def contents(name, size):
        with name.open("rb") as f:
-            while chunk := f.read(65536):
+            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)
+                asyncio.run_coroutine_threadsafe(queue.put(chunk), loop).result()
        except Exception:
-            logging.exception("Error streaming ZIP")
+            logger.exception("Error streaming ZIP")
            raise
        finally:
            asyncio.run_coroutine_threadsafe(queue.put(None), loop)
@@ -241,7 +275,10 @@ async def zip_download(req, keys, zipfile, ext):
    thread = loop.run_in_executor(app.ctx.threadexec, worker)
    # Stream the response
-    res = await req.respond(content_type="application/zip")
+    res = await req.respond(
        content_type="application/zip",
        headers={"cache-control": "no-store"},
    )
    while chunk := await queue.get():
        await res.send(chunk)
--- a/cista/auth.py
+++ b/cista/auth.py
@@ -68,10 +68,10 @@ def verify(request, *, privileged=False):
        if request.ctx.user:
            if request.ctx.user.privileged:
                return
-            raise Forbidden("Access Forbidden: Only for privileged users")
+            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(f"Login required for {request.path}", "cookie", quiet=True)
 bp = Blueprint("auth")
@@ -159,3 +159,35 @@ async def logout_post(request):
        res = json({"message": msg})
    session.delete(res)
    return res
@bp.post("/password-change")
 async def change_password(request):
    try:
        if request.headers.content_type == "application/json":
            username = request.json["username"]
            pwchange = request.json["passwordChange"]
            password = request.json["password"]
        else:
            username = request.form["username"][0]
            pwchange = request.form["passwordChange"][0]
            password = request.form["password"][0]
        if not username or not password:
            raise KeyError
    except KeyError:
        raise BadRequest(
            "Missing username, passwordChange or password",
        ) from None
    try:
        user = login(username, password)
        set_password(user, pwchange)
    except ValueError as e:
        raise Forbidden(str(e), context={"redirect": "/login"}) from e
    if "text/html" in request.headers.accept:
        res = redirect("/")
        session.flash(res, "Password updated")
    else:
        res = json({"message": "Password updated"})
    session.create(res, username)
    return res
--- a/cista/config.py
+++ b/cista/config.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 import secrets
 import sys
 from functools import wraps
 from hashlib import sha256
 from pathlib import Path, PurePath
@@ -14,6 +15,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] = {}
@@ -89,6 +91,8 @@ def config_update(modify):
            return "read"
        f.write(new)
        f.close()
        if sys.platform == "win32":
            conffile.unlink()  # Windows doesn't support atomic replace
        tmpname.rename(conffile)  # Atomic replace
    except:
        f.close()
@@ -134,7 +138,7 @@ def update_user(conf: Config, name: str, changes: dict) -> Config:
    # Encode into dict, update values with new, convert to Config
    try:
        u = conf.users[name].__copy__()
-    except KeyError:
+    except (KeyError, AttributeError):
        u = User()
    if "password" in changes:
        from . import auth
@@ -143,7 +147,7 @@ def update_user(conf: Config, name: str, changes: dict) -> Config:
        del changes["password"]
    udict = msgspec.to_builtins(u, enc_hook=enc_hook)
    udict.update(changes)
-    settings = msgspec.to_builtins(conf, enc_hook=enc_hook)
+    settings = msgspec.to_builtins(conf, enc_hook=enc_hook) if conf else {"users": {}}
    settings["users"][name] = msgspec.convert(udict, User, dec_hook=dec_hook)
    return msgspec.convert(settings, Config, dec_hook=dec_hook)
--- 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/preview.py
+++ b/cista/preview.py
@@ -0,0 +1,114 @@
 import asyncio
 import io
 import mimetypes
 import urllib.parse
 from pathlib import PurePosixPath
 from urllib.parse import unquote
 from wsgiref.handlers import format_date_time
 import av
 import av.datasets
 import fitz  # PyMuPDF
 from PIL import Image
 from sanic import Blueprint, empty, raw
 from sanic.exceptions import NotFound
 from sanic.log import logger
 from cista import config
 from cista.util.filename import sanitize
 bp = Blueprint("preview", url_prefix="/preview")
@bp.get("/<path:path>")
 async def preview(req, path):
    """Preview a file"""
    maxsize = int(req.args.get("px", 1024))
    maxzoom = float(req.args.get("zoom", 2.0))
    quality = int(req.args.get("q", 40))
    rel = PurePosixPath(sanitize(unquote(path)))
    path = config.config.path / rel
    stat = path.lstat()
    etag = config.derived_secret(
        "preview", rel, stat.st_mtime_ns, quality, maxsize, maxzoom
    ).hex()
    savename = PurePosixPath(path.name).with_suffix(".webp")
    headers = {
        "etag": etag,
        "last-modified": format_date_time(stat.st_mtime),
        "cache-control": "max-age=604800, immutable"
        + ("" if config.config.public else ", private"),
        "content-type": "image/webp",
        "content-disposition": f"inline; filename*=UTF-8''{urllib.parse.quote(savename.as_posix())}",
    }
    if req.headers.if_none_match == etag:
        # The client has it cached, respond 304 Not Modified
        return empty(304, headers=headers)
    if not path.is_file():
        raise NotFound("File not found")
    img = await asyncio.get_event_loop().run_in_executor(
        req.app.ctx.threadexec, dispatch, path, quality, maxsize, maxzoom
    )
    return raw(img, headers=headers)
 def dispatch(path, quality, maxsize, maxzoom):
    if path.suffix.lower() in (".pdf", ".xps", ".epub", ".mobi"):
        return process_pdf(path, quality=quality, maxsize=maxsize, maxzoom=maxzoom)
    if mimetypes.guess_type(path.name)[0].startswith("video/"):
        return process_video(path, quality=quality, maxsize=maxsize)
    return process_image(path, quality=quality, maxsize=maxsize)
 def process_image(path, *, maxsize, quality):
    img = Image.open(path)
    w, h = img.size
    img.thumbnail((min(w, maxsize), min(h, maxsize)))
    # Fix rotation based on EXIF data
    try:
        rotate_values = {3: 180, 6: 270, 8: 90}
        orientation = img._getexif().get(274)
        if orientation in rotate_values:
            logger.debug(f"Rotating preview {path} by {rotate_values[orientation]}")
            img = img.rotate(rotate_values[orientation], expand=True)
    except AttributeError:
        ...
    except Exception as e:
        logger.error(f"Error rotating preview image: {e}")
    # Save as webp
    imgdata = io.BytesIO()
    img.save(imgdata, format="webp", quality=quality, method=4)
    return imgdata.getvalue()
 def process_pdf(path, *, maxsize, maxzoom, quality, page_number=0):
    pdf = fitz.open(path)
    page = pdf.load_page(page_number)
    w, h = page.rect[2:4]
    zoom = min(maxsize / w, maxsize / h, maxzoom)
    mat = fitz.Matrix(zoom, zoom)
    pix = page.get_pixmap(matrix=mat)
    return pix.pil_tobytes(format="webp", quality=quality, method=4)
 def process_video(path, *, maxsize, quality):
    with av.open(str(path)) as container:
        stream = container.streams.video[0]
        rotation = (
            stream.side_data
            and stream.side_data.get(av.stream.SideData.DISPLAYMATRIX)
            or 0
        )
        stream.codec_context.skip_frame = "NONKEY"
        container.seek(container.duration // 8)
        frame = next(container.decode(stream))
        img = frame.to_image()
    img.thumbnail((maxsize, maxsize))
    imgdata = io.BytesIO()
    if rotation:
        img = img.rotate(rotation, expand=True)
    img.save(imgdata, format="webp", quality=quality, method=4)
    return imgdata.getvalue()
--- 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):
@@ -112,56 +112,43 @@ class ErrorMsg(msgspec.Struct):
 ## Directory listings
-class FileEntry(msgspec.Struct):
+class FileEntry(msgspec.Struct, array_like=True, frozen=True):
-    key: str
+    level: int
    size: int
    mtime: int
 class DirEntry(msgspec.Struct):
    key: str
    size: int
    mtime: int
    dir: DirList
    def __getitem__(self, name):
        return self.dir[name]
    def __setitem__(self, name, value):
        self.dir[name] = value
    def __contains__(self, name):
        return name in self.dir
    def __delitem__(self, name):
        del self.dir[name]
    @property
    def props(self):
        return {k: v for k, v in self.__struct_fields__ if k != "dir"}
 DirList = dict[str, FileEntry | DirEntry]
 class UpdateEntry(msgspec.Struct, omit_defaults=True):
    """Updates the named entry in the tree. Fields that are set replace old values. A list of entries recurses directories."""
    name: str
    key: str
-    deleted: bool = False
+    mtime: int
-    size: int | None = None
+    size: int
-    mtime: int | None = None
+    isfile: int
-    dir: DirList | None = None
+
    def __str__(self):
        return self.key or "FileEntry()"
    def __repr__(self):
        return f"{self.name} ({self.size}, {self.mtime})"
-def make_dir_data(root):
+class Update(msgspec.Struct, array_like=True):
-    if len(root) == 3:
+    ...
-        return FileEntry(*root)
+
-    id_, size, mtime, listing = root
+
-    converted = {}
+class UpdKeep(Update, tag="k"):
-    for name, data in listing.items():
+    count: int
-        converted[name] = make_dir_data(data)
+
-    sz = sum(x.size for x in converted.values())
+
-    mt = max(x.mtime for x in converted.values())
+class UpdDel(Update, tag="d"):
-    return DirEntry(id_, sz, max(mt, mtime), converted)
+    count: int
 class UpdIns(Update, tag="i"):
    items: list[FileEntry]
 class UpdateMessage(msgspec.Struct):
    update: list[UpdKeep | UpdDel | UpdIns]
 class Space(msgspec.Struct):
    disk: int
    free: int
    usage: int
    storage: int
--- 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):
@@ -49,7 +51,7 @@ def parse_listen(listen):
            raise ValueError(
                f"Directory for unix socket does not exist: {unix.parent}/",
            )
-        return "http://localhost", {"unix": unix}
+        return "http://localhost", {"unix": unix.as_posix()}
    if re.fullmatch(r"(\w+(-\w+)*\.)+\w{2,}", listen, re.UNICODE):
        return f"https://{listen}", {"host": listen, "port": 443, "ssl": True}
    try:
--- a/cista/util/apphelpers.py
+++ b/cista/util/apphelpers.py
@@ -21,7 +21,6 @@ def jres(data, **kwargs):
 async def handle_sanic_exception(request, e):
    logger.exception(e)
    context, code = {}, 500
    message = str(e)
    if isinstance(e, SanicException):
@@ -42,7 +41,7 @@ async def handle_sanic_exception(request, e):
        res.cookies.add_cookie("message", message, max_age=5)
        return res
    # Otherwise use Sanic's default error page
-    return errorpages.HTMLRenderer(request, e, debug=request.app.debug).full()
+    return errorpages.HTMLRenderer(request, e, debug=request.app.debug).render()
 def websocket_wrapper(handler):
@@ -54,13 +53,14 @@ def websocket_wrapper(handler):
            auth.verify(request)
            await handler(request, ws, *args, **kwargs)
        except Exception as e:
            logger.exception(e)
            context, code, message = {}, 500, str(e) or "Internal Server Error"
            if isinstance(e, SanicException):
                context = e.context or {}
                code = e.status_code
            message = f"⚠️ {message}" if code < 500 else f"🛑 {message}"
            await asend(ws, ErrorMsg({"code": code, "message": message, **context}))
            if not getattr(e, "quiet", False) or code == 500:
                logger.exception(f"{code} {e!r}")
            raise
    return wrapper
--- 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,211 +1,396 @@
 import asyncio
 import shutil
 import sys
 import threading
 import time
 from contextlib import suppress
 from os import stat_result
 from pathlib import Path, PurePosixPath
 from stat import S_ISDIR, S_ISREG
 import inotify.adapters
 import msgspec
-from sanic.log import logging
+from natsort import humansorted, natsort_keygen, ns
 from sanic.log import logger
 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.root: list[FileEntry] = []
    @property
    def space(self):
        with self.lock:
            return self._space
    @space.setter
    def space(self, space):
        with self.lock:
            self._space = space
 def treeiter(rootmod):
    relpath = PurePosixPath()
    for i, entry in enumerate(rootmod):
        if entry.level > 0:
            relpath = PurePosixPath(*relpath.parts[: entry.level - 1]) / entry.name
        yield i, relpath, entry
 def treeget(rootmod: list[FileEntry], path: PurePosixPath):
    begin = None
    ret = []
    for i, relpath, entry in treeiter(rootmod):
        if begin is None:
            if relpath == path:
                begin = i
                ret.append(entry)
            continue
        if entry.level <= len(path.parts):
            break
        ret.append(entry)
    return begin, ret
 def treeinspos(rootmod: list[FileEntry], relpath: PurePosixPath, relfile: int):
    # Find the first entry greater than the new one
    # precondition: the new entry doesn't exist
    isfile = 0
    level = 0
    i = 0
    for i, rel, entry in treeiter(rootmod):
        if entry.level > level:
            # We haven't found item at level, skip subdirectories
            continue
        if entry.level < level:
            # We have passed the level, so the new item is the first
            return i
        if level == 0:
            # root
            level += 1
            continue
        ename = rel.parts[level - 1]
        name = relpath.parts[level - 1]
        esort = sortkey(ename)
        nsort = sortkey(name)
        # Non-leaf are always folders, only use relfile at leaf
        isfile = relfile if len(relpath.parts) == level else 0
        # First compare by isfile, then by sorting order and if that too matches then case sensitive
        cmp = (
            entry.isfile - isfile
            or (esort > nsort) - (esort < nsort)
            or (ename > name) - (ename < name)
        )
        if cmp > 0:
            return i
        if cmp < 0:
            continue
        level += 1
        if level > len(relpath.parts):
            print("ERROR: insertpos", relpath, i, entry.name, entry.level, level)
            break
    else:
        i += 1
    return i
 state = State()
 rootpath: Path = None  # type: ignore
-quit = False
+quit = threading.Event()
-modified_flags = (
+
-    "IN_CREATE",
+## Filesystem scanning
    "IN_DELETE",
    "IN_DELETE_SELF",
    "IN_MODIFY",
    "IN_MOVE_SELF",
    "IN_MOVED_FROM",
    "IN_MOVED_TO",
 )
 disk_usage = None
-def watcher_thread(loop):
+def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]:
-    global disk_usage, rootpath
+    path = rootpath / rel
-
+    ret = []
-    while True:
+    try:
-        rootpath = config.config.path
+        st = stat or path.stat()
-        i = inotify.adapters.InotifyTree(rootpath.as_posix())
+        isfile = int(not S_ISDIR(st.st_mode))
-        old = format_tree() if tree[""] else None
+        entry = FileEntry(
-        with tree_lock:
+            level=len(rel.parts),
-            # Initialize the tree from filesystem
+            name=rel.name,
-            tree[""] = walk(rootpath)
+            key=fuid(st),
-        print(" ".join(tree[""].dir.keys()))
+            mtime=int(st.st_mtime),
-        msg = format_tree()
+            size=st.st_size if isfile else 0,
-        if msg != old:
+            isfile=isfile,
-            asyncio.run_coroutine_threadsafe(broadcast(msg), loop)
+        )
-
+        if isfile:
-        # The watching is not entirely reliable, so do a full refresh every minute
+            return [entry]
-        refreshdl = time.monotonic() + 60.0
+        # Walk all entries of the directory
-
+        ret: list[FileEntry] = [...]  # type: ignore
-        for event in i.event_gen():
+        li = []
-            if quit:
+        for f in path.iterdir():
-                return
+            if quit.is_set():
-            # Disk usage update
+                raise SystemExit("quit")
-            du = shutil.disk_usage(rootpath)
+            if f.name.startswith("."):
-            if du != disk_usage:
+                continue  # No dotfiles
-                disk_usage = du
+            with suppress(FileNotFoundError):
-                asyncio.run_coroutine_threadsafe(broadcast(format_du()), loop)
+                s = f.lstat()
-                break
+                isfile = S_ISREG(s.st_mode)
-            # Do a full refresh?
+                isdir = S_ISDIR(s.st_mode)
-            if time.monotonic() > refreshdl:
+                if not isfile and not isdir:
-                break
+                    continue
-            if event is None:
+                li.append((int(isfile), f.name, s))
-                continue
+        # Build the tree as a list of FileEntries
-            _, flags, path, filename = event
+        for [_, name, s] in humansorted(li):
-            if not any(f in modified_flags for f in flags):
+            sub = walk(rel / name, stat=s)
-                continue
+            child = sub[0]
-            # Update modified path
+            entry = FileEntry(
-            path = PurePosixPath(path) / filename
+                level=entry.level,
-            try:
+                name=entry.name,
-                update(path.relative_to(rootpath), loop)
+                key=entry.key,
-            except Exception as e:
+                size=entry.size + child.size,
-                print("Watching error", e, path, rootpath)
+                mtime=max(entry.mtime, child.mtime),
-                raise
+                isfile=entry.isfile,
-        i = None  # Free the inotify object
+            )
            ret.extend(sub)
    except FileNotFoundError:
        pass  # Things may be rapidly in motion
    except OSError as e:
        if e.errno == 13:  # Permission denied
            pass
        logger.error(f"Watching {path=}: {e!r}")
    if ret:
        ret[0] = entry
    return ret
-def format_du():
+def update_root(loop):
-    return msgspec.json.encode(
+    """Full filesystem scan"""
-        {
+    old = state.root
-            "space": {
+    new = walk(PurePosixPath())
-                "disk": disk_usage.total,
+    if old != new:
-                "used": disk_usage.used,
+        update = format_update(old, new)
-                "free": disk_usage.free,
+        with state.lock:
-                "storage": tree[""].size,
+            broadcast(update, loop)
-            },
+            state.root = new
        },
    ).decode()
-def format_tree():
+def update_path(rootmod: list[FileEntry], relpath: PurePosixPath, loop):
-    root = tree[""]
+    """Called on FS updates, check the filesystem and broadcast any changes."""
    new = walk(relpath)
    obegin, old = treeget(rootmod, relpath)
    if old == new:
        logger.debug(
            f"Watch: Event without changes needed {relpath}"
            if old
            else f"Watch: Event with old and new missing: {relpath}"
        )
        return
    if obegin is not None:
        del rootmod[obegin : obegin + len(old)]
    if new:
        logger.debug(f"Watch: Update {relpath}" if old else f"Watch: Created {relpath}")
        i = treeinspos(rootmod, relpath, new[0].isfile)
        rootmod[i:i] = new
    else:
        logger.debug(f"Watch: Removed {relpath}")
 def update_space(loop):
    """Called periodically to update the disk usage."""
    du = shutil.disk_usage(rootpath)
    space = Space(*du, storage=state.root[0].size)
    # Update only on difference above 1 MB
    tol = 10**6
    old = msgspec.structs.astuple(state.space)
    new = msgspec.structs.astuple(space)
    if any(abs(o - n) > tol for o, n in zip(old, new, strict=True)):
        state.space = space
        broadcast(format_space(space), loop)
 ## Messaging
 def format_update(old, new):
    # Make keep/del/insert diff until one of the lists ends
    oidx, nidx = 0, 0
    oremain, nremain = set(old), set(new)
    update = []
    keep_count = 0
    while oidx < len(old) and nidx < len(new):
        modified = False
        # Matching entries are kept
        if old[oidx] == new[nidx]:
            entry = old[oidx]
            oremain.remove(entry)
            nremain.remove(entry)
            keep_count += 1
            oidx += 1
            nidx += 1
            continue
        if keep_count > 0:
            modified = True
            update.append(UpdKeep(keep_count))
            keep_count = 0
        # Items only in old are deleted
        del_count = 0
        while oidx < len(old) and old[oidx] not in nremain:
            oremain.remove(old[oidx])
            del_count += 1
            oidx += 1
        if del_count:
            update.append(UpdDel(del_count))
            continue
        # Items only in new are inserted
        insert_items = []
        while nidx < len(new) and new[nidx] not in oremain:
            entry = new[nidx]
            nremain.remove(entry)
            insert_items.append(entry)
            nidx += 1
        if insert_items:
            modified = True
            update.append(UpdIns(insert_items))
        if not modified:
            raise Exception(
                f"Infinite loop in diff {nidx=} {oidx=} {len(old)=} {len(new)=}"
            )
    # Diff any remaining
    if keep_count > 0:
        update.append(UpdKeep(keep_count))
    if oremain:
        update.append(UpdDel(len(oremain)))
    elif nremain:
        update.append(UpdIns(new[nidx:]))
    return msgspec.json.encode({"update": update}).decode()
 def format_space(usage):
    return msgspec.json.encode({"space": usage}).decode()
 def format_root(root):
    return msgspec.json.encode({"root": root}).decode()
-def walk(path: Path) -> DirEntry | FileEntry | None:
+def broadcast(msg, loop):
-    try:
+    return asyncio.run_coroutine_threadsafe(abroadcast(msg), loop).result()
        s = path.stat()
        key = fuid(s)
        assert key, repr(key)
        mtime = int(s.st_mtime)
        if path.is_file():
            return FileEntry(key, s.st_size, mtime)
        tree = {
            p.name: v
            for p in path.iterdir()
            if not p.name.startswith(".")
            if (v := walk(p)) is not None
        }
        if tree:
            size = sum(v.size for v in tree.values())
            mtime = max(mtime, *(v.mtime for v in tree.values()))
        else:
            size = 0
        return DirEntry(key, size, mtime, tree)
    except FileNotFoundError:
        return None
    except OSError as e:
        print("OS error walking path", path, e)
        return None
-def update(relpath: PurePosixPath, loop):
+async def abroadcast(msg):
    """Called by inotify updates, check the filesystem and broadcast any changes."""
    if rootpath is None or relpath is None:
        print("ERROR", rootpath, relpath)
    new = walk(rootpath / relpath)
    with tree_lock:
        update = update_internal(relpath, new)
        if not update:
            return  # No changes
        msg = msgspec.json.encode({"update": update}).decode()
        asyncio.run_coroutine_threadsafe(broadcast(msg), loop)
 def update_internal(
    relpath: PurePosixPath,
    new: DirEntry | FileEntry | None,
 ) -> 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]:
        u = UpdateEntry(name, entry.key)
        if szdiff:
            entry.size += szdiff
            u.size = entry.size
        if mt > entry.mtime:
            u.mtime = entry.mtime = mt
        update.append(u)
    # The last element is the one that changed
    name, entry = elems[-1]
    parent = elems[-2][1] if len(elems) > 1 else tree
    u = UpdateEntry(name, new.key if new else entry.key)
    if new:
        parent[name] = new
        if u.size != new.size:
            u.size = new.size
        if u.mtime != new.mtime:
            u.mtime = new.mtime
        if isinstance(new, DirEntry) and u.dir != new.dir:
            u.dir = new.dir
    else:
        del parent[name]
        u.deleted = True
    update.append(u)
    return update
 async def broadcast(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")
+        logger.exception("Broadcast error")
 ## Watcher thread
 def watcher_inotify(loop):
    """Inotify watcher thread (Linux only)"""
    import inotify.adapters
    modified_flags = (
        "IN_CREATE",
        "IN_DELETE",
        "IN_DELETE_SELF",
        "IN_MODIFY",
        "IN_MOVE_SELF",
        "IN_MOVED_FROM",
        "IN_MOVED_TO",
    )
    while not quit.is_set():
        i = inotify.adapters.InotifyTree(rootpath.as_posix())
        # Initialize the tree from filesystem
        t0 = time.perf_counter()
        update_root(loop)
        t1 = time.perf_counter()
        logger.debug(f"Root update took {t1 - t0:.1f}s")
        trefresh = time.monotonic() + 300.0
        tspace = time.monotonic() + 5.0
        # Watch for changes (frequent wakeups needed for quiting)
        while not quit.is_set():
            t = time.monotonic()
            # The watching is not entirely reliable, so do a full refresh every 30 seconds
            if t >= trefresh:
                break
            # Disk usage update
            if t >= tspace:
                tspace = time.monotonic() + 5.0
                update_space(loop)
            # Inotify events, update the tree
            dirty = False
            rootmod = state.root[:]
            for event in i.event_gen(yield_nones=False, timeout_s=0.1):
                assert event
                if quit.is_set():
                    return
                interesting = any(f in modified_flags for f in event[1])
                if event[2] == rootpath.as_posix() and event[3] == "zzz":
                    logger.debug(f"Watch: {interesting=} {event=}")
                if interesting:
                    # Update modified path
                    t0 = time.perf_counter()
                    path = PurePosixPath(event[2]) / event[3]
                    update_path(rootmod, path.relative_to(rootpath), loop)
                    t1 = time.perf_counter()
                    logger.debug(f"Watch: Update {event[3]} took {t1 - t0:.1f}s")
                    if not dirty:
                        t = time.monotonic()
                        dirty = True
                # Wait a maximum of 0.5s to push the updates
                if dirty and time.monotonic() >= t + 0.5:
                    break
            if dirty and state.root != rootmod:
                t0 = time.perf_counter()
                update = format_update(state.root, rootmod)
                t1 = time.perf_counter()
                with state.lock:
                    broadcast(update, loop)
                    state.root = rootmod
                t2 = time.perf_counter()
                logger.debug(
                    f"Format update took {t1 - t0:.1f}s, broadcast {t2 - t1:.1f}s"
                )
        del i  # Free the inotify object
 def watcher_poll(loop):
    """Polling version of the watcher thread."""
    while not quit.is_set():
        t0 = time.perf_counter()
        update_root(loop)
        update_space(loop)
        dur = time.perf_counter() - t0
        if dur > 1.0:
            logger.debug(f"Reading the full file list took {dur:.1f}s")
        quit.wait(0.1 + 8 * dur)
 async def start(app, loop):
    global rootpath
    config.load_config()
-    app.ctx.watcher = threading.Thread(target=watcher_thread, args=[loop])
+    rootpath = config.config.path
    use_inotify = sys.platform == "linux"
    app.ctx.watcher = threading.Thread(
        target=watcher_inotify if use_inotify else watcher_poll,
        args=[loop],
        # Descriptive name for system monitoring
        name=f"cista-watcher {rootpath}",
    )
    app.ctx.watcher.start()
 async def stop(app, loop):
-    global quit
+    quit.set()
    quit = True
    app.ctx.watcher.join()
--- a/docs/cista.webp
+++ b/docs/cista.webp
--- a/cista-front/.gitignore
+++ b/cista-front/.gitignore
--- a/cista-front/README.md
+++ b/cista-front/README.md
@@ -1,40 +1,46 @@
-# cista-front
+# Cista Vue Frontend
-
+
-This template should help get you started developing with Vue 3 in Vite.
+The frontend is a Single-Page App implemented with Vue 3. Development uses the Vite server together with the main Python backend, but in production the latter also serves the prebuilt frontend files.
-
+
-## Recommended IDE Setup
+## Recommended IDE Setup
-
+
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
+
-## Type Support for `.vue` Imports in TS
+## Type Support for `.vue` Imports in TS
-
+
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
+
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
+
-1. Disable the built-in TypeScript Extension
+1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
+
-## Customize configuration
+## Hot-Reload for Development
-
+
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+### Run the backend
-
+
-## Project Setup
+```fish
-
+hatch shell
-```sh
+cista --dev -l :8000
-npm install
+```
-```
+
-
+### And the Vite server (in another terminal)
-### Compile and Hot-Reload for Development
+
-
+```fish
-```sh
+cd frontend
-npm run dev
+npm install
-```
+npm run dev
-
+```
-### Type-Check, Compile and Minify for Production
+Browse to Vite, which will proxy API requests to port 8000. Both servers live reload changes.
-
+
-```sh
+
-npm run build
+### Type-Check, Compile and Minify for Production
-```
+
 This is also called by `hatch build` during Python packaging:
 ```fish
 npm run build
 ```
--- a/cista-front/env.d.ts
+++ b/cista-front/env.d.ts
--- a/cista-front/index.html
+++ b/cista-front/index.html
@@ -1,12 +1,11 @@
 <!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">
 <script type="module" src="/src/main.ts"></script>
-
+<body id="app">
 <div id="app"></div>
--- 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": {
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
 User-agent: *
 Disallow: /
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,154 @@
 <template>
  <LoginModal />
  <SettingsModal />
  <header>
    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
      <HeaderSelected :path="path.pathList" />
    </HeaderMain>
    <BreadCrumb :path="path.pathList" primary />
  </header>
  <main>
    <RouterView :path="path.pathList" :query="path.query" />
  </main>
 </template>
 <script setup lang="ts">
 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 { loadSession, watchConnect, watchDisconnect } from '@/repositories/WS'
 import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
 import Router from '@/router/index'
 import type { SortOrder } from './utils/docsort'
 import type SettingsModalVue from './components/SettingsModal.vue'
 interface Path {
  path: string
  pathList: string[]
  query: string
 }
 const store = useMainStore()
 const path: ComputedRef<Path> = computed(() => {
  const p = decodeURIComponent(Router.currentRoute.value.path).split('//')
  const pathList = p[0].split('/').filter(value => value !== '')
  const query = p.slice(1).join('//')
  return {
    path: p[0],
    pathList,
    query
  }
 })
 watchEffect(() => {
  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || store.server.name || 'Cista Storage'
 })
 onMounted(loadSession)
 onMounted(watchConnect)
 onUnmounted(watchDisconnect)
 const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
 let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
  if (store.dialog) {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    return
  }
  const fileExplorer = store.fileExplorer as any
  if (!fileExplorer) return
  const c = fileExplorer.isCursor()
  const input = (event.target as HTMLElement).tagName === 'INPUT'
  const keyup = event.type === 'keyup'
  if (event.repeat) {
    if (
      event.key === 'ArrowUp' ||
      event.key === 'ArrowDown' ||
      event.key === 'ArrowLeft' ||
      event.key === 'ArrowRight' ||
      (c && event.code === 'Space')
    ) {
      if (!input) event.preventDefault()
    }
    return
  }
  //console.log("key pressed", event)
  /// Long if-else machina for all keys we handle here
  let arrow = ''
  if (!input && event.key.startsWith("Arrow")) arrow = event.key.slice(5).toLowerCase()
  // Find: process on keydown so that we can bypass the built-in search hotkey
  else if (!keyup && event.key === 'f' && (event.ctrlKey || event.metaKey)) {
    headerMain.value!.toggleSearchInput()
  }
  // Search also on / (UNIX style)
  else if (!input && keyup && event.key === '/') {
    headerMain.value!.toggleSearchInput()
  }
  // Globally close search, clear errors on Escape
  else if (keyup && event.key === 'Escape') {
    store.error = ''
    headerMain.value!.closeSearch(event)
    store.focusBreadcrumb()
  }
  else if (!input && keyup && event.key === 'Backspace') {
    Router.back()
  }
  // Select all (toggle); keydown to precede and prevent builtin
  else if (!input && !keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
    fileExplorer.toggleSelectAll()
  }
  // G toggles Gallery
  else if (!input && keyup && event.key === 'g') {
    store.prefs.gallery = !store.prefs.gallery
  }
  // Keys Backquote-1-2-3 to sort columns
  else if (
    !input &&
    keyup &&
    (event.code === 'Backquote' || event.key === '1' || event.key === '2' || event.key === '3')
  ) {
    store.sort(['', 'name', 'modified', 'size'][+event.key || 0] as SortOrder)
  }
  // Rename
  else if (!input && c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {
    fileExplorer.cursorRename()
  }
  // Toggle selections on file explorer; ignore all spaces to prevent scrolling built-in hotkey
  else if (!input && c && event.code === 'Space') {
    if (keyup && !event.altKey && !event.ctrlKey)
      fileExplorer.cursorSelect()
  }
  else return
  /// We are handling this!
  event.preventDefault()
  if (timer) {
    clearTimeout(timer) // Good for either timeout or interval
    timer = null
  }
  let f: any
  switch (arrow) {
    case 'up': f = () => fileExplorer.up(event); break
    case 'down': f = () => fileExplorer.down(event); break
    case 'left': f = () => fileExplorer.left(event); break
    case 'right': f = () => fileExplorer.right(event); break
  }
  if (f && !keyup) {
    // Initial move, then t0 delay until repeats at tr intervals
    const t0 = 200, tr = event.altKey ? 20 : 100
    f()
    timer = setTimeout(() => { timer = setInterval(f, tr) }, t0 - tr)
  }
 }
 onMounted(() => {
  window.addEventListener('keydown', globalShortcutHandler)
  window.addEventListener('keyup', globalShortcutHandler)
 })
 onUnmounted(() => {
  window.removeEventListener('keydown', globalShortcutHandler)
  window.removeEventListener('keyup', globalShortcutHandler)
 })
 export type { Path }
 </script>
--- 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
@@ -14,7 +14,7 @@
  /* The following are overridden by responsive layouts */
  --root-font-size: 1rem;
  --header-font-size: 1rem;
-  --header-height: calc(6.5 * var(--header-font-size));
+  --header-height: 4rem;
 }
@media (prefers-color-scheme: dark) {
  :root {
@@ -37,12 +37,6 @@
  :root {
    --root-font-size: calc(8px + 8 * 100vw / 1000);
  }
  header .buttons:has(input[type='search']) > div {
    display: none;
  }
  header .buttons > div:has(input[type='search']) {
    display: inherit;
  }
 }
@media screen and (min-width: 2000px) {
  :root {
@@ -54,6 +48,7 @@
  :root {
    --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
    --root-font-size: 0.8rem;
    --header-height: 2rem;
  }
  header .breadcrumb > * {
    padding-top: calc(8 + 8 * 100vh / 600) !important;
@@ -78,17 +73,13 @@
  }
  header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: end;
  }
-  header .breadcrumb {
+  header .headermain { order: 1; }
-    flex-shrink: 1;
+  header .breadcrumb { align-self: stretch; }
-  }
+  header .action-button {
-  header .breadcrumb > * {
+    width: 2em;
-    flex-shrink: 1;
+    height: 2em;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
 }
@media print {
@@ -98,10 +89,11 @@
    --header-background: none;
    --header-color: black;
  }
-  nav,
+  .headermain,
  .menu,
-  .rename-button {
+  .rename-button,
-    display: none;
+  .suggest-gallery {
    display: none !important;
  }
  .breadcrumb > a {
    color: black !important;
@@ -116,16 +108,31 @@
  }
  .breadcrumb svg {
    fill: black !important;
    margin: 0 .5rem 0 1rem !important;
  }
  body#app {
    height: auto !important;
  }
  main {
    height: auto !important;
    padding-bottom: 0 !important;
  }
  thead tr {
    font-size: 1rem !important;
    position: static !important;
    background: none !important;
    border-bottom: 1pt solid black !important;
  }
  audio::-webkit-media-controls-timeline,
  video::-webkit-media-controls-timeline {
    display: none;
  }
  audio::-webkit-media-controls,
  video::-webkit-media-controls {
    display: none;
  }
  tr, figure {
    page-break-inside: avoid;
  }
  .selection {
    min-width: 0 !important;
    padding: 0 !important;
@@ -142,14 +149,13 @@
    left: 0;
  }
 }
 * {
  box-sizing: border-box;
 }
 html {
  font-size: var(--root-font-size);
  overflow: hidden;
 }
 /* Hide scrollbar for all browsers */
 main::-webkit-scrollbar {
  display: none;
 }
 main {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
@@ -166,6 +172,7 @@ tbody .modified {
  font-family: 'Roboto Mono';
 }
 header {
  flex: 0 0 auto;
  background-color: var(--header-background);
  color: var(--header-color);
  font-size: var(--header-font-size);
@@ -207,21 +214,23 @@ table {
  border: 0;
  gap: 0;
 }
-#app {
+body#app {
-  height: 100%;
+  height: 100vh;
  display: flex;
  flex-direction: column;
 }
 main {
  flex: 1 1 auto;
  padding-bottom: 3em; /* convenience space on the bottom */
  overflow-y: scroll;
  text-align: center;
 }
 header nav.headermain {
  /* Position so that tooltips can appear on top of other positioned elements */
  position: relative;
  z-index: 100;
 }
 main {
  height: calc(100svh - var(--header-height));
  padding-bottom: 3em; /* convenience space on the bottom */
  overflow-y: scroll;
 }
 .spacer { flex-grow: 1 }
 .smallgap { flex-shrink: 1; width: 2em }
--- 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
@@ -2,14 +2,19 @@
  <nav
    class="breadcrumb"
    aria-label="Breadcrumb"
-    @keyup.left.stop="move(-1)"
+    @keydown.left.stop="move(-1)"
-    @keyup.right.stop="move(1)"
+    @keydown.right.stop="move(1)"
-    @focus="move(0)"
+    @keyup.enter="move(0)"
    @focus=focusCurrent
    tabindex=0
  >
    <a href="#/"
      :ref="el => setLinkRef(0, el)"
      class="home"
      :class="{ current: !!isCurrent(0) }"
      :aria-current="isCurrent(0)"
      @click.prevent="navigate(0)"
      title="/"
    >
      <component :is="home" />
    </a>
@@ -19,6 +24,7 @@
        :aria-current="isCurrent(index + 1)"
        @click.prevent="navigate(index + 1)"
        :ref="el => setLinkRef(index + 1, el)"
        :title="`/${longest.slice(0, index + 1).join('/')}`"
      >{{ location }}</a>
    </template>
  </nav>
@@ -26,8 +32,9 @@
 <script setup lang="ts">
 import home from '@/assets/svg/home.svg'
-import { onBeforeUpdate, ref, watchEffect } from 'vue'
+import { nextTick, onBeforeUpdate, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import { exists } from '@/utils/fileutil'
 const router = useRouter()
@@ -37,17 +44,33 @@ onBeforeUpdate(() => { links.length = 1 })  // 1 to keep home
 const props = defineProps<{
  path: Array<string>
  primary?: boolean
 }>()
 const longest = ref<Array<string>>([])
 const isCurrent = (index: number) => index == props.path.length ? 'location' : undefined
 const focusCurrent = () => {
  nextTick(() => {
    const index = props.path.length
    if (index < links.length) links[index].focus()
  })
 }
 const navigate = (index: number) => {
  const link = links[index]
  if (!link) throw Error(`No link at index ${index} (path: ${props.path})`)
-  link.focus()
+  const url = index ? `/${longest.value.slice(0, index).join('/')}/` : '/'
-  router.replace(`/${longest.value.slice(0, index).join('/')}`)
+  const long = longest.value.length ? `/${longest.value.join('/')}/` : '/'
  const browser = decodeURIComponent(location.hash.slice(1).split('//')[0])
  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
  // Clicking on current link clears the rest of the path and adds new history
  if (isCurrent(index)) { longest.value.splice(index); router.push(u) }
  // Moving along breadcrumbs doesn't create new history
  else if (long.startsWith(browser)) router.replace(u)
  // Nornal navigation from elsewhere (e.g. search result breadcrumbs)
  else router.push(u)
 }
 const move = (dir: number) => {
@@ -59,13 +82,25 @@ const move = (dir: number) => {
 watchEffect(() => {
  const longcut = longest.value.slice(0, props.path.length)
  const same = longcut.every((value, index) => value === props.path[index])
  // Navigated out of previous path, reset longest to current
  if (!same) longest.value = props.path
  else if (props.path.length > longcut.length) {
    longest.value = longcut.concat(props.path.slice(longcut.length))
  }
-})
+  else {
-watchEffect(() => {
+    // Prune deleted folders from longest
-  if (links.length) navigate(props.path.length)
+    for (let i = props.path.length; i < longest.value.length; ++i) {
      if (!exists(longest.value.slice(0, i + 1))) {
        longest.value = longest.value.slice(0, i)
        break
      }
    }
  }
  // If needed, focus primary navigation to new location
  if (props.primary) nextTick(() => {
    const act = document.activeElement as HTMLElement
    if (!act || [...links, document.body].includes(act)) focusCurrent()
  })
 })
 </script>
@@ -80,31 +115,36 @@ watchEffect(() => {
  --breadcrumb-transtime: 0.3s;
 }
 .breadcrumb {
  flex: 1 1 auto;
  display: flex;
-  list-style: none;
+  min-width: 20%;
  max-width: 100%;
  min-height: 2em;
  margin: 0;
  padding: 0 1em 0 0;
  overflow: hidden;
 }
 .breadcrumb > a {
  flex: 0 4 auto;
  display: flex;
  align-items: center;
  margin: 0 -0.5em 0 -0.5em;
  padding: 0;
  max-width: 8em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 1.5em;
  color: var(--breadcrumb-color);
  padding: 0.3em 1.5em;
  clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
  transition: all var(--breadcrumb-transtime);
 }
-.breadcrumb a:first-child {
+.breadcrumb > a:first-child {
-  margin-left: 0;
+  flex: 0 0 auto;
-  padding-left: .2em;
+  padding-left: 1.5em;
  padding-right: 1.7em;
  clip-path: none;
 }
-.breadcrumb a:last-child {
+.breadcrumb > a:last-child {
  max-width: none;
  clip-path: polygon(
    0 0,
    calc(100% - 1em) 0,
@@ -115,7 +155,7 @@ watchEffect(() => {
    0 0
  );
 }
-.breadcrumb a:only-child {
+.breadcrumb > a:only-child {
  clip-path: polygon(
    0 0,
    calc(100% - 1em) 0,
@@ -127,9 +167,9 @@ watchEffect(() => {
 }
 .breadcrumb svg {
  /* FIXME: Custom positioning to align it well; needs proper solution */
  padding-left: 0.8em;
  width: 1.3em;
  height: 1.3em;
  margin: -.5em;
  fill: var(--breadcrumb-color);
  transition: fill var(--breadcrumb-transtime);
 }
@@ -149,6 +189,6 @@ watchEffect(() => {
 }
 .breadcrumb a:hover { color: var(--breadcrumb-hover-color) }
 .breadcrumb a:hover svg { fill: var(--breadcrumb-hover-color) }
-.breadcrumb a.current { color: var(--accent-color) }
+.breadcrumb a.current { color: var(--accent-color); max-width: none; flex: 0 1 auto; }
 .breadcrumb a.current svg { fill: var(--accent-color) }
 </style>
--- a/cista-front/src/components/HeaderSelected.vue
+++ b/cista-front/src/components/HeaderSelected.vue
@@ -1,57 +1,52 @@
 <template>
-  <template v-if="documentStore.selected.size">
+  <SvgButton name="download" data-tooltip="Download" @click="download" />
-    <div class="smallgap"></div>
+  <TransferBar :status=progress @cancel=cancelDownloads />
    <p class="select-text">{{ documentStore.selected.size }} selected ➤</p>
    <SvgButton name="download" data-tooltip="Download" @click="download" />
    <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
    <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
    <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
    <button class="action-button unselect" data-tooltip="Unselect all" @click="documentStore.selected.clear()">❌</button>
  </template>
 </template>
 <script setup lang="ts">
-import {connect, controlUrl} from '@/repositories/WS'
+import { useMainStore } from '@/stores/main'
 import { useDocumentStore } from '@/stores/documents'
 import { computed } from 'vue'
 import type { SelectedItems } from '@/repositories/Document'
 import { reactive } from 'vue';
-const documentStore = useDocumentStore()
+const store = useMainStore()
 const props = defineProps({
  path: Array<string>
 })
-const dst = computed(() => props.path!.join('/'))
+const status_init = {
-const op = (op: string, dst?: string) => {
+  total: 0,
-  const sel = documentStore.selectedFiles
+  xfer: 0,
-  const msg = {
+  t0: 0,
-    op,
+  tlast: 0,
-    sel: sel.keys.map(key => {
+  statbytes: 0,
-      const doc = sel.docs[key]
+  statdur: 0,
-      return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  files: [] as string[],
-    })
+  filestart: 0,
-  }
+  fileidx: 0,
-  // @ts-ignore
+  filecount: 0,
-  if (dst !== undefined) msg.dst = dst
+  filename: '',
-  const control = connect(controlUrl, {
+  filesize: 0,
-    message(ev: WebSocmetMessageEvent) {
+  filepos: 0,
-      const res = JSON.parse(ev.data)
+  status: 'idle',
      if ('error' in res) {
        console.error('Control socket error', msg, res.error)
        documentStore.error = res.error.message
        return
      } else if (res.status === 'ack') {
        console.log('Control ack OK', res)
        control.close()
        documentStore.selected.clear()
        return
      } else console.log('Unknown control response', msg, res)
    }
  })
  control.onopen = () => {
    control.send(JSON.stringify(msg))
  }
 }
 const progress = reactive({...status_init})
 setInterval(() => {
  if (Date.now() - progress.tlast > 3000) {
    // Reset
    progress.statbytes = 0
    progress.statdur = 1
  } else {
    // Running average by decay
    progress.statbytes *= .9
    progress.statdur *= .9
  }
 }, 100)
 const statReset = () => {
  Object.assign(progress, status_init)
  progress.t0 = Date.now()
  progress.tlast = progress.t0 + 1
 }
 const cancelDownloads = () => {
  location.reload()  // FIXME
 }
 const linkdl = (href: string) => {
  const a = document.createElement('a')
@@ -64,6 +59,12 @@ const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandl
  let hdir = ''
  let h = handle
  console.log('Downloading to filesystem', sel.recursive)
  for (const [rel, full, doc] of sel.recursive) {
    if (doc.dir) continue
    progress.files.push(rel)
    ++progress.filecount
    progress.total += doc.size
  }
  for (const [rel, full, doc] of sel.recursive) {
    // Create any missing directories
    if (hdir && !rel.startsWith(hdir + '/')) {
@@ -95,30 +96,49 @@ const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandl
    const url = `/files/${rel}`
    console.log('Fetching', url)
    const res = await fetch(url)
-    if (!res.ok)
+    if (!res.ok) {
      store.error = `Failed to download ${url}: ${res.status} ${res.statusText}`
      throw new Error(`Failed to download ${url}: ${res.status} ${res.statusText}`)
    if (res.body) await res.body.pipeTo(writable)
    else {
      // Zero-sized files don't have a body, so we need to create an empty file
      await writable.truncate(0)
      await writable.close()
    }
    if (res.body) {
      ++progress.fileidx
      const reader = res.body.getReader()
      await writable.truncate(0)
      store.error = "Direct download."
      progress.tlast = Date.now()
      while (true) {
        const { value, done } = await reader.read()
        if (done) break
        await writable.write(value)
        const now = Date.now()
        const size = value.byteLength
        progress.xfer += size
        progress.filepos += size
        progress.statbytes += size
        progress.statdur += now - progress.tlast
        progress.tlast = now
      }
    }
    await writable.close()
    console.log('Saved', hdir + name)
  }
  statReset()
 }
 const download = async () => {
-  const sel = documentStore.selectedFiles
+  const sel = store.selectedFiles
  console.log('Download', sel)
  if (sel.keys.length === 0) {
    console.warn('Attempted download but no files found. Missing selected keys:', sel.missing)
-    documentStore.selected.clear()
+    store.error = 'No existing files selected'
    store.selected.clear()
    return
  }
  // Plain old a href download if only one file (ignoring any folders)
  const files = sel.recursive.filter(([rel, full, doc]) => !doc.dir)
  if (files.length === 1) {
-    documentStore.selected.clear()
+    store.selected.clear()
    store.error = "Single file via browser downloads"
    return linkdl(`/files/${files[0][1]}`)
  }
  // Use FileSystem API if multiple files and the browser supports it
@@ -129,25 +149,23 @@ const download = async () => {
        startIn: 'downloads',
        mode: 'readwrite'
      })
-      filesystemdl(sel, handle).then(() => {
+      await filesystemdl(sel, handle)
-        documentStore.selected.clear()
+      store.selected.clear()
      })
      return
    } catch (e) {
      console.error('Download to folder aborted', e)
    }
  }
  // Otherwise, zip and download
-  linkdl(`/zip/${Array.from(sel.keys).join('+')}/download.zip`)
+  console.log("Falling back to zip download")
-  documentStore.selected.clear()
+  const name = sel.keys.length === 1 ? sel.docs[sel.keys[0]].name : 'download'
  linkdl(`/zip/${Array.from(sel.keys).join('+')}/${name}.zip`)
  store.error = "Downloading as ZIP via browser downloads"
  store.selected.clear()
 }
 </script>
-<style>
+<style scoped>
-.select-text {
+
  color: var(--accent-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 </style>
--- a/frontend/src/components/EmptyFolder.vue
+++ b/frontend/src/components/EmptyFolder.vue
@@ -0,0 +1,38 @@
 <template>
  <div v-if="!props.path || documents.length === 0" class="empty-container">
    <component :is="cog" class="cog"/>
    <p v-if="!store.connected">No Connection</p>
    <p v-else-if="store.document.length === 0">Waiting for File List</p>
    <p v-else-if="store.query">No matches!</p>
    <p v-else-if="!exists(props.path)">Folder not found</p>
    <p v-else>Empty folder</p>
  </div>
 </template>
 <script setup lang="ts">
 import { defineProps } from 'vue'
 import { useMainStore } from '@/stores/main'
 import cog from '@/assets/svg/cog.svg'
 import { exists } from '@/utils/fileutil'
 const store = useMainStore()
 const props = defineProps<{
  path: string[],
  documents: Document[],
 }>()
 </script>
 <style scoped>
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
 svg.cog {
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
  animation: rotate 10s linear infinite;
  filter: drop-shadow(0 0 1rem black);
  fill: #888;
 }
 </style>
--- 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,94 +15,50 @@
      <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, index) in sortedDocuments"
        :key="doc.key">
        <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
          <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
        </tr>
        <tr
          :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: cursor === doc }"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-          @click="cursor = cursor === doc ? null : doc"
+          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
          @contextmenu.prevent="contextMenu($event, doc)"
        >
-          <td class="selection" @click.up.stop="cursor = cursor === doc ? doc : null">
+          <td class="selection" @click.up.stop="store.cursor = store.cursor === doc.key ? doc.key : ''">
            <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
+              <a :href=doc.url tabindex=-1 @contextmenu.stop @focus.stop="store.cursor = doc.key">
-                :href="url_for(doc)"
+                {{ doc.name }}
-                tabindex="-1"
+              </a>
-                @contextmenu.prevent
+              <button tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
                @focus.stop="cursor = doc"
                @blur="ev => { if (!editing) cursor = null }"
                @keyup.left="router.back()"
                @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                >{{ doc.name }}</a
              >
              <button
                v-if="cursor == doc"
                class="rename-button"
                @click="() => (editing = doc)"
              >
                🖊️
              </button>
            </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>
@@ -136,35 +69,27 @@
      </tr>
    </tbody>
  </table>
  <div v-else class="empty-container">Nothing to see here</div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watchEffect } 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 { 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'
-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 p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
  return doc.dir ? `#/${p}/` : `/files/${p}`
 }
 const cursor = ref<Document | null>(null)
 // File rename
-const editing = 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 = connect(controlUrl, {
    message(ev: MessageEvent) {
@@ -188,75 +113,69 @@ const rename = (doc: Document, newName: string) => {
  }
  doc.name = newName // We should get an update from watch but this is quicker
 }
 const sortedDocuments = computed(() => sorted(props.documents as Document[]))
 const showFolderBreadcrumb = (i: number) => {
  const docs = sortedDocuments.value
  const docloc = docs[i].loc
  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
 }
 defineExpose({
  newFolder() {
-    const now = 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: '',
    }
    console.log("New")
  },
  toggleSelectAll() {
    console.log('Select')
    allSelected.value = !allSelected.value
  },
  toggleSortColumn(column: number) {
    const columns = ['', 'name', 'modified', 'size', '']
    toggleSort(columns[column])
  },
  isCursor() {
-    return cursor.value !== null && editing.value === null
+    return store.cursor && editing.value === null
  },
  cursorRename() {
-    editing.value = cursor.value
+    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
  },
  cursorSelect() {
-    const doc = cursor.value
+    const key = store.cursor
-    if (!doc) return
+    if (!key) return
-    if (documentStore.selected.has(doc.key)) {
+    if (store.selected.has(key)) {
-      documentStore.selected.delete(doc.key)
+      store.selected.delete(key)
    } else {
-      documentStore.selected.add(doc.key)
+      store.selected.add(key)
    }
-    this.cursorMove(1)
+    this.cursorMove(1, null)
  },
-  cursorMove(d: number, select = false) {
+  up(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
  down(ev: KeyboardEvent) { this.cursorMove(1, ev) },
  left(ev: KeyboardEvent) { router.back() },
  right(ev: KeyboardEvent) {
    const a = document.querySelector(`#file-${store.cursor} a`) as HTMLAnchorElement | null
    if (a) a.click()
  },
  cursorMove(d: number, ev: KeyboardEvent | null) {
    const select = !!ev?.shiftKey
    // Move cursor up or down (keyboard navigation)
-    const documents = sortedDocuments.value
+    const docs = props.documents
-    if (documents.length === 0) {
+    if (docs.length === 0) {
-      cursor.value = null
+      store.cursor = ''
      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
+      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : docs.length
    const moveto = increment(index, d)
-    cursor.value = documents[moveto] ?? null
+    store.cursor = docs[moveto]?.key ?? ''
-    const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
+    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
    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
@@ -278,22 +197,36 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (cursor.value && cursor.value !== editing.value) editing.value = null
+  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
-  if (editing.value) cursor.value = editing.value
+  if (editing.value) store.cursor = editing.value?.key
-  if (cursor.value) {
+  if (store.cursor) {
    const a = document.querySelector(
-      `#file-${cursor.value.key} .name a`
+      `#file-${store.cursor} .name a`
    ) as HTMLAnchorElement | null
    if (a) a.focus()
  }
 })
 watchEffect(() => {
-  if (!props.documents.length && cursor.value) {
+  if (!props.documents.length && store.cursor) {
-    cursor.value = null
+    store.cursor = ''
    focusBreadcrumb()
  }
 })
-const mkdir = (doc: Document, name: string) => {
+let nowkey = ref(0)
 let modifiedTimer: any = null
 const updateModified = () => {
  nowkey.value = Math.floor(Date.now() / 1000)
 }
 onMounted(() => {
  updateModified(); modifiedTimer = setInterval(updateModified, 1000)
  const active = document.querySelector('.cursor') as HTMLElement | null
  if (active) {
    active.scrollIntoView({ block: 'center', behavior: 'instant' })
    active.focus()
  }
 })
 onUnmounted(() => { clearInterval(modifiedTimer) })
 const mkdir = (doc: Doc, name: string) => {
  const control = connect(controlUrl, {
    open() {
      control.send(
@@ -310,34 +243,24 @@ const mkdir = (doc: Document, name: string) => {
        editing.value = null
      } else {
        console.log('mkdir', msg)
-        router.push(`/${doc.loc}/${name}/`)
+        router.push(doc.urlrouter)
      }
    }
  })
-  doc.name = name // We should get an update from watch but this is quicker
+  // We should get an update from watch but this is quicker
  doc.name = name
  doc.key = crypto.randomUUID()
 }
-
+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
    )
  },
@@ -348,16 +271,16 @@ const allSelected = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
-      props.documents.every((doc: Document) => documentStore.selected.has(doc.key))
+      props.documents.every((doc: Doc) => store.selected.has(doc.key))
    )
  },
  set: (value: boolean) => {
    console.log('Setting allSelected', value)
    for (const doc of props.documents) {
      if (value) {
-        documentStore.selected.add(doc.key)
+        store.selected.add(doc.key)
      } else {
-        documentStore.selected.delete(doc.key)
+        store.selected.delete(doc.key)
      }
    }
  }
@@ -365,9 +288,13 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
-const contextMenu = (ev: Event, doc: Document) => {
+const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  cursor.value = doc
+  store.cursor = doc.key
-  console.log('Context menu', ev, doc)
+  ContextMenu.showContextMenu({
    x: ev.x, y: ev.y, items: [
      { label: 'Rename', onClick: () => { editing.value = doc } },
    ],
  })
 }
 </script>
@@ -385,29 +312,36 @@ tbody tr {
  position: relative;
  z-index: auto;
 }
-table thead input[type='checkbox'] {
+table thead .selection input[type='checkbox'] {
  position: inherit;
-  width: 1em;
+  width: 1rem;
-  height: 1em;
+  height: 1rem;
-  padding: 0.5rem 0.5em;
+  padding: 0;
  margin: auto;
 }
-table tbody input[type='checkbox'] {
+table tbody .selection input[type='checkbox'] {
  width: 2rem;
  height: 2rem;
 }
 table .selection {
-  width: 2rem;
+  width: 3rem;
  text-align: center;
  text-overflow: clip;
  padding: 0;
 }
 table .selection input {
  margin: auto;
 }
 table .modified {
-  width: 8em;
+  width: 10rem;
  text-overflow: clip;
 }
 table .size {
-  width: 5em;
+  width: 7rem;
  text-overflow: clip;
 }
 table .menu {
-  width: 1rem;
+  width: 2rem;
 }
 tbody td {
  font-size: 1.2rem;
@@ -442,7 +376,7 @@ table td {
  }
 }
 thead tr {
-  font-size: var(--header-font-size);
+  font-size: 0.8rem;
  background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
  color: #000;
  box-shadow: 0 0 .2rem black;
@@ -463,9 +397,11 @@ tbody tr.cursor {
  padding-right: 1.5rem;
 }
 .sortcolumn::after {
  font-size: 1rem;
  content: '▸';
  color: #888;
-  margin-left: 0.5em;
+  margin-left: 0.5rem;
  margin-top: -.2rem;
  position: absolute;
  transition: all var(--transition-time) linear;
 }
@@ -515,3 +451,4 @@ tbody .selection input {
  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;
@@ -56,4 +56,10 @@ input#FileRenameInput {
  outline: none;
  font: inherit;
 }
 .gallery input#FileRenameInput {
  padding: .75em;
  font-weight: 600;
  width: auto;
 }
 </style>
--- 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/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@@ -0,0 +1,259 @@
 <template>
  <div v-if="props.documents.length || editing" class="gallery" ref="gallery">
    <GalleryFigure v-if="editing?.key === 'new'" :doc="editing" :key=editing.key :editing="{rename: mkdir, exit}" />
    <template v-for="(doc, index) in documents" :key=doc.key>
      <GalleryFigure :doc=doc :editing="editing === doc ? {rename, exit} : null">
        <BreadCrumb v-if=showFolderBreadcrumb(index) :path="doc.loc ? doc.loc.split('/') : []" class="folder-change"/>
      </GalleryFigure>
    </template>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
 import { connect, controlUrl } from '@/repositories/WS'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import type { SortOrder } from '@/utils/docsort'
 const props = defineProps<{
  path: Array<string>
  documents: Doc[]
 }>()
 const store = useMainStore()
 const router = useRouter()
 // File rename
 const editing = shallowRef<Doc | null>(null)
 const exit = () => { editing.value = null }
 const rename = (doc: Doc, newName: string) => {
  const oldName = doc.name
  const control = connect(controlUrl, {
    message(ev: MessageEvent) {
      const msg = JSON.parse(ev.data)
      if ('error' in msg) {
        console.error('Rename failed', msg.error.message, msg.error)
        doc.name = oldName
      } else {
        console.log('Rename succeeded', msg)
      }
    }
  })
  control.onopen = () => {
    control.send(
      JSON.stringify({
        op: 'rename',
        path: `${doc.loc}/${oldName}`,
        to: newName
      })
    )
  }
  doc.name = newName // We should get an update from watch but this is quicker
 }
 const gallery = ref<HTMLElement>()
 const columns = computed(() => {
  if (!gallery.value) return 1
  return getComputedStyle(gallery.value).gridTemplateColumns.split(' ').length
 })
 defineExpose({
  newFolder() {
    const now = Math.floor(Date.now() / 1000)
    editing.value = new Doc({
      loc: loc.value,
      key: 'new',
      name: 'New Folder',
      dir: true,
      mtime: now,
      size: 0,
    })
  },
  toggleSelectAll() {
    console.log('Select')
    allSelected.value = !allSelected.value
  },
  toggleSortColumn(column: number) {
    const order = ['', 'name', 'modified', 'size', ''][column]
    if (order) store.toggleSort(order as SortOrder)
  },
  isCursor() {
    return store.cursor && editing.value === null
  },
  cursorRename() {
    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
  },
  cursorSelect() {
    const key = store.cursor
    if (!key) return
    if (store.selected.has(key)) {
      store.selected.delete(key)
    } else {
      store.selected.add(key)
    }
    this.cursorMove(1, null)
  },
  up(ev: KeyboardEvent) { this.cursorMove(-columns.value, ev) },
  down(ev: KeyboardEvent) { this.cursorMove(columns.value, ev) },
  left(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
  right(ev: KeyboardEvent) { this.cursorMove(1, ev) },
  cursorMove(d: number, ev: KeyboardEvent | null) {
    const select = !!ev?.shiftKey
    // Move cursor up or down (keyboard navigation)
    const docs = props.documents
    if (docs.length === 0) {
      store.cursor = ''
      return
    }
    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 =
      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : N
    // Stop navigation sideways away from the grid (only with up/down)
    if (ev && index === 0 && ev.key === "ArrowLeft") return
    if (ev && index === N - 1 && ev.key === "ArrowRight") return
    // Calculate new position
    let moveto
    if (index === N) moveto = d > 0 ? 0 : N - 1
    else {
      moveto = increment(index, d)
      // Wrapping either end, just land outside the list
      if (Math.abs(d) >= N || Math.sign(d) !== Math.sign(moveto - index)) moveto = N
    }
    store.cursor = docs[moveto]?.key ?? ''
    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
    if (select) {
      // Go forwards, possibly wrapping over the end; the last entry is not toggled
      let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
      for (let p = begin; p !== end; p = increment(p, 1)) {
        if (p === N) continue
        const key = docs[p].key
        if (store.selected.has(key)) store.selected.delete(key)
        else store.selected.add(key)
      }
    }
    // @ts-ignore
    scrolltr = tr
    if (!scrolltimer) {
      scrolltimer = setTimeout(() => {
        if (scrolltr)
          scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
        scrolltimer = null
      }, 300)
    }
    if (moveto === N) focusBreadcrumb()
  }
 })
 const focusBreadcrumb = () => {
  const el = document.querySelector('.breadcrumb') as HTMLElement | null
  if (el) el.focus()
 }
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
  if (editing.value) store.cursor = editing.value.key
  if (store.cursor) {
    const a = document.querySelector(`#file-${store.cursor}`) as HTMLAnchorElement | null
    if (a) { a.focus(); a.scrollIntoView({ block: 'center', behavior: 'smooth' }) }
  }
 })
 watchEffect(() => {
  if (!props.documents.length && store.cursor) {
    store.cursor = ''
    focusBreadcrumb()
  }
 })
 onMounted(() => {
  const active = document.querySelector('.cursor') as HTMLElement | null
  if (active) {
    active.scrollIntoView({ block: 'center', behavior: 'instant' })
    active.focus()
  }
 })
 const mkdir = (doc: Doc, name: string) => {
  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)
      }
    }
  })
  // We should get an update from watch but this is quicker
  doc.name = name
  doc.key = crypto.randomUUID()
 }
 const showFolderBreadcrumb = (i: number) => {
  const docs = props.documents
  const docloc = docs[i].loc
  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
 }
 const selectionIndeterminate = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
      !allSelected.value
    )
  },
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  set: (value: boolean) => {}
 })
 const allSelected = computed({
  get: () => {
    return (
      props.documents.length > 0 &&
      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) {
        store.selected.add(doc.key)
      } else {
        store.selected.delete(doc.key)
      }
    }
  }
 })
 const loc = computed(() => props.path.join('/'))
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
  store.cursor = doc.key
  ContextMenu.showContextMenu({
    x: ev.x, y: ev.y, items: [
      { label: 'Rename', onClick: () => { editing.value = doc } },
    ],
  })
 }
 </script>
 <style scoped>
 .gallery {
  padding: 1em;
  width: 100%;
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-template-rows: repeat(minmax(auto, 15em));
  align-items: end;
 }
 .breadcrumb {
  border-radius: .5em;
 }
 </style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leo Vasanko	0965a56204	Download progress bar	2023-11-20 16:27:51 -08:00
Leo Vasanko	52beedcef0	Preserve cursor and selection across reloads.	2023-11-20 14:49:15 -08:00
Leo Vasanko	8592d462f2	Keep current cursor when switching gallery/details.	2023-11-20 14:11:05 -08:00
Leo Vasanko	b2a24fca57	Fixed renames and breadcrumbs for gallery.	2023-11-20 13:47:41 -08:00
Leo Vasanko	7cc7e32c33	Prune deleted folders off of breadcrumbs' longest visited (keeps current folder even if missing).	2023-11-20 12:22:03 -08:00
Leo Vasanko	fa98cb9177	Refactor empty folder to a separate component, allow creating new folders in empty folders again.	2023-11-20 12:08:17 -08:00
Leo Vasanko	b3ab09a614	Don't let global shortcuts interfere with input fields.	2023-11-20 11:45:47 -08:00
Leo Vasanko	a49dd2f111	Further bugfixes. Increase full update interval to 5 minutes.	2023-11-20 19:22:49 +00:00
Leo Vasanko	dbb06e111c	Rewritten inotify watching and faster full tree traversal (also for polling worker). Bugs in inotify watcher fixed.	2023-11-20 18:49:24 +00:00
Leo Vasanko	667e31aa08	Fix regression: inotify watching was broken.	2023-11-20 13:58:20 +00:00
Leo Vasanko	007f021d6f	Small fixes	2023-11-20 12:58:39 +00:00
Leo Vasanko	b2188eee68	Avoid showing dialogs at page load.	2023-11-20 12:45:29 +00:00
Leo Vasanko	7311ffdff1	Implement settings dialog and password changes.	2023-11-20 04:29:42 -08:00
Leo Vasanko	102a970174	Gallery improvements, better layout and autoplay of next media file.	2023-11-20 01:51:34 -08:00
Leo Vasanko	a9d713dbd0	More robust and flexible layout.	2023-11-18 21:55:52 -08:00
Leo Vasanko	434e55f303	Video preview posters	2023-11-18 17:50:27 -08:00
Leo Vasanko	be9772c90e	Minor changes	2023-11-18 16:03:23 -08:00
Leo Vasanko	bb2448dc24	Add pymupdf/fitz dependency	2023-11-18 15:21:11 -08:00
Leo Vasanko	115f3e20d0	Added PDF previews. Preview quality configurable. Preview browser caching and cache busting.	2023-11-18 15:16:24 -08:00
Leo Vasanko	a366a0bcc6	Improve Gallery keyboard navigation	2023-11-18 12:37:48 -08:00
Leo Vasanko	2ff0f78759	Remove new folder button until implemented in gallery	2023-11-18 12:26:38 -08:00
Leo Vasanko	9a2d6e8065	Fix theming of filenames in gallery light mode.	2023-11-18 12:25:08 -08:00
Leo Vasanko	62388eb555	Fix preview images that need rotation	2023-11-18 12:04:35 -08:00
Leo Vasanko	53778543bf	Remove debug	2023-11-18 11:47:01 -08:00
Leo Vasanko	8dda230510	Add PIL dependency	2023-11-18 11:40:34 -08:00
Leo Vasanko	696e3ab568	Implement media preview thumbnails for Gallery	2023-11-18 11:38:25 -08:00
Leo Vasanko	85ac12ad33	Fix empty folder / folder missing for empty folders at root	2023-11-18 10:22:07 -08:00
Leo Vasanko	e56cc47105	Large number of keyboard navigation and other fixes.	2023-11-18 10:15:13 -08:00
Leo Vasanko	ebbd96bc94	Global shortcut keys tuning.	2023-11-18 07:56:53 -08:00
Leo Vasanko	a9b6d04361	Remove defineProps imports (it is a compiler macro now).	2023-11-18 07:47:55 -08:00
Leo Vasanko	5808fe17ad	Fix cursor handling	2023-11-18 07:47:34 -08:00
Leo Vasanko	671359e327	Search placeholder	2023-11-18 07:39:08 -08:00
Leo Vasanko	ba9495eb65	File explorer CSS, avoid modified/size being cut	2023-11-18 07:33:50 -08:00
Leo Vasanko	de482afd60	Improved breadcrumb scaling	2023-11-18 07:00:55 -08:00
Leo Vasanko	a547052e29	Added header eye button for gallery toggle	2023-11-18 07:00:46 -08:00
Leo Vasanko	07c2ff4c15	Keyboard sort by 1-2-3 supplemented by the key left of them for default sort.	2023-11-18 06:32:25 -08:00
Leo Vasanko	e20b04189f	Refactoring cursor to be stored in store as key only. A few issues remain.	2023-11-17 19:44:18 -08:00
Leo Vasanko	8da141744e	Implemented Gallery view for media files.	2023-11-17 18:32:24 -08:00
Leo Vasanko	11887edde3	Skip any symlinks while scanning. Stats on how long a scan took.	2023-11-17 17:49:35 -08:00
Leo Vasanko	034c6fdea9	Fixed header and breadcrumb layout and issues.	2023-11-17 16:16:53 -08:00
Leo Vasanko	c5083f0f2b	Correct error page rendering via Sanic.	2023-11-17 09:20:14 -08:00
Leo Vasanko	f8a9197474	Tidying up log, correct HTTP status for error pages.	2023-11-16 17:10:18 -08:00
Leo Vasanko	5285cb2fb5	Watching cleanup	2023-11-16 09:17:50 -08:00
Leo Vasanko	b6b387d09b	Code cleanup and bugfixes: - Resolve threading deadlock when multiple watch request arrived at the same moment. - Implement more graceful server exit. - Reduce excessive logging. - Fix unix socket clearing; until Sanic starts accepting Path for unix socket name.	2023-11-16 07:09:57 -08:00
Leo Vasanko	669762dfe7	Update documentation README	2023-11-16 07:07:52 -08:00
Leo Vasanko	51fd07d4fa	Update frontend/README.md	2023-11-14 23:50:17 +00:00
Leo Vasanko	c40c245ce6	CLI simplification, better diagnostic for missing wwwroot, docs.	2023-11-14 11:05:04 -08:00
Leo Vasanko	1fdd00b833	Updated installation and README	2023-11-14 08:00:21 -08:00
Leo Vasanko	520a9dff47	Keyboard nav: 1/2/3 globally toggle table ordering. Esc closes search, slash also toggles search like Ctrl/Cmd+F does.	2023-11-14 05:55:55 -08:00
Leo Vasanko	c5c65d136a	BreadCrumb & keyboard navigation improvements.	2023-11-14 05:43:01 -08:00
Leo Vasanko	61f9026e23	Attempt to fix config handling on Windows	2023-11-13 16:31:35 -08:00
Leo Vasanko	3e50149d4d	Add more quit points for watching thread.	2023-11-13 16:28:53 -08:00
Leo Vasanko	7077b21159	Add frontend build to Python packaging. Remove dead code, cleanup.	2023-11-13 16:19:33 -08:00
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>`