Large number of keyboard navigation and other fixes.

frontend/src/App.vue

@@ -62,23 +62,14 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
       event.key === 'ArrowRight' ||
       (c && event.code === 'Space')
     ) {
-      event.preventDefault()
+      if (!input) event.preventDefault()
     }
     return
   }
   //console.log("key pressed", event)
-  // For up/down implement custom fast repeat
-  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
+  /// Long if-else machina for all keys we handle here
+  let arrow = ''
+  if (event.key.startsWith("Arrow")) arrow = event.key.slice(5).toLowerCase()
   // 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()
@@ -87,19 +78,24 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (keyup && !input && event.key === '/') {
     headerMain.value!.toggleSearchInput()
   }
-  // Globally close search on Escape
+  // Globally close search, clear errors on Escape
   else if (keyup && event.key === 'Escape') {
+    store.error = ''
     headerMain.value!.closeSearch(event)
+    store.focusBreadcrumb()
   }
-  // Select all (toggle); keydown to prevent builtin
+  else if (!input && keyup && event.key === 'Backspace') {
+    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 (keyup && event.key === 'g') {
+  else if (!input && keyup && event.key === 'g') {
     store.gallery = !store.gallery
   }
-  // Keys 1-3 to sort columns
+  // Keys Backquote-1-2-3 to sort columns
   else if (
     !input &&
     keyup &&
@@ -115,28 +111,26 @@ 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
   }
-    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 (!timer) {
+  if (f && !keyup) {
     // Initial move, then t0 delay until repeats at tr intervals
-    const select = event.shiftKey
-    fileExplorer.cursorMove(vert, select)
-    const t0 = 200,
-      tr = 30
-    timer = setTimeout(
-      () =>
-        (timer = setInterval(() => {
-          fileExplorer.cursorMove(vert, select)
-        }, tr)),
-      t0 - tr
-    )
+    const t0 = 200, tr = event.altKey ? 20 : 100
+    f()
+    timer = setTimeout(() => { timer = setInterval(f, tr) }, t0 - tr)
   }
 }
 onMounted(() => {

frontend/src/assets/main.css

@@ -92,7 +92,7 @@
   nav,
   .menu,
   .rename-button {
-    display: none;
+    display: none !important;
   }
   .breadcrumb > a {
     color: black !important;
@@ -113,6 +113,7 @@
     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"
-    @keyup.left.stop="move(-1)"
-    @keyup.right.stop="move(1)"
+    @keydown.left.stop="move(-1)"
+    @keydown.right.stop="move(1)"
     @keyup.enter="move(0)"
     @focus=focusCurrent
     tabindex=0

frontend/src/components/FileExplorer.vue

@@ -49,15 +49,9 @@
               <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
             </template>
             <template v-else>
-              <a
-                :href="doc.url"
-                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
-              >
+              <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>
             </template>
           </td>
@@ -137,15 +131,11 @@ 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 = store.cursor
+    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
   },
   cursorSelect() {
     const key = store.cursor
@@ -155,9 +145,17 @@ defineExpose({
     } else {
       store.selected.add(key)
     }
-    this.cursorMove(1)
+    this.cursorMove(1, null)
   },
-  cursorMove(d: number, select = false) {
+  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
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
@@ -168,7 +166,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.find(doc => doc.key === store.cursor) : docs.length
+      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}`) : ''
@@ -309,29 +307,36 @@ tbody tr {
   position: relative;
   z-index: auto;
 }
-table thead input[type='checkbox'] {
+table thead .selection input[type='checkbox'] {
   position: inherit;
-  width: 1em;
-  height: 1em;
-  padding: 0.5rem 0.5em;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin: auto;
 }
-table tbody input[type='checkbox'] {
+table tbody .selection input[type='checkbox'] {
   width: 2rem;
   height: 2rem;
 }
 table .selection {
-  width: 2rem;
+  width: 3rem;
   text-align: center;
   text-overflow: clip;
+  padding: 0;
+}
+table .selection input {
+  margin: auto;
 }
 table .modified {
-  width: 9em;
+  width: 10rem;
+  text-overflow: clip;
 }
 table .size {
-  width: 5em;
+  width: 7rem;
+  text-overflow: clip;
 }
 table .menu {
-  width: 1rem;
+  width: 2rem;
 }
 tbody td {
   font-size: 1.2rem;
@@ -366,7 +371,7 @@ table td {
   }
 }
 thead tr {
-  font-size: var(--header-font-size);
+  font-size: 0.8rem;
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
   box-shadow: 0 0 .2rem black;
@@ -387,9 +392,11 @@ tbody tr.cursor {
   padding-right: 1.5rem;
 }
 .sortcolumn::after {
+  font-size: 1rem;
   content: '▸';
   color: #888;
-  margin-left: 0.5em;
+  margin-left: 0.5rem;
+  margin-top: -.2rem;
   position: absolute;
   transition: all var(--transition-time) linear;
 }

frontend/src/components/Gallery.vue

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

frontend/src/components/GalleryFigure.vue

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

frontend/src/components/HeaderMain.vue

@@ -18,7 +18,7 @@
         type="search"
         :value="query"
         @input="updateSearch"
-        placeholder="Search words"
+        placeholder="Find files"
         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 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>
+  <video ref=vid v-else-if=video() :src=doc.url controls preload=none @click.prevent>📄</video>
+  <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio>
   <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 { compile, computed, ref } from 'vue'
 import type { Doc } from '@/repositories/Document'
 
-const media = ref<HTMLAudioElement | HTMLVideoElement | null>(null)
-
+const aud = ref<HTMLAudioElement | null>(null)
+const vid = ref<HTMLVideoElement | null>(null)
+const media = computed(() => aud.value || vid.value)
 const props = defineProps<{
   doc: Doc
 }>()
@@ -21,9 +21,12 @@ const props = defineProps<{
 defineExpose({
   play() {
     if (media.value) {
-      media.value.play()
-    }
+      if (media.value.paused) media.value.play()
+      else media.value.pause()
+      return true
     }
+    return false
+  },
 })
 
 

frontend/src/components/SelectBox.vue

@@ -11,7 +11,6 @@
 </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, defineProps } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
 const props = defineProps<{
   name: string

frontend/src/stores/main.ts

@@ -83,6 +83,9 @@ 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.find(doc => doc.loc.length + 1 === props.path.length && [...doc.loc, doc.name].join('/') === props.path.join('/'))">Folder not found.</p>
+    <p v-else-if="!store.document.some(doc => `${doc.loc}/${doc.name}` === props.path.join('/'))">Folder not found.</p>
     <p v-else>Empty folder</p>
   </div>
   <Gallery