From 8592d462f25e8f15fdc29797d5be200595113fcb Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 20 Nov 2023 14:11:05 -0800
Subject: [PATCH] Keep current cursor when switching gallery/details.

---
 frontend/src/components/FileExplorer.vue  | 11 ++++++++---
 frontend/src/components/Gallery.vue       |  9 +++++++--
 frontend/src/components/GalleryFigure.vue |  8 +++++---
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index e99a8b2..4348a34 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -80,8 +80,6 @@ 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'
-import type SvgButtonVue from './SvgButton.vue'
 
 const props = defineProps<{
   path: Array<string>
@@ -219,7 +217,14 @@ let modifiedTimer: any = null
 const updateModified = () => {
   nowkey.value = Math.floor(Date.now() / 1000)
 }
-onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
+onMounted(() => {
+  updateModified(); modifiedTimer = setInterval(updateModified, 1000)
+  const active = document.querySelector('.cursor') as HTMLElement | null
+  if (active) {
+    active.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    active.focus()
+  }
+})
 onUnmounted(() => { clearInterval(modifiedTimer) })
 const mkdir = (doc: Doc, name: string) => {
   const control = connect(controlUrl, {
diff --git a/frontend/src/components/Gallery.vue b/frontend/src/components/Gallery.vue
index 3de61f9..f4928a5 100644
--- a/frontend/src/components/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@@ -169,8 +169,13 @@ let modifiedTimer: any = null
 const updateModified = () => {
   nowkey.value = Math.floor(Date.now() / 1000)
 }
-onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) })
-onUnmounted(() => { clearInterval(modifiedTimer) })
+onMounted(() => {
+  const active = document.querySelector('.cursor') as HTMLElement | null
+  if (active) {
+    active.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    active.focus()
+  }
+})
 const mkdir = (doc: Doc, name: string) => {
   const control = connect(controlUrl, {
     open() {
diff --git a/frontend/src/components/GalleryFigure.vue b/frontend/src/components/GalleryFigure.vue
index a5cfd75..947580a 100644
--- a/frontend/src/components/GalleryFigure.vue
+++ b/frontend/src/components/GalleryFigure.vue
@@ -9,12 +9,12 @@
       <slot></slot>
       <MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" />
       <div class="titlespacer"></div>
-      <figcaption>
+      <figcaption @click.prevent>
         <template v-if="editing">
           <FileRenameInput :doc=doc :rename=editing.rename :exit=editing.exit />
         </template>
         <template v-else>
-          <SelectBox :doc=doc />
+          <SelectBox :doc=doc @click="store.cursor = doc.key"/>
           <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
           <div class=namespacer></div>
         </template>
@@ -83,11 +83,13 @@ figcaption input[type='checkbox'] {
   margin: .25em 0 .25em .25em;
   opacity: 0;
   flex-shrink: 0;
+  transition: opacity var(--transition-time) ease-in-out;
 }
-figcaption input[type='checkbox']:checked, figcaption input[type='checkbox']:hover {
+figcaption input[type='checkbox']:checked, figcaption:hover input[type='checkbox'] {
   opacity: 1;
 }
 figcaption span {
+  cursor: default;
   padding: .5em;
   color: #fff;
   font-weight: 600;