frontend: Use pankow breadcrumbs

frontend/src/views/Home.vue

@@ -51,7 +51,7 @@
       <TopBar class="navbar">
         <template #left>
           <Button icon="pi pi-refresh" @click="onRefresh()" text :loading="busyRefresh" style="margin-right: 5px;"/>
-          <PathBreadcrumbs :path="cwd" :activate-handler="onActivateBreadcrumb"/>
+          <Breadcrumb :home="breadcrumbHomeItem" :items="breadcrumbItems" :activate-handler="onActivateBreadcrumb"/>
         </template>
         <template #right>
           <Button type="button" :label="$t('filemanager.toolbar.new')" icon="pi pi-plus" @click="onCreateMenu" aria-haspopup="true" aria-controls="create_menu" style="margin-right: 5px" />
@@ -131,7 +131,7 @@ import ProgressSpinner from 'primevue/progressspinner';
 
 import { useConfirm } from 'primevue/useconfirm';
 
-import { DirectoryView, TopBar, PathBreadcrumbs, BottomBar, MainLayout, FileUploader } from 'pankow';
+import { DirectoryView, TopBar, Breadcrumb, BottomBar, MainLayout, FileUploader } from 'pankow';
 import Icon from 'pankow/components/Icon.vue';
 import { sanitize, sleep } from 'pankow/utils';
 
@@ -159,7 +159,7 @@ export default {
     InputText,
     MainLayout,
     Menu,
-    PathBreadcrumbs,
+    Breadcrumb,
     PreviewPanel,
     ProgressSpinner,
     TopBar,
@@ -192,6 +192,12 @@ export default {
       resourceId: '',
       visible: true,
       uploadRequest: null,
+      breadcrumbHomeItem: {
+        icon: 'fa-solid fa-house',
+        action: () => {
+          this.cwd = '/';
+        }
+      },
       newFileDialog: {
         visible: false,
         busy: false,
@@ -224,6 +230,23 @@ export default {
       }]
     };
   },
+  computed: {
+    breadcrumbItems() {
+      const parts = this.cwd.split('/').filter((p) => !!p.trim())
+      const crumbs = [];
+
+      parts.forEach((p, i) => {
+        crumbs.push({
+          label: p,
+          action: () => {
+            this.cwd = '/' + parts.slice(0, i+1).join('/');
+          }
+        });
+      });
+
+      return crumbs;
+    }
+  },
   watch: {
     cwd(newCwd, oldCwd) {
       if (this.resourceType && this.resourceId) this.$router.push(`/home/${this.resourceType}/${this.resourceId}${this.cwd}`);