update

frontend/src/App.vue

@@ -3,6 +3,8 @@ import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { fetchGuides, fetchTopics, createTopic as apiCreateTopic, deleteTopic as apiDeleteTopic, createGuide as apiCreate, deleteGuide, cancelGuide as apiCancel, fetchBausteineStatus, fetchActiveBausteine, createBausteine as apiCreateBausteine, cancelBausteine as apiCancelBausteine, deleteBausteine as apiDeleteBausteine, fetchProjects, deleteProject as apiDeleteProject, fetchProviders, fetchStats, fetchTopicFortschritt } from './api.js'
 import TopicSidebar from './components/TopicSidebar.vue'
 import TopicDetail from './components/TopicDetail.vue'
+import ElementsSidebar from './components/ElementsSidebar.vue'
+import ElementsOverview from './components/ElementsOverview.vue'
 
 const guides = ref([])
 const projects = ref([])
@@ -23,6 +25,11 @@ const provider = ref(localStorage.getItem('provider') || 'claude')
 const providers = ref([])
 const stats = ref(null)
 const fortschritt = ref({})
+const elementsOpen = ref(false)      // rechte Sidebar
+const elementsView = ref(false)      // Übersicht im Hauptbereich
+const elementsVersion = ref(0)       // Erhöhung = Übersicht neu laden
+const elementOpenId = ref(null)      // Element aus Übersicht in Sidebar öffnen
+const elementOpenTick = ref(0)
 
 async function loadStats() {
   try {
@@ -182,6 +189,9 @@ function selectTopic(topic) {
   selectedTopic.value = topic
   previewGuide.value = null
   sidebarSticky.value = false
+  elementsOpen.value = false
+  elementsView.value = false
+  elementOpenId.value = null
   localStorage.setItem('lastTopic', topic)
   loadBausteine()
   nextTick(autoPreview)
@@ -243,6 +253,19 @@ async function handleDeleteProject(name) {
 
 function handlePreview(guide) {
   previewGuide.value = guide
+  elementsView.value = false
+}
+
+function handleOpenElements() {
+  if (!selectedTopic.value) return
+  elementsView.value = true
+  elementsOpen.value = true
+}
+
+function handleOpenElementDetail(el) {
+  elementOpenId.value = el.id
+  elementOpenTick.value++
+  elementsOpen.value = true
 }
 
 async function handleDeleteGuide(guideId, slots = false) {
@@ -353,19 +376,36 @@ onUnmounted(() => {
       @deleteGuide="handleDeleteGuide"
       @dismissError="handleDismissError"
       @preview="handlePreview"
+      @openElements="handleOpenElements"
       @togglePin="toggleSidebarPin"
       @sidebarLeave="onSidebarLeave"
     />
+    <ElementsOverview
+      v-if="selectedTopic && elementsView"
+      :topic="selectedTopic"
+      :version="elementsVersion"
+      @open="handleOpenElementDetail"
+    />
     <TopicDetail
-      v-if="selectedTopic"
+      v-else-if="selectedTopic"
       :previewGuide="previewGuide"
       :dark="darkMode"
       :provider="provider"
       @progressChanged="loadStats(); loadBausteine()"
+      @openElements="elementsOpen = true"
     />
     <div v-else class="empty-main">
       <p>Thema in der Sidebar anlegen oder auswählen.</p>
     </div>
+    <ElementsSidebar
+      v-if="elementsOpen && selectedTopic"
+      :topic="selectedTopic"
+      :provider="provider"
+      :openId="elementOpenId"
+      :openTick="elementOpenTick"
+      @close="elementsOpen = false"
+      @changed="elementsVersion++"
+    />
   </div>
 </template>