feat: improving ui for download source filter

2026-01-10 21:36:17 +00:00 · 2025-09-30 20:37:44 +01:00
parent 2aebbb8fa2
commit 79498abdb5
10 changed files with 46 additions and 66 deletions
--- a/src/main/events/catalogue/get-game-stats.ts
+++ b/src/main/events/catalogue/get-game-stats.ts
@@ -21,11 +21,9 @@ const getGameStats = async (
    return cachedStats;
  }

-  return HydraApi.get<GameStats>(
-    `/games/stats`,
-    { objectId, shop },
-    { needsAuth: false }
-  ).then(async (data) => {
+  return HydraApi.get<GameStats>(`/games/${shop}/${objectId}/stats`, null, {
+    needsAuth: false,
+  }).then(async (data) => {
    await gamesStatsCacheSublevel.put(levelKeys.game(shop, objectId), {
      ...data,
      updatedAt: Date.now(),
--- a/src/main/events/catalogue/get-how-long-to-beat.ts
+++ b/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({
-    objectId,
-    shop,
-  });
-
-  return HydraApi.get(`/games/how-long-to-beat?${params.toString()}`, null, {
+  return HydraApi.get(`/games/${shop}/${objectId}/how-long-to-beat`, null, {
    needsAuth: false,
  });
 };
--- a/src/main/events/catalogue/get-trending-games.ts
+++ b/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(() => []);
--- a/src/main/events/library/create-steam-shortcut.ts
+++ b/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();
--- a/src/main/events/torrenting/start-game-download.ts
+++ b/src/main/events/torrenting/start-game-download.ts
@@ -93,14 +93,9 @@ const startGameDownload = async (

    await Promise.all([
      createGame(updatedGame!).catch(() => {}),
-      HydraApi.post(
-        "/games/download",
-        {
-          objectId,
-          shop,
-        },
-        { needsAuth: false }
-      ).catch(() => {}),
+      HydraApi.post(`/games/${shop}/${objectId}/download`, null, {
+        needsAuth: false,
+      }).catch(() => {}),
    ]);

    return { ok: true };
--- a/src/main/services/achievements/get-game-achievement-data.ts
+++ b/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,
    },
    {
--- a/src/main/services/ws/events/friend-game-session.ts
+++ b/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>(
-      `/games/stats?objectId=${payload.objectId}&shop=steam`
-    ),
+    HydraApi.get<GameStats>(`/games/steam/${payload.objectId}/stats`),
  ]).catch(() => [null, null]);

  if (friend && gameStats) {
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
@@ -2,37 +2,33 @@

 .repacks-modal {
  &__filter-container {
-    margin-bottom: 1rem;
-    transition: min-height 0.3s ease;
-
-    &--drawer-open {
-      min-height: 250px;
-    }
+    transition: all 0.3s ease;
  }

  &__filter-top {
-    margin-bottom: 1rem;
+    margin-bottom: calc(globals.$spacing-unit * 2);
    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    flex-direction: row;
+    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-top: calc(globals.$spacing-unit * 0.5);
+    margin-bottom: calc(globals.$spacing-unit * 2);
+    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: 250px;
+      max-height: 280px;
    }
  }

@@ -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) {
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
+++ b/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
-              type="button"
-              theme="outline"
-              onClick={() => setIsFilterDrawerOpen(!isFilterDrawerOpen)}
-              className="repacks-modal__filter-toggle"
-            >
-              {t("filter_by_source")}
-              {isFilterDrawerOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            </Button>
+            {downloadSources.length > 0 && (
+              <Button
+                type="button"
+                theme="outline"
+                onClick={() => setIsFilterDrawerOpen(!isFilterDrawerOpen)}
+                className="repacks-modal__filter-toggle"
+              >
+                {t("filter_by_source")}
+                {isFilterDrawerOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </Button>
+            )}
          </div>

          <div
--- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss
+++ b/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;