Merge pull request #1712 from Hoaper/main

Feature: Show only playable games at sidebar

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 du jetzt spielen kannst"
   },
   "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 can 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

@@ -13,9 +13,10 @@
     "downloading_metadata": "{{title}} (Pobieranie metadata…)",
     "paused": "{{title}} (Zatrzymano)",
     "downloading": "{{title}} ({{percentage}} - Pobieranie…)",
-    "filter": "Filtruj biblioteke",
+    "filter": "Filtruj bibliotekę",
     "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

@@ -27,7 +27,8 @@
     "sign_in": "Увійти",
     "favorites": "Улюблені",
     "friends": "Друзі",
-    "need_help": "Потрібна допомога?"
+    "need_help": "Потрібна допомога?",
+    "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,11 @@
   }
 
   &__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,4 +152,24 @@
     color: #fff;
     border-radius: 50%;
   }
+
+  &__play-button {
+    background: none;
+    border: none;
+    color: globals.$muted-color;
+    cursor: pointer;
+    padding: 0;
+
+    &:active {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    &--active {
+      color: globals.$brand-teal;
+    }
+
+    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";
@@ -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);
 
@@ -60,6 +62,12 @@ export function Sidebar() {
 
   const { showWarningToast } = useToast();
 
+  const [showPlayableOnly, setShowPlayableOnly] = useState(false);
+
+  const handlePlayButtonClick = () => {
+    setShowPlayableOnly(!showPlayableOnly);
+  };
+
   useEffect(() => {
     updateLibrary();
   }, [lastPacket?.gameId, updateLibrary]);
@@ -242,7 +250,20 @@ export function Sidebar() {
           )}
 
           <section className="sidebar__section">
-            <small className="sidebar__section-title">{t("my_library")}</small>
+            <div className="sidebar__section-header">
+              <small className="sidebar__section-title">
+                {t("my_library")}
+              </small>
+              <button
+                type="button"
+                className={cn("sidebar__play-button", {
+                  "sidebar__play-button--active": showPlayableOnly,
+                })}
+                onClick={handlePlayButtonClick}
+              >
+                <PlayIcon size={16} />
+              </button>
+            </div>
 
             <TextField
               ref={filterRef}
@@ -254,6 +275,7 @@ export function Sidebar() {
             <ul className="sidebar__menu">
               {filteredLibrary
                 .filter((game) => !game.favorite)
+                .filter((game) => !showPlayableOnly || isGamePlayable(game))
                 .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;