update

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { fetchProjekte } from './api.js'
 import SeitenLeiste from './components/SeitenLeiste.vue'
 import FeatureListe from './components/FeatureListe.vue'
@@ -21,13 +21,25 @@ function umbenannt(alt, neu) {
   ladeProjekte()
 }
 
+// Zuletzt aktives Projekt überlebt das Neuladen
+watch(aktivesProjekt, name => {
+  if (name) localStorage.setItem('aktivesProjekt', name)
+  else localStorage.removeItem('aktivesProjekt')
+})
+
 function wechsleDarkMode() {
   dunkel.value = !dunkel.value
   document.documentElement.classList.toggle('dark', dunkel.value)
   localStorage.setItem('darkMode', dunkel.value)
 }
 
-onMounted(ladeProjekte)
+onMounted(async () => {
+  await ladeProjekte()
+  const gemerkt = localStorage.getItem('aktivesProjekt')
+  if (gemerkt && projekte.value.some(p => p.name === gemerkt)) {
+    aktivesProjekt.value = gemerkt
+  }
+})
 </script>
 
 <template>

frontend/src/assets/base.css

@@ -88,6 +88,50 @@ input, textarea {
 
 .meldung { color: var(--rot); font-size: 0.85rem; }
 
+.kontextmenue {
+  position: fixed;
+  z-index: 10;
+  background: var(--panel);
+  border: 1px solid var(--rand);
+  border-radius: 6px;
+  padding: 0.2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.kontextmenue button {
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  text-align: left;
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+}
+.kontextmenue button:hover { background: var(--bg); }
+
+.schleier {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal {
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  cursor: default;
+}
+.modal h2 { margin: 0; font-size: 1rem; }
+.modal .frage { margin: 0; }
+.modal footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
 .badge {
   font-size: 0.72rem;
   font-weight: 600;

frontend/src/components/FeatureKarte.vue

@@ -1,22 +1,23 @@
 <script setup>
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { marked } from 'marked'
-import { featureSpeichern, featureLoeschen } from '../api.js'
+import { featureSpeichern } from '../api.js'
 
 const props = defineProps({
   projekt: { type: String, required: true },
   feature: { type: Object, required: true },
-  titelBearbeiten: { type: Boolean, default: false }, // frisch angelegt: Titel direkt öffnen
+  vollmodus: { type: Boolean, default: false }, // frisch angelegt: direkt im Vollmodus öffnen
 })
-const emit = defineEmits(['aktualisiert', 'geloescht'])
+const emit = defineEmits(['aktualisiert', 'kontextmenue'])
 
 function kopie(sekt) {
   return {
     titel: sekt.titel,
     art: sekt.art,
     ziel: sekt.ziel,
+    regeln: sekt.regeln,
     funktionen: sekt.funktionen
-      .map(f => ({ text: f.text, regeln: [...f.regeln], flow: f.flow }))
+      .map(f => ({ text: f.text, ziel: f.ziel, regeln: f.regeln, testen: f.testen }))
       .sort((a, b) => a.text.localeCompare(b.text, 'de', { sensitivity: 'base' })),
     sonstiges: sekt.sonstiges, // nicht angezeigt, aber beim Speichern erhalten
   }
@@ -26,6 +27,7 @@ const s = ref(kopie(props.feature.sektionen))
 watch(() => props.feature, f => { s.value = kopie(f.sektionen) })
 
 const aktiv = ref(null) // {feld, i, j, original} — das eine gerade offene Eingabefeld
+const gross = ref(false) // ausführliche Ansicht
 const entwurf = ref('')
 const meldung = ref('')
 const feldRef = ref(null)
@@ -40,13 +42,14 @@ function istAktiv(feld, i, j) {
 
 function wert(feld, i, j) {
   if (feld === 'titel') return s.value.titel
-  if (feld === 'ziel') return s.value.ziel
+  if (feld === 'ziel') return i === undefined ? s.value.ziel : s.value.funktionen[i].ziel
   if (feld === 'funktion') return s.value.funktionen[i].text
-  if (feld === 'flow') return s.value.funktionen[i].flow
-  return s.value.funktionen[i].regeln[j]
+  if (feld === 'testen') return s.value.funktionen[i].testen
+  return i === undefined ? s.value.regeln : s.value.funktionen[i].regeln
 }
 
 async function starte(feld, i, j) {
+  if (!gross.value) return // Bearbeiten nur in der ausführlichen Ansicht
   const original = wert(feld, i, j)
   aktiv.value = { feld, i, j, original }
   entwurf.value = original
@@ -59,16 +62,16 @@ async function starte(feld, i, j) {
 function abbrechen() {
   const a = aktiv.value
   aktiv.value = null
-  // frisch angelegte, noch leere Einträge wieder entfernen
-  if (a && !a.original) {
-    if (a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
-    if (a.feld === 'regel') s.value.funktionen[a.i].regeln.splice(a.j, 1)
+  // frisch angelegte, noch leere Funktion wieder entfernen
+  if (a && !a.original && a.feld === 'funktion') {
+    s.value.funktionen.splice(a.i, 1)
   }
 }
 
 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()
 
@@ -78,45 +81,34 @@ async function fertig() {
     if (!neu) return // Titel ist Pflicht — leere Eingabe verwerfen
     s.value.titel = neu
   } else if (a.feld === 'ziel') {
-    s.value.ziel = neu
+    if (a.i === undefined) s.value.ziel = neu
+    else s.value.funktionen[a.i].ziel = neu
   } else if (a.feld === 'funktion') {
     if (!neu) s.value.funktionen.splice(a.i, 1) // leeren = löschen
     else s.value.funktionen[a.i].text = neu
-  } else if (a.feld === 'flow') {
-    s.value.funktionen[a.i].flow = neu
-  } else if (a.feld === 'regel') {
-    if (!neu) s.value.funktionen[a.i].regeln.splice(a.j, 1)
-    else s.value.funktionen[a.i].regeln[a.j] = neu
+  } else if (a.feld === 'testen') {
+    s.value.funktionen[a.i].testen = neu
+  } else if (a.feld === 'regeln') {
+    if (a.i === undefined) s.value.regeln = neu
+    else s.value.funktionen[a.i].regeln = neu
   }
   await speichern()
 }
 
 function abbrechenLeer(a) {
-  if (a.original) return
-  if (a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
-  if (a.feld === 'regel') s.value.funktionen[a.i].regeln.splice(a.j, 1)
+  if (!a.original && a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
 }
 
 function neueFunktion() {
-  s.value.funktionen.unshift({ text: '', regeln: [], flow: '' })
+  s.value.funktionen.unshift({ text: '', ziel: '', regeln: '', testen: '' })
   starte('funktion', 0)
 }
 
-function neueRegel(i) {
-  s.value.funktionen[i].regeln.push('')
-  starte('regel', i, s.value.funktionen[i].regeln.length - 1)
-}
-
 function entferneFunktion(i) {
   s.value.funktionen.splice(i, 1)
   speichern()
 }
 
-function entferneRegel(i, j) {
-  s.value.funktionen[i].regeln.splice(j, 1)
-  speichern()
-}
-
 function wechsleArt() {
   s.value.art = s.value.art === 'kern' ? 'optional' : 'kern'
   speichern()
@@ -131,10 +123,13 @@ function baueRoh() {
     `<!-- art -->\n${s.value.art}`,
     `<!-- ziel -->\n${s.value.ziel}`,
   ]
+  if (s.value.regeln) teile.push(`<!-- regeln -->\n${s.value.regeln}`)
   const funktionen = s.value.funktionen
     .map(f => {
-      const bloecke = [`<!-- funktion -->\n${f.text}`, ...f.regeln.map(r => `<!-- regel -->\n${r}`)]
-      if (f.flow) bloecke.push(`<!-- flow -->\n${f.flow}`)
+      const bloecke = [`<!-- funktion -->\n${f.text}`]
+      if (f.ziel) bloecke.push(`<!-- ziel -->\n${f.ziel}`)
+      if (f.regeln) bloecke.push(`<!-- regeln -->\n${f.regeln}`)
+      if (f.testen) bloecke.push(`<!-- testen -->\n${f.testen}`)
       return bloecke.join('\n')
     })
     .join('\n')
@@ -153,42 +148,33 @@ async function speichern() {
   }
 }
 
-const loeschBestaetigung = ref(false)
-
-async function loeschen() {
-  // Erster Klick: Icon wird zum Bestätigungs-Icon, zweiter Klick löscht
-  if (!loeschBestaetigung.value) {
-    loeschBestaetigung.value = true
-    return
-  }
-  loeschBestaetigung.value = false
-  try {
-    await featureLoeschen(props.projekt, props.feature.id)
-    emit('geloescht')
-  } catch (e) {
-    meldung.value = e.message
-  }
-}
-
 function zeilen(text) {
   return Math.max(2, text.split('\n').length)
 }
 
-// Flow-Text („- Schritt“ je Zeile) für die nummerierte Anzeige zerlegen
-function flowSchritte(flow) {
-  return flow.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
+// Blocktext („- Eintrag“ je Zeile) für die Listen-Anzeige zerlegen
+function punkte(text) {
+  return text.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
 }
 
-// Ausführliche Ansicht: Klick auf freie Kartenfläche schaltet um
-const gross = ref(false)
+// 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 (e.target.closest('button, input, textarea, .klickbar, h3')) return
-  gross.value = !gross.value
+  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
+  }
 }
 
 onMounted(() => {
-  if (props.titelBearbeiten) starte('titel')
+  if (props.vollmodus) gross.value = true
 })
 </script>
 
@@ -197,7 +183,7 @@ onMounted(() => {
     class="karte"
     :class="[s.art, { gross }]"
     @click="wechsleAnsicht"
-    @mouseleave="loeschBestaetigung = false"
+    @contextmenu.prevent.stop="emit('kontextmenue', $event)"
   >
     <header>
       <input
@@ -209,19 +195,15 @@ onMounted(() => {
         @keyup.enter="$event.target.blur()"
         @keydown.esc="abbrechen"
       >
-      <h3 v-else :title="'Klicken zum Bearbeiten'" @click="starte('titel')">{{ s.titel }}</h3>
+      <h3 v-else :title="gross ? 'Klicken zum Bearbeiten' : null" @click="starte('titel')">{{ s.titel }}</h3>
       <button
+        v-if="gross"
         class="badge"
         :class="s.art === 'kern' ? 'blau' : 'gruen'"
         title="Klicken zum Umschalten"
         @click="wechsleArt"
       >{{ s.art }}</button>
-      <button
-        class="icon-knopf rot werkzeug"
-        :class="{ bestaetigen: loeschBestaetigung }"
-        :title="loeschBestaetigung ? 'Wirklich löschen?' : 'Feature löschen'"
-        @click="loeschen"
-      >{{ loeschBestaetigung ? '✓' : '✕' }}</button>
+      <span v-else class="badge" :class="s.art === 'kern' ? 'blau' : 'gruen'">{{ s.art }}</span>
     </header>
 
     <section :class="{ leer: !s.ziel && !istAktiv('ziel') }">
@@ -235,12 +217,29 @@ onMounted(() => {
         @keydown.esc="abbrechen"
       />
       <div v-else-if="s.ziel" class="inhalt klickbar" v-html="md(s.ziel)" @click="starte('ziel')" />
-      <p v-else class="hinweis" @click="starte('ziel')">Ziel ergänzen…</p>
+      <p v-else-if="gross" class="hinweis" @click="starte('ziel')">Ziel ergänzen…</p>
+    </section>
+
+    <!-- Karten-Regeln nur in der ausführlichen Ansicht -->
+    <section v-if="gross" :class="{ leer: !s.regeln && !istAktiv('regeln') }">
+      <p class="gruppe">Regeln</p>
+      <textarea
+        v-if="istAktiv('regeln')"
+        ref="feldRef"
+        v-model="entwurf"
+        :rows="zeilen(entwurf)"
+        @blur="fertig"
+        @keydown.esc="abbrechen"
+      />
+      <div v-else-if="s.regeln" class="klickbar" @click="starte('regeln')">
+        <div v-for="(r, k) in punkte(s.regeln)" :key="k" class="regel">{{ r }}</div>
+      </div>
+      <p v-else-if="gross" class="hinweis" @click="starte('regeln')">Regeln ergänzen…</p>
     </section>
 
     <section :class="{ leer: !s.funktionen.length }">
       <p class="gruppe">Funktionen</p>
-      <button class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
+      <button v-if="gross" class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
       <div class="liste">
       <div
         v-for="(f, i) in s.funktionen"
@@ -259,44 +258,62 @@ onMounted(() => {
             @keydown.esc="abbrechen"
           >
           <div v-else class="funktionstitel klickbar" @click="starte('funktion', i)">{{ f.text }}</div>
-          <button class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
+          <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) -->
         <div class="details">
-          <!-- Regeln als Punktliste -->
-          <div v-if="f.regeln.length" class="regeln">
-            <div v-for="(r, j) in f.regeln" :key="j" class="zeile">
-              <textarea
-                v-if="istAktiv('regel', i, j)"
-                ref="feldRef"
-                v-model="entwurf"
-                :rows="zeilen(entwurf)"
-                @blur="fertig"
-                @keydown.esc="abbrechen"
-              />
-              <div v-else class="regel klickbar" @click="starte('regel', i, j)">{{ r }}</div>
-              <button class="icon-knopf rot" title="Regel entfernen" @click="entferneRegel(i, j)">✕</button>
+          <!-- Ziel der Funktion -->
+          <div v-if="istAktiv('ziel', i) || f.ziel" class="block">
+            <p class="mini">Ziel</p>
+            <textarea
+              v-if="istAktiv('ziel', i)"
+              ref="feldRef"
+              v-model="entwurf"
+              :rows="zeilen(entwurf)"
+              @blur="fertig"
+              @keydown.esc="abbrechen"
+            />
+            <div v-else class="inhalt klickbar" v-html="md(f.ziel)" @click="starte('ziel', i)" />
+          </div>
+          <button v-if="!f.ziel && !istAktiv('ziel', i)" class="hinzu" @click="starte('ziel', i)">+ Ziel</button>
+
+          <!-- Regeln als Punktliste, ein Block je Funktion -->
+          <div v-if="istAktiv('regeln', i) || f.regeln" class="block">
+            <p class="mini">Regeln</p>
+            <textarea
+              v-if="istAktiv('regeln', i)"
+              ref="feldRef"
+              v-model="entwurf"
+              :rows="zeilen(entwurf)"
+              @blur="fertig"
+              @keydown.esc="abbrechen"
+            />
+            <div v-else class="klickbar" @click="starte('regeln', i)">
+              <div v-for="(r, k) in punkte(f.regeln)" :key="k" class="regel">{{ r }}</div>
             </div>
           </div>
-          <button class="hinzu" @click="neueRegel(i)">+ Regel</button>
+          <button v-if="!f.regeln && !istAktiv('regeln', i)" class="hinzu" @click="starte('regeln', i)">+ Regeln</button>
 
-          <!-- Flow als nummerierte Schritte -->
-          <textarea
-            v-if="istAktiv('flow', i)"
-            ref="feldRef"
-            v-model="entwurf"
-            :rows="zeilen(entwurf)"
-            @blur="fertig"
-            @keydown.esc="abbrechen"
-          />
-          <div v-else-if="f.flow" class="flow klickbar" @click="starte('flow', i)">
-            <div v-for="(schritt, k) in flowSchritte(f.flow)" :key="k" class="schritt">
-              <span class="nr">{{ k + 1 }}.</span>{{ schritt }}
+          <!-- Testen als nummerierte Schritte -->
+          <div v-if="istAktiv('testen', i) || f.testen" class="block">
+            <p class="mini">Testen</p>
+            <textarea
+              v-if="istAktiv('testen', i)"
+              ref="feldRef"
+              v-model="entwurf"
+              :rows="zeilen(entwurf)"
+              @blur="fertig"
+              @keydown.esc="abbrechen"
+            />
+            <div v-else class="klickbar" @click="starte('testen', i)">
+              <div v-for="(schritt, k) in punkte(f.testen)" :key="k" class="schritt">
+                <span class="nr">{{ k + 1 }}.</span>{{ schritt }}
+              </div>
             </div>
           </div>
 
-          <button v-if="!f.flow && !istAktiv('flow', i)" class="hinzu" @click="starte('flow', i)">+ Flow</button>
+          <button v-if="!f.testen && !istAktiv('testen', i)" class="hinzu" @click="starte('testen', i)">+ Testen</button>
         </div>
       </div>
       </div>
@@ -314,7 +331,7 @@ onMounted(() => {
 /* Ausführliche Ansicht: volle Breite, Funktionen in Spalten, alle Details offen.
    Jede Funktion als eigene Box, Zufüge-Knöpfe nur beim Hover über die Box. */
 .karte.gross { column-span: all; display: block; }
-.karte.gross .liste { columns: 2; column-gap: 1.2rem; }
+.karte.gross .liste { columns: 320px; column-gap: 1.2rem; }
 .karte.gross section.leer { display: block; }
 .karte.gross .funktion {
   break-inside: avoid;
@@ -331,9 +348,6 @@ onMounted(() => {
   margin: 0.1rem 0 0;
   padding-left: 0.2rem;
 }
-.karte.gross .details .hinzu { display: none; }
-.karte.gross .funktion:hover .details .hinzu { display: block; }
-.icon-knopf.bestaetigen { color: var(--rot); }
 
 header {
   display: flex;
@@ -343,6 +357,13 @@ header {
   border-bottom: 1px solid var(--rand);
 }
 h3 { margin: 0; font-size: 1rem; cursor: pointer; flex: 1; }
+/* Im Bearbeitungsmodus zeigt Hover die klickbare Titelfläche */
+.karte.gross h3 {
+  padding: 0.1rem 0.3rem;
+  margin-left: -0.3rem;
+  border-radius: 4px;
+}
+.karte.gross h3:hover { background: var(--code-bg); }
 .titel-feld { flex: 1; font-weight: 600; padding: 0.1rem 0.4rem; }
 .badge { cursor: pointer; }
 
@@ -357,9 +378,8 @@ section + section { border-top: 1px solid var(--rand); }
   margin: 0 0 0.15rem;
 }
 
-/* Leere Sektionen und Werkzeuge erscheinen erst beim Hover über die Karte */
+/* Leere Sektionen nur in der ausführlichen Ansicht */
 section.leer { display: none; }
-.karte:hover section.leer { display: block; }
 .werkzeug { opacity: 0; transition: opacity 0.1s; }
 .karte:hover .werkzeug, .werkzeug:focus { opacity: 1; }
 /* „+ Funktion" belegt ohne Hover auch keinen Platz */
@@ -369,9 +389,12 @@ section.leer { display: none; }
 .hinweis {
   color: var(--dezent);
   font-size: 0.85rem;
-  margin: 0.1rem 0;
+  padding: 0.1rem 0.3rem;
+  margin: 0.1rem 0 0.1rem -0.3rem;
+  border-radius: 4px;
   cursor: pointer;
 }
+.hinweis:hover { background: var(--code-bg); }
 .hinzu {
   border: none;
   background: none;
@@ -391,38 +414,35 @@ section.leer { display: none; }
 .zeile .icon-knopf { font-size: 0.8rem; opacity: 0; }
 .zeile:hover .icon-knopf { opacity: 1; }
 
-/* Funktionsliste: Zeilen mit Aufklapp-Pfeil */
+/* Funktionsliste */
 .zeile.kopf { padding: 0.15rem 0.2rem; border-radius: 4px; }
-.zeile.kopf:hover { background: var(--code-bg); }
+.karte.gross .zeile.kopf:hover { background: var(--code-bg); }
 .funktionstitel { flex: 1; }
-.pfeil {
-  color: var(--dezent);
-  font-size: 0.75rem;
-  display: inline-block;
-  transition: transform 0.12s;
+.pfeil { color: var(--dezent); font-size: 0.75rem; }
+
+/* Regeln und Flow nur in der ausführlichen Ansicht */
+.details { display: none; font-size: 0.9rem; }
+
+/* Regeln (Punktliste) und Flow (nummerierte Schritte) als getönte Blöcke */
+.block {
+  background: var(--code-bg);
+  border-radius: 6px;
+  padding: 0.3rem 0.55rem 0.35rem;
+  margin: 0.3rem 0 0.1rem;
 }
-.funktion:hover .pfeil, .funktion.offen .pfeil {
-  transform: rotate(90deg);
+.mini {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--akzent);
+  margin: 0 0 0.1rem;
 }
-
-/* Regeln und Flow erst beim Hover über die Funktion; offen bleiben während Bearbeitung */
-.details { display: none; }
-.funktion:hover .details, .funktion.offen .details {
-  display: block;
-  margin: 0.15rem 0 0.45rem 0.35rem;
-  padding: 0.1rem 0 0.1rem 0.75rem;
-  border-left: 2px solid var(--akzent);
-  font-size: 0.9rem;
-}
-
-/* Regeln als Punktliste, Flow als nummerierte Schritte */
-.regeln { margin: 0.15rem 0; }
-.regel {
-  flex: 1;
+.block .klickbar { border-radius: 4px; }
+.block .klickbar:hover { background: var(--bg); }
+.regel, .schritt {
   position: relative;
   padding-left: 1.15rem;
-  border-radius: 4px;
 }
 .regel::before {
   content: "•";
@@ -430,25 +450,18 @@ section.leer { display: none; }
   left: 0.35rem;
   color: var(--dezent);
 }
-.regel:hover { background: var(--code-bg); }
-/* „+ Regel"/„+ Flow" bündig zur Listen-Einrückung */
-.details .hinzu {
-  display: block;
-  padding: 0.05rem 0 0.05rem 1.15rem;
-  margin: 0.05rem 0;
-}
-.flow { border-radius: 4px; }
-.flow:hover { background: var(--code-bg); }
-.schritt {
-  position: relative;
-  padding-left: 1.15rem;
-}
 .nr {
   position: absolute;
   left: 0.15rem;
   color: var(--dezent);
   font-size: 0.85em;
 }
+/* „+ Regeln"/„+ Flow" bündig zur Listen-Einrückung */
+.details .hinzu {
+  display: block;
+  padding: 0.05rem 0 0.05rem 0.55rem;
+  margin: 0.05rem 0;
+}
 
 textarea {
   width: 100%;

frontend/src/components/FeatureListe.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, watch } from 'vue'
-import { fetchFeatures, featureAnlegen } from '../api.js'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { fetchFeatures, featureAnlegen, featureLoeschen } from '../api.js'
 import FeatureKarte from './FeatureKarte.vue'
 
 const props = defineProps({
@@ -10,7 +10,7 @@ const emit = defineEmits(['geaendert'])
 
 const features = ref([])
 const meldung = ref('')
-const neuId = ref(null) // frisch angelegte Karte: Titel direkt bearbeiten
+const neuId = ref(null) // frisch angelegte Karte: direkt im Vollmodus öffnen
 
 async function laden() {
   meldung.value = ''
@@ -23,35 +23,84 @@ async function laden() {
   }
 }
 
-async function neuesFeature() {
+function aktualisiert(altId, f) {
+  const idx = features.value.findIndex(x => x.id === altId)
+  if (idx >= 0) features.value[idx] = f
+  if (neuId.value === altId) neuId.value = f.id
+}
+
+// Kontextmenü: Rechtsklick auf eine Card (entfernen) oder den Hauptbereich (erstellen)
+const kontextMenue = ref(null) // {feature|null, x, y}
+
+function oeffneKartenMenue(e, f) {
+  kontextMenue.value = { feature: f, x: e.clientX, y: e.clientY }
+}
+
+function oeffneBereichsMenue(e) {
+  kontextMenue.value = { feature: null, x: e.clientX, y: e.clientY }
+}
+
+function schliesseKontextMenue() {
+  kontextMenue.value = null
+}
+
+onMounted(() => window.addEventListener('click', schliesseKontextMenue))
+onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
+
+// Modal für Erstellen und Entfernen
+const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', feature}
+const modalName = ref('')
+const modalFeld = ref(null)
+
+async function menueErstellen() {
+  kontextMenue.value = null
   meldung.value = ''
+  modal.value = { art: 'erstellen' }
+  modalName.value = ''
+  await nextTick()
+  modalFeld.value?.focus()
+}
+
+function menueEntfernen() {
+  const feature = kontextMenue.value.feature
+  kontextMenue.value = null
+  meldung.value = ''
+  modal.value = { art: 'entfernen', feature }
+}
+
+async function erstellenBestaetigen() {
+  meldung.value = ''
+  const name = modalName.value.trim()
+  if (!name) return
   try {
-    const f = await featureAnlegen(props.projekt, '<!-- titel -->\nNeues Feature\n')
+    const f = await featureAnlegen(props.projekt, `<!-- titel -->\n${name}\n`)
+    modal.value = null
     features.value.push(f)
-    neuId.value = f.id
-    emit('geaendert') // Anzahl in der Seitenleiste aktualisieren
+    neuId.value = f.id // öffnet die Karte im Vollmodus
+    emit('geaendert')
   } catch (e) {
     meldung.value = e.message
   }
 }
 
-function aktualisiert(altId, f) {
-  const idx = features.value.findIndex(x => x.id === altId)
-  if (idx >= 0) features.value[idx] = f
-  if (neuId.value === altId) neuId.value = null
-}
-
-function geloescht(id) {
-  features.value = features.value.filter(f => f.id !== id)
-  emit('geaendert')
+async function entfernenBestaetigen() {
+  meldung.value = ''
+  try {
+    await featureLoeschen(props.projekt, modal.value.feature.id)
+    features.value = features.value.filter(f => f.id !== modal.value.feature.id)
+    modal.value = null
+    emit('geaendert')
+  } catch (e) {
+    meldung.value = e.message
+  }
 }
 
 watch(() => props.projekt, laden, { immediate: true })
 </script>
 
 <template>
-  <div>
-    <p v-if="meldung" class="meldung">{{ meldung }}</p>
+  <div class="bereich" @contextmenu.prevent="oeffneBereichsMenue">
+    <p v-if="meldung && !modal" class="meldung">{{ meldung }}</p>
 
     <div class="gitter">
       <FeatureKarte
@@ -59,16 +108,54 @@ watch(() => props.projekt, laden, { immediate: true })
         :key="f.id"
         :projekt="projekt"
         :feature="f"
-        :titel-bearbeiten="f.id === neuId"
+        :vollmodus="f.id === neuId"
         @aktualisiert="aktualisiert"
-        @geloescht="geloescht(f.id)"
+        @kontextmenue="oeffneKartenMenue($event, f)"
       />
-      <button class="karte neu" @click="neuesFeature">+ Feature</button>
+    </div>
+
+    <div
+      v-if="kontextMenue"
+      class="kontextmenue"
+      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
+    >
+      <button v-if="kontextMenue.feature" @click="menueEntfernen">✕ Feature entfernen</button>
+      <button v-else @click="menueErstellen">+ Feature erstellen</button>
+    </div>
+
+    <div v-if="modal" class="schleier" @click.self="modal = null">
+      <div class="modal karte">
+        <template v-if="modal.art === 'erstellen'">
+          <h2>Feature erstellen</h2>
+          <input
+            ref="modalFeld"
+            v-model="modalName"
+            placeholder="Feature-Titel"
+            @keyup.enter="erstellenBestaetigen"
+            @keydown.esc="modal = null"
+          >
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
+          </footer>
+        </template>
+        <template v-else>
+          <h2>Feature entfernen</h2>
+          <p class="frage">„{{ modal.feature.sektionen.titel }}“ entfernen?</p>
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
+          </footer>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.bereich { min-height: 100%; }
 /* Spaltenlayout: unterschiedlich hohe Karten stapeln sich ohne Lücken */
 .gitter {
   columns: 340px;
@@ -83,13 +170,4 @@ watch(() => props.projekt, laden, { immediate: true })
   margin-bottom: 0.9rem;
   width: 100%;
 }
-/* Geisterkarte statt Kopfzeilen-Knopf */
-.neu {
-  border: 1px dashed var(--rand);
-  background: none;
-  color: var(--dezent);
-  min-height: 90px;
-  font-size: 0.95rem;
-}
-.neu:hover { color: var(--akzent); border-color: var(--akzent); }
 </style>

frontend/src/components/SeitenLeiste.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { projektAnlegen, projektUmbenennen, projektLoeschen } from '../api.js'
 
 const props = defineProps({
@@ -8,26 +8,10 @@ const props = defineProps({
 })
 const emit = defineEmits(['auswaehlen', 'geaendert', 'umbenannt'])
 
-const neuerName = ref('')
 const meldung = ref('')
 const bearbeitet = ref(null) // Projektname, der gerade umbenannt wird
 const umbenennung = ref('')
 const umbenennFeld = ref(null)
-const loeschBestaetigung = ref(null) // Projektname, dessen ✕ auf Bestätigung wartet
-
-async function anlegen() {
-  meldung.value = ''
-  const name = neuerName.value.trim()
-  if (!name) return
-  try {
-    await projektAnlegen(name)
-    neuerName.value = ''
-    emit('geaendert')
-    emit('auswaehlen', name)
-  } catch (e) {
-    meldung.value = e.message
-  }
-}
 
 async function starteUmbenennen(name) {
   meldung.value = ''
@@ -49,16 +33,71 @@ async function umbenennen(alt) {
   }
 }
 
-async function loeschen(name) {
-  // Erster Klick: Icon wird zum Bestätigungs-Icon, zweiter Klick löscht
-  if (loeschBestaetigung.value !== name) {
-    loeschBestaetigung.value = name
-    return
+// Kontextmenü: Rechtsklick auf Projektname (anpassen/entfernen)
+// oder auf freie Sidebar-Fläche (erstellen)
+const kontextMenue = ref(null) // {name|null, x, y}
+
+function oeffneProjektMenue(e, name) {
+  kontextMenue.value = { name, x: e.clientX, y: e.clientY }
+}
+
+function oeffneLeistenMenue(e) {
+  kontextMenue.value = { name: null, x: e.clientX, y: e.clientY }
+}
+
+function schliesseKontextMenue() {
+  kontextMenue.value = null
+}
+
+onMounted(() => window.addEventListener('click', schliesseKontextMenue))
+onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
+
+// Modal für Erstellen und Entfernen
+const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', name}
+const modalName = ref('')
+const modalFeld = ref(null)
+
+async function menueErstellen() {
+  kontextMenue.value = null
+  meldung.value = ''
+  modal.value = { art: 'erstellen' }
+  modalName.value = ''
+  await nextTick()
+  modalFeld.value?.focus()
+}
+
+function menueAnpassen() {
+  const name = kontextMenue.value.name
+  kontextMenue.value = null
+  starteUmbenennen(name)
+}
+
+function menueEntfernen() {
+  const name = kontextMenue.value.name
+  kontextMenue.value = null
+  meldung.value = ''
+  modal.value = { art: 'entfernen', name }
+}
+
+async function erstellenBestaetigen() {
+  meldung.value = ''
+  const name = modalName.value.trim()
+  if (!name) return
+  try {
+    await projektAnlegen(name)
+    modal.value = null
+    emit('geaendert')
+    emit('auswaehlen', name) // Projekt wird direkt aufgerufen
+  } catch (e) {
+    meldung.value = e.message
   }
-  loeschBestaetigung.value = null
+}
+
+async function entfernenBestaetigen() {
   meldung.value = ''
   try {
-    await projektLoeschen(name)
+    await projektLoeschen(modal.value.name)
+    modal.value = null
     emit('geaendert')
   } catch (e) {
     meldung.value = e.message
@@ -67,7 +106,7 @@ async function loeschen(name) {
 </script>
 
 <template>
-  <aside>
+  <aside @contextmenu.prevent="oeffneLeistenMenue">
     <header>
       <p class="gruppe">Projekte</p>
       <slot />
@@ -78,7 +117,7 @@ async function loeschen(name) {
         :key="p.name"
         :class="{ aktiv: p.name === aktiv }"
         @click="emit('auswaehlen', p.name)"
-        @mouseleave="loeschBestaetigung = null"
+        @contextmenu.prevent.stop="oeffneProjektMenue($event, p.name)"
       >
         <template v-if="bearbeitet === p.name">
           <input
@@ -92,25 +131,51 @@ async function loeschen(name) {
         </template>
         <template v-else>
           <span class="name">{{ p.name }}</span>
-          <span class="anzahl">{{ p.anzahl }}</span>
-          <span class="aktionen" @click.stop>
-            <button class="icon-knopf" title="Umbenennen" @click="starteUmbenennen(p.name)">✎</button>
-            <button
-              class="icon-knopf rot"
-              :class="{ bestaetigen: loeschBestaetigung === p.name }"
-              :title="loeschBestaetigung === p.name ? 'Wirklich löschen?' : 'Löschen'"
-              @click="loeschen(p.name)"
-            >{{ loeschBestaetigung === p.name ? '✓' : '✕' }}</button>
-          </span>
         </template>
       </li>
     </ul>
+    <p v-if="meldung && !modal" class="meldung">{{ meldung }}</p>
 
-    <form class="neu" @submit.prevent="anlegen">
-      <input v-model="neuerName" placeholder="Neues Projekt">
-      <button class="primaer" :disabled="!neuerName.trim()">+</button>
-    </form>
-    <p v-if="meldung" class="meldung">{{ meldung }}</p>
+    <div
+      v-if="kontextMenue"
+      class="kontextmenue"
+      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
+    >
+      <template v-if="kontextMenue.name">
+        <button @click="menueAnpassen">✎ Projekt anpassen</button>
+        <button @click="menueEntfernen">✕ Projekt entfernen</button>
+      </template>
+      <button v-else @click="menueErstellen">+ Projekt erstellen</button>
+    </div>
+
+    <div v-if="modal" class="schleier" @click.self="modal = null">
+      <div class="modal karte">
+        <template v-if="modal.art === 'erstellen'">
+          <h2>Projekt erstellen</h2>
+          <input
+            ref="modalFeld"
+            v-model="modalName"
+            placeholder="Projektname"
+            @keyup.enter="erstellenBestaetigen"
+            @keydown.esc="modal = null"
+          >
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
+          </footer>
+        </template>
+        <template v-else>
+          <h2>Projekt entfernen</h2>
+          <p class="frage">„{{ modal.name }}“ mit allen Features entfernen?</p>
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
+          </footer>
+        </template>
+      </div>
+    </div>
   </aside>
 </template>
 
@@ -154,16 +219,6 @@ li.aktiv { background: var(--bg); font-weight: 600; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.anzahl { color: var(--dezent); font-size: 0.78rem; }
-.aktionen { display: none; }
-li:hover .aktionen { display: inline-flex; }
-li:hover .anzahl { display: none; }
 li input { width: 100%; padding: 0.1rem 0.4rem; }
-.icon-knopf.bestaetigen { color: var(--rot); }
-.neu {
-  display: flex;
-  gap: 0.4rem;
-  margin-top: 0.4rem;
-}
-.neu input { flex: 1; min-width: 0; }
+
 </style>