update

frontend/src/components/FeatureKarte.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { marked } from 'marked'
 import { featureSpeichern } from '../api.js'
 
@@ -8,7 +8,7 @@ const props = defineProps({
   feature: { type: Object, required: true },
   vollmodus: { type: Boolean, default: false }, // frisch angelegt: direkt im Vollmodus öffnen
 })
-const emit = defineEmits(['aktualisiert', 'kontextmenue'])
+const emit = defineEmits(['aktualisiert', 'entfernen'])
 
 function kopie(sekt) {
   return {
@@ -71,7 +71,6 @@ function abbrechen() {
 async function fertig() {
   const a = aktiv.value
   if (!a) return
-  blurZeit = Date.now() // der Klick, der das Feld schloss, soll die Ansicht nicht schließen
   aktiv.value = null
   const neu = entwurf.value.trim()
 
@@ -99,14 +98,56 @@ function abbrechenLeer(a) {
   if (!a.original && a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
 }
 
-function neueFunktion() {
-  s.value.funktionen.unshift({ text: '', ziel: '', regeln: '', testen: '' })
-  starte('funktion', 0)
+// Kontextmenü: RMB auf eine Funktion (entfernen) oder auf die Karte (erstellen/Feature entfernen)
+const kontextMenue = ref(null) // {funktion: index|null, x, y}
+
+function oeffneKontextMenue(e, i = null) {
+  kontextMenue.value = { funktion: i, x: e.clientX, y: e.clientY }
 }
 
-function entferneFunktion(i) {
-  s.value.funktionen.splice(i, 1)
-  speichern()
+function schliesseKontextMenue() {
+  kontextMenue.value = null
+}
+
+onMounted(() => window.addEventListener('click', schliesseKontextMenue))
+onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
+
+// Modal für Funktion erstellen und entfernen
+const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', i}
+const modalName = ref('')
+const modalFeld = ref(null)
+
+async function menueFunktionErstellen() {
+  kontextMenue.value = null
+  modal.value = { art: 'erstellen' }
+  modalName.value = ''
+  await nextTick()
+  modalFeld.value?.focus()
+}
+
+function menueFunktionEntfernen() {
+  const i = kontextMenue.value.funktion
+  kontextMenue.value = null
+  modal.value = { art: 'entfernen', i }
+}
+
+function menueFeatureEntfernen() {
+  kontextMenue.value = null
+  emit('entfernen')
+}
+
+async function erstellenBestaetigen() {
+  const name = modalName.value.trim()
+  if (!name) return
+  s.value.funktionen.push({ text: name, ziel: '', regeln: '', testen: '' })
+  modal.value = null
+  await speichern()
+}
+
+async function entfernenBestaetigen() {
+  s.value.funktionen.splice(modal.value.i, 1)
+  modal.value = null
+  await speichern()
 }
 
 function wechsleArt() {
@@ -157,20 +198,10 @@ function punkte(text) {
   return text.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
 }
 
-// Standardansicht ist reine Übersicht: Klick öffnet die ausführliche Ansicht,
-// nur dort wird bearbeitet; Klick auf freie Fläche schließt sie wieder —
-// außer der Klick hat gerade eine Bearbeitung beendet (Blur kommt vor dem Klick)
-let blurZeit = 0
-
-function wechsleAnsicht(e) {
-  if (gross.value) {
-    if (e.target.closest('button, input, textarea, .klickbar, h3, .hinweis')) return
-    if (Date.now() - blurZeit < 300) return
-    gross.value = false
-  } else {
-    if (e.target.closest('button, input, textarea')) return
-    gross.value = true
-  }
+// Kompaktmodus zum Lesen, Vollmodus zum Anpassen — MMB auf die Karte
+// oder das Augen-Icon schaltet um
+function wechsleAnsicht() {
+  gross.value = !gross.value
 }
 
 onMounted(() => {
@@ -182,8 +213,9 @@ onMounted(() => {
   <article
     class="karte"
     :class="[s.art, { gross }]"
-    @click="wechsleAnsicht"
-    @contextmenu.prevent.stop="emit('kontextmenue', $event)"
+    @mousedown.middle.prevent
+    @auxclick.middle.prevent="wechsleAnsicht"
+    @contextmenu.prevent.stop="oeffneKontextMenue($event)"
   >
     <header>
       <input
@@ -204,6 +236,11 @@ onMounted(() => {
         @click="wechsleArt"
       >{{ s.art }}</button>
       <span v-else class="badge" :class="s.art === 'kern' ? 'blau' : 'gruen'">{{ s.art }}</span>
+      <button
+        class="icon-knopf"
+        :title="gross ? 'Kompaktmodus' : 'Vollmodus'"
+        @click="wechsleAnsicht"
+      >👁</button>
     </header>
 
     <section :class="{ leer: !s.ziel && !istAktiv('ziel') }">
@@ -239,13 +276,13 @@ onMounted(() => {
 
     <section :class="{ leer: !s.funktionen.length }">
       <p class="gruppe">Funktionen</p>
-      <button v-if="gross" class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
       <div class="liste">
       <div
         v-for="(f, i) in s.funktionen"
         :key="i"
         class="funktion"
         :class="{ offen: aktiv && aktiv.i === i }"
+        @contextmenu.prevent.stop="oeffneKontextMenue($event, i)"
       >
         <div class="zeile kopf">
           <span class="pfeil">▸</span>
@@ -258,7 +295,6 @@ onMounted(() => {
             @keydown.esc="abbrechen"
           >
           <div v-else class="funktionstitel klickbar" @click="starte('funktion', i)">{{ f.text }}</div>
-          <button v-if="gross" class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
         </div>
 
         <!-- Regeln und Flow nur beim Hover über die Funktion (oder während der Bearbeitung) -->
@@ -320,11 +356,49 @@ onMounted(() => {
     </section>
 
     <p v-if="meldung" class="meldung">{{ meldung }}</p>
+
+    <div
+      v-if="kontextMenue"
+      class="kontextmenue"
+      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
+    >
+      <button v-if="kontextMenue.funktion !== null" @click="menueFunktionEntfernen">✕ Funktion entfernen</button>
+      <template v-else>
+        <button v-if="gross" @click="menueFunktionErstellen">+ Funktion erstellen</button>
+        <button @click="menueFeatureEntfernen">✕ Feature entfernen</button>
+      </template>
+    </div>
+
+    <div v-if="modal" class="schleier" @click.self="modal = null">
+      <div class="modal karte">
+        <template v-if="modal.art === 'erstellen'">
+          <h2>Funktion erstellen</h2>
+          <input
+            ref="modalFeld"
+            v-model="modalName"
+            placeholder="Funktionstitel"
+            @keyup.enter="erstellenBestaetigen"
+            @keydown.esc="modal = null"
+          >
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
+          </footer>
+        </template>
+        <template v-else>
+          <h2>Funktion entfernen</h2>
+          <p class="frage">„{{ s.funktionen[modal.i].text }}“ entfernen?</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
+          </footer>
+        </template>
+      </div>
+    </div>
   </article>
 </template>
 
 <style scoped>
-.karte { cursor: pointer; }
 .karte.kern { border-color: var(--akzent); }
 .karte.optional { border-color: var(--gruen); }
 
@@ -356,7 +430,7 @@ header {
   padding-bottom: 0.55rem;
   border-bottom: 1px solid var(--rand);
 }
-h3 { margin: 0; font-size: 1rem; cursor: pointer; flex: 1; }
+h3 { margin: 0; font-size: 1rem; flex: 1; }
 /* Im Bearbeitungsmodus zeigt Hover die klickbare Titelfläche */
 .karte.gross h3 {
   padding: 0.1rem 0.3rem;
@@ -392,7 +466,7 @@ section.leer { display: none; }
   padding: 0.1rem 0.3rem;
   margin: 0.1rem 0 0.1rem -0.3rem;
   border-radius: 4px;
-  cursor: pointer;
+  cursor: text;
 }
 .hinweis:hover { background: var(--code-bg); }
 .hinzu {
@@ -470,7 +544,10 @@ textarea {
   font-size: 0.85rem;
   line-height: 1.5;
 }
-.klickbar { cursor: pointer; user-select: none; }
+/* Karte: MMB schaltet den Modus um; Texte sind nur im Vollmodus bearbeitbar */
+.karte { cursor: pointer; }
+.klickbar { user-select: none; }
+.karte.gross .klickbar, .karte.gross h3 { cursor: text; }
 .inhalt.klickbar { border-radius: 4px; }
 .inhalt.klickbar:hover { background: var(--code-bg); }
 h3, .hinweis { user-select: none; }