Merge branch 'main' of https://github.com/hydralauncher/hydra into feat/context_menu-and-enhancement-actions

.env.example

@@ -3,3 +3,5 @@ MAIN_VITE_AUTH_URL=
 MAIN_VITE_WS_URL=
 RENDERER_VITE_REAL_DEBRID_REFERRAL_ID=
 RENDERER_VITE_TORBOX_REFERRAL_CODE=
+VITE_GG_DEALS_API_URL=https://api.gg.deals/v1/prices/by-steam-app-id
+VITE_GG_DEALS_API_KEY=

src/locales/en/translation.json

@@ -241,7 +241,21 @@
     "backup_frozen": "Backup pinned",
     "backup_unfrozen": "Backup unpinned",
     "backup_freeze_failed": "Failed to freeze backup",
-    "backup_freeze_failed_description": "You must leave at least one free slot for automatic backups"
+    "backup_freeze_failed_description": "You must leave at least one free slot for automatic backups",
+    "game_details": "Game Details",
+    "currency_symbol": "$",
+    "currency_country": "us",
+    "prices": "Prices",
+    "no_prices_found": "No prices found",
+    "view_all_prices": "Click to view all prices",
+    "retail_price": "Retail price",
+    "keyshop_price": "Keyshop price",
+    "historical_retail": "Historical retail",
+    "historical_keyshop": "Historical keyshop",
+    "supported_languages": "Supported languages",
+    "language": "Language",
+    "caption": "Caption",
+    "audio": "Audio"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -287,6 +301,7 @@
     "change": "Update",
     "notifications": "Notifications",
     "enable_download_notifications": "When a download is complete",
+    "gg_deals_api_key_description": "gg deals api key. Used to show the lowest price. (https://gg.deals/api/)",
     "enable_repack_list_notifications": "When a new repack is added",
     "real_debrid_api_token_label": "Real-Debrid API token",
     "quit_app_instead_hiding": "Don't hide Hydra when closing",

src/locales/pt-BR/translation.json

@@ -218,7 +218,21 @@
     "backup_frozen": "Backup fixado",
     "backup_unfrozen": "Backup removido dos fixados",
     "backup_freeze_failed": "Falha ao fixar backup",
-    "backup_freeze_failed_description": "Você deve deixar pelo menos um espaço livre para backups automáticos"
+    "backup_freeze_failed_description": "Você deve deixar pelo menos um espaço livre para backups automáticos",
+    "game_details": "Detalhes do Jogo",
+    "currency_symbol": "R$",
+    "currency_country": "br",
+    "prices": "Preços",
+    "no_prices_found": "Nenhum preço encontrado",
+    "view_all_prices": "Clique para ver todos os preços",
+    "retail_price": "Preço de lojas oficiais",
+    "keyshop_price": "Preço em keyshops",
+    "historical_retail": "Preço histórico de lojas oficiais",
+    "historical_keyshop": "Preço histórico em keyshops",
+    "supported_languages": "Idiomas suportados",
+    "language": "Idioma",
+    "caption": "Legenda",
+    "audio": "Áudio"
   },
   "activation": {
     "title": "Ativação",
@@ -264,6 +278,7 @@
     "change": "Explorar...",
     "notifications": "Notificações",
     "enable_download_notifications": "Quando um download for concluído",
+    "gg_deals_api_key_description": "gg deals api key. Usado para mostrar o menor preço. (https://gg.deals/api/)",
     "enable_repack_list_notifications": "Quando a lista de repacks for atualizada",
     "real_debrid_api_token_label": "Token de API do Real-Debrid",
     "quit_app_instead_hiding": "Encerrar o Hydra em vez de apenas minimizá-lo ao fechar",

src/renderer/src/pages/game-details/sidebar/game-language-section.tsx

@@ -0,0 +1,66 @@
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { gameDetailsContext } from "@renderer/context/game-details/game-details.context";
+import { SidebarSection } from "../sidebar-section/sidebar-section";
+
+export function GameLanguageSection() {
+  const { t } = useTranslation("game_details");
+  const { shopDetails, objectId } = useContext(gameDetailsContext);
+
+  const getLanguages = () => {
+    let languages = shopDetails?.supported_languages;
+    if (!languages) return [];
+    languages = languages?.split("<br>")[0];
+    const arrayIdiomas = languages?.split(",");
+    const listLanguages: {
+      language: string;
+      caption: string;
+      audio: string;
+    }[] = [];
+    arrayIdiomas?.forEach((lang) => {
+      const objectLanguage = {
+        language: lang.replace("<strong>*</strong>", ""),
+        caption: "✔",
+        audio: lang.includes("*") ? "✔" : "",
+      };
+      listLanguages.push(objectLanguage);
+    });
+    return listLanguages;
+  };
+
+  return (
+    <SidebarSection title={t("language")}>
+      <div>
+        <h4>{t("supported_languages")}</h4>
+        <table className="table-languages">
+          <thead>
+            <tr>
+              <th>{t("language")}</th>
+              <th>{t("caption")}</th>
+              <th>{t("audio")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {getLanguages().map((lang) => (
+              <tr key={lang.language}>
+                <td>{lang.language}</td>
+                <td>{lang.caption}</td>
+                <td>{lang.audio}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          className="list__item"
+          href={`https://store.steampowered.com/app/${objectId}`}
+        >
+          Link Steam
+        </a>
+      </div>
+    </SidebarSection>
+  );
+}

src/renderer/src/pages/game-details/sidebar/game-prices-section.tsx

@@ -0,0 +1,86 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import { SidebarSection } from "../sidebar-section/sidebar-section";
+import { useTranslation } from "react-i18next";
+import { gameDetailsContext } from "@renderer/context/game-details/game-details.context";
+import { useAppSelector } from "@renderer/hooks";
+
+export function GamePricesSection() {
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
+  const { t } = useTranslation("game_details");
+  const [priceData, setPriceData] = useState<any>(null);
+  const [isLoadingPrices, setIsLoadingPrices] = useState(false);
+  const { objectId } = useContext(gameDetailsContext);
+
+  const fetchGamePrices = useCallback(async (steamAppId: string) => {
+    setIsLoadingPrices(true);
+    try {
+      const apiKey =
+        userPreferences?.ggDealsApiKey || import.meta.env.VITE_GG_DEALS_API_KEY;
+      if (!apiKey) {
+        setPriceData(null);
+        setIsLoadingPrices(false);
+        return;
+      }
+      const url = `${import.meta.env.VITE_GG_DEALS_API_URL}/?ids=${steamAppId}&key=${apiKey}&region=br`;
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const data = await response.json();
+      setPriceData(data.data?.[steamAppId] ?? null);
+    } catch (error) {
+      setPriceData(null);
+    } finally {
+      setIsLoadingPrices(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (objectId) {
+      fetchGamePrices(objectId.toString());
+    }
+  }, [objectId, fetchGamePrices]);
+
+  return (
+    <SidebarSection title={t("prices")}>
+      {isLoadingPrices ? (
+        <div>{t("loading")}</div>
+      ) : priceData ? (
+        <div>
+          <ul className="">
+            <li>
+              <b>{t("retail_price")}</b>: {t("currency_symbol")}
+              {priceData.prices.currentRetail}
+            </li>
+            <li>
+              <b>{t("keyshop_price")}</b>: {t("currency_symbol")}
+              {priceData.prices.currentKeyshops}
+            </li>
+            <li>
+              <b>{t("historical_retail")}</b>: {t("currency_symbol")}
+              {priceData.prices.historicalRetail}
+            </li>
+            <li>
+              <b>{t("historical_keyshop")}</b>: {t("currency_symbol")}
+              {priceData.prices.historicalKeyshops}
+            </li>
+            <li>
+              <a
+                href={priceData.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="list__item"
+              >
+                {t("view_all_prices")}
+              </a>
+            </li>
+          </ul>
+        </div>
+      ) : (
+        <div>{t("no_prices_found")}</div>
+      )}
+    </SidebarSection>
+  );
+}

src/renderer/src/pages/game-details/sidebar/sidebar.scss

@@ -194,3 +194,25 @@
 .achievements-placeholder__blur {
   filter: blur(4px);
 }
+
+.table-languages {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+
+  th,
+  td {
+    padding: globals.$spacing-unit;
+    border-bottom: solid 1px globals.$border-color;
+  }
+
+  th {
+    font-size: globals.$small-font-size;
+    color: globals.$muted-color;
+    font-weight: normal;
+  }
+
+  td {
+    font-size: globals.$body-font-size;
+  }
+}

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -21,6 +21,8 @@ import { SidebarSection } from "../sidebar-section/sidebar-section";
 import { buildGameAchievementPath } from "@renderer/helpers";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import "./sidebar.scss";
+import { GamePricesSection } from "./game-prices-section";
+import { GameLanguageSection } from "./game-language-section";
 
 const achievementsPlaceholder: UserAchievement[] = [
   {
@@ -115,6 +117,9 @@ export function Sidebar() {
 
   return (
     <aside className="content-sidebar">
+      <GameLanguageSection />
+      <GamePricesSection />
+
       {userDetails === null && (
         <SidebarSection title={t("achievements")}>
           <div className="achievements-placeholder">

src/renderer/src/pages/profile/profile-content/profile-animations.ts

@@ -0,0 +1,91 @@
+export const sectionVariants = {
+  collapsed: {
+    opacity: 0,
+    y: -20,
+    height: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+      opacity: { duration: 0.1 },
+      y: { duration: 0.1 },
+      height: { duration: 0.2 },
+    },
+  },
+  expanded: {
+    opacity: 1,
+    y: 0,
+    height: "auto",
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+      opacity: { duration: 0.2, delay: 0.1 },
+      y: { duration: 0.3 },
+      height: { duration: 0.3 },
+    },
+  },
+};
+
+export const gameCardVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20,
+    scale: 0.95,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 0.1, 0.25, 1],
+    },
+  },
+  exit: {
+    opacity: 0,
+    y: -20,
+    scale: 0.95,
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+    },
+  },
+};
+
+export const gameGridVariants = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      staggerChildren: 0.1,
+      delayChildren: 0.1,
+    },
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.2,
+    },
+  },
+};
+
+export const chevronVariants = {
+  collapsed: {
+    rotate: 0,
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+  expanded: {
+    rotate: 90,
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+};
+
+export const GAME_STATS_ANIMATION_DURATION_IN_MS = 3500;

src/renderer/src/pages/profile/profile-content/profile-content.scss

@@ -77,7 +77,6 @@
     flex-shrink: 0;
   }
 
-
   &__collapse-button {
     background: none;
     border: none;

src/renderer/src/pages/profile/profile-content/sort-options.scss

@@ -0,0 +1,56 @@
+@use "../../../scss/globals.scss";
+
+.sort-options {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: calc(globals.$spacing-unit);
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__label {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  &__options {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    font-size: 14px;
+  }
+
+  &__option {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    padding: 4px 0;
+    font-size: 14px;
+    font-weight: 300;
+    transition: all ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &:hover:not(:disabled) {
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    &.active {
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+    }
+
+    span {
+      display: inline-block;
+    }
+  }
+
+  &__separator {
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 14px;
+  }
+}

src/renderer/src/pages/profile/profile-content/sort-options.tsx

@@ -0,0 +1,45 @@
+import { TrophyIcon, ClockIcon, HistoryIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import "./sort-options.scss";
+
+type SortOption = "playtime" | "achievementCount" | "playedRecently";
+
+interface SortOptionsProps {
+  sortBy: SortOption;
+  onSortChange: (sortBy: SortOption) => void;
+}
+
+export function SortOptions({ sortBy, onSortChange }: SortOptionsProps) {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <div className="sort-options__container">
+      <span className="sort-options__label">Sort by:</span>
+      <div className="sort-options__options">
+        <button
+          className={`sort-options__option ${sortBy === "achievementCount" ? "active" : ""}`}
+          onClick={() => onSortChange("achievementCount")}
+        >
+          <TrophyIcon size={16} />
+          <span>{t("achievements_earned")}</span>
+        </button>
+        <span className="sort-options__separator">|</span>
+        <button
+          className={`sort-options__option ${sortBy === "playedRecently" ? "active" : ""}`}
+          onClick={() => onSortChange("playedRecently")}
+        >
+          <HistoryIcon size={16} />
+          <span>{t("played_recently")}</span>
+        </button>
+        <span className="sort-options__separator">|</span>
+        <button
+          className={`sort-options__option ${sortBy === "playtime" ? "active" : ""}`}
+          onClick={() => onSortChange("playtime")}
+        >
+          <ClockIcon size={16} />
+          <span>{t("playtime")}</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/renderer/src/pages/settings/settings-general.tsx

@@ -35,6 +35,7 @@ export function SettingsGeneral() {
 
   const [form, setForm] = useState({
     downloadsPath: "",
+    ggDealsApiKey: "",
     downloadNotificationsEnabled: false,
     repackUpdatesNotificationsEnabled: false,
     friendRequestNotificationsEnabled: false,
@@ -100,6 +101,7 @@ export function SettingsGeneral() {
       setForm((prev) => ({
         ...prev,
         downloadsPath: userPreferences.downloadsPath ?? defaultDownloadsPath,
+        ggDealsApiKey: userPreferences.ggDealsApiKey ?? "",
         downloadNotificationsEnabled:
           userPreferences.downloadNotificationsEnabled ?? false,
         repackUpdatesNotificationsEnabled:
@@ -206,6 +208,12 @@ export function SettingsGeneral() {
         }
       />
 
+      <TextField
+        label={t("gg_deals_api_key_description")}
+        value={form.ggDealsApiKey}
+        onChange={(e) => handleChange({ ggDealsApiKey: e.target.value })}
+      />
+
       <SelectField
         label={t("language")}
         value={form.language}

src/types/level.types.ts

@@ -84,6 +84,7 @@ export type AchievementCustomNotificationPosition =
 
 export interface UserPreferences {
   downloadsPath?: string | null;
+  ggDealsApiKey?: string | null;
   language?: string;
   realDebridApiToken?: string | null;
   torBoxApiToken?: string | null;

src/types/steam.types.ts

@@ -32,6 +32,7 @@ export interface SteamAppDetails {
   publishers: string[];
   genres: SteamGenre[];
   movies?: SteamMovies[];
+  supported_languages: string;
   screenshots?: SteamScreenshot[];
   pc_requirements: {
     minimum: string;