feat: select item on file list after navigating back (#5329)

frontend/src/components/prompts/Copy.vue

@@ -62,6 +62,7 @@ import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import * as upload from "@/utils/upload";
+import { removePrefix } from "@/api/utils";
 
 export default {
   name: "copy",
@@ -76,7 +77,7 @@ export default {
   computed: {
     ...mapState(useFileStore, ["req", "selected"]),
     ...mapState(useAuthStore, ["user"]),
-    ...mapWritableState(useFileStore, ["reload"]),
+    ...mapWritableState(useFileStore, ["reload", "preselect"]),
   },
   methods: {
     ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
@@ -100,6 +101,7 @@ export default {
           .copy(items, overwrite, rename)
           .then(() => {
             buttons.success("copy");
+            this.preselect = removePrefix(items[0].to);
 
             if (this.$route.path === this.dest) {
               this.reload = true;

frontend/src/components/prompts/Delete.vue

@@ -48,16 +48,15 @@ export default {
       "selectedCount",
       "req",
       "selected",
-      "currentPrompt",
     ]),
-    ...mapWritableState(useFileStore, ["reload"]),
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+    ...mapWritableState(useFileStore, ["reload", "preselect"]),
   },
   methods: {
     ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: async function () {
       buttons.loading("delete");
 
-      window.sessionStorage.setItem("modified", "true");
       try {
         if (!this.isListing) {
           await api.remove(this.$route.path);
@@ -81,6 +80,12 @@ export default {
 
         await Promise.all(promises);
         buttons.success("delete");
+
+        const nearbyItem =
+          this.req.items[Math.max(0, Math.min(this.selected) - 1)];
+
+        this.preselect = nearbyItem?.path;
+
         this.reload = true;
       } catch (e) {
         buttons.done("delete");

frontend/src/components/prompts/DiscardEditorChanges.vue

@@ -17,7 +17,7 @@
       </button>
       <button
         id="focus-prompt"
-        @click="submit"
+        @click="currentPrompt.confirm"
         class="button button--flat button--red"
         :aria-label="$t('buttons.discardChanges')"
         :title="$t('buttons.discardChanges')"
@@ -30,22 +30,16 @@
 </template>
 
 <script>
-import { mapActions } from "pinia";
+import { mapState, mapActions } from "pinia";
-import url from "@/utils/url";
 import { useLayoutStore } from "@/stores/layout";
-import { useFileStore } from "@/stores/file";
 
 export default {
   name: "discardEditorChanges",
+  computed: {
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+  },
   methods: {
     ...mapActions(useLayoutStore, ["closeHovers"]),
-    ...mapActions(useFileStore, ["updateRequest"]),
-    submit: async function () {
-      this.updateRequest(null);
-
-      const uri = url.removeLastDir(this.$route.path) + "/";
-      this.$router.push({ path: uri });
-    },
   },
 };
 </script>

frontend/src/components/prompts/Move.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 import { useAuthStore } from "@/stores/auth";
@@ -63,6 +63,7 @@ import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import * as upload from "@/utils/upload";
+import { removePrefix } from "@/api/utils";
 
 export default {
   name: "move",
@@ -77,6 +78,7 @@ export default {
   computed: {
     ...mapState(useFileStore, ["req", "selected"]),
     ...mapState(useAuthStore, ["user"]),
+    ...mapWritableState(useFileStore, ["preselect"]),
     excludedFolders() {
       return this.selected
         .filter((idx) => this.req.items[idx].isDir)
@@ -104,6 +106,7 @@ export default {
           .move(items, overwrite, rename)
           .then(() => {
             buttons.success("move");
+            this.preselect = removePrefix(items[0].to);
             this.$router.push({ path: this.dest });
           })
           .catch((e) => {

frontend/src/components/prompts/Rename.vue

@@ -46,6 +46,7 @@ import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 import url from "@/utils/url";
 import { files as api } from "@/api";
+import { removePrefix } from "@/api/utils";
 
 export default {
   name: "rename",
@@ -65,7 +66,7 @@ export default {
       "selectedCount",
       "isListing",
     ]),
-    ...mapWritableState(useFileStore, ["reload"]),
+    ...mapWritableState(useFileStore, ["reload", "preselect"]),
   },
   methods: {
     ...mapActions(useLayoutStore, ["closeHovers"]),
@@ -97,7 +98,6 @@ export default {
       newLink =
         url.removeLastDir(oldLink) + "/" + encodeURIComponent(this.name);
 
-      window.sessionStorage.setItem("modified", "true");
       try {
         await api.move([{ from: oldLink, to: newLink }]);
         if (!this.isListing) {
@@ -105,6 +105,8 @@ export default {
           return;
         }
 
+        this.preselect = removePrefix(newLink);
+
         this.reload = true;
       } catch (e) {
         this.$showError(e);

frontend/src/css/base.css

@@ -96,6 +96,9 @@ main {
   height: 3em;
   background: var(--background);
   border-bottom: 1px solid var(--divider);
+  position: sticky;
+  z-index: 1000;
+  top: 4em;
 }
 
 .breadcrumbs span,

frontend/src/css/styles.css

@@ -329,6 +329,7 @@ main .spinner .bounce2 {
 #editor-container {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   background-color: var(--background);
   position: fixed;
   padding-top: 4em;
@@ -351,6 +352,8 @@ main .spinner .bounce2 {
 #editor-container .breadcrumbs {
   height: 2.3em;
   padding: 0 1em;
+  position: relative;
+  top: 0;
 }
 
 /*** RTL - flip and position arrow of path ***/

frontend/src/stores/file.ts

@@ -9,6 +9,7 @@ export const useFileStore = defineStore("file", {
     selected: number[];
     multiple: boolean;
     isFiles: boolean;
+    preselect: string | null;
   } => ({
     req: null,
     oldReq: null,
@@ -16,6 +17,7 @@ export const useFileStore = defineStore("file", {
     selected: [],
     multiple: false,
     isFiles: false,
+    preselect: null,
   }),
   getters: {
     selectedCount: (state) => state.selected.length,

frontend/src/views/Files.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <header-bar
-      v-if="error || fileStore.req?.type === null"
+      v-if="error || fileStore.req?.type === undefined"
       showMenu
       showLogo
     />
@@ -9,7 +9,7 @@
     <breadcrumbs base="/files" />
     <errors v-if="error" :errorCode="error.status" />
     <component v-else-if="currentView" :is="currentView"></component>
-    <div v-else-if="currentView !== null">
+    <div v-else>
       <h2 class="message delayed">
         <div class="spinner">
           <div class="bounce1"></div>
@@ -102,15 +102,7 @@ onUnmounted(() => {
   fetchDataController.abort();
 });
 
-watch(route, (to, from) => {
+watch(route, () => {
-  if (from.path.endsWith("/")) {
-    window.sessionStorage.setItem(
-      "listFrozen",
-      (!to.path.endsWith("/")).toString()
-    );
-  } else if (to.path.endsWith("/")) {
-    fileStore.updateRequest(null);
-  }
   fetchData();
 });
 watch(reload, (newValue) => {
@@ -122,6 +114,32 @@ watch(uploadError, (newValue) => {
 
 // Define functions
 
+const applyPreSelection = () => {
+  const preselect = fileStore.preselect;
+  fileStore.preselect = null;
+
+  if (!fileStore.req?.isDir || fileStore.oldReq === null) return;
+
+  let index = -1;
+  if (preselect) {
+    // Find item with the specified path
+    index = fileStore.req.items.findIndex((item) => item.path === preselect);
+  } else if (fileStore.oldReq.path.startsWith(fileStore.req.path)) {
+    // Get immediate child folder of the previous path
+    const name = fileStore.oldReq.path
+      .substring(fileStore.req.path.length)
+      .split("/")
+      .shift();
+
+    index = fileStore.req.items.findIndex(
+      (val) => val.path == fileStore.req!.path + name
+    );
+  }
+
+  if (index === -1) return;
+  fileStore.selected.push(index);
+};
+
 const fetchData = async () => {
   // Reset view information.
   fileStore.reload = false;
@@ -130,12 +148,7 @@ const fetchData = async () => {
   layoutStore.closeHovers();
 
   // Set loading to true and reset the error.
-  if (
+  layoutStore.loading = true;
-    window.sessionStorage.getItem("listFrozen") !== "true" &&
-    window.sessionStorage.getItem("modified") !== "true"
-  ) {
-    layoutStore.loading = true;
-  }
   error.value = null;
 
   let url = route.path;
@@ -149,6 +162,9 @@ const fetchData = async () => {
     fileStore.updateRequest(res);
     document.title = `${res.name || t("sidebar.myFiles")} - ${t("files.files")} - ${name}`;
     layoutStore.loading = false;
+
+    // Selects the post-reload target item or the previously visited child folder
+    applyPreSelection();
   } catch (err) {
     if (err instanceof StatusError && err.is_canceled) {
       return;

frontend/src/views/files/Editor.vue

@@ -32,17 +32,25 @@
       />
     </header-bar>
 
-    <Breadcrumbs base="/files" noLink />
-
     <!-- preview container -->
-    <div
+    <div class="loading delayed" v-if="layoutStore.loading">
-      v-show="isPreview && isMarkdownFile"
+      <div class="spinner">
-      id="preview-container"
+        <div class="bounce1"></div>
-      class="md_preview"
+        <div class="bounce2"></div>
-      v-html="previewContent"
+        <div class="bounce3"></div>
-    ></div>
+      </div>
+    </div>
+    <template v-else>
+      <Breadcrumbs base="/files" noLink />
 
-    <form v-show="!isPreview || !isMarkdownFile" id="editor"></form>
+      <div
+        v-show="isPreview && isMarkdownFile"
+        id="preview-container"
+        class="md_preview"
+        v-html="previewContent"
+      ></div>
+      <form v-show="!isPreview || !isMarkdownFile" id="editor"></form>
+    </template>
   </div>
 </template>
 
@@ -146,12 +154,19 @@ onBeforeUnmount(() => {
 });
 
 onBeforeRouteUpdate((to, from, next) => {
-  if (!editor.value?.session.getUndoManager().isClean()) {
+  if (editor.value?.session.getUndoManager().isClean()) {
-    layoutStore.showHover("discardEditorChanges");
-    next(false);
-  } else {
     next();
+
+    return;
   }
+
+  layoutStore.showHover({
+    prompt: "discardEditorChanges",
+    confirm: (event: Event) => {
+      event.preventDefault();
+      next();
+    },
+  });
 });
 
 const keyEvent = (event: KeyboardEvent) => {
@@ -216,13 +231,6 @@ const decreaseFontSize = () => {
 };
 
 const close = () => {
-  if (!editor.value?.session.getUndoManager().isClean()) {
-    layoutStore.showHover("discardEditorChanges");
-    return;
-  }
-
-  fileStore.updateRequest(null);
-
   const uri = url.removeLastDir(route.path) + "/";
   router.push({ path: uri });
 };

frontend/src/views/files/FileListing.vue

@@ -303,6 +303,7 @@ import {
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { storeToRefs } from "pinia";
+import { removePrefix } from "@/api/utils";
 
 const showLimit = ref<number>(50);
 const columnWidth = ref<number>(280);
@@ -420,25 +421,19 @@ const isMobile = computed(() => {
 
 watch(req, () => {
   // Reset the show value
-  if (
+  showLimit.value = 50;
-    window.sessionStorage.getItem("listFrozen") !== "true" &&
-    window.sessionStorage.getItem("modified") !== "true"
-  ) {
-    showLimit.value = 50;
 
-    nextTick(() => {
+  nextTick(() => {
-      // Ensures that the listing is displayed
+    // Ensures that the listing is displayed
-      // How much every listing item affects the window height
+    // How much every listing item affects the window height
-      setItemWeight();
+    setItemWeight();
 
+    // Scroll to the item opened previously
+    if (!revealPreviousItem()) {
       // Fill and fit the window with listing items
       fillWindow(true);
-    });
+    }
-  }
+  });
-  if (req.value?.isDir) {
-    window.sessionStorage.setItem("listFrozen", "false");
-    window.sessionStorage.setItem("modified", "false");
-  }
 });
 
 onMounted(() => {
@@ -448,8 +443,11 @@ onMounted(() => {
   // How much every listing item affects the window height
   setItemWeight();
 
-  // Fill and fit the window with listing items
+  // Scroll to the item opened previously
-  fillWindow(true);
+  if (!revealPreviousItem()) {
+    // Fill and fit the window with listing items
+    fillWindow(true);
+  }
 
   // Add the needed event listeners to the window and document.
   window.addEventListener("keydown", keyEvent);
@@ -589,10 +587,13 @@ const paste = (event: Event) => {
     return;
   }
 
+  const preselect = removePrefix(route.path) + items[0].name;
+
   let action = (overwrite: boolean, rename: boolean) => {
     api
       .copy(items, overwrite, rename)
       .then(() => {
+        fileStore.preselect = preselect;
         fileStore.reload = true;
       })
       .catch($showError);
@@ -604,6 +605,7 @@ const paste = (event: Event) => {
         .move(items, overwrite, rename)
         .then(() => {
           clipboardStore.resetClipboard();
+          fileStore.preselect = preselect;
           fileStore.reload = true;
         })
         .catch($showError);
@@ -731,6 +733,8 @@ const drop = async (event: DragEvent) => {
 
   const conflict = upload.checkConflict(files, items);
 
+  const preselect = removePrefix(path) + (files[0].fullPath || files[0].name);
+
   if (conflict) {
     layoutStore.showHover({
       prompt: "replace",
@@ -738,11 +742,13 @@ const drop = async (event: DragEvent) => {
         event.preventDefault();
         layoutStore.closeHovers();
         upload.handleFiles(files, path, false);
+        fileStore.preselect = preselect;
       },
       confirm: (event: Event) => {
         event.preventDefault();
         layoutStore.closeHovers();
         upload.handleFiles(files, path, true);
+        fileStore.preselect = preselect;
       },
     });
 
@@ -750,6 +756,7 @@ const drop = async (event: DragEvent) => {
   }
 
   upload.handleFiles(files, path);
+  fileStore.preselect = preselect;
 };
 
 const uploadInput = (event: Event) => {
@@ -953,4 +960,21 @@ const fillWindow = (fit = false) => {
   // Set the number of displayed items
   showLimit.value = showQuantity > totalItems ? totalItems : showQuantity;
 };
+
+const revealPreviousItem = () => {
+  if (!fileStore.req || !fileStore.oldReq) return;
+
+  const index = fileStore.selected[0];
+  if (index === undefined) return;
+
+  showLimit.value =
+    index + Math.ceil((window.innerHeight * 2) / itemWeight.value);
+
+  nextTick(() => {
+    const items = document.querySelectorAll("#listing .item");
+    items[index].scrollIntoView({ block: "center" });
+  });
+
+  return true;
+};
 </script>

frontend/src/views/files/Preview.vue

@@ -301,10 +301,8 @@ watch(route, () => {
 // Specify hooks
 onMounted(async () => {
   window.addEventListener("keydown", key);
-  if (fileStore.oldReq) {
+  listing.value = fileStore.oldReq?.items ?? null;
-    listing.value = fileStore.oldReq.items;
+  updatePreview();
-    updatePreview();
-  }
 });
 
 onBeforeUnmount(() => window.removeEventListener("keydown", key));
@@ -317,11 +315,16 @@ const deleteFile = () => {
       if (listing.value === null) {
         return;
       }
-      listing.value = listing.value.filter((item) => item.name !== name.value);
+
+      const index = listing.value.findIndex((item) => item.name == name.value);
+      listing.value.splice(index, 1);
 
       if (hasNext.value) {
         next();
       } else if (!hasPrevious.value && !hasNext.value) {
+        const nearbyItem = listing.value[Math.max(0, index - 1)];
+        fileStore.preselect = nearbyItem?.path;
+
         close();
       } else {
         prev();
@@ -427,8 +430,6 @@ const toggleNavigation = throttle(function () {
 }, 500);
 
 const close = () => {
-  fileStore.updateRequest(null);
-
   const uri = url.removeLastDir(route.path) + "/";
   router.push({ path: uri });
 };

frontend/tsconfig.tsc.json

@@ -5,6 +5,7 @@
   "exclude": [
     "src/components/Shell.vue",
     "src/components/prompts/Copy.vue",
+    "src/components/prompts/Move.vue",
     "src/components/prompts/Delete.vue",
     "src/components/prompts/FileList.vue",
     "src/components/prompts/Rename.vue",