From 6c7d541f311d39844d2f909857429d34c138c7fc Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 24 May 2026 06:15:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20Clear=20Rating?=
 =?UTF-8?q?=20button=20and=20fix=20localization=20typo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added an accessible "Clear Rating" button (✕) to the personal rating section in GameDetailHeader to allow unsetting ratings.
- Corrected the English translation for "Platforms" (was "Plateformes").
- Added localized strings for "Clear Rating" in English and French.
- Fixed a TypeScript error in GameScreenshotsCarousel causing build failures.
- Ensured proper accessibility with aria-labels and tooltips.

Co-authored-by: Gamepulse <8333979+Gamepulse@users.noreply.github.com>
---
 .Jules/palette.md                                 |  7 +++++++
 src/components/Library/GameDetailHeader.tsx       | 15 ++++++++++++++-
 .../Library/GameScreenshotsCarousel.tsx           |  2 --
 src/i18n/translations.ts                          |  4 +++-
 4 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..bced613
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,7 @@
+## 2025-05-15 - [UX Pattern: Range Input Null State]
+**Learning:** Native HTML range inputs (`<input type="range">`) cannot represent a `null` or "unset" state as they always default to a value (usually the minimum).
+**Action:** Provide a separate "Clear" or "Reset" button next to numeric range controls to allow users to explicitly unset the value.
+
+## 2025-05-15 - [Accessibility: Icon-only Buttons]
+**Learning:** Icon-only buttons containing text emojis (e.g., ✕) can be confusing for screen readers if the emoji is not hidden and a proper label is not provided.
+**Action:** Wrap text emojis in `<span aria-hidden="true">` and provide both `aria-label` and `title` attributes on the parent button.
diff --git a/src/components/Library/GameDetailHeader.tsx b/src/components/Library/GameDetailHeader.tsx
index aa3d128..a18e657 100644
--- a/src/components/Library/GameDetailHeader.tsx
+++ b/src/components/Library/GameDetailHeader.tsx
@@ -364,7 +364,20 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
         {/* Personal Rating */}
         <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>
+            <div className="flex items-center gap-2">
+              <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="theme-text-muted hover:text-red-400 transition-colors focus-visible:ring-1 focus-visible:ring-red-400 rounded p-0.5"
+                  aria-label={t('clearRating')}
+                  title={t('clearRating')}
+                >
+                  <span aria-hidden="true">✕</span>
+                </button>
+              )}
+            </div>
           </div>
           <div className="flex items-center gap-3">
             <span className="text-xs theme-text-muted">0</span>
diff --git a/src/components/Library/GameScreenshotsCarousel.tsx b/src/components/Library/GameScreenshotsCarousel.tsx
index 6a4e37c..bfae3b8 100644
--- a/src/components/Library/GameScreenshotsCarousel.tsx
+++ b/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) {
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 1664377..17d5b4f 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -49,6 +49,7 @@ export const translations = {
     
     // Game Detail
     personalRating: 'Personal Rating',
+    clearRating: 'Clear Rating',
     notes: 'Notes',
     saveNotes: 'Save Notes',
     deleteGame: 'Delete Game',
@@ -291,7 +292,7 @@ export const translations = {
     playTime: 'Play Time',
     hours: 'hours',
     platform: 'Platform',
-    platforms: 'Plateformes',
+    platforms: 'Platforms',
     selectPlatform: 'Select platform...',
     noPlatform: 'No platform',
     availableOnIGDB: 'Available on',
@@ -435,6 +436,7 @@ export const translations = {
     
     // Game Detail
     personalRating: 'Note personnelle',
+    clearRating: 'Effacer la note',
     notes: 'Notes',
     saveNotes: 'Sauvegarder les notes',
     deleteGame: 'Supprimer le jeu',