Behebt Breadcrumb-Navigation im Dateimanager

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

@@ -71,11 +71,7 @@ const setupPage = async () => {
     documents.value = dRes || []
     filetags.value = tRes || []
 
-    if (route.query?.folder) {
+    syncCurrentFolderFromRoute()
-      currentFolder.value = folders.value.find(i => i.id === route.query.folder) || null
-    } else {
-      currentFolder.value = null
-    }
   } 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
+  currentFolder.value = folder || null
-  await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
+  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 breadcrumbItems = computed(() => {
-  const links = [{label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null)}]
+  const items = [{
-  if (currentFolder.value) {
+    label: "Dateien",
-    const path = []
+    icon: "i-heroicons-home",
-    let curr = currentFolder.value
+    to: "/files",
-    while (curr) {
+    exact: true
-      const folderObj = curr
+  }]
-      path.unshift({
+
-        label: folderObj.name,
+  if (!currentFolder.value) return items
-        icon: "i-heroicons-folder",
+
-        click: () => changeFolder(folderObj)
+  const path = []
-      })
+  const seenFolderIds = new Set()
-      curr = folders.value.find(f => f.id === curr.parent)
+  let curr = currentFolder.value
-    }
+
-    return [...links, ...path]
+  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' }">