update

frontend/src/components/TopicDetail.vue

@@ -1,37 +1,7 @@
 <script setup>
 import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { marked } from 'marked'
-import { markedHighlight } from 'marked-highlight'
-import hljs from 'highlight.js'
-import 'highlight.js/styles/github-dark.css'
-import DOMPurify from 'dompurify'
 import { fetchGuideContent, chatGuide, fetchProgress, setProgress } from '../api.js'
-
-marked.use(markedHighlight({
-  langPrefix: 'hljs language-',
-  highlight(code, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      return hljs.highlight(code, { language: lang }).value
-    }
-    return hljs.highlightAuto(code).value
-  },
-}))
-marked.setOptions({ breaks: true, gfm: true })
-
-// Rohes HTML im Markdown (z. B. <p>, <img> ohne Backticks aus Agenten-Output)
-// als Text anzeigen statt rendern — sonst verschluckt der Browser den Inhalt.
-marked.use({
-  renderer: {
-    html(token) {
-      const text = typeof token === 'string' ? token : token.text
-      return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-    },
-  },
-})
-
-function renderMarkdown(text) {
-  return DOMPurify.sanitize(marked.parse(text || ''))
-}
+import { renderMarkdown } from '../markdown.js'
 
 const props = defineProps({
   previewGuide: { type: Object, default: null },
@@ -39,7 +9,7 @@ const props = defineProps({
   provider: { type: String, default: 'claude' },
 })
 
-const emit = defineEmits(['progressChanged'])
+const emit = defineEmits(['progressChanged', 'openElements'])
 
 const isOnePager = computed(() => props.previewGuide?.format === 'OnePager')
 
@@ -247,6 +217,7 @@ async function send() {
     </div>
 
     <button v-if="previewGuide && !chatOpen" class="chat-fab" title="Fragen zum Guide" @click="openChat">💬</button>
+    <button v-if="previewGuide && !chatOpen" class="chat-fab elements-fab" title="Elemente öffnen" @click="emit('openElements')">🗂</button>
 
     <div v-if="previewGuide && chatOpen" ref="panelEl" class="chat-panel">
       <header class="chat-header">
@@ -632,6 +603,10 @@ async function send() {
   background: var(--accent-hover);
 }
 
+.elements-fab {
+  right: 5.25rem;
+}
+
 .chat-panel {
   position: fixed;
   right: 1.5rem;