feat: Bild in Annotieren-View löschen (Eintrag + Datei aus Directus)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/api.ts

@@ -347,6 +347,17 @@ export async function getDbPictures(token: string, status = 'draft'): Promise<Db
   return data.data as DbPicture[]
 }
 
+export async function deleteDbPicture(pictureId: string, token: string): Promise<void> {
+  const res = await fetch(`/api/directus/db-pictures/${pictureId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    throw new Error(data.error || 'Fehler beim Löschen des Bildes')
+  }
+}
+
 export async function updateDbPicture(pictureId: string, fields: Record<string, unknown>, token: string): Promise<void> {
   const res = await fetch(`/api/directus/db-pictures/${pictureId}`, {
     method: 'PATCH',

frontend/src/pages/DrawIt.tsx

@@ -6,6 +6,7 @@ import {
   getDbPictures,
   updateDbPicture,
   updateDbPictureStatus,
+  deleteDbPicture,
   getDbObjects,
   createDbObject,
   updateDbObject,
@@ -60,6 +61,7 @@ export default function DrawIt() {
   const [hasSelection, setHasSelection] = useState(false)
   const [saving, setSaving] = useState(false)
   const [finishing, setFinishing] = useState(false)
+  const [deleting, setDeleting] = useState(false)
   const [statusMsg, setStatusMsg] = useState('')
   const [statusError, setStatusError] = useState(false)
   const [imageLoaded, setImageLoaded] = useState(false)
@@ -288,6 +290,24 @@ export default function DrawIt() {
     }
   }
 
+  const deleteCurrentPicture = async () => {
+    if (!token || !currentPicture) return
+    if (!window.confirm('Bild wirklich löschen? Der Eintrag und die Datei werden dauerhaft aus Directus entfernt.')) return
+    setDeleting(true)
+    try {
+      await deleteDbPicture(currentPicture.id, token)
+      const newList = pictureList.filter(p => p.id !== currentPicture.id)
+      setPictureList(newList)
+      const nextIndex = Math.min(currentIndex, newList.length - 1)
+      setCurrentIndex(nextIndex)
+      showStatus('Bild gelöscht.')
+    } catch (e) {
+      showStatus(e instanceof Error ? e.message : 'Fehler beim Löschen.', true)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
   const imageNav = (
     <div className="image-nav">
       <button className="btn-icon" onClick={() => setCurrentIndex(i => i - 1)} disabled={currentIndex <= 0}>
@@ -301,6 +321,15 @@ export default function DrawIt() {
       <button className="btn-icon" onClick={() => setCurrentIndex(i => i + 1)} disabled={currentIndex >= pictureList.length - 1}>
         <ChevronRightIcon />
       </button>
+      <button
+        className="btn-icon"
+        onClick={deleteCurrentPicture}
+        disabled={deleting || !currentPicture}
+        title="Bild löschen"
+        style={{ color: 'var(--error, #dc2626)', marginLeft: 8 }}
+      >
+        <TrashIcon />
+      </button>
     </div>
   )