🎨 Palette: UX and Accessibility Improvements

.Jules/palette.md

@@ -0,0 +1,7 @@
+## 2026-05-27 - [Personal Rating Nullability]
+**Learning:** HTML5 range inputs cannot natively represent a `null` or "unset" state once a value is assigned. This makes it impossible for users to "un-rate" a game once they've touched the slider.
+**Action:** Always provide a clear, accessible "Clear" or "Reset" button (e.g., a small ✕) next to range inputs that correspond to nullable database fields to ensure full user control over their data.
+
+## 2026-05-27 - [Strict Build Constraints]
+**Learning:** This project uses strict TypeScript linting in its production build (`pnpm build`), where unused variables or state declarations (e.g., `hasIgdbId`) cause build failures.
+**Action:** Always run `pnpm build` before submitting to identify and remove unused code that might have been left over during development.

src/components/Library/GameCard.tsx

@@ -196,7 +196,8 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
                   onQuickAssign?.();
                 }}
                 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"
+                title={t('quickAssignPlatform')}
+                aria-label={t('quickAssignPlatform')}
               >
                 🎮
               </button>
@@ -296,7 +297,8 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
                 onQuickAssign?.();
               }}
               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"
+              title={t('quickAssignPlatform')}
+              aria-label={t('quickAssignPlatform')}
             >
               🎮
             </button>
@@ -379,7 +381,8 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
                   onQuickAssign?.();
                 }}
                 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"
+                title={t('quickAssignPlatform')}
+                aria-label={t('quickAssignPlatform')}
               >
                 🎮
               </button>

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)) {
@@ -179,7 +183,8 @@ export function GameDetail({ gameId, onBack, onFilter }: GameDetailProps) {
                 type="button"
                 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"
+                title={t('remove') || "Remove"}
+                aria-label={t('remove') || "Remove"}
               >
                 ✕
               </button>

src/components/Library/GameDetailHeader.tsx

@@ -148,6 +148,7 @@ 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>
@@ -365,6 +366,17 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <span className="theme-text-muted text-sm">{t('personalRating')} (0-100): <span className="text-purple-500 font-semibold">{game.personal_rating !== null && game.personal_rating !== undefined ? `${game.personal_rating}/100` : '-'}</span></span>
+            {game.personal_rating !== null && game.personal_rating !== undefined && (
+              <button
+                type="button"
+                onClick={() => onRatingChange?.(null)}
+                className="text-xs text-red-400 hover:text-red-300 transition-colors"
+                title={t('clearRating')}
+                aria-label={t('clearRating')}
+              >
+                ✕ {t('clearRating')}
+              </button>
+            )}
           </div>
           <div className="flex items-center gap-3">
             <span className="text-xs theme-text-muted">0</span>

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) {

src/i18n/translations.ts

@@ -343,6 +343,8 @@ export const translations = {
     more: 'more',
     clearAll: 'Clear All',
     tryAdjustingFilters: 'Try adjusting your filters',
+    clearRating: 'Clear Rating',
+    quickAssignPlatform: 'Quick Assign Platform',
 
     // Screenshot Background
     screenshotBackground: 'Game Detail Background',
@@ -729,6 +731,8 @@ export const translations = {
     more: 'de plus',
     clearAll: 'Tout effacer',
     tryAdjustingFilters: 'Essayez d\'ajuster vos filtres',
+    clearRating: 'Effacer la note',
+    quickAssignPlatform: 'Assignation rapide de plateforme',
 
     // Screenshot Background
     screenshotBackground: 'Arrière-plan de la fiche jeu',