update

frontend/src/components/TopicSidebar.vue

@@ -11,7 +11,16 @@ const props = defineProps({
   pinned: { type: Boolean, default: true },
 })
 
-const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine', 'togglePin', 'sidebarLeave'])
+const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine', 'addBaustein', 'togglePin', 'sidebarLeave'])
+
+const quickBausteinTitle = ref('')
+
+function submitQuickAdd() {
+  const title = quickBausteinTitle.value.trim()
+  if (!title) return
+  emit('addBaustein', title)
+  quickBausteinTitle.value = ''
+}
 
 const formats = [
   { key: 'OnePager', label: 'OnePager' },
@@ -137,18 +146,6 @@ function confirmDeleteTopic(topic) {
       />
       <button @click="submit" :disabled="!newTopic.trim()">+</button>
     </div>
-    <ul class="topic-list">
-      <li
-        v-for="t in topics"
-        :key="t"
-        :class="{ active: t === selectedTopic }"
-        @click="emit('select', t)"
-      >
-        <span>{{ t }}</span>
-        <button class="delete-topic" @click.stop="confirmDeleteTopic(t)" title="Löschen">&times;</button>
-      </li>
-    </ul>
-
     <div class="format-section" v-if="selectedTopic">
       <div class="progress-info" v-if="activeGenerations.length">
         <div v-for="(line, i) in activeGenerations" :key="i">{{ line }}</div>
@@ -201,8 +198,28 @@ function confirmDeleteTopic(topic) {
           :class="{ active: bausteineActive }"
           @click="emit('showBausteine')"
         >Bausteine</button>
+        <div class="quick-add">
+          <input
+            v-model="quickBausteinTitle"
+            placeholder="Neuer Baustein…"
+            @keyup.enter="submitQuickAdd"
+          />
+          <button @click="submitQuickAdd" :disabled="!quickBausteinTitle.trim()">+</button>
+        </div>
       </div>
     </div>
+
+    <ul class="topic-list">
+      <li
+        v-for="t in topics"
+        :key="t"
+        :class="{ active: t === selectedTopic }"
+        @click="emit('select', t)"
+      >
+        <span>{{ t }}</span>
+        <button class="delete-topic" @click.stop="confirmDeleteTopic(t)" title="Löschen">&times;</button>
+      </li>
+    </ul>
   </aside>
 </template>
 
@@ -269,9 +286,11 @@ function confirmDeleteTopic(topic) {
 
 .topic-list {
   list-style: none;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 0.5rem 0;
-  border-bottom: 1px solid #e2e5e9;
+  border-top: 1px solid #e2e5e9;
 }
 
 .topic-list li {
@@ -312,7 +331,8 @@ function confirmDeleteTopic(topic) {
 
 /* Format section */
 .format-section {
-  flex: 1;
+  flex-shrink: 0;
+  max-height: 60vh;
   overflow-y: auto;
   padding: 0.5rem 0;
 }
@@ -528,4 +548,39 @@ function confirmDeleteTopic(topic) {
   border-color: #6366f1;
   color: white;
 }
+
+.quick-add {
+  display: flex;
+  gap: 4px;
+  margin-top: 0.5rem;
+}
+
+.quick-add input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid #d8dde3;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  outline: none;
+}
+
+.quick-add input:focus {
+  border-color: #6366f1;
+}
+
+.quick-add button {
+  padding: 6px 10px;
+  border: none;
+  background: #6366f1;
+  color: white;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.quick-add button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
 </style>