Inotify is still missing some changes, prefer polling for now.

.gitignore

@@ -1,5 +1,4 @@
 .*
-*.lock
 !.gitignore
 __pycache__/
 *.egg-info/

README.md

@@ -1,123 +1,27 @@
-# Cista Web Storage
-
-<img src="https://git.zi.fi/Vasanko/cista-storage/raw/branch/main/docs/cista.webp" align=left width=250>
-
-Cista takes its name from the ancient *cistae*, metal containers used by Greeks and Egyptians to safeguard valuable items. This modern application provides a browser interface for secure and accessible file storage, echoing the trust and reliability of its historical namesake.
-
-This is a cutting-edge **file and document server** designed for speed, efficiency, and unparalleled ease of use. Experience **lightning-fast browsing**, thanks to the file list maintained directly in your browser and updated from server filesystem events, coupled with our highly optimized code. Fully **keyboard-navigable** and with a responsive layout, Cista flawlessly adapts to your devices, providing a seamless experience wherever you are. Our powerful **instant search** means you're always just a few keystrokes away from finding exactly what you need. Press **1/2/3** to switch ordering, navigate with all four arrow keys (+Shift to select). Or click your way around on **breadcrumbs that remember where you were**.
-
-**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.
-
-Experience Cista by visiting [Cista Demo](https://drop.zi.fi) for a test run and perhaps upload something...
-
-
-## Getting Started
-### Running the Server
-
-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
-uvx cista --user yourname --privileged
-```
-
-Serve your files at http://localhost:8000:
-```fish
-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
-
-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`:
-
-```Caddyfile
-cista.example.com {
-    reverse_proxy :8000
-}
-```
-
-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 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`:
-
-```ini
-[Unit]
-Description=Cista storage %i
-
-[Service]
-User=storage
-ExecStart=uvx cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
-Restart=always
-
-[Install]
-WantedBy=multi-user.target
-```
-
-This setup supports multiple storages, each under `/media/storage/<domain>` for files and `/srv/cista/<domain>/` for configuration. UNIX sockets are used instead of numeric ports for convenience.
-
-```fish
-systemctl daemon-reload
-systemctl enable --now cista@foo.example.com
-systemctl enable --now cista@bar.example.com
-```
-
-Public exposure is easiest using the Caddy web server.
-
-`/etc/caddy/Caddyfile`:
-
-```Caddyfile
-foo.example.com, bar.example.com {
-    reverse_proxy unix//srv/cista/{host}/socket
-}
-```
-
-## 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.
+# Web File Storage
+
+Run directly from repository with Hatch (or use pip install as usual):
+
+```sh
+hatch run cista -l :3000 /path/to/files
+```
+
+Settings incl. these arguments are stored to config file on the first startup and later `hatch run cista` is sufficient. If the `cista` script is missing, consider `pip install -e .` (within `hatch shell`) or some other trickery (known issue with installs made prior to adding the startup script).
+
+Create your user account:
+
+```sh
+hatch run cista --user admin --privileged
+```
+
+## Build frontend
+
+Frontend needs to be built before using and after any frontend changes:
+
+```sh
+cd frontend
+npm install
+npm run build
+```
+
+This will place the front in `cista/wwwroot` from where the backend server delivers it, and that also gets included in the Python package built via `hatch build`.

cista/__main__.py

@@ -1,4 +1,3 @@
-import os
 import sys
 from pathlib import Path
 
@@ -10,24 +9,8 @@ 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]
@@ -51,14 +34,6 @@ 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
@@ -68,19 +43,11 @@ def main():
     try:
         return _main()
     except Exception as e:
-        sys.stderr.write(f"Error: {e}\n")
+        print("Error:", e)
         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)
@@ -95,10 +62,13 @@ def _main():
     _confdir(args)
     exists = config.conffile.exists()
     import_droppy = args["--import-droppy"]
-    necessary_opts = exists or import_droppy or path
+    necessary_opts = exists or import_droppy or path and listen
     if not necessary_opts:
         # Maybe run without arguments
-        sys.stderr.write(first_time_help)
+        print(doc)
+        print(
+            "No config file found! Get started with:\n  cista -l :8000 /path/to/files, or\n  cista -l example.com --import-droppy  # Uses Droppy files\n",
+        )
         return 1
     settings = {}
     if import_droppy:
@@ -109,17 +79,10 @@ def _main():
         settings = droppy.readconf()
     if path:
         settings["path"] = path
-    elif not exists:
-        settings["path"] = Path.home() / "Downloads"
     if listen:
         settings["listen"] = listen
-    elif not exists:
-        settings["listen"] = ":8000"
-    if not exists and not import_droppy:
-        # We have no users, so make it public
-        settings["public"] = True
     operation = config.update_config(settings)
-    sys.stderr.write(f"Config {operation}: {config.conffile}\n")
+    print(f"Config {operation}: {config.conffile}")
     # Prepare to serve
     unix = None
     url, _ = serve.parse_listen(config.config.listen)
@@ -129,7 +92,7 @@ def _main():
     dev = args["--dev"]
     if dev:
         extra += " (dev mode)"
-    sys.stderr.write(f"Serving {config.config.path} at {url}{extra}\n")
+    print(f"Serving {config.config.path} at {url}{extra}")
     # Run the server
     serve.run(dev=dev)
     return 0
@@ -144,29 +107,16 @@ def _confdir(args):
                 raise ValueError("Config path is not a directory")
             # Accidentally pointed to the db.toml, use parent
             confdir = confdir.parent
-        os.environ["CISTA_HOME"] = confdir.as_posix()
-    config.init_confdir()  # Uses environ if available
+        config.conffile = confdir / config.conffile.name
 
 
 def _user(args):
     _confdir(args)
-    if config.conffile.exists():
-        config.load_config()
-        operation = False
-    else:
-        # Defaults for new config when user is created
-        operation = config.update_config(
-            {
-                "listen": ":8000",
-                "path": Path.home() / "Downloads",
-                "public": False,
-            }
-        )
-        sys.stderr.write(f"Config {operation}: {config.conffile}\n\n")
-
+    config.load_config()
     name = args["--user"]
     if not name or not name.isidentifier():
         raise ValueError("Invalid username")
+    config.load_config()
     u = config.config.users.get(name)
     info = f"User {name}" if u else f"New user {name}"
     changes = {}
@@ -178,16 +128,11 @@ def _user(args):
         info += " (admin)" if oldadmin else ""
     if args["--password"] or not u:
         changes["password"] = pw = pwgen.generate()
-        info += f"\n  Password: {pw}\n"
-    res = config.update_user(name, changes)
-    sys.stderr.write(f"{info}\n")
+        info += f"\n  Password: {pw}"
+    res = config.update_user(args["--user"], changes)
+    print(info)
     if res == "read":
-        sys.stderr.write("  No changes\n")
-
-    if operation == "created":
-        sys.stderr.write(
-            "Now you can run the server:\n  cista    # defaults set: -l :8000 ~/Downloads\n"
-        )
+        print("  No changes")
 
 
 if __name__ == "__main__":

cista/api.py

@@ -37,23 +37,16 @@ async def upload(req, ws):
             )
         req = msgspec.json.decode(text, type=FileRange)
         pos = req.start
-        while True:
-            data = await ws.recv()
-            if not isinstance(data, bytes):
-                break
-            if len(data) > req.end - pos:
-                raise ValueError(
-                    f"Expected up to {req.end - pos} bytes, got {len(data)} bytes"
-                )
+        data = None
+        while pos < req.end and (data := await ws.recv()) and isinstance(data, bytes):
             sentsize = await alink(("upload", req.name, pos, data, req.size))
             pos += typing.cast(int, sentsize)
-            if pos >= req.end:
-                break
         if pos != req.end:
             d = f"{len(data)} bytes" if isinstance(data, bytes) else data
             raise ValueError(f"Expected {req.end - pos} more bytes, got {d}")
         # Report success
         res = StatusMsg(status="ack", req=req)
+        print("ack", res)
         await asend(ws, res)
 
 
@@ -111,28 +104,13 @@ async def watch(req, ws):
     )
     uuid = token_bytes(16)
     try:
-        q, space, root = await asyncio.get_event_loop().run_in_executor(
-            req.app.ctx.threadexec, subscribe, uuid, ws
-        )
-        await ws.send(space)
-        await ws.send(root)
+        with watching.state.lock:
+            q = watching.pubsub[uuid] = asyncio.Queue()
+            # Init with disk usage and full tree
+            await ws.send(watching.format_space(watching.state.space))
+            await ws.send(watching.format_root(watching.state.root))
         # 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:
-        watching.pubsub.pop(uuid, None)  # Remove whether it got added yet or not
-
-
-def subscribe(uuid, ws):
-    with watching.state.lock:
-        q = watching.pubsub[uuid] = asyncio.Queue()
-        # Init with disk usage and full tree
-        return (
-            q,
-            watching.format_space(watching.state.space),
-            watching.format_root(watching.state.root),
-        )
+        del watching.pubsub[uuid]

cista/app.py

@@ -1,24 +1,21 @@
 import asyncio
 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
 from wsgiref.handlers import format_date_time
 
+import brotli
 import sanic.helpers
 from blake3 import blake3
-from sanic import Blueprint, Sanic, empty, raw, redirect
-from sanic.exceptions import Forbidden, NotFound
-from sanic.log import logger
-from setproctitle import setproctitle
+from sanic import Blueprint, Sanic, empty, raw
+from sanic.exceptions import Forbidden, NotFound, ServerError
+from sanic.log import logging
 from stream_zip import ZIP_AUTO, stream_zip
-from zstandard import ZstdCompressor
 
-from cista import auth, config, preview, session, watching
+from cista import auth, config, session, watching
 from cista.api import bp
 from cista.util.apphelpers import handle_sanic_exception
 
@@ -27,32 +24,23 @@ sanic.helpers._ENTITY_HEADERS = frozenset()
 
 app = Sanic("cista", strict_slashes=True)
 app.blueprint(auth.bp)
-app.blueprint(preview.bp)
 app.blueprint(bp)
 app.exception(Exception)(handle_sanic_exception)
 
 
-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()))
+    await watching.start(app, loop)
     app.ctx.threadexec = ThreadPoolExecutor(
-        max_workers=workers, thread_name_prefix="cista-ioworker"
+        max_workers=8, thread_name_prefix="cista-ioworker"
     )
-    watching.start(app, loop)
 
 
-# Sanic sometimes fails to execute after_server_stop, so we do it before instead (potentially interrupting handlers)
-@app.before_server_stop
+@app.after_server_stop
 async def main_stop(app, loop):
-    quit.set()
-    watching.stop(app)
+    await watching.stop(app, loop)
     app.ctx.threadexec.shutdown()
-    logger.debug("Cista worker threads all finished")
 
 
 @app.on_request
@@ -95,7 +83,6 @@ def _load_wwwroot(www):
     wwwnew = {}
     base = Path(__file__).with_name("wwwroot")
     paths = [PurePath()]
-    zstd = ZstdCompressor(level=10)
     while paths:
         path = paths.pop(0)
         current = base / path
@@ -127,25 +114,16 @@ def _load_wwwroot(www):
                 else "no-cache",
                 "content-type": mime,
             }
-            # Precompress with ZSTD
-            zs = zstd.compress(data)
-            if len(zs) >= len(data):
-                zs = False
-            wwwnew[name] = data, zs, headers
+            # Precompress with Brotli
+            br = brotli.compress(data)
+            if len(br) >= len(data):
+                br = False
+            wwwnew[name] = data, br, headers
     if not wwwnew:
-        msg = f"Web frontend missing from {base}\n  Did you forget: hatch build\n"
-        if not www:
-            logger.warning(msg)
-        if not app.debug:
-            msg = "Web frontend missing. Cista installation is broken.\n"
-        wwwnew[""] = (
-            msg.encode(),
-            False,
-            {
-                "etag": "error",
-                "content-type": "text/plain",
-                "cache-control": "no-store",
-            },
+        raise ServerError(
+            "Web frontend missing. Did you forget npm run build?",
+            extra={"wwwroot": str(base)},
+            quiet=True,
         )
     return wwwnew
 
@@ -154,7 +132,7 @@ def _load_wwwroot(www):
 async def start(app):
     await load_wwwroot(app)
     if app.debug:
-        app.add_task(refresh_wwwroot(), name="refresh_wwwroot")
+        app.add_task(refresh_wwwroot())
 
 
 async def load_wwwroot(app):
@@ -164,31 +142,27 @@ async def load_wwwroot(app):
     )
 
 
-quit = threading.Event()
-
-
 async def refresh_wwwroot():
-    try:
-        while not quit.is_set():
-            try:
-                wwwold = www
-                await load_wwwroot(app)
-                changes = ""
-                for name in sorted(www):
-                    attr = www[name]
-                    if wwwold.get(name) == attr:
-                        continue
-                    headers = attr[2]
-                    changes += f"{headers['last-modified']} {headers['etag']} /{name}\n"
-                for name in sorted(set(wwwold) - set(www)):
-                    changes += f"Deleted /{name}\n"
-                if changes:
-                    logger.info(f"Updated wwwroot:\n{changes}", end="", flush=True)
-            except Exception as e:
-                logger.error(f"Error loading wwwroot: {e!r}")
-            await asyncio.sleep(0.5)
-    except asyncio.CancelledError:
-        pass
+    while True:
+        await asyncio.sleep(0.5)
+        try:
+            wwwold = www
+            await load_wwwroot(app)
+            changes = ""
+            for name in sorted(www):
+                attr = www[name]
+                if wwwold.get(name) == attr:
+                    continue
+                headers = attr[2]
+                changes += f"{headers['last-modified']} {headers['etag']} /{name}\n"
+            for name in sorted(set(wwwold) - set(www)):
+                changes += f"Deleted /{name}\n"
+            if changes:
+                print(f"Updated wwwroot:\n{changes}", end="", flush=True)
+        except Exception as e:
+            print("Error loading wwwroot", e)
+        if not app.debug:
+            return
 
 
 @app.route("/<path:path>", methods=["GET", "HEAD"])
@@ -197,23 +171,17 @@ async def wwwroot(req, path=""):
     name = unquote(path)
     if name not in www:
         raise NotFound(f"File not found: /{path}", extra={"name": name})
-    data, zs, headers = www[name]
+    data, br, headers = www[name]
     if req.headers.if_none_match == headers["etag"]:
         # The client has it cached, respond 304 Not Modified
         return empty(304, headers=headers)
-    # Zstandard compressed?
-    if zs and "zstd" in req.headers.accept_encoding.split(", "):
-        headers = {**headers, "content-encoding": "zstd"}
-        data = zs
+    # Brotli compressed?
+    if br and "br" in req.headers.accept_encoding.split(", "):
+        headers = {**headers, "content-encoding": "br"}
+        data = br
     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
@@ -274,7 +242,7 @@ async def zip_download(req, keys, zipfile, ext):
             for chunk in stream_zip(local_files(files)):
                 asyncio.run_coroutine_threadsafe(queue.put(chunk), loop).result()
         except Exception:
-            logger.exception("Error streaming ZIP")
+            logging.exception("Error streaming ZIP")
             raise
         finally:
             asyncio.run_coroutine_threadsafe(queue.put(None), loop)

cista/auth.py

@@ -10,7 +10,6 @@ from sanic import Blueprint, html, json, redirect
 from sanic.exceptions import BadRequest, Forbidden, Unauthorized
 
 from cista import config, session
-from cista.util import pwgen
 
 _argon = argon2.PasswordHasher()
 _droppyhash = re.compile(r"^([a-f0-9]{64})\$([a-f0-9]{8})$")
@@ -72,7 +71,7 @@ def verify(request, *, privileged=False):
             raise Forbidden("Access Forbidden: Only for privileged users", quiet=True)
     elif config.config.public or request.ctx.user:
         return
-    raise Unauthorized(f"Login required for {request.path}", "cookie", quiet=True)
+    raise Unauthorized("Login required", "cookie", quiet=True)
 
 
 bp = Blueprint("auth")
@@ -160,135 +159,3 @@ 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
-
-
-@bp.get("/users")
-async def list_users(request):
-    verify(request, privileged=True)
-    users = []
-    for name, user in config.config.users.items():
-        users.append(
-            {
-                "username": name,
-                "privileged": user.privileged,
-                "lastSeen": user.lastSeen,
-            }
-        )
-    return json({"users": users})
-
-
-@bp.post("/users")
-async def create_user(request):
-    verify(request, privileged=True)
-    try:
-        if request.headers.content_type == "application/json":
-            username = request.json["username"]
-            password = request.json.get("password")
-            privileged = request.json.get("privileged", False)
-        else:
-            username = request.form["username"][0]
-            password = request.form.get("password", [None])[0]
-            privileged = request.form.get("privileged", ["false"])[0].lower() == "true"
-        if not username or not username.isidentifier():
-            raise ValueError("Invalid username")
-    except (KeyError, ValueError) as e:
-        raise BadRequest(str(e)) from e
-    if username in config.config.users:
-        raise BadRequest("User already exists")
-    if not password:
-        password = pwgen.generate()
-    changes = {"privileged": privileged}
-    changes["hash"] = _argon.hash(_pwnorm(password))
-    try:
-        config.update_user(username, changes)
-    except Exception as e:
-        raise BadRequest(str(e)) from e
-    return json({"message": f"User {username} created", "password": password})
-
-
-@bp.put("/users/<username>")
-async def update_user(request, username):
-    verify(request, privileged=True)
-    try:
-        if request.headers.content_type == "application/json":
-            changes = request.json
-        else:
-            changes = {}
-            if "password" in request.form:
-                changes["password"] = request.form["password"][0]
-            if "privileged" in request.form:
-                changes["privileged"] = request.form["privileged"][0].lower() == "true"
-    except KeyError as e:
-        raise BadRequest("Missing fields") from e
-    password_response = None
-    if "password" in changes:
-        if changes["password"] == "":
-            changes["password"] = pwgen.generate()
-        password_response = changes["password"]
-        changes["hash"] = _argon.hash(_pwnorm(changes["password"]))
-        del changes["password"]
-    if not changes:
-        return json({"message": "No changes"})
-    try:
-        config.update_user(username, changes)
-    except Exception as e:
-        raise BadRequest(str(e)) from e
-    response = {"message": f"User {username} updated"}
-    if password_response:
-        response["password"] = password_response
-    return json(response)
-
-
-@bp.delete("/users/<username>")
-async def delete_user(request, username):
-    verify(request, privileged=True)
-    if username not in config.config.users:
-        raise BadRequest("User does not exist")
-    try:
-        config.del_user(username)
-    except Exception as e:
-        raise BadRequest(str(e)) from e
-    return json({"message": f"User {username} deleted"})
-
-
-@bp.put("/config/public")
-async def update_public(request):
-    verify(request, privileged=True)
-    try:
-        public = request.json["public"]
-    except KeyError:
-        raise BadRequest("Missing public field") from None
-    config.update_config({"public": public})
-    return json({"message": "Public setting updated"})

cista/config.py

@@ -1,17 +1,12 @@
 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 sleep, time
-from typing import Callable, Concatenate, Literal, ParamSpec
+from time import time
 
 import msgspec
-import msgspec.toml
 
 
 class Config(msgspec.Struct):
@@ -24,13 +19,6 @@ 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 = ""
@@ -43,24 +31,8 @@ class Link(msgspec.Struct, omit_defaults=True):
     expires: int = 0
 
 
-# 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"
+config = None
+conffile = Path.home() / ".local/share/cista/db.toml"
 
 
 def derived_secret(*params, len=8) -> bytes:
@@ -86,10 +58,10 @@ def dec_hook(typ, obj):
     raise TypeError
 
 
-def config_update(
-    modify: RawModifyFunc,
-) -> ResultStr | Literal["collision"]:
+def config_update(modify):
     global config
+    if not conffile.exists():
+        conffile.parent.mkdir(parents=True, exist_ok=True)
     tmpname = conffile.with_suffix(".tmp")
     try:
         f = tmpname.open("xb")
@@ -103,8 +75,12 @@ def config_update(
             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 = Config(path=Path(), listen="", secret=secrets.token_hex(12))
+            c = None
         c = modify(c)
         new = msgspec.toml.encode(c, enc_hook=enc_hook)
         if old == new:
@@ -114,10 +90,6 @@ def config_update(
             return "read"
         f.write(new)
         f.close()
-        if sys.platform == "win32":
-            # Windows doesn't support atomic replace
-            with suppress(FileNotFoundError):
-                conffile.unlink()
         tmpname.rename(conffile)  # Atomic replace
     except:
         f.close()
@@ -127,23 +99,17 @@ def config_update(
     return "modified" if old else "created"
 
 
-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.
-    """
+def modifies_config(modify):
+    """Decorator for functions that modify the config file"""
 
     @wraps(modify)
-    def wrapper(*args: P.args, **kwargs: P.kwargs) -> ResultStr:
-        def m(c: Config) -> Config:
+    def wrapper(*args, **kwargs):
+        def m(c):
             return modify(c, *args, **kwargs)
 
         # Retry modification in case of write collision
         while (c := config_update(m)) == "collision":
-            sleep(0.01)
+            time.sleep(0.01)
         return c
 
     return wrapper
@@ -151,7 +117,6 @@ def modifies_config(
 
 def load_config():
     global config
-    init_confdir()
     config = msgspec.toml.decode(conffile.read_bytes(), type=Config, dec_hook=dec_hook)
 
 
@@ -159,7 +124,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 = msgspec.to_builtins(conf, enc_hook=enc_hook)
+    settings = {} if conf is None else msgspec.to_builtins(conf, enc_hook=enc_hook)
     settings.update(changes)
     return msgspec.convert(settings, Config, dec_hook=dec_hook)
 
@@ -169,12 +134,7 @@ 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:
-        # 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,
-        )
+        u = conf.users[name].__copy__()
     except KeyError:
         u = User()
     if "password" in changes:
@@ -192,7 +152,6 @@ def update_user(conf: Config, name: str, changes: dict) -> Config:
 @modifies_config
 def del_user(conf: Config, name: str) -> Config:
     """Delete named user account."""
-    # 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)
+    ret = conf.__copy__()
+    ret.users.pop(name)
+    return ret

cista/fileio.py

@@ -34,11 +34,9 @@ class File:
             self.open_rw()
         assert self.fd is not None
         if file_size is not None:
-            assert pos + len(buffer) <= file_size
             os.ftruncate(self.fd, file_size)
-        if buffer:
-            os.lseek(self.fd, pos, os.SEEK_SET)
-            os.write(self.fd, buffer)
+        os.lseek(self.fd, pos, os.SEEK_SET)
+        os.write(self.fd, buffer)
 
     def __getitem__(self, slice):
         if self.fd is None:

cista/preview.py

@@ -1,237 +0,0 @@
-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, 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"""
-    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")
-
-    img = await asyncio.get_event_loop().run_in_executor(
-        req.app.ctx.threadexec, dispatch, path, quality, maxsize, maxzoom
-    )
-    return raw(img, headers=headers)
-
-
-def dispatch(path, quality, maxsize, maxzoom):
-    if path.suffix.lower() in (".pdf", ".xps", ".epub", ".mobi"):
-        return process_pdf(path, quality=quality, maxsize=maxsize, maxzoom=maxzoom)
-    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()
-    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

cista/protocol.py

@@ -112,7 +112,7 @@ class ErrorMsg(msgspec.Struct):
 ## Directory listings
 
 
-class FileEntry(msgspec.Struct, array_like=True, frozen=True):
+class FileEntry(msgspec.Struct, array_like=True):
     level: int
     name: str
     key: str
@@ -120,14 +120,12 @@ class FileEntry(msgspec.Struct, array_like=True, frozen=True):
     size: int
     isfile: int
 
-    def __str__(self):
+    def __repr__(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"):
@@ -151,3 +149,15 @@ class Space(msgspec.Struct):
     free: int
     usage: int
     storage: int
+
+
+def make_dir_data(root):
+    if len(root) == 3:
+        return FileEntry(*root)
+    id_, size, mtime, listing = root
+    converted = {}
+    for name, data in listing.items():
+        converted[name] = make_dir_data(data)
+    sz = sum(x.size for x in converted.values())
+    mt = max(x.mtime for x in converted.values())
+    return DirEntry(id_, sz, max(mt, mtime), converted)

cista/serve.py

@@ -1,6 +1,6 @@
 import os
 import re
-from pathlib import Path
+from pathlib import Path, PurePath
 
 from sanic import Sanic
 
@@ -15,6 +15,7 @@ def run(*, dev=False):
     # Silence Sanic's warning about running in production rather than debug
     os.environ["SANIC_IGNORE_PRODUCTION_WARNING"] = "1"
     confdir = config.conffile.parent
+    wwwroot = PurePath(__file__).parent / "wwwroot"
     if opts.get("ssl"):
         # Run plain HTTP redirect/acme server on port 80
         server80.app.prepare(port=80, motd=False)
@@ -26,6 +27,7 @@ def run(*, dev=False):
         motd=False,
         dev=dev,
         auto_reload=dev,
+        reload_dir={confdir, wwwroot},
         access_log=True,
     )  # type: ignore
     if dev:
@@ -50,7 +52,7 @@ def parse_listen(listen):
             raise ValueError(
                 f"Directory for unix socket does not exist: {unix.parent}/",
             )
-        return "http://localhost", {"unix": unix.as_posix()}
+        return "http://localhost", {"unix": unix}
     if re.fullmatch(r"(\w+(-\w+)*\.)+\w{2,}", listen, re.UNICODE):
         return f"https://{listen}", {"host": listen, "port": 443, "ssl": True}
     try:

cista/util/apphelpers.py

@@ -21,6 +21,7 @@ def jres(data, **kwargs):
 
 
 async def handle_sanic_exception(request, e):
+    logger.exception(e)
     context, code = {}, 500
     message = str(e)
     if isinstance(e, SanicException):
@@ -29,8 +30,6 @@ 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(
@@ -43,7 +42,7 @@ async def handle_sanic_exception(request, e):
         res.cookies.add_cookie("message", message, max_age=5)
         return res
     # Otherwise use Sanic's default error page
-    return errorpages.HTMLRenderer(request, e, debug=request.app.debug).render()
+    return errorpages.HTMLRenderer(request, e, debug=request.app.debug).full()
 
 
 def websocket_wrapper(handler):
@@ -55,14 +54,13 @@ def websocket_wrapper(handler):
             auth.verify(request)
             await handler(request, ws, *args, **kwargs)
         except Exception as e:
+            logger.exception(e)
             context, code, message = {}, 500, str(e) or "Internal Server Error"
             if isinstance(e, SanicException):
                 context = e.context or {}
                 code = e.status_code
             message = f"⚠️ {message}" if code < 500 else f"🛑 {message}"
             await asend(ws, ErrorMsg({"code": code, "message": message, **context}))
-            if not getattr(e, "quiet", False) or code == 500:
-                logger.exception(f"{code} {e!r}")
             raise
 
     return wrapper

cista/util/lrucache.py

@@ -1,5 +1,4 @@
 from time import monotonic
-from typing import Callable
 
 
 class LRUCache:
@@ -13,7 +12,7 @@ class LRUCache:
         cache (list): Internal list storing the cache items.
     """
 
-    def __init__(self, open: Callable, *, capacity: int, maxage: float):
+    def __init__(self, open: callable, *, capacity: int, maxage: float):
         """
         Initialize LRUCache.
 
@@ -51,6 +50,7 @@ class LRUCache:
         # Add/restore to end of cache
         self.cache.insert(0, (key, f, monotonic()))
         self.expire_items()
+        print(self.cache)
         return f
 
     def expire_items(self):

cista/watching.py

@@ -1,16 +1,15 @@
 import asyncio
 import shutil
+import stat
 import sys
 import threading
 import time
-from contextlib import suppress
 from os import stat_result
 from pathlib import Path, PurePosixPath
-from stat import S_ISDIR, S_ISREG
 
 import msgspec
 from natsort import humansorted, natsort_keygen, ns
-from sanic.log import logger
+from sanic.log import logging
 
 from cista import config
 from cista.fileio import fuid
@@ -24,7 +23,7 @@ class State:
     def __init__(self):
         self.lock = threading.RLock()
         self._space = Space(0, 0, 0, 0)
-        self.root: list[FileEntry] = []
+        self._listing: list[FileEntry] = []
 
     @property
     def space(self):
@@ -36,282 +35,280 @@ class State:
         with self.lock:
             self._space = space
 
+    @property
+    def root(self) -> list[FileEntry]:
+        with self.lock:
+            return self._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
+    @root.setter
+    def root(self, listing: list[FileEntry]):
+        with self.lock:
+            self._listing = listing
 
+    def _slice(self, idx: PurePosixPath | tuple[PurePosixPath, int]):
+        relpath, relfile = idx if isinstance(idx, tuple) else (idx, 0)
+        begin, end = 0, len(self._listing)
+        level = 0
+        isfile = 0
 
-def treeget(rootmod: list[FileEntry], path: PurePosixPath):
-    begin = None
-    ret = []
+        # Special case for root
+        if not relpath.parts:
+            return slice(begin, end)
 
-    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
+        begin += 1
+        for part in relpath.parts:
             level += 1
-            continue
+            found = False
 
-        ename = rel.parts[level - 1]
-        name = relpath.parts[level - 1]
+            while begin < end:
+                entry = self._listing[begin]
 
-        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:
+                    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)
-        )
+                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
 
-        if cmp > 0:
-            return i
-        if cmp < 0:
-            continue
+                begin += 1
 
-        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
+            if not found:
+                return slice(begin, begin)
 
-    return i
+        # Found the starting point, now find the end of the slice
+        for end in range(begin + 1, len(self._listing) + 1):
+            if end == len(self._listing) or self._listing[end].level <= level:
+                break
+        return slice(begin, end)
+
+    def __getitem__(self, index: PurePosixPath | tuple[PurePosixPath, int]):
+        with self.lock:
+            return self._listing[self._slice(index)]
+
+    def __setitem__(
+        self, index: tuple[PurePosixPath, int], value: list[FileEntry]
+    ) -> None:
+        rel, isfile = index
+        with self.lock:
+            if rel.parts:
+                parent = self._slice(rel.parent)
+                if parent.start == parent.stop:
+                    raise ValueError(
+                        f"Parent folder {rel.as_posix()} is missing for {rel.name}"
+                    )
+            self._listing[self._slice(index)] = value
+
+    def __delitem__(self, relpath: PurePosixPath):
+        with self.lock:
+            del self._listing[self._slice(relpath)]
+
+    def _index(self, rel: PurePosixPath):
+        idx = 0
+        ret = []
+
+    def _dir(self, idx: int):
+        level = self._listing[idx].level + 1
+        end = len(self._listing)
+        idx += 1
+        ret = []
+        while idx < end and (r := self._listing[idx]).level >= level:
+            if r.level == level:
+                ret.append(idx)
+        return ret, idx
+
+    def update(self, rel: PurePosixPath, value: FileEntry):
+        begin = 0
+        parents = []
+        while self._listing[begin].level < len(rel.parts):
+            parents.append(begin)
 
 
 state = State()
 rootpath: Path = None  # type: ignore
-quit = threading.Event()
-
-## Filesystem scanning
+quit = False
+modified_flags = (
+    "IN_CREATE",
+    "IN_DELETE",
+    "IN_DELETE_SELF",
+    "IN_MODIFY",
+    "IN_MOVE_SELF",
+    "IN_MOVED_FROM",
+    "IN_MOVED_TO",
+)
 
 
-def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]:
+def watcher_thread(loop):
+    global rootpath
+    import inotify.adapters
+
+    while True:
+        rootpath = config.config.path
+        i = inotify.adapters.InotifyTree(rootpath.as_posix())
+        # Initialize the tree from filesystem
+        new = walk()
+        with state.lock:
+            old = state.root
+            if old != new:
+                state.root = new
+                broadcast(format_update(old, new), loop)
+
+        # The watching is not entirely reliable, so do a full refresh every minute
+        refreshdl = time.monotonic() + 60.0
+
+        for event in i.event_gen():
+            if quit:
+                return
+            # Disk usage update
+            du = shutil.disk_usage(rootpath)
+            space = Space(*du, storage=state.root[0].size)
+            if space != state.space:
+                state.space = space
+                broadcast(format_space(space), loop)
+                break
+            # Do a full refresh?
+            if time.monotonic() > refreshdl:
+                break
+            if event is None:
+                continue
+            _, flags, path, filename = event
+            if not any(f in modified_flags for f in flags):
+                continue
+            # Update modified path
+            path = PurePosixPath(path) / filename
+            try:
+                update(path.relative_to(rootpath), loop)
+            except Exception as e:
+                print("Watching error", e, path, rootpath)
+                raise
+        i = None  # Free the inotify object
+
+
+def watcher_thread_poll(loop):
+    global rootpath
+
+    while not quit:
+        rootpath = config.config.path
+        new = walk()
+        with state.lock:
+            old = state.root
+            if old != new:
+                state.root = new
+                broadcast(format_update(old, new), loop)
+
+        # Disk usage update
+        du = shutil.disk_usage(rootpath)
+        space = Space(*du, storage=state.root[0].size)
+        if space != state.space:
+            state.space = space
+            broadcast(format_space(space), loop)
+
+        time.sleep(2.0)
+
+
+def walk(rel=PurePosixPath()) -> list[FileEntry]:  # noqa: B008
+    path = rootpath / rel
+    try:
+        st = path.stat()
+    except OSError:
+        return []
+    return _walk(rel, int(not stat.S_ISDIR(st.st_mode)), st)
+
+
+def _walk(rel: PurePosixPath, isfile: int, st: stat_result) -> list[FileEntry]:
+    entry = FileEntry(
+        level=len(rel.parts),
+        name=rel.name,
+        key=fuid(st),
+        mtime=int(st.st_mtime),
+        size=st.st_size if isfile else 0,
+        isfile=isfile,
+    )
+    if isfile:
+        return [entry]
+    ret = [entry]
     path = rootpath / rel
-    ret = []
     try:
-        st = stat or path.stat()
-        isfile = int(not S_ISDIR(st.st_mode))
-        entry = FileEntry(
-            level=len(rel.parts),
-            name=rel.name,
-            key=fuid(st),
-            mtime=int(st.st_mtime),
-            size=st.st_size if isfile else 0,
-            isfile=isfile,
-        )
-        if isfile:
-            return [entry]
-        # Walk all entries of the directory
-        ret: list[FileEntry] = [...]  # type: ignore
         li = []
         for f in path.iterdir():
-            if quit.is_set():
-                raise SystemExit("quit")
             if f.name.startswith("."):
                 continue  # No dotfiles
-            with suppress(FileNotFoundError):
-                s = f.lstat()
-                isfile = S_ISREG(s.st_mode)
-                isdir = S_ISDIR(s.st_mode)
-                if not isfile and not isdir:
-                    continue
-                li.append((int(isfile), f.name, s))
-        # Build the tree as a list of FileEntries
-        for [_, name, s] in humansorted(li):
-            sub = walk(rel / name, stat=s)
-            child = sub[0]
-            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)
+            s = f.stat()
+            li.append((int(not stat.S_ISDIR(s.st_mode)), f.name, s))
+        for [isfile, name, s] in humansorted(li):
+            subtree = _walk(rel / name, isfile, s)
+            child = subtree[0]
+            entry.mtime = max(entry.mtime, child.mtime)
+            entry.size += child.size
+            ret.extend(subtree)
     except FileNotFoundError:
         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
+        print("OS error walking path", path, e)
     return ret
 
 
-def update_root(loop):
-    """Full filesystem scan"""
-    old = state.root
-    new = walk(PurePosixPath())
-    if old != new:
-        update = format_update(old, new)
-        with state.lock:
-            broadcast(update, loop)
-            state.root = new
-
-
-def update_path(rootmod: list[FileEntry], relpath: PurePosixPath, loop):
-    """Called on FS updates, check the filesystem and broadcast any changes."""
+def update(relpath: PurePosixPath, loop):
+    """Called by inotify updates, check the filesystem and broadcast any changes."""
+    if rootpath is None or relpath is None:
+        print("ERROR", rootpath, relpath)
     new = walk(relpath)
-    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):
-    """Called periodically to update the disk usage."""
-    du = shutil.disk_usage(rootpath)
-    space = Space(*du, storage=state.root[0].size)
-    # Update only on difference above 1 MB
-    tol = 10**6
-    old = msgspec.structs.astuple(state.space)
-    new = msgspec.structs.astuple(space)
-    if any(abs(o - n) > tol for o, n in zip(old, new, strict=True)):
-        state.space = space
-        broadcast(format_space(space), loop)
-
-
-## Messaging
+    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)
 
 
 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
-        while oidx < len(old) and old[oidx] not in nremain:
-            oremain.remove(old[oidx])
+        rest = new[nidx:]
+        while oidx < len(old) and old[oidx] not in rest:
             del_count += 1
             oidx += 1
         if del_count:
             update.append(UpdDel(del_count))
             continue
 
-        # Items only in new are inserted
         insert_items = []
-        while nidx < len(new) and new[nidx] not in oremain:
-            entry = new[nidx]
-            nremain.discard(entry)
-            insert_items.append(entry)
+        rest = old[oidx:]
+        while nidx < len(new) and new[nidx] not in rest:
+            insert_items.append(new[nidx])
             nidx += 1
-        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
+        update.append(UpdIns(insert_items))
 
     # Diff any remaining
     if keep_count > 0:
         update.append(UpdKeep(keep_count))
-    if oremain:
-        update.append(UpdDel(len(oremain)))
-    elif nremain:
+    if oidx < len(old):
+        update.append(UpdDel(len(old) - oidx))
+    elif nidx < len(new):
         update.append(UpdIns(new[nidx:]))
 
     return msgspec.json.encode({"update": update}).decode()
@@ -335,125 +332,20 @@ async def abroadcast(msg):
             queue.put_nowait(msg)
     except Exception:
         # Log because asyncio would silently eat the error
-        logger.exception("Broadcast error")
+        logging.exception("Broadcast error")
 
 
-## Watcher thread
-
-
-def watcher_inotify(loop):
-    """Inotify watcher thread (Linux only)"""
-    import inotify.adapters
-
-    modified_flags = (
-        "IN_CREATE",
-        "IN_DELETE",
-        "IN_DELETE_SELF",
-        "IN_MODIFY",
-        "IN_MOVE_SELF",
-        "IN_MOVED_FROM",
-        "IN_MOVED_TO",
-    )
-    while not quit.is_set():
-        i = inotify.adapters.InotifyTree(rootpath.as_posix())
-        # Initialize the tree from filesystem
-        update_root(loop)
-        trefresh = time.monotonic() + 300.0
-        tspace = time.monotonic() + 5.0
-        # Watch for changes (frequent wakeups needed for quiting)
-        while not quit.is_set():
-            t = time.monotonic()
-            # The watching is not entirely reliable, so do a full refresh every 30 seconds
-            if t >= trefresh:
-                break
-            # Disk usage update
-            if t >= tspace:
-                tspace = time.monotonic() + 5.0
-                update_space(loop)
-            # Inotify events, update the tree
-            dirty = False
-            rootmod = state.root[:]
-            for event in i.event_gen(yield_nones=False, timeout_s=0.1):
-                assert event
-                if quit.is_set():
-                    return
-                interesting = any(f in modified_flags for f in event[1])
-                if 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
-
-
-def watcher_poll(loop):
-    """Polling version of the watcher thread."""
-    while not quit.is_set():
-        t0 = time.perf_counter()
-        update_root(loop)
-        update_space(loop)
-        dur = time.perf_counter() - t0
-        if dur > 1.0:
-            logger.debug(f"Reading the full file list took {dur:.1f}s")
-        quit.wait(0.1 + 8 * dur)
-
-
-def start(app, loop):
-    global rootpath
+async def start(app, loop):
     config.load_config()
-    rootpath = config.config.path
-    use_inotify = sys.platform == "linux"
+    use_inotify = False and sys.platform == "linux"
     app.ctx.watcher = threading.Thread(
-        target=watcher_inotify if use_inotify else watcher_poll,
+        target=watcher_thread if use_inotify else watcher_thread_poll,
         args=[loop],
-        # Descriptive name for system monitoring
-        name=f"cista-watcher {rootpath}",
     )
     app.ctx.watcher.start()
 
 
-def stop(app):
-    quit.set()
+async def stop(app, loop):
+    global quit
+    quit = True
     app.ctx.watcher.join()

frontend/.npmrc

@@ -1,2 +0,0 @@
-audit=false
-fund=false

frontend/README.md

@@ -1,46 +1,40 @@
-# Cista Vue Frontend
-
-The frontend is a Single-Page App implemented with Vue 3. Development uses the Vite server together with the main Python backend, but in production the latter also serves the prebuilt frontend files.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Hot-Reload for Development
-
-### Run the backend
-
-```fish
-uv sync --dev
-uv run cista --dev -l :8000
-```
-
-### And the Vite server (in another terminal)
-
-```fish
-cd frontend
-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 `uv build` during Python packaging:
-
-```fish
-bun run build
-```
-
+# cista-front
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

frontend/env.d.ts

@@ -1,7 +1 @@
 /// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

frontend/index.html

@@ -8,4 +8,5 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 <script type="module" src="/src/main.ts"></script>
-<body id="app">
+
+<div id="app"></div>

frontend/package.json

@@ -12,9 +12,6 @@
     "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",
@@ -24,6 +21,7 @@
     "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"

frontend/src/App.vue

@@ -1,20 +1,14 @@
 <template>
   <LoginModal />
-  <SettingsModal />
-  <UserManagementModal />
   <header>
     <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
       <HeaderSelected :path="path.pathList" />
     </HeaderMain>
-    <BreadCrumb :path="path.pathList" primary />
+    <BreadCrumb :path="path.pathList" tabindex="-1"/>
   </header>
   <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">
@@ -23,20 +17,17 @@ import type { ComputedRef } from 'vue'
 import type HeaderMain from '@/components/HeaderMain.vue'
 import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { loadSession, watchConnect, watchDisconnect } from '@/repositories/WS'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 
 import { computed } from 'vue'
 import Router from '@/router/index'
-import type { SortOrder } from './utils/docsort'
-import type SettingsModalVue from './components/SettingsModal.vue'
-import UserManagementModal from './components/UserManagementModal.vue'
 
 interface Path {
   path: string
   pathList: string[]
   query: string
 }
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const path: ComputedRef<Path> = computed(() => {
   const p = decodeURIComponent(Router.currentRoute.value.path).split('//')
   const pathList = p[0].split('/').filter(value => value !== '')
@@ -48,104 +39,81 @@ const path: ComputedRef<Path> = computed(() => {
   }
 })
 watchEffect(() => {
-  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || store.server.name || 'Cista Storage'
+  document.title = path.value.path.replace(/\/$/, '').split('/').pop() || documentStore.server.name || 'Cista Storage'
 })
 onMounted(loadSession)
 onMounted(watchConnect)
 onUnmounted(watchDisconnect)
+// Update human-readable x seconds ago messages from mtimes
+setInterval(documentStore.updateModified, 1000)
 const headerMain = ref<typeof HeaderMain | null>(null)
 let vert = 0
 let timer: any = null
 const globalShortcutHandler = (event: KeyboardEvent) => {
-  if (store.dialog) {
-    if (timer) {
-      clearTimeout(timer)
-      timer = null
-    }
-    return
-  }
-  const fileExplorer = store.fileExplorer as any
+  const fileExplorer = documentStore.fileExplorer as any
   if (!fileExplorer) return
   const c = fileExplorer.isCursor()
-  const input = (event.target as HTMLElement).tagName === 'INPUT'
   const keyup = event.type === 'keyup'
   if (event.repeat) {
     if (
       event.key === 'ArrowUp' ||
       event.key === 'ArrowDown' ||
-      event.key === 'ArrowLeft' ||
-      event.key === 'ArrowRight' ||
       (c && event.code === 'Space')
     ) {
-      if (!input) event.preventDefault()
+      event.preventDefault()
     }
     return
   }
   //console.log("key pressed", event)
-  /// Long if-else machina for all keys we handle here
-  let arrow = ''
-  if (!input && event.key.startsWith("Arrow")) arrow = event.key.slice(5).toLowerCase()
+  // For up/down implement custom fast repeat
+  if (event.key === 'ArrowUp') vert = keyup ? 0 : event.altKey ? -10 : -1
+  else if (event.key === 'ArrowDown') vert = keyup ? 0 : event.altKey ? 10 : 1
   // Find: process on keydown so that we can bypass the built-in search hotkey
   else if (!keyup && event.key === 'f' && (event.ctrlKey || event.metaKey)) {
     headerMain.value!.toggleSearchInput()
   }
-  // Search also on / (UNIX style)
-  else if (!input && keyup && event.key === '/') {
-    headerMain.value!.toggleSearchInput()
-  }
-  // Globally close search, clear errors on Escape
-  else if (keyup && event.key === 'Escape') {
-    store.error = ''
-    headerMain.value!.closeSearch(event)
-    store.focusBreadcrumb()
-  }
-  else if (!input && keyup && event.key === 'Backspace') {
-    Router.back()
-  }
-  // Select all (toggle); keydown to precede and prevent builtin
-  else if (!input && !keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+  // Select all (toggle); keydown to prevent builtin
+  else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
     fileExplorer.toggleSelectAll()
   }
-  // G toggles Gallery
-  else if (!input && keyup && event.key === 'g') {
-    store.prefs.gallery = !store.prefs.gallery
-  }
-  // Keys Backquote-1-2-3 to sort columns
+  // Keys 1-3 to sort columns
   else if (
-    !input &&
+    c &&
     keyup &&
-    (event.code === 'Backquote' || event.key === '1' || event.key === '2' || event.key === '3')
+    (event.key === '1' || event.key === '2' || event.key === '3')
   ) {
-    store.sort(['', 'name', 'modified', 'size'][+event.key || 0] as SortOrder)
+    fileExplorer.toggleSortColumn(+event.key)
   }
   // Rename
-  else if (!input && c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {
+  else if (c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {
     fileExplorer.cursorRename()
   }
   // Toggle selections on file explorer; ignore all spaces to prevent scrolling built-in hotkey
-  else if (!input && c && event.code === 'Space') {
+  else if (c && event.code === 'Space') {
     if (keyup && !event.altKey && !event.ctrlKey)
       fileExplorer.cursorSelect()
-  }
-  else return
-  /// We are handling this!
+  } else return
   event.preventDefault()
-  if (timer) {
-    clearTimeout(timer) // Good for either timeout or interval
-    timer = null
+  if (!vert) {
+    if (timer) {
+      clearTimeout(timer) // Good for either timeout or interval
+      timer = null
+    }
+    return
   }
-  let f: any
-  switch (arrow) {
-    case 'up': f = () => fileExplorer.up(event); break
-    case 'down': f = () => fileExplorer.down(event); break
-    case 'left': f = () => fileExplorer.left(event); break
-    case 'right': f = () => fileExplorer.right(event); break
-  }
-  if (f && !keyup) {
+  if (!timer) {
     // Initial move, then t0 delay until repeats at tr intervals
-    const t0 = 200, tr = event.altKey ? 20 : 100
-    f()
-    timer = setTimeout(() => { timer = setInterval(f, tr) }, t0 - tr)
+    const select = event.shiftKey
+    fileExplorer.cursorMove(vert, select)
+    const t0 = 200,
+      tr = 30
+    timer = setTimeout(
+      () =>
+        (timer = setInterval(() => {
+          fileExplorer.cursorMove(vert, select)
+        }, tr)),
+      t0 - tr
+    )
   }
 }
 onMounted(() => {

frontend/src/assets/main.css

@@ -14,7 +14,7 @@
   /* The following are overridden by responsive layouts */
   --root-font-size: 1rem;
   --header-font-size: 1rem;
-  --header-height: 4rem;
+  --header-height: calc(6.5 * var(--header-font-size));
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -37,6 +37,12 @@
   :root {
     --root-font-size: calc(8px + 8 * 100vw / 1000);
   }
+  header .buttons:has(input[type='search']) > div {
+    display: none;
+  }
+  header .buttons > div:has(input[type='search']) {
+    display: inherit;
+  }
 }
 @media screen and (min-width: 2000px) {
   :root {
@@ -48,7 +54,6 @@
   :root {
     --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
     --root-font-size: 0.8rem;
-    --header-height: 2rem;
   }
   header .breadcrumb > * {
     padding-top: calc(8 + 8 * 100vh / 600) !important;
@@ -73,13 +78,17 @@
   }
   header {
     display: flex;
+    flex-direction: row-reverse;
     justify-content: space-between;
+    align-items: end;
   }
-  header .headermain { order: 1; }
-  header .breadcrumb { align-self: stretch; }
-  header .action-button {
-    width: 2em;
-    height: 2em;
+  header .breadcrumb {
+    flex-shrink: 1;
+  }
+  header .breadcrumb > * {
+    flex-shrink: 1;
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
   }
 }
 @media print {
@@ -89,10 +98,10 @@
     --header-background: none;
     --header-color: black;
   }
-  .headermain,
+  nav,
   .menu,
   .rename-button {
-    display: none !important;
+    display: none;
   }
   .breadcrumb > a {
     color: black !important;
@@ -107,31 +116,16 @@
   }
   .breadcrumb svg {
     fill: black !important;
-    margin: 0 .5rem 0 1rem !important;
-  }
-  body#app {
-    height: auto !important;
   }
   main {
+    height: auto !important;
     padding-bottom: 0 !important;
   }
   thead tr {
-    font-size: 1rem !important;
     position: static !important;
     background: none !important;
     border-bottom: 1pt solid black !important;
   }
-  audio::-webkit-media-controls-timeline,
-  video::-webkit-media-controls-timeline {
-    display: none;
-  }
-  audio::-webkit-media-controls,
-  video::-webkit-media-controls {
-    display: none;
-  }
-  tr, figure {
-    page-break-inside: avoid;
-  }
   .selection {
     min-width: 0 !important;
     padding: 0 !important;
@@ -148,13 +142,14 @@
     left: 0;
   }
 }
-* {
-  box-sizing: border-box;
-}
 html {
   font-size: var(--root-font-size);
   overflow: hidden;
 }
+/* Hide scrollbar for all browsers */
+main::-webkit-scrollbar {
+  display: none;
+}
 main {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
@@ -171,7 +166,6 @@ 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);
@@ -213,23 +207,21 @@ table {
   border: 0;
   gap: 0;
 }
-body#app {
-  height: 100vh;
+#app {
+  height: 100%;
   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 }
 

frontend/src/components/BreadCrumb.vue

@@ -2,19 +2,14 @@
   <nav
     class="breadcrumb"
     aria-label="Breadcrumb"
-    @keydown.left.stop="move(-1)"
-    @keydown.right.stop="move(1)"
-    @keyup.enter="move(0)"
-    @focus=focusCurrent
-    tabindex=0
+    @keyup.left.stop="move(-1)"
+    @keyup.right.stop="move(1)"
+    @focus="move(0)"
   >
     <a href="#/"
       :ref="el => setLinkRef(0, el)"
-      class="home"
       :class="{ current: !!isCurrent(0) }"
       :aria-current="isCurrent(0)"
-      @click.prevent="navigate(0)"
-      title="/"
     >
       <component :is="home" />
     </a>
@@ -24,7 +19,6 @@
         :aria-current="isCurrent(index + 1)"
         @click.prevent="navigate(index + 1)"
         :ref="el => setLinkRef(index + 1, el)"
-        :title="`/${longest.slice(0, index + 1).join('/')}`"
       >{{ location }}</a>
     </template>
   </nav>
@@ -32,9 +26,8 @@
 
 <script setup lang="ts">
 import home from '@/assets/svg/home.svg'
-import { nextTick, onBeforeUpdate, ref, watchEffect } from 'vue'
+import { onBeforeUpdate, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
-import { exists } from '@/utils/fileutil'
 
 const router = useRouter()
 
@@ -44,33 +37,20 @@ onBeforeUpdate(() => { links.length = 1 })  // 1 to keep home
 
 const props = defineProps<{
   path: Array<string>
-  primary?: boolean
 }>()
 
 const longest = ref<Array<string>>([])
 
 const isCurrent = (index: number) => index == props.path.length ? 'location' : undefined
 
-const focusCurrent = () => {
-  nextTick(() => {
-    const index = props.path.length
-    if (index < links.length) links[index].focus()
-  })
-}
-
 const navigate = (index: number) => {
   const link = links[index]
   if (!link) throw Error(`No link at index ${index} (path: ${props.path})`)
-  const url = index ? `/${longest.value.slice(0, index).join('/')}/` : '/'
-  const long = longest.value.length ? `/${longest.value.join('/')}/` : '/'
-  const browser = decodeURIComponent(location.hash.slice(1).split('//')[0])
-  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
-  // Clicking on current link clears the rest of the path and adds new history
-  if (isCurrent(index)) { longest.value.splice(index); router.push(u) }
-  // Moving along breadcrumbs doesn't create new history
-  else if (long.startsWith(browser)) router.replace(u)
-  // Nornal navigation from elsewhere (e.g. search result breadcrumbs)
-  else router.push(u)
+  const url = `/${longest.value.slice(0, index).join('/')}/`
+  const here = `/${longest.value.join('/')}/`
+  link.focus()
+  if (here.startsWith(location.hash.slice(1))) router.replace(url)
+  else router.push(url)
 }
 
 const move = (dir: number) => {
@@ -82,25 +62,13 @@ const move = (dir: number) => {
 watchEffect(() => {
   const longcut = longest.value.slice(0, props.path.length)
   const same = longcut.every((value, index) => value === props.path[index])
-  // Navigated out of previous path, reset longest to current
   if (!same) longest.value = props.path
   else if (props.path.length > longcut.length) {
     longest.value = longcut.concat(props.path.slice(longcut.length))
   }
-  else {
-    // 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
-    if (!act || [...links, document.body].includes(act)) focusCurrent()
-  })
+})
+watchEffect(() => {
+  if (links.length) navigate(props.path.length)
 })
 </script>
 
@@ -115,36 +83,31 @@ watchEffect(() => {
   --breadcrumb-transtime: 0.3s;
 }
 .breadcrumb {
-  flex: 1 1 auto;
   display: flex;
-  min-width: 20%;
-  max-width: 100%;
-  min-height: 2em;
+  list-style: none;
   margin: 0;
   padding: 0 1em 0 0;
-  overflow: hidden;
 }
 .breadcrumb > a {
-  flex: 0 4 auto;
-  display: flex;
-  align-items: center;
   margin: 0 -0.5em 0 -0.5em;
   padding: 0;
+  max-width: 8em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  height: 1.5em;
   color: var(--breadcrumb-color);
   padding: 0.3em 1.5em;
   clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
   transition: all var(--breadcrumb-transtime);
 }
-.breadcrumb > a:first-child {
-  flex: 0 0 auto;
-  padding-left: 1.5em;
-  padding-right: 1.7em;
+.breadcrumb a:first-child {
+  margin-left: 0;
+  padding-left: .2em;
   clip-path: none;
 }
-.breadcrumb > a:last-child {
+.breadcrumb a:last-child {
+  max-width: none;
   clip-path: polygon(
     0 0,
     calc(100% - 1em) 0,
@@ -155,7 +118,7 @@ watchEffect(() => {
     0 0
   );
 }
-.breadcrumb > a:only-child {
+.breadcrumb a:only-child {
   clip-path: polygon(
     0 0,
     calc(100% - 1em) 0,
@@ -167,9 +130,9 @@ watchEffect(() => {
 }
 .breadcrumb svg {
   /* FIXME: Custom positioning to align it well; needs proper solution */
+  padding-left: 0.8em;
   width: 1.3em;
   height: 1.3em;
-  margin: -.5em;
   fill: var(--breadcrumb-color);
   transition: fill var(--breadcrumb-transtime);
 }
@@ -189,6 +152,6 @@ watchEffect(() => {
 }
 .breadcrumb a:hover { color: var(--breadcrumb-hover-color) }
 .breadcrumb a:hover svg { fill: var(--breadcrumb-hover-color) }
-.breadcrumb a.current { color: var(--accent-color); max-width: none; flex: 0 1 auto; }
+.breadcrumb a.current { color: var(--accent-color) }
 .breadcrumb a.current svg { fill: var(--accent-color) }
 </style>

frontend/src/components/DownloadButton.vue

@@ -1,176 +0,0 @@
-<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)
-        throw new Error(`Failed to create directory ${hdir}: ${error}`)
-      }
-      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)
-      throw new Error(`Failed to create file ${hdir + name}: ${error}`)
-    }
-    try {
-      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)
-    } catch (error) {
-      console.error('Failed to write file', hdir + name, error)
-      throw new Error(`Failed to write file ${hdir + name}: ${error}`)
-    }
-  }
-  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>

frontend/src/components/EmptyFolder.vue

@@ -1,38 +0,0 @@
-<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>

frontend/src/components/FileExplorer.vue

@@ -5,9 +5,9 @@
         <th class="selection">
           <input type="checkbox" tabindex="-1" v-model="allSelected" :indeterminate="selectionIndeterminate">
         </th>
-        <th class="sortcolumn" :class="{ sortactive: store.sortOrder === 'name' }" @click="store.toggleSort('name')">Name</th>
-        <th class="sortcolumn modified right" :class="{ sortactive: store.sortOrder === 'modified' }" @click="store.toggleSort('modified')">Modified</th>
-        <th class="sortcolumn size right" :class="{ sortactive: store.sortOrder === 'size' }" @click="store.toggleSort('size')">Size</th>
+        <th class="sortcolumn" :class="{ sortactive: sort === 'name' }" @click="toggleSort('name')">Name</th>
+        <th class="sortcolumn modified right" :class="{ sortactive: sort === 'modified' }" @click="toggleSort('modified')">Modified</th>
+        <th class="sortcolumn size right" :class="{ sortactive: sort === 'size' }" @click="toggleSort('size')">Size</th>
         <th class="menu"></th>
       </tr>
     </thead>
@@ -17,30 +17,30 @@
         <td class="name">
           <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
         </td>
-        <FileModified :doc=editing :key=nowkey />
+        <FileModified :doc=editing />
         <FileSize :doc=editing />
         <td class="menu"></td>
       </tr>
-      <template v-for="(doc, index) in documents" :key="doc.key">
+      <template v-for="(doc, index) in sortedDocuments" :key="doc.key">
         <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
           <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
         </tr>
 
         <tr
           :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: cursor === doc }"
+          @click="cursor = cursor === doc ? null : doc"
           @contextmenu.prevent="contextMenu($event, doc)"
         >
-          <td class="selection" @click.up.stop="store.cursor = store.cursor === doc.key ? doc.key : ''">
+          <td class="selection" @click.up.stop="cursor = cursor === doc ? doc : null">
             <input
               type="checkbox"
               tabindex="-1"
-              :checked="store.selected.has(doc.key)"
+              :checked="documentStore.selected.has(doc.key)"
               @change="
                 ($event.target as HTMLInputElement).checked
-                  ? store.selected.add(doc.key)
-                  : store.selected.delete(doc.key)
+                  ? documentStore.selected.add(doc.key)
+                  : documentStore.selected.delete(doc.key)
               "
             />
           </td>
@@ -49,16 +49,22 @@
               <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
             </template>
             <template v-else>
-              <a :href=doc.url tabindex=-1 @contextmenu.stop @focus.stop="store.cursor = doc.key">
-                {{ doc.name }}
-              </a>
-              <button tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
+              <a
+                :href="url_for(doc)"
+                tabindex="-1"
+                @contextmenu.prevent
+                @focus.stop="cursor = doc"
+                @keyup.left="router.back()"
+                @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
+                >{{ doc.name }}</a
+              >
+              <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
-          <FileModified :doc=doc :key=nowkey />
+          <FileModified :doc=doc />
           <FileSize :doc=doc />
           <td class="menu">
-            <button tabindex=-1 @click.stop="contextMenu($event, doc)">⋮</button>
+            <button tabindex="-1" @click.stop="contextMenu($event, doc)">⋮</button>
           </td>
         </tr>
       </template>
@@ -69,27 +75,32 @@
       </tr>
     </tbody>
   </table>
+  <div v-else class="empty-container">Nothing to see here</div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
-import { useMainStore } from '@/stores/main'
-import { Doc } from '@/repositories/Document'
+import { ref, computed, watchEffect } from 'vue'
+import { useDocumentStore } from '@/stores/documents'
+import type { Document } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import { connect, controlUrl } from '@/repositories/WS'
-import { formatSize } from '@/utils'
+import { collator, formatSize, formatUnixDate } from '@/utils'
 import { useRouter } from 'vue-router'
-import ContextMenu from '@imengyu/vue3-context-menu'
 
 const props = defineProps<{
   path: Array<string>
-  documents: Doc[]
+  documents: Document[]
 }>()
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const router = useRouter()
+const url_for = (doc: Document) => {
+  const p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  return doc.dir ? `#/${p}/` : `/files/${p}`
+}
+const cursor = ref<Document | null>(null)
 // File rename
-const editing = shallowRef<Doc | null>(null)
-const rename = (doc: Doc, newName: string) => {
+const editing = ref<Document | null>(null)
+const rename = (doc: Document, newName: string) => {
   const oldName = doc.name
   const control = connect(controlUrl, {
     message(ev: MessageEvent) {
@@ -113,71 +124,75 @@ const rename = (doc: Doc, newName: string) => {
   }
   doc.name = newName // We should get an update from watch but this is quicker
 }
+const sortedDocuments = computed(() => sorted(props.documents as Document[]))
+const showFolderBreadcrumb = (i: number) => {
+  const docs = sortedDocuments.value
+  const docloc = docs[i].loc
+  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
+}
 defineExpose({
   newFolder() {
-    console.log("New folder")
-    const now = Math.floor(Date.now() / 1000)
-    editing.value = new Doc({
+    const now = Date.now() / 1000
+    editing.value = {
       loc: loc.value,
       key: 'new',
       name: 'New Folder',
       dir: true,
       mtime: now,
       size: 0,
-    })
-    store.cursor = editing.value.key
+      sizedisp: formatSize(0),
+      modified: formatUnixDate(now),
+      haystack: '',
+    }
+    console.log("New")
   },
   toggleSelectAll() {
     console.log('Select')
     allSelected.value = !allSelected.value
   },
+  toggleSortColumn(column: number) {
+    const columns = ['', 'name', 'modified', 'size', '']
+    toggleSort(columns[column])
+  },
   isCursor() {
-    return store.cursor && editing.value === null
+    return cursor.value !== null && editing.value === null
   },
   cursorRename() {
-    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
+    editing.value = cursor.value
   },
   cursorSelect() {
-    const key = store.cursor
-    if (!key) return
-    if (store.selected.has(key)) {
-      store.selected.delete(key)
+    const doc = cursor.value
+    if (!doc) return
+    if (documentStore.selected.has(doc.key)) {
+      documentStore.selected.delete(doc.key)
     } else {
-      store.selected.add(key)
+      documentStore.selected.add(doc.key)
     }
-    this.cursorMove(1, null)
+    this.cursorMove(1)
   },
-  up(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
-  down(ev: KeyboardEvent) { this.cursorMove(1, ev) },
-  left(ev: KeyboardEvent) { router.back() },
-  right(ev: KeyboardEvent) {
-    const a = document.querySelector(`#file-${store.cursor} a`) as HTMLAnchorElement | null
-    if (a) a.click()
-  },
-  cursorMove(d: number, ev: KeyboardEvent | null) {
-    const select = !!ev?.shiftKey
+  cursorMove(d: number, select = false) {
     // Move cursor up or down (keyboard navigation)
-    const docs = props.documents
-    if (docs.length === 0) {
-      store.cursor = ''
+    const documents = sortedDocuments.value
+    if (documents.length === 0) {
+      cursor.value = null
       return
     }
-    const N = docs.length
+    const N = documents.length
     const mod = (a: number, b: number) => ((a % b) + b) % b
     const increment = (i: number, d: number) => mod(i + d, N + 1)
     const index =
-      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : docs.length
+      cursor.value !== null ? documents.indexOf(cursor.value) : documents.length
     const moveto = increment(index, d)
-    store.cursor = docs[moveto]?.key ?? ''
-    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
+    cursor.value = documents[moveto] ?? null
+    const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
     if (select) {
       // Go forwards, possibly wrapping over the end; the last entry is not toggled
       let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
       for (let p = begin; p !== end; p = increment(p, 1)) {
         if (p === N) continue
-        const key = docs[p].key
-        if (store.selected.has(key)) store.selected.delete(key)
-        else store.selected.add(key)
+        const key = documents[p].key
+        if (documentStore.selected.has(key)) documentStore.selected.delete(key)
+        else documentStore.selected.add(key)
       }
     }
     // @ts-ignore
@@ -199,36 +214,22 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
-  if (editing.value) store.cursor = editing.value?.key
-  if (store.cursor) {
+  if (cursor.value && cursor.value !== editing.value) editing.value = null
+  if (editing.value) cursor.value = editing.value
+  if (cursor.value) {
     const a = document.querySelector(
-      `#file-${store.cursor} .name a`
+      `#file-${cursor.value.key} .name a`
     ) as HTMLAnchorElement | null
     if (a) a.focus()
   }
 })
 watchEffect(() => {
-  if (!props.documents.length && store.cursor) {
-    store.cursor = ''
+  if (!props.documents.length && cursor.value) {
+    cursor.value = null
     focusBreadcrumb()
   }
 })
-let nowkey = ref(0)
-let modifiedTimer: any = null
-const updateModified = () => {
-  nowkey.value = Math.floor(Date.now() / 1000)
-}
-onMounted(() => {
-  updateModified(); modifiedTimer = setInterval(updateModified, 1000)
-  const active = document.querySelector('.cursor') as HTMLElement | null
-  if (active) {
-    active.scrollIntoView({ block: 'center', behavior: 'instant' })
-    active.focus()
-  }
-})
-onUnmounted(() => { clearInterval(modifiedTimer) })
-const mkdir = (doc: Doc, name: string) => {
+const mkdir = (doc: Document, name: string) => {
   const control = connect(controlUrl, {
     open() {
       control.send(
@@ -245,24 +246,34 @@ const mkdir = (doc: Doc, name: string) => {
         editing.value = null
       } else {
         console.log('mkdir', msg)
-        router.push(doc.urlrouter)
+        router.push(doc.loc ? `/${doc.loc}/${name}/` : `/${name}/`)
       }
     }
   })
-  // We should get an update from watch but this is quicker
-  doc.name = name
-  doc.key = crypto.randomUUID()
+  doc.name = name // We should get an update from watch but this is quicker
 }
-const showFolderBreadcrumb = (i: number) => {
-  const docs = props.documents
-  const docloc = docs[i].loc
-  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
+
+// Column sort
+const toggleSort = (name: string) => {
+  sort.value = sort.value === name ? '' : name
+}
+const sort = ref<string>('')
+const sortCompare = {
+  name: (a: Document, b: Document) => collator.compare(a.name, b.name),
+  modified: (a: Document, b: Document) => b.mtime - a.mtime,
+  size: (a: Document, b: Document) => b.size - a.size
+}
+const sorted = (documents: Document[]) => {
+  const cmp = sortCompare[sort.value as keyof typeof sortCompare]
+  const sorted = [...documents]
+  if (cmp) sorted.sort(cmp)
+  return sorted
 }
 const selectionIndeterminate = computed({
   get: () => {
     return (
       props.documents.length > 0 &&
-      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
+      props.documents.some((doc: Document) => documentStore.selected.has(doc.key)) &&
       !allSelected.value
     )
   },
@@ -273,16 +284,16 @@ const allSelected = computed({
   get: () => {
     return (
       props.documents.length > 0 &&
-      props.documents.every((doc: Doc) => store.selected.has(doc.key))
+      props.documents.every((doc: Document) => documentStore.selected.has(doc.key))
     )
   },
   set: (value: boolean) => {
     console.log('Setting allSelected', value)
     for (const doc of props.documents) {
       if (value) {
-        store.selected.add(doc.key)
+        documentStore.selected.add(doc.key)
       } else {
-        store.selected.delete(doc.key)
+        documentStore.selected.delete(doc.key)
       }
     }
   }
@@ -290,13 +301,9 @@ const allSelected = computed({
 
 const loc = computed(() => props.path.join('/'))
 
-const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = doc.key
-  ContextMenu.showContextMenu({
-    x: ev.x, y: ev.y, items: [
-      { label: 'Rename', onClick: () => { editing.value = doc } },
-    ],
-  })
+const contextMenu = (ev: Event, doc: Document) => {
+  cursor.value = doc
+  console.log('Context menu', ev, doc)
 }
 </script>
 
@@ -314,36 +321,29 @@ tbody tr {
   position: relative;
   z-index: auto;
 }
-table thead .selection input[type='checkbox'] {
+table thead input[type='checkbox'] {
   position: inherit;
-  width: 1rem;
-  height: 1rem;
-  padding: 0;
-  margin: auto;
+  width: 1em;
+  height: 1em;
+  padding: 0.5rem 0.5em;
 }
-table tbody .selection input[type='checkbox'] {
+table tbody input[type='checkbox'] {
   width: 2rem;
   height: 2rem;
 }
 table .selection {
-  width: 3rem;
+  width: 2rem;
   text-align: center;
   text-overflow: clip;
-  padding: 0;
-}
-table .selection input {
-  margin: auto;
 }
 table .modified {
-  width: 10rem;
-  text-overflow: clip;
+  width: 9em;
 }
 table .size {
-  width: 7rem;
-  text-overflow: clip;
+  width: 5em;
 }
 table .menu {
-  width: 2rem;
+  width: 1rem;
 }
 tbody td {
   font-size: 1.2rem;
@@ -378,7 +378,7 @@ table td {
   }
 }
 thead tr {
-  font-size: 0.8rem;
+  font-size: var(--header-font-size);
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
   box-shadow: 0 0 .2rem black;
@@ -399,11 +399,9 @@ tbody tr.cursor {
   padding-right: 1.5rem;
 }
 .sortcolumn::after {
-  font-size: 1rem;
   content: '▸';
   color: #888;
-  margin-left: 0.5rem;
-  margin-top: -.2rem;
+  margin-left: 0.5em;
   position: absolute;
   transition: all var(--transition-time) linear;
 }
@@ -453,4 +451,3 @@ tbody .selection input {
   color: #888;
 }
 </style>
-@/stores/main

frontend/src/components/FileModified.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { Doc } from '@/repositories/Document'
+import type { Document } from '@/repositories/Document'
 import { computed } from 'vue'
 
 const datetime = computed(() =>
@@ -17,6 +17,6 @@ const tooltip = computed(() =>
 )
 
 const props = defineProps<{
-    doc: Doc
+    doc: Document
 }>()
 </script>

frontend/src/components/FileRenameInput.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { Doc } from '@/repositories/Document'
+import type { Document } from '@/repositories/Document'
 import { ref, onMounted, nextTick } from 'vue'
 
 const input = ref<HTMLInputElement | null>(null)
@@ -28,8 +28,8 @@ onMounted(() => {
 })
 
 const props = defineProps<{
-  doc: Doc
-  rename: (doc: Doc, newName: string) => void
+  doc: Document
+  rename: (doc: Document, newName: string) => void
   exit: () => void
 }>()
 
@@ -56,10 +56,4 @@ input#FileRenameInput {
   outline: none;
   font: inherit;
 }
-.gallery input#FileRenameInput {
-  padding: .75em;
-  font-weight: 600;
-  width: auto;
-}
-
 </style>

frontend/src/components/FileSize.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { Doc } from '@/repositories/Document'
+import type { Document } from '@/repositories/Document'
 import { computed } from 'vue'
 
 const sizeClass = computed(() => {
@@ -12,7 +12,7 @@ const sizeClass = computed(() => {
 })
 
 const props = defineProps<{
-    doc: Doc
+    doc: Document
 }>()
 </script>
 

frontend/src/components/FileViewer.vue

@@ -0,0 +1,52 @@
+<template>
+  <object
+    v-if="props.type === 'pdf'"
+    :data="dataURL"
+    type="application/pdf"
+    width="100%"
+    height="100%"
+  ></object>
+  <a-image
+    v-else-if="props.type === 'image'"
+    width="50%"
+    :src="dataURL"
+    @click="() => setVisible(true)"
+    :previewMask="false"
+    :preview="{
+      visibleImg,
+      onVisibleChange: setVisible
+    }"
+  />
+  <!-- Unknown case -->
+  <h1 v-else>Unsupported file type</h1>
+</template>
+
+<script setup lang="ts">
+import { watchEffect, ref } from 'vue'
+import Router from '@/router/index'
+import { url_document_get } from '@/repositories/Document'
+
+const dataURL = ref('')
+watchEffect(() => {
+  dataURL.value = new URL(
+    url_document_get + Router.currentRoute.value.path,
+    location.origin
+  ).toString()
+})
+const emit = defineEmits({
+  visibleImg(value: boolean) {
+    return value
+  }
+})
+
+function setVisible(value: boolean) {
+  emit('visibleImg', value)
+}
+
+const props = defineProps<{
+  type?: string
+  visibleImg: boolean
+}>()
+</script>
+
+<style></style>

frontend/src/components/Gallery.vue

@@ -1,266 +0,0 @@
-<template>
-  <div v-if="props.documents.length || editing" class="gallery" ref="gallery">
-    <GalleryFigure v-if="editing?.key === 'new'" :doc="editing" :key=editing.key :editing="{rename: mkdir, exit}" />
-    <template v-for="(doc, index) in documents" :key=doc.key>
-      <GalleryFigure :doc=doc :editing="editing === doc ? {rename, exit} : null" @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 } from 'vue'
-import { useMainStore } from '@/stores/main'
-import { Doc } from '@/repositories/Document'
-import { connect, controlUrl } from '@/repositories/WS'
-import { useRouter } from 'vue-router'
-import ContextMenu from '@imengyu/vue3-context-menu'
-import type { SortOrder } from '@/utils/docsort'
-
-const props = defineProps<{
-  path: Array<string>
-  documents: Doc[]
-}>()
-const store = useMainStore()
-const router = useRouter()
-// File rename
-const editing = shallowRef<Doc | null>(null)
-const exit = () => { editing.value = null }
-const rename = (doc: Doc, newName: string) => {
-  const oldName = doc.name
-  const control = connect(controlUrl, {
-    message(ev: MessageEvent) {
-      const msg = JSON.parse(ev.data)
-      if ('error' in msg) {
-        console.error('Rename failed', msg.error.message, msg.error)
-        doc.name = oldName
-      } else {
-        console.log('Rename succeeded', msg)
-      }
-    }
-  })
-  control.onopen = () => {
-    control.send(
-      JSON.stringify({
-        op: 'rename',
-        path: `${doc.loc}/${oldName}`,
-        to: newName
-      })
-    )
-  }
-  doc.name = newName // We should get an update from watch but this is quicker
-}
-const gallery = ref<HTMLElement>()
-const columns = computed(() => {
-  if (!gallery.value) return 1
-  return getComputedStyle(gallery.value).gridTemplateColumns.split(' ').length
-})
-defineExpose({
-  newFolder() {
-    const now = Math.floor(Date.now() / 1000)
-    editing.value = new Doc({
-      loc: loc.value,
-      key: 'new',
-      name: 'New Folder',
-      dir: true,
-      mtime: now,
-      size: 0,
-    })
-    store.cursor = editing.value.key
-  },
-  toggleSelectAll() {
-    console.log('Select')
-    allSelected.value = !allSelected.value
-  },
-  toggleSortColumn(column: number) {
-    const order = ['', 'name', 'modified', 'size', ''][column]
-    if (order) store.toggleSort(order as SortOrder)
-  },
-  isCursor() {
-    return store.cursor && editing.value === null
-  },
-  cursorRename() {
-    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
-  },
-  cursorSelect() {
-    const key = store.cursor
-    if (!key) return
-    if (store.selected.has(key)) {
-      store.selected.delete(key)
-    } else {
-      store.selected.add(key)
-    }
-    this.cursorMove(1, null)
-  },
-  up(ev: KeyboardEvent) { this.cursorMove(-columns.value, ev) },
-  down(ev: KeyboardEvent) { this.cursorMove(columns.value, ev) },
-  left(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
-  right(ev: KeyboardEvent) { this.cursorMove(1, ev) },
-  cursorMove(d: number, ev: KeyboardEvent | null) {
-    const select = !!ev?.shiftKey
-    // Move cursor up or down (keyboard navigation)
-    const docs = props.documents
-    if (docs.length === 0) {
-      store.cursor = ''
-      return
-    }
-    const N = docs.length
-    const mod = (a: number, b: number) => ((a % b) + b) % b
-    const increment = (i: number, d: number) => mod(i + d, N + 1)
-    const index =
-      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : N
-    // Stop navigation sideways away from the grid (only with up/down)
-    if (ev && index === 0 && ev.key === "ArrowLeft") return
-    if (ev && index === N - 1 && ev.key === "ArrowRight") return
-    // Calculate new position
-    let moveto
-    if (index === N) moveto = d > 0 ? 0 : N - 1
-    else {
-      moveto = increment(index, d)
-      // Wrapping either end, just land outside the list
-      if (Math.abs(d) >= N || Math.sign(d) !== Math.sign(moveto - index)) moveto = N
-    }
-    store.cursor = docs[moveto]?.key ?? ''
-    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
-    if (select) {
-      // Go forwards, possibly wrapping over the end; the last entry is not toggled
-      let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
-      for (let p = begin; p !== end; p = increment(p, 1)) {
-        if (p === N) continue
-        const key = docs[p].key
-        if (store.selected.has(key)) store.selected.delete(key)
-        else store.selected.add(key)
-      }
-    }
-    // @ts-ignore
-    scrolltr = tr
-    if (!scrolltimer) {
-      scrolltimer = setTimeout(() => {
-        if (scrolltr)
-          scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
-        scrolltimer = null
-      }, 300)
-    }
-    if (moveto === N) focusBreadcrumb()
-  }
-})
-const focusBreadcrumb = () => {
-  const el = document.querySelector('.breadcrumb') as HTMLElement | null
-  if (el) el.focus()
-}
-let scrolltimer: any = null
-let scrolltr: any = null
-watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
-  if (editing.value) store.cursor = editing.value.key
-  if (store.cursor) {
-    const a = document.querySelector(`#file-${store.cursor}`) as HTMLAnchorElement | null
-    if (a) { a.focus(); a.scrollIntoView({ block: 'center', behavior: 'smooth' }) }
-  }
-})
-watchEffect(() => {
-  if (!props.documents.length && store.cursor) {
-    store.cursor = ''
-    focusBreadcrumb()
-  }
-})
-onMounted(() => {
-  const active = document.querySelector('.cursor') as HTMLElement | null
-  if (active) {
-    active.scrollIntoView({ block: 'center', behavior: 'instant' })
-    active.focus()
-  }
-})
-const mkdir = (doc: Doc, name: string) => {
-  const control = connect(controlUrl, {
-    open() {
-      control.send(
-        JSON.stringify({
-          op: 'mkdir',
-          path: `${doc.loc}/${name}`
-        })
-      )
-    },
-    message(ev: MessageEvent) {
-      const msg = JSON.parse(ev.data)
-      if ('error' in msg) {
-        console.error('Mkdir failed', msg.error.message, msg.error)
-        editing.value = null
-      } else {
-        console.log('mkdir', msg)
-        router.push(doc.urlrouter)
-      }
-    }
-  })
-  // We should get an update from watch but this is quicker
-  doc.name = name
-  doc.key = crypto.randomUUID()
-}
-const showFolderBreadcrumb = (i: number) => {
-  const docs = props.documents
-  const docloc = docs[i].loc
-  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1].loc
-}
-const selectionIndeterminate = computed({
-  get: () => {
-    return (
-      props.documents.length > 0 &&
-      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
-      !allSelected.value
-    )
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  set: (value: boolean) => {}
-})
-const allSelected = computed({
-  get: () => {
-    return (
-      props.documents.length > 0 &&
-      props.documents.every((doc: Doc) => store.selected.has(doc.key))
-    )
-  },
-  set: (value: boolean) => {
-    console.log('Setting allSelected', value)
-    for (const doc of props.documents) {
-      if (value) {
-        store.selected.add(doc.key)
-      } else {
-        store.selected.delete(doc.key)
-      }
-    }
-  }
-})
-
-const loc = computed(() => props.path.join('/'))
-
-const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = doc.key
-  ContextMenu.showContextMenu({
-    x: ev.x, y: ev.y, items: [
-      { label: 'Rename', onClick: () => { editing.value = doc } },
-    ],
-  })
-}
-</script>
-
-<style scoped>
-.gallery {
-  padding: 1em;
-  width: 100%;
-  display: grid;
-  gap: .5em;
-  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-  grid-template-rows: repeat(minmax(auto, 15em));
-  align-items: end;
-}
-.breadcrumb {
-  border-radius: .5em 0 0 .5em;
-}
-.spacer {
-  flex: 0 1000000000 4rem;
-}
-</style>

frontend/src/components/GalleryFigure.vue

@@ -1,109 +0,0 @@
-<template>
-  <a :id="`file-${doc.key}`" :href=doc.url tabindex=-1
-    :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-    @contextmenu.stop
-    @focus.stop="store.cursor = doc.key"
-    @click=onclick
-  >
-    <figure>
-      <slot></slot>
-      <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>
-          <div class=namespacer></div>
-        </template>
-      </figcaption>
-    </figure>
-  </a>
-</template>
-
-<script setup lang=ts>
-import { ref } from 'vue'
-import { useMainStore } from '@/stores/main'
-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,
-  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>
-figure {
-  max-height: 15em;
-  position: relative;
-  border-radius: .5em;
-  overflow: hidden;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-  overflow: hidden;
-}
-figure > article {
-  flex: 0 0 auto;
-}
-.titlespacer {
-  flex-shrink: 100000;
-  width: 100%;
-  height: 2em;
-}
-figcaption {
-  position: absolute;
-  overflow: hidden;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-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;
-}
-figcaption input[type='checkbox']:checked, figcaption:hover input[type='checkbox'] {
-  opacity: 1;
-}
-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>

frontend/src/components/HeaderMain.vue

@@ -1,67 +1,66 @@
 <template>
-  <nav class="headermain buttons">
-    <template v-if="store.error">
-      <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
-      <div class="smallgap"></div>
-    </template>
-    <UploadButton :path="props.path" />
-    <SvgButton
-      name="create-folder"
-      data-tooltip="New folder"
-      @click="() => {  console.log('New', store.fileExplorer); store.fileExplorer!.newFolder(); console.log('Done')}"
-    />
-    <slot></slot>
-    <div class="spacer smallgap"></div>
-    <template v-if="showSearchInput">
-      <input
-        ref="search"
-        type="search"
-        :value="query"
-        @input="updateSearch"
-        placeholder="Find files"
-        class="margin-input"
+  <nav class="headermain">
+    <div class="buttons">
+      <template v-if="documentStore.error">
+        <div class="error-message" @click="documentStore.error = ''">{{ documentStore.error }}</div>
+        <div class="smallgap"></div>
+      </template>
+      <UploadButton :path="props.path" />
+      <SvgButton
+        name="create-folder"
+        data-tooltip="New folder"
+        @click="() => documentStore.fileExplorer.newFolder()"
       />
-    </template>
-    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" />
-    <SvgButton name="cog" @click="settingsMenu" />
+      <slot></slot>
+      <div class="spacer smallgap"></div>
+      <template v-if="showSearchInput">
+        <input
+          ref="search"
+          type="search"
+          :value="query"
+          @blur="ev => { if (!query) closeSearch(ev) }"
+          @input="updateSearch"
+          placeholder="Search words"
+          class="margin-input"
+          @keyup.escape="closeSearch"
+        />
+      </template>
+      <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
+      <SvgButton name="cog" @click="settingsMenu" />
+    </div>
   </nav>
 </template>
 
 <script setup lang="ts">
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 import { ref, nextTick, watchEffect } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import router from '@/router';
 
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
-  const props = defineProps<{
-  path: Array<string>
-  query: string
-}>()
 
-const closeSearch = (ev: Event) => {
+const closeSearch = ev => {
   if (!showSearchInput.value) return  // Already closing
   showSearchInput.value = false
   const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
   breadcrumb.focus()
   updateSearch(ev)
 }
-const updateSearch = (ev: Event) => {
-  const q = (ev.target as HTMLInputElement).value
+const updateSearch = ev => {
+  const q = ev.target.value
   let p = props.path.join('/')
   p = p ? `/${p}` : ''
   const url = q ? `${p}//${q}` : (p || '/')
-  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
-  if (!props.query && q) router.push(u)
-  else router.replace(u)
+  console.log("Update search", url)
+  if (!props.query && q) router.push(url)
+  else router.replace(url)
 }
-const toggleSearchInput = (ev: Event) => {
+const toggleSearchInput = () => {
   showSearchInput.value = !showSearchInput.value
-  if (!showSearchInput.value) return closeSearch(ev)
+  if (!showSearchInput.value) return closeSearch()
   nextTick(() => {
     const input = search.value
     if (input) input.focus()
@@ -73,14 +72,10 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
-  items.push({ label: 'Change Password', onClick: () => { store.dialog = 'settings' }})
-  if (store.user.privileged) {
-    items.push({ label: 'Admin Settings', onClick: () => { store.dialog = 'usermgmt' }})
-  }
-  if (store.user.isLoggedIn) {
-    items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
+  if (documentStore.user.isLoggedIn) {
+    items.push({ label: `Logout ${documentStore.user.username ?? ''}`, onClick: () => documentStore.logout() })
   } else {
-    items.push({ label: 'Login', onClick: () => store.loginDialog() })
+    items.push({ label: 'Login', onClick: () => documentStore.loginDialog() })
   }
   ContextMenu.showContextMenu({
     // @ts-ignore
@@ -88,6 +83,11 @@ const settingsMenu = (e: Event) => {
     items,
   })
 }
+const props = defineProps<{
+  path: Array<string>
+  query: string
+}>()
+
 defineExpose({
   toggleSearchInput,
   closeSearch,
@@ -96,18 +96,23 @@ defineExpose({
 
 <style scoped>
 .buttons {
-  flex: 1000 0 auto;
   padding: 0;
   display: flex;
   align-items: center;
+  height: 3.5em;
   z-index: 10;
 }
+.buttons > * {
+  flex-shrink: 1;
+}
 input[type='search'] {
   background: var(--input-background);
   color: var(--input-color);
   border: 0;
   border-radius: 0.1em;
+  padding: 0.5em;
   outline: none;
-  max-width: 15ch;
+  font-size: 1.5em;
+  max-width: 30vw;
 }
 </style>

frontend/src/components/HeaderSelected.vue

@@ -1,28 +1,29 @@
 <template>
-  <template v-if="store.selected.size">
+  <template v-if="documentStore.selected.size">
     <div class="smallgap"></div>
-    <p class="select-text">{{ store.selected.size }} selected ➤</p>
-    <DownloadButton />
+    <p class="select-text">{{ documentStore.selected.size }} selected ➤</p>
+    <SvgButton name="download" data-tooltip="Download" @click="download" />
     <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
     <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
     <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
-    <button class="action-button unselect" data-tooltip="Unselect all" @click="store.selected.clear()">❌</button>
+    <button class="action-button unselect" data-tooltip="Unselect all" @click="documentStore.selected.clear()">❌</button>
   </template>
 </template>
 
 <script setup lang="ts">
 import {connect, controlUrl} from '@/repositories/WS'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 import { computed } from 'vue'
+import type { SelectedItems } from '@/repositories/Document'
 
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const props = defineProps({
   path: Array<string>
 })
 
 const dst = computed(() => props.path!.join('/'))
 const op = (op: string, dst?: string) => {
-  const sel = store.selectedFiles
+  const sel = documentStore.selectedFiles
   const msg = {
     op,
     sel: sel.keys.map(key => {
@@ -33,16 +34,16 @@ const op = (op: string, dst?: string) => {
   // @ts-ignore
   if (dst !== undefined) msg.dst = dst
   const control = connect(controlUrl, {
-    message(ev: MessageEvent) {
+    message(ev: WebSocmetMessageEvent) {
       const res = JSON.parse(ev.data)
       if ('error' in res) {
         console.error('Control socket error', msg, res.error)
-        store.error = res.error.message
+        documentStore.error = res.error.message
         return
       } else if (res.status === 'ack') {
         console.log('Control ack OK', res)
         control.close()
-        store.selected.clear()
+        documentStore.selected.clear()
         return
       } else console.log('Unknown control response', msg, res)
     }
@@ -52,6 +53,95 @@ 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 = documentStore.selectedFiles
+  console.log('Download', sel)
+  if (sel.keys.length === 0) {
+    console.warn('Attempted download but no files found. Missing selected keys:', sel.missing)
+    documentStore.selected.clear()
+    return
+  }
+  // Plain old a href download if only one file (ignoring any folders)
+  const files = sel.recursive.filter(([rel, full, doc]) => !doc.dir)
+  if (files.length === 1) {
+    documentStore.selected.clear()
+    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(() => {
+        documentStore.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`)
+  documentStore.selected.clear()
+}
 </script>
 
 <style>
@@ -60,6 +150,5 @@ const op = (op: string, dst?: string) => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 0;
 }
 </style>

frontend/src/components/LoginModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <ModalDialog name="login" title="Authentication required">
+  <ModalDialog v-if="store.user.isOpenLoginModal" title="Authentication required" @blur="store.user.isOpenLoginModal = false">
     <form @submit.prevent="login">
       <div class="login-container">
         <label for="username">Username:</label>
@@ -39,10 +39,10 @@
 import { reactive, ref } from 'vue'
 import { loginUser } from '@/repositories/User'
 import type { ISimpleError } from '@/repositories/Client'
-import { useMainStore } from '@/stores/main'
+import { useDocumentStore } from '@/stores/documents'
 
 const confirmLoading = ref<boolean>(false)
-const store = useMainStore()
+const store = useDocumentStore()
 
 const loginForm = reactive({
   username: '',

frontend/src/components/MediaPreview.vue

@@ -1,168 +0,0 @@
-<template>
-  <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 :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 { 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) 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 true
-  },
-  media,
-})
-
-
-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 &&
-  ['avif', 'webp', 'png', 'jpg', 'jpeg'].includes(props.doc.ext)
-)
-</script>
-
-<style scoped>
-img, embed, .icon, audio, video {
-  font-size: 8em;
-  overflow: hidden;
-  min-width: 50%;
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: calc(.5em / 8);
-}
-.folder::before {
-  content: '📁';
-}
-.folder:hover::before, .cursor .folder::before {
-  content: '📂';
-}
-.archive::before {
-  content: '📦';
-}
-.file::before {
-  content: '📄';
-}
-.ext-img::before {
-  content: '💿';
-}
-.ext-exe::before, .ext-msi::before, .ext-dmg::before, .ext-pkg::before {
-  content: '⚙️';
-}
-.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 {
-  /* broken image */
-  text-shadow: 0 0 .5rem #000;
-  filter: grayscale(1);
-  content: '❌';
-}
-</style>

frontend/src/components/ModalDialog.vue

@@ -1,45 +1,34 @@
 <template>
-  <dialog v-if="store.dialog === name" ref="dialog" :id=props.name @keydown.escape=close>
+  <dialog ref="dialog">
     <h1 v-if="props.title">{{ props.title }}</h1>
     <div>
       <slot>
         Dialog with no content
-        <button @click=close>OK</button>
+        <button onclick="dialog.close()">OK</button>
       </slot>
     </div>
   </dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watchEffect, nextTick } from 'vue'
-import { useMainStore } from '@/stores/main'
+import { ref, onMounted } from 'vue'
 
 const dialog = ref<HTMLDialogElement | null>(null)
-const store = useMainStore()
-
-const close = () => {
-  dialog.value!.close()
-  store.dialog = ''
-}
-
-const props = defineProps<{
-    title: string,
-    name: typeof store.dialog,
-  }>()
 
+const props = withDefaults(
+  defineProps<{
+    title: string
+  }>(),
+  {
+    title: ''
+  }
+)
 const show = () => {
-  store.dialog = props.name
-  setTimeout(() => {
-    dialog.value!.showModal()
-    nextTick(() => {
-      const input = dialog.value!.querySelector('input')
-      if (input) input.focus()
-    })
-  }, 0)
+  dialog.value!.showModal()
 }
-defineExpose({ show, close })
-watchEffect(() => {
-  if (dialog.value) show()
+defineExpose({ show })
+onMounted(() => {
+  show()
 })
 </script>
 

frontend/src/components/NotificationLoading.vue

@@ -0,0 +1,27 @@
+<template>
+  <template v-for="upload in documentStore.uploadingDocuments" :key="upload.key">
+    <span>{{ upload.name }}</span>
+    <div class="progress-container">
+      <a-progress :percent="upload.progress" />
+      <CloseCircleOutlined class="close-button" @click="dismissUpload(upload.key)" />
+    </div>
+  </template>
+</template>
+<script setup lang="ts">
+import { useDocumentStore } from '@/stores/documents'
+const documentStore = useDocumentStore()
+
+function dismissUpload(key: number) {
+  documentStore.deleteUploadingDocument(key)
+}
+</script>
+
+<style scoped>
+.progress-container {
+  display: flex;
+  align-items: center;
+}
+.close-button:hover {
+  color: #b81414;
+}
+</style>

frontend/src/components/SelectBox.vue

@@ -1,22 +0,0 @@
-<template>
-  <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)
-      } else {
-        store.selected.delete(doc.key)
-      }
-    }"
-  >
-</template>
-
-<script setup lang=ts>
-import { useMainStore } from '@/stores/main'
-import type { Doc } from '@/repositories/Document'
-
-const props = defineProps<{
-  doc: Doc
-}>()
-const store = useMainStore()
-
-</script>

frontend/src/components/SettingsModal.vue

@@ -1,127 +0,0 @@
-<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>

frontend/src/components/SvgButton.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, defineProps } from 'vue'
 
 const props = defineProps<{
   name: string

frontend/src/components/TransferBar.vue

@@ -1,94 +0,0 @@
-<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>

frontend/src/components/UploadButton.vue

@@ -1,98 +1,39 @@
-<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 { useDocumentStore } from '@/stores/documents'
 import { collator } from '@/utils';
-import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 
 const fileInput = ref()
 const folderInput = ref()
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const props = defineProps({
   path: Array<string>
 })
 
-type CloudFile = {
-  file: File
-  cloudName: string
-  cloudPos: number
-}
-function pasteHandler(event: ClipboardEvent) {
-  const items = Array.from(event.clipboardData?.items ?? [])
-  const infiles = [] as File[]
-  const dirs = [] as FileSystemDirectoryEntry[]
-  for (const item of items) {
-    if (item.kind !== 'file') continue
-    const entry = item.webkitGetAsEntry()
-    if (entry?.isFile) {
-      const file = item.getAsFile()
-      if (file) infiles.push(file)
-    } else if (entry?.isDirectory) {
-      dirs.push(entry as FileSystemDirectoryEntry)
-    }
-  }
-  if (infiles.length || dirs.length) {
-    event.preventDefault()
-    uploadFiles(infiles)
-    for (const entry of dirs) pasteDirectory(entry, `${props.path!.join('/')}/${entry.name}`)
-  }
-}
-const pasteDirectory = async (entry: FileSystemDirectoryEntry, loc: string) => {
-  const reader = entry.createReader()
-  const entries = await new Promise<any[]>(resolve => reader.readEntries(resolve))
-  const cloudfiles = [] as CloudFile[]
-  for (const entry of entries) {
-    const cloudName = `${loc}/${entry.name}`
-    if (entry.isFile) {
-      const file = await new Promise(resolve => entry.file(resolve)) as File
-      cloudfiles.push({file, cloudName, cloudPos: 0})
-    } else if (entry.isDirectory) {
-      await pasteDirectory(entry, cloudName)
-    }
-  }
-  if (cloudfiles.length) uploadCloudFiles(cloudfiles)
-}
+
 function uploadHandler(event: Event) {
   event.preventDefault()
+  event.stopPropagation()
   // @ts-ignore
-  const input = event.target as HTMLInputElement | null
-  const infiles = Array.from((input ?? (event as DragEvent).dataTransfer)?.files ?? []) as File[]
-  if (input) input.value = ''
-  if (infiles.length) uploadFiles(infiles)
-}
-
-const uploadFiles = (infiles: File[]) => {
+  let infiles = Array.from(event.dataTransfer?.files || event.target.files) as File[]
+  if (!infiles.length) return
   const loc = props.path!.join('/')
-  let files = []
-  for (const file of infiles) {
-    files.push({
-      file,
-      cloudName: loc + '/' + (file.webkitRelativePath || file.name),
-      cloudPos: 0,
-    })
+  for (const f of infiles) {
+    f.cloudName = loc + '/' + (f.webkitRelativePath || f.name)
+    f.cloudPos = 0
   }
-  uploadCloudFiles(files)
-}
-const uploadCloudFiles = (files: CloudFile[]) => {
-  const dotfiles = files.filter(f => f.cloudName.includes('/.'))
+  const dotfiles = infiles.filter(f => f.cloudName.includes('/.'))
   if (dotfiles.length) {
-    store.error = "Won't upload dotfiles"
+    documentStore.error = "Won't upload dotfiles"
     console.log("Dotfiles omitted", dotfiles)
-    files = files.filter(f => !f.cloudName.includes('/.'))
+    infiles = infiles.filter(f => !f.cloudName.includes('/.'))
   }
-  if (!files.length) return
-  files.sort((a, b) => collator.compare(a.cloudName, b.cloudName))
+  if (!infiles.length) return
+  infiles.sort((a, b) => collator.compare(a.cloudName, b.cloudName))
   // @ts-ignore
-  upqueue = [...upqueue, ...files]
-  statsAdd(files)
+  upqueue = upqueue.concat(infiles)
+  statsAdd(infiles)
   startWorker()
 }
 
@@ -103,67 +44,75 @@ const cancelUploads = () => {
 
 const uprogress_init = {
   total: 0,
-  xfer: 0,
+  uploaded: 0,
   t0: 0,
   tlast: 0,
   statbytes: 0,
   statdur: 0,
-  files: [] as CloudFile[],
+  files: [],
   filestart: 0,
   fileidx: 0,
   filecount: 0,
   filename: '',
   filesize: 0,
   filepos: 0,
-  status: 'idle',
 }
-store.uprogress = {...uprogress_init}
+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 < 100 ? 1 : 0) + '\u202FMB/s': 'stalled')
 setInterval(() => {
-  if (Date.now() - store.uprogress.tlast > 3000) {
+  if (Date.now() - uprogress.tlast > 3000) {
     // Reset
-    store.uprogress.statbytes = 0
-    store.uprogress.statdur = 1
+    uprogress.statbytes = 0
+    uprogress.statdur = 1
   } else {
     // Running average by decay
-    store.uprogress.statbytes *= .9
-    store.uprogress.statdur *= .9
+    uprogress.statbytes *= .9
+    uprogress.statdur *= .9
   }
 }, 100)
-const statUpdate = ({name, size, start, end}: {name: string, size: number, start: number, end: number}) => {
-  if (name !== store.uprogress.filename) return  // If stats have been reset
+const statUpdate = ({name, size, start, end}) => {
+  if (name !== uprogress.filename) return  // If stats have been reset
   const now = Date.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
+  uprogress.uploaded = uprogress.filestart + end
+  uprogress.filepos = end
+  uprogress.statbytes += end - start
+  uprogress.statdur += now - uprogress.tlast
+  uprogress.tlast = now
   // File finished?
   if (end === size) {
-    store.uprogress.filestart += size
+    uprogress.filestart += size
     statNextFile()
-    if (++store.uprogress.fileidx >= store.uprogress.filecount) statReset()
+    if (++uprogress.fileidx >= uprogress.filecount) statReset()
   }
 }
 const statNextFile = () => {
-  const f = store.uprogress.files.shift()
+  const f = uprogress.files.shift()
   if (!f) return statReset()
-  store.uprogress.filepos = 0
-  store.uprogress.filesize = f.file.size
-  store.uprogress.filename = f.cloudName
+  uprogress.filepos = 0
+  uprogress.filesize = f.size
+  uprogress.filename = f.cloudName
 }
 const statReset = () => {
-  Object.assign(store.uprogress, uprogress_init)
-  store.uprogress.t0 = Date.now()
-  store.uprogress.tlast = store.uprogress.t0 + 1
+  Object.assign(uprogress, uprogress_init)
+  uprogress.t0 = Date.now()
+  uprogress.tlast = uprogress.t0 + 1
 }
-const statsAdd = (f: CloudFile[]) => {
-  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]
+const statsAdd = (f: Array<File>) => {
+  if (uprogress.files.length === 0) statReset()
+  uprogress.total += f.reduce((a, b) => a + b.size, 0)
+  uprogress.filecount += f.length
+  uprogress.files = uprogress.files.concat(f)
   statNextFile()
 }
-let upqueue = [] as CloudFile[]
+let upqueue = [] as File[]
 
 // TODO: Rewrite as WebSocket class
 const WSCreate = async () => await new Promise<WebSocket>(resolve => {
@@ -171,13 +120,13 @@ const WSCreate = async () => await new Promise<WebSocket>(resolve => {
     open(ev: Event) { resolve(ws) },
     error(ev: Event) {
       console.error('Upload socket error', ev)
-      store.error = 'Upload socket error'
+      documentStore.error = 'Upload socket error'
     },
     message(ev: MessageEvent) {
       const res = JSON.parse(ev!.data)
       if ('error' in res) {
         console.error('Upload socket error', res.error)
-        store.error = res.error.message
+        documentStore.error = res.error.message
         return
       }
       if (res.status === 'ack') {
@@ -190,7 +139,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
-    store.uprogress.status = "uploading"
+    uprogress.status = "uploading"
     await new Promise(resolve => {
       const t = setInterval(() => {
         if (ws.bufferedAmount > 1<<20) return
@@ -198,7 +147,7 @@ const WSCreate = async () => await new Promise<WebSocket>(resolve => {
         clearInterval(t)
       }, 1)
     })
-    store.uprogress.status = "processing"
+    uprogress.status = "processing"
     ws.send(data)
   }
 })
@@ -206,20 +155,21 @@ const worker = async () => {
   const ws = await WSCreate()
   while (upqueue.length) {
     const f = upqueue[0]
+    if (f.cloudPos === f.size) {
+      upqueue.shift()
+      continue
+    }
     const start = f.cloudPos
-    const end = Math.min(f.file.size, start + (1<<20))
-    const control = { name: f.cloudName, size: f.file.size, start, end }
-    const data = f.file.slice(start, end)
+    const end = Math.min(f.size, start + (1<<20))
+    const control = { name: f.cloudName, size: f.size, start, end }
+    const data = f.slice(start, end)
     f.cloudPos = end
     // Note: files may get modified during I/O
-    // @ts-ignore FIXME proper WebSocket class, avoid attaching functions to WebSocket object
     ws.sendMsg(control)
-    // @ts-ignore
     await ws.sendData(data)
-    if (f.cloudPos === f.file.size) upqueue.shift()
   }
   if (upqueue.length) startWorker()
-  store.uprogress.status = "idle"
+  uprogress.status = "idle"
   workerRunning = false
 }
 let workerRunning: any = false
@@ -234,11 +184,69 @@ onMounted(() => {
   // Need to prevent both to prevent browser from opening the file
   addEventListener('dragover', uploadHandler)
   addEventListener('drop', uploadHandler)
-  addEventListener('paste', pasteHandler)
 })
 onUnmounted(() => {
-  removeEventListener('paste', pasteHandler)
   removeEventListener('dragover', uploadHandler)
   removeEventListener('drop', uploadHandler)
 })
 </script>
+<template>
+  <template>
+    <input ref="fileInput" @change="uploadHandler" type="file" multiple>
+    <input ref="folderInput" @change="uploadHandler" type="file" webkitdirectory>
+  </template>
+  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileInput.click()" />
+  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.click()" />
+  <div class="uploadprogress" v-if="uprogress.total" :style="`background: linear-gradient(to right, var(--bar) 0, var(--bar) ${percent}%, var(--nobar) ${percent}%, var(--nobar) 100%);`">
+    <div class="statustext">
+      <span v-if="uprogress.filecount > 1" class="index">
+        [{{ uprogress.fileidx }}/{{ uprogress.filecount }}]
+      </span>
+      <span class="filename">{{ uprogress.filename.split('/').pop() }}
+        <span v-if="uprogress.filesize > 1e7" class="percent">
+          {{ (uprogress.filepos / uprogress.filesize * 100).toFixed(0) + '\u202F%' }}
+        </span>
+      </span>
+      <span class="position" v-if="uprogress.filesize > 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>

frontend/src/components/UserManagementModal.vue

@@ -1,265 +0,0 @@
-<template>
-  <ModalDialog name=usermgmt title="Admin Settings">
-    <div v-if="loading" class="loading">Loading...</div>
-    <div v-else>
-      <h3>Server Settings</h3>
-      <div class="form-row">
-        <input
-          id="publicServer"
-          type="checkbox"
-          v-model="serverSettings.public"
-          @change="updateServerSettings"
-        />
-        <label for="publicServer">Publicly accessible without any user account.</label>
-      </div>
-      <h3>Users</h3>
-      <button @click="addUser" class="button" title="Add new user">➕ Add User</button>
-      <div v-if="success" class="success-message" @click="copySuccess(false)">
-        {{ success }}
-        <button v-if="success.includes('Password:') || success.includes('New password:')" @click.stop="copySuccess(true)" class="button small" title="Copy to clipboard">{{ copyButtonText }}</button>
-      </div>
-      <table class="user-table">
-        <thead>
-          <tr>
-            <th>Username</th>
-            <th>Admin</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="user in users" :key="user.username">
-            <td>{{ user.username }}</td>
-            <td>
-              <input
-                type="checkbox"
-                :checked="user.privileged"
-                @change="toggleAdmin(user, $event)"
-                :disabled="user.username === store.user.username"
-              />
-            </td>
-            <td>
-              <button @click="renameUser(user)" class="button small" title="Rename user">✏️</button>
-              <button @click="resetPassword(user)" class="button small" title="Reset password">🔑</button>
-              <button @click="deleteUserAction(user.username)" class="button small danger" :disabled="user.username === store.user.username" title="Delete user">🗑️</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <h3 class="error-text">{{ error || '\u00A0' }}</h3>
-      <div class="dialog-buttons">
-        <button @click="close" class="button">Close</button>
-      </div>
-    </div>
-  </ModalDialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, onMounted, watch } from 'vue'
-import { listUsers, createUser, updateUser, deleteUser, updatePublic } from '@/repositories/User'
-import type { ISimpleError } from '@/repositories/Client'
-import { useMainStore } from '@/stores/main'
-
-interface User {
-  username: string
-  privileged: boolean
-  lastSeen: number
-}
-
-const store = useMainStore()
-const loading = ref(true)
-const users = ref<User[]>([])
-const error = ref('')
-const success = ref('')
-const copyButtonText = ref('📋')
-const serverSettings = reactive({
-  public: false
-})
-
-const close = () => {
-  store.dialog = ''
-  error.value = ''
-  success.value = ''
-}
-
-const loadUsers = async () => {
-  try {
-    loading.value = true
-    const data = await listUsers()
-    users.value = data.users
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to load users'
-  } finally {
-    loading.value = false
-  }
-}
-
-const addUser = async () => {
-  const username = window.prompt('Enter username for new user:')
-  if (!username || !username.trim()) return
-  try {
-    error.value = ''
-    success.value = ''
-    const result = await createUser(username.trim(), undefined, false)
-    await loadUsers()
-    if (result.password) {
-      success.value = `User ${username.trim()} created. Password: ${result.password}`
-    }
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to add user'
-  }
-}
-
-const toggleAdmin = async (user: User, event: Event) => {
-  const target = event.target as HTMLInputElement
-  try {
-    error.value = ''
-    await updateUser(user.username, { privileged: target.checked })
-    user.privileged = target.checked
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to update user'
-    target.checked = user.privileged // revert
-  }
-}
-
-const renameUser = async (user: User) => {
-  const newName = window.prompt('Enter new username:', user.username)
-  if (!newName || !newName.trim() || newName.trim() === user.username) return
-  // For rename, we need to create new user and delete old, or have a rename endpoint
-  // Since no rename endpoint, perhaps delete and create
-  try {
-    error.value = ''
-    success.value = ''
-    const result = await createUser(newName.trim(), undefined, user.privileged)
-    await deleteUser(user.username)
-    await loadUsers()
-    if (result.password) {
-      success.value = `User renamed to ${newName.trim()}. New password: ${result.password}`
-    }
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to rename user'
-  }
-}
-
-const resetPassword = async (user: User) => {
-  if (!confirm(`Reset password for ${user.username}? A new password will be generated.`)) return
-  try {
-    error.value = ''
-    success.value = ''
-    const result = await updateUser(user.username, { password: "" })
-    if (result.password) {
-      success.value = `Password reset for ${user.username}. New password: ${result.password}`
-    }
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to reset password'
-  }
-}
-
-const deleteUserAction = async (username: string) => {
-  if (!confirm(`Delete user ${username}?`)) return
-  try {
-    error.value = ''
-    await deleteUser(username)
-    await loadUsers()
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to delete user'
-  }
-}
-
-const copySuccess = async (isButtonClick: boolean = false) => {
-  const passwordMatch = success.value.match(/(?:Password|New password): (.+)/)
-  if (passwordMatch) {
-    await navigator.clipboard.writeText(passwordMatch[1])
-    if (isButtonClick) {
-      // Show "Copied!" indication on button
-      copyButtonText.value = '✅ Copied!'
-      // Hide password and button immediately after copying
-      const baseMessage = success.value.replace(/(?:Password|New password): .+/, 'Password copied to clipboard!')
-      success.value = baseMessage
-      // Hide the entire message after 3 seconds
-      setTimeout(() => {
-        success.value = ''
-        copyButtonText.value = '📋'
-      }, 3000)
-    } else {
-      // Just hide the message when clicking elsewhere
-      success.value = ''
-    }
-  }
-}
-
-const updateServerSettings = async () => {
-  try {
-    error.value = ''
-    success.value = ''
-    await updatePublic(serverSettings.public)
-    // Update store
-    store.server.public = serverSettings.public
-    success.value = 'Server settings updated'
-  } catch (e) {
-    const httpError = e as ISimpleError
-    error.value = httpError.message || 'Failed to update settings'
-  }
-}
-
-onMounted(() => {
-  serverSettings.public = store.server.public
-  loadUsers()
-})
-
-watch(() => store.server.public, (newVal) => {
-  serverSettings.public = newVal
-})
-</script>
-
-<style scoped>
-.user-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 1rem;
-}
-.user-table th, .user-table td {
-  border: 1px solid var(--border-color);
-  padding: 0.5rem;
-  text-align: left;
-}
-.user-table th {
-  background: var(--soft-color);
-}
-.button.small {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.8rem;
-  margin-right: 0.25rem;
-}
-.button.danger {
-  background: var(--red-color);
-  color: white;
-}
-.button.danger:hover {
-  background: #d00;
-}
-.form-row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 0.5rem;
-}
-.form-row label {
-  min-width: 100px;
-}
-.success-message {
-  background: var(--accent-color);
-  color: white;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  margin-top: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-</style>

frontend/src/repositories/Client.ts

@@ -1,20 +1,4 @@
 class ClientClass {
-  async get(url: string): Promise<any> {
-    const res = await fetch(url, {
-      method: 'GET',
-      headers: {
-        accept: 'application/json'
-      }
-    })
-    let msg
-    try {
-      msg = await res.json()
-    } catch (e) {
-      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
-    }
-    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
-    return msg
-  }
   async post(url: string, data?: Record<string, any>): Promise<any> {
     const res = await fetch(url, {
       method: 'POST',
@@ -33,40 +17,6 @@ class ClientClass {
     if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
     return msg
   }
-  async put(url: string, data?: Record<string, any>): Promise<any> {
-    const res = await fetch(url, {
-      method: 'PUT',
-      headers: {
-        accept: 'application/json',
-        'content-type': 'application/json'
-      },
-      body: data !== undefined ? JSON.stringify(data) : undefined
-    })
-    let msg
-    try {
-      msg = await res.json()
-    } catch (e) {
-      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
-    }
-    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
-    return msg
-  }
-  async delete(url: string): Promise<any> {
-    const res = await fetch(url, {
-      method: 'DELETE',
-      headers: {
-        accept: 'application/json'
-      }
-    })
-    let msg
-    try {
-      msg = await res.json()
-    } catch (e) {
-      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
-    }
-    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
-    return msg
-  }
 }
 
 export const Client = new ClientClass()

frontend/src/repositories/Document.ts

@@ -1,62 +1,17 @@
-import { formatSize, formatUnixDate, haystackFormat } from "@/utils"
-
 export type FUID = string
 
-export type DocProps = {
+export type Document = {
   loc: string
   name: string
   key: FUID
   size: number
+  sizedisp: string
   mtime: number
+  modified: string
+  haystack: string
   dir: boolean
 }
 
-export class Doc {
-  private _name: string = ""
-  public loc: string = ""
-  public key: FUID = ""
-  public size: number = 0
-  public mtime: number = 0
-  public haystack: string = ""
-  public dir: boolean = false
-
-  constructor(props: Partial<DocProps> = {}) { Object.assign(this, props) }
-  get name() { return this._name }
-  set name(name: string) {
-    if (name.includes('/') || name.startsWith('.')) throw Error(`Invalid name: ${name}`)
-    this._name = name
-    this.haystack = haystackFormat(name)
-  }
-  get sizedisp(): string { return formatSize(this.size) }
-  get modified(): string { return formatUnixDate(this.mtime) }
-  get url(): string {
-    const p = this.loc ? `${this.loc}/${this.name}` : this.name
-    return this.dir ? '/#/' + `${p}/`.replaceAll('#', '%23') : `/files/${p}`.replaceAll('?', '%3F').replaceAll('#', '%23')
-  }
-  get urlrouter(): string {
-    return this.url.replace(/^\/#/, '')
-  }
-  get img(): boolean {
-    // 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 dotIndex = this.name.lastIndexOf('.')
-    if (dotIndex === -1 || dotIndex === this.name.length - 1) return ''
-    return this.name.slice(dotIndex + 1).toLowerCase()
-  }
-}
 export type errorEvent = {
   error: {
     code: number
@@ -81,7 +36,7 @@ export type UpdateEntry = ['k', number] | ['d', number] | ['i', Array<FileEntry>
 // Helper structure for selections
 export interface SelectedItems {
   keys: FUID[]
-  docs: Record<FUID, Doc>
-  recursive: Array<[string, string, Doc]>
+  docs: Record<FUID, Document>
+  recursive: Array<[string, string, Document]>
   missing: Set<FUID>
 }

frontend/src/repositories/User.ts

@@ -1,8 +1,6 @@
 import Client from '@/repositories/Client'
-import { useMainStore } from '@/stores/main'
 export const url_login = '/login'
-export const url_logout = '/logout'
-export const url_password = '/password-change'
+export const url_logout = '/logout '
 
 export async function loginUser(username: string, password: string) {
   const user = await Client.post(url_login, {
@@ -15,43 +13,3 @@ 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
-}
-
-export const url_users = '/users'
-
-export async function listUsers() {
-  const data = await Client.get(url_users)
-  return data
-}
-
-export async function createUser(username: string, password?: string, privileged?: boolean) {
-  const data = await Client.post(url_users, {
-    username,
-    password,
-    privileged
-  })
-  return data
-}
-
-export async function updateUser(username: string, changes: { password?: string, privileged?: boolean }) {
-  const data = await Client.put(`${url_users}/${username}`, changes)
-  return data
-}
-
-export async function deleteUser(username: string) {
-  const data = await Client.delete(`${url_users}/${username}`)
-  return data
-}
-
-export async function updatePublic(publicFlag: boolean) {
-  const data = await Client.put('/config/public', { public: publicFlag })
-  return data
-}

frontend/src/repositories/WS.ts

@@ -1,4 +1,4 @@
-import { useMainStore } from "@/stores/main"
+import { useDocumentStore } from "@/stores/documents"
 import type { FileEntry, UpdateEntry, errorEvent } from "./Document"
 
 export const controlUrl = '/api/control'
@@ -6,26 +6,22 @@ export const uploadUrl = '/api/upload'
 export const watchUrl = '/api/watch'
 
 let tree = [] as FileEntry[]
-let reconnDelay = 500
+let reconnectDuration = 500
 let wsWatch = null as WebSocket | null
 
 export const loadSession = () => {
-  const s = localStorage['cista-files']
-  if (!s) return false
-  const store = useMainStore()
+  const store = useDocumentStore()
   try {
-    tree = JSON.parse(s)
+    tree = JSON.parse(sessionStorage["cista-files"])
     store.updateRoot(tree)
-    console.log(`Loaded session with ${tree.length} items cached`)
     return true
   } catch (error) {
-    console.log("Loading session failed", error)
     return false
   }
 }
 
 const saveSession = () => {
-  localStorage["cista-files"] = JSON.stringify(tree)
+  sessionStorage["cista-files"] = JSON.stringify(tree)
 }
 
 export const connect = (path: string, handlers: Partial<Record<keyof WebSocketEventMap, any>>) => {
@@ -39,7 +35,7 @@ export const watchConnect = () => {
     clearTimeout(watchTimeout)
     watchTimeout = null
   }
-  const store = useMainStore()
+  const store = useDocumentStore()
   if (store.error !== 'Reconnecting...') store.error = 'Connecting...'
   console.log(store.error)
 
@@ -53,7 +49,7 @@ export const watchConnect = () => {
     if ('error' in msg) {
       if (msg.error.code === 401) {
         store.user.isLoggedIn = false
-        store.dialog = 'login'
+        store.user.isOpenLoginModal = true
       } else {
         store.error = msg.error.message
       }
@@ -63,11 +59,11 @@ export const watchConnect = () => {
       console.log('Connected to backend', msg)
       store.server = msg.server
       store.connected = true
-      reconnDelay = 500
+      reconnectDuration = 500
       store.error = ''
       if (msg.user) store.login(msg.user.username, msg.user.privileged)
       else if (store.isUserLogged) store.logout()
-      if (!msg.server.public && !msg.user) store.dialog = 'login'
+      if (!msg.server.public && !msg.user) store.user.isOpenLoginModal = true
     }
   })
 }
@@ -81,21 +77,16 @@ export const watchDisconnect = () => {
 let watchTimeout: any = null
 
 const watchReconnect = (event: MessageEvent) => {
-  const store = useMainStore()
+  const store = useDocumentStore()
   if (store.connected) {
     console.warn("Disconnected from server", event)
     store.connected = false
     store.error = 'Reconnecting...'
   }
-  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)
+  reconnectDuration = Math.min(5000, reconnectDuration + 500)
   // The server closes the websocket after errors, so we need to reopen it
-  watchTimeout = setTimeout(watchConnect, reconnDelay)
+  if (watchTimeout !== null) clearTimeout(watchTimeout)
+  watchTimeout = setTimeout(watchConnect, reconnectDuration)
 }
 
 
@@ -118,8 +109,8 @@ const handleWatchMessage = (event: MessageEvent) => {
   }
 }
 
-function handleRootMessage({ root }: { root: FileEntry[] }) {
-  const store = useMainStore()
+function handleRootMessage({ root }: { root: DirEntry }) {
+  const store = useDocumentStore()
   console.log('Watch root', root)
   store.updateRoot(root)
   tree = root
@@ -127,7 +118,7 @@ function handleRootMessage({ root }: { root: FileEntry[] }) {
 }
 
 function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
-  const store = useMainStore()
+  const store = useDocumentStore()
   const update = updateData.update
   console.log('Watch update', update)
   if (!tree) return console.error('Watch update before root')
@@ -151,10 +142,10 @@ function handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
 }
 
 function handleError(msg: errorEvent) {
-  const store = useMainStore()
+  const store = useDocumentStore()
   if (msg.error.code === 401) {
+    store.user.isOpenLoginModal = true
     store.user.isLoggedIn = false
-    store.dialog = 'login'
     return
   }
 }

frontend/src/stores/documents.ts

@@ -1,108 +1,95 @@
-import type { FileEntry, FUID, SelectedItems } from '@/repositories/Document'
-import { Doc } from '@/repositories/Document'
-import { defineStore, type StateTree } from 'pinia'
+import type { Document, FileEntry, FUID, SelectedItems } from '@/repositories/Document'
+import { formatSize, formatUnixDate, haystackFormat } from '@/utils'
+import { defineStore } from 'pinia'
 import { collator } from '@/utils'
 import { logoutUser } from '@/repositories/User'
 import { watchConnect } from '@/repositories/WS'
-import { shallowRef } from 'vue'
-import { sorted, type SortOrder } from '@/utils/docsort'
 
-export const useMainStore = defineStore({
-  id: 'main',
+type FileData = { id: string; mtime: number; size: number; dir: DirectoryData }
+type DirectoryData = {
+  [filename: string]: FileData
+}
+type User = {
+  username: string
+  privileged: boolean
+  isOpenLoginModal: boolean
+  isLoggedIn: boolean
+}
+
+export const useDocumentStore = defineStore({
+  id: 'documents',
   state: () => ({
-    document: shallowRef<Doc[]>([]),
-    selected: new Set<FUID>([]),
-    query: '' as string,
-    fileExplorer: null as any,
+    document: [] as Document[],
+    selected: new Set<FUID>(),
+    uploadingDocuments: [],
+    uploadCount: 0 as number,
+    fileExplorer: null,
     error: '' as string,
     connected: false,
-    cursor: '' as string,
     server: {} as Record<string, any>,
-    dialog: '' as '' | 'login' | 'settings' | 'usermgmt',
-    uprogress: {} as any,
-    dprogress: {} as any,
-    prefs: {
-      gallery: false,
-      sortListing: '' as SortOrder,
-      sortFiltered: '' as SortOrder,
-    },
     user: {
-      username: '' as string,
-      privileged: false as boolean,
-      isLoggedIn: false as boolean,
-    }
+      username: '',
+      privileged: false,
+      isLoggedIn: false,
+      isOpenLoginModal: false
+    } as User
   }),
-  persist: {
-    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[]) {
       const docs = []
       let loc = [] as string[]
       for (const [level, name, key, mtime, size, isfile] of root) {
         loc = loc.slice(0, level - 1)
-        docs.push(new Doc({
+        docs.push({
           name,
           loc: level ? loc.join('/') : '/',
           key,
           size,
+          sizedisp: formatSize(size),
           mtime,
+          modified: formatUnixDate(mtime),
+          haystack: haystackFormat(name),
           dir: !isfile,
-        }))
+        })
         loc.push(name)
       }
-      this.document = docs
+      console.log("Documents", docs)
+      this.document = docs as Document[]
+    },
+    updateModified() {
+      for (const doc of this.document) doc.modified = formatUnixDate(doc.mtime)
     },
     login(username: string, privileged: boolean) {
       this.user.username = username
       this.user.privileged = privileged
       this.user.isLoggedIn = true
-      this.dialog = ''
+      this.user.isOpenLoginModal = false
       if (!this.connected) watchConnect()
     },
     loginDialog() {
-      this.dialog = 'login'
+      this.user.isOpenLoginModal = true
     },
     async logout() {
       console.log("Logout")
       await logoutUser()
       this.$reset()
-      localStorage.clear()
       history.go() // Reload page
-    },
-    toggleSort(name: SortOrder) {
-      if (this.query) this.prefs.sortFiltered = this.prefs.sortFiltered === name ? '' : name
-      else this.prefs.sortListing = this.prefs.sortListing === name ? '' : name
-    },
-    sort(name: SortOrder | '') {
-      if (this.query) this.prefs.sortFiltered = name
-      else this.prefs.sortListing = name
-    },
-    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 },
-    isUserLogged(): boolean { return this.user.isLoggedIn },
-    recentDocuments(): Doc[] { return sorted(this.document, 'modified') },
+    isUserLogged(): boolean {
+      return this.user.isLoggedIn
+    },
+    recentDocuments(): Document[] {
+      const ret = [...this.document]
+      ret.sort((a, b) => b.mtime - a.mtime)
+      return ret
+    },
+    largeDocuments(): Document[] {
+      const ret = [...this.document]
+      ret.sort((a, b) => b.size - a.size)
+      return ret
+    },
     selectedFiles(): SelectedItems {
       const selected = this.selected
       const found = new Set<FUID>()
@@ -123,7 +110,7 @@ export const useMainStore = defineStore({
       for (const key of selected) if (!found.has(key)) ret.missing.add(key)
       // Build a flat list including contents recursively
       const relnames = new Set<string>()
-      function add(rel: string, full: string, doc: Doc) {
+      function add(rel: string, full: string, doc: Document) {
         if (!doc.dir && relnames.has(rel)) throw Error(`Multiple selections conflict for: ${rel}`)
         relnames.add(rel)
         ret.recursive.push([rel, full, doc])

frontend/src/utils/docsort.ts

@@ -1,15 +0,0 @@
-import { Doc } from '@/repositories/Document'
-import { collator } from '@/utils'
-
-export const ordering = {
-  name: (a: Doc, b: Doc) => collator.compare(a.name, b.name),
-  modified: (a: Doc, b: Doc) => b.mtime - a.mtime,
-  size: (a: Doc, b: Doc) => b.size - a.size
-}
-export type SortOrder = keyof typeof ordering | ''
-export const sorted = (documents: Doc[], order: SortOrder) => {
-  if (!order) return documents
-  const sorted = [...documents]
-  sorted.sort(ordering[order])
-  return sorted
-}

frontend/src/utils/fileutil.ts

@@ -1,8 +0,0 @@
-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)
-}

frontend/src/utils/index.ts

@@ -50,11 +50,12 @@ export function formatUnixDate(t: number) {
 }
 
 export function getFileExtension(filename: string) {
-  const dotIndex = filename.lastIndexOf('.')
-  if (dotIndex === -1 || dotIndex === filename.length - 1) {
-    return '' // No extension
+  const parts = filename.split('.')
+  if (parts.length > 1) {
+    return parts[parts.length - 1]
+  } else {
+    return '' // No hay extensión
   }
-  return filename.slice(dotIndex + 1)
 }
 interface FileTypes {
   [key: string]: string[]
@@ -67,9 +68,8 @@ const filetypes: FileTypes = {
 }
 
 export function getFileType(name: string): string {
-  const dotIndex = name.lastIndexOf('.')
-  if (dotIndex === -1 || dotIndex === name.length - 1) return 'unknown'
-  const ext = name.slice(dotIndex + 1).toLowerCase()
+  const ext = name.split('.').pop()?.toLowerCase()
+  if (!ext || ext.length === name.length) return 'unknown'
   return Object.keys(filetypes).find(type => filetypes[type].includes(ext)) || 'unknown'
 }
 
@@ -86,7 +86,7 @@ export function haystackFormat(str: string) {
 // Preformat search string for faster search
 export function needleFormat(query: string) {
   const based = query.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
-  return {based, words: based.split(/\s+/)}
+  return {based, words: based.split(/\W+/)}
 }
 
 // Test if haystack includes needle

frontend/src/views/ExplorerView.vue

@@ -1,30 +1,20 @@
 <template>
-  <Gallery
-    v-if="store.prefs.gallery"
-    ref="fileExplorer"
-    :key="`gallery-${Router.currentRoute.value.path}`"
-    :path="props.path"
-    :documents="documents"
-  />
   <FileExplorer
-    v-else
     ref="fileExplorer"
-    :key="`explorer-${Router.currentRoute.value.path}`"
+    :key="Router.currentRoute.value.path"
     :path="props.path"
     :documents="documents"
+    v-if="props.path"
   />
-  <EmptyFolder :documents=documents :path=props.path />
 </template>
 
 <script setup lang="ts">
-import { watchEffect, ref, computed, watch } from 'vue'
-import { useMainStore } from '@/stores/main'
+import { watchEffect, ref, computed } from 'vue'
+import { useDocumentStore } from '@/stores/documents'
 import Router from '@/router/index'
-import { needleFormat, localeIncludes, collator } from '@/utils'
-import { sorted } from '@/utils/docsort'
-import FileExplorer from '@/components/FileExplorer.vue'
+import { needleFormat, localeIncludes, collator } from '@/utils';
 
-const store = useMainStore()
+const documentStore = useDocumentStore()
 const fileExplorer = ref()
 const props = defineProps<{
   path: Array<string>
@@ -34,25 +24,19 @@ const documents = computed(() => {
   const loc = props.path.join('/')
   const query = props.query
   // List the current location
-  if (!query) return sorted(
-    store.document.filter(doc => doc.loc === loc),
-    store.prefs.sortListing,
-  )
+  if (!query) return documentStore.document.filter(doc => doc.loc === loc)
   // Find up to 100 newest documents that match the search
   const needle = needleFormat(query)
   let limit = 100
   let docs = []
-  for (const doc of store.recentDocuments) {
+  for (const doc of documentStore.recentDocuments) {
     if (localeIncludes(doc.haystack, needle)) {
       docs.push(doc)
       if (--limit === 0) break
     }
   }
+  // Organize by folder, by relevance
   const locsub = loc + '/'
-  // Custom sort override in effect?
-  const order = store.prefs.sortFiltered
-  if (order) return sorted(docs, order)
-  // Sort by relevance - current folder, then subfolders, then others
   docs.sort((a, b) => (
     // @ts-ignore
     (b.loc === loc) - (a.loc === loc) ||
@@ -69,24 +53,6 @@ const documents = computed(() => {
 })
 
 watchEffect(() => {
-  store.fileExplorer = fileExplorer.value
-  store.query = props.query
+  documentStore.fileExplorer = fileExplorer.value
 })
-
-watch([() => props.path.join('/'), () => props.query], () => {
-  store.prefs.gallery = documents.value.some(d => d.previewable)
-}, { immediate: true })
 </script>
-
-<style scoped>
-.empty-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: 2rem;
-  text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
-  color: var(--accent-color);
-}
-</style>

frontend/vite.config.ts

@@ -4,11 +4,12 @@ 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:
-// bun run dev           # Run frontend that proxies to dev_backend
+// npm run dev           # Run frontend that proxies to dev_backend
 // cista -l :8000 --dev  # Run backend
 const dev_backend = {
   target: "http://localhost:8000",
@@ -20,6 +21,7 @@ const dev_backend = {
 export default defineConfig({
   plugins: [
     vue(),
+    pluginRewriteAll(),
     svgLoader(),          // import svg files
     Components(),         // auto import components
   ],
@@ -42,9 +44,7 @@ export default defineConfig({
       "/files": dev_backend,
       "/login": dev_backend,
       "/logout": dev_backend,
-      "/password-change": dev_backend,
       "/zip": dev_backend,
-      "/preview": dev_backend,
     }
   },
   build: {

pyproject.toml

@@ -10,145 +10,94 @@ 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>=25.1.0",
-    "av>=15.0.0",
-    "blake3>=1.0.5",
-    "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",
-    "zstandard>=0.24.0",
+    "argon2-cffi",
+    "blake3",
+    "brotli",
+    "docopt",
+    "inotify",
+    "msgspec",
+    "natsort",
+    "pathvalidate",
+    "pyjwt",
+    "sanic",
+    "stream-zip",
+    "tomli_w",
 ]
 
 [project.urls]
-Homepage = "https://git.zi.fi/Vasanko/cista-storage"
+Homepage = ""
 
 [project.scripts]
 cista = "cista.__main__:main"
 
 [project.optional-dependencies]
 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",
-]
-docs = [
-    "sphinx>=8.0.0",
-    "sphinx-rtd-theme>=3.0.0",
+    "pytest",
+    "ruff",
 ]
 
+[tool.hatchling]
+# Build frontend
+pre_build = "npm run build --prefix cista-front"
+
 [tool.hatch.version]
 source = "vcs"
 
 [tool.hatch.build]
-artifacts = ["cista/wwwroot"]
-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=2",
-    "--strict-markers",
-    "--strict-config",
-    "--cov=cista",
-    "--cov-report=term-missing",
-    "--cov-report=html",
-    "--cov-branch",
+    "--verbosity=-1",
+    "-p no:warnings",
 ]
-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",
+testpaths = [
+    "tests",
 ]
 
-[tool.ruff.lint]
-isort.known-first-party = ["cista"]
-per-file-ignores."tests/*" = ["S", "ANN", "D", "INP", "PLR2004"]
-per-file-ignores."scripts/*" = ["T20"]
+[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",
+]
+show-source = true
+show-fixes = true
 
-[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",
-]
+[tool.ruff.isort]
+known-first-party = ["cista"]
 
-[tool.coverage.run]
-source = ["cista"]
-branch = true
-omit = [
-    "*/tests/*",
-    "*/test_*",
-    "*/__pycache__/*",
-    "cista/_version.py",
-]
-
-[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
+[tool.ruff.per-file-ignores]
+"tests/*" = ["S", "ANN", "D", "INP"]

scripts/build-frontend.py

@@ -1,37 +0,0 @@
-# noqa: INP001
-import os
-import shutil
-import subprocess
-from sys import stderr
-
-from hatchling.builders.hooks.plugin.interface import BuildHookInterface
-
-
-class CustomBuildHook(BuildHookInterface):
-    def initialize(self, version, build_data):
-        super().initialize(version, build_data)
-        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("..")

tests/test_watching.py

@@ -1,7 +1,10 @@
+from pathlib import PurePosixPath
+
 import msgspec
+import pytest
 
 from cista.protocol import FileEntry, UpdateMessage, UpdDel, UpdIns, UpdKeep
-from cista.watching import format_update
+from cista.watching import State, format_update
 
 
 def decode(data: str):
@@ -34,14 +37,6 @@ 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]]
@@ -88,3 +83,54 @@ 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