From 5a588d13f04e565d726f9ea8acf9f355e3474e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 18 Nov 2023 17:30:30 +0100
Subject: [PATCH 1/8] feat: Add PathNavigation reusable component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/ui/PathNavigation.vue | 84 ++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/components/ui/PathNavigation.vue

diff --git a/src/components/ui/PathNavigation.vue b/src/components/ui/PathNavigation.vue
new file mode 100644
index 000000000..eeb43b4b2
--- /dev/null
+++ b/src/components/ui/PathNavigation.vue
@@ -0,0 +1,84 @@
+<template>
+    <span>
+        <span v-for="({ directoryName, location }, index) in pathSegments" :key="location" class="navigation-container">
+            <template v-if="index !== 0">
+                <span class="navigation-divider text--disabled">{{ segmentSeparator }}</span>
+            </template>
+            <span
+                class="cursor-pointer navigation-segment"
+                tabindex="0"
+                role="button"
+                @click="onSegmentClick({ location })"
+                @keyup.enter="onSegmentClick({ location })">
+                <template v-if="directoryName">{{ directoryName }}</template>
+                <template v-else>
+                    <slot name="rootElement">
+                        <v-icon small>
+                            {{ mdiHome }}
+                        </v-icon>
+                    </slot>
+                </template>
+            </span>
+        </span>
+    </span>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiHome } from '@mdi/js'
+
+interface pathSegment {
+    directoryName: string
+    location: string
+}
+
+@Component
+export default class PathNavigation extends Mixins(BaseMixin) {
+    @Prop({ default: false }) declare readonly path: string
+    @Prop({ default: false }) declare readonly onSegmentClick: (segment: { location: string }) => void
+
+    private readonly segmentSeparator = '/'
+
+    mdiHome = mdiHome
+
+    get pathSegments(): pathSegment[] {
+        const [firstSegment, ...restOfSegments] = (this.path || '').split(this.segmentSeparator)
+
+        const firstPathSegment = {
+            directoryName: firstSegment,
+            location: firstSegment,
+        }
+
+        return restOfSegments.reduce(
+            (allSegments: pathSegment[], currentSegment: string) => {
+                const previousSegmentLocation = allSegments[allSegments.length - 1].location
+                const location = `${previousSegmentLocation}${this.segmentSeparator}${currentSegment}`
+
+                const newPathSegment = {
+                    directoryName: currentSegment,
+                    location,
+                }
+
+                allSegments.push(newPathSegment)
+
+                return allSegments
+            },
+            [firstPathSegment]
+        )
+    }
+}
+</script>
+
+<style scoped>
+.navigation-divider {
+    padding: 0 2px;
+}
+.navigation-segment:hover {
+    text-decoration: underline;
+}
+.navigation-container:last-child {
+    font-weight: bold;
+}
+</style>

From b2f89cd19734ed3fbdd0fe732e5238dcd14c2ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 18 Nov 2023 17:32:35 +0100
Subject: [PATCH 2/8] feat: Use new PathNavigation in GCodes & Config explorers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue          | 13 ++++++++++---
 src/components/panels/Machine/ConfigFilesPanel.vue | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index fc7354386..93f3c81b9 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -145,8 +145,10 @@
                 <v-row>
                     <v-col class="col-12 py-2 d-flex align-center">
                         <span>
-                            <b>{{ $t('Files.CurrentPath') }}:</b>
-                            {{ currentPath || '/' }}
+                            <b class="mr-1">{{ $t('Files.CurrentPath') }}:</b>
+                            <path-navigation :path="currentPath" :on-segment-click="clickPathNavGoToDirectory">
+                                <template #rootElement>{{ '/gcodes' }}</template>
+                            </path-navigation>
                         </span>
                         <v-spacer></v-spacer>
                         <template v-if="disk_usage !== null">
@@ -652,6 +654,7 @@ import {
 } from '@mdi/js'
 import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
 import ControlMixin from '@/components/mixins/control'
+import PathNavigation from '@/components/ui/PathNavigation.vue'
 
 interface contextMenu {
     shown: boolean
@@ -694,7 +697,7 @@ interface tableColumnSetting {
 }
 
 @Component({
-    components: { StartPrintDialog, Panel, SettingsRow, draggable },
+    components: { StartPrintDialog, Panel, SettingsRow, PathNavigation, draggable },
 })
 export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
     mdiChevronDown = mdiChevronDown
@@ -1255,6 +1258,10 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
+    clickPathNavGoToDirectory(segment: { location: string }) {
+        this.currentPath = segment.location
+    }
+
     async addToQueue(item: FileStateGcodefile) {
         let filename = [this.currentPath, item.filename].join('/')
         if (filename.startsWith('/')) filename = filename.slice(1)
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index 135716360..21ac87c10 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -65,8 +65,10 @@
                 <v-row>
                     <v-col class="col-12 py-2 d-flex align-center">
                         <span>
-                            <b>{{ $t('Machine.ConfigFilesPanel.CurrentPath') }}:</b>
-                            {{ absolutePath }}
+                            <b class="mr-1">{{ $t('Machine.ConfigFilesPanel.CurrentPath') }}:</b>
+                            <path-navigation :path="currentPath" :on-segment-click="clickPathNavGoToDirectory">
+                                <template #rootElement>{{ '/' + root }}</template>
+                            </path-navigation>
                         </span>
                         <v-spacer></v-spacer>
                         <template v-if="disk_usage !== null && !showMissingConfigRootWarning">
@@ -537,6 +539,7 @@ import { formatFilesize, sortFiles } from '@/plugins/helpers'
 import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import axios from 'axios'
 import Panel from '@/components/ui/Panel.vue'
+import PathNavigation from '@/components/ui/PathNavigation.vue'
 import { hiddenRootDirectories } from '@/store/variables'
 import {
     mdiFilePlus,
@@ -607,7 +610,7 @@ interface draggingFile {
 }
 
 @Component({
-    components: { Panel },
+    components: { Panel, PathNavigation },
 })
 export default class ConfigFilesPanel extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
@@ -1009,6 +1012,10 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
         this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
+    clickPathNavGoToDirectory(segment: { location: string }) {
+        this.currentPath = segment.location
+    }
+
     showContextMenu(e: any, item: FileStateFile) {
         if (!this.contextMenu.shown) {
             e?.preventDefault()

From f04146f751654defb43cd6a7f4ddcfc5445e13dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Mon, 27 Nov 2023 21:27:23 +0100
Subject: [PATCH 3/8] feat: Simplify PathNavigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue          |  7 ++++---
 src/components/panels/Machine/ConfigFilesPanel.vue |  7 ++++---
 src/components/ui/PathNavigation.vue               | 12 ++----------
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 93f3c81b9..bd903e684 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -146,9 +146,10 @@
                     <v-col class="col-12 py-2 d-flex align-center">
                         <span>
                             <b class="mr-1">{{ $t('Files.CurrentPath') }}:</b>
-                            <path-navigation :path="currentPath" :on-segment-click="clickPathNavGoToDirectory">
-                                <template #rootElement>{{ '/gcodes' }}</template>
-                            </path-navigation>
+                            <path-navigation
+                                :path="currentPath"
+                                :base-directory-label="'/gcodes'"
+                                :on-segment-click="clickPathNavGoToDirectory" />
                         </span>
                         <v-spacer></v-spacer>
                         <template v-if="disk_usage !== null">
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index 21ac87c10..8d2d081e7 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -66,9 +66,10 @@
                     <v-col class="col-12 py-2 d-flex align-center">
                         <span>
                             <b class="mr-1">{{ $t('Machine.ConfigFilesPanel.CurrentPath') }}:</b>
-                            <path-navigation :path="currentPath" :on-segment-click="clickPathNavGoToDirectory">
-                                <template #rootElement>{{ '/' + root }}</template>
-                            </path-navigation>
+                            <path-navigation
+                                :path="currentPath"
+                                :base-directory-label="`/${root}`"
+                                :on-segment-click="clickPathNavGoToDirectory" />
                         </span>
                         <v-spacer></v-spacer>
                         <template v-if="disk_usage !== null && !showMissingConfigRootWarning">
diff --git a/src/components/ui/PathNavigation.vue b/src/components/ui/PathNavigation.vue
index eeb43b4b2..3658d3193 100644
--- a/src/components/ui/PathNavigation.vue
+++ b/src/components/ui/PathNavigation.vue
@@ -11,13 +11,7 @@
                 @click="onSegmentClick({ location })"
                 @keyup.enter="onSegmentClick({ location })">
                 <template v-if="directoryName">{{ directoryName }}</template>
-                <template v-else>
-                    <slot name="rootElement">
-                        <v-icon small>
-                            {{ mdiHome }}
-                        </v-icon>
-                    </slot>
-                </template>
+                <template v-else>{{ baseDirectoryLabel }}</template>
             </span>
         </span>
     </span>
@@ -27,7 +21,6 @@
 import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { mdiHome } from '@mdi/js'
 
 interface pathSegment {
     directoryName: string
@@ -37,12 +30,11 @@ interface pathSegment {
 @Component
 export default class PathNavigation extends Mixins(BaseMixin) {
     @Prop({ default: false }) declare readonly path: string
+    @Prop({ default: false }) declare readonly baseDirectoryLabel: string
     @Prop({ default: false }) declare readonly onSegmentClick: (segment: { location: string }) => void
 
     private readonly segmentSeparator = '/'
 
-    mdiHome = mdiHome
-
     get pathSegments(): pathSegment[] {
         const [firstSegment, ...restOfSegments] = (this.path || '').split(this.segmentSeparator)
 

From ca73f6d29f519235559350a1a3440005b500d7ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Mon, 27 Nov 2023 21:39:15 +0100
Subject: [PATCH 4/8] feat: Document PathNavigation params
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/ui/PathNavigation.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/ui/PathNavigation.vue b/src/components/ui/PathNavigation.vue
index 3658d3193..b2b8ab62e 100644
--- a/src/components/ui/PathNavigation.vue
+++ b/src/components/ui/PathNavigation.vue
@@ -29,8 +29,23 @@ interface pathSegment {
 
 @Component
 export default class PathNavigation extends Mixins(BaseMixin) {
+    /**
+     * Current path to be displayed in the breadcrumbs.
+     */
     @Prop({ default: false }) declare readonly path: string
+    /**
+     * Display label for the first directory in the path passed in absolute format
+     * (a path starting with `/` character). Useful for local paths, where
+     * the navigator deals with routes in some context (eg. all paths in the `/gcodes` directory).
+     */
     @Prop({ default: false }) declare readonly baseDirectoryLabel: string
+    /**
+     * Event handler triggered on breadcrumb segment interaction.
+     *
+     * @param segment.location Full location of the selected path segment,
+     * eg. for path `/foo/bar/baz`, when `bar` has been selected, `location` is equal to
+     * `/foo/bar`.
+     */
     @Prop({ default: false }) declare readonly onSegmentClick: (segment: { location: string }) => void
 
     private readonly segmentSeparator = '/'

From 855de07b57acdc264d1d0f5b1e4befbb18b759ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Thu, 30 Nov 2023 00:22:03 +0100
Subject: [PATCH 5/8] feat: Make last path segment non-interactive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/ui/PathNavigation.vue | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/PathNavigation.vue b/src/components/ui/PathNavigation.vue
index b2b8ab62e..b660ce402 100644
--- a/src/components/ui/PathNavigation.vue
+++ b/src/components/ui/PathNavigation.vue
@@ -4,15 +4,23 @@
             <template v-if="index !== 0">
                 <span class="navigation-divider text--disabled">{{ segmentSeparator }}</span>
             </template>
-            <span
-                class="cursor-pointer navigation-segment"
-                tabindex="0"
-                role="button"
-                @click="onSegmentClick({ location })"
-                @keyup.enter="onSegmentClick({ location })">
-                <template v-if="directoryName">{{ directoryName }}</template>
-                <template v-else>{{ baseDirectoryLabel }}</template>
-            </span>
+            <template v-if="index !== pathSegments.length - 1">
+                <span
+                    class="cursor-pointer navigation-segment"
+                    tabindex="0"
+                    role="button"
+                    @click="onSegmentClick({ location })"
+                    @keyup.enter="onSegmentClick({ location })">
+                    <template v-if="directoryName">{{ directoryName }}</template>
+                    <template v-else>{{ baseDirectoryLabel }}</template>
+                </span>
+            </template>
+            <template v-else>
+                <span>
+                    <template v-if="directoryName">{{ directoryName }}</template>
+                    <template v-else>{{ baseDirectoryLabel }}</template>
+                </span>
+            </template>
         </span>
     </span>
 </template>

From df9bf0356a61cac4113235b4aaa766641ca060df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Thu, 30 Nov 2023 00:34:48 +0100
Subject: [PATCH 6/8] feat: Introduce PathNavigation in Timelapse
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue  | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 06456d7f5..cc196d751 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -55,8 +55,11 @@
                 <v-row>
                     <v-col class="col-12 py-2 d-flex align-center">
                         <span>
-                            <b>{{ $t('Timelapse.CurrentPath') }}:</b>
-                            {{ currentPath !== 'timelapse' ? '/' + currentPath.substring(10) : '/' }}
+                            <b class="mr-1">{{ $t('Timelapse.CurrentPath') }}:</b>
+                            <path-navigation
+                                :path="currentPathForNavigation"
+                                :base-directory-label="`/${rootDirectory}`"
+                                :on-segment-click="clickPathNavGoToDirectory" />
                         </span>
                         <v-spacer></v-spacer>
                         <template v-if="disk_usage !== null">
@@ -423,6 +426,7 @@ import BaseMixin from '@/components/mixins/base'
 import { formatFilesize, sortFiles } from '@/plugins/helpers'
 import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import Panel from '@/components/ui/Panel.vue'
+import PathNavigation from '@/components/ui/PathNavigation.vue'
 import {
     mdiFolderPlus,
     mdiCloseThick,
@@ -446,7 +450,7 @@ interface dialogRenameObject {
 }
 
 @Component({
-    components: { Panel },
+    components: { Panel, PathNavigation },
 })
 export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
     formatFilesize = formatFilesize
@@ -537,6 +541,8 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         (value: string) => !this.existsFilename(value) || this.$t('Files.InvalidNameAlreadyExists'),
     ]
 
+    private rootDirectory = 'timelapse'
+
     existsFilename(name: string) {
         return this.files.findIndex((file) => file.filename === name) >= 0
     }
@@ -614,6 +620,14 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         return this.$store.state.gui.view.timelapse.currentPath
     }
 
+    get currentPathForNavigation() {
+        if (this.currentPath === this.rootDirectory) {
+            return '';
+        }
+
+        return this.currentPath.substring(this.rootDirectory.length);
+    }
+
     set currentPath(newVal) {
         this.$store.dispatch('gui/saveSettingWithoutUpload', { name: 'view.timelapse.currentPath', value: newVal })
     }
@@ -690,6 +704,10 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
+    clickPathNavGoToDirectory(segment: { location: string }) {
+        this.currentPath = `${this.rootDirectory}${segment.location}`;
+    }
+
     showContextMenu(e: any, item: FileStateFile) {
         if (!this.contextMenu.shown) {
             e?.preventDefault()

From 2986c76be31c4ba6c75bb38d56f032527ab35c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Thu, 30 Nov 2023 00:36:02 +0100
Subject: [PATCH 7/8] feat: Reuse rootDirectory constant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/Timelapse/TimelapseFilesPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index cc196d751..8caa566be 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -110,7 +110,7 @@
                     <div class="text-center font-italic">{{ $t('Timelapse.Empty') }}</div>
                 </template>
 
-                <template v-if="currentPath !== 'timelapse'" slot="body.prepend">
+                <template v-if="currentPath !== rootDirectory" slot="body.prepend">
                     <tr class="file-list-cursor" @click="clickRowGoBack">
                         <td class="pr-0 text-center" style="width: 32px">
                             <v-icon>{{ mdiFolderUpload }}</v-icon>

From 30b0c9a75bc08f8e7f9323d656c21573599476fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Thu, 30 Nov 2023 00:40:22 +0100
Subject: [PATCH 8/8] feat: Formatting fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/Timelapse/TimelapseFilesPanel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 8caa566be..51960df24 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -622,10 +622,10 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     get currentPathForNavigation() {
         if (this.currentPath === this.rootDirectory) {
-            return '';
+            return ''
         }
 
-        return this.currentPath.substring(this.rootDirectory.length);
+        return this.currentPath.substring(this.rootDirectory.length)
     }
 
     set currentPath(newVal) {
@@ -705,7 +705,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
     }
 
     clickPathNavGoToDirectory(segment: { location: string }) {
-        this.currentPath = `${this.rootDirectory}${segment.location}`;
+        this.currentPath = `${this.rootDirectory}${segment.location}`
     }
 
     showContextMenu(e: any, item: FileStateFile) {