feat: Improved path display in the new file and directory modal (#5451)

frontend/src/components/prompts/CreateFilePath.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div class="path-container" ref="container">
+      <template v-for="(item, index) in path" :key="index">
+        /
+        <span class="path-item">
+          <span
+            v-if="isDir === true || index < path.length - 1"
+            class="material-icons"
+            >folder
+          </span>
+          <span v-else class="material-icons">insert_drive_file</span>
+          {{ item }}
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, defineProps } from "vue";
+import { useRoute } from "vue-router";
+import { useFileStore } from "@/stores/file";
+import url from "@/utils/url";
+
+const fileStore = useFileStore();
+const route = useRoute();
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  isDir: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const container = ref<HTMLElement | null>(null);
+
+const path = computed(() => {
+  let basePath = fileStore.isFiles ? route.path : url.removeLastDir(route.path);
+  basePath += props.name;
+
+  return basePath
+    .replace(/^\/[^\/]+/, "")
+    .split("/")
+    .filter(Boolean);
+});
+
+watch(path, () => {
+  nextTick(() => {
+    const lastItem = container.value?.lastElementChild;
+    lastItem?.scrollIntoView({ behavior: "auto", inline: "end" });
+  });
+});
+</script>
+
+<style scoped>
+.path-container {
+  display: flex;
+  align-items: center;
+  margin: 0.2em 0;
+  gap: 0.25em;
+  overflow-x: auto;
+  max-width: 100%;
+  scrollbar-width: none;
+  opacity: 0.5;
+}
+
+.path-container::-webkit-scrollbar {
+  display: none;
+}
+
+.path-item {
+  display: flex;
+  align-items: center;
+  margin: 0.2em 0;
+  gap: 0.25em;
+  white-space: nowrap;
+}
+
+.path-item > span {
+  font-size: 0.9em;
+}
+</style>

frontend/src/components/prompts/NewDir.vue

@@ -14,6 +14,7 @@
         v-model.trim="name"
         tabindex="1"
       />
+      <CreateFilePath :name="name" :is-dir="true" />
     </div>
 
     <div class="card-action">
@@ -48,6 +49,7 @@ import { files as api } from "@/api";
 import url from "@/utils/url";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+import CreateFilePath from "@/components/prompts/CreateFilePath.vue";
 
 const $showError = inject<IToastError>("$showError")!;
 

frontend/src/components/prompts/NewFile.vue

@@ -13,6 +13,7 @@
         @keyup.enter="submit"
         v-model.trim="name"
       />
+      <CreateFilePath :name="name" />
     </div>
 
     <div class="card-action">
@@ -42,6 +43,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
+import CreateFilePath from "@/components/prompts/CreateFilePath.vue";
 
 import { files as api } from "@/api";
 import url from "@/utils/url";