From c0ac37ee1a185634fc7bc9ec1c745df34d5a1b7d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 15 Jul 2026 00:50:05 +0000
Subject: [PATCH] fix(ui): confirm before deleting a track + artwork fallback
 on load error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#7: "Delete from library" permanently removed the track and its audio bytes on
a single tap, sitting right below benign actions in the ⋯ sheet — a mis-tap was
irreversible. Route it through ConfirmModal (as delete-playlist already does):
the track is only removed after an explicit confirm; Cancel leaves the sheet
open and the track intact.

#13: Artwork rendered a present thumbnail URL with no onError handler, so an
expired/offline/deleted YouTube thumbnail showed the browser's broken-image
glyph. Add onError to fall back to the existing deterministic gradient tile,
resetting the failure flag when the URL changes (the component is reused across
rows).

Verified in-browser: a broken thumbnail renders the gradient placeholder (no
img); delete shows a confirm dialog and only removes the track on confirm, not
on Cancel.

Fixes #7. Fixes #13.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FkDKh1Uo1a4D7n5wCKdcKF
---
 src/components/AddToPlaylistSheet.jsx | 18 +++++++++++++++++-
 src/components/Artwork.jsx            | 20 ++++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/AddToPlaylistSheet.jsx b/src/components/AddToPlaylistSheet.jsx
index 9d9c9c7..5059de2 100644
--- a/src/components/AddToPlaylistSheet.jsx
+++ b/src/components/AddToPlaylistSheet.jsx
@@ -4,6 +4,7 @@ import { usePlaylists } from '../state/useLibrary'
 import { usePlayer } from '../state/PlayerProvider'
 import { addToPlaylist, createPlaylist, toggleStar, deleteTrack } from '../lib/db'
 import PromptModal from './PromptModal'
+import ConfirmModal from './ConfirmModal'
 
 // Track actions sheet (opened from a TrackRow's ⋯). Quick playback actions on
 // top (Play next / Add to queue / Favorite), then the "add to playlist" picker.
@@ -12,6 +13,7 @@ export default function AddToPlaylistSheet() {
   const playlists = usePlaylists()
   const { playNext, addToQueue } = usePlayer()
   const [creating, setCreating] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
   if (!addTarget) return null
 
   const close = closeAddToPlaylist
@@ -55,7 +57,7 @@ export default function AddToPlaylistSheet() {
           {addTarget.srcType === 'idb' && (
             <button
               className="sheet__item sheet__item--danger"
-              onClick={() => { deleteTrack(addTarget.id); close() }}
+              onClick={() => setConfirmDelete(true)}
             >
               <span>Delete from library</span>
               <svg viewBox="0 0 18 18" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 5h12M7 5V3h4v2M6 5l.8 10h4.4L12 5" /></svg>
@@ -78,6 +80,20 @@ export default function AddToPlaylistSheet() {
           }}
         />
       )}
+
+      {confirmDelete && (
+        <ConfirmModal
+          title="Delete from library?"
+          message={`"${addTarget.title}" and its downloaded audio will be removed. This can't be undone.`}
+          confirmLabel="Delete"
+          onConfirm={async () => {
+            await deleteTrack(addTarget.id)
+            setConfirmDelete(false)
+            close()
+          }}
+          onClose={() => setConfirmDelete(false)}
+        />
+      )}
     </>
   )
 }
diff --git a/src/components/Artwork.jsx b/src/components/Artwork.jsx
index bd9d84b..513b81d 100644
--- a/src/components/Artwork.jsx
+++ b/src/components/Artwork.jsx
@@ -1,3 +1,5 @@
+import { useState, useEffect } from 'react'
+
 // Square artwork. Uses the YouTube thumbnail when present; otherwise renders a
 // deterministic gradient tile (same track → same colors) so the library still
 // looks intentional for the sample tones and any thumbnail-less tracks.
@@ -15,8 +17,22 @@ export function warmGlow(id) {
 
 export default function Artwork({ track, size = 48, radius = 8 }) {
   const style = { width: size, height: size, borderRadius: radius }
-  if (track?.thumbnailUrl) {
-    return <img className="artwork" src={track.thumbnailUrl} alt="" style={style} />
+  // A present-but-broken thumbnail URL (expired/offline/deleted video) should
+  // fall back to the gradient tile, not the browser's broken-image glyph.
+  // Reset the flag when the URL changes since this instance is reused in lists.
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [track?.thumbnailUrl])
+
+  if (track?.thumbnailUrl && !failed) {
+    return (
+      <img
+        className="artwork"
+        src={track.thumbnailUrl}
+        alt=""
+        style={style}
+        onError={() => setFailed(true)}
+      />
+    )
   }
   // Keep the hue in a warm band (deep amber → sienna → olive) and low-ish
   // saturation so placeholders stay cohesive with the palette — never rainbow.