feat: Improved path display in the NewFile.vue component

frontend/src/components/prompts/NewFile.vue

@@ -6,30 +6,29 @@
 
     <div class="card-content">
       <p>{{ t("prompts.newFileMessage") }}</p>
-      <input
+
-        id="focus-prompt"
+      <input id="focus-prompt" class="input input--block" type="text" @keyup.enter="submit" v-model.trim="name" />
-        class="input input--block"
+      <div class="path-container" ref="pathContainer">
-        type="text"
+        <template v-for="(item, index) in path" :key="index">
-        @keyup.enter="submit"
+          /
-        v-model.trim="name"
+          <span class="path-item">
-      />
+            <span v-if="(index == path.length - 1) && item.includes('.')"
+              class="material-icons">insert_drive_file</span>
+            <span v-else class="material-icons">folder</span>
+            {{ item }}
+          </span>
+        </template>
+
+      </div>
     </div>
 
     <div class="card-action">
-      <button
+      <button class="button button--flat button--grey" @click="layoutStore.closeHovers"
-        class="button button--flat button--grey"
+        :aria-label="t('buttons.cancel')" :title="t('buttons.cancel')">
-        @click="layoutStore.closeHovers"
-        :aria-label="t('buttons.cancel')"
-        :title="t('buttons.cancel')"
-      >
         {{ t("buttons.cancel") }}
       </button>
-      <button
+      <button class="button button--flat" @click="submit" :aria-label="t('buttons.create')"
-        class="button button--flat"
+        :title="t('buttons.create')">
-        @click="submit"
-        :aria-label="t('buttons.create')"
-        :title="t('buttons.create')"
-      >
         {{ t("buttons.create") }}
       </button>
     </div>
@@ -37,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from "vue";
+import { inject, ref, computed, watch, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useFileStore } from "@/stores/file";
@@ -51,12 +50,32 @@ const $showError = inject<IToastError>("$showError")!;
 const fileStore = useFileStore();
 const layoutStore = useLayoutStore();
 
+const pathContainer = ref<HTMLElement | null>(null);
+
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 
 const name = ref<string>("");
 
+const path = computed(() => {
+  let basePath = fileStore.isFiles ? route.path : url.removeLastDir(route.path);
+  basePath += name.value;
+
+  return basePath
+    .replace(/^\/[^\/]+/, '')
+    .split('/')
+    .filter(Boolean);
+});
+
+watch(path, () => {
+  nextTick(() => {
+    const lastItem = pathContainer.value?.lastElementChild;
+    lastItem?.scrollIntoView({ behavior: 'auto', inline: 'end' });
+  });
+});
+
+
 const submit = async (event: Event) => {
   event.preventDefault();
   if (name.value === "") return;

frontend/src/css/styles.css

@@ -460,3 +460,30 @@ html[dir="rtl"] .card.floating .card-content .file-list {
   direction: ltr;
   text-align: left;
 }
+
+.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;
+}