Fix typing and import in the config file module.

Startup banner with version display, and --version, using stderr/stdout properly.
Cleaner server shutdowns:
2025-08-17 10:31:54 -06:00 · 2025-08-17 10:31:18 -06:00 · 2025-08-17 08:15:01 -06:00 · 2025-08-17 07:00:52 -06:00 · 2025-08-15 11:11:57 -06:00 · 2025-08-15 18:03:04 +01:00
46 changed files with 1657 additions and 747 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 .*
+*.lock
 !.gitignore
 __pycache__/
 *.egg-info/
--- a/README.md
+++ b/README.md
@ -6,6 +6,8 @@ Cista takes its name from the ancient *cistae*, metal containers used by Greeks

 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**.

+**Built-in document and media previews** let you quickly view files without downloading them. Cista shows PDF and other documents, video and image thumbnails, with **HDR10 support** video previews and image formats, including HEIC and AVIF. It also has a player for music and video files.
+
 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.

 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.
@ -14,39 +16,31 @@ Experience Cista by visiting [Cista Demo](https://drop.zi.fi) for a test run and


 ## Getting Started
-### Installation
-
-To install the cista application, use:
-
-```fish
-pip install cista
-```
-
-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)
+We recommend using [UV](https://docs.astral.sh/uv/getting-started/installation/) to directly run Cista:
+
+Create an account: (otherwise the server is public for all)
 ```fish
-cista --user yourname --privileged
+uvx cista --user yourname --privileged
 ```

 Serve your files at http://localhost:8000:
 ```fish
-cista -l :8000 /path/to/files
+uvx cista -l :8000 /path/to/files
+```
+
+Alternatively, you can install with `pip` or `uv pip`. This enables using the `cista` command directly without `uvx` or `uv run`.
+
+```fish
+pip install cista --break-system-packages
 ```

 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.
+Most admins 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`:

@ -56,33 +50,13 @@ cista.example.com {
 }
 ```

-## 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.
+Nxing or other proxy may be similarly used, or alternatively you can place cert and key in cista config dir and run `cista -l cista.example.com`

 ## 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.
+Assuming a restricted user account `storage` for serving files and that UV is installed system-wide or on this account. Only UV is required: this does not use git or bun/npm.

 Create `/etc/systemd/system/cista@.service`:

@ -92,7 +66,7 @@ Description=Cista storage %i

 [Service]
 User=storage
-ExecStart=cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
+ExecStart=uvx cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
 Restart=always

 [Install]
@ -116,3 +90,34 @@ foo.example.com, bar.example.com {
    reverse_proxy unix//srv/cista/{host}/socket
 }
 ```
+
+## 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.
+
+Make sure you have git, uv and bun (or npm) installed.
+
+Backend (Python) – setup and run:
+
+```fish
+git clone https://git.zi.fi/Vasanko/cista-storage.git
+cd cista-storage
+uv sync --dev
+uv run cista --dev -l :8000 /path/to/files
+```
+
+Frontend (Vue/Vite) – run the dev server in another terminal:
+
+```fish
+cd frontend
+bun install
+bun run dev
+```
+
+Building the package for release (frontend + Python wheel/sdist):
+
+```fish
+uv build
+```
+
+Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python package. `uv build` runs the project build hooks to bundle the frontend and produce a NodeJS-independent Python package.
--- a/cista/main.py
+++ b/cista/main.py
@ -1,3 +1,4 @@
+import os
 import sys
 from pathlib import Path

@ -9,8 +10,24 @@ from cista.util import pwgen

 del app, server80.app  # Only import needed, for Sanic multiprocessing

-doc = f"""Cista {cista.__version__} - A file storage for the web.

+def create_banner():
+    """Create a framed banner with the Cista version."""
+    title = f"Cista {cista.__version__}"
+    subtitle = "A file storage for the web"
+    width = max(len(title), len(subtitle)) + 4
+
+    return f"""\
+╭{"─" * width}╮
+│{title:^{width}}│
+│{subtitle:^{width}}│
+╰{"─" * width}╯
+"""
+
+
+banner = create_banner()
+
+doc = """\
 Usage:
  cista [-c <confdir>] [-l <host>] [--import-droppy] [--dev] [<path>]
  cista [-c <confdir>] --user <name> [--privileged] [--password]
@ -34,6 +51,14 @@ User management:
  --password        Reset password
 """

+first_time_help = """\
+No config file found! Get started with:
+  cista --user yourname --privileged     # If you want user accounts
+  cista -l :8000 /path/to/files          # Run the server on localhost:8000
+
+See cista --help for other options!
+"""
+

 def main():
    # Dev mode doesn't catch exceptions
@ -43,11 +68,19 @@ def main():
    try:
        return _main()
    except Exception as e:
-        print("Error:", e)
+        sys.stderr.write(f"Error: {e}\n")
        return 1


 def _main():
+    # The banner printing differs by mode, and needs to be done before docopt() printing its messages
+    if any(arg in sys.argv for arg in ("--help", "-h")):
+        sys.stdout.write(banner)
+    elif "--version" in sys.argv:
+        sys.stdout.write(f"cista {cista.__version__}\n")
+        return 0
+    else:
+        sys.stderr.write(banner)
    args = docopt(doc)
    if args["--user"]:
        return _user(args)
@ -65,13 +98,7 @@ def _main():
    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 one of:\n"
-            "  cista --user yourname --privileged\n"
-            "  cista --import-droppy\n"
-            "  cista -l :8000 /path/to/files\n"
-        )
+        sys.stderr.write(first_time_help)
        return 1
    settings = {}
    if import_droppy:
@ -92,7 +119,7 @@ def _main():
        # We have no users, so make it public
        settings["public"] = True
    operation = config.update_config(settings)
-    print(f"Config {operation}: {config.conffile}")
+    sys.stderr.write(f"Config {operation}: {config.conffile}\n")
    # Prepare to serve
    unix = None
    url, _ = serve.parse_listen(config.config.listen)
@ -102,7 +129,7 @@ def _main():
    dev = args["--dev"]
    if dev:
        extra += " (dev mode)"
-    print(f"Serving {config.config.path} at {url}{extra}")
+    sys.stderr.write(f"Serving {config.config.path} at {url}{extra}\n")
    # Run the server
    serve.run(dev=dev)
    return 0
@ -117,7 +144,8 @@ def _confdir(args):
                raise ValueError("Config path is not a directory")
            # Accidentally pointed to the db.toml, use parent
            confdir = confdir.parent
-        config.conffile = confdir / config.conffile.name
+        os.environ["CISTA_HOME"] = confdir.as_posix()
+    config.init_confdir()  # Uses environ if available


 def _user(args):
@ -134,7 +162,7 @@ def _user(args):
                "public": False,
            }
        )
-        print(f"Config {operation}: {config.conffile}\n")
+        sys.stderr.write(f"Config {operation}: {config.conffile}\n\n")

    name = args["--user"]
    if not name or not name.isidentifier():
@ -152,12 +180,12 @@ def _user(args):
        changes["password"] = pw = pwgen.generate()
        info += f"\n  Password: {pw}\n"
    res = config.update_user(name, changes)
-    print(info)
+    sys.stderr.write(f"{info}\n")
    if res == "read":
-        print("  No changes")
+        sys.stderr.write("  No changes\n")

    if operation == "created":
-        print(
+        sys.stderr.write(
            "Now you can run the server:\n  cista    # defaults set: -l :8000 ~/Downloads\n"
        )

--- a/cista/api.py
+++ b/cista/api.py
@ -119,8 +119,12 @@ async def watch(req, ws):
        # Send updates
        while True:
            await ws.send(await q.get())
+    except RuntimeError as e:
+        if str(e) == "cannot schedule new futures after shutdown":
+            return  # Server shutting down, drop the WebSocket
+        raise
    finally:
-        del watching.pubsub[uuid]
+        watching.pubsub.pop(uuid, None)  # Remove whether it got added yet or not


 def subscribe(uuid, ws):
--- a/cista/app.py
+++ b/cista/app.py
@ -3,6 +3,7 @@ import datetime
 import mimetypes
 import threading
 from concurrent.futures import ThreadPoolExecutor
+from multiprocessing import cpu_count
 from pathlib import Path, PurePath, PurePosixPath
 from stat import S_IFDIR, S_IFREG
 from urllib.parse import unquote
@ -11,9 +12,10 @@ 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 logger
+from setproctitle import setproctitle
 from stream_zip import ZIP_AUTO, stream_zip

 from cista import auth, config, preview, session, watching
@ -30,20 +32,27 @@ app.blueprint(bp)
 app.exception(Exception)(handle_sanic_exception)


+setproctitle("cista-main")
+
+
@app.before_server_start
 async def main_start(app, loop):
    config.load_config()
+    setproctitle(f"cista {config.config.path.name}")
+    workers = max(2, min(8, cpu_count()))
    app.ctx.threadexec = ThreadPoolExecutor(
-        max_workers=8, thread_name_prefix="cista-ioworker"
+        max_workers=workers, thread_name_prefix="cista-ioworker"
    )
-    await watching.start(app, loop)
+    watching.start(app, loop)


-@app.after_server_stop
+# Sanic sometimes fails to execute after_server_stop, so we do it before instead (potentially interrupting handlers)
+@app.before_server_stop
 async def main_stop(app, loop):
    quit.set()
-    await watching.stop(app, loop)
+    watching.stop(app)
    app.ctx.threadexec.shutdown()
+    logger.debug("Cista worker threads all finished")


@app.on_request
@ -198,6 +207,12 @@ async def wwwroot(req, path=""):
    return raw(data, headers=headers)


+@app.route("/favicon.ico", methods=["GET", "HEAD"])
+async def favicon(req):
+    # Browsers keep asking for it when viewing files (not HTML with icon link)
+    return redirect("/assets/logo-97d1d7eb.svg", status=308)
+
+
 def get_files(wanted: set) -> list[tuple[PurePosixPath, Path]]:
    loc = PurePosixPath()
    idx = 0
--- a/cista/auth.py
+++ b/cista/auth.py
@ -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,13 +1,17 @@
 from __future__ import annotations

+import os
 import secrets
 import sys
+from contextlib import suppress
 from functools import wraps
 from hashlib import sha256
 from pathlib import Path, PurePath
-from time import time
+from time import sleep, time
+from typing import Callable, Concatenate, Literal, ParamSpec

 import msgspec
+import msgspec.toml


 class Config(msgspec.Struct):
@ -20,6 +24,13 @@ class Config(msgspec.Struct):
    links: dict[str, Link] = {}


+# Typing: arguments for config-modifying functions
+P = ParamSpec("P")
+ResultStr = Literal["modified", "created", "read"]
+RawModifyFunc = Callable[Concatenate[Config, P], Config]
+ModifyPublic = Callable[P, ResultStr]
+
+
 class User(msgspec.Struct, omit_defaults=True):
    privileged: bool = False
    hash: str = ""
@ -32,8 +43,24 @@ class Link(msgspec.Struct, omit_defaults=True):
    expires: int = 0


-config = None
-conffile = Path.home() / ".local/share/cista/db.toml"
+# Global variables - initialized during application startup
+config: Config
+conffile: Path
+
+
+def init_confdir() -> None:
+    global conffile
+    if p := os.environ.get("CISTA_HOME"):
+        home = Path(p)
+    else:
+        xdg = os.environ.get("XDG_CONFIG_HOME")
+        home = (
+            Path(xdg).expanduser() / "cista" if xdg else Path.home() / ".config/cista"
+        )
+    if not home.is_dir():
+        home.mkdir(parents=True, exist_ok=True)
+        home.chmod(0o700)
+    conffile = home / "db.toml"


 def derived_secret(*params, len=8) -> bytes:
@ -59,10 +86,10 @@ def dec_hook(typ, obj):
    raise TypeError


-def config_update(modify):
+def config_update(
+    modify: RawModifyFunc,
+) -> ResultStr | Literal["collision"]:
    global config
-    if not conffile.exists():
-        conffile.parent.mkdir(parents=True, exist_ok=True)
    tmpname = conffile.with_suffix(".tmp")
    try:
        f = tmpname.open("xb")
@ -76,12 +103,8 @@ def config_update(modify):
            old = conffile.read_bytes()
            c = msgspec.toml.decode(old, type=Config, dec_hook=dec_hook)
        except FileNotFoundError:
-            # No existing config file, make sure we have a folder...
-            confdir = conffile.parent
-            confdir.mkdir(parents=True, exist_ok=True)
-            confdir.chmod(0o700)
            old = b""
-            c = None
+            c = Config(path=Path(), listen="", secret=secrets.token_hex(12))
        c = modify(c)
        new = msgspec.toml.encode(c, enc_hook=enc_hook)
        if old == new:
@ -92,7 +115,9 @@ def config_update(modify):
        f.write(new)
        f.close()
        if sys.platform == "win32":
-            conffile.unlink()  # Windows doesn't support atomic replace
+            # Windows doesn't support atomic replace
+            with suppress(FileNotFoundError):
+                conffile.unlink()
        tmpname.rename(conffile)  # Atomic replace
    except:
        f.close()
@ -102,17 +127,23 @@ def config_update(modify):
    return "modified" if old else "created"


-def modifies_config(modify):
-    """Decorator for functions that modify the config file"""
+def modifies_config(
+    modify: Callable[Concatenate[Config, P], Config],
+) -> Callable[P, ResultStr]:
+    """Decorator for functions that modify the config file
+
+    The decorated function takes as first arg Config and returns it modified.
+    The wrapper handles atomic modification and returns a string indicating the result.
+    """

    @wraps(modify)
-    def wrapper(*args, **kwargs):
-        def m(c):
+    def wrapper(*args: P.args, **kwargs: P.kwargs) -> ResultStr:
+        def m(c: Config) -> Config:
            return modify(c, *args, **kwargs)

        # Retry modification in case of write collision
        while (c := config_update(m)) == "collision":
-            time.sleep(0.01)
+            sleep(0.01)
        return c

    return wrapper
@ -120,6 +151,7 @@ def modifies_config(modify):

 def load_config():
    global config
+    init_confdir()
    config = msgspec.toml.decode(conffile.read_bytes(), type=Config, dec_hook=dec_hook)


@ -127,7 +159,7 @@ def load_config():
 def update_config(conf: Config, changes: dict) -> Config:
    """Create/update the config with new values, respecting changes done by others."""
    # Encode into dict, update values with new, convert to Config
-    settings = {} if conf is None else msgspec.to_builtins(conf, enc_hook=enc_hook)
+    settings = msgspec.to_builtins(conf, enc_hook=enc_hook)
    settings.update(changes)
    return msgspec.convert(settings, Config, dec_hook=dec_hook)

@ -137,8 +169,13 @@ def update_user(conf: Config, name: str, changes: dict) -> Config:
    """Create/update a user with new values, respecting changes done by others."""
    # Encode into dict, update values with new, convert to Config
    try:
-        u = conf.users[name].__copy__()
-    except (KeyError, AttributeError):
+        # Copy user by converting to dict and back
+        u = msgspec.convert(
+            msgspec.to_builtins(conf.users[name], enc_hook=enc_hook),
+            User,
+            dec_hook=dec_hook,
+        )
+    except KeyError:
        u = User()
    if "password" in changes:
        from . import auth
@ -147,7 +184,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) if conf else {"users": {}}
+    settings = msgspec.to_builtins(conf, enc_hook=enc_hook)
    settings["users"][name] = msgspec.convert(udict, User, dec_hook=dec_hook)
    return msgspec.convert(settings, Config, dec_hook=dec_hook)

@ -155,6 +192,7 @@ def update_user(conf: Config, name: str, changes: dict) -> Config:
@modifies_config
 def del_user(conf: Config, name: str) -> Config:
    """Delete named user account."""
-    ret = conf.__copy__()
-    ret.users.pop(name)
-    return ret
+    # Create a copy by converting to dict and back
+    settings = msgspec.to_builtins(conf, enc_hook=enc_hook)
+    settings["users"].pop(name)
+    return msgspec.convert(settings, Config, dec_hook=dec_hook)
--- a/cista/preview.py
+++ b/cista/preview.py
@ -1,52 +1,237 @@
 import asyncio
+import gc
 import io
+import mimetypes
+import urllib.parse
 from pathlib import PurePosixPath
+from time import perf_counter
 from urllib.parse import unquote
+from wsgiref.handlers import format_date_time

+import av
+import fitz  # PyMuPDF
+import numpy as np
+import pillow_heif
 from PIL import Image
-from sanic import Blueprint, raw
-from sanic.exceptions import Forbidden, NotFound
+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

+pillow_heif.register_heif_opener()
+
 bp = Blueprint("preview", url_prefix="/preview")

+# Map EXIF Orientation value to a corresponding PIL transpose
+EXIF_ORI = {
+    2: Image.Transpose.FLIP_LEFT_RIGHT,
+    3: Image.Transpose.ROTATE_180,
+    4: Image.Transpose.FLIP_TOP_BOTTOM,
+    5: Image.Transpose.TRANSPOSE,
+    6: Image.Transpose.ROTATE_270,
+    7: Image.Transpose.TRANSVERSE,
+    8: Image.Transpose.ROTATE_90,
+}
+

@bp.get("/<path:path>")
 async def preview(req, path):
    """Preview a file"""
-    width = int(req.query_string) if req.query_string else 1024
+    maxsize = int(req.args.get("px", 1024))
+    maxzoom = float(req.args.get("zoom", 2.0))
+    quality = int(req.args.get("q", 60))
    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(".avif")
+    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/avif",
+        "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")
-    size = path.lstat().st_size
-    if size > 20 * 10**6:
-        raise Forbidden("File too large")
+
    img = await asyncio.get_event_loop().run_in_executor(
-        req.app.ctx.threadexec, process_image, path, width
+        req.app.ctx.threadexec, dispatch, path, quality, maxsize, maxzoom
    )
-    return raw(img, content_type="image/webp")
+    return raw(img, headers=headers)


-def process_image(path, maxsize):
-    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}
-        exif = img._getexif()
-        if exif:
-            orientation = exif.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 Exception as e:
-        logger.error(f"Error rotating preview image: {e}")
-    # Save as webp
+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)
+    type, _ = mimetypes.guess_type(path.name)
+    if type and type.startswith("video/"):
+        return process_video(path, quality=quality, maxsize=maxsize)
+    return process_image(path, quality=quality, maxsize=maxsize)
+
+
+def process_image(path, *, maxsize, quality):
+    t_load = perf_counter()
+    with Image.open(path) as img:
+        # Force decode to include I/O in load timing
+        img.load()
+        t_proc = perf_counter()
+        # Resize
+        w, h = img.size
+        img.thumbnail((min(w, maxsize), min(h, maxsize)))
+        # Transpose pixels according to EXIF Orientation
+        orientation = img.getexif().get(274, 1)
+        if orientation in EXIF_ORI:
+            img = img.transpose(EXIF_ORI[orientation])
+        # Save as AVIF
+        imgdata = io.BytesIO()
+        t_save = perf_counter()
+        img.save(imgdata, format="avif", quality=quality, speed=10, max_threads=1)
+
+    t_end = perf_counter()
+    ret = imgdata.getvalue()
+
+    load_ms = (t_proc - t_load) * 1000
+    proc_ms = (t_save - t_proc) * 1000
+    save_ms = (t_end - t_save) * 1000
+    logger.debug(
+        "Preview image %s: load=%.1fms process=%.1fms save=%.1fms",
+        path.name,
+        load_ms,
+        proc_ms,
+        save_ms,
+    )
+
+    return ret
+
+
+def process_pdf(path, *, maxsize, maxzoom, quality, page_number=0):
+    t_load_start = perf_counter()
+    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)  # type: ignore[attr-defined]
+    t_load_end = perf_counter()
+
+    t_save_start = perf_counter()
+    ret = pix.pil_tobytes(format="avif", quality=quality, speed=10, max_threads=1)
+    t_save_end = perf_counter()
+
+    logger.debug(
+        "Preview pdf %s: load+render=%.1fms save=%.1fms",
+        path.name,
+        (t_load_end - t_load_start) * 1000,
+        (t_save_end - t_save_start) * 1000,
+    )
+    return ret
+
+
+def process_video(path, *, maxsize, quality):
+    frame = None
    imgdata = io.BytesIO()
-    img.save(imgdata, format="webp", quality=70, method=6)
-    return imgdata.getvalue()
+    istream = ostream = icc = occ = frame = None
+    t_load_start = perf_counter()
+    # Initialize to avoid "possibly unbound" in static analysis when exceptions occur
+    t_load_end = t_load_start
+    t_save_start = t_load_start
+    t_save_end = t_load_start
+    with (
+        av.open(str(path)) as icontainer,
+        av.open(imgdata, "w", format="avif") as ocontainer,
+    ):
+        istream = icontainer.streams.video[0]
+        istream.codec_context.skip_frame = "NONKEY"
+        icontainer.seek((icontainer.duration or 0) // 8)
+        for frame in icontainer.decode(istream):
+            if frame.dts is not None:
+                break
+        else:
+            raise RuntimeError("No frames found in video")
+
+        # Resize frame to thumbnail size
+        if frame.width > maxsize or frame.height > maxsize:
+            scale_factor = min(maxsize / frame.width, maxsize / frame.height)
+            new_width = int(frame.width * scale_factor)
+            new_height = int(frame.height * scale_factor)
+            frame = frame.reformat(width=new_width, height=new_height)
+
+        # Simple rotation detection and logging
+        if frame.rotation:
+            try:
+                fplanes = frame.to_ndarray()
+                # Split into Y, U, V planes of proper dimensions
+                planes = [
+                    fplanes[: frame.height],
+                    fplanes[frame.height : frame.height + frame.height // 4].reshape(
+                        frame.height // 2, frame.width // 2
+                    ),
+                    fplanes[frame.height + frame.height // 4 :].reshape(
+                        frame.height // 2, frame.width // 2
+                    ),
+                ]
+                # Rotate
+                planes = [np.rot90(p, frame.rotation // 90) for p in planes]
+                # Restore PyAV format
+                planes = np.hstack([p.flat for p in planes]).reshape(
+                    -1, planes[0].shape[1]
+                )
+                frame = av.VideoFrame.from_ndarray(planes, format=frame.format.name)
+                del planes, fplanes
+            except Exception as e:
+                if "not yet supported" in str(e):
+                    logger.warning(
+                        f"Not rotating {path.name} preview image by {frame.rotation}°:\n  PyAV: {e}"
+                    )
+                else:
+                    logger.exception(f"Error rotating video frame: {e}")
+        t_load_end = perf_counter()
+
+        t_save_start = perf_counter()
+        crf = str(int(63 * (1 - quality / 100) ** 2))  # Closely matching PIL quality-%
+        ostream = ocontainer.add_stream(
+            "av1",
+            options={
+                "crf": crf,
+                "usage": "realtime",
+                "cpu-used": "8",
+                "threads": "1",
+            },
+        )
+        assert isinstance(ostream, av.VideoStream)
+        ostream.width = frame.width
+        ostream.height = frame.height
+        icc = istream.codec_context
+        occ = ostream.codec_context
+
+        # Copy HDR metadata from input video stream
+        occ.color_primaries = icc.color_primaries
+        occ.color_trc = icc.color_trc
+        occ.colorspace = icc.colorspace
+        occ.color_range = icc.color_range
+
+        ocontainer.mux(ostream.encode(frame))
+        ocontainer.mux(ostream.encode(None))  # Flush the stream
+        t_save_end = perf_counter()
+
+    # Capture frame dimensions before cleanup
+    ret = imgdata.getvalue()
+    logger.debug(
+        "Preview video %s: load+decode=%.1fms save=%.1fms",
+        path.name,
+        (t_load_end - t_load_start) * 1000,
+        (t_save_end - t_save_start) * 1000,
+    )
+    del imgdata, istream, ostream, icc, occ, frame
+    gc.collect()
+    return ret
--- a/cista/protocol.py
+++ b/cista/protocol.py
@ -112,7 +112,7 @@ class ErrorMsg(msgspec.Struct):
 ## Directory listings


-class FileEntry(msgspec.Struct, array_like=True):
+class FileEntry(msgspec.Struct, array_like=True, frozen=True):
    level: int
    name: str
    key: str
@ -120,12 +120,14 @@ class FileEntry(msgspec.Struct, array_like=True):
    size: int
    isfile: int

-    def __repr__(self):
+    def __str__(self):
        return self.key or "FileEntry()"

+    def __repr__(self):
+        return f"{self.name} ({self.size}, {self.mtime})"

-class Update(msgspec.Struct, array_like=True):
-    ...
+
+class Update(msgspec.Struct, array_like=True): ...


 class UpdKeep(Update, tag="k"):
--- a/cista/serve.py
+++ b/cista/serve.py
@ -26,7 +26,6 @@ def run(*, dev=False):
        motd=False,
        dev=dev,
        auto_reload=dev,
-        reload_dir={confdir},
        access_log=True,
    )  # type: ignore
    if dev:
--- a/cista/util/apphelpers.py
+++ b/cista/util/apphelpers.py
@ -29,6 +29,8 @@ async def handle_sanic_exception(request, e):
    if not message or not request.app.debug and code == 500:
        message = "Internal Server Error"
    message = f"⚠️ {message}" if code < 500 else f"🛑 {message}"
+    if code == 500:
+        logger.exception(e)
    # Non-browsers get JSON errors
    if "text/html" not in request.headers.accept:
        return jres(
@ -59,7 +61,7 @@ def websocket_wrapper(handler):
                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):
+            if not getattr(e, "quiet", False) or code == 500:
                logger.exception(f"{code} {e!r}")
            raise

--- a/cista/watching.py
+++ b/cista/watching.py
@ -24,7 +24,7 @@ class State:
    def __init__(self):
        self.lock = threading.RLock()
        self._space = Space(0, 0, 0, 0)
-        self._listing: list[FileEntry] = []
+        self.root: list[FileEntry] = []

    @property
    def space(self):
@ -36,80 +36,80 @@ class State:
        with self.lock:
            self._space = space

-    @property
-    def root(self) -> list[FileEntry]:
-        with self.lock:
-            return self._listing[:]

-    @root.setter
-    def root(self, listing: list[FileEntry]):
-        with self.lock:
-            self._listing = listing
+def 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 _slice(self, idx: PurePosixPath | tuple[PurePosixPath, int]):
-        relpath, relfile = idx if isinstance(idx, tuple) else (idx, 0)
-        begin, end = 0, len(self._listing)
-        level = 0
-        isfile = 0

-        # Special case for root
-        if not relpath.parts:
-            return slice(begin, end)
+def treeget(rootmod: list[FileEntry], path: PurePosixPath):
+    begin = None
+    ret = []

-        begin += 1
-        for part in relpath.parts:
+    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
-            found = False
+            continue

-            while begin < end:
-                entry = self._listing[begin]
+        ename = rel.parts[level - 1]
+        name = relpath.parts[level - 1]

-                if entry.level < level:
-                    break
+        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

-                if entry.level == level:
-                    if entry.name == part:
-                        found = True
-                        if level == len(relpath.parts):
-                            isfile = relfile
-                        else:
-                            begin += 1
-                        break
-                    cmp = entry.isfile - isfile or sortkey(entry.name) > sortkey(part)
-                    if cmp > 0:
-                        break
+        # 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)
+        )

-                begin += 1
+        if cmp > 0:
+            return i
+        if cmp < 0:
+            continue

-            if not found:
-                return slice(begin, begin)
+        level += 1
+        if level > len(relpath.parts):
+            logger.error(
+                f"insertpos level overflow: relpath={relpath}, i={i}, entry.name={entry.name}, entry.level={entry.level}, level={level}"
+            )
+            break
+    else:
+        i += 1

-        # Found the starting point, now find the end of the slice
-        for end in range(begin + 1, len(self._listing) + 1):
-            if end == len(self._listing) or self._listing[end].level <= level:
-                break
-        return slice(begin, end)
-
-    def __getitem__(self, index: PurePosixPath | tuple[PurePosixPath, int]):
-        with self.lock:
-            return self._listing[self._slice(index)]
-
-    def __setitem__(
-        self, index: tuple[PurePosixPath, int], value: list[FileEntry]
-    ) -> None:
-        rel, isfile = index
-        with self.lock:
-            if rel.parts:
-                parent = self._slice(rel.parent)
-                if parent.start == parent.stop:
-                    raise ValueError(
-                        f"Parent folder {rel.as_posix()} is missing for {rel.name}"
-                    )
-            self._listing[self._slice(index)] = value
-
-    def __delitem__(self, relpath: PurePosixPath):
-        with self.lock:
-            del self._listing[self._slice(relpath)]
+    return i


 state = State()
@ -124,7 +124,7 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
    ret = []
    try:
        st = stat or path.stat()
-        isfile = not S_ISDIR(st.st_mode)
+        isfile = int(not S_ISDIR(st.st_mode))
        entry = FileEntry(
            level=len(rel.parts),
            name=rel.name,
@ -136,7 +136,7 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
        if isfile:
            return [entry]
        # Walk all entries of the directory
-        ret = [entry]
+        ret: list[FileEntry] = [...]  # type: ignore
        li = []
        for f in path.iterdir():
            if quit.is_set():
@ -153,42 +153,52 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
        # Build the tree as a list of FileEntries
        for [_, name, s] in humansorted(li):
            sub = walk(rel / name, stat=s)
-            ret.extend(sub)
            child = sub[0]
-            entry.mtime = max(entry.mtime, child.mtime)
-            entry.size += child.size
+            entry = FileEntry(
+                level=entry.level,
+                name=entry.name,
+                key=entry.key,
+                size=entry.size + child.size,
+                mtime=max(entry.mtime, child.mtime),
+                isfile=entry.isfile,
+            )
+            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 update_root(loop):
    """Full filesystem scan"""
+    old = state.root
    new = walk(PurePosixPath())
-    with state.lock:
-        old = state.root
-        if old != new:
+    if old != new:
+        update = format_update(old, new)
+        with state.lock:
+            broadcast(update, loop)
            state.root = new
-            broadcast(format_update(old, new), loop)


-def update_path(relpath: PurePosixPath, loop):
+def update_path(rootmod: list[FileEntry], relpath: PurePosixPath, loop):
    """Called on FS updates, check the filesystem and broadcast any changes."""
    new = walk(relpath)
-    with state.lock:
-        old = state[relpath]
-        if old == new:
-            return
-        old = state.root
-        if new:
-            state[relpath, new[0].isfile] = new
-        else:
-            del state[relpath]
-        broadcast(format_update(old, state.root), loop)
+    obegin, old = treeget(rootmod, relpath)
+
+    if old == new:
+        return
+
+    if obegin is not None:
+        del rootmod[obegin : obegin + len(old)]
+
+    if new:
+        i = treeinspos(rootmod, relpath, new[0].isfile)
+        rootmod[i:i] = new


 def update_space(loop):
@ -210,40 +220,98 @@ def update_space(loop):
 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
+    iteration_count = 0
+    # Precompute index maps to allow deterministic tie-breaking when both
+    # candidates exist in both sequences but are not equal (rename/move cases)
+    old_pos = {e: i for i, e in enumerate(old)}
+    new_pos = {e: i for i, e in enumerate(new)}
+
    while oidx < len(old) and nidx < len(new):
+        iteration_count += 1
+
+        # Emergency brake for potential infinite loops
+        if iteration_count > 50000:
+            logger.error(
+                f"format_update potential infinite loop! iteration={iteration_count}, oidx={oidx}, nidx={nidx}"
+            )
+            raise Exception(
+                f"format_update infinite loop detected at iteration {iteration_count}"
+            )
+
+        modified = False
+        # Matching entries are kept
        if old[oidx] == new[nidx]:
+            entry = old[oidx]
+            oremain.discard(entry)
+            nremain.discard(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
-        rest = new[nidx:]
-        while oidx < len(old) and old[oidx] not in rest:
+        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 = []
-        rest = old[oidx:]
-        while nidx < len(new) and new[nidx] not in rest:
-            insert_items.append(new[nidx])
+        while nidx < len(new) and new[nidx] not in oremain:
+            entry = new[nidx]
+            nremain.discard(entry)
+            insert_items.append(entry)
            nidx += 1
-        update.append(UpdIns(insert_items))
+        if insert_items:
+            modified = True
+            update.append(UpdIns(insert_items))
+
+        if not modified:
+            # Tie-break: both items exist in both lists but don't match here.
+            # Decide whether to delete old[oidx] first or insert new[nidx] first
+            # based on which alignment is closer.
+            if oidx >= len(old) or nidx >= len(new):
+                break
+            cur_old = old[oidx]
+            cur_new = new[nidx]
+
+            pos_old_in_new = new_pos.get(cur_old)
+            pos_new_in_old = old_pos.get(cur_new)
+
+            # Default distances if not present (shouldn't happen if in remain sets)
+            dist_del = (pos_old_in_new - nidx) if pos_old_in_new is not None else 1
+            dist_ins = (pos_new_in_old - oidx) if pos_new_in_old is not None else 1
+
+            # Prefer the operation with smaller forward distance; tie => delete
+            if dist_del <= dist_ins:
+                # Delete current old item
+                oremain.discard(cur_old)
+                update.append(UpdDel(1))
+                oidx += 1
+            else:
+                # Insert current new item
+                nremain.discard(cur_new)
+                update.append(UpdIns([cur_new]))
+                nidx += 1

    # Diff any remaining
    if keep_count > 0:
        update.append(UpdKeep(keep_count))
-    if oidx < len(old):
-        update.append(UpdDel(len(old) - oidx))
-    elif nidx < len(new):
+    if oremain:
+        update.append(UpdDel(len(oremain)))
+    elif nremain:
        update.append(UpdIns(new[nidx:]))

    return msgspec.json.encode({"update": update}).decode()
@ -290,12 +358,10 @@ def watcher_inotify(loop):
        i = inotify.adapters.InotifyTree(rootpath.as_posix())
        # Initialize the tree from filesystem
        update_root(loop)
-        trefresh = time.monotonic() + 30.0
+        trefresh = time.monotonic() + 300.0
        tspace = time.monotonic() + 5.0
        # Watch for changes (frequent wakeups needed for quiting)
-        for event in i.event_gen(timeout_s=0.1):
-            if quit.is_set():
-                break
+        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:
@ -304,10 +370,60 @@ def watcher_inotify(loop):
            if t >= tspace:
                tspace = time.monotonic() + 5.0
                update_space(loop)
-            # Inotify event, update the tree
-            if event and any(f in modified_flags for f in event[1]):
-                # Update modified path
-                update_path(PurePosixPath(event[2]) / event[3], 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 interesting:
+                    # Update modified path
+                    path = PurePosixPath(event[2]) / event[3]
+                    try:
+                        rel_path = path.relative_to(rootpath)
+                        update_path(rootmod, rel_path, loop)
+                    except Exception as e:
+                        logger.error(
+                            f"Error processing inotify event for path {path}: {e}"
+                        )
+                        raise
+                    if not dirty:
+                        t = time.monotonic()
+                        dirty = True
+                # Wait a maximum of 0.2s to push the updates
+                if dirty and time.monotonic() >= t + 0.2:
+                    break
+            if dirty and state.root != rootmod:
+                try:
+                    update = format_update(state.root, rootmod)
+                    with state.lock:
+                        broadcast(update, loop)
+                        state.root = rootmod
+                except Exception:
+                    logger.exception(
+                        "format_update failed; falling back to full rescan"
+                    )
+                    # Fallback: full rescan and try diff again; last resort send full root
+                    try:
+                        fresh = walk(PurePosixPath())
+                        try:
+                            update = format_update(state.root, fresh)
+                            with state.lock:
+                                broadcast(update, loop)
+                                state.root = fresh
+                        except Exception:
+                            logger.exception(
+                                "Fallback diff failed; sending full root snapshot"
+                            )
+                            with state.lock:
+                                broadcast(format_root(fresh), loop)
+                                state.root = fresh
+                    except Exception:
+                        logger.exception(
+                            "Full rescan failed; dropping this batch of updates"
+                        )

        del i  # Free the inotify object

@ -324,7 +440,7 @@ def watcher_poll(loop):
        quit.wait(0.1 + 8 * dur)


-async def start(app, loop):
+def start(app, loop):
    global rootpath
    config.load_config()
    rootpath = config.config.path
@ -338,6 +454,6 @@ async def start(app, loop):
    app.ctx.watcher.start()


-async def stop(app, loop):
+def stop(app):
    quit.set()
    app.ctx.watcher.join()
--- a/docs/cista.webp
+++ b/docs/cista.webp
--- a/frontend/.npmrc
+++ b/frontend/.npmrc
@ -0,0 +1,2 @@
+audit=false
+fund=false
--- a/frontend/README.md
+++ b/frontend/README.md
@ -22,25 +22,25 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
 ### Run the backend

 ```fish
-hatch shell
-cista --dev -l :8000
+uv sync --dev
+uv run cista --dev -l :8000
 ```

 ### And the Vite server (in another terminal)

 ```fish
 cd frontend
-npm install
-npm run dev
+bun install
+bun run dev
 ```
 Browse to Vite, which will proxy API requests to port 8000. Both servers live reload changes.


 ### Type-Check, Compile and Minify for Production

-This is also called by `hatch build` during Python packaging:
+This is also called by `uv build` during Python packaging:

 ```fish
-npm run build
+bun run build
 ```

--- a/frontend/index.html
+++ b/frontend/index.html
@ -8,5 +8,4 @@
 <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>
-
-<div id="app"></div>
+<body id="app">
--- a/frontend/package.json
+++ b/frontend/package.json
@ -12,6 +12,9 @@
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
  "dependencies": {
    "@imengyu/vue3-context-menu": "^1.3.3",
    "@vueuse/core": "^10.4.1",
@ -21,7 +24,6 @@
    "pinia": "^2.1.6",
    "pinia-plugin-persistedstate": "^3.2.0",
    "unplugin-vue-components": "^0.25.2",
-    "vite-plugin-rewrite-all": "^1.0.1",
    "vite-svg-loader": "^4.0.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -1,5 +1,6 @@
 <template>
  <LoginModal />
+  <SettingsModal />
  <header>
    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
      <HeaderSelected :path="path.pathList" />
@ -9,6 +10,10 @@
  <main>
    <RouterView :path="path.pathList" :query="path.query" />
  </main>
+  <footer>
+    <TransferBar :status=store.uprogress @cancel=store.cancelUploads class=upload />
+    <TransferBar :status=store.dprogress @cancel=store.cancelDownloads class=download />
+  </footer>
 </template>

 <script setup lang="ts">
@ -22,6 +27,7 @@ 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
@ -49,6 +55,13 @@ 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()
@ -69,13 +82,13 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
  //console.log("key pressed", event)
  /// Long if-else machina for all keys we handle here
  let arrow = ''
-  if (event.key.startsWith("Arrow")) arrow = event.key.slice(5).toLowerCase()
+  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 (keyup && !input && event.key === '/') {
+  else if (!input && keyup && event.key === '/') {
    headerMain.value!.toggleSearchInput()
  }
  // Globally close search, clear errors on Escape
@ -88,7 +101,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
    Router.back()
  }
  // Select all (toggle); keydown to precede and prevent builtin
-  else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+  else if (!input && !keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
    fileExplorer.toggleSelectAll()
  }
  // G toggles Gallery
@ -104,11 +117,11 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
    store.sort(['', 'name', 'modified', 'size'][+event.key || 0] as SortOrder)
  }
  // Rename
-  else if (c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {
+  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 (c && event.code === 'Space') {
+  else if (!input && c && event.code === 'Space') {
    if (keyup && !event.altKey && !event.ctrlKey)
      fileExplorer.cursorSelect()
  }
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@ -89,7 +89,7 @@
    --header-background: none;
    --header-color: black;
  }
-  nav,
+  .headermain,
  .menu,
  .rename-button {
    display: none !important;
@ -107,9 +107,12 @@
  }
  .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 {
@ -118,6 +121,17 @@
    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;
@ -141,10 +155,6 @@ 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 */
@ -161,6 +171,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);
@ -202,21 +213,23 @@ table {
  border: 0;
  gap: 0;
 }
-#app {
-  height: 100%;
+body#app {
+  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/frontend/src/components/BreadCrumb.vue
+++ b/frontend/src/components/BreadCrumb.vue
@ -10,6 +10,7 @@
  >
    <a href="#/"
      :ref="el => setLinkRef(0, el)"
+      class="home"
      :class="{ current: !!isCurrent(0) }"
      :aria-current="isCurrent(0)"
      @click.prevent="navigate(0)"
@ -33,6 +34,7 @@
 import home from '@/assets/svg/home.svg'
 import { nextTick, onBeforeUpdate, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
+import { exists } from '@/utils/fileutil'

 const router = useRouter()

@ -85,6 +87,15 @@ watchEffect(() => {
  else if (props.path.length > longcut.length) {
    longest.value = longcut.concat(props.path.slice(longcut.length))
  }
+  else {
+    // Prune deleted folders from longest
+    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
@ -111,6 +122,7 @@ watchEffect(() => {
  min-height: 2em;
  margin: 0;
  padding: 0 1em 0 0;
+  overflow: hidden;
 }
 .breadcrumb > a {
  flex: 0 4 auto;
--- a/frontend/src/components/DownloadButton.vue
+++ b/frontend/src/components/DownloadButton.vue
@ -0,0 +1,171 @@
+<template>
+  <SvgButton name="download" data-tooltip="Download" @click="download" />
+</template>
+
+<script setup lang="ts">
+import { useMainStore } from '@/stores/main'
+import type { SelectedItems } from '@/repositories/Document'
+import { reactive } from 'vue';
+
+const store = useMainStore()
+
+const status_init = {
+  total: 0,
+  xfer: 0,
+  t0: 0,
+  tlast: 0,
+  statbytes: 0,
+  statdur: 0,
+  files: [] as string[],
+  filestart: 0,
+  fileidx: 0,
+  filecount: 0,
+  filename: '',
+  filesize: 0,
+  filepos: 0,
+  status: 'idle',
+}
+store.dprogress = {...status_init}
+setInterval(() => {
+  if (Date.now() - store.dprogress.tlast > 3000) {
+    // Reset
+    store.dprogress.statbytes = 0
+    store.dprogress.statdur = 1
+  } else {
+    // Running average by decay
+    store.dprogress.statbytes *= .9
+    store.dprogress.statdur *= .9
+  }
+}, 100)
+const statReset = () => {
+  Object.assign(store.dprogress, status_init)
+  store.dprogress.t0 = Date.now()
+  store.dprogress.tlast = store.dprogress.t0 + 1
+}
+const cancelDownloads = () => {
+  location.reload()  // FIXME
+}
+
+
+const linkdl = (href: string) => {
+  const a = document.createElement('a')
+  a.href = href
+  a.download = ''
+  a.click()
+}
+
+const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandle) => {
+  let hdir = ''
+  let h = handle
+  console.log('Downloading to filesystem', sel.recursive)
+  for (const [rel, full, doc] of sel.recursive) {
+    if (doc.dir) continue
+    store.dprogress.files.push(rel)
+    ++store.dprogress.filecount
+    store.dprogress.total += doc.size
+  }
+  for (const [rel, full, doc] of sel.recursive) {
+    // Create any missing directories
+    if (hdir && !rel.startsWith(hdir + '/')) {
+      hdir = ''
+      h = handle
+    }
+    const r = rel.slice(hdir.length)
+    for (const dir of r.split('/').slice(0, doc.dir ? undefined : -1)) {
+      if (!dir) continue
+      hdir += `${dir}/`
+      try {
+        h = await h.getDirectoryHandle(dir.normalize('NFC'), { create: true })
+      } catch (error) {
+        console.error('Failed to create directory', hdir, error)
+        return
+      }
+      console.log('Created', hdir)
+    }
+    if (doc.dir) continue // Target was a folder and was created
+    const name = rel.split('/').pop()!.normalize('NFC')
+    // Download file
+    let fileHandle
+    try {
+      fileHandle = await h.getFileHandle(name, { create: true })
+    } catch (error) {
+      console.error('Failed to create file', rel, full, hdir + name, error)
+      return
+    }
+    const writable = await fileHandle.createWritable()
+    const url = `/files/${rel}`
+    console.log('Fetching', url)
+    const res = await fetch(url)
+    if (!res.ok) {
+      store.error = `Failed to download ${url}: ${res.status} ${res.statusText}`
+      throw new Error(`Failed to download ${url}: ${res.status} ${res.statusText}`)
+    }
+    if (res.body) {
+      ++store.dprogress.fileidx
+      const reader = res.body.getReader()
+      await writable.truncate(0)
+      store.error = "Direct download."
+      store.dprogress.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
+        store.dprogress.xfer += size
+        store.dprogress.filepos += size
+        store.dprogress.statbytes += size
+        store.dprogress.statdur += now - store.dprogress.tlast
+        store.dprogress.tlast = now
+      }
+    }
+    await writable.close()
+    console.log('Saved', hdir + name)
+  }
+  statReset()
+}
+
+const download = async () => {
+  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)
+    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) {
+    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
+  if ('showDirectoryPicker' in window) {
+    try {
+      // @ts-ignore
+      const handle = await window.showDirectoryPicker({
+        startIn: 'downloads',
+        mode: 'readwrite'
+      })
+      await filesystemdl(sel, handle)
+      store.selected.clear()
+      return
+    } catch (e) {
+      console.error('Download to folder aborted', e)
+    }
+  }
+  // Otherwise, zip and download
+  console.log("Falling back to zip download")
+  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 scoped>
+
+</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/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@ -80,8 +80,6 @@ import { connect, controlUrl } from '@/repositories/WS'
 import { formatSize } from '@/utils'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
-import type { SortOrder } from '@/utils/docsort'
-import type SvgButtonVue from './SvgButton.vue'

 const props = defineProps<{
  path: Array<string>
@ -117,6 +115,7 @@ const rename = (doc: Doc, newName: string) => {
 }
 defineExpose({
  newFolder() {
+    console.log("New folder")
    const now = Math.floor(Date.now() / 1000)
    editing.value = new Doc({
      loc: loc.value,
@ -126,6 +125,7 @@ defineExpose({
      mtime: now,
      size: 0,
    })
+    store.cursor = editing.value.key
  },
  toggleSelectAll() {
    console.log('Select')
@ -219,7 +219,14 @@ let modifiedTimer: any = null
 const updateModified = () => {
  nowkey.value = Math.floor(Date.now() / 1000)
 }
-onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 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, {
--- a/frontend/src/components/FileRenameInput.vue
+++ b/frontend/src/components/FileRenameInput.vue
@ -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/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@ -1,18 +1,22 @@
 <template>
  <div v-if="props.documents.length || editing" class="gallery" ref="gallery">
-    <GalleryFigure v-for="(doc, index) in documents" :key="doc.key" :doc="doc" :index="index">
-      <BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" v-if="showFolderBreadcrumb(index)" class="folder-change"/>
-    </GalleryFigure>
+    <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" @menu="contextMenu($event, doc)">
+        <template v-if=showFolderBreadcrumb(index)>
+          <BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" class="folder-change"/>
+          <div class="spacer"></div>
+        </template>
+      </GalleryFigure>
+    </template>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
-import FileRenameInput from './FileRenameInput.vue'
 import { connect, controlUrl } from '@/repositories/WS'
-import { formatSize } from '@/utils'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import type { SortOrder } from '@/utils/docsort'
@ -25,6 +29,7 @@ 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, {
@ -65,6 +70,7 @@ defineExpose({
      mtime: now,
      size: 0,
    })
+    store.cursor = editing.value.key
  },
  toggleSelectAll() {
    console.log('Select')
@ -107,6 +113,10 @@ defineExpose({
    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 {
@ -114,7 +124,6 @@ defineExpose({
      // Wrapping either end, just land outside the list
      if (Math.abs(d) >= N || Math.sign(d) !== Math.sign(moveto - index)) moveto = N
    }
-    console.log("Gallery cursorMove", d, index, moveto, moveto - index)
    store.cursor = docs[moveto]?.key ?? ''
    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
    if (select) {
@ -159,13 +168,13 @@ watchEffect(() => {
    focusBreadcrumb()
  }
 })
-let nowkey = ref(0)
-let modifiedTimer: any = null
-const updateModified = () => {
-  nowkey.value = Math.floor(Date.now() / 1000)
-}
-onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
-onUnmounted(() => { clearInterval(modifiedTimer) })
+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() {
@ -240,15 +249,18 @@ const contextMenu = (ev: MouseEvent, doc: Doc) => {

 <style scoped>
 .gallery {
-  padding: 1rem;
+  padding: 1em;
  width: 100%;
  display: grid;
-  gap: .5rem;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  grid-auto-rows: 15rem;
+  gap: .5em;
+  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+  grid-template-rows: repeat(minmax(auto, 15em));
+  align-items: end;
 }
 .breadcrumb {
-  position: absolute;
-  z-index: 1;
+  border-radius: .5em 0 0 .5em;
+}
+.spacer {
+  flex: 0 1000000000 4rem;
 }
 </style>
--- a/frontend/src/components/GalleryFigure.vue
+++ b/frontend/src/components/GalleryFigure.vue
@ -3,20 +3,22 @@
    :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
    @contextmenu.stop
    @focus.stop="store.cursor = doc.key"
-    @click="ev => {
-      if (m!.play()) ev.preventDefault()
-      store.cursor = doc.key
-    }"
+    @click=onclick
  >
    <figure>
      <slot></slot>
-      <MediaPreview ref=m :doc="doc" :tabindex=-1 />
-      <caption>
-        <label>
-          <SelectBox :doc=doc />
+      <MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" />
+      <div class="titlespacer"></div>
+      <figcaption @click.prevent @contextmenu.prevent="$emit('menu', $event)">
+        <template v-if="editing">
+          <FileRenameInput :doc=doc :rename=editing.rename :exit=editing.exit />
+        </template>
+        <template v-else>
+          <SelectBox :doc=doc @click="store.cursor = doc.key"/>
          <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
-        </label>
-      </caption>
+          <div class=namespacer></div>
+        </template>
+      </figcaption>
    </figure>
  </a>
 </template>
@ -28,67 +30,80 @@ import { Doc } from '@/repositories/Document'
 import MediaPreview from '@/components/MediaPreview.vue'

 const store = useMainStore()
+type EditingProp = {
+  rename: (name: string) => void;
+  exit: () => void;
+}
+
 const props = defineProps<{
-  doc: Doc
-  index: number
+  doc: Doc,
+  editing?: EditingProp,
 }>()
 const m = ref<typeof MediaPreview | null>(null)
+
+const onclick = (ev: Event) => {
+  if (m.value!.play()) ev.preventDefault()
+  store.cursor = props.doc.key
+}
 </script>

 <style scoped>
-.gallery figure {
-  height: 15rem;
+figure {
+  max-height: 15em;
  position: relative;
-  border-radius: .5rem;
+  border-radius: .5em;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: space-between;
+  justify-content: end;
  overflow: hidden;
 }
-figure caption {
-  font-weight: 600;
-  color: var(--text-color);
-  text-shadow: 0 0 .2rem #000, 0 0 1rem #000;
+figure > article {
+  flex: 0 0 auto;
 }
-.cursor caption {
-  background: var(--accent-color);
+.titlespacer {
+  flex-shrink: 100000;
+  width: 100%;
+  height: 2em;
 }
-caption {
+figcaption {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  display: flex;
-  flex-direction: column;
  align-items: center;
+  justify-content: center;
  width: 100%;
 }
-caption label {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-label span {
-  flex: 1 1;
-  margin-right: 2rem;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-label input[type='checkbox'] {
-  width: 2rem;
-  height: 2rem;
+figcaption input[type='checkbox'] {
+  width: 1.5em;
+  height: 1.5em;
+  margin: .25em 0 .25em .25em;
  opacity: 0;
  flex-shrink: 0;
+  transition: opacity var(--transition-time) ease-in-out;
 }
-label input[type='checkbox']:checked {
+figcaption input[type='checkbox']:checked, figcaption:hover input[type='checkbox'] {
  opacity: 1;
 }
-a {
-  text-decoration: none;
+figcaption span {
+  cursor: default;
+  padding: .5em;
+  color: #fff;
+  font-weight: 600;
+  text-shadow: 0 0 .2em #000, 0 0 .2em #000;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.cursor figcaption span {
+  color: var(--accent-color);
+}
+figcaption .namespacer {
+  flex-shrink: 100000;
+  height: 2em;
+  width: 2em;
 }
-
 </style>
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@ -8,7 +8,7 @@
    <SvgButton
      name="create-folder"
      data-tooltip="New folder"
-      @click="() => store.fileExplorer!.newFolder()"
+      @click="() => {  console.log('New', store.fileExplorer); store.fileExplorer!.newFolder(); console.log('Done')}"
    />
    <slot></slot>
    <div class="spacer smallgap"></div>
@ -73,6 +73,7 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
  // show the context menu
  const items = []
+  items.push({ label: 'Settings', onClick: () => { store.dialog = 'settings' }})
  if (store.user.isLoggedIn) {
    items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
  } else {
--- a/frontend/src/components/HeaderSelected.vue
+++ b/frontend/src/components/HeaderSelected.vue
@ -2,7 +2,7 @@
  <template v-if="store.selected.size">
    <div class="smallgap"></div>
    <p class="select-text">{{ store.selected.size }} selected ➤</p>
-    <SvgButton name="download" data-tooltip="Download" @click="download" />
+    <DownloadButton />
    <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')" />
@ -14,7 +14,6 @@
 import {connect, controlUrl} from '@/repositories/WS'
 import { useMainStore } from '@/stores/main'
 import { computed } from 'vue'
-import type { SelectedItems } from '@/repositories/Document'

 const store = useMainStore()
 const props = defineProps({
@ -53,95 +52,6 @@ const op = (op: string, dst?: string) => {
  }
 }

-const linkdl = (href: string) => {
-  const a = document.createElement('a')
-  a.href = href
-  a.download = ''
-  a.click()
-}
-
-const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandle) => {
-  let hdir = ''
-  let h = handle
-  console.log('Downloading to filesystem', sel.recursive)
-  for (const [rel, full, doc] of sel.recursive) {
-    // Create any missing directories
-    if (hdir && !rel.startsWith(hdir + '/')) {
-      hdir = ''
-      h = handle
-    }
-    const r = rel.slice(hdir.length)
-    for (const dir of r.split('/').slice(0, doc.dir ? undefined : -1)) {
-      hdir += `${dir}/`
-      try {
-        h = await h.getDirectoryHandle(dir.normalize('NFC'), { create: true })
-      } catch (error) {
-        console.error('Failed to create directory', hdir, error)
-        return
-      }
-      console.log('Created', hdir)
-    }
-    if (doc.dir) continue // Target was a folder and was created
-    const name = rel.split('/').pop()!.normalize('NFC')
-    // Download file
-    let fileHandle
-    try {
-      fileHandle = await h.getFileHandle(name, { create: true })
-    } catch (error) {
-      console.error('Failed to create file', rel, full, hdir + name, error)
-      return
-    }
-    const writable = await fileHandle.createWritable()
-    const url = `/files/${rel}`
-    console.log('Fetching', url)
-    const res = await fetch(url)
-    if (!res.ok)
-      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()
-    }
-    console.log('Saved', hdir + name)
-  }
-}
-
-const download = async () => {
-  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)
-    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) {
-    store.selected.clear()
-    return linkdl(`/files/${files[0][1]}`)
-  }
-  // Use FileSystem API if multiple files and the browser supports it
-  if ('showDirectoryPicker' in window) {
-    try {
-      // @ts-ignore
-      const handle = await window.showDirectoryPicker({
-        startIn: 'downloads',
-        mode: 'readwrite'
-      })
-      filesystemdl(sel, handle).then(() => {
-        store.selected.clear()
-      })
-      return
-    } catch (e) {
-      console.error('Download to folder aborted', e)
-    }
-  }
-  // Otherwise, zip and download
-  const name = sel.keys.length === 1 ? sel.docs[sel.keys[0]].name : 'download'
-  linkdl(`/zip/${Array.from(sel.keys).join('+')}/${name}.zip`)
-  store.selected.clear()
-}
 </script>

 <style>
--- a/frontend/src/components/LoginModal.vue
+++ b/frontend/src/components/LoginModal.vue
@ -1,5 +1,5 @@
 <template>
-  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required" @blur="store.user.isOpenLoginModal = false">
+  <ModalDialog name="login" title="Authentication required">
    <form @submit.prevent="login">
      <div class="login-container">
        <label for="username">Username:</label>
@ -99,4 +99,3 @@ const login = async () => {
  height: 1em;
 }
 </style>
-@/stores/main
--- a/frontend/src/components/MediaPreview.vue
+++ b/frontend/src/components/MediaPreview.vue
@ -1,32 +1,99 @@
 <template>
-  <img v-if=doc.img :src="preview() ? doc.previewurl : doc.url" alt="">
+  <img v-if=preview() :src="`${doc.previewurl}?${quality}&t=${doc.mtime}`" alt="">
+  <img v-else-if=doc.img :src=doc.url alt="">
  <span v-else-if=doc.dir class="folder icon"></span>
-  <video ref=vid v-else-if=video() :src=doc.url controls preload=none @click.prevent>📄</video>
-  <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio>
+  <video ref=vid v-else-if=video() :src=doc.url :poster=poster preload=none @play=onplay @pause=onpaused @ended=next @seeking=media!.play()></video>
+  <div v-else-if=audio() class="audio icon">
+    <audio ref=aud :src=doc.url class=icon preload=none @play=onplay @pause=onpaused @ended=next @seeking=media!.play()></audio>
+  </div>
  <span v-else-if=archive() class="archive icon"></span>
  <span v-else class="file icon" :class="`ext-${doc.ext}`"></span>
 </template>

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

 const aud = ref<HTMLAudioElement | null>(null)
 const vid = ref<HTMLVideoElement | null>(null)
 const media = computed(() => aud.value || vid.value)
+const poster = computed(() => `${props.doc.previewurl}?${props.quality}&t=${props.doc.mtime}`)
 const props = defineProps<{
  doc: Doc
+  quality: string
 }>()

+const onplay = () => {
+  if (!media.value) return
+  media.value.controls = true
+  media.value.setAttribute('data-playing', '')
+}
+const onpaused = () => {
+  if (!media.value) return
+  media.value.controls = false
+  media.value.removeAttribute('data-playing')
+}
+let fscurrent: HTMLVideoElement | null = null
+const next = () => {
+  if (!media.value) return
+  media.value.load()  // Restore poster
+  const medias = Array.from(document.querySelectorAll('video, audio')) as (HTMLAudioElement | HTMLVideoElement)[]
+  if (medias.length === 0) return
+  let el: HTMLAudioElement | HTMLVideoElement | null = null
+  for (const i in medias) {
+    if (medias[i] === (fscurrent || media.value)) {
+      el = medias[+i + 1] || medias[0]
+      break
+    }
+  }
+  if (!el) return
+  if (el.tagName === "VIDEO" && document.fullscreenElement === media.value) {
+    // Fullscreen needs to use the current video element for the next video
+    // because we are not allowed to fullscreen the next one.
+    // FIXME: Write our own player to avoid this problem...
+    const elem = media.value as HTMLVideoElement
+    const playing = el as HTMLVideoElement
+    if (elem === playing) {
+      playing.play()  // Only one video, just replay
+      return
+    }
+    if (!fscurrent) {
+      elem.addEventListener('fullscreenchange', ev => {
+        if (!fscurrent) return
+        // Restore the original video element and continue with the one that was playing
+        fscurrent.currentTime = elem.currentTime
+        fscurrent.click()
+        if (!elem.paused) fscurrent.play()
+        fscurrent = null
+        elem.src = props.doc.url
+        elem.poster = poster.value
+        onpaused()
+      }, {once: true})
+    }
+    fscurrent = playing
+    elem.src = playing.src
+    elem.poster = ''
+    elem.play()
+  } else {
+    document.exitFullscreen()
+    el.click()
+  }
+}
 defineExpose({
  play() {
-    if (media.value) {
-      if (media.value.paused) media.value.play()
-      else media.value.pause()
-      return true
+    if (!media.value) return false
+    if (media.value.paused) {
+      media.value.play()
+      for (const el of Array.from(document.querySelectorAll('video, audio')) as (HTMLAudioElement | HTMLVideoElement)[]) {
+        if (el === media.value) continue
+        el.pause()
+      }
+    } else {
+      media.value.pause()
    }
-    return false
+    return true
  },
+  media,
 })


@ -34,28 +101,20 @@ const video = () => ['mkv', 'mp4', 'webm', 'mov', 'avi'].includes(props.doc.ext)
 const audio = () => ['mp3', 'flac', 'ogg', 'aac'].includes(props.doc.ext)
 const archive = () => ['zip', 'tar', 'gz', 'bz2', 'xz', '7z', 'rar'].includes(props.doc.ext)
 const preview = () => (
+  ['bmp', 'ico', 'tif', 'tiff', 'heic', 'heif', 'pdf', 'epub', 'mobi'].includes(props.doc.ext) ||
  props.doc.size > 500000 &&
-  ['png', 'bmp', 'ico', 'webp', 'avif', 'jpg', 'jpeg'].includes(props.doc.ext)
+  ['avif', 'webp', 'png', 'jpg', 'jpeg'].includes(props.doc.ext)
 )
 </script>

 <style scoped>
-img, embed, .icon {
-  font-size: 10em;
-  border-radius: .5rem;
+img, embed, .icon, audio, video {
+  font-size: 8em;
  overflow: hidden;
-  text-align: center;
-  object-fit: cover;
-  object-position: center;
-  min-width: 50%;
-  height: 100%;
-}
-audio, video {
-  height: 100%;
  min-width: 50%;
  max-width: 100%;
-  padding-bottom: 2rem;
-  margin: auto;
+  max-height: 100%;
+  border-radius: calc(.5em / 8);
 }
 .folder::before {
  content: '📁';
@ -78,21 +137,30 @@ audio, video {
 .ext-torrent::before {
  content: '🏴‍☠️';
 }
+.audio audio {
+  opacity: 0;
+  transition: opacity var(--transition-time) ease-in-out;
+}
+.audio:hover audio {
+  opacity: 1;
+}
+.audio.icon::before {
+  width: 100%;
+  content: '🔈';
+}
+.audio.icon:has(audio[data-playing])::before {
+  position: absolute;
+  content: '🔊';
+  bottom: 0;
+}
 .icon {
  filter: brightness(0.9);
 }
 figure.cursor .icon {
  filter: brightness(1);
 }
-img::before, video::before {
+img::before {
  /* broken image */
-  background: #888;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  text-align: center;
  text-shadow: 0 0 .5rem #000;
  filter: grayscale(1);
  content: '❌';
--- a/frontend/src/components/ModalDialog.vue
+++ b/frontend/src/components/ModalDialog.vue
@ -1,34 +1,45 @@
 <template>
-  <dialog ref="dialog">
+  <dialog v-if="store.dialog === name" ref="dialog" :id=props.name @keydown.escape=close>
    <h1 v-if="props.title">{{ props.title }}</h1>
    <div>
      <slot>
        Dialog with no content
-        <button onclick="dialog.close()">OK</button>
+        <button @click=close>OK</button>
      </slot>
    </div>
  </dialog>
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watchEffect, nextTick } from 'vue'
+import { useMainStore } from '@/stores/main'

 const dialog = ref<HTMLDialogElement | null>(null)
+const store = useMainStore()

-const props = withDefaults(
-  defineProps<{
-    title: string
-  }>(),
-  {
-    title: ''
-  }
-)
-const show = () => {
-  dialog.value!.showModal()
+const close = () => {
+  dialog.value!.close()
+  store.dialog = ''
 }
-defineExpose({ show })
-onMounted(() => {
-  show()
+
+const props = defineProps<{
+    title: string,
+    name: typeof store.dialog,
+  }>()
+
+const show = () => {
+  store.dialog = props.name
+  setTimeout(() => {
+    dialog.value!.showModal()
+    nextTick(() => {
+      const input = dialog.value!.querySelector('input')
+      if (input) input.focus()
+    })
+  }, 0)
+}
+defineExpose({ show, close })
+watchEffect(() => {
+  if (dialog.value) show()
 })
 </script>

--- a/frontend/src/components/SelectBox.vue
+++ b/frontend/src/components/SelectBox.vue
@ -1,5 +1,5 @@
 <template>
-  <input type=checkbox tabindex=-1 :checked="store.selected.has(doc.key)"
+  <input type=checkbox tabindex=-1 :checked="store.selected.has(doc.key)" @click.stop
    @change="ev => {
      if ((ev.target as HTMLInputElement).checked) {
        store.selected.add(doc.key)
--- a/frontend/src/components/SettingsModal.vue
+++ b/frontend/src/components/SettingsModal.vue
@ -0,0 +1,127 @@
+<template>
+  <ModalDialog name=settings title="Settings">
+    <form>
+      <template v-if="store.user.isLoggedIn">
+        <h3>Update your authentication</h3>
+        <div class="login-container">
+          <label for="username">New password:</label>
+          <input
+            ref="passwordChange"
+            id="passwordChange"
+            type="password"
+            autocomplete="new-password"
+            spellcheck="false"
+            autocorrect="off"
+            v-model="form.passwordChange"
+          />
+          <label for="password">Current password:</label>
+          <input
+            ref="password"
+            id="password"
+            name="password"
+            type="password"
+            autocomplete="current-password"
+            spellcheck="false"
+            autocorrect="off"
+            v-model="form.password"
+          />
+        </div>
+        <h3 class="error-text">
+          {{ form.error || '\u00A0' }}
+        </h3>
+        <div class="dialog-buttons">
+          <input id="close" type="reset" value="Close" class="button" @click=close />
+          <div class="spacer"></div>
+          <input id="submit" type="submit" value="Submit" class="button" @click.prevent="submit" />
+        </div>
+      </template>
+      <template v-else>
+        <p>No settings are available because you have not logged in.</p>
+        <div class="dialog-buttons">
+          <div class="spacer"></div>
+          <input id="close" type="reset" value="Close" class="button" @click=close />
+        </div>
+      </template>
+    </form>
+  </ModalDialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { changePassword } from '@/repositories/User'
+import type { ISimpleError } from '@/repositories/Client'
+import { useMainStore } from '@/stores/main'
+
+const confirmLoading = ref<boolean>(false)
+const store = useMainStore()
+const passwordChange = ref()
+const password = ref()
+
+const form = reactive({
+  passwordChange: '',
+  password: '',
+  error: ''
+})
+
+const close = () => {
+  form.passwordChange = ''
+  form.password = ''
+  form.error = ''
+  store.dialog = ''
+}
+const submit = async (ev: Event) => {
+  ev.preventDefault()
+  try {
+    form.error = ''
+    if (form.passwordChange) {
+      if (!form.password) {
+        form.error = '⚠️ Current password is required'
+        password.value!.focus()
+        return
+      }
+      await changePassword(store.user.username, form.passwordChange, form.password)
+    }
+    close()
+  } catch (error) {
+    const httpError = error as ISimpleError
+    form.error = httpError.message || '🛑 Unknown error'
+  } finally {
+    confirmLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 2fr;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem 0;
+}
+.dialog-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.button-login {
+  color: #fff;
+  background: var(--soft-color);
+  cursor: pointer;
+  font-weight: bold;
+  border: 0;
+  border-radius: .5rem;
+  padding: .5rem 2rem;
+  margin-left: auto;
+  transition: all var(--transition-time) linear;
+}
+.button-login:hover, .button-login:focus {
+  background: var(--accent-color);
+  box-shadow: 0 0 .3rem #000;
+}
+.error-text {
+  color: var(--red-color);
+  height: 1em;
+}
+</style>
--- a/frontend/src/components/TransferBar.vue
+++ b/frontend/src/components/TransferBar.vue
@ -0,0 +1,94 @@
+<template>
+  <div class="transferprogress" v-if="status.total" :style="`background: linear-gradient(to right, var(--bar) 0, var(--bar) ${percent}%, var(--nobar) ${percent}%, var(--nobar) 100%);`">
+    <div class="statustext">
+      <span v-if="status.filecount > 1" class="index">
+        [{{ status.fileidx }}/{{ status.filecount }}]
+      </span>
+      <span class="filename">{{ status.filename.split('/').pop() }}
+        <span v-if="status.filesize > 1e7" class="percent">
+          {{ (status.filepos / status.filesize * 100).toFixed(0) + '\u202F%' }}
+        </span>
+      </span>
+      <span class="position" v-if="status.total > 1e7">
+        {{ (status.xfer / 1e6).toFixed(0) + '\u202F/\u202F' + (status.total / 1e6).toFixed(0) + '\u202FMB' }}
+      </span>
+      <span class="speed">{{ speeddisp }}</span>
+      <button class="close" @click="$emit('cancel')">❌</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineEmits(['cancel'])
+
+const props = defineProps<{
+  status: {
+    total: number
+    xfer: number
+    filecount: number
+    fileidx: number
+    filesize: number
+    filepos: number
+    filename: string
+    statbytes: number
+    statdur: number
+    tlast: number
+  }
+}>()
+
+const percent = computed(() => props.status.xfer / props.status.total * 100)
+const speed = computed(() => {
+  let s = props.status.statbytes / props.status.statdur / 1e3
+  const tsince = (Date.now() - props.status.tlast) / 1e3
+  if (tsince > 5 / s) return 0  // Less than fifth of previous speed => stalled
+  if (tsince > 1 / s) return 1 / tsince  // Next block is late or not coming, decay
+  return s  // "Current speed"
+})
+const speeddisp = computed(() => speed.value ? speed.value.toFixed(speed.value < 10 ? 1 : 0) + '\u202FMB/s': 'stalled')
+
+</script>
+
+<style scoped>
+.transferprogress {
+  --bar: var(--accent-color);
+  --nobar: var(--header-background);
+  display: flex;
+  flex-direction: column;
+  color: var(--primary-color);
+  width: 100%;
+}
+.statustext {
+  display: flex;
+  align-items: center;
+  margin: 0 .5em;
+  padding: 0.5rem 0;
+}
+span {
+  color: #ccc;
+  white-space: nowrap;
+  text-align: right;
+  padding: 0 0.5em;
+}
+.filename {
+  color: #fff;
+  flex: 1 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+.index { min-width: 3.5em }
+.position { min-width: 4em }
+.speed { min-width: 4em }
+
+.upload .statustext::before {
+  font-size: 1.5em;
+  content: '🔺'
+}
+.download .statustext::before {
+  font-size: 1.5em;
+  content: '🔻'
+}
+</style>
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@ -1,8 +1,17 @@
+<template>
+  <template>
+    <input ref="fileInput" @change="uploadHandler" type="file" multiple>
+    <input ref="folderInput" @change="uploadHandler" type="file" webkitdirectory>
+  </template>
+  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileInput.click()" />
+  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.click()" />
+</template>
+
 <script setup lang="ts">
 import { connect, uploadUrl } from '@/repositories/WS';
 import { useMainStore } from '@/stores/main'
 import { collator } from '@/utils';
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'

 const fileInput = ref()
 const folderInput = ref()
@ -94,7 +103,7 @@ const cancelUploads = () => {

 const uprogress_init = {
  total: 0,
-  uploaded: 0,
+  xfer: 0,
  t0: 0,
  tlast: 0,
  statbytes: 0,
@ -108,59 +117,50 @@ const uprogress_init = {
  filepos: 0,
  status: 'idle',
 }
-const uprogress = reactive({...uprogress_init})
-const percent = computed(() => uprogress.uploaded / uprogress.total * 100)
-const speed = computed(() => {
-  let s = uprogress.statbytes / uprogress.statdur / 1e3
-  const tsince = (Date.now() - uprogress.tlast) / 1e3
-  if (tsince > 5 / s) return 0  // Less than fifth of previous speed => stalled
-  if (tsince > 1 / s) return 1 / tsince  // Next block is late or not coming, decay
-  return s  // "Current speed"
-})
-const speeddisp = computed(() => speed.value ? speed.value.toFixed(speed.value < 10 ? 1 : 0) + '\u202FMB/s': 'stalled')
+store.uprogress = {...uprogress_init}
 setInterval(() => {
-  if (Date.now() - uprogress.tlast > 3000) {
+  if (Date.now() - store.uprogress.tlast > 3000) {
    // Reset
-    uprogress.statbytes = 0
-    uprogress.statdur = 1
+    store.uprogress.statbytes = 0
+    store.uprogress.statdur = 1
  } else {
    // Running average by decay
-    uprogress.statbytes *= .9
-    uprogress.statdur *= .9
+    store.uprogress.statbytes *= .9
+    store.uprogress.statdur *= .9
  }
 }, 100)
 const statUpdate = ({name, size, start, end}: {name: string, size: number, start: number, end: number}) => {
-  if (name !== uprogress.filename) return  // If stats have been reset
+  if (name !== store.uprogress.filename) return  // If stats have been reset
  const now = Date.now()
-  uprogress.uploaded = uprogress.filestart + end
-  uprogress.filepos = end
-  uprogress.statbytes += end - start
-  uprogress.statdur += now - uprogress.tlast
-  uprogress.tlast = now
+  store.uprogress.xfer = store.uprogress.filestart + end
+  store.uprogress.filepos = end
+  store.uprogress.statbytes += end - start
+  store.uprogress.statdur += now - store.uprogress.tlast
+  store.uprogress.tlast = now
  // File finished?
  if (end === size) {
-    uprogress.filestart += size
+    store.uprogress.filestart += size
    statNextFile()
-    if (++uprogress.fileidx >= uprogress.filecount) statReset()
+    if (++store.uprogress.fileidx >= store.uprogress.filecount) statReset()
  }
 }
 const statNextFile = () => {
-  const f = uprogress.files.shift()
+  const f = store.uprogress.files.shift()
  if (!f) return statReset()
-  uprogress.filepos = 0
-  uprogress.filesize = f.file.size
-  uprogress.filename = f.cloudName
+  store.uprogress.filepos = 0
+  store.uprogress.filesize = f.file.size
+  store.uprogress.filename = f.cloudName
 }
 const statReset = () => {
-  Object.assign(uprogress, uprogress_init)
-  uprogress.t0 = Date.now()
-  uprogress.tlast = uprogress.t0 + 1
+  Object.assign(store.uprogress, uprogress_init)
+  store.uprogress.t0 = Date.now()
+  store.uprogress.tlast = store.uprogress.t0 + 1
 }
 const statsAdd = (f: CloudFile[]) => {
-  if (uprogress.files.length === 0) statReset()
-  uprogress.total += f.reduce((a, b) => a + b.file.size, 0)
-  uprogress.filecount += f.length
-  uprogress.files = [...uprogress.files, ...f]
+  if (store.uprogress.files.length === 0) statReset()
+  store.uprogress.total += f.reduce((a, b) => a + b.file.size, 0)
+  store.uprogress.filecount += f.length
+  store.uprogress.files = [...store.uprogress.files, ...f]
  statNextFile()
 }
 let upqueue = [] as CloudFile[]
@ -190,7 +190,7 @@ const WSCreate = async () => await new Promise<WebSocket>(resolve => {
  // @ts-ignore
  ws.sendData = async (data: any) => {
    // Wait until the WS is ready to send another message
-    uprogress.status = "uploading"
+    store.uprogress.status = "uploading"
    await new Promise(resolve => {
      const t = setInterval(() => {
        if (ws.bufferedAmount > 1<<20) return
@ -198,7 +198,7 @@ const WSCreate = async () => await new Promise<WebSocket>(resolve => {
        clearInterval(t)
      }, 1)
    })
-    uprogress.status = "processing"
+    store.uprogress.status = "processing"
    ws.send(data)
  }
 })
@ -219,7 +219,7 @@ const worker = async () => {
    if (f.cloudPos === f.file.size) upqueue.shift()
  }
  if (upqueue.length) startWorker()
-  uprogress.status = "idle"
+  store.uprogress.status = "idle"
  workerRunning = false
 }
 let workerRunning: any = false
@ -242,64 +242,3 @@ onUnmounted(() => {
  removeEventListener('drop', uploadHandler)
 })
 </script>
-<template>
-  <template>
-    <input ref="fileInput" @change="uploadHandler" type="file" multiple>
-    <input ref="folderInput" @change="uploadHandler" type="file" webkitdirectory>
-  </template>
-  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileInput.click()" />
-  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.click()" />
-  <div class="uploadprogress" v-if="uprogress.total" :style="`background: linear-gradient(to right, var(--bar) 0, var(--bar) ${percent}%, var(--nobar) ${percent}%, var(--nobar) 100%);`">
-    <div class="statustext">
-      <span v-if="uprogress.filecount > 1" class="index">
-        [{{ uprogress.fileidx }}/{{ uprogress.filecount }}]
-      </span>
-      <span class="filename">{{ uprogress.filename.split('/').pop() }}
-        <span v-if="uprogress.filesize > 1e7" class="percent">
-          {{ (uprogress.filepos / uprogress.filesize * 100).toFixed(0) + '\u202F%' }}
-        </span>
-      </span>
-      <span class="position" v-if="uprogress.total > 1e7">
-        {{ (uprogress.uploaded / 1e6).toFixed(0) + '\u202F/\u202F' + (uprogress.total / 1e6).toFixed(0) + '\u202FMB' }}
-      </span>
-      <span class="speed">{{ speeddisp }}</span>
-      <button class="close" @click="cancelUploads">❌</button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.uploadprogress {
-  --bar: var(--accent-color);
-  --nobar: var(--header-background);
-  display: flex;
-  flex-direction: column;
-  color: var(--primary-color);
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100vw;
-}
-.statustext {
-  display: flex;
-  padding: 0.5rem 0;
-}
-span {
-  color: #ccc;
-  white-space: nowrap;
-  text-align: right;
-  padding: 0 0.5em;
-}
-.filename {
-  color: #fff;
-  flex: 1 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-.index { min-width: 3.5em }
-.position { min-width: 4em }
-.speed { min-width: 4em }
-</style>
-@/stores/main
--- a/frontend/src/repositories/Document.ts
+++ b/frontend/src/repositories/Document.ts
@ -37,15 +37,24 @@ export class Doc {
    return this.url.replace(/^\/#/, '')
  }
  get img(): boolean {
-    const ext = this.name.split('.').pop()?.toLowerCase()
-    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg'].includes(ext || '')
+    // Folders cannot be images
+    if (this.dir) return false
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'heic', 'heif', 'svg'].includes(this.ext)
+  }
+  get previewable(): boolean {
+    // Folders cannot be previewable
+    if (this.dir) return false
+    if (this.img) return true
+    // Not a comprehensive list, but good enough for now
+    return ['mp4', 'mkv', 'webm', 'ogg', 'mp3', 'flac', 'aac', 'pdf'].includes(this.ext)
  }
  get previewurl(): string {
    return this.url.replace(/^\/files/, '/preview')
  }
  get ext(): string {
-    const ext = this.name.split('.').pop()
-    return ext ? ext.toLowerCase() : ''
+    const dotIndex = this.name.lastIndexOf('.')
+    if (dotIndex === -1 || dotIndex === this.name.length - 1) return ''
+    return this.name.slice(dotIndex + 1).toLowerCase()
  }
 }
 export type errorEvent = {
--- a/frontend/src/repositories/User.ts
+++ b/frontend/src/repositories/User.ts
@ -1,6 +1,8 @@
 import Client from '@/repositories/Client'
+import { useMainStore } from '@/stores/main'
 export const url_login = '/login'
-export const url_logout = '/logout '
+export const url_logout = '/logout'
+export const url_password = '/password-change'

 export async function loginUser(username: string, password: string) {
  const user = await Client.post(url_login, {
@ -13,3 +15,12 @@ export async function logoutUser() {
  const data = await Client.post(url_logout)
  return data
 }
+
+export async function changePassword(username: string, passwordChange: string, password: string) {
+  const data = await Client.post(url_password, {
+    username,
+    passwordChange,
+    password
+  })
+  return data
+}
--- a/frontend/src/repositories/WS.ts
+++ b/frontend/src/repositories/WS.ts
@ -53,7 +53,7 @@ export const watchConnect = () => {
    if ('error' in msg) {
      if (msg.error.code === 401) {
        store.user.isLoggedIn = false
-        store.user.isOpenLoginModal = true
+        store.dialog = 'login'
      } else {
        store.error = msg.error.message
      }
@ -67,7 +67,7 @@ export const watchConnect = () => {
      store.error = ''
      if (msg.user) store.login(msg.user.username, msg.user.privileged)
      else if (store.isUserLogged) store.logout()
-      if (!msg.server.public && !msg.user) store.user.isOpenLoginModal = true
+      if (!msg.server.public && !msg.user) store.dialog = 'login'
    }
  })
 }
@ -87,9 +87,14 @@ const watchReconnect = (event: MessageEvent) => {
    store.connected = false
    store.error = 'Reconnecting...'
  }
+  if (watchTimeout !== null) clearTimeout(watchTimeout)
+  // Don't hammer the server while on login dialog
+  if (store.dialog === 'login') {
+    watchTimeout = setTimeout(watchReconnect, 100)
+    return
+  }
  reconnDelay = Math.min(5000, reconnDelay + 500)
  // The server closes the websocket after errors, so we need to reopen it
-  if (watchTimeout !== null) clearTimeout(watchTimeout)
  watchTimeout = setTimeout(watchConnect, reconnDelay)
 }

@ -148,8 +153,8 @@ function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
 function handleError(msg: errorEvent) {
  const store = useMainStore()
  if (msg.error.code === 401) {
-    store.user.isOpenLoginModal = true
    store.user.isLoggedIn = false
+    store.dialog = 'login'
    return
  }
 }
--- a/frontend/src/stores/main.ts
+++ b/frontend/src/stores/main.ts
@ -1,44 +1,50 @@
 import type { FileEntry, FUID, SelectedItems } from '@/repositories/Document'
 import { Doc } from '@/repositories/Document'
-import { defineStore } from 'pinia'
+import { defineStore, type StateTree } from 'pinia'
 import { collator } from '@/utils'
 import { logoutUser } from '@/repositories/User'
 import { watchConnect } from '@/repositories/WS'
 import { shallowRef } from 'vue'
 import { sorted, type SortOrder } from '@/utils/docsort'

-type User = {
-  username: string
-  privileged: boolean
-  isOpenLoginModal: boolean
-  isLoggedIn: boolean
-}
-
 export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    document: shallowRef<Doc[]>([]),
-    selected: new Set<FUID>(),
+    selected: new Set<FUID>([]),
    query: '' as string,
    fileExplorer: null as any,
    error: '' as string,
    connected: false,
    cursor: '' as string,
    server: {} as Record<string, any>,
+    dialog: '' as '' | 'login' | 'settings',
+    uprogress: {} as any,
+    dprogress: {} as any,
    prefs: {
      gallery: false,
      sortListing: '' as SortOrder,
      sortFiltered: '' as SortOrder,
    },
    user: {
-      username: '',
-      privileged: false,
-      isLoggedIn: false,
-      isOpenLoginModal: false
-    } as User
+      username: '' as string,
+      privileged: false as boolean,
+      isLoggedIn: false as boolean,
+    }
  }),
  persist: {
-    paths: ['prefs'],
+    paths: ['prefs', 'cursor', 'selected'],
+    serializer: {
+      deserialize: (data: string): StateTree => {
+        const ret = JSON.parse(data)
+        ret.selected = new Set(ret.selected)
+        return ret
+      },
+      serialize: (tree: StateTree): string => {
+        tree.selected = Array.from(tree.selected)
+        return JSON.stringify(tree)
+      }
+    },
  },
  actions: {
    updateRoot(root: FileEntry[]) {
@ -62,11 +68,11 @@ export const useMainStore = defineStore({
      this.user.username = username
      this.user.privileged = privileged
      this.user.isLoggedIn = true
-      this.user.isOpenLoginModal = false
+      this.dialog = ''
      if (!this.connected) watchConnect()
    },
    loginDialog() {
-      this.user.isOpenLoginModal = true
+      this.dialog = 'login'
    },
    async logout() {
      console.log("Logout")
@ -85,7 +91,13 @@ export const useMainStore = defineStore({
    },
    focusBreadcrumb() {
      (document.querySelector('.breadcrumb') as HTMLAnchorElement).focus()
-    }
+    },
+    cancelDownloads() {
+      location.reload()  // FIXME
+    },
+    cancelUploads() {
+      location.reload()  // FIXME
+    },
  },
  getters: {
    sortOrder(): SortOrder { return this.query ? this.prefs.sortFiltered : this.prefs.sortListing },
--- a/frontend/src/utils/fileutil.ts
+++ b/frontend/src/utils/fileutil.ts
@ -0,0 +1,8 @@
+import { useMainStore } from '@/stores/main'
+
+
+export const exists = (path: string[]) => {
+  const store = useMainStore()
+  const p = path.join('/')
+  return store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === p)
+}
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@ -50,12 +50,11 @@ export function formatUnixDate(t: number) {
 }

 export function getFileExtension(filename: string) {
-  const parts = filename.split('.')
-  if (parts.length > 1) {
-    return parts[parts.length - 1]
-  } else {
-    return '' // No hay extensión
+  const dotIndex = filename.lastIndexOf('.')
+  if (dotIndex === -1 || dotIndex === filename.length - 1) {
+    return '' // No extension
  }
+  return filename.slice(dotIndex + 1)
 }
 interface FileTypes {
  [key: string]: string[]
@ -68,8 +67,9 @@ const filetypes: FileTypes = {
 }

 export function getFileType(name: string): string {
-  const ext = name.split('.').pop()?.toLowerCase()
-  if (!ext || ext.length === name.length) return 'unknown'
+  const dotIndex = name.lastIndexOf('.')
+  if (dotIndex === -1 || dotIndex === name.length - 1) return 'unknown'
+  const ext = name.slice(dotIndex + 1).toLowerCase()
  return Object.keys(filetypes).find(type => filetypes[type].includes(ext)) || 'unknown'
 }

--- a/frontend/src/views/ExplorerView.vue
+++ b/frontend/src/views/ExplorerView.vue
@ -1,14 +1,6 @@
 <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="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found.</p>
-    <p v-else>Empty folder</p>
-  </div>
  <Gallery
-    v-else-if="store.prefs.gallery"
+    v-if="store.prefs.gallery"
    ref="fileExplorer"
    :key="`gallery-${Router.currentRoute.value.path}`"
    :path="props.path"
@ -21,20 +13,16 @@
    :path="props.path"
    :documents="documents"
  />
-  <div v-if="!store.prefs.gallery && documents.some(doc => doc.img)" class="suggest-gallery">
-    <p>Media files found. Would you like a gallery view?</p>
-    <SvgButton name="eye" taborder=0 @click="() => { store.prefs.gallery = true }">Gallery</SvgButton>
-  </div>
+  <EmptyFolder :documents=documents :path=props.path />
 </template>

 <script setup lang="ts">
-import { watchEffect, ref, computed } from 'vue'
+import { watchEffect, ref, computed, watch } from 'vue'
 import { useMainStore } from '@/stores/main'
 import Router from '@/router/index'
 import { needleFormat, localeIncludes, collator } from '@/utils'
 import { sorted } from '@/utils/docsort'
 import FileExplorer from '@/components/FileExplorer.vue'
-import cog from '@/assets/svg/cog.svg'

 const store = useMainStore()
 const fileExplorer = ref()
@ -84,6 +72,10 @@ watchEffect(() => {
  store.fileExplorer = fileExplorer.value
  store.query = props.query
 })
+
+watch(documents, (docs) => {
+  store.prefs.gallery = docs.some(d => d.previewable)
+}, { immediate: true })
 </script>

 <style scoped>
@ -94,30 +86,7 @@ watchEffect(() => {
  justify-content: center;
  height: 100%;
  font-size: 2rem;
-  text-shadow: 0 0 1rem #000, 0 0 2rem #000;
+  text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
  color: var(--accent-color);
 }
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
-}
-.suggest-gallery p {
-  font-size: 2rem;
-  color: var(--accent-color);
-}
-.suggest-gallery {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-svg.cog {
-  width: 10rem;
-  height: 10rem;
-  margin: 0 auto;
-  animation: rotate 10s linear infinite;
-  filter: drop-shadow(0 0 1rem black);
-  fill: var(--primary-color);
-}
 </style>
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -4,12 +4,11 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

 // @ts-ignore
-import pluginRewriteAll from 'vite-plugin-rewrite-all'
 import svgLoader from 'vite-svg-loader'
 import Components from 'unplugin-vue-components/vite'

 // Development mode:
-// npm run dev           # Run frontend that proxies to dev_backend
+// bun run dev           # Run frontend that proxies to dev_backend
 // cista -l :8000 --dev  # Run backend
 const dev_backend = {
  target: "http://localhost:8000",
@ -21,7 +20,6 @@ const dev_backend = {
 export default defineConfig({
  plugins: [
    vue(),
-    pluginRewriteAll(),
    svgLoader(),          // import svg files
    Components(),         // auto import components
  ],
@ -44,6 +42,7 @@ export default defineConfig({
      "/files": dev_backend,
      "/login": dev_backend,
      "/logout": dev_backend,
+      "/password-change": dev_backend,
      "/zip": dev_backend,
      "/preview": dev_backend,
    }
--- a/pyproject.toml
+++ b/pyproject.toml
@ -10,23 +10,38 @@ readme = "README.md"
 authors = [
    { name = "Vasanko" },
 ]
+maintainers = [
+    { name = "Vasanko" },
+]
+keywords = ["file-server", "web-interface", "dropbox", "storage"]
 classifiers = [
+    "Development Status :: 5 - Production/Stable",
+    "Environment :: Web Environment",
+    "Intended Audience :: End Users/Desktop",
+    "Intended Audience :: System Administrators",
+    "License :: Public Domain",
+    "License :: OSI Approved :: MIT License",
 ]
 requires-python = ">=3.11"
 dependencies = [
-    "argon2-cffi",
-    "blake3",
-    "brotli",
-    "docopt",
-    "inotify",
-    "msgspec",
-    "natsort",
-    "pathvalidate",
-    "pillow",
-    "pyjwt",
-    "sanic",
-    "stream-zip",
-    "tomli_w",
+    "argon2-cffi>=25.1.0",
+    "av>=15.0.0",
+    "blake3>=1.0.5",
+    "brotli>=1.1.0",
+    "docopt>=0.6.2",
+    "inotify>=0.2.12",
+    "msgspec>=0.19.0",
+    "natsort>=8.4.0",
+    "numpy>=2.3.2",
+    "pathvalidate>=3.3.1",
+    "pillow>=11.3.0",
+    "pillow-heif>=1.1.0",
+    "pyjwt>=2.10.1",
+    "pymupdf>=1.26.3",
+    "sanic>=25.3.0",
+    "setproctitle>=1.3.6",
+    "stream-zip>=0.0.83",
+    "tomli_w>=1.2.0",
 ]

 [project.urls]
@ -37,8 +52,19 @@ cista = "cista.__main__:main"

 [project.optional-dependencies]
 dev = [
-    "pytest",
-    "ruff",
+    "pytest>=8.4.1",
+    "ruff>=0.8.0",
+    "mypy>=1.13.0",
+    "pre-commit>=4.0.0",
+]
+test = [
+    "pytest>=8.4.1",
+    "pytest-cov>=6.0.0",
+    "pytest-asyncio>=0.25.0",
+]
+docs = [
+    "sphinx>=8.0.0",
+    "sphinx-rtd-theme>=3.0.0",
 ]

 [tool.hatch.version]
@ -46,57 +72,83 @@ source = "vcs"

 [tool.hatch.build]
 artifacts = ["cista/wwwroot"]
-hooks.custom.path = "scripts/build-frontend.py"
+targets.sdist.hooks.custom.path = "scripts/build-frontend.py"
+targets.sdist.include = [
+    "/cista",
+]
 hooks.vcs.version-file = "cista/_version.py"
 hooks.vcs.template = """
 # This file is automatically generated by hatch build.
 __version__ = {version!r}
 """
 only-packages = true
-targets.sdist.include = [
-    "/cista",
-]

 [tool.pytest.ini_options]
 addopts = [
    "--import-mode=importlib",
-    "--verbosity=-1",
-    "-p no:warnings",
+    "--verbosity=2",
+    "--strict-markers",
+    "--strict-config",
+    "--cov=cista",
+    "--cov-report=term-missing",
+    "--cov-report=html",
+    "--cov-branch",
 ]
-testpaths = [
-    "tests",
+testpaths = ["tests"]
+python_files = ["test_*.py", "*_test.py"]
+python_classes = ["Test*"]
+python_functions = ["test_*"]
+markers = [
+    "slow: marks tests as slow (deselect with '-m \"not slow\"')",
+    "integration: marks tests as integration tests",
+]
+filterwarnings = [
+    "error",
+    "ignore::UserWarning",
+    "ignore::DeprecationWarning",
 ]

-[tool.ruff]
-select = ["ALL"]
-ignore = [
-    "A0",
-    "ARG001",
-    "ANN",
-    "B018",
-    "BLE001",
-    "C901",
-    "COM812",  # conflicts with ruff format
-    "D",
-    "E501",
-    "EM1",
-    "FIX002",
-    "ISC001",  # conflicts with ruff format
-    "PGH003",
-    "PLR0912",
-    "PLR2004",
-    "PLW0603",
-    "S101",
-    "SLF001",
-    "T201",
-    "TD0",
-    "TRY",
+[tool.ruff.lint]
+isort.known-first-party = ["cista"]
+per-file-ignores."tests/*" = ["S", "ANN", "D", "INP", "PLR2004"]
+per-file-ignores."scripts/*" = ["T20"]
+
+[dependency-groups]
+dev = [
+    "pytest>=8.4.1",
+    "ruff>=0.8.0",
+    "mypy>=1.13.0",
+    "pre-commit>=4.0.0",
+]
+test = [
+    "pytest>=8.4.1",
+    "pytest-cov>=6.0.0",
+    "pytest-asyncio>=0.25.0",
 ]
-show-source = true
-show-fixes = true

-[tool.ruff.isort]
-known-first-party = ["cista"]
+[tool.coverage.run]
+source = ["cista"]
+branch = true
+omit = [
+    "*/tests/*",
+    "*/test_*",
+    "*/__pycache__/*",
+    "cista/_version.py",
+]

-[tool.ruff.per-file-ignores]
-"tests/*" = ["S", "ANN", "D", "INP"]
+[tool.coverage.report]
+exclude_lines = [
+    "pragma: no cover",
+    "def __repr__",
+    "if self.debug:",
+    "if settings.DEBUG",
+    "raise AssertionError",
+    "raise NotImplementedError",
+    "if 0:",
+    "if __name__ == .__main__.:",
+    "class .*\\bProtocol\\):",
+    "@(abc\\.)?abstractmethod",
+]
+show_missing = true
+skip_covered = false
+precision = 2
--- a/scripts/build-frontend.py
+++ b/scripts/build-frontend.py
@ -1,5 +1,8 @@
 # noqa: INP001
+import os
+import shutil
 import subprocess
+from sys import stderr

 from hatchling.builders.hooks.plugin.interface import BuildHookInterface

@ -7,6 +10,28 @@ from hatchling.builders.hooks.plugin.interface import BuildHookInterface
 class CustomBuildHook(BuildHookInterface):
    def initialize(self, version, build_data):
        super().initialize(version, build_data)
-        print("Building Cista frontend...")
-        subprocess.run("npm install --prefix frontend".split(" "), check=True)  # noqa: S603
-        subprocess.run("npm run build --prefix frontend".split(" "), check=True)  # noqa: S603
+        stderr.write(">>> Building Cista frontend\n")
+        npm = None
+        bun = shutil.which("bun")
+        if bun is None:
+            npm = shutil.which("npm")
+            if npm is None:
+                raise RuntimeError(
+                    "Bun or NodeJS `npm` is required for building but neither was found\n  Visit https://bun.com/"
+                )
+        # npm --prefix doesn't work on Windows, so we chdir instead
+        os.chdir("frontend")
+        try:
+            if npm:
+                stderr.write("### npm install\n")
+                subprocess.run([npm, "install"], check=True)  # noqa: S603
+                stderr.write("\n### npm run build\n")
+                subprocess.run([npm, "run", "build"], check=True)  # noqa: S603
+            else:
+                assert bun
+                stderr.write("### bun install\n")
+                subprocess.run([bun, "install"], check=True)  # noqa: S603
+                stderr.write("\n### bun run build\n")
+                subprocess.run([bun, "run", "build"], check=True)  # noqa: S603
+        finally:
+            os.chdir("..")
--- a/tests/test_watching.py
+++ b/tests/test_watching.py
@ -1,10 +1,7 @@
-from pathlib import PurePosixPath
-
 import msgspec
-import pytest

 from cista.protocol import FileEntry, UpdateMessage, UpdDel, UpdIns, UpdKeep
-from cista.watching import State, format_update
+from cista.watching import format_update


 def decode(data: str):
@ -37,6 +34,14 @@ def test_insertions():
    assert decode(format_update(old_list, new_list)) == expected


+def test_insertion_at_end():
+    old_list = [*f(3), FileEntry(1, "xxx", "xxx", 0, 0, 1)]
+    newfile = FileEntry(1, "yyy", "yyy", 0, 0, 1)
+    new_list = [*old_list, newfile]
+    expected = [UpdKeep(4), UpdIns([newfile])]
+    assert decode(format_update(old_list, new_list)) == expected
+
+
 def test_deletions():
    old_list = f(3)
    new_list = [old_list[0], old_list[2]]
@ -83,54 +88,3 @@ def test_longer_lists():
 def sortkey(name):
    # Define the sorting key for names here
    return name.lower()
-
-
-@pytest.fixture()
-def state():
-    entries = [
-        FileEntry(0, "", "root", 0, 0, 0),
-        FileEntry(1, "bar", "bar", 0, 0, 0),
-        FileEntry(2, "baz", "bar/baz", 0, 0, 0),
-        FileEntry(1, "foo", "foo", 0, 0, 0),
-        FileEntry(1, "xxx", "xxx", 0, 0, 0),
-        FileEntry(2, "yyy", "xxx/yyy", 0, 0, 1),
-    ]
-    s = State()
-    s._listing = entries
-    return s
-
-
-def test_existing_directory(state):
-    path = PurePosixPath("bar")
-    expected_slice = slice(1, 3)  # Includes 'bar' and 'baz'
-    assert state._slice(path) == expected_slice
-
-
-def test_existing_file(state):
-    path = PurePosixPath("xxx/yyy")
-    expected_slice = slice(5, 6)  # Only includes 'yyy'
-    assert state._slice(path) == expected_slice
-
-
-def test_nonexistent_directory(state):
-    path = PurePosixPath("zzz")
-    expected_slice = slice(6, 6)  # 'zzz' would be inserted at end
-    assert state._slice(path) == expected_slice
-
-
-def test_nonexistent_file(state):
-    path = (PurePosixPath("bar/mmm"), 1)
-    expected_slice = slice(3, 3)  # A file would be inserted after 'baz' under 'bar'
-    assert state._slice(path) == expected_slice
-
-
-def test_root_directory(state):
-    path = PurePosixPath()
-    expected_slice = slice(0, 6)  # Entire tree
-    assert state._slice(path) == expected_slice
-
-
-def test_directory_with_subdirs_and_files(state):
-    path = PurePosixPath("xxx")
-    expected_slice = slice(4, 6)  # Includes 'xxx' and 'yyy'
-    assert state._slice(path) == expected_slice
Author	SHA1	Message	Date
Leo Vasanko	091d57dba7	Fix typing and import in the config file module.	2025-08-17 10:31:54 -06:00
Leo Vasanko	69a897cfec	Startup banner with version display, and --version, using stderr/stdout properly.	2025-08-17 10:31:18 -06:00
Leo Vasanko	33db2c01b4	Cleaner server shutdowns: - Remove a workaround for Sanic server not always terminating cleanly - Terminate worker threads before server stop - Silent closing of watching WebSocket attempted to open while shutting down	2025-08-17 08:15:01 -06:00
Leo Vasanko	26addb2f7b	Image previews improved, all EXIF Orientations handled.	2025-08-17 07:00:52 -06:00
Leo Vasanko	ce6d60e588	Cleanup for release 1.0.0.	2025-08-15 11:11:57 -06:00
Leo Vasanko	073f1a8707	Maintenance update (#7 ) - Use modern tooling uv and bun - Various changes to work with latest PyAV and PIL that have changed their API - Improved image, video and document previews (uses AVIF, renders AVIF/HEIC/videos in HDR, faster processing) - Fix a server hang in some cases where a folder was moved or renamed - Log exceptions instead of only returning 500 response to client - Log timing of preview generation functions - Default to quality 50 in previews (previously 40)	2025-08-15 18:03:04 +01:00
Leo Vasanko	f38bb4bab9	Better transparent Cista image	2023-11-25 17:25:35 +00:00
Leo Vasanko	26f9bef087	Correct hatch build hook	2023-11-21 20:11:37 +00:00
Leo Vasanko	634dabe52d	Less messy breadcrumbs on search results in gallery	2023-11-21 17:51:38 +00:00
Leo Vasanko	a383358369	Fix direct uploads and downloads, transfer bar UI	2023-11-21 16:13:46 +00:00
Leo Vasanko	369dc3ecaf	Fixed New Folder, added Rename to Gallery	2023-11-21 15:49:33 +00:00
Leo Vasanko	0cf9c254e5	Various build fixes, cleanup and details (#6 ) - Major memory usage reduction in video previews - Finally builds properly on Windows too Reviewed-on: #6	2023-11-21 15:32:49 +00:00
Leo Vasanko	58b9dd3dd4	Cleanup	2023-11-20 16:35:34 -08:00
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