Fix layout when there is more space than needed to display file explorer (don't scale larger) or gallery (don't bottom align).

- Replace circular watchEffects in FileExplorer/Gallery with explicit watchers

  to stop recursive Vue updates when creating items in empty folders.

- Move EmptyFolder rendering inside FileExplorer/Gallery so empty/list swaps

  no longer trigger folder slide transitions.

- Keep EmptyFolder text size consistent across list and gallery views.

cista/auth.py

@@ -1293,9 +1293,7 @@ def _token_belongs_to_user(token, username, sso_user_id):
 
 def _is_anonymous_share_token(token: config.Token) -> bool:
     return (
-        sharefs.is_share_token(token)
-        and not token.username
-        and not token.sso_user_id
+        sharefs.is_share_token(token) and not token.username and not token.sso_user_id
     )
 
 

frontend/src/App.vue

@@ -29,7 +29,13 @@
       @after-enter="store.transitionDirection = 'none'"
     >
       <div :key="routeViewKey" class="explorer-content">
-        <RouterView :path="path.pathList" :query="path.query" />
+        <KeepAlive>
+          <component
+            :is="routeViewComponent"
+            :key="routeViewKey"
+            v-bind="routeViewProps"
+          />
+        </KeepAlive>
       </div>
     </Transition>
   </main>
@@ -43,10 +49,10 @@
 <script setup lang="ts">
 import type HeaderMain from '@/components/HeaderMain.vue'
 import { loadSession, watchConnect, watchDisconnect } from '@/repositories/WS'
+import { getDocuments } from '@/stores/documentStore'
 import { useMainStore } from '@/stores/main'
 import type { ComputedRef } from 'vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { RouterView } from 'vue-router'
 
 import Router from '@/router/index'
 import { computed } from 'vue'
@@ -57,9 +63,12 @@ import type SettingsModalVue from './components/SettingsModal.vue'
 import UserManagementModal from './components/UserManagementModal.vue'
 import UserTokensModal from './components/UserTokensModal.vue'
 import type { SortOrder } from './utils/docsort'
+import ExplorerView from './views/ExplorerView.vue'
+import TextEditorView from './views/TextEditorView.vue'
 
 interface Path {
   path: string
+  canonicalPath: string
   isEditorPath: boolean
   pathList: string[]
   breadcrumbPathList: string[]
@@ -67,26 +76,40 @@ interface Path {
   query: string
 }
 const store = useMainStore()
+
+const getDocByPath = (fullPath: string) =>
+  getDocuments().find(
+    doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === fullPath
+  )
+
 const path: ComputedRef<Path> = computed(() => {
   const p = decodeURIComponent(Router.currentRoute.value.path).split('//')
-  const routePathList = (p[0] ?? '').split('/').filter(value => value !== '')
+  const rawPath = p[0] ?? ''
+  const routePathList = rawPath.split('/').filter(value => value !== '')
   const query = p.slice(1).join('//')
-  const isEditorPath = routePathList[0] === 'edit'
-  const pathList = isEditorPath ? routePathList.slice(1, -1) : routePathList
-  const breadcrumbPathList = isEditorPath
-    ? routePathList.slice(1)
-    : routePathList
+  const fullPath = routePathList.join('/')
+  // Access docVersion to make route mode reactive to tree updates
+  void store.docVersion
+  const doc = fullPath ? getDocByPath(fullPath) : null
+  const isEditorPath = !!(doc && !doc.dir && doc.text)
+  const canonicalBase = !fullPath ? '/' : doc?.dir ? `/${fullPath}/` : `/${fullPath}`
+  const canonicalPath = query
+    ? rawPath // keep search URL shape untouched
+    : canonicalBase
+  const pathList = isEditorPath ? routePathList.slice(0, -1) : routePathList
+  const breadcrumbPathList = routePathList
   const breadcrumbLinks = isEditorPath
     ? [
         '/',
         ...routePathList
-          .slice(1, -1)
-          .map((_, index) => `/${routePathList.slice(1, index + 2).join('/')}/`),
-        `/${routePathList.join('/')}`
+          .slice(0, -1)
+          .map((_, index) => `/${routePathList.slice(0, index + 1).join('/')}/`),
+        `/${fullPath}`
       ]
     : undefined
   return {
-    path: p[0] ?? '',
+    path: rawPath,
+    canonicalPath,
     isEditorPath,
     pathList,
     breadcrumbPathList,
@@ -99,10 +122,25 @@ const routeTransitionName = computed(() => {
   if (store.transitionDirection === 'backward') return 'slide-backward'
   return ''
 })
+const routeViewComponent = computed(() =>
+  path.value.isEditorPath ? TextEditorView : ExplorerView
+)
 const routeViewKey = computed(() => {
-  const route = Router.currentRoute.value
-  return route.name === 'editor' ? route.path : String(route.name ?? route.path)
+  return path.value.isEditorPath ? `editor:${path.value.path}` : 'explorer'
 })
+const routeViewProps = computed(() =>
+  path.value.isEditorPath ? {} : { path: path.value.pathList, query: path.value.query }
+)
+watch(
+  () => path.value.canonicalPath,
+  canonical => {
+    const current = decodeURIComponent(Router.currentRoute.value.path)
+    if (canonical && current !== canonical) {
+      Router.replace(canonical.replaceAll('?', '%3F').replaceAll('#', '%23'))
+    }
+  },
+  { immediate: true }
+)
 watch(
   () => path.value.path,
   () => {

frontend/src/assets/main.css

@@ -62,10 +62,12 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
+  height: 100%;
 }
 
 .explorer-content {
   grid-area: 1 / 1;
+  height: 100%;
 }
 
 .slide-forward-enter-active,

frontend/src/assets/svg/create-file.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
 	<path fill-rule="evenodd" d="M19.2 2.6H6.1V29h19.8V9.3l-6.7-6.7zM22.75 18.55c0 .2625-.175.4375-.4375.4375h-4.55v4.55c0 .2625-.175.4375-.4375.4375h-2.45c-.2625 0-.4375-.175-.4375-.4375v-4.55h-4.55c-.2625 0-.4375-.175-.4375-.4375V16.1c0-.2625.175-.4375.4375-.4375h4.55v-4.55c0-.2625.175-.4375.4375-.4375h2.45c.2625 0 .4375.175.4375.4375v4.55h4.55c.2625 0 .4375.175.4375.4375v2.45z" />
-</svg>
+</svg>

frontend/src/components/BreadCrumb.vue

@@ -122,8 +122,7 @@ watchEffect(() => {
   if (!same) {
     longest.value = props.path
     longestLinks.value = currentLinks
-  }
-  else if (props.path.length > longcut.length) {
+  } else if (props.path.length > longcut.length) {
     longest.value = longcut.concat(props.path.slice(longcut.length))
     longestLinks.value.splice(0, currentLinks.length, ...currentLinks)
   } else {

frontend/src/components/DiskSpace.vue

@@ -104,7 +104,9 @@ const showOtherCategory = computed(() => {
   return !!s.disk && otherBytes.value / s.disk >= 0.01
 })
 const freeSliceBytes = computed(() =>
-  showOtherCategory.value ? store.space.free : Math.max(0, store.space.disk - store.space.allocated)
+  showOtherCategory.value
+    ? store.space.free
+    : Math.max(0, store.space.disk - store.space.allocated)
 )
 
 // Calculate max label length based on angular gap to neighbor labels
@@ -295,7 +297,11 @@ const freeLabelPath = computed(() =>
   createArcPath(adjustedLabelAngles.value.free!, 'free', 4)
 )
 const otherLabelPath = computed(() =>
-  createArcPath(adjustedLabelAngles.value.other ?? sectorInfo.value.other.angle, 'other', 5)
+  createArcPath(
+    adjustedLabelAngles.value.other ?? sectorInfo.value.other.angle,
+    'other',
+    5
+  )
 )
 
 const handleClick = () => (isExpanded.value ? collapse() : expand())

frontend/src/components/EmptyFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!props.path || documents.length === 0" class="empty-container">
+  <div v-if="showEmpty" class="empty-container">
     <component :is="cog" :class="['cog', { stopped: store.dialog === 'accessdenied' || store.authInProgress }]"/>
     <p v-if="store.dialog === 'accessdenied'">Access Denied</p>
     <p v-else-if="!store.connected">No Connection</p>
@@ -14,6 +14,7 @@
 import { Cog } from '@/assets/svg'
 import { useMainStore } from '@/stores/main'
 import { exists } from '@/utils/fileutil'
+import { computed } from 'vue'
 
 const cog = Cog
 const store = useMainStore()
@@ -21,9 +22,29 @@ const props = defineProps<{
   path: string[]
   documents: Document[]
 }>()
+
+const showEmpty = computed(() => {
+  const loc = props.path.join('/')
+  const hasVisibleGhost = store.ghosts.some(g => {
+    const full = g.loc ? `${g.loc}/${g.name}` : g.name
+    return g.loc === loc && !store.hiddenPaths.has(full)
+  })
+
+  return !props.path || (props.documents.length === 0 && !hasVisibleGhost)
+})
 </script>
 
 <style scoped>
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 2rem;
+  text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
+  color: var(--accent-color);
+}
 @keyframes rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }

frontend/src/components/FileExplorer.vue

@@ -1,74 +1,77 @@
 <template>
-  <table v-if="props.documents.length || editing">
-    <thead>
-      <tr>
-        <th class="selection">
-          <input type="checkbox" tabindex="-1" v-model="allSelected" :indeterminate="selectionIndeterminate">
-        </th>
-        <th class="sortcolumn" :class="{ sortactive: store.sortOrder === 'name' }" @click="store.toggleSort('name')">Name</th>
-        <th class="sortcolumn modified right" :class="{ sortactive: store.sortOrder === 'modified' }" @click="store.toggleSort('modified')">Modified</th>
-        <th class="sortcolumn size right" :class="{ sortactive: store.sortOrder === 'size' }" @click="store.toggleSort('size')">Size</th>
-        <th class="menu"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-if="editing?.key === 'new'" :class="editing.dir ? 'folder' : 'file'">
-        <td class="selection"></td>
-        <td class="name">
-          <FileRenameInput :doc="editing" :rename="createItem" :exit="() => {editing = null}" />
-        </td>
-        <FileModified :doc=editing :now=nowkey />
-        <FileSize :doc=editing />
-        <td class="menu"></td>
-      </tr>
-      <template v-for="(doc, index) in documents" :key="doc.key">
-        <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
-          <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
+  <div class="file-explorer">
+    <table v-if="props.documents.length || editing">
+      <thead>
+        <tr>
+          <th class="selection">
+            <input type="checkbox" tabindex="-1" v-model="allSelected" :indeterminate="selectionIndeterminate">
+          </th>
+          <th class="sortcolumn" :class="{ sortactive: store.sortOrder === 'name' }" @click="store.toggleSort('name')">Name</th>
+          <th class="sortcolumn modified right" :class="{ sortactive: store.sortOrder === 'modified' }" @click="store.toggleSort('modified')">Modified</th>
+          <th class="sortcolumn size right" :class="{ sortactive: store.sortOrder === 'size' }" @click="store.toggleSort('size')">Size</th>
+          <th class="menu"></th>
         </tr>
-
-        <tr
-          :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key, ghost: doc.ghost }"
-          @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.key ? doc.key : ''">
-            <input
-              type="checkbox"
-              tabindex="-1"
-              :checked="store.selected.has(doc.key)"
-              @change="
-                ($event.target as HTMLInputElement).checked
-                  ? store.selected.add(doc.key)
-                  : store.selected.delete(doc.key)
-              "
-            />
-          </td>
+      </thead>
+      <tbody>
+        <tr v-if="editing?.key === 'new'" :class="editing.dir ? 'folder' : 'file'">
+          <td class="selection"></td>
           <td class="name">
-            <template v-if="editing === doc">
-              <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
-            </template>
-            <template v-else>
-              <a :href="doc.text ? doc.editurl : 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>
-          <FileModified :doc=doc :now=nowkey />
-          <FileSize :doc=doc />
-          <td class="menu">
-            <button tabindex=-1 @click.stop="contextMenu($event, doc)">⋮</button>
+            <FileRenameInput :doc="editing" :rename="createItem" :exit="exitEditing" />
           </td>
+          <FileModified :doc=editing :now=nowkey />
+          <FileSize :doc=editing />
+          <td class="menu"></td>
         </tr>
-      </template>
-      <tr class="summary" v-if="props.documents.length > 1">
-        <td colspan="3" class="right">{{props.documents.length}} items</td>
-        <td class="size right">{{ formatSize(props.documents.reduce((a, b) => a + b.size, 0)) }}</td>
-        <td class="menu"></td>
-      </tr>
-    </tbody>
-  </table>
+        <template v-for="(doc, index) in documents" :key="doc.key">
+          <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
+            <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
+          </tr>
+
+          <tr
+            :id="`file-${doc.key}`"
+            :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key, ghost: doc.ghost }"
+            @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.key ? doc.key : ''">
+              <input
+                type="checkbox"
+                tabindex="-1"
+                :checked="store.selected.has(doc.key)"
+                @change="
+                  ($event.target as HTMLInputElement).checked
+                    ? store.selected.add(doc.key)
+                    : store.selected.delete(doc.key)
+                "
+              />
+            </td>
+            <td class="name">
+              <template v-if="editing === doc">
+                <FileRenameInput :doc="doc" :rename="rename" :exit="exitEditing" />
+              </template>
+              <template v-else>
+                <a :href="doc.text ? doc.editurl : 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>
+            <FileModified :doc=doc :now=nowkey />
+            <FileSize :doc=doc />
+            <td class="menu">
+              <button tabindex=-1 @click.stop="contextMenu($event, doc)">⋮</button>
+            </td>
+          </tr>
+        </template>
+        <tr class="summary" v-if="props.documents.length > 1">
+          <td colspan="3" class="right">{{props.documents.length}} items</td>
+          <td class="size right">{{ formatSize(props.documents.reduce((a, b) => a + b.size, 0)) }}</td>
+          <td class="menu"></td>
+        </tr>
+      </tbody>
+    </table>
+    <EmptyFolder v-else :documents="documents" :path="props.path" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -81,11 +84,12 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 import {
   computed,
   nextTick,
+  onDeactivated,
   onMounted,
   onUnmounted,
   ref,
   shallowRef,
-  watchEffect
+  watch
 } from 'vue'
 import { useRouter } from 'vue-router'
 import FileRenameInput from './FileRenameInput.vue'
@@ -189,6 +193,9 @@ const pageMove = (direction: 1 | -1, ev: KeyboardEvent) => {
 
 // File rename
 const editing = shallowRef<Doc | null>(null)
+const exitEditing = () => {
+  editing.value = null
+}
 const rename = async (doc: Doc, newName: string) => {
   const oldName = doc.name
   doc.name = newName // We should get an update from watch but this is quicker
@@ -243,7 +250,7 @@ defineExpose({
     const docs = props.documents
     if (docs.length > 0) {
       store.cursor = docs[0]!.key
-      // Also focus the element directly (watchEffect won't trigger if cursor unchanged)
+      // Also focus the element directly (post-flush watcher won't trigger if cursor unchanged)
       nextTick(() => {
         const a = document.querySelector(
           `#file-${store.cursor} .name a`
@@ -329,22 +336,35 @@ const focusBreadcrumb = () => {
 const keyboardFollowScroll = createKeyboardFollowScroll()
 const markKeyboardFollow = keyboardFollowScroll.markKeyboardFollow
 const keepCursorVisibleSmooth = keyboardFollowScroll.keepVisible
-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} .name a`
-    ) as HTMLAnchorElement | null
-    if (a) a.focus({ preventScroll: true })
+watch(
+  () => store.cursor,
+  cursor => {
+    if (cursor && editing.value && cursor !== editing.value.key) {
+      exitEditing()
+    }
   }
-})
-watchEffect(() => {
-  if (!props.documents.length && store.cursor && !store.query) {
-    store.cursor = ''
-    focusBreadcrumb()
+)
+watch(
+  () => store.cursor,
+  cursor => {
+    if (cursor && !editing.value) {
+      const a = document.querySelector(
+        `#file-${cursor} .name a`
+      ) as HTMLAnchorElement | null
+      if (a) a.focus({ preventScroll: true })
+    }
+  },
+  { flush: 'post' }
+)
+watch(
+  () => [props.documents.length, store.cursor, store.query, editing.value] as const,
+  ([len, cursor, query, editingDoc]) => {
+    if (!len && cursor && !query && !editingDoc) {
+      store.cursor = ''
+      focusBreadcrumb()
+    }
   }
-})
+)
 let nowkey = ref(0)
 let modifiedTimer: any = null
 const updateModified = () => {
@@ -358,12 +378,15 @@ onMounted(() => {
     active.focus({ preventScroll: true })
   }
 })
+onDeactivated(() => {
+  if (editing.value) exitEditing()
+})
 onUnmounted(() => {
   keyboardFollowScroll.cancel()
   clearInterval(modifiedTimer)
 })
 const editRoute = (path: string) =>
-  '/edit/' +
+  '/' +
   path
     .split('/')
     .map(part => encodeURIComponent(part))
@@ -373,7 +396,8 @@ const createItem = async (doc: Doc, name: string) => {
   doc.name = name
   doc.key = crypto.randomUUID()
   store.addGhost(doc)
-  editing.value = null
+  store.cursor = doc.key
+  exitEditing()
   const path = doc.loc ? `${doc.loc}/${name}` : name
   try {
     const res = doc.dir
@@ -525,9 +549,14 @@ const contextMenu = (ev: MouseEvent, doc: Doc) => {
 </script>
 
 <style scoped>
+.file-explorer {
+  height: 100%;
+  width: 100%;
+}
 table {
   width: 100%;
   table-layout: fixed;
+  height: auto;
 }
 thead tr {
   position: sticky;
@@ -658,12 +687,6 @@ tbody .selection input {
   content: '📁';
   font-size: 1.5rem;
 }
-.empty-container {
-  padding-top: 3rem;
-  text-align: center;
-  font-size: 3rem;
-  color: var(--accent-color);
-}
 .folder-change {
   margin-left: -.5rem;
 }
@@ -674,4 +697,3 @@ tbody .selection input {
   color: #888;
 }
 </style>
-@/stores/main

frontend/src/components/Gallery.vue

@@ -13,6 +13,7 @@
       />
     </template>
   </div>
+  <EmptyFolder v-else :documents="documents" :path="props.path" />
 </template>
 
 <script setup lang="ts">
@@ -25,12 +26,13 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 import {
   computed,
   nextTick,
+  onActivated,
+  onDeactivated,
   onMounted,
   onUnmounted,
   ref,
   shallowRef,
-  watch,
-  watchEffect
+  watch
 } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -170,6 +172,7 @@ const onImgLoad = (e: Event) => {
 }
 const updateColumns = () => {
   if (!gallery.value) return
+  if (gallery.value.getBoundingClientRect().width <= 0) return
   const style = getComputedStyle(gallery.value)
   const templates = style.gridTemplateColumns
     .split(' ')
@@ -301,7 +304,7 @@ defineExpose({
     const docs = props.documents
     if (docs.length > 0) {
       store.cursor = docs[0]!.key
-      // Also focus the element directly (watchEffect won't trigger if cursor unchanged)
+      // Also focus the element directly (post-flush watcher won't trigger if cursor unchanged)
       nextTick(() => {
         const a = document.querySelector(
           `#file-${store.cursor}`
@@ -393,25 +396,49 @@ const focusBreadcrumb = () => {
 const keyboardFollowScroll = createKeyboardFollowScroll()
 const markKeyboardFollow = keyboardFollowScroll.markKeyboardFollow
 const keepCursorVisibleSmooth = keyboardFollowScroll.keepVisible
-watchEffect(() => {
-  if (store.cursor && store.cursor !== editing.value?.key) editing.value = null
-  if (editing.value) store.cursor = editing.value.key
-  if (store.cursor && !editing.value) {
-    const a = document.querySelector(
-      `#file-${store.cursor}`
-    ) as HTMLAnchorElement | null
-    if (a) {
-      a.focus({ preventScroll: true })
+watch(
+  () => store.cursor,
+  cursor => {
+    if (cursor && editing.value && cursor !== editing.value.key) {
+      exit()
     }
   }
-})
-watchEffect(() => {
-  if (!props.documents.length && store.cursor && !store.query) {
-    store.cursor = ''
-    focusBreadcrumb()
+)
+watch(
+  () => store.cursor,
+  cursor => {
+    if (cursor && !editing.value) {
+      const a = document.querySelector(`#file-${cursor}`) as HTMLAnchorElement | null
+      if (a) {
+        a.focus({ preventScroll: true })
+      }
+    }
+  },
+  { flush: 'post' }
+)
+watch(
+  () => [props.documents.length, store.cursor, store.query, editing.value] as const,
+  ([len, cursor, query, editingDoc]) => {
+    if (!len && cursor && !query && !editingDoc) {
+      store.cursor = ''
+      focusBreadcrumb()
+    }
   }
-})
+)
 let resizeObserver: ResizeObserver | null = null
+const attachGalleryObservers = () => {
+  if (!gallery.value || resizeObserver) return
+  resizeObserver = new ResizeObserver(updateColumns)
+  resizeObserver.observe(gallery.value)
+  gallery.value.addEventListener('load', onImgLoad, { capture: true })
+}
+
+const detachGalleryObservers = () => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  gallery.value?.removeEventListener('load', onImgLoad, { capture: true })
+}
+
 onMounted(() => {
   const active = document.querySelector('.cursor') as HTMLElement | null
   if (active) {
@@ -419,22 +446,27 @@ onMounted(() => {
   }
   updateColumns()
   seedFromDocs()
-  if (gallery.value) {
-    resizeObserver = new ResizeObserver(updateColumns)
-    resizeObserver.observe(gallery.value)
-    gallery.value.addEventListener('load', onImgLoad, { capture: true })
-  }
+  attachGalleryObservers()
+})
+onActivated(() => {
+  nextTick(() => {
+    updateColumns()
+    attachGalleryObservers()
+  })
+})
+onDeactivated(() => {
+  detachGalleryObservers()
+  if (editing.value) exit()
 })
 onUnmounted(() => {
   keyboardFollowScroll.cancel()
-  resizeObserver?.disconnect()
-  gallery.value?.removeEventListener('load', onImgLoad, { capture: true })
+  detachGalleryObservers()
 })
 
 // Re-seed aspect ratios whenever docs update (e.g., ar patch from server)
 watch(() => props.documents, seedFromDocs)
 const editRoute = (path: string) =>
-  '/edit/' +
+  '/' +
   path
     .split('/')
     .map(part => encodeURIComponent(part))
@@ -444,7 +476,8 @@ const createItem = async (doc: Doc, name: string) => {
   doc.name = name
   doc.key = crypto.randomUUID()
   store.addGhost(doc)
-  editing.value = null
+  store.cursor = doc.key
+  exit()
   const path = doc.loc ? `${doc.loc}/${name}` : name
   try {
     const res = doc.dir
@@ -592,7 +625,8 @@ const contextMenu = (ev: MouseEvent, doc: Doc) => {
   display: grid;
   gap: .5em;
   grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-  align-items: end;
+  align-items: start;
+  align-content: start;
 }
 .folder-indicator {
   grid-column: 1 / -1;

frontend/src/repositories/Document.ts

@@ -95,7 +95,7 @@ export class Doc {
   get editurl(): string {
     if (!this.text) return ''
     const p = this.loc ? `${this.loc}/${this.name}` : this.name
-    return '/#/edit/' + p.replaceAll('?', '%3F').replaceAll('#', '%23')
+    return '/#/' + p.replaceAll('?', '%3F').replaceAll('#', '%23')
   }
   get complete(): boolean {
     return !this.ghost && (this.dir || this.size <= this.allocated)

frontend/src/router/index.ts

@@ -1,6 +1,5 @@
 import { useMainStore } from '@/stores/main'
 import ExplorerView from '@/views/ExplorerView.vue'
-import TextEditorView from '@/views/TextEditorView.vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 function getPathDepth(path: string): number {
@@ -11,11 +10,6 @@ function getPathDepth(path: string): number {
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/edit/:pathMatch(.*)*',
-      name: 'editor',
-      component: TextEditorView
-    },
     {
       path: '/:pathMatch(.*)*',
       name: 'explorer',

frontend/src/utils/fileutil.ts

@@ -7,9 +7,16 @@ export const exists = (path: string[]) => {
   void store.docVersion
   if (path.length === 0) return true
   const p = path.join('/')
-  return getDocuments().some(
-    doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === p
-  )
+  const hidden = store.hiddenPaths
+  const inDocs = getDocuments().some(doc => {
+    const full = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+    return full === p && !hidden.has(full)
+  })
+  if (inDocs) return true
+  return store.ghosts.some(g => {
+    const full = g.loc ? `${g.loc}/${g.name}` : g.name
+    return full === p && !hidden.has(full)
+  })
 }
 
 /** Strip file extension intelligently (handles .tar.gz, name.with.dots.pdf, etc.) */

frontend/src/views/ExplorerView.vue

@@ -2,23 +2,18 @@
   <div class="transition-wrapper">
     <Transition
       :name="transitionName"
-      @after-enter="store.transitionDirection = 'none'"
+      @after-enter="onAfterEnter"
     >
-      <div :key="folderPath" class="explorer-content">
-        <Gallery
-          v-if="store.prefs.gallery"
+      <KeepAlive>
+        <component
+          :is="store.prefs.gallery ? Gallery : FileExplorer"
+          :key="cacheKey"
           ref="fileExplorer"
+          class="explorer-content"
           :path="props.path"
           :documents="documents"
         />
-        <FileExplorer
-          v-else
-          ref="fileExplorer"
-          :path="props.path"
-          :documents="documents"
-        />
-        <EmptyFolder :documents="documents" :path="props.path" />
-      </div>
+      </KeepAlive>
     </Transition>
   </div>
   <div v-if="store.searchLoading" class="search-loading">Searching...</div>
@@ -31,7 +26,7 @@ import { getDocuments } from '@/stores/documentStore'
 import { useMainStore } from '@/stores/main'
 import { collator } from '@/utils'
 import { sorted, sortedGrouped } from '@/utils/docsort'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, nextTick, ref, watch, watchEffect } from 'vue'
 
 const store = useMainStore()
 const fileExplorer = ref()
@@ -42,6 +37,9 @@ const props = defineProps<{
 
 // Folder path for component keys - only recreate component when folder changes, not search
 const folderPath = computed(() => props.path.join('/'))
+const cacheKey = computed(
+  () => `${store.prefs.gallery ? 'gallery' : 'list'}:${folderPath.value}`
+)
 
 const transitionName = computed(() => {
   if (store.transitionDirection === 'forward') return 'slide-forward'
@@ -49,6 +47,22 @@ const transitionName = computed(() => {
   return ''
 })
 
+const folderScrollTop = new Map<string, number>()
+const scrollKey = (path: string) => path || '/'
+const getMainScroller = () => document.querySelector('main') as HTMLElement | null
+
+const restoreScroll = (path: string) => {
+  const scroller = getMainScroller()
+  if (!scroller) return
+  const top = folderScrollTop.get(scrollKey(path)) ?? 0
+  scroller.scrollTop = top
+}
+
+const onAfterEnter = () => {
+  store.transitionDirection = 'none'
+  restoreScroll(folderPath.value)
+}
+
 // Handle route-based search changes (back/forward navigation, direct URL)
 // Skip if store.query already matches (means we triggered this via typing)
 watch(
@@ -101,6 +115,19 @@ watchEffect(() => {
   store.fileExplorer = fileExplorer.value
 })
 
+watch(
+  folderPath,
+  async (path, oldPath) => {
+    const scroller = getMainScroller()
+    if (scroller && oldPath !== undefined) {
+      folderScrollTop.set(scrollKey(oldPath), scroller.scrollTop)
+    }
+    await nextTick()
+    requestAnimationFrame(() => restoreScroll(path))
+  },
+  { immediate: true }
+)
+
 // Only auto-switch gallery mode when entering a new folder or on initial file list load
 watch(
   [() => props.path.join('/'), () => store.documentCount],
@@ -114,16 +141,6 @@ watch(
 </script>
 
 <style scoped>
-.empty-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: 2rem;
-  text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
-  color: var(--accent-color);
-}
 .search-loading {
   position: fixed;
   bottom: 1rem;

frontend/src/views/TextEditorView.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script setup lang="ts">
+import { apiFetch } from '@/repositories/Client'
+import { useMainStore } from '@/stores/main'
 import { indentWithTab } from '@codemirror/commands'
 import { LanguageDescription } from '@codemirror/language'
 import { languages } from '@codemirror/language-data'
@@ -16,17 +18,26 @@ import { Compartment, EditorState } from '@codemirror/state'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { EditorView, keymap } from '@codemirror/view'
 import { basicSetup } from 'codemirror'
-import { apiFetch } from '@/repositories/Client'
-import { useMainStore } from '@/stores/main'
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
-import { onBeforeRouteLeave, useRoute } from 'vue-router'
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref
+} from 'vue'
+import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const store = useMainStore()
 
 const MAX_SIZE = 1024 * 1024 // 1 MiB
 
-const filePath = computed(() => decodeURIComponent(route.path.slice(6))) // strip /edit/
+const filePath = computed(() => {
+  const raw = decodeURIComponent(route.path).split('//')[0] ?? ''
+  return raw.replace(/^\//, '').replace(/\/$/, '')
+})
 const filename = computed(() => filePath.value.split('/').pop() || '')
 
 const filesUrl = computed(() => {
@@ -50,21 +61,32 @@ const languageCompartment = new Compartment()
 
 const dirty = computed(() => content.value !== original.value)
 
-onBeforeRouteLeave((_to, _from, next) => {
-  if (!dirty.value) {
-    next()
-    return
-  }
-  const discard = window.confirm('You have unsaved changes. Discard them?')
-  next(discard)
-})
-
 const beforeUnload = (event: BeforeUnloadEvent) => {
   if (!dirty.value) return
   event.preventDefault()
   event.returnValue = ''
 }
 
+let beforeUnloadActive = false
+
+const activateEditorBindings = () => {
+  store.editorSave = save
+  if (!beforeUnloadActive) {
+    window.addEventListener('beforeunload', beforeUnload)
+    beforeUnloadActive = true
+  }
+}
+
+const deactivateEditorBindings = () => {
+  if (store.editorSave === save) {
+    store.editorSave = null
+  }
+  if (beforeUnloadActive) {
+    window.removeEventListener('beforeunload', beforeUnload)
+    beforeUnloadActive = false
+  }
+}
+
 const detectLanguage = async () => {
   const language = LanguageDescription.matchFilename(languages, filename.value)
   if (!language) return []
@@ -129,8 +151,7 @@ const save = async () => {
 }
 
 onMounted(async () => {
-  store.editorSave = save
-  window.addEventListener('beforeunload', beforeUnload)
+  activateEditorBindings()
   loading.value = true
   error.value = ''
   try {
@@ -152,19 +173,23 @@ onMounted(async () => {
     await initEditor(text)
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to load file'
-  }
-  finally {
+  } finally {
     if (loading.value) loading.value = false
   }
 })
 
+onActivated(() => {
+  activateEditorBindings()
+})
+
+onDeactivated(() => {
+  deactivateEditorBindings()
+})
+
 onUnmounted(() => {
-  if (store.editorSave === save) {
-    store.editorSave = null
-  }
+  deactivateEditorBindings()
   editorView?.destroy()
   editorView = null
-  window.removeEventListener('beforeunload', beforeUnload)
 })
 </script>