feat: improving ui for download source filter

src/main/events/catalogue/get-game-stats.ts

@@ -21,11 +21,9 @@ const getGameStats = async (
     return cachedStats;
   }
 
-  return HydraApi.get<GameStats>(
+  return HydraApi.get<GameStats>(`/games/${shop}/${objectId}/stats`, null, {
-    `/games/stats`,
+    needsAuth: false,
-    { objectId, shop },
+  }).then(async (data) => {
-    { needsAuth: false }
-  ).then(async (data) => {
     await gamesStatsCacheSublevel.put(levelKeys.game(shop, objectId), {
       ...data,
       updatedAt: Date.now(),

src/main/events/catalogue/get-how-long-to-beat.ts

@@ -8,12 +8,7 @@ const getHowLongToBeat = async (
   objectId: string,
   shop: GameShop
 ): Promise<HowLongToBeatCategory[] | null> => {
-  const params = new URLSearchParams({
+  return HydraApi.get(`/games/${shop}/${objectId}/how-long-to-beat`, null, {
-    objectId,
-    shop,
-  });
-
-  return HydraApi.get(`/games/how-long-to-beat?${params.toString()}`, null, {
     needsAuth: false,
   });
 };

src/main/events/catalogue/get-trending-games.ts

@@ -11,7 +11,7 @@ const getTrendingGames = async (_event: Electron.IpcMainInvokeEvent) => {
     .then((language) => language || "en");
 
   const trendingGames = await HydraApi.get<TrendingGame[]>(
-    "/games/featured",
+    "/catalogue/featured",
     { language },
     { needsAuth: false }
   ).catch(() => []);

src/main/events/library/create-steam-shortcut.ts

@@ -87,7 +87,7 @@ const createSteamShortcut = async (
     }
 
     const { assets } = await HydraApi.get<GameStats>(
-      `/games/stats?objectId=${objectId}&shop=${shop}`
+      `/games/${shop}/${objectId}/stats`
     );
 
     const steamUserIds = await getSteamUsersIds();

src/main/events/torrenting/start-game-download.ts

@@ -93,14 +93,9 @@ const startGameDownload = async (
 
     await Promise.all([
       createGame(updatedGame!).catch(() => {}),
-      HydraApi.post(
+      HydraApi.post(`/games/${shop}/${objectId}/download`, null, {
-        "/games/download",
+        needsAuth: false,
-        {
+      }).catch(() => {}),
-          objectId,
-          shop,
-        },
-        { needsAuth: false }
-      ).catch(() => {}),
     ]);
 
     return { ok: true };

src/main/services/achievements/get-game-achievement-data.ts

@@ -45,10 +45,8 @@ export const getGameAchievementData = async (
     .then((language) => language || "en");
 
   return HydraApi.get<SteamAchievement[]>(
-    "/games/achievements",
+    `/games/${shop}/${objectId}/achievements`,
     {
-      shop,
-      objectId,
       language,
     },
     {

src/main/services/ws/events/friend-game-session.ts

@@ -16,9 +16,7 @@ export const friendGameSessionEvent = async (payload: FriendGameSession) => {
 
   const [friend, gameStats] = await Promise.all([
     HydraApi.get<UserProfile>(`/users/${payload.friendId}`),
-    HydraApi.get<GameStats>(
+    HydraApi.get<GameStats>(`/games/steam/${payload.objectId}/stats`),
-      `/games/stats?objectId=${payload.objectId}&shop=steam`
-    ),
   ]).catch(() => [null, null]);
 
   if (friend && gameStats) {

src/renderer/src/pages/game-details/modals/repacks-modal.scss

@@ -2,37 +2,33 @@
 
 .repacks-modal {
   &__filter-container {
-    margin-bottom: 1rem;
+    transition: all 0.3s ease;
-    transition: min-height 0.3s ease;
-
-    &--drawer-open {
-      min-height: 250px;
-    }
   }
 
   &__filter-top {
-    margin-bottom: 1rem;
+    margin-bottom: calc(globals.$spacing-unit * 2);
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    gap: 0.5rem;
+    gap: calc(globals.$spacing-unit * 1);
+    align-items: center;
   }
 
   &__filter-toggle {
-    align-self: flex-start;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: calc(globals.$spacing-unit * 1);
     font-size: globals.$small-font-size;
     font-weight: 600;
     color: var(--color-text-secondary);
-    padding: 0.5rem 0.75rem;
+    padding: calc(globals.$spacing-unit * 1) calc(globals.$spacing-unit * 1.5);
     border-radius: 6px;
     transition: background-color 0.2s ease;
+    white-space: nowrap;
   }
 
   &__repacks {
     display: flex;
-    gap: globals.$spacing-unit;
+    gap: calc(globals.$spacing-unit * 2);
     flex-direction: column;
   }
 
@@ -41,7 +37,7 @@
     text-align: left;
     flex-direction: column;
     align-items: flex-start;
-    gap: globals.$spacing-unit;
+    gap: calc(globals.$spacing-unit * 1);
     color: globals.$body-color;
     padding: calc(globals.$spacing-unit * 2);
   }
@@ -91,8 +87,8 @@
     padding: 0;
     background-color: var(--color-background-light);
     border-radius: 8px;
-    margin-bottom: 1rem;
+    margin-bottom: calc(globals.$spacing-unit * 2);
-    margin-top: calc(globals.$spacing-unit * 0.5);
+    margin-top: calc(globals.$spacing-unit * 1);
     max-height: 0;
     overflow: hidden;
     transition:
@@ -100,8 +96,7 @@
       padding 0.3s ease;
 
     &--open {
-      padding: 0.75rem;
+      max-height: 280px;
-      max-height: 250px;
     }
   }
 
@@ -117,24 +112,30 @@
   &__source-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 0.5rem;
+    gap: calc(globals.$spacing-unit * 1);
     max-height: 200px;
     overflow-y: auto;
     overflow-x: hidden;
     align-items: start;
-    padding-right: 0.25rem;
+    padding: calc(globals.$spacing-unit * 0.5) calc(globals.$spacing-unit * 0.5)
+      calc(globals.$spacing-unit * 0.5) 0;
   }
 
   &__source-item {
-    padding: 0.35rem 0.5rem;
+    padding: calc(globals.$spacing-unit * 0.75) calc(globals.$spacing-unit * 1);
     background: var(--color-surface, rgba(0, 0, 0, 0.03));
-    border: 1px solid var(--color-border);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 6px;
     display: flex;
     align-items: center;
-    min-height: auto;
+    min-height: calc(globals.$spacing-unit * 5);
     box-sizing: border-box;
     width: 100%;
+    transition: border-color 0.2s ease;
+
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.2);
+    }
   }
 
   &__source-item :global(.checkbox-field) {

src/renderer/src/pages/game-details/modals/repacks-modal.tsx

@@ -181,15 +181,17 @@ export function RepacksModal({
         >
           <div className="repacks-modal__filter-top">
             <TextField placeholder={t("filter")} onChange={handleFilter} />
-            <Button
+            {downloadSources.length > 0 && (
-              type="button"
+              <Button
-              theme="outline"
+                type="button"
-              onClick={() => setIsFilterDrawerOpen(!isFilterDrawerOpen)}
+                theme="outline"
-              className="repacks-modal__filter-toggle"
+                onClick={() => setIsFilterDrawerOpen(!isFilterDrawerOpen)}
-            >
+                className="repacks-modal__filter-toggle"
-              {t("filter_by_source")}
+              >
-              {isFilterDrawerOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                {t("filter_by_source")}
-            </Button>
+                {isFilterDrawerOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </Button>
+            )}
           </div>
 
           <div

src/renderer/src/pages/profile/profile-content/user-library-game-card.scss

@@ -133,13 +133,6 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     transition: all ease 0.2s;
 
-    &:hover {
-      background: rgba(0, 0, 0, 0.5);
-      border-color: rgba(255, 255, 255, 0.25);
-      transform: translateY(-1px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    }
-
     &-long {
       display: inline;
       font-size: 12px;