Working on suggestions of greptile-apps bot

package.json

@@ -122,5 +122,6 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vite-plugin-svgr": "^4.2.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/locales/de/translation.json

@@ -22,7 +22,7 @@
     "game_has_no_executable": "Spiel hat keine ausführbare Datei gewählt",
     "sign_in": "Anmelden",
     "favorites": "Favoriten",
-    "playable_button_title": "Nur Spiele anzeigen, die Sie jetzt spielen können"
+    "playable_button_title": "Nur Spiele anzeigen, die du jetzt spielen kannst"
   },
   "header": {
     "search": "Spiele suchen",

src/locales/en/translation.json

@@ -28,7 +28,7 @@
     "friends": "Friends",
     "need_help": "Need help?",
     "favorites": "Favorites",
-    "playable_button_title": "Show only games you could play now"
+    "playable_button_title": "Show only games you can play now"
   },
   "header": {
     "search": "Search games",

src/locales/pl/translation.json

@@ -13,7 +13,7 @@
     "downloading_metadata": "{{title}} (Pobieranie metadata…)",
     "paused": "{{title}} (Zatrzymano)",
     "downloading": "{{title}} ({{percentage}} - Pobieranie…)",
-    "filter": "Filtruj biblioteke",
+    "filter": "Filtruj bibliotekę",
     "home": "Główna",
     "favorites": "Ulubione",
     "playable_button_title": "Pokaż tylko gry, w które możesz grać teraz"

src/locales/uk/translation.json

@@ -25,10 +25,10 @@
     "game_has_no_executable": "Не було вибрано файл для запуску гри",
     "queued": "{{title}} в черзі",
     "sign_in": "Увійти",
-    "favorites": "Избранное",
+    "favorites": "Улюблені",
     "friends": "Друзі",
     "need_help": "Потрібна допомога?",
-    "playable_button_title": "Показать только игры, в которые можно играть сейчас"
+    "playable_button_title": "Показати лише ігри, які можна грати зараз"
   },
   "header": {
     "search": "Пошук",

src/renderer/src/components/sidebar/sidebar.scss

@@ -98,6 +98,12 @@
     background-size: cover;
   }
 
+  &__section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__section-title {
     text-transform: uppercase;
     font-weight: bold;
@@ -133,7 +139,7 @@
   }
 
   &__help-button-icon {
-    background: linear-gradient(0deg, #16b195 50%, #3e62c0 100%);
+    background: linear-gradient(0deg, globals.$brand-teal 50%, globals.$brand-blue 100%);
     width: 24px;
     height: 24px;
     display: flex;
@@ -142,24 +148,24 @@
     color: #fff;
     border-radius: 50%;
   }
-}
 
-.sidebar__play-button {
+  &__play-button {
-  background: none;
+    background: none;
-  border: none;
+    border: none;
-  color: white;
+    color: globals.$muted-color;
-  cursor: pointer;
+    cursor: pointer;
-  padding: 0;
+    padding: 0;
 
-  &:active {
+    &:active {
-    color: gray;
+      color: rgba(255, 255, 255, 0.5);
-  }
+    }
 
-  &--active {
+    &--active {
-    color: #16b195;
+      color: globals.$brand-teal;
-  }
+    }
 
-  svg {
+    svg {
-    display: block;
+      display: block;
+    }
   }
 }

src/renderer/src/components/sidebar/sidebar.tsx

@@ -32,6 +32,8 @@ const SIDEBAR_MAX_WIDTH = 450;
 
 const initialSidebarWidth = window.localStorage.getItem("sidebarWidth");
 
+const isGamePlayable = (game: LibraryGame) => Boolean(game.executablePath);
+
 export function Sidebar() {
   const filterRef = useRef<HTMLInputElement>(null);
 
@@ -248,20 +250,13 @@ export function Sidebar() {
           )}
 
           <section className="sidebar__section">
-            <div
+            <div className="sidebar__section-header">
-              style={{
+              <small className="sidebar__section-title">{t("my_library")}</small>
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <small className="sidebar__section-title">
-                {t("my_library")}
-              </small>
               <button
                 type="button"
-                className={`sidebar__play-button ${showPlayableOnly ? "sidebar__play-button--active" : ""}`}
+                className={cn("sidebar__play-button", {
-                title={t("playable_button_title")}
+                  "sidebar__play-button--active": showPlayableOnly
+                })}
                 onClick={handlePlayButtonClick}
               >
                 <PlayIcon size={16} />
@@ -278,9 +273,7 @@ export function Sidebar() {
             <ul className="sidebar__menu">
               {filteredLibrary
                 .filter((game) => !game.favorite)
-                .filter(
+                .filter((game) => !showPlayableOnly || isGamePlayable(game))
-                  (game) => !showPlayableOnly || Boolean(game.executablePath)
-                )
                 .map((game) => (
                   <SidebarGameItem
                     key={game.id}

src/renderer/src/scss/globals.scss

@@ -9,6 +9,9 @@ $success-color: #1c9749;
 $danger-color: #801d1e;
 $warning-color: #ffc107;
 
+$brand-teal: #16b195;
+$brand-blue: #3e62c0;
+
 $disabled-opacity: 0.5;
 $active-opacity: 0.7;