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

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
+  let stride = 1
-  else if (event.key === 'ArrowDown') vert = keyup ? 0 : event.altKey ? 10 : 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 &&

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 }"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
-          @click="store.cursor = store.cursor === doc ? null : doc"
+          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
           @contextmenu.prevent="contextMenu($event, doc)"
         >
-          <td class="selection" @click.up.stop="store.cursor = store.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="store.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 />
@@ -142,18 +142,18 @@ defineExpose({
     if (order) store.toggleSort(order as SortOrder)
   },
   isCursor() {
-    return store.cursor !== null && editing.value === null
+    return store.cursor && editing.value === null
   },
   cursorRename() {
     editing.value = store.cursor
   },
   cursorSelect() {
-    const doc = store.cursor
+    const key = store.cursor
-    if (!doc) return
+    if (!key) return
-    if (store.selected.has(doc.key)) {
+    if (store.selected.has(key)) {
-      store.selected.delete(doc.key)
+      store.selected.delete(key)
     } else {
-      store.selected.add(doc.key)
+      store.selected.add(key)
     }
     this.cursorMove(1)
   },
@@ -161,17 +161,17 @@ defineExpose({
     // Move cursor up or down (keyboard navigation)
     const docs = props.documents
     if (docs.length === 0) {
-      store.cursor = 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 =
-      store.cursor !== null ? docs.indexOf(store.cursor) : docs.length
+      store.cursor ? docs.find(doc => doc.key === store.cursor) : docs.length
     const moveto = increment(index, d)
-    store.cursor = docs[moveto] ?? null
+    store.cursor = docs[moveto]?.key ?? ''
-    const tr = store.cursor ? document.getElementById(`file-${store.cursor.key}`) : null
+    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]
@@ -201,18 +201,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value) editing.value = null
+  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
-  if (editing.value) store.cursor = editing.value
+  if (editing.value) store.cursor = editing.value?.key
   if (store.cursor) {
     const a = document.querySelector(
-      `#file-${store.cursor.key} .name a`
+      `#file-${store.cursor} .name a`
     ) as HTMLAnchorElement | null
     if (a) a.focus()
   }
 })
 watchEffect(() => {
   if (!props.documents.length && store.cursor) {
-    store.cursor = null
+    store.cursor = ''
     focusBreadcrumb()
   }
 })
@@ -286,7 +286,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
 
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = 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

@@ -51,43 +51,6 @@ const rename = (doc: Doc, newName: string) => {
   }
   doc.name = newName // We should get an update from watch but this is quicker
 }
-const cursorMove = (d: number, select = false) => {
-  // Move cursor up or down (keyboard navigation)
-  const docs = props.documents
-  if (docs.length === 0) {
-    store.cursor = 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 !== null ? docs.indexOf(store.cursor) : docs.length
-  const moveto = increment(index, d)
-  store.cursor = docs[moveto] ?? null
-  const tr = store.cursor ? document.getElementById(`file-${store.cursor.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]
-    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()
-}
-
 defineExpose({
   newFolder() {
     const now = Math.floor(Date.now() / 1000)
@@ -109,22 +72,57 @@ defineExpose({
     if (order) store.toggleSort(order as SortOrder)
   },
   isCursor() {
-    return store.cursor !== null && editing.value === null
+    return store.cursor && editing.value === null
   },
   cursorRename() {
-    editing.value = store.cursor
+    editing.value = props.documents.find(doc => doc.key === store.cursor) ?? null
   },
   cursorSelect() {
-    const doc = store.cursor
+    const key = store.cursor
-    if (!doc) return
+    if (!key) return
-    if (store.selected.has(doc.key)) {
+    if (store.selected.has(key)) {
-      store.selected.delete(doc.key)
+      store.selected.delete(key)
     } else {
-      store.selected.add(doc.key)
+      store.selected.add(key)
     }
     this.cursorMove(1)
   },
-  cursorMove,
+  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
@@ -133,18 +131,18 @@ const focusBreadcrumb = () => {
 let scrolltimer: any = null
 let scrolltr: any = null
 watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value) editing.value = null
+  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
-  if (editing.value) store.cursor = editing.value
+  if (editing.value) store.cursor = editing.value.key
   if (store.cursor) {
     const a = document.querySelector(
-      `#file-${store.cursor.key} .name a`
+      `#file-${store.cursor} a`
     ) as HTMLAnchorElement | null
     if (a) a.focus()
   }
 })
 watchEffect(() => {
   if (!props.documents.length && store.cursor) {
-    store.cursor = null
+    store.cursor = ''
     focusBreadcrumb()
   }
 })
@@ -218,7 +216,7 @@ const allSelected = computed({
 const loc = computed(() => props.path.join('/'))
 
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
-  store.cursor = doc
+  store.cursor = doc.key
   ContextMenu.showContextMenu({
     x: ev.x, y: ev.y, items: [
       { label: 'Rename', onClick: () => { editing.value = doc } },

frontend/src/components/GalleryFigure.vue

@@ -1,19 +1,17 @@
 <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"
+    @focus.stop="store.cursor = doc.key"
     @click="ev => {
+      store.cursor = store.cursor === doc.key ? '' : doc.key
       if (media) { media.play(); ev.preventDefault() }
     }"
   >
-    <figure
+    <figure>
-      :id="`file-${doc.key}`"
-      :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc }"
-      @click="store.cursor = store.cursor === doc ? null : doc"
-      @click.up.stop="store.cursor = store.cursor === doc ? doc : null"
-    >
       <slot></slot>
       <MediaPreview ref=media :doc="doc" />
       <caption>
@@ -58,7 +56,7 @@ figure caption {
   color: var(--text-color);
   text-shadow: 0 0 .2rem #000, 0 0 1rem #000;
 }
-figure.cursor caption {
+.cursor caption {
   background: var(--accent-color);
 }
 caption {

frontend/src/stores/main.ts

@@ -24,7 +24,7 @@ export const useMainStore = defineStore({
     error: '' as string,
     connected: false,
     gallery: false,
-    cursor: shallowRef<Doc | null>(null),
+    cursor: '' as string,
     server: {} as Record<string, any>,
     prefs: {
       sortListing: '' as SortOrder,