#84

frontend/components/wiki/TreeItem.vue

@@ -31,7 +31,6 @@
       </div>
 
       <div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 w-40 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-700 py-1 text-xs text-gray-700 dark:text-gray-200 animate-in fade-in slide-in-from-top-1 duration-100">
-
         <template v-if="item.isFolder">
           <button @click.stop="triggerCreate(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
             <UIcon name="i-heroicons-plus" class="w-3 h-3" /> Neue Seite
@@ -41,7 +40,6 @@
           </button>
           <div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
         </template>
-
         <button @click.stop="triggerDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 flex items-center gap-2">
           <UIcon name="i-heroicons-trash" class="w-3 h-3" /> Löschen
         </button>
@@ -59,15 +57,12 @@
 import { vOnClickOutside } from '@vueuse/components'
 import type { WikiPageItem } from '~/composables/useWikiTree'
 
-// Rekursiver Component Name (wichtig für Nuxt Auto-Import, oft automatisch 'WikiTreeItem')
-// Falls Recursion Issues auftreten: defineOptions({ name: 'WikiTreeItem' })
-
 const props = defineProps<{ item: WikiPageItem; depth?: number }>()
 const router = useRouter()
 const route = useRoute()
+// NEU: searchQuery importieren für Auto-Expand
+const { searchQuery } = useWikiTree()
 
-// --- INJECT ---
-// Wir holen uns die Funktion zum Öffnen des Modals von der Hauptseite
 const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
 
 const depth = props.depth ?? 0
@@ -76,11 +71,18 @@ const isOpen = ref(false)
 const showMenu = ref(false)
 const isActive = computed(() => route.params.id === props.item.id)
 
-// Auto-Open Logic (Ordner öffnen, wenn Kind aktiv ist)
+// Auto-Open Logic 1: Aktive Seite
 watch(() => route.params.id, (newId) => {
   if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
 }, { immediate: true })
 
+// NEU: Auto-Open Logic 2: Suche aktiv -> Alles aufklappen
+watch(searchQuery, (newVal) => {
+  if (newVal.trim().length > 0 && props.item.isFolder) {
+    isOpen.value = true
+  }
+}, { immediate: true })
+
 function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
   if (node.id === targetId) return true
   return node.children?.some(c => hasActiveChild(c, targetId)) ?? false
@@ -89,17 +91,12 @@ function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
 function handleClick() {
   props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
 }
-
 function toggleFolder() { isOpen.value = !isOpen.value }
-
-// --- ACTIONS ---
-
 function triggerCreate(isFolder: boolean) {
   showMenu.value = false
-  isOpen.value = true // Ordner aufklappen
+  isOpen.value = true
   openWikiAction('create', props.item, isFolder)
 }
-
 function triggerDelete() {
   showMenu.value = false
   openWikiAction('delete', props.item)

frontend/composables/useWikiTree.ts

@@ -16,15 +16,18 @@ export const useWikiTree = () => {
     const isLoading = useState<boolean>('wiki-loading', () => false)
     const isSidebarOpen = useState<boolean>('wiki-sidebar-open', () => true)
 
-    // COMPUTED TREE
-    const tree = computed(() => {
+    // NEU: Suchbegriff State
+    const searchQuery = useState<string>('wiki-search-query', () => '')
+
+    // 1. Basis-Baum bauen (Hierarchie & Sortierung)
+    const baseTree = computed(() => {
         const rawItems = items.value || []
         if (!rawItems.length) return []
 
         const roots: WikiPageItem[] = []
         const lookup: Record<string, WikiPageItem> = {}
 
-        // Init Lookup
+        // Init Lookup (Shallow Copy um Originaldaten nicht zu mutieren)
         rawItems.forEach(item => {
             lookup[item.id] = { ...item, children: [] }
         })
@@ -39,7 +42,7 @@ export const useWikiTree = () => {
             }
         })
 
-        // Sort: Folders first, then Alphabetical
+        // Sort Helper
         const sortNodes = (nodes: WikiPageItem[]) => {
             nodes.sort((a, b) => {
                 if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
@@ -54,47 +57,67 @@ export const useWikiTree = () => {
         return roots
     })
 
-    // ACTIONS
+    // 2. NEU: Gefilterter Baum (basiert auf baseTree + searchQuery)
+    const filteredTree = computed(() => {
+        const query = searchQuery.value.toLowerCase().trim()
 
+        // Wenn keine Suche: Gib originalen Baum zurück
+        if (!query) return baseTree.value
+
+        // Rekursive Filterfunktion
+        const filterNodes = (nodes: WikiPageItem[]): WikiPageItem[] => {
+            return nodes.reduce((acc: WikiPageItem[], node) => {
+                // Matcht der Knoten selbst?
+                const matchesSelf = node.title.toLowerCase().includes(query)
+
+                // Matchen Kinder? (Rekursion)
+                const filteredChildren = node.children ? filterNodes(node.children) : []
+
+                // Wenn selbst matcht ODER Kinder matchen -> behalten
+                if (matchesSelf || filteredChildren.length > 0) {
+                    // Wir erstellen eine Kopie des Knotens mit den gefilterten Kindern
+                    acc.push({
+                        ...node,
+                        children: filteredChildren
+                    })
+                }
+
+                return acc
+            }, [])
+        }
+
+        return filterNodes(baseTree.value)
+    })
+
+    // ACTIONS
     const loadTree = async () => {
         isLoading.value = true
         try {
             const data = await $api<WikiPageItem[]>('/api/wiki/tree', { method: 'GET' })
             items.value = data
-        } catch (e) {
-            console.error('Wiki Tree Load Error', e)
-        } finally {
-            isLoading.value = false
-        }
+        } catch (e) { console.error(e) }
+        finally { isLoading.value = false }
     }
 
-    // Rein API-basierte Funktion ohne UI-Logik
     const createItem = async (title: string, parentId: string | null, isFolder: boolean) => {
         try {
-            const newItem = await $api('/api/wiki', {
-                method: 'POST',
-                body: { title, parentId, isFolder }
-            })
+            const newItem = await $api('/api/wiki', { method: 'POST', body: { title, parentId, isFolder } })
             await loadTree()
             return newItem
-        } catch (e) {
-            throw e // Fehler weiterwerfen, damit UI reagieren kann
-        }
+        } catch (e) { throw e }
     }
 
-    // Rein API-basierte Funktion ohne UI-Logik
     const deleteItem = async (id: string) => {
         try {
             await $api(`/api/wiki/${id}`, { method: 'DELETE' })
             await loadTree()
             return true
-        } catch (e) {
-            throw e
-        }
+        } catch (e) { throw e }
     }
 
     return {
-        tree,
+        tree: filteredTree, // Wir geben jetzt immer den (evtl. gefilterten) Baum zurück
+        searchQuery,        // Damit die UI das Input-Feld binden kann
         items,
         isLoading,
         isSidebarOpen,

frontend/pages/wiki/[[id]].vue

@@ -5,7 +5,7 @@
         class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 transition-all duration-300 ease-in-out overflow-hidden whitespace-nowrap h-full"
         :class="[isSidebarOpen ? 'w-80 min-w-[20rem] translate-x-0' : 'w-0 min-w-0 -translate-x-full opacity-0 border-none']"
     >
-      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-4 py-3 bg-white dark:bg-gray-900 h-14 shrink-0 relative z-20">
+      <div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-900 h-14 shrink-0 relative z-20">
         <h2 class="font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
           <span class="text-primary-600">📚</span> Wiki
         </h2>
@@ -14,11 +14,30 @@
           <UDropdown :items="rootMenuItems" :popper="{ placement: 'bottom-end' }">
             <UButton color="gray" variant="ghost" icon="i-heroicons-plus" size="sm" />
           </UDropdown>
-
           <UButton @click="isSidebarOpen = false" color="gray" variant="ghost" icon="i-heroicons-chevron-double-left" size="sm" />
         </div>
       </div>
 
+      <div class="px-3 pb-2 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <UInput
+            v-model="searchQuery"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="Suchen..."
+            size="sm"
+            :ui="{ icon: { trailing: { pointer: '' } } }"
+        >
+          <template #trailing v-if="searchQuery">
+            <UButton
+                color="gray"
+                variant="link"
+                icon="i-heroicons-x-mark"
+                :padded="false"
+                @click="searchQuery = ''"
+            />
+          </template>
+        </UInput>
+      </div>
+
       <div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
         <div v-if="isLoadingTree && !tree.length" class="space-y-2 px-2 mt-2">
           <USkeleton class="h-4 w-3/4" />
@@ -29,103 +48,72 @@
           <WikiTreeItem v-for="node in tree" :key="node.id" :item="node" />
 
           <div v-if="!tree.length" class="text-center text-sm text-gray-400 mt-10 px-4">
-            Keine Seiten vorhanden.<br>Erstelle den ersten Eintrag oben rechts.
+            <span v-if="searchQuery">Keine Ergebnisse gefunden.</span>
+            <span v-else>Keine Seiten vorhanden.<br>Erstelle den ersten Eintrag oben rechts.</span>
           </div>
         </div>
       </div>
     </aside>
 
     <main class="flex-1 overflow-hidden relative bg-white dark:bg-gray-900 h-full flex flex-col min-w-0">
-
       <div v-if="pageId && page" class="flex flex-col h-full">
         <header class="px-8 pt-8 pb-4 flex flex-col gap-2 shrink-0">
           <div class="flex items-center gap-3 w-full">
-
-            <UButton
-                v-show="!isSidebarOpen"
-                @click="isSidebarOpen = true"
-                icon="i-heroicons-bars-3"
-                color="gray"
-                variant="ghost"
-                class="-ml-2 shrink-0"
-            />
-
-            <input
-                v-model="page.title"
-                @blur="saveTitle"
-                @keydown.enter="($event.target as HTMLInputElement).blur()"
-                class="text-4xl font-bold text-gray-900 dark:text-white w-full outline-none placeholder-gray-300 bg-transparent min-w-0"
-                placeholder="Unbenannte Seite"
-            />
+            <UButton v-show="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="gray" variant="ghost" class="-ml-2 shrink-0" />
+            <input v-model="page.title" @blur="saveTitle" @keydown.enter="($event.target as HTMLInputElement).blur()" class="text-4xl font-bold text-gray-900 dark:text-white w-full outline-none bg-transparent min-w-0" placeholder="Unbenannte Seite" />
           </div>
-
           <div class="flex items-center gap-4 text-xs text-gray-400 h-6 ml-0.5">
             <span>{{ new Date(page.createdAt).toLocaleDateString() }}</span>
             <transition name="fade">
-              <span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
-                <UIcon name="i-heroicons-arrow-path" class="w-3 h-3 animate-spin" /> Speichert...
-              </span>
+                  <span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
+                    <UIcon name="i-heroicons-arrow-path" class="w-3 h-3 animate-spin" /> Speichert...
+                  </span>
               <span v-else-if="lastSaved" class="text-green-600">Gespeichert</span>
             </transition>
           </div>
         </header>
-
         <div class="flex-1 overflow-hidden border-t border-gray-100 dark:border-gray-800">
           <WikiEditor v-model="contentBuffer" @update:modelValue="handleContentChange" />
         </div>
       </div>
-
       <div v-else-if="pageId && pendingPage" class="flex h-full items-center justify-center text-gray-400">
         <div class="flex flex-col items-center gap-2">
           <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-gray-300" />
           <span>Lade Seite...</span>
         </div>
       </div>
-
       <div v-else class="flex h-full flex-col items-center justify-center text-gray-400 bg-gray-50/30 dark:bg-gray-800/30">
         <UButton v-if="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="white" class="absolute left-4 top-4" />
-
         <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
           <UIcon name="i-heroicons-document" class="w-12 h-12 text-gray-400" />
         </div>
         <p class="text-lg font-medium text-gray-600 dark:text-gray-300">Keine Seite ausgewählt</p>
-        <p class="text-sm mt-1">Wähle eine Notiz aus der Navigation.</p>
       </div>
-
     </main>
 
     <UModal v-model="isModalOpen">
       <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
         <template #header>
           <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              {{ modalTitle }}
-            </h3>
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
             <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
           </div>
         </template>
-
         <div v-if="modalState.type === 'create'" class="space-y-4">
           <UFormGroup label="Titel" name="title">
             <UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
           </UFormGroup>
         </div>
-
         <div v-else-if="modalState.type === 'delete'">
           <p class="text-sm text-gray-500 dark:text-gray-300">
             Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
             <br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
           </p>
         </div>
-
         <template #footer>
           <div class="flex justify-end gap-2">
             <UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
-            <UButton
-                :color="modalState.type === 'delete' ? 'red' : 'primary'"
-                :loading="modalLoading"
-                @click="handleModalConfirm"
-            >
+            <UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
               {{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
             </UButton>
           </div>
@@ -141,11 +129,11 @@ import WikiTreeItem from '~/components/wiki/TreeItem.vue'
 import WikiEditor from '~/components/wiki/WikiEditor.vue'
 import type { WikiPageItem } from '~/composables/useWikiTree'
 
-// --- SETUP ---
 const route = useRoute()
 const router = useRouter()
 const { $api } = useNuxtApp()
-const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem } = useWikiTree()
+// NEU: searchQuery hier entpacken, damit es an UInput gebunden werden kann
+const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem, searchQuery } = useWikiTree()
 
 // --- EDITOR LOGIC ---
 const pageId = computed(() => route.params.id as string | undefined)
@@ -154,9 +142,7 @@ const lastSaved = ref(false)
 const saveTimeout = ref<any>(null)
 const contentBuffer = ref(null)
 
-// Init Load
 onMounted(() => loadTree())
-
 watch(pageId, () => {
   if (saveTimeout.value) clearTimeout(saveTimeout.value)
   isSaving.value = false
@@ -170,95 +156,53 @@ const { data: page, pending: pendingPage } = await useAsyncData(
       const res = await $api<any>(`/api/wiki/${pageId.value}`)
       contentBuffer.value = res.content
       return res
-    },
-    { watch: [pageId], immediate: true }
+    }, { watch: [pageId], immediate: true }
 )
 
-// --- MODAL LOGIC (Zentralisiert) ---
-
+// --- MODAL LOGIC (Identisch wie vorher) ---
 const isModalOpen = ref(false)
 const modalLoading = ref(false)
-
 const modalState = reactive({
   type: 'create' as 'create' | 'delete',
-  targetItem: null as WikiPageItem | null, // Bei Create: Parent. Bei Delete: Das Item selbst.
+  targetItem: null as WikiPageItem | null,
   isFolderCreation: false,
   inputValue: ''
 })
-
 const modalTitle = computed(() => {
   if (modalState.type === 'delete') return 'Eintrag löschen'
   return modalState.isFolderCreation ? 'Neuen Ordner erstellen' : 'Neue Seite erstellen'
 })
-
-// Diese Funktion wird an Kinder via Inject weitergegeben
 function openWikiAction(type: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder = false) {
   modalState.type = type
   modalState.targetItem = contextItem
   modalState.isFolderCreation = isFolder
-  modalState.inputValue = '' // Reset
-
-  if (type === 'create') {
-    // Optional: Prefix generieren
-  }
-
+  modalState.inputValue = ''
   isModalOpen.value = true
 }
-
-// Bereitstellen für TreeItems
 provide('openWikiAction', openWikiAction)
 
 async function handleModalConfirm() {
   modalLoading.value = true
-
   try {
     if (modalState.type === 'create') {
       if (!modalState.inputValue.trim()) return
-
       const parentId = modalState.targetItem ? modalState.targetItem.id : null
       const newItem = await createItem(modalState.inputValue, parentId, modalState.isFolderCreation)
-
-      // Wenn Seite erstellt wurde -> hin navigieren
-      if (newItem && !modalState.isFolderCreation) {
-        // @ts-ignore
-        router.push(`/wiki/${newItem.id}`)
-      }
-    }
-    else if (modalState.type === 'delete' && modalState.targetItem) {
+      if (newItem && !modalState.isFolderCreation) router.push(`/wiki/${newItem.id}`)
+    } else if (modalState.type === 'delete' && modalState.targetItem) {
       const success = await deleteItem(modalState.targetItem.id)
-
-      // Falls wir die aktuelle Seite löschen, ab zum Root
-      if (success && pageId.value === modalState.targetItem.id) {
-        router.push('/wiki')
-      }
+      if (success && pageId.value === modalState.targetItem.id) router.push('/wiki')
     }
-
     isModalOpen.value = false
-  } catch (e) {
-    console.error(e)
-    // Hier könnte man einen UNotification Toast anzeigen
-  } finally {
-    modalLoading.value = false
-  }
+  } catch (e) { console.error(e) } finally { modalLoading.value = false }
 }
 
-// --- ROOT MENU ---
-// Konfiguration für UDropdown
 const rootMenuItems = [
-  [{
-    label: 'Neue Seite',
-    icon: 'i-heroicons-document-plus',
-    click: () => openWikiAction('create', null, false)
-  }],
-  [{
-    label: 'Neuer Ordner',
-    icon: 'i-heroicons-folder-plus',
-    click: () => openWikiAction('create', null, true)
-  }]
+  [{ label: 'Neue Seite', icon: 'i-heroicons-document-plus', click: () => openWikiAction('create', null, false) }],
+  [{ label: 'Neuer Ordner', icon: 'i-heroicons-folder-plus', click: () => openWikiAction('create', null, true) }]
 ]
 
-// --- EDITOR ACTIONS ---
-
+// --- EDITOR ACTIONS (Identisch wie vorher) ---
 async function saveTitle() {
   if (!page.value || !pageId.value) return
   isSaving.value = true
@@ -268,7 +212,6 @@ async function saveTitle() {
     showSavedFeedback()
   } finally { isSaving.value = false }
 }
-
 function handleContentChange(newContent: any) {
   contentBuffer.value = newContent
   isSaving.value = true
@@ -282,7 +225,6 @@ function handleContentChange(newContent: any) {
     } catch (e) { console.error(e) } finally { isSaving.value = false }
   }, 1000)
 }
-
 function showSavedFeedback() {
   lastSaved.value = true
   setTimeout(() => { lastSaved.value = false }, 2000)
@@ -294,7 +236,4 @@ function showSavedFeedback() {
 .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
 .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
 :deep(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #374151; }
-
-.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>