Refactoring cursor to be stored in store as key only. A few issues remain.

cista/util/apphelpers.py

@@ -41,9 +41,7 @@ async def handle_sanic_exception(request, e):
         res.cookies.add_cookie("message", message, max_age=5)
         return res
     # Otherwise use Sanic's default error page
-    res = errorpages.HTMLRenderer(request, e, debug=request.app.debug).full()
-    res.status = status  # Unfortunately Sanic <23.12 doesn't set this
-    return res
+    return errorpages.HTMLRenderer(request, e, debug=request.app.debug).render()
 
 
 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
+from stat import S_ISDIR, S_ISREG
 
 import msgspec
 from natsort import humansorted, natsort_keygen, ns
@@ -144,8 +144,12 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
             if f.name.startswith("."):
                 continue  # No dotfiles
             with suppress(FileNotFoundError):
-                s = f.stat()
-                li.append((int(not S_ISDIR(s.st_mode)), f.name, s))
+                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)
@@ -155,7 +159,9 @@ 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:
+    except OSError as e:
+        if e.errno == 13:  # Permission denied
+            pass
         logger.error(f"Watching {path=}: {e!r}")
     return ret
 
@@ -309,9 +315,13 @@ 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)
-        quit.wait(2.0)
+        dur = time.perf_counter() - t0
+        if dur > 1.0:
+            logger.debug(f"Reading the full file list took {dur:.1f}s")
+        quit.wait(0.1 + 8 * dur)
 
 
 async def start(app, loop):

frontend/src/App.vue

@@ -57,6 +57,8 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
     if (
       event.key === 'ArrowUp' ||
       event.key === 'ArrowDown' ||
+      event.key === 'ArrowLeft' ||
+      event.key === 'ArrowRight' ||
       (c && event.code === 'Space')
     ) {
       event.preventDefault()
@@ -65,8 +67,17 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   }
   //console.log("key pressed", event)
   // For up/down implement custom fast repeat
-  if (event.key === 'ArrowUp') vert = keyup ? 0 : event.altKey ? -10 : -1
-  else if (event.key === 'ArrowDown') vert = keyup ? 0 : event.altKey ? 10 : 1
+  let stride = 1
+  if (store.gallery) {
+    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()
@@ -83,6 +94,10 @@ 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 &&
@@ -133,4 +148,3 @@ 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: calc(6.5 * var(--header-font-size));
+  --header-height: 4rem;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -37,12 +37,6 @@
   :root {
     --root-font-size: calc(8px + 8 * 100vw / 1000);
   }
-  header .buttons:has(input[type='search']) > div {
-    display: none;
-  }
-  header .buttons > div:has(input[type='search']) {
-    display: inherit;
-  }
 }
 @media screen and (min-width: 2000px) {
   :root {
@@ -54,6 +48,7 @@
   :root {
     --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
     --root-font-size: 0.8rem;
+    --header-height: 2rem;
   }
   header .breadcrumb > * {
     padding-top: calc(8 + 8 * 100vh / 600) !important;
@@ -78,17 +73,13 @@
   }
   header {
     display: flex;
-    flex-direction: row-reverse;
     justify-content: space-between;
-    align-items: end;
   }
-  header .breadcrumb {
-    flex-shrink: 1;
-  }
-  header .breadcrumb > * {
-    flex-shrink: 1;
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important;
+  header .headermain { order: 1; }
+  header .breadcrumb { align-self: stretch; }
+  header .action-button {
+    width: 2em;
+    height: 2em;
   }
 }
 @media print {
@@ -142,6 +133,9 @@
     left: 0;
   }
 }
+* {
+  box-sizing: border-box;
+}
 html {
   font-size: var(--root-font-size);
   overflow: hidden;

frontend/src/components/BreadCrumb.vue

@@ -12,6 +12,8 @@
       :ref="el => setLinkRef(0, el)"
       :class="{ current: !!isCurrent(0) }"
       :aria-current="isCurrent(0)"
+      @click.prevent="navigate(0)"
+      title="/"
     >
       <component :is="home" />
     </a>
@@ -21,6 +23,7 @@
         :aria-current="isCurrent(index + 1)"
         @click.prevent="navigate(index + 1)"
         :ref="el => setLinkRef(index + 1, el)"
+        :title="`/${longest.slice(0, index + 1).join('/')}`"
       >{{ location }}</a>
     </template>
   </nav>
@@ -101,27 +104,31 @@ watchEffect(() => {
   --breadcrumb-transtime: 0.3s;
 }
 .breadcrumb {
+  flex: 1 1 auto;
   display: flex;
-  list-style: none;
+  min-width: 20%;
+  max-width: 100%;
+  min-height: 2em;
   margin: 0;
   padding: 0 1em 0 0;
 }
 .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 {
-  margin-left: 0;
-  padding-left: .2em;
+  padding-left: 1.5em;
+  padding-right: 1.7em;
   clip-path: none;
 }
 .breadcrumb a:last-child {
@@ -148,9 +155,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: cursor === doc }"
-          @click="cursor = cursor === doc ? null : doc"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
+          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
           @contextmenu.prevent="contextMenu($event, doc)"
         >
-          <td class="selection" @click.up.stop="cursor = cursor === doc ? doc : null">
+          <td class="selection" @click.up.stop="store.cursor = store.cursor === doc.key ? doc.key : ''">
             <input
               type="checkbox"
               tabindex="-1"
@@ -53,12 +53,12 @@
                 :href="doc.url"
                 tabindex="-1"
                 @contextmenu.prevent
-                @focus.stop="cursor = doc"
+                @focus.stop="store.cursor = doc.key"
                 @keyup.left="router.back()"
                 @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 tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
           <FileModified :doc=doc :key=nowkey />
@@ -75,7 +75,6 @@
       </tr>
     </tbody>
   </table>
-  <div v-else class="empty-container">Nothing to see here</div>
 </template>
 
 <script setup lang="ts">
@@ -88,6 +87,7 @@ 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,7 +95,6 @@ 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) => {
@@ -143,18 +142,18 @@ defineExpose({
     if (order) store.toggleSort(order as SortOrder)
   },
   isCursor() {
-    return cursor.value !== null && editing.value === null
+    return store.cursor && editing.value === null
   },
   cursorRename() {
-    editing.value = cursor.value
+    editing.value = store.cursor
   },
   cursorSelect() {
-    const doc = cursor.value
-    if (!doc) return
-    if (store.selected.has(doc.key)) {
-      store.selected.delete(doc.key)
+    const key = store.cursor
+    if (!key) return
+    if (store.selected.has(key)) {
+      store.selected.delete(key)
     } else {
-      store.selected.add(doc.key)
+      store.selected.add(key)
     }
     this.cursorMove(1)
   },
@@ -162,17 +161,17 @@ defineExpose({
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
-      cursor.value = null
+      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 =
-      cursor.value !== null ? docs.indexOf(cursor.value) : docs.length
+      store.cursor ? docs.find(doc => doc.key === store.cursor) : docs.length
     const moveto = increment(index, d)
-    cursor.value = docs[moveto] ?? null
-    const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
+    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]
@@ -202,18 +201,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (cursor.value && cursor.value !== editing.value) editing.value = null
-  if (editing.value) cursor.value = editing.value
-  if (cursor.value) {
+  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-${cursor.value.key} .name a`
+      `#file-${store.cursor} .name a`
     ) as HTMLAnchorElement | null
     if (a) a.focus()
   }
 })
 watchEffect(() => {
-  if (!props.documents.length && cursor.value) {
-    cursor.value = null
+  if (!props.documents.length && store.cursor) {
+    store.cursor = ''
     focusBreadcrumb()
   }
 })
@@ -287,7 +286,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
 
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  cursor.value = doc
+  store.cursor = doc.key
   ContextMenu.showContextMenu({
     x: ev.x, y: ev.y, items: [
       { label: 'Rename', onClick: () => { editing.value = doc } },

frontend/src/components/Gallery.vue

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

@@ -0,0 +1,97 @@
+<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,31 +1,29 @@
 <template>
-  <nav class="headermain">
-    <div class="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="() => store.fileExplorer!.newFolder()"
+  <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="() => 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"
       />
-      <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>
-      <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-      <SvgButton name="cog" @click="settingsMenu" />
-    </div>
+    </template>
+    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
+    <SvgButton name="cog" @click="settingsMenu" />
   </nav>
 </template>
 
@@ -74,6 +72,7 @@ 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 {
@@ -93,24 +92,18 @@ 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;
-  font-size: 1.5em;
-  max-width: 30vw;
+  max-width: 15ch;
 }
 </style>
-@/stores/main

frontend/src/components/MediaPreview.vue

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

@@ -0,0 +1,23 @@
+<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,6 +36,14 @@ 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,6 +23,8 @@ 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,19 +1,40 @@
 <template>
-  <FileExplorer
+  <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="Router.currentRoute.value.path"
+    :key="`gallery-${Router.currentRoute.value.path}`"
     :path="props.path"
     :documents="documents"
-    v-if="props.path"
   />
+  <FileExplorer
+    v-else
+    ref="fileExplorer"
+    :key="`explorer-${Router.currentRoute.value.path}`"
+    :path="props.path"
+    :documents="documents"
+  />
+  <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 { sorted } from '@/utils/docsort';
+import { needleFormat, localeIncludes, collator } from '@/utils'
+import { sorted } from '@/utils/docsort'
+import FileExplorer from '@/components/FileExplorer.vue'
+import cog from '@/assets/svg/cog.svg'
 
 const store = useMainStore()
 const fileExplorer = ref()
@@ -64,3 +85,39 @@ 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>