🎨 Palette: Add delete confirmation and improve button accessibility

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2025-05-22 - [Tauri Application Accessibility and Build Constraints]
+**Learning:** This app is a Tauri-based desktop application where interactive elements rely on the Tauri `invoke` system. Frontend verification requires mocking `window.__TAURI_INTERNALS__.invoke` to avoid render failures. Additionally, the production build (`pnpm build`) includes strict TypeScript linting via `tsc`, meaning unused variables or state declarations will cause build failures and must be removed before submission.
+**Action:** Always mock the Tauri `invoke` system in Playwright scripts and run `pnpm build` to verify that no unused variables or type errors are introduced.

src/components/Library/GameCard.tsx

@@ -197,8 +197,9 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
                 }}
                 className="ml-auto text-xs px-2 py-1 bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors"
                 title="Quick assign platform"
+                aria-label="Quick assign platform"
               >
-                🎮
+                <span aria-hidden="true">🎮</span>
               </button>
             )}
           </h3>
@@ -297,8 +298,9 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
               }}
               className="absolute bottom-1 left-1 w-5 h-5 flex items-center justify-center text-[10px] bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors z-10"
               title="Quick assign platform"
+              aria-label="Quick assign platform"
             >
-              🎮
+              <span aria-hidden="true">🎮</span>
             </button>
           )}
 
@@ -380,8 +382,9 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
                 }}
                 className="ml-2 text-xs px-2 py-1 bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors"
                 title="Quick assign platform"
+                aria-label="Quick assign platform"
               >
-                🎮
+                <span aria-hidden="true">🎮</span>
               </button>
             )}
           </h3>

src/components/Library/GameDetail.tsx

@@ -64,7 +64,11 @@ export function GameDetail({ gameId, onBack, onFilter }: GameDetailProps) {
     setGame({ ...game, notes: notesValue });
   };
 
-  const handleDelete = async () => { if (await deleteGame(game.id)) onBack(); };
+  const handleDelete = async () => {
+    if (window.confirm(t('confirmDelete'))) {
+      if (await deleteGame(game.id)) onBack();
+    }
+  };
 
   const handlePlayTimeChange = async (hours: number) => {
     if (await updatePlayTime(game.id, hours)) {
@@ -180,8 +184,9 @@ export function GameDetail({ gameId, onBack, onFilter }: GameDetailProps) {
                 onClick={handleClearExecutable}
                 className="px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm"
                 title="Clear executable path"
+                aria-label="Clear executable path"
               >
-                ✕
+                <span aria-hidden="true">✕</span>
               </button>
             )}
           </div>

src/components/Library/GameDetailHeader.tsx

@@ -148,11 +148,12 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
               onClick={(e) => { e.stopPropagation(); onFavoriteToggle(); }}
               className="absolute -top-2 -right-2 w-10 h-10 flex items-center justify-center text-3xl transition-transform hover:scale-110"
               title={game.is_favorite ? t('removeFromFavorites') : t('addToFavorites')}
+              aria-label={game.is_favorite ? t('removeFromFavorites') : t('addToFavorites')}
             >
               {game.is_favorite ? (
-                <span className="text-yellow-400 drop-shadow-lg">★</span>
+                <span className="text-yellow-400 drop-shadow-lg" aria-hidden="true">★</span>
               ) : (
-                <span className="text-gray-400 hover:text-yellow-300">☆</span>
+                <span className="text-gray-400 hover:text-yellow-300" aria-hidden="true">☆</span>
               )}
             </button>
           )}

src/components/Library/GameScreenshotsCarousel.tsx

@@ -20,7 +20,6 @@ export function GameScreenshotsCarousel({ gameId }: GameScreenshotsCarouselProps
   const [igdbScreenshots, setIgdbScreenshots] = useState<string[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [loading, setLoading] = useState(true);
-  const [hasIgdbId, setHasIgdbId] = useState(false);
 
   useEffect(() => {
     const loadScreenshots = async () => {
@@ -29,7 +28,6 @@ export function GameScreenshotsCarousel({ gameId }: GameScreenshotsCarouselProps
         // Load game data to check IGDB ID
         try {
           const game = await invoke<{ igdb_id: number | null }>("get_game_by_id", { id: gameId });
-          setHasIgdbId(!!game?.igdb_id);
 
           // Load IGDB screenshots if available
           if (game?.igdb_id) {