#84

backend/db/schema/index.ts

@@ -72,3 +72,4 @@ export * from "./staff_time_events"
 export * from "./serialtypes"
 export * from "./serialexecutions"
 export * from "./public_links"
+export * from "./wikipages"

backend/db/schema/wikipages.ts

@@ -0,0 +1,99 @@
+import {
+    pgTable,
+    bigint,
+    text,
+    timestamp,
+    boolean,
+    jsonb,
+    integer,
+    index,
+    uuid,
+    AnyPgColumn
+} from "drizzle-orm/pg-core"
+import { relations } from "drizzle-orm"
+import { tenants } from "./tenants"
+import { authUsers } from "./auth_users"
+
+export const wikiPages = pgTable(
+    "wiki_pages",
+    {
+        // ID des Wiki-Eintrags selbst (neu = UUID)
+        id: uuid("id")
+            .primaryKey()
+            .defaultRandom(),
+
+        tenantId: bigint("tenant_id", { mode: "number" })
+            .notNull()
+            .references(() => tenants.id, { onDelete: "cascade" }),
+
+        parentId: uuid("parent_id")
+            .references((): AnyPgColumn => wikiPages.id, { onDelete: "cascade" }),
+
+        title: text("title").notNull(),
+
+        content: jsonb("content"),
+
+        isFolder: boolean("is_folder").notNull().default(false),
+
+        sortOrder: integer("sort_order").notNull().default(0),
+
+        // --- POLYMORPHE BEZIEHUNG (Split) ---
+
+        // Art der Entität (z.B. 'customer', 'invoice', 'iot_device')
+        entityType: text("entity_type"),
+
+        // SPALTE 1: Für Legacy-Tabellen (BigInt)
+        // Nutzung: Wenn entityType='customer', wird hier die ID 1050 gespeichert
+        entityId: bigint("entity_id", { mode: "number" }),
+
+        // SPALTE 2: Für neue Tabellen (UUID)
+        // Nutzung: Wenn entityType='iot_device', wird hier die UUID gespeichert
+        entityUuid: uuid("entity_uuid"),
+
+        // ------------------------------------
+
+        createdAt: timestamp("created_at", { withTimezone: true })
+            .notNull()
+            .defaultNow(),
+
+        updatedAt: timestamp("updated_at", { withTimezone: true }),
+
+        createdBy: uuid("created_by").references(() => authUsers.id),
+        updatedBy: uuid("updated_by").references(() => authUsers.id),
+    },
+    (table) => ({
+        tenantIdx: index("wiki_pages_tenant_idx").on(table.tenantId),
+        parentIdx: index("wiki_pages_parent_idx").on(table.parentId),
+
+        // ZWEI separate Indexe für schnelle Lookups, je nachdem welche ID genutzt wird
+        // Fall 1: Suche nach Notizen für Kunde 1050
+        entityIntIdx: index("wiki_pages_entity_int_idx")
+            .on(table.tenantId, table.entityType, table.entityId),
+
+        // Fall 2: Suche nach Notizen für IoT-Device 550e84...
+        entityUuidIdx: index("wiki_pages_entity_uuid_idx")
+            .on(table.tenantId, table.entityType, table.entityUuid),
+    })
+)
+
+export const wikiPagesRelations = relations(wikiPages, ({ one, many }) => ({
+    tenant: one(tenants, {
+        fields: [wikiPages.tenantId],
+        references: [tenants.id],
+    }),
+    parent: one(wikiPages, {
+        fields: [wikiPages.parentId],
+        references: [wikiPages.id],
+        relationName: "parent_child",
+    }),
+    children: many(wikiPages, {
+        relationName: "parent_child",
+    }),
+    author: one(authUsers, {
+        fields: [wikiPages.createdBy],
+        references: [authUsers.id],
+    }),
+}))
+
+export type WikiPage = typeof wikiPages.$inferSelect
+export type NewWikiPage = typeof wikiPages.$inferInsert

backend/src/index.ts

@@ -29,6 +29,7 @@ import staffTimeRoutes from "./routes/staff/time";
 import staffTimeConnectRoutes from "./routes/staff/timeconnects";
 import userRoutes from "./routes/auth/user";
 import publiclinksAuthenticatedRoutes from "./routes/publiclinks/publiclinks-authenticated";
+import wikiRoutes from "./routes/wiki";
 
 //Public Links
 import publiclinksNonAuthenticatedRoutes from "./routes/publiclinks/publiclinks-non-authenticated";
@@ -144,6 +145,7 @@ async function main() {
         await subApp.register(userRoutes);
         await subApp.register(publiclinksAuthenticatedRoutes);
         await subApp.register(resourceRoutes);
+        await subApp.register(wikiRoutes);
 
     },{prefix: "/api"})
 

backend/src/plugins/cors.ts

@@ -14,7 +14,7 @@ export default fp(async (server: FastifyInstance) => {
             "https://app.fedeo.de", // dein Nuxt-Frontend
             "capacitor://localhost", // dein Nuxt-Frontend
         ],
-        methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS",
+        methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS","PATCH",
             "PROPFIND", "PROPPATCH", "MKCOL", "COPY", "MOVE", "LOCK", "UNLOCK"],
         allowedHeaders: ["Content-Type", "Authorization", "Context", "X-Public-Pin","Depth", "Overwrite", "Destination", "Lock-Token", "If"],
         exposedHeaders: ["Authorization", "Content-Disposition", "Content-Type", "Content-Length"], // optional, falls du ihn auch auslesen willst

backend/src/routes/wiki.ts

@@ -0,0 +1,203 @@
+import { FastifyInstance } from "fastify"
+import { and, eq, isNull, asc, desc } from "drizzle-orm"
+import { wikiPages, authUsers } from "../../db/schema/"
+
+// Types für Request Body & Query (statt Zod)
+interface WikiTreeQuery {
+    entityType?: string
+    entityId?: number    // Kommt als string oder number an, je nach parser
+    entityUuid?: string
+}
+
+interface WikiCreateBody {
+    title: string
+    parentId?: string    // UUID
+    isFolder?: boolean
+    entityType?: string
+    entityId?: number
+    entityUuid?: string
+}
+
+interface WikiUpdateBody {
+    title?: string
+    content?: any        // Das Tiptap JSON Object
+    parentId?: string | null
+    sortOrder?: number
+    isFolder?: boolean
+}
+
+export default async function wikiRoutes (server: FastifyInstance) {
+
+    // ---------------------------------------------------------
+    // 1. GET /wiki/tree
+    // Lädt die Struktur für die Sidebar (OHNE Content -> Schnell)
+    // ---------------------------------------------------------
+    server.get<{ Querystring: WikiTreeQuery }>("/wiki/tree", async (req, reply) => {
+        const user = req.user
+        const { entityType, entityId, entityUuid } = req.query
+
+        // Basis-Filter: Tenant Sicherheit
+        const filters = [eq(wikiPages.tenantId, user.tenant_id)]
+
+        // Logik: Laden wir "Allgemein" oder "Entitäts-Spezifisch"?
+        if (entityType) {
+            // Spezifisch (z.B. Kunde)
+            filters.push(eq(wikiPages.entityType, entityType))
+
+            if (entityId) {
+                filters.push(eq(wikiPages.entityId, Number(entityId)))
+            } else if (entityUuid) {
+                filters.push(eq(wikiPages.entityUuid, entityUuid))
+            }
+        } else {
+            // Allgemein (alles wo entityType NULL ist)
+            filters.push(isNull(wikiPages.entityType))
+        }
+
+        // Performance: Nur Metadaten laden, kein riesiges JSON-Content
+        const pages = await server.db
+            .select({
+                id: wikiPages.id,
+                parentId: wikiPages.parentId,
+                title: wikiPages.title,
+                isFolder: wikiPages.isFolder,
+                sortOrder: wikiPages.sortOrder,
+                entityType: wikiPages.entityType,
+                updatedAt: wikiPages.updatedAt,
+            })
+            .from(wikiPages)
+            .where(and(...filters))
+            .orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
+
+        return pages
+    })
+
+    // ---------------------------------------------------------
+    // 2. GET /wiki/:id
+    // Lädt EINEN Eintrag komplett MIT Content (für den Editor)
+    // ---------------------------------------------------------
+    server.get<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
+        const user = req.user
+        const { id } = req.params
+
+        // Drizzle Query API nutzen für Relation (optional Author laden)
+        const page = await server.db.query.wikiPages.findFirst({
+            where: and(
+                eq(wikiPages.id, id),
+                eq(wikiPages.tenantId, user.tenant_id)
+            ),
+            with: {
+                author: {
+                    columns: {
+                        id: true,
+                        // name: true, // Falls im authUsers schema vorhanden
+                    }
+                }
+            }
+        })
+
+        if (!page) {
+            return reply.code(404).send({ error: "Page not found" })
+        }
+
+        return page
+    })
+
+    // ---------------------------------------------------------
+    // 3. POST /wiki
+    // Erstellt neuen Eintrag
+    // ---------------------------------------------------------
+    server.post<{ Body: WikiCreateBody }>("/wiki", async (req, reply) => {
+        const user = req.user
+        const body = req.body
+
+        // Simple Validierung
+        if (!body.title) return reply.code(400).send({ error: "Title required" })
+
+        // Split Logik für Polymorphie
+        const hasEntity = !!body.entityType
+
+        const [newPage] = await server.db
+            .insert(wikiPages)
+            .values({
+                tenantId: user.tenant_id,
+                title: body.title,
+                parentId: body.parentId || null, // undefined abfangen
+                isFolder: body.isFolder ?? false,
+
+                // Polymorphe Zuweisung
+                entityType: hasEntity ? body.entityType : null,
+                entityId: hasEntity && body.entityId ? body.entityId : null,
+                entityUuid: hasEntity && body.entityUuid ? body.entityUuid : null,
+                //@ts-ignore
+                createdBy: user.id,
+                //@ts-ignore
+                updatedBy: user.id
+            })
+            .returning()
+
+        return newPage
+    })
+
+    // ---------------------------------------------------------
+    // 4. PATCH /wiki/:id
+    // Universal-Update (Inhalt, Titel, Verschieben, Sortieren)
+    // ---------------------------------------------------------
+    server.patch<{ Params: { id: string }; Body: WikiUpdateBody }>(
+        "/wiki/:id",
+        async (req, reply) => {
+            const user = req.user
+            const { id } = req.params
+            const body = req.body
+
+            // 1. Prüfen ob Eintrag existiert & Tenant gehört
+            const existing = await server.db.query.wikiPages.findFirst({
+                where: and(eq(wikiPages.id, id), eq(wikiPages.tenantId, user.tenant_id)),
+                columns: { id: true }
+            })
+
+            if(!existing) return reply.code(404).send({ error: "Not found" })
+
+            // 2. Update durchführen
+            const [updatedPage] = await server.db
+                .update(wikiPages)
+                .set({
+                    title: body.title,       // update title if defined
+                    content: body.content,   // update content if defined
+                    parentId: body.parentId, // update parent (move) if defined
+                    sortOrder: body.sortOrder,
+                    isFolder: body.isFolder,
+                    updatedAt: new Date(),
+                    //@ts-ignore
+                    updatedBy: user.id
+                })
+                .where(eq(wikiPages.id, id))
+                .returning()
+
+            return updatedPage
+        }
+    )
+
+    // ---------------------------------------------------------
+    // 5. DELETE /wiki/:id
+    // Löscht Eintrag (DB Cascade erledigt die Kinder)
+    // ---------------------------------------------------------
+    server.delete<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
+        const user = req.user
+        const { id } = req.params
+
+        const result = await server.db
+            .delete(wikiPages)
+            .where(and(
+                eq(wikiPages.id, id),
+                eq(wikiPages.tenantId, user.tenant_id) // WICHTIG: Security
+            ))
+            .returning({ id: wikiPages.id })
+
+        if (result.length === 0) {
+            return reply.code(404).send({ error: "Not found or not authorized" })
+        }
+
+        return { success: true, deletedId: result[0].id }
+    })
+}

frontend/components/MainNav.vue

@@ -50,6 +50,11 @@ const links = computed(() => {
           to: "/standardEntity/tasks",
           icon: "i-heroicons-rectangle-stack"
         }] : [],
+        ...true ? [{
+          label: "Wiki",
+          to: "/wiki",
+          icon: "i-heroicons-book-open"
+        }] : [],
       ]
     },
     {

frontend/components/wiki/TreeItem.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="select-none text-sm text-gray-700 dark:text-gray-200 relative">
+
+    <div
+        class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5 relative pr-8"
+        :class="[isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800']"
+        :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 dark:hover:text-gray-300 transition-transform duration-200"
+          :class="{ 'rotate-90': isOpen }"
+          @click.stop="toggleFolder"
+      >
+        <UIcon name="i-heroicons-chevron-right-20-solid" class="w-3 h-3" />
+      </button>
+      <span v-else class="w-4"></span>
+
+      <span class="text-gray-400 shrink-0 flex items-center">
+        <UIcon v-if="item.isFolder" name="i-heroicons-folder-solid" class="w-4 h-4 text-yellow-400" />
+        <UIcon v-else name="i-heroicons-document-text" class="w-4 h-4" />
+      </span>
+
+      <span class="truncate flex-1">{{ item.title }}</span>
+
+      <div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
+        <button @click.stop="showMenu = !showMenu" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500">
+          <UIcon name="i-heroicons-ellipsis-horizontal" class="w-4 h-4" />
+        </button>
+      </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
+          </button>
+          <button @click.stop="triggerCreate(true)" 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-folder-plus" class="w-3 h-3 text-yellow-500" /> Neuer Ordner
+          </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>
+      </div>
+    </div>
+
+    <div v-if="item.isFolder && isOpen">
+      <WikiTreeItem 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 { vOnClickOutside } from '@vueuse/components'
+import type { WikiPageItem } from '~/composables/useWikiTree'
+
+const props = defineProps<{ item: WikiPageItem; depth?: number }>()
+const router = useRouter()
+const route = useRoute()
+// NEU: searchQuery importieren für Auto-Expand
+const { searchQuery } = useWikiTree()
+
+const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
+
+const depth = props.depth ?? 0
+const indent = computed(() => 0.5 + (depth * 0.7))
+const isOpen = ref(false)
+const showMenu = ref(false)
+const isActive = computed(() => route.params.id === props.item.id)
+
+// 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
+}
+
+function handleClick() {
+  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+}
+function toggleFolder() { isOpen.value = !isOpen.value }
+function triggerCreate(isFolder: boolean) {
+  showMenu.value = false
+  isOpen.value = true
+  openWikiAction('create', props.item, isFolder)
+}
+function triggerDelete() {
+  showMenu.value = false
+  openWikiAction('delete', props.item)
+}
+</script>

frontend/components/wiki/WikiEditor.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="flex flex-col h-full bg-white relative">
+
+    <div v-if="editor" class="border-b border-gray-100 px-4 py-2 flex flex-wrap gap-1 items-center sticky top-0 bg-white z-20 shadow-sm select-none">
+
+      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="toolbar-btn font-bold" title="Fett">B</button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="toolbar-btn italic" title="Kursiv">I</button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through" title="Durchgestrichen">S</button>
+        <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold" title="Markieren">M</button>
+      </div>
+
+      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn" title="H1">H1</button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn" title="H2">H2</button>
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" class="toolbar-btn font-mono text-xs" title="Code Block">&lt;/&gt;</button>
+      </div>
+
+      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">•</button>
+        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑</button>
+      </div>
+
+      <div class="flex gap-0.5 items-center">
+        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn" title="Tabelle">▦</button>
+        <button @click="addVideo" class="toolbar-btn text-red-600" title="YouTube Video">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" /></svg>
+        </button>
+
+        <div v-if="editor.isActive('table')" class="flex gap-0.5 ml-2 pl-2 border-l border-gray-200 items-center">
+          <button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs">+Col</button>
+          <button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400">-Col</button>
+          <button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs">+Row</button>
+          <button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400">-Row</button>
+          <button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs">Merge</button>
+          <button @click="editor.chain().focus().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1">🗑</button>
+        </div>
+      </div>
+    </div>
+
+    <BubbleMenu
+        v-if="editor"
+        :editor="editor"
+        :tippy-options="{ duration: 200, placement: 'top-start', animation: 'scale' }"
+        class="bg-white border border-gray-200 text-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50"
+    >
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="bubble-btn italic">I</button>
+      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="bubble-btn line-through">S</button>
+      <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="bubble-btn text-yellow-500 font-bold">M</button>
+      <div class="w-px h-4 bg-gray-200 mx-1"></div>
+      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="bubble-btn font-bold text-sm">H2</button>
+      <div class="w-px h-4 bg-gray-200 mx-1"></div>
+      <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button>
+    </BubbleMenu>
+
+    <FloatingMenu
+        v-if="editor"
+        :editor="editor"
+        :tippy-options="{ duration: 100, placement: 'right-start' }"
+        class="bg-white border border-gray-200 text-gray-600 rounded-lg shadow-lg flex items-center p-1 gap-1 -ml-4"
+    >
+      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" class="bubble-btn text-xs font-bold" title="H1">H1</button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" class="bubble-btn text-xs font-bold" title="H2">H2</button>
+      <button @click="editor.chain().focus().toggleBulletList().run()" class="bubble-btn" title="Liste">•</button>
+      <button @click="editor.chain().focus().toggleTaskList().run()" class="bubble-btn" title="Task">☑</button>
+      <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="bubble-btn" title="Tabelle">▦</button>
+      <button @click="editor.chain().focus().toggleCodeBlock().run()" class="bubble-btn font-mono text-xs" title="Code">&lt;&gt;</button>
+    </FloatingMenu>
+
+    <editor-content
+        :editor="editor"
+        class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area"
+    />
+
+    <div v-if="editor" class="border-t border-gray-100 px-4 py-1 text-xs text-gray-400 flex justify-end bg-gray-50">
+      {{ editor.storage.characterCount.words() }} Wörter • {{ editor.storage.characterCount.characters() }} Zeichen
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+
+// Tiptap Core
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+// @ts-ignore
+import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
+
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+
+// Extensions
+import BubbleMenuExtension from '@tiptap/extension-bubble-menu'
+import FloatingMenuExtension from '@tiptap/extension-floating-menu'
+import Link from '@tiptap/extension-link'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import Image from '@tiptap/extension-image'
+import Highlight from '@tiptap/extension-highlight'
+import Youtube from '@tiptap/extension-youtube'
+import Typography from '@tiptap/extension-typography'
+import CharacterCount from '@tiptap/extension-character-count'
+
+// --- FIX: Standard CodeBlock statt Lowlight nutzen (Vermeidet Vite Fehler) ---
+import CodeBlock from '@tiptap/extension-code-block'
+
+// Table Imports
+import { Table } from '@tiptap/extension-table'
+import { TableRow } from '@tiptap/extension-table-row'
+import { TableCell } from '@tiptap/extension-table-cell'
+import { TableHeader } from '@tiptap/extension-table-header'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue'])
+
+const editor = useEditor({
+  content: props.modelValue,
+  extensions: [
+    StarterKit.configure({
+      codeBlock: false, // Standard StarterKit Block aus, wir laden unseren eigenen
+    }),
+    Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
+
+    // UI
+    BubbleMenuExtension.configure({
+      shouldShow: ({ editor, from, to }) => !editor.state.selection.empty && (to - from > 0),
+    }),
+    FloatingMenuExtension,
+
+    // Basics
+    Link.configure({ openOnClick: false, autolink: true }),
+    Image,
+    Highlight,
+    Typography,
+    CharacterCount,
+
+    // Struktur
+    TaskList,
+    TaskItem.configure({ nested: true }),
+    Youtube.configure({ width: 640, height: 480 }),
+
+    // Code (Standard Block ohne Bunte Farben, dafür stabil)
+    CodeBlock,
+
+    // Tables
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
+  ],
+  editorProps: {
+    attributes: {
+      class: 'focus:outline-none min-h-[500px] pb-40',
+    },
+  },
+  onUpdate: ({ editor }) => {
+    emit('update:modelValue', editor.getJSON())
+  },
+})
+
+watch(() => props.modelValue, (val) => {
+  if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
+    editor.value.commands.setContent(val, false)
+  }
+})
+
+// --- ACTIONS ---
+
+const setLink = () => {
+  if (!editor.value) return
+  const previousUrl = editor.value.getAttributes('link').href
+  const url = window.prompt('URL eingeben:', previousUrl)
+  if (url === null) return
+  if (url === '') {
+    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+    return
+  }
+  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+}
+
+const addVideo = () => {
+  const url = prompt('YouTube URL eingeben:')
+  if (url && editor.value) {
+    editor.value.commands.setYoutubeVideo({ src: url })
+  }
+}
+</script>
+
+<style scoped>
+/* Toolbar & Buttons */
+.toolbar-btn {
+  @apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
+}
+.toolbar-btn.is-active {
+  @apply bg-gray-200 text-black shadow-inner;
+}
+
+.bubble-btn {
+  @apply px-2 py-1 hover:bg-gray-100 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center;
+}
+.bubble-btn.is-active {
+  @apply bg-gray-200 text-black;
+}
+
+/* EDITOR CSS RESET & STYLES */
+:deep(.prose) {
+
+  /* 1. TABLE FIX */
+  table {
+    width: 100% !important;
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 1rem 0;
+  }
+  th, td {
+    border: 1px solid #d1d5db;
+    padding: 0.5rem;
+    vertical-align: top;
+    box-sizing: border-box;
+    min-width: 1em;
+  }
+  th { background-color: #f3f4f6; font-weight: 600; text-align: left; }
+  .column-resize-handle { background-color: #3b82f6; bottom: -2px; position: absolute; right: -2px; pointer-events: none; top: 0; width: 4px; }
+
+  /* 2. TASK LIST FIX */
+  ul[data-type="taskList"] { list-style: none !important; padding: 0 !important; margin: 0 !important; }
+  li[data-type="taskItem"] { display: flex !important; flex-direction: row !important; align-items: flex-start !important; margin-bottom: 0.25rem !important; padding-left: 0 !important; }
+  li[data-type="taskItem"] > label { display: inline-flex !important; margin-right: 0.5rem !important; margin-top: 0.25rem !important; user-select: none; cursor: pointer; flex-shrink: 0; }
+  li[data-type="taskItem"] > label > input { margin: 0 !important; cursor: pointer; }
+  li[data-type="taskItem"] > div { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; }
+  li[data-type="taskItem"] div > p { margin: 0 !important; display: block !important; }
+  li[data-type="taskItem"]::marker, li[data-type="taskItem"]::before { content: none !important; display: none !important; }
+
+  /* 3. HIGHLIGHT */
+  mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
+
+  /* 4. YOUTUBE / VIDEO */
+  div[data-youtube-video] { cursor: move; padding-right: 1.5rem; }
+  iframe { border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin: 1rem 0; }
+
+  /* 5. CODE BLOCK (Standard Style - Dark Mode Look) */
+  pre {
+    background: #0d1117;
+    color: #c9d1d9;
+    font-family: 'JetBrains Mono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    overflow-x: auto;
+  }
+  code {
+    color: inherit;
+    padding: 0;
+    background: none;
+    font-size: 0.9rem;
+  }
+
+  /* Placeholder & Selection */
+  .ProseMirror-selectednode { outline: 2px solid #3b82f6; }
+  p.is-editor-empty:first-child::before { color: #9ca3af; content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }
+  img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1rem 0; }
+}
+</style>

frontend/composables/useWikiTree.ts

@@ -0,0 +1,128 @@
+export interface WikiPageItem {
+    id: string
+    parentId: string | null
+    title: string
+    isFolder: boolean
+    sortOrder: number
+    entityType?: string | null
+    children?: WikiPageItem[]
+}
+
+export const useWikiTree = () => {
+    const { $api } = useNuxtApp()
+
+    // STATE
+    const items = useState<WikiPageItem[]>('wiki-items', () => [])
+    const isLoading = useState<boolean>('wiki-loading', () => false)
+    const isSidebarOpen = useState<boolean>('wiki-sidebar-open', () => true)
+
+    // 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 (Shallow Copy um Originaldaten nicht zu mutieren)
+        rawItems.forEach(item => {
+            lookup[item.id] = { ...item, children: [] }
+        })
+
+        // Build Hierarchy
+        rawItems.forEach(item => {
+            const node = lookup[item.id]
+            if (item.parentId && lookup[item.parentId]) {
+                lookup[item.parentId].children?.push(node)
+            } else {
+                roots.push(node)
+            }
+        })
+
+        // Sort Helper
+        const sortNodes = (nodes: WikiPageItem[]) => {
+            nodes.sort((a, b) => {
+                if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
+                return a.title.localeCompare(b.title)
+            })
+            nodes.forEach(n => {
+                if (n.children?.length) sortNodes(n.children)
+            })
+        }
+
+        sortNodes(roots)
+        return roots
+    })
+
+    // 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(e) }
+        finally { isLoading.value = false }
+    }
+
+    const createItem = async (title: string, parentId: string | null, isFolder: boolean) => {
+        try {
+            const newItem = await $api('/api/wiki', { method: 'POST', body: { title, parentId, isFolder } })
+            await loadTree()
+            return newItem
+        } catch (e) { throw e }
+    }
+
+    const deleteItem = async (id: string) => {
+        try {
+            await $api(`/api/wiki/${id}`, { method: 'DELETE' })
+            await loadTree()
+            return true
+        } catch (e) { throw e }
+    }
+
+    return {
+        tree: filteredTree, // Wir geben jetzt immer den (evtl. gefilterten) Baum zurück
+        searchQuery,        // Damit die UI das Input-Feld binden kann
+        items,
+        isLoading,
+        isSidebarOpen,
+        loadTree,
+        createItem,
+        deleteItem
+    }
+}

frontend/nuxt.config.ts

@@ -24,7 +24,8 @@ export default defineNuxtConfig({
     }],
 
     build: {
-        transpile: ['@vuepic/vue-datepicker']
+        transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
+            'lowlight',]
     },
 
 
@@ -41,7 +42,8 @@ export default defineNuxtConfig({
 
     vite: {
         optimizeDeps: {
-            include: ["@editorjs/editorjs", "dayjs"],
+            include: ["@editorjs/editorjs", "dayjs",'@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
+                'lowlight',],
         },
     },
 

frontend/package.json

@@ -46,14 +46,30 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^9.11.0",
     "@sentry/integrations": "^7.114.0",
-    "@tiptap/extension-underline": "^2.1.15",
+    "@tiptap/extension-bubble-menu": "^3.17.1",
-    "@tiptap/pm": "^2.1.15",
+    "@tiptap/extension-character-count": "^3.17.1",
-    "@tiptap/starter-kit": "^2.1.15",
+    "@tiptap/extension-code-block": "^3.17.1",
-    "@tiptap/vue-3": "^2.1.15",
+    "@tiptap/extension-floating-menu": "^3.17.1",
+    "@tiptap/extension-highlight": "^3.17.1",
+    "@tiptap/extension-image": "^3.17.1",
+    "@tiptap/extension-link": "^3.17.1",
+    "@tiptap/extension-placeholder": "^3.17.1",
+    "@tiptap/extension-table": "^3.17.1",
+    "@tiptap/extension-table-cell": "^3.17.1",
+    "@tiptap/extension-table-header": "^3.17.1",
+    "@tiptap/extension-table-row": "^3.17.1",
+    "@tiptap/extension-task-item": "^3.17.1",
+    "@tiptap/extension-task-list": "^3.17.1",
+    "@tiptap/extension-typography": "^3.17.1",
+    "@tiptap/extension-youtube": "^3.17.1",
+    "@tiptap/pm": "^3.17.1",
+    "@tiptap/starter-kit": "^3.17.1",
+    "@tiptap/vue-3": "^3.17.1",
     "@vicons/ionicons5": "^0.12.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue-pdf-viewer/viewer": "^3.0.1",
     "@vuepic/vue-datepicker": "^7.4.0",
+    "@vueuse/components": "^14.1.0",
     "@zip.js/zip.js": "^2.7.32",
     "array-sort": "^1.0.0",
     "axios": "^1.6.7",

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

@@ -0,0 +1,239 @@
+<template>
+  <div class="flex h-full w-full bg-white dark:bg-gray-900 overflow-hidden relative">
+
+    <aside
+        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 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>
+
+        <div class="flex items-center gap-1">
+          <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" />
+          <USkeleton class="h-4 w-1/2" />
+        </div>
+
+        <div v-else>
+          <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">
+            <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 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-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>
+      </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>
+            <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">
+              {{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import WikiTreeItem from '~/components/wiki/TreeItem.vue'
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+import type { WikiPageItem } from '~/composables/useWikiTree'
+
+const route = useRoute()
+const router = useRouter()
+const { $api } = useNuxtApp()
+// 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)
+const isSaving = ref(false)
+const lastSaved = ref(false)
+const saveTimeout = ref<any>(null)
+const contentBuffer = ref(null)
+
+onMounted(() => loadTree())
+watch(pageId, () => {
+  if (saveTimeout.value) clearTimeout(saveTimeout.value)
+  isSaving.value = false
+  lastSaved.value = false
+})
+
+const { data: page, pending: pendingPage } = await useAsyncData(
+    () => `wiki-page-${pageId.value}`,
+    async () => {
+      if (!pageId.value) return null
+      const res = await $api<any>(`/api/wiki/${pageId.value}`)
+      contentBuffer.value = res.content
+      return res
+    }, { watch: [pageId], immediate: true }
+)
+
+// --- 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,
+  isFolderCreation: false,
+  inputValue: ''
+})
+const modalTitle = computed(() => {
+  if (modalState.type === 'delete') return 'Eintrag löschen'
+  return modalState.isFolderCreation ? 'Neuen Ordner erstellen' : 'Neue Seite erstellen'
+})
+function openWikiAction(type: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder = false) {
+  modalState.type = type
+  modalState.targetItem = contextItem
+  modalState.isFolderCreation = isFolder
+  modalState.inputValue = ''
+  isModalOpen.value = true
+}
+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)
+      if (newItem && !modalState.isFolderCreation) router.push(`/wiki/${newItem.id}`)
+    } else if (modalState.type === 'delete' && modalState.targetItem) {
+      const success = await deleteItem(modalState.targetItem.id)
+      if (success && pageId.value === modalState.targetItem.id) router.push('/wiki')
+    }
+    isModalOpen.value = false
+  } catch (e) { console.error(e) } finally { modalLoading.value = false }
+}
+
+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) }]
+]
+
+// --- EDITOR ACTIONS (Identisch wie vorher) ---
+async function saveTitle() {
+  if (!page.value || !pageId.value) return
+  isSaving.value = true
+  try {
+    await $api(`/api/wiki/${pageId.value}`, { method: 'PATCH', body: { title: page.value.title } })
+    loadTree()
+    showSavedFeedback()
+  } finally { isSaving.value = false }
+}
+function handleContentChange(newContent: any) {
+  contentBuffer.value = newContent
+  isSaving.value = true
+  lastSaved.value = false
+  if (saveTimeout.value) clearTimeout(saveTimeout.value)
+  saveTimeout.value = setTimeout(async () => {
+    if (!pageId.value) return
+    try {
+      await $api(`/api/wiki/${pageId.value}`, { method: 'PATCH', body: { content: contentBuffer.value } })
+      showSavedFeedback()
+    } catch (e) { console.error(e) } finally { isSaving.value = false }
+  }, 1000)
+}
+function showSavedFeedback() {
+  lastSaved.value = true
+  setTimeout(() => { lastSaved.value = false }, 2000)
+}
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.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; }
+</style>