frontend/src/App.vue

@@ -62,14 +62,23 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
       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
+  // For up/down implement custom fast repeat
-  let arrow = ''
+  let stride = 1
-  if (event.key.startsWith("Arrow")) arrow = event.key.slice(5).toLowerCase()
+  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()
@@ -78,24 +87,19 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (keyup && !input && event.key === '/') {
     headerMain.value!.toggleSearchInput()
   }
-  // Globally close search, clear errors on Escape
+  // Globally close search on Escape
   else if (keyup && event.key === 'Escape') {
-    store.error = ''
     headerMain.value!.closeSearch(event)
-    store.focusBreadcrumb()
   }
-  else if (!input && keyup && event.key === 'Backspace') {
+  // Select all (toggle); keydown to prevent builtin
-    Router.back()
-  }
-  // Select all (toggle); keydown to precede and prevent builtin
   else if (!keyup && event.key === 'a' && (event.ctrlKey || event.metaKey)) {
     fileExplorer.toggleSelectAll()
   }
   // G toggles Gallery
-  else if (!input && keyup && event.key === 'g') {
+  else if (keyup && event.key === 'g') {
     store.gallery = !store.gallery
   }
-  // Keys Backquote-1-2-3 to sort columns
+  // Keys 1-3 to sort columns
   else if (
     !input &&
     keyup &&
@@ -111,26 +115,28 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (c && event.code === 'Space') {
     if (keyup && !event.altKey && !event.ctrlKey)
       fileExplorer.cursorSelect()
-  }
+  } else return
-  else return
-  /// We are handling this!
   event.preventDefault()
+  if (!vert) {
     if (timer) {
       clearTimeout(timer) // Good for either timeout or interval
       timer = null
     }
-  let f: any
+    return
-  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
+    const select = event.shiftKey
-    f()
+    fileExplorer.cursorMove(vert, select)
-    timer = setTimeout(() => { timer = setInterval(f, tr) }, t0 - tr)
+    const t0 = 200,
+      tr = 30
+    timer = setTimeout(
+      () =>
+        (timer = setInterval(() => {
+          fileExplorer.cursorMove(vert, select)
+        }, tr)),
+      t0 - tr
+    )
   }
 }
 onMounted(() => {

frontend/src/assets/main.css

@@ -92,7 +92,7 @@
   nav,
   .menu,
   .rename-button {
-    display: none !important;
+    display: none;
   }
   .breadcrumb > a {
     color: black !important;
@@ -113,7 +113,6 @@
     padding-bottom: 0 !important;
   }
   thead tr {
-    font-size: 1rem !important;
     position: static !important;
     background: none !important;
     border-bottom: 1pt solid black !important;

frontend/src/components/BreadCrumb.vue

@@ -2,8 +2,8 @@
   <nav
     class="breadcrumb"
     aria-label="Breadcrumb"
-    @keydown.left.stop="move(-1)"
+    @keyup.left.stop="move(-1)"
-    @keydown.right.stop="move(1)"
+    @keyup.right.stop="move(1)"
     @keyup.enter="move(0)"
     @focus=focusCurrent
     tabindex=0

frontend/src/components/FileExplorer.vue

@@ -49,9 +49,15 @@
               <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">
+              <a
-                {{ doc.name }}
+                :href="doc.url"
-              </a>
+                tabindex="-1"
+                @contextmenu.prevent
+                @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="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
@@ -131,11 +137,15 @@ defineExpose({
     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
+    editing.value = store.cursor
   },
   cursorSelect() {
     const key = store.cursor
@@ -145,17 +155,9 @@ defineExpose({
     } else {
       store.selected.add(key)
     }
-    this.cursorMove(1, null)
+    this.cursorMove(1)
   },
-  up(ev: KeyboardEvent) { this.cursorMove(-1, ev) },
+  cursorMove(d: number, select = false) {
-  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
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
@@ -166,7 +168,7 @@ defineExpose({
     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
+      store.cursor ? docs.find(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}`) : ''
@@ -307,36 +309,29 @@ tbody tr {
   position: relative;
   z-index: auto;
 }
-table thead .selection input[type='checkbox'] {
+table thead input[type='checkbox'] {
   position: inherit;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
-  padding: 0;
+  padding: 0.5rem 0.5em;
-  margin: auto;
 }
-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;
+  width: 9em;
-  text-overflow: clip;
 }
 table .size {
-  width: 7rem;
+  width: 5em;
-  text-overflow: clip;
 }
 table .menu {
-  width: 2rem;
+  width: 1rem;
 }
 tbody td {
   font-size: 1.2rem;
@@ -371,7 +366,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;
@@ -392,11 +387,9 @@ tbody tr.cursor {
   padding-right: 1.5rem;
 }
 .sortcolumn::after {
-  font-size: 1rem;
   content: '▸';
   color: #888;
-  margin-left: 0.5rem;
+  margin-left: 0.5em;
-  margin-top: -.2rem;
   position: absolute;
   transition: all var(--transition-time) linear;
 }

frontend/src/components/Gallery.vue

@@ -1,13 +1,15 @@
 <template>
-  <div v-if="props.documents.length || editing" class="gallery" ref="gallery">
+  <div v-if="props.documents.length || editing" class="gallery">
-    <GalleryFigure v-for="(doc, index) in documents" :key="doc.key" :doc="doc" :index="index">
+    <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, nextTick } from 'vue'
+import { ref, computed, watchEffect, shallowRef, onMounted, onUnmounted } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
@@ -49,11 +51,6 @@ const rename = (doc: Doc, newName: string) => {
   }
   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)
@@ -88,14 +85,9 @@ defineExpose({
     } else {
       store.selected.add(key)
     }
-    this.cursorMove(1, null)
+    this.cursorMove(1)
   },
-  up(ev: KeyboardEvent) { this.cursorMove(-columns.value, ev) },
+  cursorMove(d: number, select = false) {
-  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) {
@@ -106,15 +98,8 @@ defineExpose({
     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
+      store.cursor ? docs.findIndex(doc => doc.key === store.cursor) : docs.length
-    let moveto
+    const moveto = increment(index, d)
-    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
-    }
-    console.log("Gallery cursorMove", d, index, moveto, moveto - index)
     store.cursor = docs[moveto]?.key ?? ''
     const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
     if (select) {
@@ -149,8 +134,10 @@ 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
+    const a = document.querySelector(
-    if (a) { a.focus(); a.scrollIntoView({ block: 'center', behavior: 'smooth' }) }
+      `#file-${store.cursor} a`
+    ) as HTMLAnchorElement | null
+    if (a) a.focus()
   }
 })
 watchEffect(() => {

frontend/src/components/GalleryFigure.vue

@@ -1,17 +1,19 @@
 <template>
-  <a :id="`file-${doc.key}`" :href=doc.url tabindex=-1
+  <a
+    :id="`file-${doc.key}`"
+    :href="doc.url"
+    tabindex=0
     :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-    @contextmenu.stop
+    @contextmenu.prevent
     @focus.stop="store.cursor = doc.key"
     @click="ev => {
-      console.log('Gallery click', doc.key, store.cursor, !!media)
+      store.cursor = store.cursor === doc.key ? '' : doc.key
-      if (m!.play()) ev.preventDefault()
+      if (media) { media.play(); ev.preventDefault() }
-      store.cursor = doc.key
     }"
   >
     <figure>
       <slot></slot>
-      <MediaPreview ref=m :doc="doc" :tabindex=-1 />
+      <MediaPreview ref=media :doc="doc" />
       <caption>
         <label>
           <SelectBox :doc=doc />
@@ -23,7 +25,7 @@
 </template>
 
 <script setup lang=ts>
-import { ref } from 'vue'
+import { defineProps, ref } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
 import MediaPreview from '@/components/MediaPreview.vue'
@@ -33,7 +35,7 @@ const props = defineProps<{
   doc: Doc
   index: number
 }>()
-const m = ref<typeof MediaPreview | null>(null)
+const media = ref<typeof MediaPreview | null>(null)
 </script>
 
 <style scoped>

frontend/src/components/HeaderMain.vue

@@ -18,7 +18,7 @@
         type="search"
         :value="query"
         @input="updateSearch"
-        placeholder="Find files"
+        placeholder="Search words"
         class="margin-input"
       />
     </template>

frontend/src/components/HeaderSelected.vue

@@ -150,6 +150,6 @@ const download = async () => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 0;
 }
 </style>
+@/stores/main

frontend/src/components/MediaPreview.vue

@@ -1,19 +1,19 @@
 <template>
   <img v-if=doc.img :src=doc.url alt="">
   <span v-else-if=doc.dir class="folder icon"></span>
-  <video ref=vid v-else-if=video() :src=doc.url controls preload=none @click.prevent>📄</video>
+  <video v-else-if=video() ref=media :src=doc.url controls preload=metadata @click.prevent>📄</video>
-  <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio>
+  <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 { compile, computed, ref } from 'vue'
+import { defineProps, ref } from 'vue'
 import type { Doc } from '@/repositories/Document'
 
-const aud = ref<HTMLAudioElement | null>(null)
+const media = ref<HTMLAudioElement | HTMLVideoElement | null>(null)
-const vid = ref<HTMLVideoElement | null>(null)
+
-const media = computed(() => aud.value || vid.value)
 const props = defineProps<{
   doc: Doc
 }>()
@@ -21,12 +21,9 @@ const props = defineProps<{
 defineExpose({
   play() {
     if (media.value) {
-      if (media.value.paused) media.value.play()
+      media.value.play()
-      else media.value.pause()
+    }
-      return true
   }
-    return false
-  },
 })
 
 

frontend/src/components/SelectBox.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script setup lang=ts>
+import { defineProps } from 'vue'
 import { useMainStore } from '@/stores/main'
 import type { Doc } from '@/repositories/Document'
 

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/stores/main.ts

@@ -83,9 +83,6 @@ export const useMainStore = defineStore({
       if (this.query) this.prefs.sortFiltered = name
       else this.prefs.sortListing = name
     },
-    focusBreadcrumb() {
-      (document.querySelector('.breadcrumb') as HTMLAnchorElement).focus()
-    }
   },
   getters: {
     sortOrder(): SortOrder { return this.query ? this.prefs.sortFiltered : this.prefs.sortListing },

frontend/src/views/ExplorerView.vue

@@ -4,7 +4,7 @@
     <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.some(doc => `${doc.loc}/${doc.name}` === props.path.join('/'))">Folder not found.</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