Added Wiki

frontend/components/wiki/TreeItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="select-none text-sm text-gray-700">
+    <div
+        class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5"
+        :class="[isActive ? 'bg-primary-50 text-primary-700 font-medium' : 'hover:bg-gray-100']"
+        :style="{ paddingLeft: `${indent}rem` }"
+        @click.stop="handleClick"
+    >
+      <button
+          v-if="item.isFolder"
+          class="h-4 w-4 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-transform duration-200"
+          :class="{ 'rotate-90': isOpen }"
+          @click.stop="toggleFolder"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg>
+      </button>
+      <span v-else class="w-4"></span>
+
+      <span class="text-gray-400">
+        <svg v-if="item.isFolder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-yellow-400"><path d="M3.75 3A1.75 1.75 0 002 4.75v3.26a3.235 3.235 0 011.75-.51h12.5c.644 0 1.245.188 1.75.51V6.75A1.75 1.75 0 0016.25 5h-4.836a.25.25 0 01-.177-.073L9.823 3.513A1.75 1.75 0 008.586 3H3.75zM3.75 9A1.75 1.75 0 002 10.75v4.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0018 15.25v-4.5A1.75 1.75 0 0016.25 9H3.75z" /></svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" /></svg>
+      </span>
+
+      <span class="truncate flex-1">{{ item.title }}</span>
+    </div>
+
+    <div v-if="item.isFolder && isOpen">
+      <TreeItem v-for="child in item.children" :key="child.id" :item="child" :depth="depth + 1" />
+      <div v-if="!item.children?.length" class="text-xs text-gray-400 py-1 italic" :style="{ paddingLeft: `${indent + 1.8}rem` }">Leer</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WikiPageItem } from '~/composables/useWikiTree'
+// Expliziter Self-Import für Rekursion (wichtig in manchen Nuxt Setups)
+import TreeItem from './TreeItem.vue'
+
+const props = defineProps<{ item: WikiPageItem; depth?: number }>()
+const router = useRouter()
+const route = useRoute()
+
+const depth = props.depth ?? 0
+const indent = computed(() => 0.5 + (depth * 0.7))
+const isOpen = ref(false)
+const isActive = computed(() => route.params.id === props.item.id)
+
+// Auto-Open: Wenn wir ein Parent sind und das aktive Kind enthalten
+watch(() => route.params.id, (newId) => {
+  if (props.item.isFolder && hasActiveChild(props.item, newId as string)) 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
+}
+
+function handleClick() {
+  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+}
+
+function toggleFolder() { isOpen.value = !isOpen.value }
+</script>