feat(projekt): Anheftungen per Drag & Drop zwischen Unterreitern verschieben

Pin-Zeilen in der Ordneransicht sind draggable, die Reiter sind Ablageziele.
Ein Drop schickt PATCH /api/projects/:id/pins/:pinId {tab_id}; movePin schreibt
project_pins.tab_id um. Verschoben wird nur die Referenz.

- Zielebene hat die Aufnahme schon: Quell-Pin loeschen statt an UNIQUE uniq_pin
  scheitern (merged:true)
- Zielreiter serverseitig gegen den Ordner pruefen, sonst 404
- .ptab-n braucht pointer-events:none, sonst flackert die Ablagemarkierung

Verifiziert gegen die laufende App inkl. 404- und Merge-Faellen; Testdaten
zurueckgesetzt. Doku: Kapitel 10 + Changelog.

app/db.js

@@ -208,6 +208,33 @@ export async function pinRecording(projectId, tabId, recordingId) {
 export async function unpinRecording(pinId) {
   await pool.execute('DELETE FROM project_pins WHERE id=?', [pinId]);
 }
+// Einen Pin auf eine andere Ebene DESSELBEN Ordners schieben (Drag&Drop in der
+// Projektansicht). Hängt die Aufnahme auf der Zielebene schon, entsteht kein
+// zweiter Pin — der Quell-Pin verschwindet stattdessen (Zusammenführen statt
+// Duplikat; ein UPDATE würde sonst an UNIQUE uniq_pin scheitern).
+export async function movePin(pinId, projectId, tabId) {
+  const [rows] = await pool.execute(
+    'SELECT tab_id, recording_id FROM project_pins WHERE id=? AND project_id=?', [pinId, projectId]);
+  if (!rows.length) return null;
+  const src = rows[0];
+  const dst = tabId || 0;
+  // Zielreiter muss zu diesem Ordner gehören (0 = Ordner-Ebene, gibt es immer).
+  if (dst) {
+    const [t] = await pool.execute(
+      'SELECT id FROM project_tabs WHERE id=? AND project_id=?', [dst, projectId]);
+    if (!t.length) return null;
+  }
+  if (src.tab_id === dst) return { ok: true, moved: false, tab_id: dst };
+  const [dup] = await pool.execute(
+    'SELECT id FROM project_pins WHERE project_id=? AND tab_id=? AND recording_id=?',
+    [projectId, dst, src.recording_id]);
+  if (dup.length) {
+    await pool.execute('DELETE FROM project_pins WHERE id=?', [pinId]);
+    return { ok: true, moved: true, merged: true, tab_id: dst, pin_id: dup[0].id };
+  }
+  await pool.execute('UPDATE project_pins SET tab_id=? WHERE id=?', [dst, pinId]);
+  return { ok: true, moved: true, tab_id: dst, pin_id: pinId };
+}
 // Wo hängt diese Aufnahme überall? Treibt die Markierung des 📌-Buttons in der
 // Aufnahmenliste.
 export async function listPinsForRecording(recId) {

app/server.js

@@ -541,6 +541,14 @@ app.post('/api/projects/:id/pins', wrap(async (req, res) => {
   await db.pinRecording(+req.params.id, +((req.body && req.body.tab_id) || 0), recId);
   res.json({ ok: true });
 }));
+// Drag&Drop in der Projektansicht: Pin auf eine andere Ebene desselben Ordners
+// ziehen. tab_id 0 = zurück auf die Ordner-Ebene.
+app.patch('/api/projects/:id/pins/:pinId', wrap(async (req, res) => {
+  const tabId = +((req.body && req.body.tab_id) || 0);
+  const r = await db.movePin(+req.params.pinId, +req.params.id, tabId);
+  if (!r) return res.status(404).json({ error: 'Anheftung oder Zielreiter nicht gefunden' });
+  res.json(r);
+}));
 app.delete('/api/projects/:id/pins/:pinId', wrap(async (req, res) => {
   await db.unpinRecording(+req.params.pinId);
   res.json({ ok: true });

app/web/src/style.css

@@ -527,12 +527,20 @@ body.resizing { cursor: col-resize; user-select: none; }
 .ptab.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
 .ptab.add { color: var(--muted); border-style: dashed; border-color: var(--line); }
 .ptab.add:hover { color: var(--accent); border-color: var(--accent); }
-.ptab-n { font-size: 11px; opacity: .7; margin-left: 4px; }
+/* pointer-events aus: sonst feuert beim Ueberfahren des Zaehlers ein
+   dragleave am Reiter und die Ablagemarkierung flackert. */
+.ptab-n { font-size: 11px; opacity: .7; margin-left: 4px; pointer-events: none; }
+/* Reiter als Ablageziel, waehrend ein Pin darueber gezogen wird. */
+.ptab.drop {
+  color: var(--accent); background: var(--accent-soft);
+  border-color: var(--accent); border-style: dashed;
+}
 
 .proj-level { margin-top: 14px; }
 .proj-level-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
 .proj-level-head .grow { flex: 1; }
 .proj-level .item.rec { cursor: pointer; }
+.proj-level .item.rec.dragging { opacity: .45; border-style: dashed; }
 
 /* Stecknadel in der Aufnahmenliste: blass, solange die Aufnahme nirgends
    hängt — angeheftet wird sie gruen (dieselbe Farbe wie „KI ✓“, also

docs/08-changelog.md

@@ -3,6 +3,39 @@
 Chronik der Entwicklungsschritte. **Regel: jede zukünftige Änderung bekommt hier einen Eintrag** (Datum,
 Was, Warum, betroffene Dateien/Backups).
 
+## 2026-08-14 — Angeheftete Aufnahmen per Drag & Drop zwischen Unterreitern verschieben
+
+**Wunsch:** eine im Projekt abgelegte Aufnahme sollte sich innerhalb des Ordners umhängen lassen, z. B. von
+`DFG/Projektleiter Runden` nach `DFG/INF-Projektboard`. Bisher ging das nur über Lösen + neu Anheften,
+also zwei Dialoge für eine Bewegung.
+
+**Umsetzung:** die Pin-Zeilen in der Ordneransicht sind `draggable`, die Reiter der Reiterleiste sind
+Ablageziele (`bindPinDrag` in `main.js`). Ein Drop schickt `PATCH /api/projects/:id/pins/:pinId {tab_id}`;
+`db.movePin` schreibt `project_pins.tab_id` um. Verschoben wird ausschließlich die Referenz — an der
+Aufnahme, ihrer Analyse oder ihren übrigen Anheftungen ändert sich nichts.
+
+Drei Punkte, die beim Bauen aufgefallen sind:
+
+- Hängt die Aufnahme auf der Zielebene bereits, würde das `UPDATE` an `UNIQUE uniq_pin` scheitern.
+  `movePin` löscht dann den Quell-Pin (**Zusammenführen statt Fehler**) und meldet `{merged:true}`.
+- Der Zielreiter wird serverseitig gegen den Ordner geprüft (`project_tabs.project_id`), sonst könnte ein
+  veralteter Browser-Tab einen Pin in ein fremdes Projekt schieben → sonst 404.
+- `.ptab-n` (Zähler im Reiter) braucht `pointer-events: none`, sonst feuert beim Überfahren des Zählers
+  ein `dragleave` und die Ablagemarkierung flackert.
+
+**Verifiziert** direkt gegen die laufende App (Ordner „DFG", Pin #12): Verschieben Reiter 2 → 3 → 2 jeweils
+`{"moved":true}` und `tab_id` in der DB entsprechend; fremder Reiter (999) und fremdes Projekt (2) je
+`404 {"error":"Anheftung oder Zielreiter nicht gefunden"}`; gleicher Reiter `{"moved":false}` ohne
+Schreibzugriff; Zusammenführen getestet mit Aufnahme #109 (zwei Pins → einer). Testdaten danach auf den
+Ausgangsstand zurückgesetzt. `vite build` sauber, `systemctl restart callrec` erst nach Prüfung auf
+`analysis_status='pending'` (keine laufende Analyse, keine laufende Aufnahme).
+
+Dateien: `app/db.js` (`movePin`), `app/server.js` (`PATCH …/pins/:pinId`), `app/web/src/main.js`
+(`bindPinDrag`, `draggable` an der Pin-Zeile, Hinweistext in der Ebenen-Kopfzeile),
+`app/web/src/style.css` (`.ptab.drop`, `.item.rec.dragging`, `.ptab-n`).
+Board-Backups: `.bak-movepin` (db.js, server.js, web/src/main.js, web/src/style.css, web/dist).
+Kapitel 10 (neuer Abschnitt „Verschieben per Drag & Drop" + Sequenzdiagramm + API-Tabelle).
+
 ## 2026-08-10 — Recorder überlebt das Neuladen (GUI holt den Zustand vom Server)
 
 **Symptom:** während einer laufenden Aufnahme klickte der Nutzer in eine andere Aufnahme; danach stand der

docs/10-projektansicht.md

@@ -96,6 +96,49 @@ Ein Klick auf eine angeheftete Aufnahme springt in den Reiter „Aufnahmen" und
 Detailbereich (`jumpToRecording`, dieselbe Mechanik wie der Sprung aus einem Suchtreffer, nur ohne
 Zeitmarke).
 
+## Verschieben per Drag & Drop (2026-08-14)
+
+Eine angeheftete Aufnahme lässt sich in der Ordneransicht auf einen **anderen Reiter der Reiterleiste
+ziehen** und wechselt damit die Ebene — z. B. von „Projektleiter Runden" nach „INF-Projektboard".
+Verschoben wird nur der Pin (`project_pins.tab_id`); die Aufnahme selbst wird nicht angefasst.
+
+```mermaid
+sequenceDiagram
+  participant U as Nutzer
+  participant G as GUI (main.js)
+  participant S as server.js
+  participant D as MariaDB
+  U->>G: dragstart auf 📌-Zeile
+  Note over G: merkt pin_id,<br/>setzt dataTransfer (Firefox braucht das)
+  U->>G: dragover Zielreiter
+  G-->>U: Reiter gestrichelt markiert (.ptab.drop)<br/>eigener Reiter = kein Ziel
+  U->>G: drop
+  G->>S: PATCH /api/projects/:id/pins/:pinId {tab_id}
+  S->>D: db.movePin()
+  alt Zielreiter gehört nicht zum Ordner / Pin unbekannt
+    D-->>S: null
+    S-->>G: 404
+  else Aufnahme hängt dort schon
+    D->>D: DELETE Quell-Pin (Zusammenführen)
+    S-->>G: {moved:true, merged:true}
+  else Normalfall
+    D->>D: UPDATE project_pins SET tab_id
+    S-->>G: {moved:true}
+  end
+  G->>G: renderProjectDetail() neu zeichnen
+```
+
+Drei Details, die nicht offensichtlich sind:
+
+- **Zusammenführen statt Duplikat:** hängt dieselbe Aufnahme auf der Zielebene bereits, würde das `UPDATE`
+  an `UNIQUE uniq_pin` scheitern. `movePin` löscht in diesem Fall den Quell-Pin, statt einen Fehler zu
+  werfen — im Ergebnis ist die Aufnahme genau einmal auf der Zielebene, was der Nutzer erwartet hat.
+- **Ziel wird serverseitig geprüft:** `tab_id` muss ein Reiter *desselben* Ordners sein (oder 0 für die
+  Ordner-Ebene), sonst 404. Ein veralteter Reiter im offenen Browser-Tab kann so keinen Pin in ein
+  fremdes Projekt schieben.
+- **`.ptab-n` (der Zähler im Reiter) bekommt `pointer-events: none`.** Sonst feuert beim Überfahren des
+  Zählers ein `dragleave` am Reiter und die Ablagemarkierung flackert.
+
 ## API
 
 | Route | Zweck |
@@ -109,13 +152,15 @@ Zeitmarke).
 | `PATCH /api/projects/:id/tabs/:tid` | Unterreiter umbenennen; `:tid = 0` benennt die Ordner-Ebene um (leerer Name = zurück auf „Ordner") |
 | `DELETE /api/projects/:id/tabs/:tid` | Unterreiter löschen |
 | `POST /api/projects/:id/pins` | anheften `{recording_id, tab_id}` (`tab_id` fehlt/0 = Ordner-Ebene) |
+| `PATCH /api/projects/:id/pins/:pinId` | Anheftung auf eine andere Ebene desselben Ordners verschieben `{tab_id}` (Drag & Drop); 404 bei fremdem Reiter/Ordner, `{merged:true}` wenn dort schon vorhanden |
 | `DELETE /api/projects/:id/pins/:pinId` | Anheftung lösen |
 | `GET /api/recordings/:id/pins` | wo hängt diese Aufnahme überall |
 | `GET /api/pins/counts` | `{recording_id: anzahl}` für die ganze Liste |
 
 ## Dateien
 
-`app/db.js` (Tabellen + CRUD), `app/server.js` (Routen), `app/web/src/main.js`
+`app/db.js` (Tabellen + CRUD, `movePin`), `app/server.js` (Routen), `app/web/src/main.js`
-(`viewProjects`/`renderProjectList`/`renderProjectDetail`/`pinPickRecordingDialog`/`pinToProjectDialog`/
+(`viewProjects`/`renderProjectList`/`renderProjectDetail`/`bindPinDrag`/`pinPickRecordingDialog`/
-`openModal`), `app/web/src/style.css` (Ordnergitter, Reiterleiste, Dialog).
+`pinToProjectDialog`/`openModal`), `app/web/src/style.css` (Ordnergitter, Reiterleiste, `.ptab.drop`,
-Board-Backups: `.bak-projects`.
+`.item.rec.dragging`, Dialog).
+Board-Backups: `.bak-projects` (Grundfunktion), `.bak-movepin` (Drag & Drop).