From 11b369de8d16c92423482e127c7a785e578fd550 Mon Sep 17 00:00:00 2001
From: Leandro Perin <leandroperin@proton.me>
Date: Tue, 4 Feb 2025 19:17:14 -0300
Subject: [PATCH] Update sidebar.tsx

---
 .../src/components/sidebar/sidebar.tsx        | 96 +++++++------------
 1 file changed, 34 insertions(+), 62 deletions(-)

diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx
index 816bbdb0..1dabbcea 100644
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -167,6 +167,38 @@ export function Sidebar() {
     }
   };
 
+  const SidebarGame = ({ game }: { game: LibraryGame }) => (
+    <li
+      key={game.id}
+      className={cn("sidebar__menu-item", {
+        "sidebar__menu-item--active":
+          location.pathname === `/game/${game.shop}/${game.objectId}`,
+        "sidebar__menu-item--muted": game.download?.status === "removed",
+      })}
+    >
+      <button
+        type="button"
+        className="sidebar__menu-item-button"
+        onClick={(event) => handleSidebarGameClick(event, game)}
+      >
+        {game.iconUrl ? (
+          <img
+            className="sidebar__game-icon"
+            src={game.iconUrl}
+            alt={game.title}
+            loading="lazy"
+          />
+        ) : (
+          <SteamLogo className="sidebar__game-icon" />
+        )}
+
+        <span className="sidebar__menu-item-button-label">
+          {getGameTitle(game)}
+        </span>
+      </button>
+    </li>
+  );
+
   return (
     <aside
       ref={sidebarRef}
@@ -213,37 +245,7 @@ export function Sidebar() {
               {sortedLibrary
                 .filter((game) => game.favorite)
                 .map((game) => (
-                  <li
-                    key={game.id}
-                    className={cn("sidebar__menu-item", {
-                      "sidebar__menu-item--active":
-                        location.pathname ===
-                        `/game/${game.shop}/${game.objectId}`,
-                      "sidebar__menu-item--muted":
-                        game.download?.status === "removed",
-                    })}
-                  >
-                    <button
-                      type="button"
-                      className="sidebar__menu-item-button"
-                      onClick={(event) => handleSidebarGameClick(event, game)}
-                    >
-                      {game.iconUrl ? (
-                        <img
-                          className="sidebar__game-icon"
-                          src={game.iconUrl}
-                          alt={game.title}
-                          loading="lazy"
-                        />
-                      ) : (
-                        <SteamLogo className="sidebar__game-icon" />
-                      )}
-
-                      <span className="sidebar__menu-item-button-label">
-                        {getGameTitle(game)}
-                      </span>
-                    </button>
-                  </li>
+                  <SidebarGame key={game.id} game={game} />
                 ))}
             </ul>
           </section>
@@ -262,37 +264,7 @@ export function Sidebar() {
               {filteredLibrary
                 .filter((game) => !game.favorite)
                 .map((game) => (
-                  <li
-                    key={game.id}
-                    className={cn("sidebar__menu-item", {
-                      "sidebar__menu-item--active":
-                        location.pathname ===
-                        `/game/${game.shop}/${game.objectId}`,
-                      "sidebar__menu-item--muted":
-                        game.download?.status === "removed",
-                    })}
-                  >
-                    <button
-                      type="button"
-                      className="sidebar__menu-item-button"
-                      onClick={(event) => handleSidebarGameClick(event, game)}
-                    >
-                      {game.iconUrl ? (
-                        <img
-                          className="sidebar__game-icon"
-                          src={game.iconUrl}
-                          alt={game.title}
-                          loading="lazy"
-                        />
-                      ) : (
-                        <SteamLogo className="sidebar__game-icon" />
-                      )}
-
-                      <span className="sidebar__menu-item-button-label">
-                        {getGameTitle(game)}
-                      </span>
-                    </button>
-                  </li>
+                  <SidebarGame key={game.id} game={game} />
                 ))}
             </ul>
           </section>