feat: Add delete functionality for draft screenshots

- Add delete button in AssetEditModal with confirmation dialog
- Add handleDeleteAsset function to remove screenshots from IndexedDB
- Add CSS styling for delete button

Author: Steffdarz

src/popup/popup.css

@@ -804,4 +804,34 @@
   border-radius: 8px;
   color: #DC2626;
   font-size: 12px;
+}
+
+/* Delete button styles */
+.edit-modal-delete {
+  padding: 0 16px 16px;
+  text-align: center;
+}
+
+.edit-modal-delete .btn-delete {
+  background: transparent;
+  border: none;
+  color: #DC2626;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 0.2s, color 0.2s;
+}
+
+.edit-modal-delete .btn-delete:hover:not(:disabled) {
+  background: #FEF2F2;
+}
+
+.edit-modal-delete .btn-delete:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }

src/popup/popup.tsx

@@ -184,6 +184,21 @@ function PopupApp() {
     }
   }
 
+  async function handleDeleteAsset(assetId: string) {
+    if (!confirm('Are you sure you want to delete this screenshot?')) {
+      return;
+    }
+    try {
+      await indexedDBService.deleteAsset(assetId);
+      const updatedAssets = await indexedDBService.getAllAssets();
+      setAssets(updatedAssets);
+      setEditingAsset(null);
+    } catch (error) {
+      console.error('Failed to delete asset:', error);
+      alert('Failed to delete screenshot');
+    }
+  }
+
   function openOptions() {
     chrome.runtime.openOptionsPage();
   }
@@ -323,6 +338,7 @@ function PopupApp() {
           asset={editingAsset}
           onSave={handleUpdateAssetMetadata}
           onUpload={handleUpload}
+          onDelete={handleDeleteAsset}
           onClose={() => setEditingAsset(null)}
         />
       )}
@@ -782,11 +798,13 @@ function AssetEditModal({
   asset,
   onSave,
   onUpload,
+  onDelete,
   onClose,
 }: {
   asset: Asset;
   onSave: (assetId: string, headline: string, caption: string) => Promise<void>;
   onUpload: (assetId: string) => void;
+  onDelete: (assetId: string) => void;
   onClose: () => void;
 }) {
   const [headline, setHeadline] = useState(asset.metadata?.headline || '');
@@ -880,6 +898,22 @@ function AssetEditModal({
           </button>
         </div>
 
+        <div className="edit-modal-delete">
+          <button
+            className="btn-delete"
+            onClick={() => onDelete(asset.id)}
+            disabled={isSaving}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="3 6 5 6 21 6"></polyline>
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+              <line x1="10" y1="11" x2="10" y2="17"></line>
+              <line x1="14" y1="11" x2="14" y2="17"></line>
+            </svg>
+            Delete Screenshot
+          </button>
+        </div>
+
         {asset.status === 'failed' && asset.metadata?.error && (
             <div className="edit-modal-error">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">