README.md

@@ -1,88 +1,44 @@
-# Cista Web Storage
+# Web File Storage
 
-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.
+The Python package installs a `cista` executable. Use `hatch shell` to initiate and install in a virtual environment, or `pip install` it on your system. Alternatively `hatch run cista` may be used to skip the shell step but stay virtual. `pip install hatch` first if needed.
 
-Cista Storage 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.
+Create your user account:
-
-Fully keyboard-navigable and with a responsive layout, Cista Storage 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, or by clicking on breadcrumbs that remember where you were.
-
-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 unconventional filenames, ensuring a smooth experience where others falter.
-
-All of this is wrapped in an intuitive interface, making Cista Storage the ideal choice for anyone seeking a reliable, versatile, and quick file storage solution. Join us at Cista Storage – 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
-### Installation
-
-To install the cista application, use:
 
 ```sh
-pip install cista
+cista --user admin --privileged
 ```
 
-Note: Some Linux distributions might need `--break-system-packages` to install Python packages, which are safely installed in the user's home folder. As an alternative to avoid installation, run it with command `pipx run cista`
+## Running the server
 
-### Running the Server
+Serve your files on localhost:8000:
 
-Create an account:
-```sh
-cista --user yourname --privileged
-```
-
-Serve your files at http://localhost:8000:
 ```sh
 cista -l :8000 /path/to/files
 ```
 
-The server remembers its settings in the config folder (default `~/.local/share/cista/`), including the listen port and directory, for future runs without arguments.
+The Git repository does not contain a frontend build, so you should first do that...
 
-### Internet Access
+## Build frontend
 
-To use your own TLS certificates, place them in the config folder and run:
+Frontend needs to be built before using and after any frontend changes:
-
-```sh
-cista -l cista.example.com
-```
-
-Most admins instead find the Caddy 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. Caddy configuration **/etc/caddy/Caddyfile** is dead simple:
-
-```Caddyfile
-cista.example.com {
-    reverse_proxy :8000
-}
-```
-
-## Development setup
-
-For rapid development, we use the Vite development server for the Vue frontend, while running the backend on port 8000 that Vite proxies backend requests to. Each server live reloads whenever its code or configuration are modified.
 
 ```sh
 cd frontend
 npm install
-npm run dev
+npm run build
 ```
 
-Concurrently, start the backend on another terminal:
+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`.
 
-```sh
+## Development setup
-hatch shell
-pip install -e '.[dev]'
-cista --dev -l :8000 /path/to/files
-```
 
-We use `hatch shell` for installing on a virtual environment, to not disturb the rest of the system with our hacking.
+For rapid turnaround during development, you should run `npm run dev` Vite development server on the Vue frontend. While that is running, start the backend on another terminal `hatch run cista --dev -l :8000` and connect to the frontend.
 
-Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python package. Running `hatch build` builds the frontend and creates a NodeJS-independent Python package.
+The backend and the frontend will each reload automatically at any code or config changes.
 
-## System Deployment
+## System deployment
 
-This setup allows easy addition of storages, each with its own domain, configuration, and files.
+Clone the repository to `/srv/cista/cista-storage` or other suitable location accessible to the storage user account you plan to use. `sudo -u storage -s` and build the frontend if you hadn't already.
-
-Assuming a restricted user account **storage** for serving files and that cista is installed system-wide or on this account (check with `sudo -u storage -s`). Alternatively, use `pipx run cista` or `hatch run cista` as the ExecStart command.
 
 Create **/etc/systemd/system/cista@.service**:
 
@@ -92,14 +48,16 @@ Description=Cista storage %i
 
 [Service]
 User=storage
-ExecStart=cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/@%i/
+WorkingDirectory=/srv/cista/cista-storage
+ExecStart=hatch run cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/@%i/
+TimeoutStopSec=2
 Restart=always
 
 [Install]
 WantedBy=multi-user.target
 ```
 
-This 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.
+This assumes you may want to run multiple separate storages, each having their files under `/media/storage/<domain>` and configuration under `/srv/cista/<domain>/`. Instead of numeric ports, we use UNIX sockets for convenience.
 
 ```sh
 systemctl daemon-reload
@@ -107,7 +65,7 @@ systemctl enable --now cista@foo.example.com
 systemctl enable --now cista@bar.example.com
 ```
 
-Public exposure is easiest using the Caddy web server, but Nginx or others also work. Run the server with -l domain.example.com if you have TLS certificates in the config folder.
+Exposing this publicly online is the most convenient using the [Caddy](https://caddyserver.com/) web server but you can of course use Nginx or others as well. Or even run the server with `-l domain.example.com` given TLS certificates in the config folder.
 
 **/etc/caddy/Caddyfile**:
 
@@ -116,3 +74,5 @@ foo.example.com, bar.example.com {
     reverse_proxy unix//srv/cista/{host}/socket
 }
 ```
+
+Using the `{host}` placeholder we can just put all the domains on the same block. That's the full server configuration you need. `systemctl enable --now caddy` or `systemctl restart caddy` for the config to take effect.

cista/app.py

@@ -11,7 +11,7 @@ import brotli
 import sanic.helpers
 from blake3 import blake3
 from sanic import Blueprint, Sanic, empty, raw
-from sanic.exceptions import Forbidden, NotFound
+from sanic.exceptions import Forbidden, NotFound, ServerError
 from sanic.log import logging
 from stream_zip import ZIP_AUTO, stream_zip
 
@@ -119,9 +119,11 @@ def _load_wwwroot(www):
             if len(br) >= len(data):
                 br = False
             wwwnew[name] = data, br, headers
-    if not wwwnew and not app.debug:
+    if not wwwnew:
-        logging.warning(
+        raise ServerError(
-            f"Web frontend missing from {base}\n  Did you forget: hatch build"
+            "Web frontend missing. Did you forget npm run build?",
+            extra={"wwwroot": str(base)},
+            quiet=True,
         )
     return wwwnew
 

frontend/src/App.vue

@@ -4,7 +4,7 @@
     <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" />
@@ -51,7 +51,6 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   const fileExplorer = store.fileExplorer as any
   if (!fileExplorer) return
   const c = fileExplorer.isCursor()
-  const input = (event.target as HTMLElement).tagName === 'INPUT'
   const keyup = event.type === 'keyup'
   if (event.repeat) {
     if (
@@ -71,21 +70,13 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (!keyup && event.key === 'f' && (event.ctrlKey || event.metaKey)) {
     headerMain.value!.toggleSearchInput()
   }
-  // Search also on / (UNIX style)
-  else if (keyup && !input && event.key === '/') {
-    headerMain.value!.toggleSearchInput()
-  }
-  // Globally close search on Escape
-  else if (keyup && event.key === 'Escape') {
-    headerMain.value!.closeSearch(event)
-  }
   // Select all (toggle); keydown to prevent builtin
   else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
     fileExplorer.toggleSelectAll()
   }
   // Keys 1-3 to sort columns
   else if (
-    !input &&
+    c &&
     keyup &&
     (event.key === '1' || event.key === '2' || event.key === '3')
   ) {

frontend/src/components/BreadCrumb.vue

@@ -5,8 +5,6 @@
     @keyup.left.stop="move(-1)"
     @keyup.right.stop="move(1)"
     @keyup.enter="move(0)"
-    @focus=focusCurrent
-    tabindex=0
   >
     <a href="#/"
       :ref="el => setLinkRef(0, el)"
@@ -28,7 +26,7 @@
 
 <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'
 
 const router = useRouter()
@@ -39,33 +37,22 @@ 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 url = `/${longest.value.slice(0, index).join('/')}/`
-  const long = longest.value.length ? `/${longest.value.join('/')}/` : '/'
+  const here = `/${longest.value.join('/')}/`
-  const browser = decodeURIComponent(location.hash.slice(1).split('//')[0])
+  const current = 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 (here.startsWith(current)) router.replace(u)
-  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)
+  link.focus()
 }
 
 const move = (dir: number) => {
@@ -77,16 +64,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))
   }
-  // If needed, focus primary navigation to new location
+})
-  if (props.primary) nextTick(() => {
+watchEffect(() => {
-    const act = document.activeElement as HTMLElement
+  if (links.length) navigate(props.path.length)
-    if (!act || [...links, document.body].includes(act)) focusCurrent()
-  })
 })
 </script>
 

frontend/src/components/FileExplorer.vue

@@ -58,13 +58,13 @@
                 @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                 >{{ doc.name }}</a
               >
-              <button tabindex=-1 v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
+              <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
           <FileModified :doc=doc :key=nowkey />
           <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>

frontend/src/components/HeaderMain.vue

@@ -21,6 +21,7 @@
           @input="updateSearch"
           placeholder="Search words"
           class="margin-input"
+          @keyup.escape="closeSearch"
         />
       </template>
       <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />