cista/util/apphelpers.py

@@ -41,7 +41,9 @@ 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()
+    res = errorpages.HTMLRenderer(request, e, debug=request.app.debug).full()
+    res.status = status  # Unfortunately Sanic <23.12 doesn't set this
+    return res
 
 
 def websocket_wrapper(handler):

cista/watching.py

@@ -6,7 +6,7 @@ import time
 from contextlib import suppress
 from os import stat_result
 from pathlib import Path, PurePosixPath
-from stat import S_ISDIR, S_ISREG
+from stat import S_ISDIR
 
 import msgspec
 from natsort import humansorted, natsort_keygen, ns
@@ -144,12 +144,8 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
             if f.name.startswith("."):
                 continue  # No dotfiles
             with suppress(FileNotFoundError):
-                s = f.lstat()
+                s = f.stat()
-                isfile = S_ISREG(s.st_mode)
+                li.append((int(not S_ISDIR(s.st_mode)), f.name, s))
-                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)
@@ -159,9 +155,7 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
             entry.size += child.size
     except FileNotFoundError:
         pass  # Things may be rapidly in motion
-    except OSError as e:
+    except OSError:
-        if e.errno == 13:  # Permission denied
-            pass
         logger.error(f"Watching {path=}: {e!r}")
     return ret
 
@@ -315,13 +309,9 @@ def watcher_inotify(loop):
 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
+        quit.wait(2.0)
-        if dur > 1.0:
-            logger.debug(f"Reading the full file list took {dur:.1f}s")
-        quit.wait(0.1 + 8 * dur)
 
 
 async def start(app, loop):

frontend/src/App.vue

@@ -57,8 +57,6 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
     if (
       event.key === 'ArrowUp' ||
       event.key === 'ArrowDown' ||
-      event.key === 'ArrowLeft' ||
-      event.key === 'ArrowRight' ||
       (c && event.code === 'Space')
     ) {
       event.preventDefault()
@@ -67,17 +65,8 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   }
   //console.log("key pressed", event)
   // For up/down implement custom fast repeat
-  let stride = 1
+  if (event.key === 'ArrowUp') vert = keyup ? 0 : event.altKey ? -10 : -1
-  if (store.gallery) {
+  else if (event.key === 'ArrowDown') vert = keyup ? 0 : event.altKey ? 10 : 1
-    const grid = document.querySelector('.gallery') as HTMLElement
-    stride = getComputedStyle(grid).gridTemplateColumns.split(' ').length
-  }
-  else if (event.altKey) stride *= 10
-  // Long if-else machina for all keys we handle here
-  if (event.key === 'ArrowUp') vert = stride * (keyup ? 0 : -1)
-  else if (event.key === 'ArrowDown') vert = stride * (keyup ? 0 : 1)
-  else if (event.key === 'ArrowLeft') vert = keyup ? 0 : -1
-  else if (event.key === 'ArrowRight') vert = keyup ? 0 : 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()
@@ -94,10 +83,6 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
     fileExplorer.toggleSelectAll()
   }
-  // G toggles Gallery
-  else if (keyup && event.key === 'g') {
-    store.gallery = !store.gallery
-  }
   // Keys 1-3 to sort columns
   else if (
     !input &&
@@ -148,3 +133,4 @@ onUnmounted(() => {
 })
 export type { Path }
 </script>
+@/stores/main

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 {
-  header .breadcrumb { align-self: stretch; }
+    flex-shrink: 1;
-  header .action-button {
+  }
-    width: 2em;
+  header .breadcrumb > * {
-    height: 2em;
+    flex-shrink: 1;
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
   }
 }
 @media print {
@@ -133,9 +142,6 @@
     left: 0;
   }
 }
-* {
-  box-sizing: border-box;
-}
 html {
   font-size: var(--root-font-size);
   overflow: hidden;

frontend/src/components/BreadCrumb.vue

@@ -12,8 +12,6 @@
       :ref="el => setLinkRef(0, el)"
       :class="{ current: !!isCurrent(0) }"
       :aria-current="isCurrent(0)"
-      @click.prevent="navigate(0)"
-      title="/"
     >
       <component :is="home" />
     </a>
@@ -23,7 +21,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>
@@ -104,31 +101,27 @@ watchEffect(() => {
   --breadcrumb-transtime: 0.3s;
 }
 .breadcrumb {
-  flex: 1 1 auto;
   display: flex;
-  min-width: 20%;
+  list-style: none;
-  max-width: 100%;
-  min-height: 2em;
   margin: 0;
   padding: 0 1em 0 0;
 }
 .breadcrumb > a {
-  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 {
-  padding-left: 1.5em;
+  margin-left: 0;
-  padding-right: 1.7em;
+  padding-left: .2em;
   clip-path: none;
 }
 .breadcrumb a:last-child {
@@ -155,9 +148,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);
 }

frontend/src/components/FileExplorer.vue

@@ -28,11 +28,11 @@
 
         <tr
           :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: cursor === doc }"
-          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
+          @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"
@@ -53,12 +53,12 @@
                 :href="doc.url"
                 tabindex="-1"
                 @contextmenu.prevent
-                @focus.stop="store.cursor = doc.key"
+                @focus.stop="cursor = doc"
                 @keyup.left="router.back()"
                 @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                 >{{ doc.name }}</a
               >
-              <button tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
+              <button tabindex=-1 v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
           <FileModified :doc=doc :key=nowkey />
@@ -75,6 +75,7 @@
       </tr>
     </tbody>
   </table>
+  <div v-else class="empty-container">Nothing to see here</div>
 </template>
 
 <script setup lang="ts">
@@ -87,7 +88,6 @@ import { formatSize } from '@/utils'
 import { useRouter } from 'vue-router'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import type { SortOrder } from '@/utils/docsort'
-import type SvgButtonVue from './SvgButton.vue'
 
 const props = defineProps<{
   path: Array<string>
@@ -95,6 +95,7 @@ const props = defineProps<{
 }>()
 const store = useMainStore()
 const router = useRouter()
+const cursor = shallowRef<Doc | null>(null)
 // File rename
 const editing = shallowRef<Doc | null>(null)
 const rename = (doc: Doc, newName: string) => {
@@ -142,18 +143,18 @@ defineExpose({
     if (order) store.toggleSort(order as SortOrder)
   },
   isCursor() {
-    return store.cursor && editing.value === null
+    return cursor.value !== null && editing.value === null
   },
   cursorRename() {
-    editing.value = store.cursor
+    editing.value = cursor.value
   },
   cursorSelect() {
-    const key = store.cursor
+    const doc = cursor.value
-    if (!key) return
+    if (!doc) return
-    if (store.selected.has(key)) {
+    if (store.selected.has(doc.key)) {
-      store.selected.delete(key)
+      store.selected.delete(doc.key)
     } else {
-      store.selected.add(key)
+      store.selected.add(doc.key)
     }
     this.cursorMove(1)
   },
@@ -161,17 +162,17 @@ defineExpose({
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
-      store.cursor = ''
+      cursor.value = null
       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.find(doc => doc.key === store.cursor) : docs.length
+      cursor.value !== null ? docs.indexOf(cursor.value) : docs.length
     const moveto = increment(index, d)
-    store.cursor = docs[moveto]?.key ?? ''
+    cursor.value = docs[moveto] ?? null
-    const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
+    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]
@@ -201,18 +202,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
+  if (cursor.value && cursor.value !== editing.value) editing.value = null
-  if (editing.value) store.cursor = editing.value?.key
+  if (editing.value) cursor.value = editing.value
-  if (store.cursor) {
+  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) {
+  if (!props.documents.length && cursor.value) {
-    store.cursor = ''
+    cursor.value = null
     focusBreadcrumb()
   }
 })
@@ -286,7 +287,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
 
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = doc.key
+  cursor.value = doc
   ContextMenu.showContextMenu({
     x: ev.x, y: ev.y, items: [
       { label: 'Rename', onClick: () => { editing.value = doc } },

frontend/src/components/Gallery.vue

@@ -1,241 +0,0 @@
-<template>
-  <div v-if="props.documents.length || editing" class="gallery">
-    <template v-for="(doc, index) in documents" :key="doc.key">
-      <GalleryFigure :doc="doc" :index="index">
-        <BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" v-if="showFolderBreadcrumb(index)" class="folder-change"/>
-      </GalleryFigure>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
-import { useMainStore } from '@/stores/main'
-import { Doc } from '@/repositories/Document'
-import FileRenameInput from './FileRenameInput.vue'
-import { connect, controlUrl } from '@/repositories/WS'
-import { formatSize } from '@/utils'
-import { useRouter } from 'vue-router'
-import ContextMenu from '@imengyu/vue3-context-menu'
-import type { SortOrder } from '@/utils/docsort'
-
-const props = defineProps<{
-  path: Array<string>
-  documents: Doc[]
-}>()
-const store = useMainStore()
-const router = useRouter()
-// File rename
-const editing = shallowRef<Doc | null>(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
-}
-defineExpose({
-  newFolder() {
-    const now = Math.floor(Date.now() / 1000)
-    editing.value = new Doc({
-      loc: loc.value,
-      key: 'new',
-      name: 'New Folder',
-      dir: true,
-      mtime: now,
-      size: 0,
-    })
-  },
-  toggleSelectAll() {
-    console.log('Select')
-    allSelected.value = !allSelected.value
-  },
-  toggleSortColumn(column: number) {
-    const order = ['', 'name', 'modified', 'size', ''][column]
-    if (order) store.toggleSort(order as SortOrder)
-  },
-  isCursor() {
-    return store.cursor && editing.value === null
-  },
-  cursorRename() {
-    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
-  },
-  cursorSelect() {
-    const key = store.cursor
-    if (!key) return
-    if (store.selected.has(key)) {
-      store.selected.delete(key)
-    } else {
-      store.selected.add(key)
-    }
-    this.cursorMove(1)
-  },
-  cursorMove(d: number, select = false) {
-    // 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) : docs.length
-    const moveto = increment(index, d)
-    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} a`
-    ) as HTMLAnchorElement | null
-    if (a) a.focus()
-  }
-})
-watchEffect(() => {
-  if (!props.documents.length && store.cursor) {
-    store.cursor = ''
-    focusBreadcrumb()
-  }
-})
-let nowkey = ref(0)
-let modifiedTimer: any = null
-const updateModified = () => {
-  nowkey.value = Math.floor(Date.now() / 1000)
-}
-onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
-onUnmounted(() => { clearInterval(modifiedTimer) })
-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: 1rem;
-  width: 100%;
-  display: grid;
-  gap: .5rem;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  grid-auto-rows: 15rem;
-}
-.breadcrumb {
-  position: absolute;
-  z-index: 1;
-}
-</style>

frontend/src/components/GalleryFigure.vue

@@ -1,97 +0,0 @@
-<template>
-  <a
-    :id="`file-${doc.key}`"
-    :href="doc.url"
-    tabindex=0
-    :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-    @contextmenu.prevent
-    @focus.stop="store.cursor = doc.key"
-    @click="ev => {
-      store.cursor = store.cursor === doc.key ? '' : doc.key
-      if (media) { media.play(); ev.preventDefault() }
-    }"
-  >
-    <figure>
-      <slot></slot>
-      <MediaPreview ref=media :doc="doc" />
-      <caption>
-        <label>
-          <SelectBox :doc=doc />
-          <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
-        </label>
-      </caption>
-    </figure>
-  </a>
-</template>
-
-<script setup lang=ts>
-import { defineProps, ref } from 'vue'
-import { useMainStore } from '@/stores/main'
-import { Doc } from '@/repositories/Document'
-import MediaPreview from '@/components/MediaPreview.vue'
-
-const store = useMainStore()
-const props = defineProps<{
-  doc: Doc
-  index: number
-}>()
-const media = ref<typeof MediaPreview | null>(null)
-</script>
-
-<style scoped>
-.gallery figure {
-  height: 15rem;
-  position: relative;
-  border-radius: .5rem;
-  overflow: hidden;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  overflow: hidden;
-}
-figure caption {
-  font-weight: 600;
-  color: var(--text-color);
-  text-shadow: 0 0 .2rem #000, 0 0 1rem #000;
-}
-.cursor caption {
-  background: var(--accent-color);
-}
-caption {
-  position: absolute;
-  overflow: hidden;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}
-caption label {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-label span {
-  flex: 1 1;
-  margin-right: 2rem;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-label input[type='checkbox'] {
-  width: 2rem;
-  height: 2rem;
-  opacity: 0;
-  flex-shrink: 0;
-}
-label input[type='checkbox']:checked {
-  opacity: 1;
-}
-a {
-  text-decoration: none;
-}
-
-</style>

frontend/src/components/HeaderMain.vue

@@ -1,29 +1,31 @@
 <template>
-  <nav class="headermain buttons">
+  <nav class="headermain">
-    <template v-if="store.error">
+    <div class="buttons">
-      <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
+      <template v-if="store.error">
-      <div class="smallgap"></div>
+        <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
-    </template>
+        <div class="smallgap"></div>
-    <UploadButton :path="props.path" />
+      </template>
-    <SvgButton
+      <UploadButton :path="props.path" />
-      name="create-folder"
+      <SvgButton
-      data-tooltip="New folder"
+        name="create-folder"
-      @click="() => store.fileExplorer!.newFolder()"
+        data-tooltip="New folder"
-    />
+        @click="() => store.fileExplorer!.newFolder()"
-    <slot></slot>
-    <div class="spacer smallgap"></div>
-    <template v-if="showSearchInput">
-      <input
-        ref="search"
-        type="search"
-        :value="query"
-        @input="updateSearch"
-        placeholder="Search words"
-        class="margin-input"
       />
-    </template>
+      <slot></slot>
-    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
+      <div class="spacer smallgap"></div>
-    <SvgButton name="cog" @click="settingsMenu" />
+      <template v-if="showSearchInput">
+        <input
+          ref="search"
+          type="search"
+          :value="query"
+          @input="updateSearch"
+          placeholder="Search words"
+          class="margin-input"
+        />
+      </template>
+      <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
+      <SvgButton name="cog" @click="settingsMenu" />
+    </div>
   </nav>
 </template>
 
@@ -72,7 +74,6 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
-  items.push({ label: 'Gallery', onClick: () => store.gallery = !store.gallery })
   if (store.user.isLoggedIn) {
     items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
   } else {
@@ -92,18 +93,24 @@ 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>
+@/stores/main

frontend/src/components/MediaPreview.vue

@@ -1,94 +0,0 @@
-<template>
-  <img v-if=doc.img :src=doc.url alt="">
-  <span v-else-if=doc.dir class="folder icon"></span>
-  <video v-else-if=video() ref=media :src=doc.url controls preload=metadata @click.prevent>📄</video>
-  <audio v-else-if=audio() ref=media :src=doc.url controls preload=metadata @click.stop>📄</audio>
-  <embed v-else-if=embed() :src=doc.url type=text/plain @click.stop @scroll.prevent>
-  <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 { defineProps, ref } from 'vue'
-import type { Doc } from '@/repositories/Document'
-
-const media = ref<HTMLAudioElement | HTMLVideoElement | null>(null)
-
-const props = defineProps<{
-  doc: Doc
-}>()
-
-defineExpose({
-  play() {
-    if (media.value) {
-      media.value.play()
-    }
-  }
-})
-
-
-const video = () => ['mkv', 'mp4', 'webm', 'mov', 'avi'].includes(props.doc.ext)
-const audio = () => ['mp3', 'flac', 'ogg', 'aac'].includes(props.doc.ext)
-const embed = () => ['txt', 'py', 'html', 'css', 'js', 'json', 'xml', 'csv', 'tsv'].includes(props.doc.ext)
-const archive = () => ['zip', 'tar', 'gz', 'bz2', 'xz', '7z', 'rar'].includes(props.doc.ext)
-</script>
-
-<style scoped>
-img, embed, .icon {
-  font-size: 10em;
-  border-radius: .5rem;
-  overflow: hidden;
-  text-align: center;
-  object-fit: cover;
-  object-position: center;
-  min-width: 50%;
-  height: 100%;
-}
-audio, video {
-  height: 100%;
-  min-width: 50%;
-  max-width: 100%;
-  padding-bottom: 2rem;
-  margin: auto;
-}
-.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: '🏴‍☠️';
-}
-.icon {
-  filter: brightness(0.9);
-}
-figure.cursor .icon {
-  filter: brightness(1);
-}
-img::before, video::before {
-  /* broken image */
-  background: #888;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  text-align: center;
-  text-shadow: 0 0 .5rem #000;
-  filter: grayscale(1);
-  content: '❌';
-}
-</style>

frontend/src/components/SelectBox.vue

@@ -1,23 +0,0 @@
-<template>
-  <input type=checkbox tabindex=-1 :checked="store.selected.has(doc.key)"
-    @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 { defineProps } from 'vue'
-import { useMainStore } from '@/stores/main'
-import type { Doc } from '@/repositories/Document'
-
-const props = defineProps<{
-  doc: Doc
-}>()
-const store = useMainStore()
-
-</script>

frontend/src/repositories/Document.ts

@@ -36,14 +36,6 @@ export class Doc {
   get urlrouter(): string {
     return this.url.replace(/^\/#/, '')
   }
-  get img(): boolean {
-    const ext = this.name.split('.').pop()?.toLowerCase()
-    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg'].includes(ext || '')
-  }
-  get ext(): string {
-    const ext = this.name.split('.').pop()
-    return ext ? ext.toLowerCase() : ''
-  }
 }
 export type errorEvent = {
   error: {

frontend/src/stores/main.ts

@@ -23,8 +23,6 @@ export const useMainStore = defineStore({
     fileExplorer: null as any,
     error: '' as string,
     connected: false,
-    gallery: false,
-    cursor: '' as string,
     server: {} as Record<string, any>,
     prefs: {
       sortListing: '' as SortOrder,

frontend/src/views/ExplorerView.vue

@@ -1,40 +1,19 @@
 <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 Files</p>
-    <p v-else-if="store.query">No matches!</p>
-    <p v-else-if="!store.document.find(doc => doc.loc.length + 1 === props.path.length && [...doc.loc, doc.name].join('/') === props.path.join('/'))">Folder not found.</p>
-    <p v-else>Empty folder</p>
-  </div>
-  <Gallery
-    v-else-if="store.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"
   />
-  <div v-if="!store.gallery && documents.some(doc => doc.img)" class="suggest-gallery">
-    <p>Media files found. Would you like a gallery view?</p>
-    <SvgButton name="eye" taborder=0 @click="() => { store.gallery = true }">Gallery</SvgButton>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { watchEffect, ref, computed } from 'vue'
 import { useMainStore } from '@/stores/main'
 import Router from '@/router/index'
-import { needleFormat, localeIncludes, collator } from '@/utils'
+import { needleFormat, localeIncludes, collator } from '@/utils';
-import { sorted } from '@/utils/docsort'
+import { sorted } from '@/utils/docsort';
-import FileExplorer from '@/components/FileExplorer.vue'
-import cog from '@/assets/svg/cog.svg'
 
 const store = useMainStore()
 const fileExplorer = ref()
@@ -85,39 +64,3 @@ watchEffect(() => {
   store.query = props.query
 })
 </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 1rem #000, 0 0 2rem #000;
-  color: var(--accent-color);
-}
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
-}
-.suggest-gallery p {
-  font-size: 2rem;
-  color: var(--accent-color);
-}
-.suggest-gallery {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-svg.cog {
-  width: 10rem;
-  height: 10rem;
-  margin: 0 auto;
-  animation: rotate 10s linear infinite;
-  filter: drop-shadow(0 0 1rem black);
-  fill: var(--primary-color);
-}
-</style>