From cfc666055caff3e281595b75b4eaf0f50afbefac Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Fri, 12 Jun 2026 09:43:32 +0200
Subject: [PATCH] =?UTF-8?q?Sidebar:=20Abbrechen/Reset=20f=C3=BCr=20laufend?=
 =?UTF-8?q?e=20und=20pausierte=20Generierungen=20immer=20erreichbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/TopicSidebar.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/TopicSidebar.vue b/frontend/src/components/TopicSidebar.vue
index 096992e..9411301 100644
--- a/frontend/src/components/TopicSidebar.vue
+++ b/frontend/src/components/TopicSidebar.vue
@@ -166,6 +166,9 @@ function handleDelete(format) {
     )
     if (running.length) {
       for (const g of running) emit('cancelGuide', g.id)
+    } else if (abgebrochen(format)) {
+      // Pausierter Lauf: Teilfortschritt samt Schritt-Dateien löschen (Reset)
+      emit('deleteGuide', props.latestByFormat[format].id, true)
     } else {
       emit('deleteGuide', props.latestByFormat[format].id)
     }
@@ -234,7 +237,10 @@ function confirmDeleteProject(name) {
       <div class="progress-info" v-if="activeGenerations.length">
         <div v-for="(line, i) in activeGenerations" :key="i">{{ line }}</div>
       </div>
-      <div class="format-row bausteine-row ord-bausteine">
+      <div
+        class="format-row bausteine-row ord-bausteine"
+        :class="{ 'is-active': bausteineState === 'generating' || bausteine.partial }"
+      >
         <div class="format-name bausteine-name">
           <span class="format-label">Bausteine</span>
           <span
@@ -284,7 +290,7 @@ function confirmDeleteProject(name) {
       </div>
 <!-- OnePager (unabhängig von Bausteinen) steht per CSS-order vor der Bausteine-Zeile -->
       <div v-for="f in formats" :key="f.key" :style="{ order: f.key === 'OnePager' ? 1 : 3 }">
-        <div :class="['format-row', 'fmt-' + guideStatus(f.key)]">
+        <div :class="['format-row', 'fmt-' + guideStatus(f.key), { 'fmt-paused': abgebrochen(f.key) }]">
           <button class="format-name" @click="handleFormatClick(f.key)">
             <span class="format-label">{{ f.label }}</span>
             <span
@@ -302,11 +308,12 @@ function confirmDeleteProject(name) {
               ></span>
             </span>
             <span
-              v-if="guideStatus(f.key) !== 'none'"
+              v-if="guideStatus(f.key) !== 'none' || abgebrochen(f.key)"
               class="format-x"
               :class="{ armed: pendingConfirm === 'fmt-' + f.key }"
               @click.stop="handleDelete(f.key)"
-              :title="guideStatus(f.key) === 'generating' || guideStatus(f.key) === 'queued' ? 'Abbrechen' : 'Löschen'"
+              :title="guideStatus(f.key) === 'generating' || guideStatus(f.key) === 'queued' ? 'Abbrechen'
+                : abgebrochen(f.key) ? 'Fortschritt löschen' : 'Löschen'"
             >{{ pendingConfirm === 'fmt-' + f.key ? 'Sicher?' : '×' }}</span>
           </button>
           <div class="format-actions">
@@ -730,6 +737,14 @@ function confirmDeleteProject(name) {
   display: inline;
 }
 
+/* Laufend/pausiert: × immer zeigen — Hover gibt es auf Touch nicht */
+.fmt-generating .format-x,
+.fmt-queued .format-x,
+.fmt-paused .format-x,
+.bausteine-row.is-active .format-x {
+  display: inline;
+}
+
 .format-x.armed,
 .format-error-x.armed,
 .delete-topic.armed {