From c42e57494a9bdbaac9b693607ff4afc8cf6d2ea3 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Mon, 11 May 2026 17:41:39 +0200
Subject: [PATCH] Behebt Breadcrumb-Navigation im Dateimanager
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue 170: Die Dateimanager-Breadcrumbs nutzen jetzt die Nuxt-UI-Items-API, zeigen den aktuellen Ordnerpfad an und erlauben die Navigation zu übergeordneten Ordnern über die Route.
---
 frontend/pages/files/index.vue | 80 ++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 24 deletions(-)

diff --git a/frontend/pages/files/index.vue b/frontend/pages/files/index.vue
index 5c1c7e1..396366a 100644
--- a/frontend/pages/files/index.vue
+++ b/frontend/pages/files/index.vue
@@ -71,11 +71,7 @@ const setupPage = async () => {
     documents.value = dRes || []
     filetags.value = tRes || []
 
-    if (route.query?.folder) {
-      currentFolder.value = folders.value.find(i => i.id === route.query.folder) || null
-    } else {
-      currentFolder.value = null
-    }
+    syncCurrentFolderFromRoute()
   } finally {
     loadingDocs.value = false
     loaded.value = true
@@ -140,9 +136,24 @@ onUnmounted(() => {
 
 
 // --- Navigation ---
+const getRouteFolderId = () => {
+  const folder = route.query?.folder
+  return Array.isArray(folder) ? folder[0] : folder
+}
+
+const syncCurrentFolderFromRoute = () => {
+  const folderId = getRouteFolderId()
+  currentFolder.value = folderId ? folders.value.find(i => i.id === folderId) || null : null
+  selectedFileIndex.value = 0
+}
+
 const changeFolder = async (folder) => {
-  currentFolder.value = folder
-  await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
+  currentFolder.value = folder || null
+  selectedFileIndex.value = 0
+  await router.push({
+    path: '/files',
+    query: folder ? { folder: folder.id } : {}
+  })
 }
 
 const navigateUp = () => {
@@ -151,6 +162,10 @@ const navigateUp = () => {
   changeFolder(parent || null)
 }
 
+watch(() => route.query?.folder, () => {
+  syncCurrentFolderFromRoute()
+})
+
 // --- Drag & Drop (Internal Sort) ---
 const handleDragStart = (entry) => {
   draggedItem.value = entry
@@ -178,23 +193,40 @@ const handleDrop = async (targetFolderId) => {
 }
 
 // --- Breadcrumbs ---
-const breadcrumbLinks = computed(() => {
-  const links = [{label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null)}]
-  if (currentFolder.value) {
-    const path = []
-    let curr = currentFolder.value
-    while (curr) {
-      const folderObj = curr
-      path.unshift({
-        label: folderObj.name,
-        icon: "i-heroicons-folder",
-        click: () => changeFolder(folderObj)
-      })
-      curr = folders.value.find(f => f.id === curr.parent)
-    }
-    return [...links, ...path]
+const breadcrumbItems = computed(() => {
+  const items = [{
+    label: "Dateien",
+    icon: "i-heroicons-home",
+    to: "/files",
+    exact: true
+  }]
+
+  if (!currentFolder.value) return items
+
+  const path = []
+  const seenFolderIds = new Set()
+  let curr = currentFolder.value
+
+  while (curr && !seenFolderIds.has(curr.id)) {
+    seenFolderIds.add(curr.id)
+    path.unshift(curr)
+    curr = folders.value.find(f => f.id === curr.parent)
   }
-  return links
+
+  return [
+    ...items,
+    ...path.map((folder, index) => ({
+      label: folder.name,
+      icon: "i-heroicons-folder",
+      to: {
+        path: "/files",
+        query: { folder: folder.id }
+      },
+      exact: true,
+      exactQuery: true,
+      disabled: index === path.length - 1
+    }))
+  ]
 })
 
 // --- Data Mapping ---
@@ -366,7 +398,7 @@ const syncdokubox = async () => {
 
   <UDashboardToolbar class="sticky top-0 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
     <template #left>
-      <UBreadcrumb :links="breadcrumbLinks"/>
+      <UBreadcrumb :items="breadcrumbItems"/>
     </template>
     <template #right>
       <USelectMenu v-model="displayMode" :items="displayModes" value-key="key" class="w-32" :content="{ zIndex: 'z-50' }">