Fixed renames and breadcrumbs for gallery.

cista/watching.py

@@ -153,13 +153,14 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
                 isfile=entry.isfile,
             )
             ret.extend(sub)
-        ret[0] = entry
     except FileNotFoundError:
         pass  # Things may be rapidly in motion
     except OSError as e:
         if e.errno == 13:  # Permission denied
             pass
         logger.error(f"Watching {path=}: {e!r}")
+    if ret:
+        ret[0] = entry
     return ret
 
 

frontend/src/components/BreadCrumb.vue

@@ -122,6 +122,7 @@ watchEffect(() => {
   min-height: 2em;
   margin: 0;
   padding: 0 1em 0 0;
+  overflow: hidden;
 }
 .breadcrumb > a {
   flex: 0 4 auto;

frontend/src/components/FileRenameInput.vue

@@ -56,4 +56,10 @@ input#FileRenameInput {
   outline: none;
   font: inherit;
 }
+.gallery input#FileRenameInput {
+  padding: .75em;
+  font-weight: 600;
+  width: auto;
+}
+
 </style>

frontend/src/components/Gallery.vue

@@ -1,18 +1,19 @@
 <template>
   <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">
+    <GalleryFigure v-if="editing?.key === 'new'" :doc="editing" :key=editing.key :editing="{rename: mkdir, exit}" />
-      <BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" v-if="showFolderBreadcrumb(index)" class="folder-change"/>
+    <template v-for="(doc, index) in documents" :key=doc.key>
-    </GalleryFigure>
+      <GalleryFigure :doc=doc :editing="editing === doc ? {rename, exit} : null">
+        <BreadCrumb v-if=showFolderBreadcrumb(index) :path="doc.loc ? doc.loc.split('/') : []" 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'
 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'
@@ -25,6 +26,7 @@ const store = useMainStore()
 const router = useRouter()
 // File rename
 const editing = shallowRef<Doc | null>(null)
+const exit = () => { editing.value = null }
 const rename = (doc: Doc, newName: string) => {
   const oldName = doc.name
   const control = connect(controlUrl, {
@@ -252,7 +254,6 @@ const contextMenu = (ev: MouseEvent, doc: Doc) => {
   align-items: end;
 }
 .breadcrumb {
-  position: absolute;
+  border-radius: .5em;
-  z-index: 1;
 }
 </style>

frontend/src/components/GalleryFigure.vue

@@ -10,9 +10,14 @@
       <MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" />
       <div class="titlespacer"></div>
       <figcaption>
-        <SelectBox :doc=doc />
+        <template v-if="editing">
-        <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
+          <FileRenameInput :doc=doc :rename=editing.rename :exit=editing.exit />
-        <div class=namespacer></div>
+        </template>
+        <template v-else>
+          <SelectBox :doc=doc />
+          <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
+          <div class=namespacer></div>
+        </template>
       </figcaption>
     </figure>
   </a>
@@ -25,9 +30,14 @@ import { Doc } from '@/repositories/Document'
 import MediaPreview from '@/components/MediaPreview.vue'
 
 const store = useMainStore()
+type EditingProp = {
+  rename: (name: string) => void;
+  exit: () => void;
+}
+
 const props = defineProps<{
-  doc: Doc
+  doc: Doc,
-  index: number
+  editing?: EditingProp,
 }>()
 const m = ref<typeof MediaPreview | null>(null)
 
@@ -70,7 +80,7 @@ figcaption {
 figcaption input[type='checkbox'] {
   width: 1.5em;
   height: 1.5em;
-  margin: .25em;
+  margin: .25em 0 .25em .25em;
   opacity: 0;
   flex-shrink: 0;
 }

frontend/src/components/HeaderMain.vue

@@ -6,7 +6,6 @@
     </template>
     <UploadButton :path="props.path" />
     <SvgButton
-      v-if="!store.prefs.gallery"
       name="create-folder"
       data-tooltip="New folder"
       @click="() => store.fileExplorer!.newFolder()"

frontend/src/utils/fileutil.ts

@@ -1,5 +1,8 @@
 import { useMainStore } from '@/stores/main'
 
-const store = useMainStore()
 
-export const exists = (path: string[]) => store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === path.join('/'))
+export const exists = (path: string[]) => {
+  const store = useMainStore()
+  const p = path.join('/')
+  return store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === p)
+}