Added playable button feauture that shows only games I could play now

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

@@ -21,7 +21,8 @@
     "queued": "{{title}} (In Warteschlange)",
     "game_has_no_executable": "Spiel hat keine ausführbare Datei gewählt",
     "sign_in": "Anmelden",
-    "favorites": "Favoriten"
+    "favorites": "Favoriten",
+    "playable_button_title": "Nur Spiele anzeigen, die Sie jetzt spielen können"
   },
   "header": {
     "search": "Spiele suchen",

src/locales/en/translation.json

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

src/locales/es/translation.json

@@ -27,7 +27,8 @@
     "sign_in": "Iniciar sesión",
     "friends": "Amigos",
     "need_help": "¿Necesitas ayuda?",
-    "favorites": "Favoritos"
+    "favorites": "Favoritos",
+    "playable_button_title": "Mostrar solo juegos que puedes jugar ahora"
   },
   "header": {
     "search": "Buscar juegos",

src/locales/fr/translation.json

@@ -27,7 +27,8 @@
     "sign_in": "Se connecter",
     "friends": "Amis",
     "need_help": "Besoin d'aide ?",
-    "favorites": "Favoris"
+    "favorites": "Favoris",
+    "playable_button_title": "Afficher uniquement les jeux que vous pouvez jouer maintenant"
   },
   "header": {
     "search": "Rechercher",

src/locales/it/translation.json

@@ -15,7 +15,8 @@
     "downloading": "{{title}} ({{percentage}} - Download…)",
     "filter": "Filtra libreria",
     "home": "Home",
-    "favorites": "Preferiti"
+    "favorites": "Preferiti",
+    "playable_button_title": "Mostra solo i giochi che puoi giocare ora"
   },
   "header": {
     "search": "Cerca",

src/locales/pl/translation.json

@@ -15,7 +15,8 @@
     "downloading": "{{title}} ({{percentage}} - Pobieranie…)",
     "filter": "Filtruj biblioteke",
     "home": "Główna",
-    "favorites": "Ulubione"
+    "favorites": "Ulubione",
+    "playable_button_title": "Pokaż tylko gry, w które możesz grać teraz"
   },
   "header": {
     "search": "Szukaj",

src/locales/ru/translation.json

@@ -27,7 +27,8 @@
     "sign_in": "Войти",
     "friends": "Друзья",
     "need_help": "Нужна помощь?",
-    "favorites": "Избранное"
+    "favorites": "Избранное",
+    "playable_button_title": "Показать только игры, в которые можно играть сейчас"
   },
   "header": {
     "search": "Поиск",

src/locales/uk/translation.json

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

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

@@ -143,3 +143,23 @@
     border-radius: 50%;
   }
 }
+
+.sidebar__play-button {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 0;
+
+  &:active {
+    color: gray;
+  }
+
+  &--active {
+    color: #16b195;
+  }
+
+  svg {
+    display: block;
+  }
+}

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

@@ -21,7 +21,7 @@ import { buildGameDetailsPath } from "@renderer/helpers";
 import { SidebarProfile } from "./sidebar-profile";
 import { sortBy } from "lodash-es";
 import cn from "classnames";
-import { CommentDiscussionIcon } from "@primer/octicons-react";
+import { CommentDiscussionIcon, PlayIcon } from "@primer/octicons-react";
 import { SidebarGameItem } from "./sidebar-game-item";
 import { setFriendRequestCount } from "@renderer/features/user-details-slice";
 import { useDispatch } from "react-redux";
@@ -60,6 +60,12 @@ export function Sidebar() {
 
   const { showWarningToast } = useToast();
 
+  const [showPlayableOnly, setShowPlayableOnly] = useState(false);
+
+  const handlePlayButtonClick = () => {
+    setShowPlayableOnly(!showPlayableOnly);
+  };
+
   useEffect(() => {
     updateLibrary();
   }, [lastPacket?.gameId, updateLibrary]);
@@ -242,7 +248,12 @@ export function Sidebar() {
           )}
 
           <section className="sidebar__section">
-            <small className="sidebar__section-title">{t("my_library")}</small>
+            <div style={{ 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' : ''}`} title={t("playable_button_title")} onClick={handlePlayButtonClick}>
+                <PlayIcon size={16} />
+              </button>
+            </div>
 
             <TextField
               ref={filterRef}
@@ -254,6 +265,7 @@ export function Sidebar() {
             <ul className="sidebar__menu">
               {filteredLibrary
                 .filter((game) => !game.favorite)
+                .filter((game) => !showPlayableOnly || Boolean(game.executablePath))
                 .map((game) => (
                   <SidebarGameItem
                     key={game.id}