Working on suggestions of greptile-apps bot

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 {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  padding: 0;
+  &__play-button {
+    background: none;
+    border: none;
+    color: globals.$muted-color;
+    cursor: pointer;
+    padding: 0;
 
-  &:active {
-    color: gray;
-  }
+    &:active {
+      color: rgba(255, 255, 255, 0.5);
+    }
 
-  &--active {
-    color: #16b195;
-  }
+    &--active {
+      color: globals.$brand-teal;
+    }
 
-  svg {
-    display: block;
+    svg {
+      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
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <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={`sidebar__play-button ${showPlayableOnly ? "sidebar__play-button--active" : ""}`}
-                title={t("playable_button_title")}
+                className={cn("sidebar__play-button", {
+                  "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(
-                  (game) => !showPlayableOnly || Boolean(game.executablePath)
-                )
+                .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;