From c4852b89f159a99e6961420cd9b54db2fb284660 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 15 Nov 2025 16:46:02 +0200
Subject: [PATCH 01/72] feat: checkbox to disable new game update badges

---
 src/locales/en/translation.json               |  1 +
 src/main/main.ts                              |  4 +--
 src/main/services/download-sources-checker.ts | 18 +++++++++++-
 .../components/sidebar/sidebar-game-item.tsx  | 15 ++++++----
 .../game-details/modals/repacks-modal.tsx     | 28 +++++++++++++------
 .../src/pages/settings/settings-behavior.tsx  | 14 ++++++++++
 src/types/level.types.ts                      |  1 +
 7 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 5084a4a0..fc786be8 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -544,6 +544,7 @@
     "show_download_speed_in_megabytes": "Show download speed in megabytes per second",
     "extract_files_by_default": "Extract files by default after download",
     "enable_steam_achievements": "Enable search for Steam achievements",
+    "enable_new_download_options_badges": "Show new download options badges",
     "achievement_custom_notification_position": "Achievement custom notification position",
     "top-left": "Top left",
     "top-center": "Top center",
diff --git a/src/main/main.ts b/src/main/main.ts
index 1cadcebd..81d4f53f 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -59,8 +59,8 @@ export const loadState = async () => {
     const { syncDownloadSourcesFromApi } = await import("./services/user");
     void syncDownloadSourcesFromApi();
 
-    // Check for new download options on startup
-    DownloadSourcesChecker.checkForChanges();
+    // Check for new download options on startup (if enabled)
+    void DownloadSourcesChecker.checkForChanges();
     WSClient.connect();
   });
 
diff --git a/src/main/services/download-sources-checker.ts b/src/main/services/download-sources-checker.ts
index 928e3d52..169c199e 100644
--- a/src/main/services/download-sources-checker.ts
+++ b/src/main/services/download-sources-checker.ts
@@ -5,10 +5,12 @@ import {
   updateDownloadSourcesCheckBaseline,
   updateDownloadSourcesSinceValue,
   downloadSourcesSublevel,
+  db,
+  levelKeys,
 } from "@main/level";
 import { logger } from "./logger";
 import { WindowManager } from "./window-manager";
-import type { Game } from "@types";
+import type { Game, UserPreferences } from "@types";
 
 interface DownloadSourcesChangeResponse {
   shop: string;
@@ -101,6 +103,20 @@ export class DownloadSourcesChecker {
     logger.info("DownloadSourcesChecker.checkForChanges() called");
 
     try {
+      const userPreferences = await db.get<string, UserPreferences | null>(
+        levelKeys.userPreferences,
+        {
+          valueEncoding: "json",
+        }
+      );
+
+      if (userPreferences?.enableNewDownloadOptionsBadges === false) {
+        logger.info(
+          "New download options badges are disabled, skipping download sources check"
+        );
+        return;
+      }
+
       // Get all installed games (excluding custom games)
       const installedGames = await gamesSublevel.values().all();
       const nonCustomGames = installedGames.filter(
diff --git a/src/renderer/src/components/sidebar/sidebar-game-item.tsx b/src/renderer/src/components/sidebar/sidebar-game-item.tsx
index 23223fc5..3414688d 100644
--- a/src/renderer/src/components/sidebar/sidebar-game-item.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-game-item.tsx
@@ -5,6 +5,7 @@ import cn from "classnames";
 import { useLocation } from "react-router-dom";
 import { useState } from "react";
 import { GameContextMenu } from "..";
+import { useAppSelector } from "@renderer/hooks";
 
 interface SidebarGameItemProps {
   game: LibraryGame;
@@ -18,6 +19,9 @@ export function SidebarGameItem({
   getGameTitle,
 }: Readonly<SidebarGameItemProps>) {
   const location = useLocation();
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
   const [contextMenu, setContextMenu] = useState<{
     visible: boolean;
     position: { x: number; y: number };
@@ -81,11 +85,12 @@ export function SidebarGameItem({
             {getGameTitle(game)}
           </span>
 
-          {(game.newDownloadOptionsCount ?? 0) > 0 && (
-            <span className="sidebar__game-badge">
-              +{game.newDownloadOptionsCount}
-            </span>
-          )}
+          {userPreferences?.enableNewDownloadOptionsBadges !== false &&
+            (game.newDownloadOptionsCount ?? 0) > 0 && (
+              <span className="sidebar__game-badge">
+                +{game.newDownloadOptionsCount}
+              </span>
+            )}
         </button>
       </li>
 
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
index 91013da0..3754ef83 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
@@ -21,7 +21,12 @@ import { DownloadSettingsModal } from "./download-settings-modal";
 import { gameDetailsContext } from "@renderer/context";
 import { Downloader } from "@shared";
 import { orderBy } from "lodash-es";
-import { useDate, useFeature, useAppDispatch } from "@renderer/hooks";
+import {
+  useDate,
+  useFeature,
+  useAppDispatch,
+  useAppSelector,
+} from "@renderer/hooks";
 import { clearNewDownloadOptions } from "@renderer/features";
 import "./repacks-modal.scss";
 
@@ -68,6 +73,9 @@ export function RepacksModal({
   const { formatDate } = useDate();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
 
   const getHashFromMagnet = (magnet: string) => {
     if (!magnet || typeof magnet !== "string") {
@@ -115,10 +123,12 @@ export function RepacksModal({
       setIsLoadingTimestamp(false);
     };
 
-    if (visible) {
+    if (visible && userPreferences?.enableNewDownloadOptionsBadges !== false) {
       fetchLastCheckTimestamp();
+    } else {
+      setIsLoadingTimestamp(false);
     }
-  }, [visible, repacks]);
+  }, [visible, repacks, userPreferences?.enableNewDownloadOptionsBadges]);
 
   useEffect(() => {
     if (
@@ -326,11 +336,13 @@ export function RepacksModal({
                 >
                   <p className="repacks-modal__repack-title">
                     {repack.title}
-                    {isNewRepack(repack) && (
-                      <span className="repacks-modal__new-badge">
-                        {t("new_download_option")}
-                      </span>
-                    )}
+                    {userPreferences?.enableNewDownloadOptionsBadges !==
+                      false &&
+                      isNewRepack(repack) && (
+                        <span className="repacks-modal__new-badge">
+                          {t("new_download_option")}
+                        </span>
+                      )}
                   </p>
 
                   {isLastDownloadedOption && (
diff --git a/src/renderer/src/pages/settings/settings-behavior.tsx b/src/renderer/src/pages/settings/settings-behavior.tsx
index c5698ef7..0efbcb64 100644
--- a/src/renderer/src/pages/settings/settings-behavior.tsx
+++ b/src/renderer/src/pages/settings/settings-behavior.tsx
@@ -29,6 +29,7 @@ export function SettingsBehavior() {
     enableSteamAchievements: false,
     autoplayGameTrailers: true,
     hideToTrayOnGameStart: false,
+    enableNewDownloadOptionsBadges: true,
   });
 
   const { t } = useTranslation("settings");
@@ -53,6 +54,8 @@ export function SettingsBehavior() {
           userPreferences.enableSteamAchievements ?? false,
         autoplayGameTrailers: userPreferences.autoplayGameTrailers ?? true,
         hideToTrayOnGameStart: userPreferences.hideToTrayOnGameStart ?? false,
+        enableNewDownloadOptionsBadges:
+          userPreferences.enableNewDownloadOptionsBadges ?? true,
       });
     }
   }, [userPreferences]);
@@ -209,6 +212,17 @@ export function SettingsBehavior() {
           <QuestionIcon size={12} />
         </small>
       </div>
+
+      <CheckboxField
+        label={t("enable_new_download_options_badges")}
+        checked={form.enableNewDownloadOptionsBadges}
+        onChange={() =>
+          handleChange({
+            enableNewDownloadOptionsBadges:
+              !form.enableNewDownloadOptionsBadges,
+          })
+        }
+      />
     </>
   );
 }
diff --git a/src/types/level.types.ts b/src/types/level.types.ts
index fd930a12..98ae0eb2 100644
--- a/src/types/level.types.ts
+++ b/src/types/level.types.ts
@@ -124,6 +124,7 @@ export interface UserPreferences {
   enableSteamAchievements?: boolean;
   autoplayGameTrailers?: boolean;
   hideToTrayOnGameStart?: boolean;
+  enableNewDownloadOptionsBadges?: boolean;
 }
 
 export interface ScreenState {

From 2adc132c335a834f55c10a433003418d465fada2 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 15 Nov 2025 16:57:44 +0200
Subject: [PATCH 02/72] fix: removed void from main.ts

---
 src/main/main.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/main/main.ts b/src/main/main.ts
index 81d4f53f..147ed7dd 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -60,7 +60,9 @@ export const loadState = async () => {
     void syncDownloadSourcesFromApi();
 
     // Check for new download options on startup (if enabled)
-    void DownloadSourcesChecker.checkForChanges();
+    (async () => {
+      await DownloadSourcesChecker.checkForChanges();
+    })();
     WSClient.connect();
   });
 

From 1545f42d17d0bf7f46030691bf4cf9cc60a8aeef Mon Sep 17 00:00:00 2001
From: Nikolay Rovdo <nichogaus@gmail.com>
Date: Sun, 30 Nov 2025 14:51:24 +0100
Subject: [PATCH 03/72] Adding chocolatey publishing

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c086cb2e..d360dde4 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 <div align="center">
 
 [<img src="https://raw.githubusercontent.com/hydralauncher/hydra/refs/heads/main/resources/icon.png" width="144"/>](https://help.hydralauncher.gg)
-
   <h1 align="center">Hydra Launcher</h1>
 
   <p align="center">
@@ -10,6 +9,7 @@
 
 [![build](https://img.shields.io/github/actions/workflow/status/hydralauncher/hydra/build.yml)](https://github.com/hydralauncher/hydra/actions)
 [![release](https://img.shields.io/github/package-json/v/hydralauncher/hydra)](https://github.com/hydralauncher/hydra/releases)
+[![chocolatey](https://img.shields.io/chocolatey/v/hydralauncher.svg)](https://community.chocolatey.org/packages/hydralauncher)
 
 ![Hydra Launcher Home Page](./docs/screenshot.png)
 

From 0268829946468ad04bd027d93d6209f219cf677f Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 12 Dec 2025 13:53:12 +0200
Subject: [PATCH 04/72] feat: add Wrapped 2025 view in profile

---
 src/locales/en/translation.json               |   6 +-
 src/main/services/window-manager.ts           |   8 +-
 .../profile-content/profile-content.tsx       |  15 ++-
 .../profile/profile-content/profile-tabs.tsx  |  17 ++-
 .../profile/profile-content/wrapped-tab.scss  |  73 ++++++++++++
 .../profile/profile-content/wrapped-tab.tsx   | 104 ++++++++++++++++++
 6 files changed, 214 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
 create mode 100644 src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index ed8c7d4e..bc6f45ee 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -715,7 +715,11 @@
     "karma_description": "Earned from positive likes on reviews",
     "user_reviews": "Reviews",
     "delete_review": "Delete Review",
-    "loading_reviews": "Loading reviews..."
+    "loading_reviews": "Loading reviews...",
+    "wrapped_2025": "Wrapped 2025",
+    "view_wrapped_title": "View {{displayName}}'s Wrapped 2025?",
+    "view_wrapped_yes": "Yes",
+    "view_wrapped_no": "No"
   },
   "library": {
     "library": "Library",
diff --git a/src/main/services/window-manager.ts b/src/main/services/window-manager.ts
index 04c77619..26d13228 100644
--- a/src/main/services/window-manager.ts
+++ b/src/main/services/window-manager.ts
@@ -36,9 +36,9 @@ export class WindowManager {
   private static initialConfigInitializationMainWindow: Electron.BrowserWindowConstructorOptions =
     {
       width: 1200,
-      height: 720,
+      height: 860,
       minWidth: 1024,
-      minHeight: 540,
+      minHeight: 860,
       backgroundColor: "#1c1c1c",
       titleBarStyle: process.platform === "linux" ? "default" : "hidden",
       icon,
@@ -106,7 +106,7 @@ export class WindowManager {
         valueEncoding: "json",
       }
     );
-    return data ?? { isMaximized: false, height: 720, width: 1200 };
+    return data ?? { isMaximized: false, height: 860, width: 1200 };
   }
 
   private static updateInitialConfig(
@@ -224,7 +224,7 @@ export class WindowManager {
           ? {
               x: undefined,
               y: undefined,
-              height: this.initialConfigInitializationMainWindow.height ?? 720,
+              height: this.initialConfigInitializationMainWindow.height ?? 860,
               width: this.initialConfigInitializationMainWindow.width ?? 1200,
               isMaximized: true,
             }
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index 8176bace..a117c12a 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -21,9 +21,10 @@ import { UserKarmaBox } from "./user-karma-box";
 import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
 import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
-import { ProfileTabs } from "./profile-tabs";
+import { ProfileTabs, type ProfileTabType } from "./profile-tabs";
 import { LibraryTab } from "./library-tab";
 import { ReviewsTab } from "./reviews-tab";
+import { WrappedConfirmModal } from "./wrapped-tab";
 import { AnimatePresence } from "framer-motion";
 import "./profile-content.scss";
 
@@ -95,7 +96,7 @@ export function ProfileContent() {
   const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
   const statsAnimation = useRef(-1);
 
-  const [activeTab, setActiveTab] = useState<"library" | "reviews">("library");
+  const [activeTab, setActiveTab] = useState<ProfileTabType>("library");
 
   // User reviews state
   const [reviews, setReviews] = useState<UserReview[]>([]);
@@ -104,6 +105,7 @@ export function ProfileContent() {
   const [votingReviews, setVotingReviews] = useState<Set<string>>(new Set());
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [reviewToDelete, setReviewToDelete] = useState<string | null>(null);
+  const [wrappedModalVisible, setWrappedModalVisible] = useState(false);
 
   const dispatch = useAppDispatch();
 
@@ -386,6 +388,7 @@ export function ProfileContent() {
             activeTab={activeTab}
             reviewsTotalCount={reviewsTotalCount}
             onTabChange={setActiveTab}
+            onWrappedClick={() => setWrappedModalVisible(true)}
           />
 
           <div className="profile-content__tab-panels">
@@ -439,6 +442,13 @@ export function ProfileContent() {
           onClose={handleDeleteCancel}
           onConfirm={handleDeleteConfirm}
         />
+
+        <WrappedConfirmModal
+          userId={userProfile.id}
+          displayName={userProfile.displayName}
+          isOpen={wrappedModalVisible}
+          onClose={() => setWrappedModalVisible(false)}
+        />
       </section>
     );
   }, [
@@ -460,6 +470,7 @@ export function ProfileContent() {
     isLoadingReviews,
     votingReviews,
     deleteModalVisible,
+    wrappedModalVisible,
   ]);
 
   return (
diff --git a/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx b/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
index bc76f40c..9eac8843 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
@@ -2,16 +2,20 @@ import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import "./profile-content.scss";
 
+export type ProfileTabType = "library" | "reviews";
+
 interface ProfileTabsProps {
-  activeTab: "library" | "reviews";
+  activeTab: ProfileTabType;
   reviewsTotalCount: number;
-  onTabChange: (tab: "library" | "reviews") => void;
+  onTabChange: (tab: ProfileTabType) => void;
+  onWrappedClick: () => void;
 }
 
 export function ProfileTabs({
   activeTab,
   reviewsTotalCount,
   onTabChange,
+  onWrappedClick,
 }: Readonly<ProfileTabsProps>) {
   const { t } = useTranslation("user_profile");
 
@@ -62,6 +66,15 @@ export function ProfileTabs({
           />
         )}
       </div>
+      <div className="profile-content__tab-wrapper">
+        <button
+          type="button"
+          className="profile-content__tab"
+          onClick={onWrappedClick}
+        >
+          {t("wrapped_2025")}
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
new file mode 100644
index 00000000..6669586d
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
@@ -0,0 +1,73 @@
+@use "../../../scss/globals.scss";
+
+.wrapped-fullscreen-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.9);
+    border: none;
+    z-index: 1;
+  }
+
+  &__container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: calc(globals.$spacing-unit * 2);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  &__close-button {
+    position: absolute;
+    top: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 5);
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: white;
+    transition: background 0.2s ease;
+    z-index: 10;
+    pointer-events: auto;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &__content {
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
+    pointer-events: auto;
+  }
+
+  &__iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
new file mode 100644
index 00000000..1716fcc0
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
@@ -0,0 +1,104 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { XIcon } from "@primer/octicons-react";
+import { ConfirmationModal } from "@renderer/components";
+import "./wrapped-tab.scss";
+
+interface WrappedModalProps {
+  userId: string;
+  displayName: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface ScaleConfig {
+  scale: number;
+  width: number;
+  height: number;
+}
+
+const SCALE_CONFIGS: Record<number, ScaleConfig> = {
+  0.25: { scale: 0.25, width: 270, height: 480 },
+  0.3: { scale: 0.3, width: 324, height: 576 },
+  0.5: { scale: 0.5, width: 540, height: 960 },
+};
+
+const getScaleConfigForHeight = (height: number): ScaleConfig => {
+  if (height >= 1000) return SCALE_CONFIGS[0.5];
+  if (height >= 650) return SCALE_CONFIGS[0.3];
+  return SCALE_CONFIGS[0.25];
+};
+
+export function WrappedConfirmModal({
+  userId,
+  displayName,
+  isOpen,
+  onClose,
+}: Readonly<WrappedModalProps>) {
+  const { t } = useTranslation("user_profile");
+  const [showFullscreen, setShowFullscreen] = useState(false);
+  const [config, setConfig] = useState<ScaleConfig>(SCALE_CONFIGS[0.5]);
+
+  useEffect(() => {
+    if (!showFullscreen) return;
+
+    const updateConfig = () => {
+      setConfig(getScaleConfigForHeight(window.innerHeight));
+    };
+
+    updateConfig();
+    window.addEventListener("resize", updateConfig);
+    return () => window.removeEventListener("resize", updateConfig);
+  }, [showFullscreen]);
+
+  const handleConfirm = () => {
+    onClose();
+    setShowFullscreen(true);
+  };
+
+  return (
+    <>
+      <ConfirmationModal
+        visible={isOpen}
+        title={t("wrapped_2025")}
+        descriptionText={t("view_wrapped_title", { displayName })}
+        confirmButtonLabel={t("view_wrapped_yes")}
+        cancelButtonLabel={t("view_wrapped_no")}
+        onConfirm={handleConfirm}
+        onClose={onClose}
+      />
+
+      {showFullscreen && (
+        <dialog className="wrapped-fullscreen-modal" aria-modal="true" open>
+          <button
+            type="button"
+            className="wrapped-fullscreen-modal__backdrop"
+            onClick={() => setShowFullscreen(false)}
+            aria-label="Close wrapped"
+          />
+          <div className="wrapped-fullscreen-modal__container">
+            <button
+              type="button"
+              className="wrapped-fullscreen-modal__close-button"
+              onClick={() => setShowFullscreen(false)}
+              aria-label="Close wrapped"
+            >
+              <XIcon size={24} />
+            </button>
+
+            <div
+              className="wrapped-fullscreen-modal__content"
+              style={{ width: config.width, height: config.height }}
+            >
+              <iframe
+                src={`https://hydrawrapped.com/embed/${userId}?scale=${config.scale}`}
+                className="wrapped-fullscreen-modal__iframe"
+                title="Wrapped 2025"
+              />
+            </div>
+          </div>
+        </dialog>
+      )}
+    </>
+  );
+}

From 5b4b258526b4c0501128271a5fe99112ebde281b Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 12 Dec 2025 17:29:44 +0200
Subject: [PATCH 05/72] refactor: remove WrappedConfirmModal and integrate
 WrappedFullscreenModal in profile

---
 .../profile-content/profile-content.tsx       |  11 --
 .../profile/profile-content/profile-tabs.tsx  |  11 --
 .../profile/profile-content/wrapped-tab.scss  |  27 +++++
 .../profile/profile-content/wrapped-tab.tsx   | 102 ++++++++----------
 .../profile/profile-hero/profile-hero.scss    |   5 +
 .../profile/profile-hero/profile-hero.tsx     |  23 ++++
 6 files changed, 101 insertions(+), 78 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index a117c12a..6e20e686 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -24,7 +24,6 @@ import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { ProfileTabs, type ProfileTabType } from "./profile-tabs";
 import { LibraryTab } from "./library-tab";
 import { ReviewsTab } from "./reviews-tab";
-import { WrappedConfirmModal } from "./wrapped-tab";
 import { AnimatePresence } from "framer-motion";
 import "./profile-content.scss";
 
@@ -105,7 +104,6 @@ export function ProfileContent() {
   const [votingReviews, setVotingReviews] = useState<Set<string>>(new Set());
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [reviewToDelete, setReviewToDelete] = useState<string | null>(null);
-  const [wrappedModalVisible, setWrappedModalVisible] = useState(false);
 
   const dispatch = useAppDispatch();
 
@@ -388,7 +386,6 @@ export function ProfileContent() {
             activeTab={activeTab}
             reviewsTotalCount={reviewsTotalCount}
             onTabChange={setActiveTab}
-            onWrappedClick={() => setWrappedModalVisible(true)}
           />
 
           <div className="profile-content__tab-panels">
@@ -442,13 +439,6 @@ export function ProfileContent() {
           onClose={handleDeleteCancel}
           onConfirm={handleDeleteConfirm}
         />
-
-        <WrappedConfirmModal
-          userId={userProfile.id}
-          displayName={userProfile.displayName}
-          isOpen={wrappedModalVisible}
-          onClose={() => setWrappedModalVisible(false)}
-        />
       </section>
     );
   }, [
@@ -470,7 +460,6 @@ export function ProfileContent() {
     isLoadingReviews,
     votingReviews,
     deleteModalVisible,
-    wrappedModalVisible,
   ]);
 
   return (
diff --git a/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx b/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
index 9eac8843..84d1dd4d 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
@@ -8,14 +8,12 @@ interface ProfileTabsProps {
   activeTab: ProfileTabType;
   reviewsTotalCount: number;
   onTabChange: (tab: ProfileTabType) => void;
-  onWrappedClick: () => void;
 }
 
 export function ProfileTabs({
   activeTab,
   reviewsTotalCount,
   onTabChange,
-  onWrappedClick,
 }: Readonly<ProfileTabsProps>) {
   const { t } = useTranslation("user_profile");
 
@@ -66,15 +64,6 @@ export function ProfileTabs({
           />
         )}
       </div>
-      <div className="profile-content__tab-wrapper">
-        <button
-          type="button"
-          className="profile-content__tab"
-          onClick={onWrappedClick}
-        >
-          {t("wrapped_2025")}
-        </button>
-      </div>
     </div>
   );
 }
diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
index 6669586d..0dc45d8d 100644
--- a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
@@ -58,11 +58,32 @@
   }
 
   &__content {
+    position: relative;
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
     pointer-events: auto;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+  }
+
+  &__spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: wrapped-spin 0.8s linear infinite;
   }
 
   &__iframe {
@@ -71,3 +92,9 @@
     border: none;
   }
 }
+
+@keyframes wrapped-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
index 1716fcc0..a7ca2797 100644
--- a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
@@ -1,12 +1,9 @@
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
 import { XIcon } from "@primer/octicons-react";
-import { ConfirmationModal } from "@renderer/components";
 import "./wrapped-tab.scss";
 
-interface WrappedModalProps {
+interface WrappedFullscreenModalProps {
   userId: string;
-  displayName: string;
   isOpen: boolean;
   onClose: () => void;
 }
@@ -29,18 +26,16 @@ const getScaleConfigForHeight = (height: number): ScaleConfig => {
   return SCALE_CONFIGS[0.25];
 };
 
-export function WrappedConfirmModal({
+export function WrappedFullscreenModal({
   userId,
-  displayName,
   isOpen,
   onClose,
-}: Readonly<WrappedModalProps>) {
-  const { t } = useTranslation("user_profile");
-  const [showFullscreen, setShowFullscreen] = useState(false);
+}: Readonly<WrappedFullscreenModalProps>) {
   const [config, setConfig] = useState<ScaleConfig>(SCALE_CONFIGS[0.5]);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (!showFullscreen) return;
+    if (!isOpen) return;
 
     const updateConfig = () => {
       setConfig(getScaleConfigForHeight(window.innerHeight));
@@ -49,56 +44,51 @@ export function WrappedConfirmModal({
     updateConfig();
     window.addEventListener("resize", updateConfig);
     return () => window.removeEventListener("resize", updateConfig);
-  }, [showFullscreen]);
+  }, [isOpen]);
 
-  const handleConfirm = () => {
-    onClose();
-    setShowFullscreen(true);
-  };
+  useEffect(() => {
+    if (isOpen) {
+      setIsLoading(true);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
 
   return (
-    <>
-      <ConfirmationModal
-        visible={isOpen}
-        title={t("wrapped_2025")}
-        descriptionText={t("view_wrapped_title", { displayName })}
-        confirmButtonLabel={t("view_wrapped_yes")}
-        cancelButtonLabel={t("view_wrapped_no")}
-        onConfirm={handleConfirm}
-        onClose={onClose}
+    <dialog className="wrapped-fullscreen-modal" aria-modal="true" open>
+      <button
+        type="button"
+        className="wrapped-fullscreen-modal__backdrop"
+        onClick={onClose}
+        aria-label="Close wrapped"
       />
+      <div className="wrapped-fullscreen-modal__container">
+        <button
+          type="button"
+          className="wrapped-fullscreen-modal__close-button"
+          onClick={onClose}
+          aria-label="Close wrapped"
+        >
+          <XIcon size={24} />
+        </button>
 
-      {showFullscreen && (
-        <dialog className="wrapped-fullscreen-modal" aria-modal="true" open>
-          <button
-            type="button"
-            className="wrapped-fullscreen-modal__backdrop"
-            onClick={() => setShowFullscreen(false)}
-            aria-label="Close wrapped"
-          />
-          <div className="wrapped-fullscreen-modal__container">
-            <button
-              type="button"
-              className="wrapped-fullscreen-modal__close-button"
-              onClick={() => setShowFullscreen(false)}
-              aria-label="Close wrapped"
-            >
-              <XIcon size={24} />
-            </button>
-
-            <div
-              className="wrapped-fullscreen-modal__content"
-              style={{ width: config.width, height: config.height }}
-            >
-              <iframe
-                src={`https://hydrawrapped.com/embed/${userId}?scale=${config.scale}`}
-                className="wrapped-fullscreen-modal__iframe"
-                title="Wrapped 2025"
-              />
+        <div
+          className="wrapped-fullscreen-modal__content"
+          style={{ width: config.width, height: config.height }}
+        >
+          {isLoading && (
+            <div className="wrapped-fullscreen-modal__loader">
+              <div className="wrapped-fullscreen-modal__spinner" />
             </div>
-          </div>
-        </dialog>
-      )}
-    </>
+          )}
+          <iframe
+            src={`https://hydrawrapped.com/embed/${userId}?scale=${config.scale}`}
+            className="wrapped-fullscreen-modal__iframe"
+            title="Wrapped 2025"
+            onLoad={() => setIsLoading(false)}
+          />
+        </div>
+      </div>
+    </dialog>
   );
 }
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 834cb0cf..cda6b0d1 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -120,6 +120,11 @@
     }
   }
 
+  &__left-actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+
   &__actions {
     display: flex;
     gap: globals.$spacing-unit;
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index fc354d01..b54e7114 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -6,6 +6,7 @@ import {
   PencilIcon,
   PersonAddIcon,
   SignOutIcon,
+  TrophyIcon,
   XCircleFillIcon,
 } from "@primer/octicons-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
@@ -22,6 +23,7 @@ import { useNavigate } from "react-router-dom";
 
 import type { FriendRequestAction } from "@types";
 import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal";
+import { WrappedFullscreenModal } from "../profile-content/wrapped-tab";
 import Skeleton from "react-loading-skeleton";
 import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button";
 import { Tooltip } from "react-tooltip";
@@ -33,6 +35,7 @@ type FriendAction =
 
 export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
+  const [showWrappedModal, setShowWrappedModal] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
 
   const {
@@ -272,6 +275,14 @@ export function ProfileHero() {
         onClose={() => setShowEditProfileModal(false)}
       />
 
+      {userProfile && (
+        <WrappedFullscreenModal
+          userId={userProfile.id}
+          isOpen={showWrappedModal}
+          onClose={() => setShowWrappedModal(false)}
+        />
+      )}
+
       <section
         className="profile-hero__content-box"
         style={{ background: !backgroundImage ? heroBackground : undefined }}
@@ -378,6 +389,18 @@ export function ProfileHero() {
             background: !backgroundImage ? heroBackground : undefined,
           }}
         >
+          {userProfile && (
+            <div className="profile-hero__left-actions">
+              <Button
+                theme="outline"
+                onClick={() => setShowWrappedModal(true)}
+                className="profile-hero__button--outline"
+              >
+                <TrophyIcon />
+                {t("wrapped_2025")}
+              </Button>
+            </div>
+          )}
           <div className="profile-hero__actions">{profileActions}</div>
         </div>
       </section>

From c025dc199d614a83c485e3d1394cd2cd5cf7779e Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 12 Dec 2025 17:49:12 +0200
Subject: [PATCH 06/72] style(profile): add overlay to WrappedFullscreenModal
 for improved UI interaction

---
 .../src/pages/profile/profile-content/wrapped-tab.scss     | 7 +++++++
 .../src/pages/profile/profile-content/wrapped-tab.tsx      | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
index 0dc45d8d..641d571b 100644
--- a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
@@ -86,6 +86,13 @@
     animation: wrapped-spin 0.8s linear infinite;
   }
 
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    cursor: default;
+  }
+
   &__iframe {
     width: 100%;
     height: 100%;
diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
index a7ca2797..6b04ef68 100644
--- a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
@@ -81,6 +81,7 @@ export function WrappedFullscreenModal({
               <div className="wrapped-fullscreen-modal__spinner" />
             </div>
           )}
+          <div className="wrapped-fullscreen-modal__overlay" />
           <iframe
             src={`https://hydrawrapped.com/embed/${userId}?scale=${config.scale}`}
             className="wrapped-fullscreen-modal__iframe"

From 879f0baad7ce67e1504ebe07a2ec4014ed0bd1eb Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 12 Dec 2025 17:51:31 +0200
Subject: [PATCH 07/72] refactor(profile): remove overlay from
 WrappedFullscreenModal to streamline UI

---
 .../src/pages/profile/profile-content/wrapped-tab.scss     | 7 -------
 .../src/pages/profile/profile-content/wrapped-tab.tsx      | 1 -
 2 files changed, 8 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
index 641d571b..0dc45d8d 100644
--- a/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.scss
@@ -86,13 +86,6 @@
     animation: wrapped-spin 0.8s linear infinite;
   }
 
-  &__overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    cursor: default;
-  }
-
   &__iframe {
     width: 100%;
     height: 100%;
diff --git a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
index 6b04ef68..a7ca2797 100644
--- a/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
+++ b/src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx
@@ -81,7 +81,6 @@ export function WrappedFullscreenModal({
               <div className="wrapped-fullscreen-modal__spinner" />
             </div>
           )}
-          <div className="wrapped-fullscreen-modal__overlay" />
           <iframe
             src={`https://hydrawrapped.com/embed/${userId}?scale=${config.scale}`}
             className="wrapped-fullscreen-modal__iframe"

From a152c89d7f0e1efba35374d659de8f959f7a73d4 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 12 Dec 2025 20:42:54 +0200
Subject: [PATCH 08/72] feat(profile): update Wrapped 2025 button and add new
 gradient style

---
 src/locales/en/translation.json               |  4 +--
 .../profile/profile-hero/profile-hero.scss    | 30 +++++++++++++++++++
 .../profile/profile-hero/profile-hero.tsx     |  6 ++--
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index bc6f45ee..cf15c138 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -717,9 +717,7 @@
     "delete_review": "Delete Review",
     "loading_reviews": "Loading reviews...",
     "wrapped_2025": "Wrapped 2025",
-    "view_wrapped_title": "View {{displayName}}'s Wrapped 2025?",
-    "view_wrapped_yes": "Yes",
-    "view_wrapped_no": "No"
+    "view_wrapped_button": "View {{displayName}}'s Wrapped 2025"
   },
   "library": {
     "library": "Library",
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index cda6b0d1..6ceeca1a 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -136,5 +136,35 @@
     &--outline {
       border-color: globals.$body-color;
     }
+
+    &--wrapped {
+      background: linear-gradient(
+        120deg,
+        #2A57FF 0%,
+        #2951E6 11%,
+        #2F5BFF 16%,
+        #2C56E8 29%,
+        #244ACC 34%,
+        #2245C2 40%,
+        #3A6BFF 45%,
+        #3766F2 50%,
+        #2444B8 56%,
+        #122A73 82%,
+        #2348B3 86%,
+        #1F429E 87%,
+        #10286A 93%,
+        #0E2A63 100%
+      );
+      background-color: #2A57FF;
+      background-size: 105% 100%;
+      background-position: 100% 50%;
+      border: none;
+      color: white;
+      transition: background-position 0.4s ease;
+
+      &:hover {
+        background-position: 0% 50%;
+      }
+    }
   }
 }
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index b54e7114..31f6387e 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -394,10 +394,12 @@ export function ProfileHero() {
               <Button
                 theme="outline"
                 onClick={() => setShowWrappedModal(true)}
-                className="profile-hero__button--outline"
+                className="profile-hero__button--wrapped"
               >
                 <TrophyIcon />
-                {t("wrapped_2025")}
+                {t("view_wrapped_button", {
+                  displayName: userProfile.displayName,
+                })}
               </Button>
             </div>
           )}

From 8555274589ac7ba265d73bf3ed3c101f16edcc46 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 12 Dec 2025 20:43:14 +0200
Subject: [PATCH 09/72] ci: formatting

---
 .../profile/profile-hero/profile-hero.scss    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 6ceeca1a..12ea116b 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -140,22 +140,22 @@
     &--wrapped {
       background: linear-gradient(
         120deg,
-        #2A57FF 0%,
-        #2951E6 11%,
-        #2F5BFF 16%,
-        #2C56E8 29%,
-        #244ACC 34%,
-        #2245C2 40%,
-        #3A6BFF 45%,
-        #3766F2 50%,
-        #2444B8 56%,
-        #122A73 82%,
-        #2348B3 86%,
-        #1F429E 87%,
-        #10286A 93%,
-        #0E2A63 100%
+        #2a57ff 0%,
+        #2951e6 11%,
+        #2f5bff 16%,
+        #2c56e8 29%,
+        #244acc 34%,
+        #2245c2 40%,
+        #3a6bff 45%,
+        #3766f2 50%,
+        #2444b8 56%,
+        #122a73 82%,
+        #2348b3 86%,
+        #1f429e 87%,
+        #10286a 93%,
+        #0e2a63 100%
       );
-      background-color: #2A57FF;
+      background-color: #2a57ff;
       background-size: 105% 100%;
       background-position: 100% 50%;
       border: none;

From 21a0ad15003022997758ab8e410863935650d4b2 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 13 Dec 2025 09:16:54 +0200
Subject: [PATCH 10/72] feat(profile): add translation for "View My Wrapped
 2025" button

---
 src/locales/en/translation.json                           | 1 +
 .../src/pages/profile/profile-hero/profile-hero.tsx       | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index cf15c138..2e7d8efe 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -717,6 +717,7 @@
     "delete_review": "Delete Review",
     "loading_reviews": "Loading reviews...",
     "wrapped_2025": "Wrapped 2025",
+    "view_my_wrapped_button": "View My Wrapped 2025",
     "view_wrapped_button": "View {{displayName}}'s Wrapped 2025"
   },
   "library": {
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index 31f6387e..d1af6f91 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -397,9 +397,11 @@ export function ProfileHero() {
                 className="profile-hero__button--wrapped"
               >
                 <TrophyIcon />
-                {t("view_wrapped_button", {
-                  displayName: userProfile.displayName,
-                })}
+                {isMe
+                  ? t("view_my_wrapped_button")
+                  : t("view_wrapped_button", {
+                      displayName: userProfile.displayName,
+                    })}
               </Button>
             </div>
           )}

From 77b6f1b2ad6f6d98153d2c10fe8693c770180b54 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 13 Dec 2025 16:10:57 +0200
Subject: [PATCH 11/72] feat: add peak speed tracking and management in
 download slice

---
 src/renderer/src/features/download-slice.ts   | 17 +++++++
 .../src/pages/downloads/download-group.tsx    | 47 +++++++++----------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/renderer/src/features/download-slice.ts b/src/renderer/src/features/download-slice.ts
index 0330cca3..ae0c9c9d 100644
--- a/src/renderer/src/features/download-slice.ts
+++ b/src/renderer/src/features/download-slice.ts
@@ -12,6 +12,7 @@ export interface DownloadState {
   gameId: string | null;
   gamesWithDeletionInProgress: string[];
   extraction: ExtractionInfo | null;
+  peakSpeeds: Record<string, number>;
 }
 
 const initialState: DownloadState = {
@@ -19,6 +20,7 @@ const initialState: DownloadState = {
   gameId: null,
   gamesWithDeletionInProgress: [],
   extraction: null,
+  peakSpeeds: {},
 };
 
 export const downloadSlice = createSlice({
@@ -62,6 +64,19 @@ export const downloadSlice = createSlice({
     clearExtraction: (state) => {
       state.extraction = null;
     },
+    updatePeakSpeed: (
+      state,
+      action: PayloadAction<{ gameId: string; speed: number }>
+    ) => {
+      const { gameId, speed } = action.payload;
+      const currentPeak = state.peakSpeeds[gameId] || 0;
+      if (speed > currentPeak) {
+        state.peakSpeeds[gameId] = speed;
+      }
+    },
+    clearPeakSpeed: (state, action: PayloadAction<string>) => {
+      state.peakSpeeds[action.payload] = 0;
+    },
   },
 });
 
@@ -72,4 +87,6 @@ export const {
   removeGameFromDeleting,
   setExtractionProgress,
   clearExtraction,
+  updatePeakSpeed,
+  clearPeakSpeed,
 } = downloadSlice.actions;
diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index 52fbcdfd..56ab398b 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -11,10 +11,12 @@ import { addMilliseconds } from "date-fns";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import {
   useAppSelector,
+  useAppDispatch,
   useDownload,
   useLibrary,
   useDate,
 } from "@renderer/hooks";
+import { updatePeakSpeed, clearPeakSpeed } from "@renderer/features";
 
 import "./download-group.scss";
 import { useTranslation } from "react-i18next";
@@ -512,7 +514,8 @@ export function DownloadGroup({
 
   const { formatDistance } = useDate();
 
-  const [peakSpeeds, setPeakSpeeds] = useState<Record<string, number>>({});
+  const dispatch = useAppDispatch();
+  const peakSpeeds = useAppSelector((state) => state.download.peakSpeeds);
   const speedHistoryRef = useRef<Record<string, number[]>>({});
   const [dominantColors, setDominantColors] = useState<Record<string, string>>(
     {}
@@ -577,28 +580,23 @@ export function DownloadGroup({
   }, [library, lastPacket?.gameId]);
 
   useEffect(() => {
-    if (lastPacket?.gameId && lastPacket.downloadSpeed !== undefined) {
-      const gameId = lastPacket.gameId;
+    if (!lastPacket?.gameId || lastPacket.downloadSpeed === undefined) return;
 
-      const currentPeak = peakSpeeds[gameId] || 0;
-      if (lastPacket.downloadSpeed > currentPeak) {
-        setPeakSpeeds((prev) => ({
-          ...prev,
-          [gameId]: lastPacket.downloadSpeed,
-        }));
-      }
+    const gameId = lastPacket.gameId;
+    const downloadSpeed = lastPacket.downloadSpeed;
 
-      if (!speedHistoryRef.current[gameId]) {
-        speedHistoryRef.current[gameId] = [];
-      }
+    dispatch(updatePeakSpeed({ gameId, speed: downloadSpeed }));
 
-      speedHistoryRef.current[gameId].push(lastPacket.downloadSpeed);
-
-      if (speedHistoryRef.current[gameId].length > 120) {
-        speedHistoryRef.current[gameId].shift();
-      }
+    if (!speedHistoryRef.current[gameId]) {
+      speedHistoryRef.current[gameId] = [];
     }
-  }, [lastPacket?.gameId, lastPacket?.downloadSpeed, peakSpeeds]);
+
+    speedHistoryRef.current[gameId].push(downloadSpeed);
+
+    if (speedHistoryRef.current[gameId].length > 120) {
+      speedHistoryRef.current[gameId].shift();
+    }
+  }, [lastPacket, dispatch]);
 
   useEffect(() => {
     for (const game of library) {
@@ -610,11 +608,11 @@ export function DownloadGroup({
         // Fresh download - clear any old data
         if (speedHistoryRef.current[game.id]?.length > 0) {
           speedHistoryRef.current[game.id] = [];
-          setPeakSpeeds((prev) => ({ ...prev, [game.id]: 0 }));
+          dispatch(clearPeakSpeed(game.id));
         }
       }
     }
-  }, [library]);
+  }, [library, dispatch]);
 
   useEffect(() => {
     const timeouts: NodeJS.Timeout[] = [];
@@ -624,9 +622,10 @@ export function DownloadGroup({
         game.download?.progress === 1 &&
         speedHistoryRef.current[game.id]?.length > 0
       ) {
+        const gameId = game.id;
         const timeout = setTimeout(() => {
-          speedHistoryRef.current[game.id] = [];
-          setPeakSpeeds((prev) => ({ ...prev, [game.id]: 0 }));
+          speedHistoryRef.current[gameId] = [];
+          dispatch(clearPeakSpeed(gameId));
         }, 10_000);
         timeouts.push(timeout);
       }
@@ -637,7 +636,7 @@ export function DownloadGroup({
         clearTimeout(timeout);
       }
     };
-  }, [library]);
+  }, [library, dispatch]);
 
   useEffect(() => {
     if (library.length > 0 && title === t("download_in_progress")) {

From 67f863e0f32a245346bfbb00d1f8964adb9856fc Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 13 Dec 2025 17:41:15 +0200
Subject: [PATCH 12/72] fix: remove unused peak speed update dispatch in
 DownloadGroup component

---
 src/renderer/src/features/download-slice.ts         | 9 +++++++++
 src/renderer/src/pages/downloads/download-group.tsx | 6 ++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/features/download-slice.ts b/src/renderer/src/features/download-slice.ts
index ae0c9c9d..80d78b0d 100644
--- a/src/renderer/src/features/download-slice.ts
+++ b/src/renderer/src/features/download-slice.ts
@@ -30,6 +30,15 @@ export const downloadSlice = createSlice({
     setLastPacket: (state, action: PayloadAction<DownloadProgress | null>) => {
       state.lastPacket = action.payload;
       if (!state.gameId && action.payload) state.gameId = action.payload.gameId;
+
+      // Track peak speed atomically when packet arrives
+      if (action.payload?.gameId && action.payload.downloadSpeed != null) {
+        const { gameId, downloadSpeed } = action.payload;
+        const currentPeak = state.peakSpeeds[gameId] || 0;
+        if (downloadSpeed > currentPeak) {
+          state.peakSpeeds[gameId] = downloadSpeed;
+        }
+      }
     },
     clearDownload: (state) => {
       state.lastPacket = null;
diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index 56ab398b..7c3f0f77 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -16,7 +16,7 @@ import {
   useLibrary,
   useDate,
 } from "@renderer/hooks";
-import { updatePeakSpeed, clearPeakSpeed } from "@renderer/features";
+import { clearPeakSpeed } from "@renderer/features";
 
 import "./download-group.scss";
 import { useTranslation } from "react-i18next";
@@ -585,8 +585,6 @@ export function DownloadGroup({
     const gameId = lastPacket.gameId;
     const downloadSpeed = lastPacket.downloadSpeed;
 
-    dispatch(updatePeakSpeed({ gameId, speed: downloadSpeed }));
-
     if (!speedHistoryRef.current[gameId]) {
       speedHistoryRef.current[gameId] = [];
     }
@@ -596,7 +594,7 @@ export function DownloadGroup({
     if (speedHistoryRef.current[gameId].length > 120) {
       speedHistoryRef.current[gameId].shift();
     }
-  }, [lastPacket, dispatch]);
+  }, [lastPacket]);
 
   useEffect(() => {
     for (const game of library) {

From 67ea9e78a2d5ba50bd588312be9af2d340971b41 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 13 Dec 2025 18:14:52 +0200
Subject: [PATCH 13/72] feat: enhance download tracking by adding speed history
 management in download slice

---
 src/renderer/src/features/download-slice.ts   | 17 ++++-
 .../src/pages/downloads/download-group.tsx    | 74 +++----------------
 2 files changed, 28 insertions(+), 63 deletions(-)

diff --git a/src/renderer/src/features/download-slice.ts b/src/renderer/src/features/download-slice.ts
index 80d78b0d..f70421c0 100644
--- a/src/renderer/src/features/download-slice.ts
+++ b/src/renderer/src/features/download-slice.ts
@@ -13,6 +13,7 @@ export interface DownloadState {
   gamesWithDeletionInProgress: string[];
   extraction: ExtractionInfo | null;
   peakSpeeds: Record<string, number>;
+  speedHistory: Record<string, number[]>;
 }
 
 const initialState: DownloadState = {
@@ -21,6 +22,7 @@ const initialState: DownloadState = {
   gamesWithDeletionInProgress: [],
   extraction: null,
   peakSpeeds: {},
+  speedHistory: {},
 };
 
 export const downloadSlice = createSlice({
@@ -31,13 +33,25 @@ export const downloadSlice = createSlice({
       state.lastPacket = action.payload;
       if (!state.gameId && action.payload) state.gameId = action.payload.gameId;
 
-      // Track peak speed atomically when packet arrives
+      // Track peak speed and speed history atomically when packet arrives
       if (action.payload?.gameId && action.payload.downloadSpeed != null) {
         const { gameId, downloadSpeed } = action.payload;
+
+        // Update peak speed if this is higher
         const currentPeak = state.peakSpeeds[gameId] || 0;
         if (downloadSpeed > currentPeak) {
           state.peakSpeeds[gameId] = downloadSpeed;
         }
+
+        // Update speed history for chart
+        if (!state.speedHistory[gameId]) {
+          state.speedHistory[gameId] = [];
+        }
+        state.speedHistory[gameId].push(downloadSpeed);
+        // Keep only last 120 entries
+        if (state.speedHistory[gameId].length > 120) {
+          state.speedHistory[gameId].shift();
+        }
       }
     },
     clearDownload: (state) => {
@@ -85,6 +99,7 @@ export const downloadSlice = createSlice({
     },
     clearPeakSpeed: (state, action: PayloadAction<string>) => {
       state.peakSpeeds[action.payload] = 0;
+      state.speedHistory[action.payload] = [];
     },
   },
 });
diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index 7c3f0f77..bf6584f2 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -11,12 +11,10 @@ import { addMilliseconds } from "date-fns";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import {
   useAppSelector,
-  useAppDispatch,
   useDownload,
   useLibrary,
   useDate,
 } from "@renderer/hooks";
-import { clearPeakSpeed } from "@renderer/features";
 
 import "./download-group.scss";
 import { useTranslation } from "react-i18next";
@@ -514,9 +512,9 @@ export function DownloadGroup({
 
   const { formatDistance } = useDate();
 
-  const dispatch = useAppDispatch();
+  // Get speed history and peak speeds from Redux (centralized state)
+  const speedHistory = useAppSelector((state) => state.download.speedHistory);
   const peakSpeeds = useAppSelector((state) => state.download.peakSpeeds);
-  const speedHistoryRef = useRef<Record<string, number[]>>({});
   const [dominantColors, setDominantColors] = useState<Record<string, string>>(
     {}
   );
@@ -579,62 +577,8 @@ export function DownloadGroup({
     });
   }, [library, lastPacket?.gameId]);
 
-  useEffect(() => {
-    if (!lastPacket?.gameId || lastPacket.downloadSpeed === undefined) return;
-
-    const gameId = lastPacket.gameId;
-    const downloadSpeed = lastPacket.downloadSpeed;
-
-    if (!speedHistoryRef.current[gameId]) {
-      speedHistoryRef.current[gameId] = [];
-    }
-
-    speedHistoryRef.current[gameId].push(downloadSpeed);
-
-    if (speedHistoryRef.current[gameId].length > 120) {
-      speedHistoryRef.current[gameId].shift();
-    }
-  }, [lastPacket]);
-
-  useEffect(() => {
-    for (const game of library) {
-      if (
-        game.download &&
-        game.download.progress < 0.01 &&
-        game.download.status !== "paused"
-      ) {
-        // Fresh download - clear any old data
-        if (speedHistoryRef.current[game.id]?.length > 0) {
-          speedHistoryRef.current[game.id] = [];
-          dispatch(clearPeakSpeed(game.id));
-        }
-      }
-    }
-  }, [library, dispatch]);
-
-  useEffect(() => {
-    const timeouts: NodeJS.Timeout[] = [];
-
-    for (const game of library) {
-      if (
-        game.download?.progress === 1 &&
-        speedHistoryRef.current[game.id]?.length > 0
-      ) {
-        const gameId = game.id;
-        const timeout = setTimeout(() => {
-          speedHistoryRef.current[gameId] = [];
-          dispatch(clearPeakSpeed(gameId));
-        }, 10_000);
-        timeouts.push(timeout);
-      }
-    }
-
-    return () => {
-      for (const timeout of timeouts) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [library, dispatch]);
+  // Speed history and peak speeds are now tracked in Redux (in setLastPacket reducer)
+  // No local effect needed - data is updated atomically when packets arrive
 
   useEffect(() => {
     if (library.length > 0 && title === t("download_in_progress")) {
@@ -839,7 +783,13 @@ export function DownloadGroup({
       ? (lastPacket?.downloadSpeed ?? 0)
       : 0;
     const finalDownloadSize = getFinalDownloadSize(game);
-    const peakSpeed = peakSpeeds[game.id] || 0;
+    // Use lastPacket.gameId for lookup since that's the key used to store the data
+    // Fall back to game.id if lastPacket is not available
+    const dataKey = lastPacket?.gameId ?? game.id;
+    const gameSpeedHistory = speedHistory[dataKey] ?? [];
+    const storedPeak = peakSpeeds[dataKey];
+    // Use stored peak if available and > 0, otherwise use current speed as initial value
+    const peakSpeed = storedPeak !== undefined && storedPeak > 0 ? storedPeak : downloadSpeed;
 
     let currentProgress = game.download?.progress || 0;
     if (isGameExtracting) {
@@ -861,7 +811,7 @@ export function DownloadGroup({
         currentProgress={currentProgress}
         dominantColor={dominantColor}
         lastPacket={lastPacket}
-        speedHistory={speedHistoryRef.current[game.id] || []}
+        speedHistory={gameSpeedHistory}
         formatSpeed={formatSpeed}
         calculateETA={calculateETA}
         pauseDownload={pauseDownload}

From 78d2be85f2fc51b20267d8c39b1a1c1dc561e8ba Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 13 Dec 2025 18:15:21 +0200
Subject: [PATCH 14/72] style: format peak speed calculation for improved
 readability in DownloadGroup component

---
 src/renderer/src/pages/downloads/download-group.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index bf6584f2..31d74d2e 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -789,7 +789,8 @@ export function DownloadGroup({
     const gameSpeedHistory = speedHistory[dataKey] ?? [];
     const storedPeak = peakSpeeds[dataKey];
     // Use stored peak if available and > 0, otherwise use current speed as initial value
-    const peakSpeed = storedPeak !== undefined && storedPeak > 0 ? storedPeak : downloadSpeed;
+    const peakSpeed =
+      storedPeak !== undefined && storedPeak > 0 ? storedPeak : downloadSpeed;
 
     let currentProgress = game.download?.progress || 0;
     if (isGameExtracting) {

From 95a7bc2236feeb83fb320189a0f411e1a7002f89 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 13 Dec 2025 18:32:16 +0200
Subject: [PATCH 15/72] feat: add new translation keys for network and peak in
 English and Portuguese locales

---
 src/locales/en/translation.json    | 4 +++-
 src/locales/pt-BR/translation.json | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 9be4ff26..85a44236 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -420,7 +420,9 @@
     "delete_archive_title": "Would you like to delete {{fileName}}?",
     "delete_archive_description": "The file has been successfully extracted and it's no longer needed.",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "network": "NETWORK",
+    "peak": "PEAK"
   },
   "settings": {
     "downloads_path": "Downloads path",
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index ee0da176..719f72f7 100755
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -408,7 +408,9 @@
     "delete_archive_title": "Deseja deletar {{fileName}}?",
     "delete_archive_description": "O arquivo foi extraído com sucesso e não é mais necessário.",
     "yes": "Sim",
-    "no": "Não"
+    "no": "Não",
+    "network": "REDE",
+    "peak": "PICO"
   },
   "settings": {
     "downloads_path": "Diretório dos downloads",

From 142bd3156c3a045a547e9fa9045e1d36c5400d6d Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sun, 14 Dec 2025 11:27:29 +0200
Subject: [PATCH 16/72] fix: ensure downloader value is properly checked and
 converted to number in DownloadGroup component

---
 src/renderer/src/pages/downloads/download-group.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index 31d74d2e..6a22148a 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -412,10 +412,12 @@ function HeroDownloadView({
                 </div>
               )}
 
-            {game.download?.downloader && (
+            {game.download?.downloader !== undefined && (
               <div className="download-group__stat-item">
                 <div className="download-group__stat-content">
-                  <Badge>{DOWNLOADER_NAME[game.download.downloader]}</Badge>
+                  <Badge>
+                    {DOWNLOADER_NAME[Number(game.download.downloader)]}
+                  </Badge>
                 </div>
               </div>
             )}
@@ -856,7 +858,9 @@ export function DownloadGroup({
                 </button>
                 <div className="download-group__simple-meta">
                   <div className="download-group__simple-meta-row">
-                    <Badge>{DOWNLOADER_NAME[game.download!.downloader]}</Badge>
+                    <Badge>
+                      {DOWNLOADER_NAME[Number(game.download!.downloader)]}
+                    </Badge>
                   </div>
                   <div className="download-group__simple-meta-row">
                     {extraction?.visibleId === game.id ? (

From ccb754fa13a2e95736a95fce90e2349d23bfaa39 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sun, 14 Dec 2025 15:14:54 +0200
Subject: [PATCH 17/72] feat(profile): add hasCompletedWrapped2025 flag to
 UserProfile and update ProfileHero rendering logic

---
 src/renderer/src/pages/profile/profile-hero/profile-hero.tsx | 2 +-
 src/types/index.ts                                           | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index d1af6f91..8293f331 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -389,7 +389,7 @@ export function ProfileHero() {
             background: !backgroundImage ? heroBackground : undefined,
           }}
         >
-          {userProfile && (
+          {userProfile?.hasCompletedWrapped2025 && (
             <div className="profile-hero__left-actions">
               <Button
                 theme="outline"
diff --git a/src/types/index.ts b/src/types/index.ts
index 9c4f5b28..69450569 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -209,6 +209,7 @@ export interface UserProfile {
     backupsPerGameLimit: number;
   };
   badges: string[];
+  hasCompletedWrapped2025: boolean;
 }
 
 export interface UpdateProfileRequest {

From b8352be2747586311ed46753dbe2417733ddd364 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:18:21 +0200
Subject: [PATCH 18/72] feat: add local notifications management and UI
 integration

---
 proto                                         |   2 +-
 src/locales/en/translation.json               |  42 ++
 .../clear-all-local-notifications.ts          |   8 +
 .../delete-local-notification.ts              |  11 +
 .../get-local-notifications-count.ts          |   8 +
 .../notifications/get-local-notifications.ts  |   8 +
 src/main/events/notifications/index.ts        |   6 +
 .../mark-all-local-notifications-read.ts      |   8 +
 .../mark-local-notification-read.ts           |  11 +
 src/main/generated/envelope.ts                | 131 +++++-
 src/main/level/sublevels/index.ts             |   1 +
 src/main/level/sublevels/keys.ts              |   1 +
 .../level/sublevels/local-notifications.ts    |  11 +
 src/main/services/index.ts                    |   1 +
 src/main/services/notifications/index.ts      |  74 +++-
 .../notifications/local-notifications.ts      |  99 +++++
 src/main/services/ws/events/notification.ts   |   8 +
 src/main/services/ws/ws-client.ts             |   5 +
 src/preload/index.ts                          |  30 ++
 src/renderer/src/components/header/header.tsx |   1 +
 .../components/sidebar/sidebar-profile.scss   |   4 +
 .../components/sidebar/sidebar-profile.tsx    |  91 +++-
 src/renderer/src/declaration.d.ts             |  14 +
 src/renderer/src/main.tsx                     |   2 +
 .../game-details/game-details-content.tsx     |  35 +-
 .../notifications/local-notification-item.tsx | 104 +++++
 .../notifications/notification-item.scss      | 120 ++++++
 .../pages/notifications/notification-item.tsx | 227 ++++++++++
 .../pages/notifications/notifications.scss    |  60 +++
 .../src/pages/notifications/notifications.tsx | 392 ++++++++++++++++++
 .../profile-content/all-friends-modal.scss    | 124 ++++++
 .../profile-content/all-friends-modal.tsx     | 204 +++++++++
 .../profile/profile-content/badges-box.scss   |  44 ++
 .../profile/profile-content/badges-box.tsx    |  56 +++
 .../profile/profile-content/friends-box.scss  |  15 +
 .../profile/profile-content/friends-box.tsx   | 121 +++---
 .../profile-content/profile-content.tsx       |   2 +
 .../profile/profile-hero/profile-hero.scss    |  18 +-
 .../profile/profile-hero/profile-hero.tsx     |  49 +--
 src/types/index.ts                            |  56 +++
 40 files changed, 2082 insertions(+), 122 deletions(-)
 create mode 100644 src/main/events/notifications/clear-all-local-notifications.ts
 create mode 100644 src/main/events/notifications/delete-local-notification.ts
 create mode 100644 src/main/events/notifications/get-local-notifications-count.ts
 create mode 100644 src/main/events/notifications/get-local-notifications.ts
 create mode 100644 src/main/events/notifications/mark-all-local-notifications-read.ts
 create mode 100644 src/main/events/notifications/mark-local-notification-read.ts
 create mode 100644 src/main/level/sublevels/local-notifications.ts
 create mode 100644 src/main/services/notifications/local-notifications.ts
 create mode 100644 src/main/services/ws/events/notification.ts
 create mode 100644 src/renderer/src/pages/notifications/local-notification-item.tsx
 create mode 100644 src/renderer/src/pages/notifications/notification-item.scss
 create mode 100644 src/renderer/src/pages/notifications/notification-item.tsx
 create mode 100644 src/renderer/src/pages/notifications/notifications.scss
 create mode 100644 src/renderer/src/pages/notifications/notifications.tsx
 create mode 100644 src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
 create mode 100644 src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
 create mode 100644 src/renderer/src/pages/profile/profile-content/badges-box.scss
 create mode 100644 src/renderer/src/pages/profile/profile-content/badges-box.tsx

diff --git a/proto b/proto
index 7a23620f..6f11c99c 160000
--- a/proto
+++ b/proto
@@ -1 +1 @@
-Subproject commit 7a23620f930f6fbb84c0abcaab5149a34ab4b4eb
+Subproject commit 6f11c99c572420a282ba5149b6866e39b8a4569c
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 9be4ff26..c76cca1d 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -26,6 +26,7 @@
     "game_has_no_executable": "Game has no executable selected",
     "sign_in": "Sign in",
     "friends": "Friends",
+    "notifications": "Notifications",
     "need_help": "Need help?",
     "favorites": "Favorites",
     "playable_button_title": "Show only games you can play now",
@@ -660,6 +661,7 @@
     "sending": "Sending",
     "friend_request_sent": "Friend request sent",
     "friends": "Friends",
+    "badges": "Badges",
     "friends_list": "Friends list",
     "user_not_found": "User not found",
     "block_user": "Block user",
@@ -670,12 +672,16 @@
     "ignore_request": "Ignore request",
     "cancel_request": "Cancel request",
     "undo_friendship": "Undo friendship",
+    "friendship_removed": "Friend removed",
     "request_accepted": "Request accepted",
     "user_blocked_successfully": "User blocked successfully",
     "user_block_modal_text": "This will block {{displayName}}",
     "blocked_users": "Blocked users",
     "unblock": "Unblock",
     "no_friends_added": "You have no added friends",
+    "view_all": "View all",
+    "load_more": "Load more",
+    "loading": "Loading",
     "pending": "Pending",
     "no_pending_invites": "You have no pending invites",
     "no_blocked_users": "You have no blocked users",
@@ -699,6 +705,7 @@
     "report_reason_other": "Other",
     "profile_reported": "Profile reported",
     "your_friend_code": "Your friend code:",
+    "copy_friend_code": "Copy friend code",
     "upload_banner": "Upload banner",
     "uploading_banner": "Uploading banner…",
     "background_image_updated": "Background image updated",
@@ -772,5 +779,40 @@
     "hydra_cloud_feature_found": "You've just discovered a Hydra Cloud feature!",
     "learn_more": "Learn More",
     "debrid_description": "Download up to 4x faster with Nimbus"
+  },
+  "notifications_page": {
+    "title": "Notifications",
+    "mark_all_as_read": "Mark all as read",
+    "clear_all": "Clear All",
+    "loading": "Loading...",
+    "empty_title": "No notifications",
+    "empty_description": "You're all caught up! Check back later for new updates.",
+    "empty_filter_description": "No notifications match this filter.",
+    "filter_all": "All",
+    "filter_friends": "Friends",
+    "filter_badges": "Badges",
+    "filter_upvotes": "Upvotes",
+    "filter_local": "Local",
+    "load_more": "Load more",
+    "dismiss": "Dismiss",
+    "accept": "Accept",
+    "refuse": "Refuse",
+    "notification": "Notification",
+    "friend_request_received_title": "New friend request!",
+    "friend_request_received_description": "{{displayName}} wants to be your friend",
+    "friend_request_accepted_title": "Friend request accepted!",
+    "friend_request_accepted_description": "{{displayName}} accepted your friend request",
+    "badge_received_title": "You got a new badge!",
+    "badge_received_description": "{{badgeName}}",
+    "review_upvote_title": "Your review for {{gameTitle}} got upvotes!",
+    "review_upvote_description": "Your review received {{count}} new upvotes",
+    "marked_all_as_read": "All notifications marked as read",
+    "failed_to_mark_as_read": "Failed to mark notifications as read",
+    "cleared_all": "All notifications cleared",
+    "failed_to_clear": "Failed to clear notifications",
+    "failed_to_load": "Failed to load notifications",
+    "failed_to_dismiss": "Failed to dismiss notification",
+    "friend_request_accepted": "Friend request accepted",
+    "friend_request_refused": "Friend request refused"
   }
 }
diff --git a/src/main/events/notifications/clear-all-local-notifications.ts b/src/main/events/notifications/clear-all-local-notifications.ts
new file mode 100644
index 00000000..8a72b894
--- /dev/null
+++ b/src/main/events/notifications/clear-all-local-notifications.ts
@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const clearAllLocalNotifications = async () => {
+  await LocalNotificationManager.clearAll();
+};
+
+registerEvent("clearAllLocalNotifications", clearAllLocalNotifications);
diff --git a/src/main/events/notifications/delete-local-notification.ts b/src/main/events/notifications/delete-local-notification.ts
new file mode 100644
index 00000000..0d22877b
--- /dev/null
+++ b/src/main/events/notifications/delete-local-notification.ts
@@ -0,0 +1,11 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const deleteLocalNotification = async (
+  _event: Electron.IpcMainInvokeEvent,
+  id: string
+) => {
+  await LocalNotificationManager.deleteNotification(id);
+};
+
+registerEvent("deleteLocalNotification", deleteLocalNotification);
diff --git a/src/main/events/notifications/get-local-notifications-count.ts b/src/main/events/notifications/get-local-notifications-count.ts
new file mode 100644
index 00000000..072e74d5
--- /dev/null
+++ b/src/main/events/notifications/get-local-notifications-count.ts
@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const getLocalNotificationsCount = async () => {
+  return LocalNotificationManager.getUnreadCount();
+};
+
+registerEvent("getLocalNotificationsCount", getLocalNotificationsCount);
diff --git a/src/main/events/notifications/get-local-notifications.ts b/src/main/events/notifications/get-local-notifications.ts
new file mode 100644
index 00000000..b15eef86
--- /dev/null
+++ b/src/main/events/notifications/get-local-notifications.ts
@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const getLocalNotifications = async () => {
+  return LocalNotificationManager.getNotifications();
+};
+
+registerEvent("getLocalNotifications", getLocalNotifications);
diff --git a/src/main/events/notifications/index.ts b/src/main/events/notifications/index.ts
index c6e681e8..cbae29e5 100644
--- a/src/main/events/notifications/index.ts
+++ b/src/main/events/notifications/index.ts
@@ -1,3 +1,9 @@
 import "./publish-new-repacks-notification";
 import "./show-achievement-test-notification";
 import "./update-achievement-notification-window";
+import "./get-local-notifications";
+import "./get-local-notifications-count";
+import "./mark-local-notification-read";
+import "./mark-all-local-notifications-read";
+import "./delete-local-notification";
+import "./clear-all-local-notifications";
diff --git a/src/main/events/notifications/mark-all-local-notifications-read.ts b/src/main/events/notifications/mark-all-local-notifications-read.ts
new file mode 100644
index 00000000..a8ae3729
--- /dev/null
+++ b/src/main/events/notifications/mark-all-local-notifications-read.ts
@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const markAllLocalNotificationsRead = async () => {
+  await LocalNotificationManager.markAllAsRead();
+};
+
+registerEvent("markAllLocalNotificationsRead", markAllLocalNotificationsRead);
diff --git a/src/main/events/notifications/mark-local-notification-read.ts b/src/main/events/notifications/mark-local-notification-read.ts
new file mode 100644
index 00000000..6958c258
--- /dev/null
+++ b/src/main/events/notifications/mark-local-notification-read.ts
@@ -0,0 +1,11 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const markLocalNotificationRead = async (
+  _event: Electron.IpcMainInvokeEvent,
+  id: string
+) => {
+  await LocalNotificationManager.markAsRead(id);
+};
+
+registerEvent("markLocalNotificationRead", markLocalNotificationRead);
diff --git a/src/main/generated/envelope.ts b/src/main/generated/envelope.ts
index 0a17a2af..ace32b2d 100644
--- a/src/main/generated/envelope.ts
+++ b/src/main/generated/envelope.ts
@@ -1,4 +1,4 @@
-// @generated by protobuf-ts 2.10.0
+// @generated by protobuf-ts 2.11.1
 // @generated from protobuf file "envelope.proto" (syntax proto3)
 // tslint:disable
 import type { BinaryWriteOptions } from "@protobuf-ts/runtime";
@@ -15,11 +15,11 @@ import { MessageType } from "@protobuf-ts/runtime";
  */
 export interface FriendRequest {
   /**
-   * @generated from protobuf field: int32 friend_request_count = 1;
+   * @generated from protobuf field: int32 friend_request_count = 1
    */
   friendRequestCount: number;
   /**
-   * @generated from protobuf field: optional string sender_id = 2;
+   * @generated from protobuf field: optional string sender_id = 2
    */
   senderId?: string;
 }
@@ -28,18 +28,27 @@ export interface FriendRequest {
  */
 export interface FriendGameSession {
   /**
-   * @generated from protobuf field: string object_id = 1;
+   * @generated from protobuf field: string object_id = 1
    */
   objectId: string;
   /**
-   * @generated from protobuf field: string shop = 2;
+   * @generated from protobuf field: string shop = 2
    */
   shop: string;
   /**
-   * @generated from protobuf field: string friend_id = 3;
+   * @generated from protobuf field: string friend_id = 3
    */
   friendId: string;
 }
+/**
+ * @generated from protobuf message Notification
+ */
+export interface Notification {
+  /**
+   * @generated from protobuf field: int32 notification_count = 1
+   */
+  notificationCount: number;
+}
 /**
  * @generated from protobuf message Envelope
  */
@@ -51,17 +60,24 @@ export interface Envelope {
     | {
         oneofKind: "friendRequest";
         /**
-         * @generated from protobuf field: FriendRequest friend_request = 1;
+         * @generated from protobuf field: FriendRequest friend_request = 1
          */
         friendRequest: FriendRequest;
       }
     | {
         oneofKind: "friendGameSession";
         /**
-         * @generated from protobuf field: FriendGameSession friend_game_session = 2;
+         * @generated from protobuf field: FriendGameSession friend_game_session = 2
          */
         friendGameSession: FriendGameSession;
       }
+    | {
+        oneofKind: "notification";
+        /**
+         * @generated from protobuf field: Notification notification = 3
+         */
+        notification: Notification;
+      }
     | {
         oneofKind: undefined;
       };
@@ -239,6 +255,80 @@ class FriendGameSession$Type extends MessageType<FriendGameSession> {
  */
 export const FriendGameSession = new FriendGameSession$Type();
 // @generated message type with reflection information, may provide speed optimized methods
+class Notification$Type extends MessageType<Notification> {
+  constructor() {
+    super("Notification", [
+      {
+        no: 1,
+        name: "notification_count",
+        kind: "scalar",
+        T: 5 /*ScalarType.INT32*/,
+      },
+    ]);
+  }
+  create(value?: PartialMessage<Notification>): Notification {
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.notificationCount = 0;
+    if (value !== undefined)
+      reflectionMergePartial<Notification>(this, message, value);
+    return message;
+  }
+  internalBinaryRead(
+    reader: IBinaryReader,
+    length: number,
+    options: BinaryReadOptions,
+    target?: Notification
+  ): Notification {
+    let message = target ?? this.create(),
+      end = reader.pos + length;
+    while (reader.pos < end) {
+      let [fieldNo, wireType] = reader.tag();
+      switch (fieldNo) {
+        case /* int32 notification_count */ 1:
+          message.notificationCount = reader.int32();
+          break;
+        default:
+          let u = options.readUnknownField;
+          if (u === "throw")
+            throw new globalThis.Error(
+              `Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`
+            );
+          let d = reader.skip(wireType);
+          if (u !== false)
+            (u === true ? UnknownFieldHandler.onRead : u)(
+              this.typeName,
+              message,
+              fieldNo,
+              wireType,
+              d
+            );
+      }
+    }
+    return message;
+  }
+  internalBinaryWrite(
+    message: Notification,
+    writer: IBinaryWriter,
+    options: BinaryWriteOptions
+  ): IBinaryWriter {
+    /* int32 notification_count = 1; */
+    if (message.notificationCount !== 0)
+      writer.tag(1, WireType.Varint).int32(message.notificationCount);
+    let u = options.writeUnknownFields;
+    if (u !== false)
+      (u == true ? UnknownFieldHandler.onWrite : u)(
+        this.typeName,
+        message,
+        writer
+      );
+    return writer;
+  }
+}
+/**
+ * @generated MessageType for protobuf message Notification
+ */
+export const Notification = new Notification$Type();
+// @generated message type with reflection information, may provide speed optimized methods
 class Envelope$Type extends MessageType<Envelope> {
   constructor() {
     super("Envelope", [
@@ -256,6 +346,13 @@ class Envelope$Type extends MessageType<Envelope> {
         oneof: "payload",
         T: () => FriendGameSession,
       },
+      {
+        no: 3,
+        name: "notification",
+        kind: "message",
+        oneof: "payload",
+        T: () => Notification,
+      },
     ]);
   }
   create(value?: PartialMessage<Envelope>): Envelope {
@@ -298,6 +395,17 @@ class Envelope$Type extends MessageType<Envelope> {
             ),
           };
           break;
+        case /* Notification notification */ 3:
+          message.payload = {
+            oneofKind: "notification",
+            notification: Notification.internalBinaryRead(
+              reader,
+              reader.uint32(),
+              options,
+              (message.payload as any).notification
+            ),
+          };
+          break;
         default:
           let u = options.readUnknownField;
           if (u === "throw")
@@ -336,6 +444,13 @@ class Envelope$Type extends MessageType<Envelope> {
         writer.tag(2, WireType.LengthDelimited).fork(),
         options
       ).join();
+    /* Notification notification = 3; */
+    if (message.payload.oneofKind === "notification")
+      Notification.internalBinaryWrite(
+        message.payload.notification,
+        writer.tag(3, WireType.LengthDelimited).fork(),
+        options
+      ).join();
     let u = options.writeUnknownFields;
     if (u !== false)
       (u == true ? UnknownFieldHandler.onWrite : u)(
diff --git a/src/main/level/sublevels/index.ts b/src/main/level/sublevels/index.ts
index 4575bbc4..54cf2e62 100644
--- a/src/main/level/sublevels/index.ts
+++ b/src/main/level/sublevels/index.ts
@@ -8,3 +8,4 @@ export * from "./keys";
 export * from "./themes";
 export * from "./download-sources";
 export * from "./downloadSourcesCheckTimestamp";
+export * from "./local-notifications";
diff --git a/src/main/level/sublevels/keys.ts b/src/main/level/sublevels/keys.ts
index 89c33f8d..d055d1e6 100644
--- a/src/main/level/sublevels/keys.ts
+++ b/src/main/level/sublevels/keys.ts
@@ -20,4 +20,5 @@ export const levelKeys = {
   downloadSources: "downloadSources",
   downloadSourcesCheckBaseline: "downloadSourcesCheckBaseline", // When we last started the app
   downloadSourcesSinceValue: "downloadSourcesSinceValue", // The 'since' value API used (for modal comparison)
+  localNotifications: "localNotifications",
 };
diff --git a/src/main/level/sublevels/local-notifications.ts b/src/main/level/sublevels/local-notifications.ts
new file mode 100644
index 00000000..847a1c99
--- /dev/null
+++ b/src/main/level/sublevels/local-notifications.ts
@@ -0,0 +1,11 @@
+import type { LocalNotification } from "@types";
+
+import { db } from "../level";
+import { levelKeys } from "./keys";
+
+export const localNotificationsSublevel = db.sublevel<
+  string,
+  LocalNotification
+>(levelKeys.localNotifications, {
+  valueEncoding: "json",
+});
diff --git a/src/main/services/index.ts b/src/main/services/index.ts
index a3891dc6..e6ceef03 100644
--- a/src/main/services/index.ts
+++ b/src/main/services/index.ts
@@ -20,3 +20,4 @@ export * from "./lock";
 export * from "./decky-plugin";
 export * from "./user";
 export * from "./download-sources-checker";
+export * from "./notifications/local-notifications";
diff --git a/src/main/services/notifications/index.ts b/src/main/services/notifications/index.ts
index a925e7c7..0fa07c8c 100644
--- a/src/main/services/notifications/index.ts
+++ b/src/main/services/notifications/index.ts
@@ -16,6 +16,7 @@ import { restartAndInstallUpdate } from "@main/events/autoupdater/restart-and-in
 import { SystemPath } from "../system-path";
 import { getThemeSoundPath } from "@main/helpers";
 import { processProfileImage } from "@main/events/profile/process-profile-image";
+import { LocalNotificationManager } from "./local-notifications";
 
 const getStaticImage = async (path: string) => {
   return processProfileImage(path, "jpg")
@@ -78,37 +79,59 @@ export const publishDownloadCompleteNotification = async (game: Game) => {
     }
   );
 
+  const title = t("download_complete", { ns: "notifications" });
+  const body = t("game_ready_to_install", {
+    ns: "notifications",
+    title: game.title,
+  });
+
   if (userPreferences?.downloadNotificationsEnabled) {
     new Notification({
-      title: t("download_complete", {
-        ns: "notifications",
-      }),
-      body: t("game_ready_to_install", {
-        ns: "notifications",
-        title: game.title,
-      }),
+      title,
+      body,
       icon: await downloadImage(game.iconUrl),
     }).show();
   }
+
+  // Create local notification
+  await LocalNotificationManager.createNotification(
+    "DOWNLOAD_COMPLETE",
+    title,
+    body,
+    {
+      pictureUrl: game.iconUrl,
+      url: `/game/${game.shop}/${game.objectId}`,
+    }
+  );
 };
 
 export const publishNotificationUpdateReadyToInstall = async (
   version: string
 ) => {
+  const title = t("new_update_available", {
+    ns: "notifications",
+    version,
+  });
+  const body = t("restart_to_install_update", {
+    ns: "notifications",
+  });
+
   new Notification({
-    title: t("new_update_available", {
-      ns: "notifications",
-      version,
-    }),
-    body: t("restart_to_install_update", {
-      ns: "notifications",
-    }),
+    title,
+    body,
     icon: trayIcon,
   })
     .on("click", () => {
       restartAndInstallUpdate();
     })
     .show();
+
+  // Create local notification
+  await LocalNotificationManager.createNotification(
+    "UPDATE_AVAILABLE",
+    title,
+    body
+  );
 };
 
 export const publishNewFriendRequestNotification = async (
@@ -181,14 +204,27 @@ export const publishCombinedNewAchievementNotification = async (
 };
 
 export const publishExtractionCompleteNotification = async (game: Game) => {
+  const title = t("extraction_complete", { ns: "notifications" });
+  const body = t("game_extracted", {
+    ns: "notifications",
+    title: game.title,
+  });
+
   new Notification({
-    title: t("extraction_complete", { ns: "notifications" }),
-    body: t("game_extracted", {
-      ns: "notifications",
-      title: game.title,
-    }),
+    title,
+    body,
     icon: trayIcon,
   }).show();
+
+  // Create local notification
+  await LocalNotificationManager.createNotification(
+    "EXTRACTION_COMPLETE",
+    title,
+    body,
+    {
+      url: `/game/${game.shop}/${game.objectId}`,
+    }
+  );
 };
 
 export const publishNewAchievementNotification = async (info: {
diff --git a/src/main/services/notifications/local-notifications.ts b/src/main/services/notifications/local-notifications.ts
new file mode 100644
index 00000000..94b832df
--- /dev/null
+++ b/src/main/services/notifications/local-notifications.ts
@@ -0,0 +1,99 @@
+import { localNotificationsSublevel } from "@main/level";
+import { WindowManager } from "../window-manager";
+import type { LocalNotification, LocalNotificationType } from "@types";
+import crypto from "node:crypto";
+
+export class LocalNotificationManager {
+  private static generateId(): string {
+    return crypto.randomBytes(8).toString("hex");
+  }
+
+  static async createNotification(
+    type: LocalNotificationType,
+    title: string,
+    description: string,
+    options?: {
+      pictureUrl?: string | null;
+      url?: string | null;
+    }
+  ): Promise<LocalNotification> {
+    const id = this.generateId();
+    const notification: LocalNotification = {
+      id,
+      type,
+      title,
+      description,
+      pictureUrl: options?.pictureUrl ?? null,
+      url: options?.url ?? null,
+      isRead: false,
+      createdAt: new Date().toISOString(),
+    };
+
+    await localNotificationsSublevel.put(id, notification);
+
+    // Notify renderer about new notification
+    if (WindowManager.mainWindow) {
+      WindowManager.mainWindow.webContents.send(
+        "on-local-notification-created",
+        notification
+      );
+    }
+
+    return notification;
+  }
+
+  static async getNotifications(): Promise<LocalNotification[]> {
+    const notifications: LocalNotification[] = [];
+
+    for await (const [, value] of localNotificationsSublevel.iterator()) {
+      notifications.push(value);
+    }
+
+    // Sort by createdAt descending
+    return notifications.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  }
+
+  static async getUnreadCount(): Promise<number> {
+    let count = 0;
+
+    for await (const [, value] of localNotificationsSublevel.iterator()) {
+      if (!value.isRead) {
+        count++;
+      }
+    }
+
+    return count;
+  }
+
+  static async markAsRead(id: string): Promise<void> {
+    const notification = await localNotificationsSublevel.get(id);
+    if (notification) {
+      notification.isRead = true;
+      await localNotificationsSublevel.put(id, notification);
+    }
+  }
+
+  static async markAllAsRead(): Promise<void> {
+    const batch = localNotificationsSublevel.batch();
+
+    for await (const [key, value] of localNotificationsSublevel.iterator()) {
+      if (!value.isRead) {
+        value.isRead = true;
+        batch.put(key, value);
+      }
+    }
+
+    await batch.write();
+  }
+
+  static async deleteNotification(id: string): Promise<void> {
+    await localNotificationsSublevel.del(id);
+  }
+
+  static async clearAll(): Promise<void> {
+    await localNotificationsSublevel.clear();
+  }
+}
diff --git a/src/main/services/ws/events/notification.ts b/src/main/services/ws/events/notification.ts
new file mode 100644
index 00000000..d38ec4c3
--- /dev/null
+++ b/src/main/services/ws/events/notification.ts
@@ -0,0 +1,8 @@
+import type { Notification } from "@main/generated/envelope";
+import { WindowManager } from "@main/services/window-manager";
+
+export const notificationEvent = (payload: Notification) => {
+  WindowManager.mainWindow?.webContents.send("on-sync-notification-count", {
+    notificationCount: payload.notificationCount,
+  });
+};
diff --git a/src/main/services/ws/ws-client.ts b/src/main/services/ws/ws-client.ts
index e2e9d550..19b4b397 100644
--- a/src/main/services/ws/ws-client.ts
+++ b/src/main/services/ws/ws-client.ts
@@ -4,6 +4,7 @@ import { Envelope } from "@main/generated/envelope";
 import { logger } from "../logger";
 import { friendRequestEvent } from "./events/friend-request";
 import { friendGameSessionEvent } from "./events/friend-game-session";
+import { notificationEvent } from "./events/notification";
 
 export class WSClient {
   private static ws: WebSocket | null = null;
@@ -51,6 +52,10 @@ export class WSClient {
         if (envelope.payload.oneofKind === "friendGameSession") {
           friendGameSessionEvent(envelope.payload.friendGameSession);
         }
+
+        if (envelope.payload.oneofKind === "notification") {
+          notificationEvent(envelope.payload.notification);
+        }
       });
 
       this.ws.on("close", () => this.handleDisconnect("close"));
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 5579b6fb..7ad88a9b 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -15,6 +15,7 @@ import type {
   GameAchievement,
   Theme,
   FriendRequestSync,
+  NotificationSync,
   ShortcutLocation,
   AchievementCustomNotificationPosition,
   AchievementNotificationInfo,
@@ -507,6 +508,15 @@ contextBridge.exposeInMainWorld("electron", {
     return () =>
       ipcRenderer.removeListener("on-sync-friend-requests", listener);
   },
+  onSyncNotificationCount: (cb: (notification: NotificationSync) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      notification: NotificationSync
+    ) => cb(notification);
+    ipcRenderer.on("on-sync-notification-count", listener);
+    return () =>
+      ipcRenderer.removeListener("on-sync-notification-count", listener);
+  },
   updateFriendRequest: (userId: string, action: FriendRequestAction) =>
     ipcRenderer.invoke("updateFriendRequest", userId, action),
 
@@ -550,6 +560,26 @@ contextBridge.exposeInMainWorld("electron", {
   /* Notifications */
   publishNewRepacksNotification: (newRepacksCount: number) =>
     ipcRenderer.invoke("publishNewRepacksNotification", newRepacksCount),
+  getLocalNotifications: () => ipcRenderer.invoke("getLocalNotifications"),
+  getLocalNotificationsCount: () =>
+    ipcRenderer.invoke("getLocalNotificationsCount"),
+  markLocalNotificationRead: (id: string) =>
+    ipcRenderer.invoke("markLocalNotificationRead", id),
+  markAllLocalNotificationsRead: () =>
+    ipcRenderer.invoke("markAllLocalNotificationsRead"),
+  deleteLocalNotification: (id: string) =>
+    ipcRenderer.invoke("deleteLocalNotification", id),
+  clearAllLocalNotifications: () =>
+    ipcRenderer.invoke("clearAllLocalNotifications"),
+  onLocalNotificationCreated: (cb: (notification: unknown) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      notification: unknown
+    ) => cb(notification);
+    ipcRenderer.on("on-local-notification-created", listener);
+    return () =>
+      ipcRenderer.removeListener("on-local-notification-created", listener);
+  },
   onAchievementUnlocked: (
     cb: (
       position?: AchievementCustomNotificationPosition,
diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx
index 1cac834c..4f5253f1 100644
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -82,6 +82,7 @@ export function Header() {
     if (location.pathname.startsWith("/game")) return headerTitle;
     if (location.pathname.startsWith("/achievements")) return headerTitle;
     if (location.pathname.startsWith("/profile")) return headerTitle;
+    if (location.pathname.startsWith("/notifications")) return headerTitle;
     if (location.pathname.startsWith("/library"))
       return headerTitle || t("library");
     if (location.pathname.startsWith("/search")) return t("search_results");
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.scss b/src/renderer/src/components/sidebar/sidebar-profile.scss
index 7e634851..4a061e98 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.scss
+++ b/src/renderer/src/components/sidebar/sidebar-profile.scss
@@ -46,6 +46,7 @@
     white-space: nowrap;
   }
 
+  &__notification-button,
   &__friends-button {
     color: globals.$muted-color;
     cursor: pointer;
@@ -62,6 +63,7 @@
     }
   }
 
+  &__notification-button-badge,
   &__friends-button-badge {
     background-color: globals.$success-color;
     display: flex;
@@ -73,6 +75,8 @@
     position: absolute;
     top: -5px;
     right: -5px;
+    font-size: 10px;
+    font-weight: bold;
   }
 
   &__game-running-icon {
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 5f336fc3..2bc28d88 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -1,12 +1,14 @@
 import { useNavigate } from "react-router-dom";
-import { PeopleIcon } from "@primer/octicons-react";
+import { PeopleIcon, BellIcon } from "@primer/octicons-react";
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar } from "../avatar/avatar";
 import { AuthPage } from "@shared";
+import { logger } from "@renderer/logger";
+import type { NotificationCountResponse } from "@types";
 import "./sidebar-profile.scss";
 
 export function SidebarProfile() {
@@ -19,6 +21,71 @@ export function SidebarProfile() {
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
+  const [notificationCount, setNotificationCount] = useState(0);
+
+  const fetchNotificationCount = useCallback(async () => {
+    try {
+      // Always fetch local notification count
+      const localCount = await window.electron.getLocalNotificationsCount();
+
+      // Fetch API notification count only if logged in
+      let apiCount = 0;
+      if (userDetails) {
+        try {
+          const response =
+            await window.electron.hydraApi.get<NotificationCountResponse>(
+              "/profile/notifications/count",
+              { needsAuth: true }
+            );
+          apiCount = response.count;
+        } catch {
+          // Ignore API errors
+        }
+      }
+
+      setNotificationCount(localCount + apiCount);
+    } catch (error) {
+      logger.error("Failed to fetch notification count", error);
+    }
+  }, [userDetails]);
+
+  useEffect(() => {
+    fetchNotificationCount();
+
+    const interval = setInterval(fetchNotificationCount, 60000);
+    return () => clearInterval(interval);
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onLocalNotificationCreated(() => {
+      fetchNotificationCount();
+    });
+
+    return () => unsubscribe();
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const handleNotificationsChange = () => {
+      fetchNotificationCount();
+    };
+
+    window.addEventListener("notificationsChanged", handleNotificationsChange);
+    return () => {
+      window.removeEventListener(
+        "notificationsChanged",
+        handleNotificationsChange
+      );
+    };
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onSyncNotificationCount(() => {
+      fetchNotificationCount();
+    });
+
+    return () => unsubscribe();
+  }, [fetchNotificationCount]);
+
   const handleProfileClick = () => {
     if (userDetails === null) {
       window.electron.openAuthWindow(AuthPage.SignIn);
@@ -28,6 +95,25 @@ export function SidebarProfile() {
     navigate(`/profile/${userDetails.id}`);
   };
 
+  const notificationsButton = useMemo(() => {
+    return (
+      <button
+        type="button"
+        className="sidebar-profile__notification-button"
+        onClick={() => navigate("/notifications")}
+        title={t("notifications")}
+      >
+        {notificationCount > 0 && (
+          <small className="sidebar-profile__notification-button-badge">
+            {notificationCount > 99 ? "99+" : notificationCount}
+          </small>
+        )}
+
+        <BellIcon size={16} />
+      </button>
+    );
+  }, [t, notificationCount, navigate]);
+
   const friendsButton = useMemo(() => {
     if (!userDetails) return null;
 
@@ -98,6 +184,7 @@ export function SidebarProfile() {
         </div>
       </button>
 
+      {notificationsButton}
       {friendsButton}
     </div>
   );
diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts
index 6975967e..4bc3dabc 100644
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -14,6 +14,7 @@ import type {
   GameStats,
   UserDetails,
   FriendRequestSync,
+  NotificationSync,
   GameArtifact,
   LudusaviBackup,
   UserAchievement,
@@ -31,6 +32,7 @@ import type {
   Game,
   DiskUsage,
   DownloadSource,
+  LocalNotification,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";
 
@@ -391,6 +393,9 @@ declare global {
     onSyncFriendRequests: (
       cb: (friendRequests: FriendRequestSync) => void
     ) => () => Electron.IpcRenderer;
+    onSyncNotificationCount: (
+      cb: (notification: NotificationSync) => void
+    ) => () => Electron.IpcRenderer;
     updateFriendRequest: (
       userId: string,
       action: FriendRequestAction
@@ -398,6 +403,15 @@ declare global {
 
     /* Notifications */
     publishNewRepacksNotification: (newRepacksCount: number) => Promise<void>;
+    getLocalNotifications: () => Promise<LocalNotification[]>;
+    getLocalNotificationsCount: () => Promise<number>;
+    markLocalNotificationRead: (id: string) => Promise<void>;
+    markAllLocalNotificationsRead: () => Promise<void>;
+    deleteLocalNotification: (id: string) => Promise<void>;
+    clearAllLocalNotifications: () => Promise<void>;
+    onLocalNotificationCreated: (
+      cb: (notification: LocalNotification) => void
+    ) => () => Electron.IpcRenderer;
     onAchievementUnlocked: (
       cb: (
         position?: AchievementCustomNotificationPosition,
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 92220a6e..a012cf39 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -31,6 +31,7 @@ import Profile from "./pages/profile/profile";
 import Achievements from "./pages/achievements/achievements";
 import ThemeEditor from "./pages/theme-editor/theme-editor";
 import Library from "./pages/library/library";
+import Notifications from "./pages/notifications/notifications";
 import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
 
 console.log = logger.log;
@@ -76,6 +77,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/settings" element={<Settings />} />
             <Route path="/profile/:userId" element={<Profile />} />
             <Route path="/achievements" element={<Achievements />} />
+            <Route path="/notifications" element={<Notifications />} />
           </Route>
 
           <Route path="/theme-editor" element={<ThemeEditor />} />
diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx
index 63c4c974..48a4c0a3 100644
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/src/renderer/src/pages/game-details/game-details-content.tsx
@@ -1,6 +1,7 @@
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { PencilIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 
 import { HeroPanel } from "./hero";
 import { DescriptionHeader } from "./description-header/description-header";
@@ -55,6 +56,8 @@ const getImageWithCustomPriority = (
 
 export function GameDetailsContent() {
   const { t } = useTranslation("game_details");
+  const [searchParams] = useSearchParams();
+  const reviewsRef = useRef<HTMLDivElement>(null);
 
   const {
     objectId,
@@ -137,6 +140,16 @@ export function GameDetailsContent() {
     getGameArtifacts();
   }, [getGameArtifacts]);
 
+  // Scroll to reviews section if reviews=true in URL
+  useEffect(() => {
+    const shouldScrollToReviews = searchParams.get("reviews") === "true";
+    if (shouldScrollToReviews && reviewsRef.current) {
+      setTimeout(() => {
+        reviewsRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 500);
+    }
+  }, [searchParams, objectId]);
+
   const isCustomGame = game?.shop === "custom";
 
   const heroImage = isCustomGame
@@ -229,15 +242,17 @@ export function GameDetailsContent() {
             )}
 
             {shop !== "custom" && shop && objectId && (
-              <GameReviews
-                shop={shop}
-                objectId={objectId}
-                game={game}
-                userDetailsId={userDetails?.id}
-                isGameInLibrary={isGameInLibrary}
-                hasUserReviewed={hasUserReviewed}
-                onUserReviewedChange={setHasUserReviewed}
-              />
+              <div ref={reviewsRef}>
+                <GameReviews
+                  shop={shop}
+                  objectId={objectId}
+                  game={game}
+                  userDetailsId={userDetails?.id}
+                  isGameInLibrary={isGameInLibrary}
+                  hasUserReviewed={hasUserReviewed}
+                  onUserReviewedChange={setHasUserReviewed}
+                />
+              </div>
             )}
           </div>
 
diff --git a/src/renderer/src/pages/notifications/local-notification-item.tsx b/src/renderer/src/pages/notifications/local-notification-item.tsx
new file mode 100644
index 00000000..6ebc703b
--- /dev/null
+++ b/src/renderer/src/pages/notifications/local-notification-item.tsx
@@ -0,0 +1,104 @@
+import { useCallback } from "react";
+import {
+  XIcon,
+  DownloadIcon,
+  PackageIcon,
+  SyncIcon,
+  TrophyIcon,
+  ClockIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useDate } from "@renderer/hooks";
+import cn from "classnames";
+
+import type { LocalNotification } from "@types";
+import "./notification-item.scss";
+
+interface LocalNotificationItemProps {
+  notification: LocalNotification;
+  onDismiss: (id: string) => void;
+  onMarkAsRead: (id: string) => void;
+}
+
+export function LocalNotificationItem({
+  notification,
+  onDismiss,
+  onMarkAsRead,
+}: LocalNotificationItemProps) {
+  const { t } = useTranslation("notifications_page");
+  const { formatDistance } = useDate();
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    if (!notification.isRead) {
+      onMarkAsRead(notification.id);
+    }
+
+    if (notification.url) {
+      navigate(notification.url);
+    }
+  }, [notification, onMarkAsRead, navigate]);
+
+  const handleDismiss = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDismiss(notification.id);
+    },
+    [notification.id, onDismiss]
+  );
+
+  const getIcon = () => {
+    switch (notification.type) {
+      case "DOWNLOAD_COMPLETE":
+        return <DownloadIcon size={24} />;
+      case "EXTRACTION_COMPLETE":
+        return <PackageIcon size={24} />;
+      case "UPDATE_AVAILABLE":
+        return <SyncIcon size={24} />;
+      case "ACHIEVEMENT_UNLOCKED":
+        return <TrophyIcon size={24} />;
+      default:
+        return <DownloadIcon size={24} />;
+    }
+  };
+
+  return (
+    <div
+      className={cn("notification-item", {
+        "notification-item--unread": !notification.isRead,
+      })}
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+    >
+      <div className="notification-item__picture">
+        {notification.pictureUrl ? (
+          <img src={notification.pictureUrl} alt="" />
+        ) : (
+          getIcon()
+        )}
+      </div>
+
+      <div className="notification-item__content">
+        <span className="notification-item__title">{notification.title}</span>
+        <span className="notification-item__description">
+          {notification.description}
+        </span>
+        <span className="notification-item__time">
+          <ClockIcon size={12} />
+          {formatDistance(new Date(notification.createdAt), new Date())}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        className="notification-item__dismiss"
+        onClick={handleDismiss}
+        title={t("dismiss")}
+      >
+        <XIcon size={16} />
+      </button>
+    </div>
+  );
+}
diff --git a/src/renderer/src/pages/notifications/notification-item.scss b/src/renderer/src/pages/notifications/notification-item.scss
new file mode 100644
index 00000000..e64063f0
--- /dev/null
+++ b/src/renderer/src/pages/notifications/notification-item.scss
@@ -0,0 +1,120 @@
+@use "../../scss/globals.scss";
+
+.notification-item {
+  display: flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 2);
+  background-color: globals.$dark-background-color;
+  border: 1px solid globals.$border-color;
+  border-radius: 8px;
+  transition: all ease 0.2s;
+  position: relative;
+  opacity: 0.4;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+    opacity: 0.6;
+  }
+
+  &--unread {
+    border-left: 3px solid globals.$brand-teal;
+    opacity: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .notification-item__title {
+      color: #fff;
+    }
+  }
+
+  &__picture {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__badge-picture {
+    border-radius: 8px;
+    background-color: globals.$background-color;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__review-picture {
+    color: #f5a623;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+  }
+
+  &__title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$muted-color;
+  }
+
+  &__description {
+    font-size: globals.$small-font-size;
+    color: globals.$body-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__time {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+    font-size: globals.$small-font-size;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+    flex-shrink: 0;
+  }
+
+  &__dismiss {
+    position: absolute;
+    top: calc(globals.$spacing-unit / 2);
+    right: calc(globals.$spacing-unit / 2);
+    background: transparent;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 50%;
+    transition: all ease 0.2s;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
new file mode 100644
index 00000000..eb31ee36
--- /dev/null
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -0,0 +1,227 @@
+import { useCallback, useMemo } from "react";
+import {
+  XIcon,
+  PersonIcon,
+  ClockIcon,
+  StarFillIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@renderer/components";
+import { useDate, useUserDetails } from "@renderer/hooks";
+import cn from "classnames";
+
+import type { Notification, Badge } from "@types";
+import "./notification-item.scss";
+
+const parseNotificationUrl = (notificationUrl: string): string => {
+  const url = new URL(notificationUrl, "http://localhost");
+  const userId = url.searchParams.get("userId");
+  const badgeName = url.searchParams.get("name");
+  const gameTitle = url.searchParams.get("title");
+  const showReviews = url.searchParams.get("reviews");
+
+  if (url.pathname === "/profile" && userId) {
+    return `/profile/${userId}`;
+  }
+
+  if (url.pathname === "/badges" && badgeName) {
+    return `/badges/${badgeName}`;
+  }
+
+  if (url.pathname.startsWith("/game/")) {
+    const params = new URLSearchParams();
+    if (gameTitle) params.set("title", gameTitle);
+    if (showReviews) params.set("reviews", showReviews);
+    const queryString = params.toString();
+    return queryString ? `${url.pathname}?${queryString}` : url.pathname;
+  }
+
+  return notificationUrl;
+};
+
+interface NotificationItemProps {
+  notification: Notification;
+  badges: Badge[];
+  onDismiss: (id: string) => void;
+  onMarkAsRead: (id: string) => void;
+  onAcceptFriendRequest?: (senderId: string) => void;
+  onRefuseFriendRequest?: (senderId: string) => void;
+}
+
+export function NotificationItem({
+  notification,
+  badges,
+  onDismiss,
+  onMarkAsRead,
+  onAcceptFriendRequest,
+  onRefuseFriendRequest,
+}: Readonly<NotificationItemProps>) {
+  const { t } = useTranslation("notifications_page");
+  const { formatDistance } = useDate();
+  const navigate = useNavigate();
+  const { updateFriendRequestState } = useUserDetails();
+
+  const badge = useMemo(() => {
+    if (notification.type !== "BADGE_RECEIVED") return null;
+    return badges.find((b) => b.name === notification.variables.badgeName);
+  }, [notification, badges]);
+
+  const handleClick = useCallback(() => {
+    if (!notification.isRead) {
+      onMarkAsRead(notification.id);
+    }
+
+    if (notification.url) {
+      navigate(parseNotificationUrl(notification.url));
+    }
+  }, [notification, onMarkAsRead, navigate]);
+
+  const handleAccept = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const senderId = notification.variables.senderId;
+      if (senderId) {
+        await updateFriendRequestState(senderId, "ACCEPTED");
+        onAcceptFriendRequest?.(senderId);
+        onDismiss(notification.id);
+      }
+    },
+    [notification, updateFriendRequestState, onAcceptFriendRequest, onDismiss]
+  );
+
+  const handleRefuse = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const senderId = notification.variables.senderId;
+      if (senderId) {
+        await updateFriendRequestState(senderId, "REFUSED");
+        onRefuseFriendRequest?.(senderId);
+        onDismiss(notification.id);
+      }
+    },
+    [notification, updateFriendRequestState, onRefuseFriendRequest, onDismiss]
+  );
+
+  const handleDismiss = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDismiss(notification.id);
+    },
+    [notification.id, onDismiss]
+  );
+
+  const getNotificationContent = () => {
+    switch (notification.type) {
+      case "FRIEND_REQUEST_RECEIVED":
+        return {
+          title: t("friend_request_received_title"),
+          description: t("friend_request_received_description", {
+            displayName: notification.variables.senderDisplayName,
+          }),
+          showActions: true,
+        };
+      case "FRIEND_REQUEST_ACCEPTED":
+        return {
+          title: t("friend_request_accepted_title"),
+          description: t("friend_request_accepted_description", {
+            displayName: notification.variables.senderDisplayName,
+          }),
+          showActions: false,
+        };
+      case "BADGE_RECEIVED":
+        return {
+          title: t("badge_received_title"),
+          description: badge?.description || notification.variables.badgeName,
+          showActions: false,
+        };
+      case "REVIEW_UPVOTE":
+        return {
+          title: t("review_upvote_title", {
+            gameTitle: notification.variables.gameTitle,
+          }),
+          description: t("review_upvote_description", {
+            count: Number.parseInt(
+              notification.variables.upvoteCount || "1",
+              10
+            ),
+          }),
+          showActions: false,
+        };
+      default:
+        return {
+          title: t("notification"),
+          description: "",
+          showActions: false,
+        };
+    }
+  };
+
+  const content = getNotificationContent();
+  const isBadge = notification.type === "BADGE_RECEIVED";
+  const isReview = notification.type === "REVIEW_UPVOTE";
+
+  const getIcon = () => {
+    if (notification.pictureUrl) {
+      return <img src={notification.pictureUrl} alt="" />;
+    }
+    if (isReview) {
+      return <StarFillIcon size={24} />;
+    }
+    return <PersonIcon size={24} />;
+  };
+
+  return (
+    <div
+      className={cn("notification-item", {
+        "notification-item--unread": !notification.isRead,
+      })}
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className={cn("notification-item__picture", {
+          "notification-item__badge-picture": isBadge,
+          "notification-item__review-picture": isReview,
+        })}
+      >
+        {getIcon()}
+      </div>
+
+      <div className="notification-item__content">
+        <span className="notification-item__title">{content.title}</span>
+        <span className="notification-item__description">
+          {content.description}
+        </span>
+        <span className="notification-item__time">
+          <ClockIcon size={12} />
+          {formatDistance(new Date(notification.createdAt), new Date())}
+        </span>
+      </div>
+
+      {content.showActions &&
+        notification.type === "FRIEND_REQUEST_RECEIVED" && (
+          <div className="notification-item__actions">
+            <Button theme="primary" onClick={handleAccept}>
+              {t("accept")}
+            </Button>
+            <Button theme="outline" onClick={handleRefuse}>
+              {t("refuse")}
+            </Button>
+          </div>
+        )}
+
+      {notification.type !== "FRIEND_REQUEST_RECEIVED" && (
+        <button
+          type="button"
+          className="notification-item__dismiss"
+          onClick={handleDismiss}
+          title={t("dismiss")}
+        >
+          <XIcon size={16} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/renderer/src/pages/notifications/notifications.scss b/src/renderer/src/pages/notifications/notifications.scss
new file mode 100644
index 00000000..34555198
--- /dev/null
+++ b/src/renderer/src/pages/notifications/notifications.scss
@@ -0,0 +1,60 @@
+@use "../../scss/globals.scss";
+
+.notifications {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 3);
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+    justify-content: flex-end;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 6);
+    text-align: center;
+    color: globals.$body-color;
+
+    &-icon {
+      opacity: 0.4;
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: globals.$muted-color;
+    }
+
+    &-description {
+      font-size: globals.$body-font-size;
+    }
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 4);
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+}
diff --git a/src/renderer/src/pages/notifications/notifications.tsx b/src/renderer/src/pages/notifications/notifications.tsx
new file mode 100644
index 00000000..0c8aecb6
--- /dev/null
+++ b/src/renderer/src/pages/notifications/notifications.tsx
@@ -0,0 +1,392 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { BellIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "@renderer/components";
+import { useAppDispatch, useToast, useUserDetails } from "@renderer/hooks";
+import { setHeaderTitle } from "@renderer/features";
+import { logger } from "@renderer/logger";
+
+import { NotificationItem } from "./notification-item";
+import { LocalNotificationItem } from "./local-notification-item";
+import type {
+  Notification,
+  LocalNotification,
+  NotificationsResponse,
+  MergedNotification,
+  Badge,
+} from "@types";
+import "./notifications.scss";
+
+export default function Notifications() {
+  const { t, i18n } = useTranslation("notifications_page");
+  const { showSuccessToast, showErrorToast } = useToast();
+  const { userDetails } = useUserDetails();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(setHeaderTitle(t("title")));
+  }, [dispatch, t]);
+
+  const [apiNotifications, setApiNotifications] = useState<Notification[]>([]);
+  const [localNotifications, setLocalNotifications] = useState<
+    LocalNotification[]
+  >([]);
+  const [badges, setBadges] = useState<Badge[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [clearingIds, setClearingIds] = useState<Set<string>>(new Set());
+  const [pagination, setPagination] = useState({
+    total: 0,
+    hasMore: false,
+    skip: 0,
+  });
+
+  const fetchLocalNotifications = useCallback(async () => {
+    try {
+      const notifications = await window.electron.getLocalNotifications();
+      setLocalNotifications(notifications);
+    } catch (error) {
+      logger.error("Failed to fetch local notifications", error);
+    }
+  }, []);
+
+  const fetchBadges = useCallback(async () => {
+    try {
+      const language = i18n.language.split("-")[0];
+      const params = new URLSearchParams({ locale: language });
+      const badgesResponse = await window.electron.hydraApi.get<Badge[]>(
+        `/badges?${params.toString()}`,
+        { needsAuth: false }
+      );
+      setBadges(badgesResponse);
+    } catch (error) {
+      logger.error("Failed to fetch badges", error);
+    }
+  }, [i18n.language]);
+
+  const fetchApiNotifications = useCallback(
+    async (skip = 0, append = false) => {
+      if (!userDetails) return;
+
+      try {
+        setIsLoading(true);
+        const response =
+          await window.electron.hydraApi.get<NotificationsResponse>(
+            "/profile/notifications",
+            {
+              params: { filter: "all", take: 20, skip },
+              needsAuth: true,
+            }
+          );
+
+        logger.log("Notifications API response:", response);
+
+        if (append) {
+          setApiNotifications((prev) => [...prev, ...response.notifications]);
+        } else {
+          setApiNotifications(response.notifications);
+        }
+
+        setPagination({
+          total: response.pagination.total,
+          hasMore: response.pagination.hasMore,
+          skip: response.pagination.skip + response.pagination.take,
+        });
+      } catch (error) {
+        logger.error("Failed to fetch API notifications", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [userDetails]
+  );
+
+  const fetchAllNotifications = useCallback(async () => {
+    setIsLoading(true);
+    await Promise.all([
+      fetchLocalNotifications(),
+      fetchBadges(),
+      userDetails ? fetchApiNotifications(0, false) : Promise.resolve(),
+    ]);
+    setIsLoading(false);
+  }, [
+    fetchLocalNotifications,
+    fetchBadges,
+    fetchApiNotifications,
+    userDetails,
+  ]);
+
+  useEffect(() => {
+    fetchAllNotifications();
+  }, [fetchAllNotifications]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onLocalNotificationCreated(
+      (notification) => {
+        setLocalNotifications((prev) => [notification, ...prev]);
+      }
+    );
+
+    return () => unsubscribe();
+  }, []);
+
+  const mergedNotifications = useMemo<MergedNotification[]>(() => {
+    const sortByDate = (a: MergedNotification, b: MergedNotification) =>
+      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+
+    // High priority notifications (priority === 1) - keep in API order
+    const highPriority: MergedNotification[] = apiNotifications
+      .filter((n) => n.priority === 1)
+      .map((n) => ({ ...n, source: "api" as const }));
+
+    // Low priority: other API notifications + local notifications, merged and sorted by date
+    const lowPriorityApi: MergedNotification[] = apiNotifications
+      .filter((n) => n.priority !== 1)
+      .map((n) => ({ ...n, source: "api" as const }));
+
+    const localWithSource: MergedNotification[] = localNotifications.map(
+      (n) => ({
+        ...n,
+        source: "local" as const,
+      })
+    );
+
+    const lowPriority = [...lowPriorityApi, ...localWithSource].sort(
+      sortByDate
+    );
+
+    return [...highPriority, ...lowPriority];
+  }, [apiNotifications, localNotifications]);
+
+  const displayedNotifications = useMemo(() => {
+    return mergedNotifications.filter((n) => !clearingIds.has(n.id));
+  }, [mergedNotifications, clearingIds]);
+
+  const notifyCountChange = useCallback(() => {
+    window.dispatchEvent(new CustomEvent("notificationsChanged"));
+  }, []);
+
+  const handleMarkAsRead = useCallback(
+    async (id: string, source: "api" | "local") => {
+      try {
+        if (source === "api") {
+          await window.electron.hydraApi.patch(
+            `/profile/notifications/${id}/read`,
+            {
+              data: { id },
+              needsAuth: true,
+            }
+          );
+          setApiNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+          );
+        } else {
+          await window.electron.markLocalNotificationRead(id);
+          setLocalNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+          );
+        }
+        notifyCountChange();
+      } catch (error) {
+        logger.error("Failed to mark notification as read", error);
+      }
+    },
+    [notifyCountChange]
+  );
+
+  const handleMarkAllAsRead = useCallback(async () => {
+    try {
+      // Mark all API notifications as read
+      if (userDetails && apiNotifications.some((n) => !n.isRead)) {
+        await window.electron.hydraApi.patch(
+          `/profile/notifications/all/read`,
+          { needsAuth: true }
+        );
+        setApiNotifications((prev) =>
+          prev.map((n) => ({ ...n, isRead: true }))
+        );
+      }
+
+      // Mark all local notifications as read
+      await window.electron.markAllLocalNotificationsRead();
+      setLocalNotifications((prev) =>
+        prev.map((n) => ({ ...n, isRead: true }))
+      );
+
+      notifyCountChange();
+      showSuccessToast(t("marked_all_as_read"));
+    } catch (error) {
+      logger.error("Failed to mark all as read", error);
+      showErrorToast(t("failed_to_mark_as_read"));
+    }
+  }, [
+    apiNotifications,
+    userDetails,
+    showSuccessToast,
+    showErrorToast,
+    t,
+    notifyCountChange,
+  ]);
+
+  const handleDismiss = useCallback(
+    async (id: string, source: "api" | "local") => {
+      try {
+        if (source === "api") {
+          await window.electron.hydraApi.delete(
+            `/profile/notifications/${id}`,
+            { needsAuth: true }
+          );
+          setApiNotifications((prev) => prev.filter((n) => n.id !== id));
+          setPagination((prev) => ({ ...prev, total: prev.total - 1 }));
+        } else {
+          await window.electron.deleteLocalNotification(id);
+          setLocalNotifications((prev) => prev.filter((n) => n.id !== id));
+        }
+        notifyCountChange();
+      } catch (error) {
+        logger.error("Failed to dismiss notification", error);
+        showErrorToast(t("failed_to_dismiss"));
+      }
+    },
+    [showErrorToast, t, notifyCountChange]
+  );
+
+  const handleClearAll = useCallback(async () => {
+    try {
+      // Mark all as clearing for animation
+      const allIds = new Set([
+        ...apiNotifications.map((n) => n.id),
+        ...localNotifications.map((n) => n.id),
+      ]);
+      setClearingIds(allIds);
+
+      // Wait for exit animation
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Clear all API notifications
+      if (userDetails && apiNotifications.length > 0) {
+        await window.electron.hydraApi.delete(`/profile/notifications/all`, {
+          needsAuth: true,
+        });
+        setApiNotifications([]);
+      }
+
+      // Clear all local notifications
+      await window.electron.clearAllLocalNotifications();
+      setLocalNotifications([]);
+
+      setClearingIds(new Set());
+      setPagination({ total: 0, hasMore: false, skip: 0 });
+      notifyCountChange();
+      showSuccessToast(t("cleared_all"));
+    } catch (error) {
+      logger.error("Failed to clear all notifications", error);
+      setClearingIds(new Set());
+      showErrorToast(t("failed_to_clear"));
+    }
+  }, [
+    apiNotifications,
+    localNotifications,
+    userDetails,
+    showSuccessToast,
+    showErrorToast,
+    t,
+    notifyCountChange,
+  ]);
+
+  const handleLoadMore = useCallback(() => {
+    if (pagination.hasMore && !isLoading) {
+      fetchApiNotifications(pagination.skip, true);
+    }
+  }, [pagination, isLoading, fetchApiNotifications]);
+
+  const handleAcceptFriendRequest = useCallback(() => {
+    showSuccessToast(t("friend_request_accepted"));
+  }, [showSuccessToast, t]);
+
+  const handleRefuseFriendRequest = useCallback(() => {
+    showSuccessToast(t("friend_request_refused"));
+  }, [showSuccessToast, t]);
+
+  const renderNotification = (notification: MergedNotification) => {
+    const key =
+      notification.source === "local"
+        ? `local-${notification.id}`
+        : `api-${notification.id}`;
+
+    return (
+      <motion.div
+        key={key}
+        layout
+        initial={{ opacity: 0, x: -20 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: 100, transition: { duration: 0.2 } }}
+        transition={{ duration: 0.2 }}
+      >
+        {notification.source === "local" ? (
+          <LocalNotificationItem
+            notification={notification}
+            onDismiss={(id) => handleDismiss(id, "local")}
+            onMarkAsRead={(id) => handleMarkAsRead(id, "local")}
+          />
+        ) : (
+          <NotificationItem
+            notification={notification}
+            badges={badges}
+            onDismiss={(id) => handleDismiss(id, "api")}
+            onMarkAsRead={(id) => handleMarkAsRead(id, "api")}
+            onAcceptFriendRequest={handleAcceptFriendRequest}
+            onRefuseFriendRequest={handleRefuseFriendRequest}
+          />
+        )}
+      </motion.div>
+    );
+  };
+
+  return (
+    <div className="notifications">
+      <div className="notifications__actions">
+        <Button theme="outline" onClick={handleMarkAllAsRead}>
+          {t("mark_all_as_read")}
+        </Button>
+        <Button theme="danger" onClick={handleClearAll}>
+          {t("clear_all")}
+        </Button>
+      </div>
+
+      {isLoading && mergedNotifications.length === 0 ? (
+        <div className="notifications__loading">
+          <span>{t("loading")}</span>
+        </div>
+      ) : mergedNotifications.length === 0 ? (
+        <div className="notifications__empty">
+          <BellIcon size={48} className="notifications__empty-icon" />
+          <span className="notifications__empty-title">{t("empty_title")}</span>
+          <span className="notifications__empty-description">
+            {t("empty_description")}
+          </span>
+        </div>
+      ) : (
+        <>
+          <div className="notifications__list">
+            <AnimatePresence mode="popLayout">
+              {displayedNotifications.map(renderNotification)}
+            </AnimatePresence>
+          </div>
+
+          {pagination.hasMore && (
+            <div className="notifications__load-more">
+              <Button
+                theme="outline"
+                onClick={handleLoadMore}
+                disabled={isLoading}
+              >
+                {isLoading ? t("loading") : t("load_more")}
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss b/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
new file mode 100644
index 00000000..06bbd2ee
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
@@ -0,0 +1,124 @@
+@use "../../../scss/globals.scss";
+
+.all-friends-modal {
+  display: flex;
+  flex-direction: column;
+  gap: globals.$spacing-unit;
+  max-height: 400px;
+  margin-top: calc(globals.$spacing-unit * -1);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-weight: 600;
+    color: globals.$muted-color;
+    font-size: globals.$body-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__game {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+    font-size: globals.$small-font-size;
+    color: globals.$body-color;
+
+    img {
+      border-radius: 4px;
+    }
+
+    small {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__empty {
+    text-align: center;
+    padding: calc(globals.$spacing-unit * 4);
+    color: globals.$body-color;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding-top: globals.$spacing-unit;
+  }
+
+  &__remove {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: globals.$spacing-unit;
+    border-radius: 50%;
+    transition: all ease 0.2s;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+      color: globals.$error-color;
+      background-color: rgba(globals.$error-color, 0.1);
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
new file mode 100644
index 00000000..9593c0f2
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
@@ -0,0 +1,204 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { XCircleIcon } from "@primer/octicons-react";
+import { Modal, Avatar, Button } from "@renderer/components";
+import { useToast, useUserDetails } from "@renderer/hooks";
+import { logger } from "@renderer/logger";
+import SteamLogo from "@renderer/assets/steam-logo.svg?react";
+import type { UserFriend } from "@types";
+import "./all-friends-modal.scss";
+
+interface AllFriendsModalProps {
+  visible: boolean;
+  onClose: () => void;
+  userId: string;
+  isMe: boolean;
+}
+
+const PAGE_SIZE = 20;
+
+export function AllFriendsModal({
+  visible,
+  onClose,
+  userId,
+  isMe,
+}: AllFriendsModalProps) {
+  const { t } = useTranslation("user_profile");
+  const navigate = useNavigate();
+  const { undoFriendship } = useUserDetails();
+  const { showSuccessToast, showErrorToast } = useToast();
+
+  const [friends, setFriends] = useState<UserFriend[]>([]);
+  const [totalFriends, setTotalFriends] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(0);
+  const [removingId, setRemovingId] = useState<string | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const fetchFriends = useCallback(
+    async (pageNum: number, append = false) => {
+      if (isLoading) return;
+
+      setIsLoading(true);
+      try {
+        const url = isMe ? "/profile/friends" : `/users/${userId}/friends`;
+        const response = await window.electron.hydraApi.get<{
+          totalFriends: number;
+          friends: UserFriend[];
+        }>(url, {
+          params: { take: PAGE_SIZE, skip: pageNum * PAGE_SIZE },
+        });
+
+        if (append) {
+          setFriends((prev) => [...prev, ...response.friends]);
+        } else {
+          setFriends(response.friends);
+        }
+
+        setTotalFriends(response.totalFriends);
+        setHasMore((pageNum + 1) * PAGE_SIZE < response.totalFriends);
+        setPage(pageNum + 1);
+      } catch (error) {
+        logger.error("Failed to fetch friends", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [userId, isMe, isLoading]
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setFriends([]);
+      setPage(0);
+      setHasMore(true);
+      fetchFriends(0, false);
+    }
+  }, [visible, userId]);
+
+  const handleScroll = useCallback(() => {
+    if (!listRef.current || isLoading || !hasMore) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+      fetchFriends(page, true);
+    }
+  }, [isLoading, hasMore, page, fetchFriends]);
+
+  const handleFriendClick = (friendId: string) => {
+    onClose();
+    navigate(`/profile/${friendId}`);
+  };
+
+  const handleLoadMore = () => {
+    if (!isLoading && hasMore) {
+      fetchFriends(page, true);
+    }
+  };
+
+  const handleRemoveFriend = useCallback(
+    async (e: React.MouseEvent, friendId: string) => {
+      e.stopPropagation();
+      setRemovingId(friendId);
+
+      try {
+        await undoFriendship(friendId);
+        setFriends((prev) => prev.filter((f) => f.id !== friendId));
+        setTotalFriends((prev) => prev - 1);
+        showSuccessToast(t("friendship_removed"));
+      } catch (error) {
+        logger.error("Failed to remove friend", error);
+        showErrorToast(t("try_again"));
+      } finally {
+        setRemovingId(null);
+      }
+    },
+    [undoFriendship, showSuccessToast, showErrorToast, t]
+  );
+
+  const getGameImage = (game: { iconUrl: string | null; title: string }) => {
+    if (game.iconUrl) {
+      return <img alt={game.title} width={16} height={16} src={game.iconUrl} />;
+    }
+    return <SteamLogo width={16} height={16} />;
+  };
+
+  const modalTitle = (
+    <div className="all-friends-modal__title">
+      {t("friends")}
+      {totalFriends > 0 && (
+        <span className="all-friends-modal__count">{totalFriends}</span>
+      )}
+    </div>
+  );
+
+  return (
+    <Modal visible={visible} title={modalTitle} onClose={onClose}>
+      <div className="all-friends-modal">
+        {friends.length === 0 && !isLoading ? (
+          <div className="all-friends-modal__empty">
+            {t("no_friends_added")}
+          </div>
+        ) : (
+          <div
+            ref={listRef}
+            className="all-friends-modal__list"
+            onScroll={handleScroll}
+          >
+            {friends.map((friend) => (
+              <div
+                key={friend.id}
+                className="all-friends-modal__item"
+                onClick={() => handleFriendClick(friend.id)}
+                role="button"
+                tabIndex={0}
+              >
+                <Avatar
+                  size={40}
+                  src={friend.profileImageUrl}
+                  alt={friend.displayName}
+                />
+                <div className="all-friends-modal__info">
+                  <span className="all-friends-modal__name">
+                    {friend.displayName}
+                  </span>
+                  {friend.currentGame && (
+                    <div className="all-friends-modal__game">
+                      {getGameImage(friend.currentGame)}
+                      <small>{friend.currentGame.title}</small>
+                    </div>
+                  )}
+                </div>
+                {isMe && (
+                  <button
+                    type="button"
+                    className="all-friends-modal__remove"
+                    onClick={(e) => handleRemoveFriend(e, friend.id)}
+                    disabled={removingId === friend.id}
+                    title={t("undo_friendship")}
+                  >
+                    <XCircleIcon size={20} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {isLoading && (
+          <div className="all-friends-modal__loading">{t("loading")}...</div>
+        )}
+
+        {hasMore && !isLoading && friends.length > 0 && (
+          <div className="all-friends-modal__load-more">
+            <Button theme="outline" onClick={handleLoadMore}>
+              {t("load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.scss b/src/renderer/src/pages/profile/profile-content/badges-box.scss
new file mode 100644
index 00000000..cd68e338
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.scss
@@ -0,0 +1,44 @@
+@use "../../../scss/globals.scss";
+
+.badges-box {
+  &__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__box {
+    background-color: globals.$background-color;
+    border-radius: 4px;
+    border: solid 1px globals.$border-color;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      transform: scale(1.05);
+    }
+
+    img {
+      border-radius: 4px;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.tsx b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
new file mode 100644
index 00000000..94c68195
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
@@ -0,0 +1,56 @@
+import { userProfileContext } from "@renderer/context";
+import { useFormat } from "@renderer/hooks";
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "react-tooltip";
+import "./badges-box.scss";
+
+export function BadgesBox() {
+  const { userProfile, badges } = useContext(userProfileContext);
+  const { t } = useTranslation("user_profile");
+  const { numberFormatter } = useFormat();
+
+  if (!userProfile?.badges.length) return null;
+
+  return (
+    <div>
+      <div className="badges-box__section-header">
+        <div className="profile-content__section-title-group">
+          <h2>{t("badges")}</h2>
+          <span className="profile-content__section-badge">
+            {numberFormatter.format(userProfile.badges.length)}
+          </span>
+        </div>
+      </div>
+
+      <div className="badges-box__box">
+        <div className="badges-box__list">
+          {userProfile.badges.map((badgeName) => {
+            const badge = badges.find((b) => b.name === badgeName);
+
+            if (!badge) return null;
+
+            return (
+              <div
+                key={badge.name}
+                className="badges-box__item"
+                data-tooltip-place="top"
+                data-tooltip-content={badge.description}
+                data-tooltip-id="badges-box-tooltip"
+              >
+                <img
+                  src={badge.badge.url}
+                  alt={badge.name}
+                  width={32}
+                  height={32}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        <Tooltip id="badges-box-tooltip" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.scss b/src/renderer/src/pages/profile/profile-content/friends-box.scss
index 2e5a1bc1..2b6d28b7 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -63,4 +63,19 @@
   &__game-image {
     border-radius: 4px;
   }
+
+  &__view-all {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
 }
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.tsx b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
index bee4b35c..dfa0fcc0 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -1,15 +1,20 @@
 import { userProfileContext } from "@renderer/context";
-import { useFormat } from "@renderer/hooks";
-import { useContext } from "react";
+import { useFormat, useUserDetails } from "@renderer/hooks";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar, Link } from "@renderer/components";
+import { AllFriendsModal } from "./all-friends-modal";
 import "./friends-box.scss";
 
 export function FriendsBox() {
   const { userProfile, userStats } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
   const { t } = useTranslation("user_profile");
   const { numberFormatter } = useFormat();
+  const [showAllFriendsModal, setShowAllFriendsModal] = useState(false);
+
+  const isMe = userDetails?.id === userProfile?.id;
 
   const getGameImage = (game: { iconUrl: string | null; title: string }) => {
     if (game.iconUrl) {
@@ -29,55 +34,73 @@ export function FriendsBox() {
   if (!userProfile?.friends.length) return null;
 
   return (
-    <div>
-      <div className="friends-box__section-header">
-        <div className="profile-content__section-title-group">
-          <h2>{t("friends")}</h2>
-          {userStats && (
-            <span className="profile-content__section-badge">
-              {numberFormatter.format(userStats.friendsCount)}
-            </span>
-          )}
+    <>
+      <div>
+        <div className="friends-box__section-header">
+          <div className="profile-content__section-title-group">
+            <h2>{t("friends")}</h2>
+            {userStats && (
+              <span className="profile-content__section-badge">
+                {numberFormatter.format(userStats.friendsCount)}
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            className="friends-box__view-all"
+            onClick={() => setShowAllFriendsModal(true)}
+          >
+            {t("view_all")}
+          </button>
+        </div>
+
+        <div className="friends-box__box">
+          <ul className="friends-box__list">
+            {userProfile?.friends.map((friend) => (
+              <li
+                key={friend.id}
+                title={
+                  friend.currentGame
+                    ? t("playing", { game: friend.currentGame.title })
+                    : undefined
+                }
+              >
+                <Link
+                  to={`/profile/${friend.id}`}
+                  className="friends-box__list-item"
+                >
+                  <Avatar
+                    size={32}
+                    src={friend.profileImageUrl}
+                    alt={friend.displayName}
+                  />
+
+                  <div className="friends-box__friend-details">
+                    <span className="friends-box__friend-name">
+                      {friend.displayName}
+                    </span>
+                    {friend.currentGame && (
+                      <div className="friends-box__game-info">
+                        {getGameImage(friend.currentGame)}
+                        <small>{friend.currentGame.title}</small>
+                      </div>
+                    )}
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
 
-      <div className="friends-box__box">
-        <ul className="friends-box__list">
-          {userProfile?.friends.map((friend) => (
-            <li
-              key={friend.id}
-              title={
-                friend.currentGame
-                  ? t("playing", { game: friend.currentGame.title })
-                  : undefined
-              }
-            >
-              <Link
-                to={`/profile/${friend.id}`}
-                className="friends-box__list-item"
-              >
-                <Avatar
-                  size={32}
-                  src={friend.profileImageUrl}
-                  alt={friend.displayName}
-                />
-
-                <div className="friends-box__friend-details">
-                  <span className="friends-box__friend-name">
-                    {friend.displayName}
-                  </span>
-                  {friend.currentGame && (
-                    <div className="friends-box__game-info">
-                      {getGameImage(friend.currentGame)}
-                      <small>{friend.currentGame.title}</small>
-                    </div>
-                  )}
-                </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
+      {userProfile && (
+        <AllFriendsModal
+          visible={showAllFriendsModal}
+          onClose={() => setShowAllFriendsModal(false)}
+          userId={userProfile.id}
+          isMe={isMe}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index 8176bace..a5ae01da 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import type { GameShop } from "@types";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
+import { BadgesBox } from "./badges-box";
 import { FriendsBox } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
@@ -429,6 +430,7 @@ export function ProfileContent() {
             <UserStatsBox />
             <UserKarmaBox />
             <RecentGamesBox />
+            <BadgesBox />
             <FriendsBox />
             <ReportProfile />
           </div>
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 834cb0cf..6fd371c9 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -27,9 +27,23 @@
     }
   }
 
-  &__badges {
+  &__copy-button {
     display: flex;
-    gap: calc(globals.$spacing-unit / 2);
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 4px;
+    transition: all ease 0.2s;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
   }
 
   &__user-information {
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index fc354d01..9755fb68 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -3,6 +3,7 @@ import { userProfileContext } from "@renderer/context";
 import {
   BlockedIcon,
   CheckCircleFillIcon,
+  CopyIcon,
   PencilIcon,
   PersonAddIcon,
   SignOutIcon,
@@ -24,7 +25,6 @@ import type { FriendRequestAction } from "@types";
 import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal";
 import Skeleton from "react-loading-skeleton";
 import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button";
-import { Tooltip } from "react-tooltip";
 import "./profile-hero.scss";
 
 type FriendAction =
@@ -35,14 +35,8 @@ export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
 
-  const {
-    isMe,
-    badges,
-    getUserProfile,
-    userProfile,
-    heroBackground,
-    backgroundImage,
-  } = useContext(userProfileContext);
+  const { isMe, getUserProfile, userProfile, heroBackground, backgroundImage } =
+    useContext(userProfileContext);
   const {
     signOut,
     updateFriendRequestState,
@@ -251,6 +245,13 @@ export function ProfileHero() {
     }
   }, [isMe]);
 
+  const copyFriendCode = useCallback(() => {
+    if (userProfile?.id) {
+      navigator.clipboard.writeText(userProfile.id);
+      showSuccessToast(t("friend_code_copied"));
+    }
+  }, [userProfile, showSuccessToast, t]);
+
   const currentGame = useMemo(() => {
     if (isMe) {
       if (gameRunning)
@@ -311,28 +312,14 @@ export function ProfileHero() {
                     {userProfile?.displayName}
                   </h2>
 
-                  <div className="profile-hero__badges">
-                    {userProfile.badges.map((badgeName) => {
-                      const badge = badges.find((b) => b.name === badgeName);
-
-                      if (!badge) return null;
-
-                      return (
-                        <img
-                          key={badge.name}
-                          src={badge.badge.url}
-                          alt={badge.name}
-                          width={24}
-                          height={24}
-                          data-tooltip-place="top"
-                          data-tooltip-content={badge.description}
-                          data-tooltip-id="badge-name"
-                        />
-                      );
-                    })}
-
-                    <Tooltip id="badge-name" />
-                  </div>
+                  <button
+                    type="button"
+                    className="profile-hero__copy-button"
+                    onClick={copyFriendCode}
+                    title={t("copy_friend_code")}
+                  >
+                    <CopyIcon size={16} />
+                  </button>
                 </div>
               ) : (
                 <Skeleton width={150} height={28} />
diff --git a/src/types/index.ts b/src/types/index.ts
index 9c4f5b28..d326aeef 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -144,6 +144,10 @@ export interface FriendRequestSync {
   friendRequestCount: number;
 }
 
+export interface NotificationSync {
+  notificationCount: number;
+}
+
 export interface FriendRequest {
   id: string;
   displayName: string;
@@ -312,6 +316,58 @@ export interface GameArtifact {
   isFrozen: boolean;
 }
 
+export type NotificationType =
+  | "FRIEND_REQUEST_RECEIVED"
+  | "FRIEND_REQUEST_ACCEPTED"
+  | "BADGE_RECEIVED"
+  | "REVIEW_UPVOTE";
+
+export type LocalNotificationType =
+  | "EXTRACTION_COMPLETE"
+  | "DOWNLOAD_COMPLETE"
+  | "UPDATE_AVAILABLE"
+  | "ACHIEVEMENT_UNLOCKED";
+
+export interface Notification {
+  id: string;
+  type: NotificationType;
+  variables: Record<string, string>;
+  pictureUrl: string | null;
+  url: string | null;
+  isRead: boolean;
+  priority: number;
+  createdAt: string;
+}
+
+export interface LocalNotification {
+  id: string;
+  type: LocalNotificationType;
+  title: string;
+  description: string;
+  pictureUrl: string | null;
+  url: string | null;
+  isRead: boolean;
+  createdAt: string;
+}
+
+export type MergedNotification =
+  | (Notification & { source: "api" })
+  | (LocalNotification & { source: "local" });
+
+export interface NotificationsResponse {
+  notifications: Notification[];
+  pagination: {
+    total: number;
+    take: number;
+    skip: number;
+    hasMore: boolean;
+  };
+}
+
+export interface NotificationCountResponse {
+  count: number;
+}
+
 export interface ComparedAchievements {
   achievementsPointsTotal: number;
   owner: {

From 6257529297320cd55783306803880ea6683eb662 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:20:13 +0200
Subject: [PATCH 19/72] feat: enhance keyboard accessibility for notification
 items and friends modal

---
 .../src/pages/notifications/local-notification-item.tsx     | 5 +++++
 src/renderer/src/pages/notifications/notification-item.tsx  | 5 +++++
 .../src/pages/profile/profile-content/all-friends-modal.tsx | 6 ++++++
 3 files changed, 16 insertions(+)

diff --git a/src/renderer/src/pages/notifications/local-notification-item.tsx b/src/renderer/src/pages/notifications/local-notification-item.tsx
index 6ebc703b..1003f9d5 100644
--- a/src/renderer/src/pages/notifications/local-notification-item.tsx
+++ b/src/renderer/src/pages/notifications/local-notification-item.tsx
@@ -69,6 +69,11 @@ export function LocalNotificationItem({
         "notification-item--unread": !notification.isRead,
       })}
       onClick={handleClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          handleClick();
+        }
+      }}
       role="button"
       tabIndex={0}
     >
diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
index eb31ee36..96ede5e8 100644
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -177,6 +177,11 @@ export function NotificationItem({
         "notification-item--unread": !notification.isRead,
       })}
       onClick={handleClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          handleClick();
+        }
+      }}
       role="button"
       tabIndex={0}
     >
diff --git a/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
index 9593c0f2..735d88c1 100644
--- a/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
@@ -76,6 +76,7 @@ export function AllFriendsModal({
       setHasMore(true);
       fetchFriends(0, false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, userId]);
 
   const handleScroll = useCallback(() => {
@@ -152,6 +153,11 @@ export function AllFriendsModal({
                 key={friend.id}
                 className="all-friends-modal__item"
                 onClick={() => handleFriendClick(friend.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    handleFriendClick(friend.id);
+                  }
+                }}
                 role="button"
                 tabIndex={0}
               >

From cf16c8245c32b93188805543197e8e91ca941751 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:21:46 +0200
Subject: [PATCH 20/72] refactor(modal): change title type to React.ReactNode
 for better flexibility

---
 src/renderer/src/components/modal/modal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx
index 09a61438..f4892313 100644
--- a/src/renderer/src/components/modal/modal.tsx
+++ b/src/renderer/src/components/modal/modal.tsx
@@ -10,7 +10,7 @@ import cn from "classnames";
 
 export interface ModalProps {
   visible: boolean;
-  title: string;
+  title: React.ReactNode;
   description?: string;
   onClose: () => void;
   large?: boolean;
@@ -115,7 +115,6 @@ export function Modal({
           "modal--large": large,
         })}
         role="dialog"
-        aria-labelledby={title}
         aria-describedby={description}
         ref={modalContentRef}
         data-hydra-dialog

From affa7a2b2e3dd4708b0f9b0905af7178a2bf3205 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:42:34 +0200
Subject: [PATCH 21/72] feat: add fullscreen media modal to profile hero for
 avatar display

---
 proto                                         |  2 +-
 .../fullscreen-media-modal.scss               | 61 +++++++++++++
 .../fullscreen-media-modal.tsx                | 88 +++++++++++++++++++
 src/renderer/src/components/index.ts          |  1 +
 .../profile/profile-hero/profile-hero.tsx     | 21 ++++-
 5 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
 create mode 100644 src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx

diff --git a/proto b/proto
index 7a23620f..6f11c99c 160000
--- a/proto
+++ b/proto
@@ -1 +1 @@
-Subproject commit 7a23620f930f6fbb84c0abcaab5149a34ab4b4eb
+Subproject commit 6f11c99c572420a282ba5149b6866e39b8a4569c
diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
new file mode 100644
index 00000000..454653b8
--- /dev/null
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
@@ -0,0 +1,61 @@
+@use "../../scss/globals.scss";
+
+.fullscreen-media-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  &__close-button {
+    position: absolute;
+    top: calc(globals.$spacing-unit * 4);
+    right: calc(globals.$spacing-unit * 3);
+    cursor: pointer;
+    color: globals.$body-color;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    border: 1px solid globals.$border-color;
+    padding: globals.$spacing-unit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 0.2s;
+    z-index: 10;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+      transform: scale(1.1);
+    }
+  }
+
+  &__image-container {
+    max-width: 90%;
+    max-height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__image {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    animation: image-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  }
+}
+
+@keyframes image-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
new file mode 100644
index 00000000..12052834
--- /dev/null
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+
+import { Backdrop } from "../backdrop/backdrop";
+import "./fullscreen-media-modal.scss";
+
+export interface FullscreenMediaModalProps {
+  visible: boolean;
+  onClose: () => void;
+  src: string | null | undefined;
+  alt?: string;
+}
+
+export function FullscreenMediaModal({
+  visible,
+  onClose,
+  src,
+  alt,
+}: FullscreenMediaModalProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation("modal");
+
+  useEffect(() => {
+    if (visible) {
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      };
+
+      window.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    }
+
+    return () => {};
+  }, [onClose, visible]);
+
+  useEffect(() => {
+    const onMouseDown = (e: MouseEvent) => {
+      if (containerRef.current) {
+        const clickedOnImage = containerRef.current.contains(e.target as Node);
+
+        if (!clickedOnImage) {
+          onClose();
+        }
+      }
+    };
+
+    if (visible) {
+      window.addEventListener("mousedown", onMouseDown);
+    }
+
+    return () => {
+      window.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [onClose, visible]);
+
+  if (!visible || !src) return null;
+
+  return createPortal(
+    <Backdrop>
+      <div className="fullscreen-media-modal" role="dialog" aria-label={alt}>
+        <button
+          type="button"
+          onClick={onClose}
+          className="fullscreen-media-modal__close-button"
+          aria-label={t("close")}
+        >
+          <XIcon size={24} />
+        </button>
+
+        <div
+          ref={containerRef}
+          className="fullscreen-media-modal__image-container"
+        >
+          <img src={src} alt={alt} className="fullscreen-media-modal__image" />
+        </div>
+      </div>
+    </Backdrop>,
+    document.body
+  );
+}
diff --git a/src/renderer/src/components/index.ts b/src/renderer/src/components/index.ts
index e8876fcb..8bb028bd 100644
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -20,3 +20,4 @@ export * from "./game-context-menu/game-context-menu";
 export * from "./game-context-menu/use-game-actions";
 export * from "./star-rating/star-rating";
 export * from "./search-dropdown/search-dropdown";
+export * from "./fullscreen-media-modal/fullscreen-media-modal";
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index fc354d01..f9109067 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -9,7 +9,12 @@ import {
   XCircleFillIcon,
 } from "@primer/octicons-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
-import { Avatar, Button, Link } from "@renderer/components";
+import {
+  Avatar,
+  Button,
+  FullscreenMediaModal,
+  Link,
+} from "@renderer/components";
 import { useTranslation } from "react-i18next";
 import {
   useAppSelector,
@@ -33,6 +38,7 @@ type FriendAction =
 
 export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
+  const [showFullscreenAvatar, setShowFullscreenAvatar] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
 
   const {
@@ -246,10 +252,12 @@ export function ProfileHero() {
   ]);
 
   const handleAvatarClick = useCallback(() => {
-    if (isMe) {
+    if (userProfile?.profileImageUrl) {
+      setShowFullscreenAvatar(true);
+    } else if (isMe) {
       setShowEditProfileModal(true);
     }
-  }, [isMe]);
+  }, [isMe, userProfile?.profileImageUrl]);
 
   const currentGame = useMemo(() => {
     if (isMe) {
@@ -272,6 +280,13 @@ export function ProfileHero() {
         onClose={() => setShowEditProfileModal(false)}
       />
 
+      <FullscreenMediaModal
+        visible={showFullscreenAvatar}
+        onClose={() => setShowFullscreenAvatar(false)}
+        src={userProfile?.profileImageUrl}
+        alt={userProfile?.displayName}
+      />
+
       <section
         className="profile-hero__content-box"
         style={{ background: !backgroundImage ? heroBackground : undefined }}

From 40d428c19e83cf0a21d1618f8841aed7b40fa245 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:43:43 +0200
Subject: [PATCH 22/72] refactor(fullscreen-media-modal): remove unused
 useCallback import

---
 .../fullscreen-media-modal/fullscreen-media-modal.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
index 12052834..2d2abb6d 100644
--- a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { XIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";

From 1524e73ee6d901858b27ab938c7c75c6f64aaa01 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:49:10 +0200
Subject: [PATCH 23/72] refactor(fullscreen-media-modal): replace div with
 dialog element for improved semantics

---
 .../fullscreen-media-modal/fullscreen-media-modal.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
index 2d2abb6d..700bddb1 100644
--- a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
@@ -65,7 +65,7 @@ export function FullscreenMediaModal({
 
   return createPortal(
     <Backdrop>
-      <div className="fullscreen-media-modal" role="dialog" aria-label={alt}>
+      <dialog className="fullscreen-media-modal" open aria-label={alt}>
         <button
           type="button"
           onClick={onClose}
@@ -81,7 +81,7 @@ export function FullscreenMediaModal({
         >
           <img src={src} alt={alt} className="fullscreen-media-modal__image" />
         </div>
-      </div>
+      </dialog>
     </Backdrop>,
     document.body
   );

From 677f34fe3d632cdd2aaef0253c35023468e4254d Mon Sep 17 00:00:00 2001
From: moi952 <52632400+moi952@users.noreply.github.com>
Date: Tue, 16 Dec 2025 22:41:53 +0100
Subject: [PATCH 24/72] feat: add missing French translations

---
 src/locales/fr/translation.json | 226 +++++++++++++++++++++++++++++++-
 1 file changed, 220 insertions(+), 6 deletions(-)

diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json
index 8fc07722..48bf6086 100644
--- a/src/locales/fr/translation.json
+++ b/src/locales/fr/translation.json
@@ -27,7 +27,69 @@
     "friends": "Amis",
     "need_help": "Besoin d'aide ?",
     "favorites": "Favoris",
-    "playable_button_title": "Afficher uniquement les jeux que vous pouvez jouer maintenant"
+    "playable_button_title": "Afficher uniquement les jeux que vous pouvez jouer maintenant",
+    "library": "Bibliothèque",
+    "add_custom_game_tooltip": "Ajouter un jeu personnalisé",
+    "show_playable_only_tooltip": "Afficher uniquement les jeux jouables",
+    "custom_game_modal": "Ajouter un jeu personnalisé",
+    "custom_game_modal_description": "Ajoutez un jeu personnalisé à votre bibliothèque en sélectionnant un fichier exécutable",
+    "custom_game_modal_executable_path": "Chemin de l'exécutable",
+    "custom_game_modal_select_executable": "Sélectionner un fichier exécutable",
+    "custom_game_modal_title": "Titre",
+    "custom_game_modal_enter_title": "Entrer le titre",
+    "custom_game_modal_browse": "Parcourir",
+    "custom_game_modal_cancel": "Annuler",
+    "custom_game_modal_add": "Ajouter le jeu",
+    "custom_game_modal_adding": "Ajout du jeu…",
+    "custom_game_modal_success": "Jeu personnalisé ajouté avec succès",
+    "custom_game_modal_failed": "Échec de l’ajout du jeu personnalisé",
+    "custom_game_modal_executable": "Exécutable",
+    "edit_game_modal": "Personnaliser les ressources",
+    "edit_game_modal_description": "Personnalisez les ressources et les détails du jeu",
+    "edit_game_modal_title": "Titre",
+    "edit_game_modal_enter_title": "Entrer le titre",
+    "edit_game_modal_image": "Image",
+    "edit_game_modal_select_image": "Sélectionner une image",
+    "edit_game_modal_browse": "Parcourir",
+    "edit_game_modal_image_preview": "Aperçu de l’image",
+    "edit_game_modal_icon": "Icône",
+    "edit_game_modal_select_icon": "Sélectionner une icône",
+    "edit_game_modal_icon_preview": "Aperçu de l’icône",
+    "edit_game_modal_logo": "Logo",
+    "edit_game_modal_select_logo": "Sélectionner un logo",
+    "edit_game_modal_logo_preview": "Aperçu du logo",
+    "edit_game_modal_hero": "Bannière de la bibliothèque",
+    "edit_game_modal_select_hero": "Sélectionner l’image de bannière",
+    "edit_game_modal_hero_preview": "Aperçu de la bannière",
+    "edit_game_modal_cancel": "Annuler",
+    "edit_game_modal_update": "Mettre à jour",
+    "edit_game_modal_updating": "Mise à jour…",
+    "edit_game_modal_fill_required": "Veuillez remplir tous les champs requis",
+    "edit_game_modal_success": "Ressources mises à jour avec succès",
+    "edit_game_modal_failed": "Échec de la mise à jour des ressources",
+    "edit_game_modal_image_filter": "Image",
+    "edit_game_modal_icon_resolution": "Résolution recommandée : 256x256px",
+    "edit_game_modal_logo_resolution": "Résolution recommandée : 640x360px",
+    "edit_game_modal_hero_resolution": "Résolution recommandée : 1920x620px",
+    "edit_game_modal_assets": "Ressources",
+    "edit_game_modal_drop_icon_image_here": "Déposez l’image de l’icône ici",
+    "edit_game_modal_drop_logo_image_here": "Déposez l’image du logo ici",
+    "edit_game_modal_drop_hero_image_here": "Déposez l’image de la bannière ici",
+    "edit_game_modal_drop_to_replace_icon": "Déposez pour remplacer l’icône",
+    "edit_game_modal_drop_to_replace_logo": "Déposez pour remplacer le logo",
+    "edit_game_modal_drop_to_replace_hero": "Déposez pour remplacer la bannière",
+    "install_decky_plugin": "Installer le plugin Decky",
+    "update_decky_plugin": "Mettre à jour le plugin Decky",
+    "decky_plugin_installed_version": "Plugin Decky (v{{version}})",
+    "install_decky_plugin_title": "Installer le plugin Decky Hydra",
+    "install_decky_plugin_message": "Cela téléchargera et installera le plugin Hydra pour Decky Loader. Des permissions élevées peuvent être requises. Continuer ?",
+    "update_decky_plugin_title": "Mettre à jour le plugin Decky Hydra",
+    "update_decky_plugin_message": "Une nouvelle version du plugin Decky Hydra est disponible. Souhaitez-vous la mettre à jour maintenant ?",
+    "decky_plugin_installed": "Plugin Decky v{{version}} installé avec succès",
+    "decky_plugin_installation_failed": "Échec de l’installation du plugin Decky : {{error}}",
+    "decky_plugin_installation_error": "Erreur lors de l’installation du plugin Decky : {{error}}",
+    "confirm": "Confirmer",
+    "cancel": "Annuler"
   },
   "header": {
     "search": "Rechercher",
@@ -37,7 +99,15 @@
     "search_results": "Résultats de la recherche",
     "settings": "Paramètres",
     "version_available_install": "Version {{version}} disponible. Cliquez ici pour redémarrer et installer.",
-    "version_available_download": "Version {{version}} disponible. Cliquez ici pour télécharger."
+    "version_available_download": "Version {{version}} disponible. Cliquez ici pour télécharger.",
+    "search_library": "Rechercher dans la bibliothèque",
+    "recent_searches": "Recherches récentes",
+    "suggestions": "Suggestions",
+    "clear_history": "Effacer",
+    "remove_from_history": "Supprimer de l'historique",
+    "loading": "Chargement…",
+    "no_results": "Aucun résultat",
+    "library": "Bibliothèque"
   },
   "bottom_panel": {
     "no_downloads_in_progress": "Aucun téléchargement en cours",
@@ -47,7 +117,8 @@
     "checking_files": "Vérification des fichiers de {{title}}… ({{percentage}} terminé)",
     "installing_common_redist": "{{log}}…",
     "installation_complete": "Installation terminée",
-    "installation_complete_message": "Redistribuables communs installés avec succès"
+    "installation_complete_message": "Redistribuables communs installés avec succès",
+    "extracting": "Extraction de {{title}}… ({{percentage}} terminé)"
   },
   "catalogue": {
     "search": "Filtrer…",
@@ -198,7 +269,113 @@
     "download_error_not_cached_on_hydra": "Ce téléchargement n'est pas disponible sur Nimbus.",
     "game_removed_from_favorites": "Jeu retiré des favoris",
     "game_added_to_favorites": "Jeu ajouté aux favoris",
-    "automatically_extract_downloaded_files": "Extraire automatiquement les fichiers téléchargés"
+    "automatically_extract_downloaded_files": "Extraire automatiquement les fichiers téléchargés",
+    "already_in_library": "Déjà dans la bibliothèque",
+    "create_shortcut_simple": "Créer un raccourci",
+    "properties": "Propriétés",
+    "extracting": "Extraction en cours",
+    "new_download_option": "Nouveau",
+    "create_steam_shortcut": "Créer un raccourci Steam",
+    "you_might_need_to_restart_steam": "Vous devrez peut-être redémarrer Steam pour voir les changements",
+    "add_to_favorites": "Ajouter aux favoris",
+    "remove_from_favorites": "Retirer des favoris",
+    "failed_update_favorites": "Échec de la mise à jour des favoris",
+    "game_removed_from_library": "Jeu retiré de la bibliothèque",
+    "failed_remove_from_library": "Échec de la suppression du jeu de la bibliothèque",
+    "files_removed_success": "Fichiers supprimés avec succès",
+    "failed_remove_files": "Échec de la suppression des fichiers",
+    "rating_count": "Évaluations",
+    "show_more": "Afficher plus",
+    "show_less": "Afficher moins",
+    "reviews": "Avis",
+    "review_played_for": "Temps de jeu",
+    "leave_a_review": "Laisser un avis",
+    "write_review_placeholder": "Partagez votre avis sur ce jeu…",
+    "sort_newest": "Les plus récents",
+    "sort_oldest": "Les plus anciens",
+    "sort_highest_score": "Meilleure note",
+    "sort_lowest_score": "Note la plus basse",
+    "sort_most_voted": "Les plus votés",
+    "no_reviews_yet": "Aucun avis pour le moment",
+    "be_first_to_review": "Soyez le premier à donner votre avis !",
+    "rating": "Note",
+    "rating_stats": "Évaluation",
+    "rating_very_negative": "Très négatif",
+    "rating_negative": "Négatif",
+    "rating_neutral": "Neutre",
+    "rating_positive": "Positif",
+    "rating_very_positive": "Très positif",
+    "submit_review": "Envoyer",
+    "submitting": "Envoi…",
+    "review_submitted_successfully": "Avis envoyé avec succès !",
+    "review_submission_failed": "Échec de l’envoi de l’avis. Veuillez réessayer.",
+    "review_cannot_be_empty": "Le champ de l’avis ne peut pas être vide.",
+    "review_deleted_successfully": "Avis supprimé avec succès.",
+    "review_deletion_failed": "Échec de la suppression de l’avis.",
+    "loading_reviews": "Chargement des avis…",
+    "loading_more_reviews": "Chargement de plus d’avis…",
+    "load_more_reviews": "Charger plus d’avis",
+    "you_seemed_to_enjoy_this_game": "Vous semblez avoir apprécié ce jeu",
+    "would_you_recommend_this_game": "Souhaitez-vous laisser un avis sur ce jeu ?",
+    "yes": "Oui",
+    "maybe_later": "Peut-être plus tard",
+    "backup_failed": "Échec de la sauvegarde",
+    "update_playtime_title": "Mettre à jour le temps de jeu",
+    "update_playtime_description": "Mettre à jour manuellement le temps de jeu pour {{game}}",
+    "update_playtime": "Mettre à jour le temps de jeu",
+    "update_playtime_success": "Temps de jeu mis à jour avec succès",
+    "update_playtime_error": "Échec de la mise à jour du temps de jeu",
+    "update_game_playtime": "Mettre à jour le temps de jeu",
+    "manual_playtime_warning": "Vos heures seront marquées comme modifiées manuellement et cela ne peut pas être annulé.",
+    "manual_playtime_tooltip": "Ce temps de jeu a été modifié manuellement",
+    "game_removed_from_pinned": "Jeu retiré des épinglés",
+    "game_added_to_pinned": "Jeu ajouté aux épinglés",
+    "create_start_menu_shortcut": "Créer un raccourci dans le menu Démarrer",
+    "invalid_wine_prefix_path": "Chemin du préfixe Wine invalide",
+    "invalid_wine_prefix_path_description": "Le chemin du préfixe Wine est invalide. Veuillez vérifier et réessayer.",
+    "missing_wine_prefix": "Un préfixe Wine est requis pour créer une sauvegarde sous Linux",
+    "artifact_renamed": "Sauvegarde renommée avec succès",
+    "rename_artifact": "Renommer la sauvegarde",
+    "rename_artifact_description": "Renommez la sauvegarde avec un nom plus descriptif",
+    "artifact_name_label": "Nom de la sauvegarde",
+    "artifact_name_placeholder": "Entrez un nom pour la sauvegarde",
+    "save_changes": "Enregistrer les modifications",
+    "required_field": "Ce champ est requis",
+    "max_length_field": "Ce champ doit contenir moins de {{length}} caractères",
+    "freeze_backup": "Épingler pour éviter l’écrasement automatique",
+    "unfreeze_backup": "Désépingler",
+    "backup_frozen": "Sauvegarde épinglée",
+    "backup_unfrozen": "Sauvegarde désépinglée",
+    "backup_freeze_failed": "Échec de l’épinglage de la sauvegarde",
+    "backup_freeze_failed_description": "Vous devez laisser au moins un emplacement libre pour les sauvegardes automatiques",
+    "edit_game_modal_button": "Personnaliser les ressources du jeu",
+    "game_details": "Détails du jeu",
+    "prices": "Prix",
+    "no_prices_found": "Aucun prix trouvé",
+    "view_all_prices": "Cliquer pour voir tous les prix",
+    "retail_price": "Prix officiel",
+    "keyshop_price": "Prix Keyshop",
+    "historical_retail": "Historique officiel",
+    "historical_keyshop": "Historique Keyshop",
+    "language": "Langue",
+    "caption": "Sous-titres",
+    "audio": "Audio",
+    "filter_by_source": "Filtrer par source",
+    "no_repacks_found": "Aucune source trouvée pour ce jeu",
+    "delete_review": "Supprimer l’avis",
+    "remove_review": "Retirer l’avis",
+    "delete_review_modal_title": "Voulez-vous vraiment supprimer votre avis ?",
+    "delete_review_modal_description": "Cette action est irréversible.",
+    "delete_review_modal_delete_button": "Supprimer",
+    "delete_review_modal_cancel_button": "Annuler",
+    "vote_failed": "Échec de l’enregistrement de votre vote. Veuillez réessayer.",
+    "show_original": "Afficher l’original",
+    "show_translation": "Afficher la traduction",
+    "show_original_translated_from": "Afficher l’original (traduit depuis {{language}})",
+    "hide_original": "Masquer l’original",
+    "review_from_blocked_user": "Avis d’un utilisateur bloqué",
+    "show": "Afficher",
+    "hide": "Masquer"
   },
   "activation": {
     "title": "Activer Hydra",
@@ -237,7 +414,11 @@
     "resume_seeding": "Reprendre le partage",
     "options": "Gérer",
     "extract": "Extraire les fichiers",
-    "extracting": "Extraction des fichiers…"
+    "extracting": "Extraction des fichiers…",
+    "delete_archive_title": "Voulez-vous supprimer {{fileName}} ?",
+    "delete_archive_description": "Le fichier a été extrait avec succès et n’est plus nécessaire.",
+    "yes": "Oui",
+    "no": "Non"
   },
   "settings": {
     "downloads_path": "Chemin des téléchargements",
@@ -366,7 +547,40 @@
     "bottom-left": "En bas à gauche",
     "bottom-center": "En bas au centre",
     "bottom-right": "En bas à droite",
-    "enable_friend_start_game_notifications": "Quand un ami commence à jouer à un jeu"
+    "enable_friend_start_game_notifications": "Quand un ami commence à jouer à un jeu",
+    "adding": "Ajout…",
+    "failed_add_download_source": "Échec de l’ajout de la source de téléchargement. Veuillez réessayer.",
+    "download_source_already_exists": "Cette URL de source existe déjà",
+    "download_source_pending_matching": "Mise à jour imminente",
+    "download_source_matched": "À jour",
+    "download_source_matching": "Mise à jour",
+    "download_source_failed": "Erreur",
+    "download_source_no_information": "Aucune information disponible",
+    "removed_all_download_sources": "Toutes les sources de téléchargement supprimées",
+    "download_sources_synced_successfully": "Toutes les sources de téléchargement ont été synchronisées",
+    "importing": "Importation…",
+    "hydra_cloud": "Hydra Cloud",
+    "debrid": "Debrid",
+    "enable_steam_achievements": "Activer la recherche de succès Steam",
+    "alignment": "Alignement",
+    "variation": "Variation",
+    "default": "Par défaut",
+    "rare": "Rare",
+    "platinum": "Platine",
+    "hidden": "Caché",
+    "test_notification": "Notification de test",
+    "achievement_sound_volume": "Volume du son de succès",
+    "select_achievement_sound": "Sélectionner un son de succès",
+    "change_achievement_sound": "Changer le son de succès",
+    "remove_achievement_sound": "Supprimer le son de succès",
+    "preview_sound": "Prévisualiser le son",
+    "select": "Sélectionner",
+    "preview": "Aperçu",
+    "remove": "Supprimer",
+    "no_sound_file_selected": "Aucun fichier sonore sélectionné",
+    "notification_preview": "Aperçu de la notification de succès",
+    "autoplay_trailers_on_game_page": "Lire automatiquement les bandes-annonces sur la page du jeu",
+    "hide_to_tray_on_game_start": "Réduire Hydra dans la barre système au lancement d’un jeu"
   },
   "notifications": {
     "download_complete": "Téléchargement terminé",

From 6cd65d6239215a8ff6757050a0f07ef0631c99fa Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Thu, 18 Dec 2025 22:41:28 +0200
Subject: [PATCH 25/72] feat: implement add friend modal and enhance friends
 box with add friend functionality

---
 src/renderer/src/components/header/header.tsx |   3 +-
 .../search-dropdown/search-dropdown.scss      |   2 +-
 .../search-dropdown/search-dropdown.tsx       |  28 +--
 .../profile-content/add-friend-modal.scss     |  54 ++++++
 .../profile-content/add-friend-modal.tsx      | 160 ++++++++++++++++++
 .../profile-content/all-friends-modal.scss    |  23 ---
 .../profile-content/all-friends-modal.tsx     |  36 ----
 .../profile/profile-content/friends-box.scss  |  27 +++
 .../profile/profile-content/friends-box.tsx   |  47 +++--
 .../profile-content/profile-content.tsx       |   2 +-
 .../profile/profile-hero/profile-hero.scss    |   8 +-
 .../user-friend-modal-list.tsx                |  18 +-
 12 files changed, 289 insertions(+), 119 deletions(-)
 create mode 100644 src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
 create mode 100644 src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx

diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx
index 4f5253f1..5c058252 100644
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -324,7 +324,8 @@ export function Header() {
       <SearchDropdown
         visible={
           isDropdownVisible &&
-          (historyItems.length > 0 ||
+          (searchValue.trim().length > 0 ||
+            historyItems.length > 0 ||
             suggestions.length > 0 ||
             isLoadingSuggestions)
         }
diff --git a/src/renderer/src/components/search-dropdown/search-dropdown.scss b/src/renderer/src/components/search-dropdown/search-dropdown.scss
index 40a55432..6a2cbede 100644
--- a/src/renderer/src/components/search-dropdown/search-dropdown.scss
+++ b/src/renderer/src/components/search-dropdown/search-dropdown.scss
@@ -5,7 +5,7 @@
   background-color: globals.$dark-background-color;
   border: 1px solid globals.$border-color;
   border-radius: 8px;
-  max-height: 300px;
+  max-height: 350px;
   overflow-y: auto;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 1000;
diff --git a/src/renderer/src/components/search-dropdown/search-dropdown.tsx b/src/renderer/src/components/search-dropdown/search-dropdown.tsx
index 4142e4a5..cc7ce5b4 100644
--- a/src/renderer/src/components/search-dropdown/search-dropdown.tsx
+++ b/src/renderer/src/components/search-dropdown/search-dropdown.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ClockIcon, SearchIcon, XIcon } from "@primer/octicons-react";
 import cn from "classnames";
@@ -92,23 +92,8 @@ export function SearchDropdown({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [visible, onClose, searchContainerRef]);
 
-  const handleItemClick = useCallback(
-    (
-      type: "history" | "suggestion",
-      item: SearchHistoryEntry | SearchSuggestion
-    ) => {
-      if (type === "history") {
-        onSelectHistory((item as SearchHistoryEntry).query);
-      } else {
-        onSelectSuggestion(item as SearchSuggestion);
-      }
-    },
-    [onSelectHistory, onSelectSuggestion]
-  );
-
   if (!visible) return null;
 
-  const totalItems = historyItems.length + suggestions.length;
   const hasHistory = historyItems.length > 0;
   const hasSuggestions = suggestions.length > 0;
 
@@ -158,7 +143,7 @@ export function SearchDropdown({
                       activeIndex === getItemIndex("history", index),
                   })}
                   onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => handleItemClick("history", item)}
+                  onClick={() => onSelectHistory(item.query)}
                 >
                   <ClockIcon size={16} className="search-dropdown__item-icon" />
                   <span className="search-dropdown__item-text">
@@ -200,7 +185,7 @@ export function SearchDropdown({
                       activeIndex === getItemIndex("suggestion", index),
                   })}
                   onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => handleItemClick("suggestion", item)}
+                  onClick={() => onSelectSuggestion(item)}
                 >
                   {item.iconUrl ? (
                     <img
@@ -227,13 +212,6 @@ export function SearchDropdown({
       {isLoadingSuggestions && !hasSuggestions && !hasHistory && (
         <div className="search-dropdown__loading">{t("loading")}</div>
       )}
-
-      {!isLoadingSuggestions &&
-        !hasHistory &&
-        !hasSuggestions &&
-        totalItems === 0 && (
-          <div className="search-dropdown__empty">{t("no_results")}</div>
-        )}
     </div>
   );
 
diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
new file mode 100644
index 00000000..a2db81ef
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
@@ -0,0 +1,54 @@
+@use "../../../scss/globals.scss";
+
+.add-friend-modal {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  width: 100%;
+  min-width: 400px;
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: globals.$spacing-unit;
+  }
+
+  &__button {
+    align-self: flex-end;
+    white-space: nowrap;
+  }
+
+  &__pending-status {
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    text-align: center;
+    padding: calc(globals.$spacing-unit / 2);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    margin-top: calc(globals.$spacing-unit * -1);
+  }
+
+  &__pending-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+
+    h3 {
+      margin: 0;
+      font-size: globals.$body-font-size;
+      font-weight: 600;
+      color: globals.$muted-color;
+    }
+  }
+
+  &__pending-list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
new file mode 100644
index 00000000..04838f6f
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
@@ -0,0 +1,160 @@
+import { Button, Modal, TextField } from "@renderer/components";
+import { useToast, useUserDetails } from "@renderer/hooks";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { UserFriendItem } from "@renderer/pages/shared-modals/user-friend-modal/user-friend-item";
+import "./add-friend-modal.scss";
+
+interface AddFriendModalProps {
+  readonly visible: boolean;
+  readonly onClose: () => void;
+}
+
+export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
+  const { t } = useTranslation("user_profile");
+  const navigate = useNavigate();
+
+  const [friendCode, setFriendCode] = useState("");
+  const [isAddingFriend, setIsAddingFriend] = useState(false);
+
+  const {
+    sendFriendRequest,
+    updateFriendRequestState,
+    friendRequests,
+    fetchFriendRequests,
+  } = useUserDetails();
+
+  const { showSuccessToast, showErrorToast } = useToast();
+
+  useEffect(() => {
+    if (visible) {
+      setFriendCode("");
+      fetchFriendRequests();
+    }
+  }, [visible, fetchFriendRequests]);
+
+  const handleChangeFriendCode = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const code = e.target.value.trim().slice(0, 8);
+    setFriendCode(code);
+  };
+
+  const validateFriendCode = (callback: () => void) => {
+    if (friendCode.length === 8) {
+      return callback();
+    }
+
+    showErrorToast(t("friend_code_length_error"));
+  };
+
+  const handleClickAddFriend = () => {
+    setIsAddingFriend(true);
+    sendFriendRequest(friendCode)
+      .then(() => {
+        setFriendCode("");
+        showSuccessToast(t("request_sent"));
+      })
+      .catch(() => {
+        showErrorToast(t("error_adding_friend"));
+      })
+      .finally(() => {
+        setIsAddingFriend(false);
+      });
+  };
+
+  const handleClickSeeProfile = () => {
+    if (friendCode.length === 8) {
+      onClose();
+      navigate(`/profile/${friendCode}`);
+    }
+  };
+
+  const handleClickRequest = (userId: string) => {
+    onClose();
+    navigate(`/profile/${userId}`);
+  };
+
+  const handleCancelFriendRequest = (userId: string) => {
+    updateFriendRequestState(userId, "CANCEL").catch(() => {
+      showErrorToast(t("try_again"));
+    });
+  };
+
+  const handleAcceptFriendRequest = (userId: string) => {
+    updateFriendRequestState(userId, "ACCEPTED")
+      .then(() => {
+        showSuccessToast(t("request_accepted"));
+      })
+      .catch(() => {
+        showErrorToast(t("try_again"));
+      });
+  };
+
+  const handleRefuseFriendRequest = (userId: string) => {
+    updateFriendRequestState(userId, "REFUSED").catch(() => {
+      showErrorToast(t("try_again"));
+    });
+  };
+
+  const sentRequests = friendRequests.filter((req) => req.type === "SENT");
+  const currentRequest =
+    friendCode.length === 8
+      ? sentRequests.find((req) => req.id === friendCode)
+      : null;
+
+  return (
+    <Modal visible={visible} title={t("add_friends")} onClose={onClose}>
+      <div className="add-friend-modal">
+        <div className="add-friend-modal__actions">
+          <TextField
+            label={t("friend_code")}
+            value={friendCode}
+            containerProps={{ style: { flex: 1 } }}
+            onChange={handleChangeFriendCode}
+          />
+          <Button
+            disabled={isAddingFriend}
+            type="button"
+            className="add-friend-modal__button"
+            onClick={() => validateFriendCode(handleClickAddFriend)}
+          >
+            {isAddingFriend ? t("sending") : t("add")}
+          </Button>
+          <Button
+            theme="outline"
+            onClick={() => validateFriendCode(handleClickSeeProfile)}
+            disabled={isAddingFriend}
+            className="add-friend-modal__button"
+            type="button"
+          >
+            {t("see_profile")}
+          </Button>
+        </div>
+        {currentRequest && (
+          <div className="add-friend-modal__pending-status">{t("pending")}</div>
+        )}
+
+        {sentRequests.length > 0 && (
+          <div className="add-friend-modal__pending-container">
+            <h3>{t("pending")}</h3>
+            <div className="add-friend-modal__pending-list">
+              {sentRequests.map((request) => (
+                <UserFriendItem
+                  key={request.id}
+                  displayName={request.displayName}
+                  type={request.type}
+                  profileImageUrl={request.profileImageUrl}
+                  userId={request.id}
+                  onClickAcceptRequest={handleAcceptFriendRequest}
+                  onClickCancelRequest={handleCancelFriendRequest}
+                  onClickRefuseRequest={handleRefuseFriendRequest}
+                  onClickItem={handleClickRequest}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss b/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
index 06bbd2ee..8ecbaa46 100644
--- a/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
@@ -98,27 +98,4 @@
     justify-content: center;
     padding-top: globals.$spacing-unit;
   }
-
-  &__remove {
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    color: globals.$body-color;
-    cursor: pointer;
-    padding: globals.$spacing-unit;
-    border-radius: 50%;
-    transition: all ease 0.2s;
-    opacity: 0.5;
-
-    &:hover {
-      opacity: 1;
-      color: globals.$error-color;
-      background-color: rgba(globals.$error-color, 0.1);
-    }
-
-    &:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-  }
 }
diff --git a/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
index 735d88c1..4344956a 100644
--- a/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
@@ -1,9 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { XCircleIcon } from "@primer/octicons-react";
 import { Modal, Avatar, Button } from "@renderer/components";
-import { useToast, useUserDetails } from "@renderer/hooks";
 import { logger } from "@renderer/logger";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import type { UserFriend } from "@types";
@@ -26,15 +24,12 @@ export function AllFriendsModal({
 }: AllFriendsModalProps) {
   const { t } = useTranslation("user_profile");
   const navigate = useNavigate();
-  const { undoFriendship } = useUserDetails();
-  const { showSuccessToast, showErrorToast } = useToast();
 
   const [friends, setFriends] = useState<UserFriend[]>([]);
   const [totalFriends, setTotalFriends] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [page, setPage] = useState(0);
-  const [removingId, setRemovingId] = useState<string | null>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
   const fetchFriends = useCallback(
@@ -99,26 +94,6 @@ export function AllFriendsModal({
     }
   };
 
-  const handleRemoveFriend = useCallback(
-    async (e: React.MouseEvent, friendId: string) => {
-      e.stopPropagation();
-      setRemovingId(friendId);
-
-      try {
-        await undoFriendship(friendId);
-        setFriends((prev) => prev.filter((f) => f.id !== friendId));
-        setTotalFriends((prev) => prev - 1);
-        showSuccessToast(t("friendship_removed"));
-      } catch (error) {
-        logger.error("Failed to remove friend", error);
-        showErrorToast(t("try_again"));
-      } finally {
-        setRemovingId(null);
-      }
-    },
-    [undoFriendship, showSuccessToast, showErrorToast, t]
-  );
-
   const getGameImage = (game: { iconUrl: string | null; title: string }) => {
     if (game.iconUrl) {
       return <img alt={game.title} width={16} height={16} src={game.iconUrl} />;
@@ -177,17 +152,6 @@ export function AllFriendsModal({
                     </div>
                   )}
                 </div>
-                {isMe && (
-                  <button
-                    type="button"
-                    className="all-friends-modal__remove"
-                    onClick={(e) => handleRemoveFriend(e, friend.id)}
-                    disabled={removingId === friend.id}
-                    title={t("undo_friendship")}
-                  >
-                    <XCircleIcon size={20} />
-                  </button>
-                )}
               </div>
             ))}
           </div>
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.scss b/src/renderer/src/pages/profile/profile-content/friends-box.scss
index 2b6d28b7..0bc76c31 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -13,6 +13,33 @@
     border-radius: 4px;
     border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
+    position: relative;
+  }
+
+  &__add-friend-button {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
+
+  &__view-all-container {
+    background-color: globals.$background-color;
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
   }
 
   &__list {
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.tsx b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
index dfa0fcc0..1f3f180a 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -2,9 +2,11 @@ import { userProfileContext } from "@renderer/context";
 import { useFormat, useUserDetails } from "@renderer/hooks";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { PlusIcon } from "@primer/octicons-react";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar, Link } from "@renderer/components";
 import { AllFriendsModal } from "./all-friends-modal";
+import { AddFriendModal } from "./add-friend-modal";
 import "./friends-box.scss";
 
 export function FriendsBox() {
@@ -13,6 +15,7 @@ export function FriendsBox() {
   const { t } = useTranslation("user_profile");
   const { numberFormatter } = useFormat();
   const [showAllFriendsModal, setShowAllFriendsModal] = useState(false);
+  const [showAddFriendModal, setShowAddFriendModal] = useState(false);
 
   const isMe = userDetails?.id === userProfile?.id;
 
@@ -45,13 +48,16 @@ export function FriendsBox() {
               </span>
             )}
           </div>
-          <button
-            type="button"
-            className="friends-box__view-all"
-            onClick={() => setShowAllFriendsModal(true)}
-          >
-            {t("view_all")}
-          </button>
+          {isMe && (
+            <button
+              type="button"
+              className="friends-box__add-friend-button"
+              onClick={() => setShowAddFriendModal(true)}
+            >
+              <PlusIcon size={16} />
+              {t("add_friends")}
+            </button>
+          )}
         </div>
 
         <div className="friends-box__box">
@@ -90,16 +96,31 @@ export function FriendsBox() {
               </li>
             ))}
           </ul>
+          <div className="friends-box__view-all-container">
+            <button
+              type="button"
+              className="friends-box__view-all"
+              onClick={() => setShowAllFriendsModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
         </div>
       </div>
 
       {userProfile && (
-        <AllFriendsModal
-          visible={showAllFriendsModal}
-          onClose={() => setShowAllFriendsModal(false)}
-          userId={userProfile.id}
-          isMe={isMe}
-        />
+        <>
+          <AllFriendsModal
+            visible={showAllFriendsModal}
+            onClose={() => setShowAllFriendsModal(false)}
+            userId={userProfile.id}
+            isMe={isMe}
+          />
+          <AddFriendModal
+            visible={showAddFriendModal}
+            onClose={() => setShowAddFriendModal(false)}
+          />
+        </>
       )}
     </>
   );
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index a5ae01da..c425b047 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -428,9 +428,9 @@ export function ProfileContent() {
         {shouldShowRightContent && (
           <div className="profile-content__right-content">
             <UserStatsBox />
+            <BadgesBox />
             <UserKarmaBox />
             <RecentGamesBox />
-            <BadgesBox />
             <FriendsBox />
             <ReportProfile />
           </div>
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 6fd371c9..44abebc6 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -34,15 +34,15 @@
     background: none;
     border: none;
     color: globals.$body-color;
+    background-color: rgba(0, 0, 0, 0.3);
     cursor: pointer;
-    padding: calc(globals.$spacing-unit / 2);
-    border-radius: 4px;
+    padding: calc(globals.$spacing-unit / 1.5);
+    border-radius: 6px;
     transition: all ease 0.2s;
-    opacity: 0.7;
 
     &:hover {
       opacity: 1;
-      background-color: rgba(255, 255, 255, 0.1);
+      background-color: rgba(0, 0, 0, 0.4);
     }
   }
 
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
index 6ae91cfd..d5259777 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
@@ -2,7 +2,7 @@ import type { UserFriend } from "@types";
 import { useEffect, useRef, useState } from "react";
 import { UserFriendItem } from "./user-friend-item";
 import { useNavigate } from "react-router-dom";
-import { useToast, useUserDetails } from "@renderer/hooks";
+import { useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import "./user-friend-modal-list.scss";
@@ -19,7 +19,6 @@ export const UserFriendModalList = ({
   closeModal,
 }: UserFriendModalListProps) => {
   const { t } = useTranslation("user_profile");
-  const { showErrorToast } = useToast();
   const navigate = useNavigate();
 
   const [page, setPage] = useState(0);
@@ -28,7 +27,7 @@ export const UserFriendModalList = ({
   const [friends, setFriends] = useState<UserFriend[]>([]);
   const listContainer = useRef<HTMLDivElement>(null);
 
-  const { userDetails, undoFriendship } = useUserDetails();
+  const { userDetails } = useUserDetails();
   const isMe = userDetails?.id == userId;
 
   const loadNextPage = () => {
@@ -88,16 +87,6 @@ export const UserFriendModalList = ({
     navigate(`/profile/${userId}`);
   };
 
-  const handleUndoFriendship = (userId: string) => {
-    undoFriendship(userId)
-      .then(() => {
-        reloadList();
-      })
-      .catch(() => {
-        showErrorToast(t("try_again"));
-      });
-  };
-
   return (
     <SkeletonTheme baseColor="#1c1c1c" highlightColor="#444">
       <div ref={listContainer} className="user-friend-modal-list">
@@ -108,8 +97,7 @@ export const UserFriendModalList = ({
             displayName={friend.displayName}
             profileImageUrl={friend.profileImageUrl}
             onClickItem={handleClickFriend}
-            onClickUndoFriendship={handleUndoFriendship}
-            type={isMe ? "ACCEPTED" : null}
+            type={null}
             key={"modal" + friend.id}
           />
         ))}

From 24d65b50b432405358d9659d03a304ba58f7ad3b Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Thu, 18 Dec 2025 22:56:50 +0200
Subject: [PATCH 26/72] style: enhance overlay styling and adjust close button
 positioning

---
 .../fullscreen-media-modal.scss               | 27 ++++++++++++++++---
 .../fullscreen-media-modal.tsx                |  5 ++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
index 454653b8..d46958ff 100644
--- a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
@@ -1,5 +1,21 @@
 @use "../../scss/globals.scss";
 
+.fullscreen-media-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  z-index: globals.$backdrop-z-index;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
 .fullscreen-media-modal {
   display: flex;
   justify-content: center;
@@ -7,12 +23,17 @@
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
 
   &__close-button {
     position: absolute;
-    top: calc(globals.$spacing-unit * 4);
-    right: calc(globals.$spacing-unit * 3);
+    top: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 4);
     cursor: pointer;
     color: globals.$body-color;
     background-color: rgba(0, 0, 0, 0.5);
diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
index 700bddb1..f3722154 100644
--- a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
@@ -3,7 +3,6 @@ import { createPortal } from "react-dom";
 import { XIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 
-import { Backdrop } from "../backdrop/backdrop";
 import "./fullscreen-media-modal.scss";
 
 export interface FullscreenMediaModalProps {
@@ -64,7 +63,7 @@ export function FullscreenMediaModal({
   if (!visible || !src) return null;
 
   return createPortal(
-    <Backdrop>
+    <div className="fullscreen-media-modal__overlay">
       <dialog className="fullscreen-media-modal" open aria-label={alt}>
         <button
           type="button"
@@ -82,7 +81,7 @@ export function FullscreenMediaModal({
           <img src={src} alt={alt} className="fullscreen-media-modal__image" />
         </div>
       </dialog>
-    </Backdrop>,
+    </div>,
     document.body
   );
 }

From 246fc14b7507da1846185ca00280df80a09fae4a Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 23 Dec 2025 13:11:02 +0200
Subject: [PATCH 27/72] fix: update notification display logic and impove empty
 state styling

---
 .../pages/notifications/notification-item.tsx |  2 +-
 .../pages/notifications/notifications.scss    | 36 +++++++++----------
 .../src/pages/notifications/notifications.tsx | 36 +++++++++----------
 3 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
index 96ede5e8..843df053 100644
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -125,7 +125,7 @@ export function NotificationItem({
         return {
           title: t("friend_request_accepted_title"),
           description: t("friend_request_accepted_description", {
-            displayName: notification.variables.senderDisplayName,
+            displayName: notification.variables.accepterDisplayName,
           }),
           showActions: false,
         };
diff --git a/src/renderer/src/pages/notifications/notifications.scss b/src/renderer/src/pages/notifications/notifications.scss
index 34555198..c8fa7c3f 100644
--- a/src/renderer/src/pages/notifications/notifications.scss
+++ b/src/renderer/src/pages/notifications/notifications.scss
@@ -23,33 +23,31 @@
 
   &__empty {
     display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__icon-container {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
     align-items: center;
     justify-content: center;
-    gap: calc(globals.$spacing-unit * 2);
-    padding: calc(globals.$spacing-unit * 6);
-    text-align: center;
-    color: globals.$body-color;
-
-    &-icon {
-      opacity: 0.4;
-    }
-
-    &-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: globals.$muted-color;
-    }
-
-    &-description {
-      font-size: globals.$body-font-size;
-    }
+    margin-bottom: calc(globals.$spacing-unit * 2);
   }
 
   &__loading {
     display: flex;
+    width: 100%;
+    height: 100%;
     justify-content: center;
-    padding: calc(globals.$spacing-unit * 4);
+    align-items: center;
   }
 
   &__load-more {
diff --git a/src/renderer/src/pages/notifications/notifications.tsx b/src/renderer/src/pages/notifications/notifications.tsx
index 0c8aecb6..bceaff21 100644
--- a/src/renderer/src/pages/notifications/notifications.tsx
+++ b/src/renderer/src/pages/notifications/notifications.tsx
@@ -344,30 +344,30 @@ export default function Notifications() {
   };
 
   return (
-    <div className="notifications">
-      <div className="notifications__actions">
-        <Button theme="outline" onClick={handleMarkAllAsRead}>
-          {t("mark_all_as_read")}
-        </Button>
-        <Button theme="danger" onClick={handleClearAll}>
-          {t("clear_all")}
-        </Button>
-      </div>
-
+    <>
       {isLoading && mergedNotifications.length === 0 ? (
         <div className="notifications__loading">
           <span>{t("loading")}</span>
         </div>
       ) : mergedNotifications.length === 0 ? (
         <div className="notifications__empty">
-          <BellIcon size={48} className="notifications__empty-icon" />
-          <span className="notifications__empty-title">{t("empty_title")}</span>
-          <span className="notifications__empty-description">
-            {t("empty_description")}
-          </span>
+          <div className="notifications__icon-container">
+            <BellIcon size={24} />
+          </div>
+          <h2>{t("empty_title")}</h2>
+          <p>{t("empty_description")}</p>
         </div>
       ) : (
-        <>
+        <div className="notifications">
+          <div className="notifications__actions">
+            <Button theme="outline" onClick={handleMarkAllAsRead}>
+              {t("mark_all_as_read")}
+            </Button>
+            <Button theme="danger" onClick={handleClearAll}>
+              {t("clear_all")}
+            </Button>
+          </div>
+
           <div className="notifications__list">
             <AnimatePresence mode="popLayout">
               {displayedNotifications.map(renderNotification)}
@@ -385,8 +385,8 @@ export default function Notifications() {
               </Button>
             </div>
           )}
-        </>
+        </div>
       )}
-    </div>
+    </>
   );
 }

From 1d1bbd2de56ad93ea0a8d8be75fe8f70627321aa Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 23 Dec 2025 13:40:50 +0200
Subject: [PATCH 28/72] fix: forcing unread styling for friend request received
 notification

---
 src/renderer/src/pages/notifications/notification-item.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
index 843df053..976ab631 100644
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -174,7 +174,9 @@ export function NotificationItem({
   return (
     <div
       className={cn("notification-item", {
-        "notification-item--unread": !notification.isRead,
+        "notification-item--unread":
+          !notification.isRead ||
+          notification.type === "FRIEND_REQUEST_RECEIVED",
       })}
       onClick={handleClick}
       onKeyDown={(e) => {

From 3c296fe7216e68c9876ed7f1485b7c82acb763b9 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 23 Dec 2025 15:43:52 +0200
Subject: [PATCH 29/72] feat: add all badges modal and enhance badges display
 in profile

---
 src/main/services/hydra-api.ts                |  2 +-
 .../profile-content/all-badges-modal.scss     | 87 ++++++++++++++++
 .../profile-content/all-badges-modal.tsx      | 58 +++++++++++
 .../profile/profile-content/badges-box.scss   | 64 ++++++++++--
 .../profile/profile-content/badges-box.tsx    | 98 ++++++++++++-------
 src/types/index.ts                            |  1 +
 6 files changed, 263 insertions(+), 47 deletions(-)
 create mode 100644 src/renderer/src/pages/profile/profile-content/all-badges-modal.scss
 create mode 100644 src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx

diff --git a/src/main/services/hydra-api.ts b/src/main/services/hydra-api.ts
index fa712105..596b0635 100644
--- a/src/main/services/hydra-api.ts
+++ b/src/main/services/hydra-api.ts
@@ -30,7 +30,7 @@ export class HydraApi {
   private static instance: AxiosInstance;
 
   private static readonly EXPIRATION_OFFSET_IN_MS = 1000 * 60 * 5; // 5 minutes
-  private static readonly ADD_LOG_INTERCEPTOR = false;
+  private static readonly ADD_LOG_INTERCEPTOR = true;
 
   private static secondsToMilliseconds(seconds: number) {
     return seconds * 1000;
diff --git a/src/renderer/src/pages/profile/profile-content/all-badges-modal.scss b/src/renderer/src/pages/profile/profile-content/all-badges-modal.scss
new file mode 100644
index 00000000..83f8f6ef
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/all-badges-modal.scss
@@ -0,0 +1,87 @@
+@use "../../../scss/globals.scss";
+
+.all-badges-modal {
+  display: flex;
+  flex-direction: column;
+  gap: globals.$spacing-unit;
+  max-height: 400px;
+  margin-top: calc(globals.$spacing-unit * -1);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    transition: background-color ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 0.5);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$body-color;
+    margin: 0;
+  }
+
+  &__item-description {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx b/src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx
new file mode 100644
index 00000000..8eb50051
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx
@@ -0,0 +1,58 @@
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal } from "@renderer/components";
+import { userProfileContext } from "@renderer/context";
+import "./all-badges-modal.scss";
+
+interface AllBadgesModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function AllBadgesModal({
+  visible,
+  onClose,
+}: Readonly<AllBadgesModalProps>) {
+  const { t } = useTranslation("user_profile");
+  const { userProfile, badges } = useContext(userProfileContext);
+
+  const userBadges = userProfile?.badges
+    .map((badgeName) => badges.find((b) => b.name === badgeName))
+    .filter((badge) => badge !== undefined);
+
+  const modalTitle = (
+    <div className="all-badges-modal__title">
+      {t("badges")}
+      {userBadges && userBadges.length > 0 && (
+        <span className="all-badges-modal__count">{userBadges.length}</span>
+      )}
+    </div>
+  );
+
+  return (
+    <Modal visible={visible} title={modalTitle} onClose={onClose}>
+      <div className="all-badges-modal">
+        <div className="all-badges-modal__list">
+          {userBadges?.map((badge) => (
+            <div key={badge.name} className="all-badges-modal__item">
+              <div className="all-badges-modal__item-icon">
+                <img
+                  src={badge.badge.url}
+                  alt={badge.name}
+                  width={32}
+                  height={32}
+                />
+              </div>
+              <div className="all-badges-modal__item-content">
+                <h3 className="all-badges-modal__item-title">{badge.title}</h3>
+                <p className="all-badges-modal__item-description">
+                  {badge.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.scss b/src/renderer/src/pages/profile/profile-content/badges-box.scss
index cd68e338..01720b75 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.scss
@@ -17,28 +17,76 @@
 
   &__list {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: calc(globals.$spacing-unit * 2);
   }
 
   &__item {
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
+    gap: calc(globals.$spacing-unit * 2);
+    width: 100%;
+    padding: calc(globals.$spacing-unit * 1.5);
     background-color: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
-    cursor: pointer;
-    transition: all ease 0.2s;
+    transition: background-color ease 0.2s;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.1);
-      transform: scale(1.05);
     }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
 
     img {
-      border-radius: 4px;
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 0.5);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$body-color;
+    margin: 0;
+  }
+
+  &__item-description {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+  }
+
+  &__view-all {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+
+    &:hover {
+      color: globals.$muted-color;
     }
   }
 }
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.tsx b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
index 94c68195..5b35ad3a 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
@@ -1,56 +1,78 @@
 import { userProfileContext } from "@renderer/context";
 import { useFormat } from "@renderer/hooks";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Tooltip } from "react-tooltip";
+import { AllBadgesModal } from "./all-badges-modal";
 import "./badges-box.scss";
 
+const MAX_VISIBLE_BADGES = 4;
+
 export function BadgesBox() {
   const { userProfile, badges } = useContext(userProfileContext);
   const { t } = useTranslation("user_profile");
   const { numberFormatter } = useFormat();
+  const [showAllBadgesModal, setShowAllBadgesModal] = useState(false);
 
   if (!userProfile?.badges.length) return null;
 
+  const visibleBadges = userProfile.badges.slice(0, MAX_VISIBLE_BADGES);
+  const hasMoreBadges = userProfile.badges.length > MAX_VISIBLE_BADGES;
+
   return (
-    <div>
-      <div className="badges-box__section-header">
-        <div className="profile-content__section-title-group">
-          <h2>{t("badges")}</h2>
-          <span className="profile-content__section-badge">
-            {numberFormatter.format(userProfile.badges.length)}
-          </span>
+    <>
+      <div>
+        <div className="badges-box__section-header">
+          <div className="profile-content__section-title-group">
+            <h2>{t("badges")}</h2>
+            <span className="profile-content__section-badge">
+              {numberFormatter.format(userProfile.badges.length)}
+            </span>
+          </div>
+          {hasMoreBadges && (
+            <button
+              type="button"
+              className="badges-box__view-all"
+              onClick={() => setShowAllBadgesModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          )}
+        </div>
+
+        <div className="badges-box__box">
+          <div className="badges-box__list">
+            {visibleBadges.map((badgeName) => {
+              const badge = badges.find((b) => b.name === badgeName);
+
+              if (!badge) return null;
+
+              return (
+                <div key={badge.name} className="badges-box__item">
+                  <div className="badges-box__item-icon">
+                    <img
+                      src={badge.badge.url}
+                      alt={badge.name}
+                      width={32}
+                      height={32}
+                    />
+                  </div>
+                  <div className="badges-box__item-content">
+                    <h3 className="badges-box__item-title">{badge.title}</h3>
+                    <p className="badges-box__item-description">
+                      {badge.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
         </div>
       </div>
 
-      <div className="badges-box__box">
-        <div className="badges-box__list">
-          {userProfile.badges.map((badgeName) => {
-            const badge = badges.find((b) => b.name === badgeName);
-
-            if (!badge) return null;
-
-            return (
-              <div
-                key={badge.name}
-                className="badges-box__item"
-                data-tooltip-place="top"
-                data-tooltip-content={badge.description}
-                data-tooltip-id="badges-box-tooltip"
-              >
-                <img
-                  src={badge.badge.url}
-                  alt={badge.name}
-                  width={32}
-                  height={32}
-                />
-              </div>
-            );
-          })}
-        </div>
-
-        <Tooltip id="badges-box-tooltip" />
-      </div>
-    </div>
+      <AllBadgesModal
+        visible={showAllBadgesModal}
+        onClose={() => setShowAllBadgesModal(false)}
+      />
+    </>
   );
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index d326aeef..87eeb027 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -170,6 +170,7 @@ export type ProfileVisibility = "PUBLIC" | "PRIVATE" | "FRIENDS";
 
 export interface Badge {
   name: string;
+  title: string;
   description: string;
   badge: {
     url: string;

From 45eaef23a9b8b67ddd054f1ea76bd972e16f6231 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 23 Dec 2025 16:52:04 +0200
Subject: [PATCH 30/72] fix: move the view all button in badges box to the
 bottom left

---
 .../profile/profile-content/badges-box.scss   |  8 ++++++++
 .../profile/profile-content/badges-box.tsx    | 20 ++++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.scss b/src/renderer/src/pages/profile/profile-content/badges-box.scss
index 01720b75..1c53050d 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.scss
@@ -75,6 +75,14 @@
     margin: 0;
   }
 
+  &__view-all-container {
+    background-color: globals.$background-color;
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
+  }
+
   &__view-all {
     background: none;
     border: none;
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.tsx b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
index 5b35ad3a..b898be2a 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
@@ -28,15 +28,6 @@ export function BadgesBox() {
               {numberFormatter.format(userProfile.badges.length)}
             </span>
           </div>
-          {hasMoreBadges && (
-            <button
-              type="button"
-              className="badges-box__view-all"
-              onClick={() => setShowAllBadgesModal(true)}
-            >
-              {t("view_all")}
-            </button>
-          )}
         </div>
 
         <div className="badges-box__box">
@@ -66,6 +57,17 @@ export function BadgesBox() {
               );
             })}
           </div>
+          {hasMoreBadges && (
+            <div className="badges-box__view-all-container">
+              <button
+                type="button"
+                className="badges-box__view-all"
+                onClick={() => setShowAllBadgesModal(true)}
+              >
+                {t("view_all")}
+              </button>
+            </div>
+          )}
         </div>
       </div>
 

From 8751e369da9942dd4646dd4ac92d7c7085c9f970 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 23 Dec 2025 18:47:31 +0200
Subject: [PATCH 31/72] refactor: remove sync friend requests functionality and
 related components

---
 src/main/events/profile/index.ts              |   1 -
 .../events/profile/sync-friend-requests.ts    |  24 ---
 src/preload/index.ts                          |   1 -
 src/renderer/src/app.tsx                      |  16 --
 .../components/sidebar/sidebar-profile.scss   |   6 +-
 .../components/sidebar/sidebar-profile.tsx    |  30 +---
 src/renderer/src/declaration.d.ts             |   1 -
 .../src/features/user-details-slice.ts        |  21 ---
 src/renderer/src/hooks/use-user-details.ts    |  32 +---
 .../src/pages/notifications/notifications.tsx |  76 +++++----
 .../profile-content/add-friend-modal.scss     |  25 +++
 .../profile-content/add-friend-modal.tsx      |  53 +++---
 .../profile/profile-content/badges-box.scss   |  29 ++--
 .../profile/profile-content/badges-box.tsx    |  81 ++++------
 .../profile/profile-content/friends-box.scss  |  11 --
 .../profile/profile-content/friends-box.tsx   | 138 ++++++++--------
 .../profile-content/profile-content.tsx       |  45 +++++-
 .../profile-content/recent-games-box.scss     |  10 --
 .../profile-content/recent-games-box.tsx      |  52 +++---
 .../profile-content/user-karma-box.scss       |  10 --
 .../profile-content/user-karma-box.tsx        |  30 ++--
 .../profile-content/user-stats-box.scss       |  10 --
 .../profile-content/user-stats-box.tsx        | 152 +++++++++---------
 .../profile/profile-hero/profile-hero.scss    |  14 +-
 .../profile/profile-hero/profile-hero.tsx     |  24 ++-
 .../profile-section/profile-section.scss      |  71 ++++++++
 .../profile-section/profile-section.tsx       |  64 ++++++++
 .../shared-modals/user-friend-modal/index.ts  |   1 -
 .../user-friend-modal/user-friend-item.scss   |  79 ---------
 .../user-friend-modal/user-friend-item.tsx    | 139 ----------------
 .../user-friend-modal-add-friend.scss         |  21 ---
 .../user-friend-modal-add-friend.tsx          | 138 ----------------
 .../user-friend-modal-list.scss               |  16 --
 .../user-friend-modal-list.tsx                | 108 -------------
 .../user-friend-modal/user-friend-modal.scss  |  34 ----
 .../user-friend-modal/user-friend-modal.tsx   |  96 -----------
 36 files changed, 529 insertions(+), 1130 deletions(-)
 delete mode 100644 src/main/events/profile/sync-friend-requests.ts
 create mode 100644 src/renderer/src/pages/profile/profile-section/profile-section.scss
 create mode 100644 src/renderer/src/pages/profile/profile-section/profile-section.tsx
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/index.ts
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
 delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx

diff --git a/src/main/events/profile/index.ts b/src/main/events/profile/index.ts
index 1548249f..664d6ee2 100644
--- a/src/main/events/profile/index.ts
+++ b/src/main/events/profile/index.ts
@@ -1,4 +1,3 @@
 import "./get-me";
 import "./process-profile-image";
-import "./sync-friend-requests";
 import "./update-profile";
diff --git a/src/main/events/profile/sync-friend-requests.ts b/src/main/events/profile/sync-friend-requests.ts
deleted file mode 100644
index 478c337f..00000000
--- a/src/main/events/profile/sync-friend-requests.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { registerEvent } from "../register-event";
-import { HydraApi, WindowManager } from "@main/services";
-import { UserNotLoggedInError } from "@shared";
-import type { FriendRequestSync } from "@types";
-
-export const syncFriendRequests = async () => {
-  return HydraApi.get<FriendRequestSync>(`/profile/friend-requests/sync`)
-    .then((res) => {
-      WindowManager.mainWindow?.webContents.send(
-        "on-sync-friend-requests",
-        res
-      );
-
-      return res;
-    })
-    .catch((err) => {
-      if (err instanceof UserNotLoggedInError) {
-        return { friendRequestCount: 0 } as FriendRequestSync;
-      }
-      throw err;
-    });
-};
-
-registerEvent("syncFriendRequests", syncFriendRequests);
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 7ad88a9b..32bc0f88 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -498,7 +498,6 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("updateProfile", updateProfile),
   processProfileImage: (imagePath: string) =>
     ipcRenderer.invoke("processProfileImage", imagePath),
-  syncFriendRequests: () => ipcRenderer.invoke("syncFriendRequests"),
   onSyncFriendRequests: (cb: (friendRequests: FriendRequestSync) => void) => {
     const listener = (
       _event: Electron.IpcRendererEvent,
diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
index 6619c890..7c0ea607 100644
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -23,7 +23,6 @@ import {
   clearExtraction,
 } from "@renderer/features";
 import { useTranslation } from "react-i18next";
-import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
 import { useSubscription } from "./hooks/use-subscription";
 import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
 import { ArchiveDeletionModal } from "./pages/downloads/archive-deletion-error-modal";
@@ -56,10 +55,6 @@ export function App() {
   const {
     userDetails,
     hasActiveSubscription,
-    isFriendsModalVisible,
-    friendRequetsModalTab,
-    friendModalUserId,
-    hideFriendsModal,
     fetchUserDetails,
     updateUserDetails,
     clearUserDetails,
@@ -135,7 +130,6 @@ export function App() {
       .then((response) => {
         if (response) {
           updateUserDetails(response);
-          window.electron.syncFriendRequests();
         }
       })
       .finally(() => {
@@ -152,7 +146,6 @@ export function App() {
     fetchUserDetails().then((response) => {
       if (response) {
         updateUserDetails(response);
-        window.electron.syncFriendRequests();
         showSuccessToast(t("successfully_signed_in"));
       }
     });
@@ -305,15 +298,6 @@ export function App() {
         onClose={() => setShowArchiveDeletionModal(false)}
       />
 
-      {userDetails && (
-        <UserFriendModal
-          visible={isFriendsModalVisible}
-          initialTab={friendRequetsModalTab}
-          onClose={hideFriendsModal}
-          userId={friendModalUserId}
-        />
-      )}
-
       <main>
         <Sidebar />
 
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.scss b/src/renderer/src/components/sidebar/sidebar-profile.scss
index 4a061e98..8ec442f2 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.scss
+++ b/src/renderer/src/components/sidebar/sidebar-profile.scss
@@ -46,8 +46,7 @@
     white-space: nowrap;
   }
 
-  &__notification-button,
-  &__friends-button {
+  &__notification-button {
     color: globals.$muted-color;
     cursor: pointer;
     border-radius: 50%;
@@ -63,8 +62,7 @@
     }
   }
 
-  &__notification-button-badge,
-  &__friends-button-badge {
+  &__notification-button-badge {
     background-color: globals.$success-color;
     display: flex;
     justify-content: center;
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 2bc28d88..bd1209ec 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -1,9 +1,8 @@
 import { useNavigate } from "react-router-dom";
-import { PeopleIcon, BellIcon } from "@primer/octicons-react";
+import { BellIcon } from "@primer/octicons-react";
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar } from "../avatar/avatar";
 import { AuthPage } from "@shared";
@@ -16,8 +15,7 @@ export function SidebarProfile() {
 
   const { t } = useTranslation("sidebar");
 
-  const { userDetails, friendRequestCount, showFriendsModal } =
-    useUserDetails();
+  const { userDetails } = useUserDetails();
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
@@ -114,29 +112,6 @@ export function SidebarProfile() {
     );
   }, [t, notificationCount, navigate]);
 
-  const friendsButton = useMemo(() => {
-    if (!userDetails) return null;
-
-    return (
-      <button
-        type="button"
-        className="sidebar-profile__friends-button"
-        onClick={() =>
-          showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-        }
-        title={t("friends")}
-      >
-        {friendRequestCount > 0 && (
-          <small className="sidebar-profile__friends-button-badge">
-            {friendRequestCount > 99 ? "99+" : friendRequestCount}
-          </small>
-        )}
-
-        <PeopleIcon size={16} />
-      </button>
-    );
-  }, [userDetails, t, friendRequestCount, showFriendsModal]);
-
   const gameRunningDetails = () => {
     if (!userDetails || !gameRunning) return null;
 
@@ -185,7 +160,6 @@ export function SidebarProfile() {
       </button>
 
       {notificationsButton}
-      {friendsButton}
     </div>
   );
 }
diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts
index 4bc3dabc..4e7fd245 100644
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -389,7 +389,6 @@ declare global {
     processProfileImage: (
       path: string
     ) => Promise<{ imagePath: string; mimeType: string }>;
-    syncFriendRequests: () => Promise<void>;
     onSyncFriendRequests: (
       cb: (friendRequests: FriendRequestSync) => void
     ) => () => Electron.IpcRenderer;
diff --git a/src/renderer/src/features/user-details-slice.ts b/src/renderer/src/features/user-details-slice.ts
index 8994f180..0f477ec2 100644
--- a/src/renderer/src/features/user-details-slice.ts
+++ b/src/renderer/src/features/user-details-slice.ts
@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import type { FriendRequest, UserDetails } from "@types";
 
 export interface UserDetailsState {
@@ -7,9 +6,6 @@ export interface UserDetailsState {
   profileBackground: null | string;
   friendRequests: FriendRequest[];
   friendRequestCount: number;
-  isFriendsModalVisible: boolean;
-  friendRequetsModalTab: UserFriendModalTab | null;
-  friendModalUserId: string;
 }
 
 const initialState: UserDetailsState = {
@@ -17,9 +13,6 @@ const initialState: UserDetailsState = {
   profileBackground: null,
   friendRequests: [],
   friendRequestCount: 0,
-  isFriendsModalVisible: false,
-  friendRequetsModalTab: null,
-  friendModalUserId: "",
 };
 
 export const userDetailsSlice = createSlice({
@@ -38,18 +31,6 @@ export const userDetailsSlice = createSlice({
     setFriendRequestCount: (state, action: PayloadAction<number>) => {
       state.friendRequestCount = action.payload;
     },
-    setFriendsModalVisible: (
-      state,
-      action: PayloadAction<{ initialTab: UserFriendModalTab; userId: string }>
-    ) => {
-      state.isFriendsModalVisible = true;
-      state.friendRequetsModalTab = action.payload.initialTab;
-      state.friendModalUserId = action.payload.userId;
-    },
-    setFriendsModalHidden: (state) => {
-      state.isFriendsModalVisible = false;
-      state.friendRequetsModalTab = null;
-    },
   },
 });
 
@@ -58,6 +39,4 @@ export const {
   setProfileBackground,
   setFriendRequests,
   setFriendRequestCount,
-  setFriendsModalVisible,
-  setFriendsModalHidden,
 } = userDetailsSlice.actions;
diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts
index 6d89f9b4..d8b9bbd2 100644
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/src/renderer/src/hooks/use-user-details.ts
@@ -4,8 +4,6 @@ import {
   setProfileBackground,
   setUserDetails,
   setFriendRequests,
-  setFriendsModalVisible,
-  setFriendsModalHidden,
 } from "@renderer/features";
 import type {
   FriendRequestAction,
@@ -13,20 +11,12 @@ import type {
   UserDetails,
   FriendRequest,
 } from "@types";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
 export function useUserDetails() {
   const dispatch = useAppDispatch();
 
-  const {
-    userDetails,
-    profileBackground,
-    friendRequests,
-    friendRequestCount,
-    isFriendsModalVisible,
-    friendModalUserId,
-    friendRequetsModalTab,
-  } = useAppSelector((state) => state.userDetails);
+  const { userDetails, profileBackground, friendRequests, friendRequestCount } =
+    useAppSelector((state) => state.userDetails);
 
   const clearUserDetails = useCallback(async () => {
     dispatch(setUserDetails(null));
@@ -85,24 +75,11 @@ export function useUserDetails() {
     return window.electron.hydraApi
       .get<FriendRequest[]>("/profile/friend-requests")
       .then((friendRequests) => {
-        window.electron.syncFriendRequests();
         dispatch(setFriendRequests(friendRequests));
       })
       .catch(() => {});
   }, [dispatch]);
 
-  const showFriendsModal = useCallback(
-    (initialTab: UserFriendModalTab, userId: string) => {
-      dispatch(setFriendsModalVisible({ initialTab, userId }));
-      fetchFriendRequests();
-    },
-    [dispatch, fetchFriendRequests]
-  );
-
-  const hideFriendsModal = useCallback(() => {
-    dispatch(setFriendsModalHidden());
-  }, [dispatch]);
-
   const sendFriendRequest = useCallback(
     async (userId: string) => {
       return window.electron.hydraApi
@@ -152,12 +129,7 @@ export function useUserDetails() {
     profileBackground,
     friendRequests,
     friendRequestCount,
-    friendRequetsModalTab,
-    isFriendsModalVisible,
-    friendModalUserId,
     hasActiveSubscription,
-    showFriendsModal,
-    hideFriendsModal,
     fetchUserDetails,
     signOut,
     clearUserDetails,
diff --git a/src/renderer/src/pages/notifications/notifications.tsx b/src/renderer/src/pages/notifications/notifications.tsx
index bceaff21..f9bd0b46 100644
--- a/src/renderer/src/pages/notifications/notifications.tsx
+++ b/src/renderer/src/pages/notifications/notifications.tsx
@@ -343,13 +343,17 @@ export default function Notifications() {
     );
   };
 
-  return (
-    <>
-      {isLoading && mergedNotifications.length === 0 ? (
+  const renderContent = () => {
+    if (isLoading && mergedNotifications.length === 0) {
+      return (
         <div className="notifications__loading">
           <span>{t("loading")}</span>
         </div>
-      ) : mergedNotifications.length === 0 ? (
+      );
+    }
+
+    if (mergedNotifications.length === 0) {
+      return (
         <div className="notifications__empty">
           <div className="notifications__icon-container">
             <BellIcon size={24} />
@@ -357,36 +361,40 @@ export default function Notifications() {
           <h2>{t("empty_title")}</h2>
           <p>{t("empty_description")}</p>
         </div>
-      ) : (
-        <div className="notifications">
-          <div className="notifications__actions">
-            <Button theme="outline" onClick={handleMarkAllAsRead}>
-              {t("mark_all_as_read")}
-            </Button>
-            <Button theme="danger" onClick={handleClearAll}>
-              {t("clear_all")}
-            </Button>
-          </div>
+      );
+    }
 
-          <div className="notifications__list">
-            <AnimatePresence mode="popLayout">
-              {displayedNotifications.map(renderNotification)}
-            </AnimatePresence>
-          </div>
-
-          {pagination.hasMore && (
-            <div className="notifications__load-more">
-              <Button
-                theme="outline"
-                onClick={handleLoadMore}
-                disabled={isLoading}
-              >
-                {isLoading ? t("loading") : t("load_more")}
-              </Button>
-            </div>
-          )}
+    return (
+      <div className="notifications">
+        <div className="notifications__actions">
+          <Button theme="outline" onClick={handleMarkAllAsRead}>
+            {t("mark_all_as_read")}
+          </Button>
+          <Button theme="danger" onClick={handleClearAll}>
+            {t("clear_all")}
+          </Button>
         </div>
-      )}
-    </>
-  );
+
+        <div className="notifications__list">
+          <AnimatePresence mode="popLayout">
+            {displayedNotifications.map(renderNotification)}
+          </AnimatePresence>
+        </div>
+
+        {pagination.hasMore && (
+          <div className="notifications__load-more">
+            <Button
+              theme="outline"
+              onClick={handleLoadMore}
+              disabled={isLoading}
+            >
+              {isLoading ? t("loading") : t("load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return <>{renderContent()}</>;
 }
diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
index a2db81ef..f33b5515 100644
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
@@ -51,4 +51,29 @@
     overflow-y: auto;
     padding-right: globals.$spacing-unit;
   }
+
+  &__friend-item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__friend-name {
+    flex: 1;
+    font-weight: 600;
+    color: globals.$muted-color;
+    font-size: globals.$body-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
index 04838f6f..efe95ec5 100644
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
@@ -1,9 +1,8 @@
-import { Button, Modal, TextField } from "@renderer/components";
+import { Avatar, Button, Modal, TextField } from "@renderer/components";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { UserFriendItem } from "@renderer/pages/shared-modals/user-friend-modal/user-friend-item";
 import "./add-friend-modal.scss";
 
 interface AddFriendModalProps {
@@ -80,22 +79,6 @@ export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
     });
   };
 
-  const handleAcceptFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "ACCEPTED")
-      .then(() => {
-        showSuccessToast(t("request_accepted"));
-      })
-      .catch(() => {
-        showErrorToast(t("try_again"));
-      });
-  };
-
-  const handleRefuseFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "REFUSED").catch(() => {
-      showErrorToast(t("try_again"));
-    });
-  };
-
   const sentRequests = friendRequests.filter((req) => req.type === "SENT");
   const currentRequest =
     friendCode.length === 8
@@ -139,17 +122,31 @@ export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
             <h3>{t("pending")}</h3>
             <div className="add-friend-modal__pending-list">
               {sentRequests.map((request) => (
-                <UserFriendItem
+                <button
                   key={request.id}
-                  displayName={request.displayName}
-                  type={request.type}
-                  profileImageUrl={request.profileImageUrl}
-                  userId={request.id}
-                  onClickAcceptRequest={handleAcceptFriendRequest}
-                  onClickCancelRequest={handleCancelFriendRequest}
-                  onClickRefuseRequest={handleRefuseFriendRequest}
-                  onClickItem={handleClickRequest}
-                />
+                  type="button"
+                  className="add-friend-modal__friend-item"
+                  onClick={() => handleClickRequest(request.id)}
+                >
+                  <Avatar
+                    src={request.profileImageUrl}
+                    alt={request.displayName}
+                    size={40}
+                  />
+                  <span className="add-friend-modal__friend-name">
+                    {request.displayName}
+                  </span>
+                  <Button
+                    theme="outline"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleCancelFriendRequest(request.id);
+                    }}
+                    type="button"
+                  >
+                    {t("cancel_request")}
+                  </Button>
+                </button>
               ))}
             </div>
           </div>
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.scss b/src/renderer/src/pages/profile/profile-content/badges-box.scss
index 1c53050d..ce8622ac 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.scss
@@ -1,18 +1,14 @@
 @use "../../../scss/globals.scss";
 
 .badges-box {
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
+  &__box {
+    padding: calc(globals.$spacing-unit * 2);
   }
 
-  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    padding: calc(globals.$spacing-unit * 2);
+  &__header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: calc(globals.$spacing-unit * 2);
   }
 
   &__list {
@@ -24,7 +20,7 @@
   &__item {
     display: flex;
     align-items: center;
-    gap: calc(globals.$spacing-unit * 2);
+    gap: calc(globals.$spacing-unit * 1.5);
     width: 100%;
     padding: calc(globals.$spacing-unit * 1.5);
     background-color: rgba(255, 255, 255, 0.05);
@@ -38,8 +34,8 @@
 
   &__item-icon {
     flex-shrink: 0;
-    width: 48px;
-    height: 48px;
+    width: 34px;
+    height: 34px;
     border-radius: 8px;
     overflow: hidden;
     display: flex;
@@ -48,8 +44,8 @@
     background-color: globals.$background-color;
 
     img {
-      width: 32px;
-      height: 32px;
+      width: 28px;
+      height: 28px;
       object-fit: contain;
     }
   }
@@ -63,7 +59,7 @@
   }
 
   &__item-title {
-    font-size: globals.$body-font-size;
+    font-size: 0.8rem;
     font-weight: 600;
     color: globals.$body-color;
     margin: 0;
@@ -76,7 +72,6 @@
   }
 
   &__view-all-container {
-    background-color: globals.$background-color;
     padding-top: calc(globals.$spacing-unit * 2);
     margin-top: calc(globals.$spacing-unit * 2);
     display: flex;
diff --git a/src/renderer/src/pages/profile/profile-content/badges-box.tsx b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
index b898be2a..501341b2 100644
--- a/src/renderer/src/pages/profile/profile-content/badges-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
@@ -1,5 +1,4 @@
 import { userProfileContext } from "@renderer/context";
-import { useFormat } from "@renderer/hooks";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AllBadgesModal } from "./all-badges-modal";
@@ -10,7 +9,6 @@ const MAX_VISIBLE_BADGES = 4;
 export function BadgesBox() {
   const { userProfile, badges } = useContext(userProfileContext);
   const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
   const [showAllBadgesModal, setShowAllBadgesModal] = useState(false);
 
   if (!userProfile?.badges.length) return null;
@@ -20,55 +18,44 @@ export function BadgesBox() {
 
   return (
     <>
-      <div>
-        <div className="badges-box__section-header">
-          <div className="profile-content__section-title-group">
-            <h2>{t("badges")}</h2>
-            <span className="profile-content__section-badge">
-              {numberFormatter.format(userProfile.badges.length)}
-            </span>
-          </div>
-        </div>
+      <div className="badges-box__box">
+        <div className="badges-box__list">
+          {visibleBadges.map((badgeName) => {
+            const badge = badges.find((b) => b.name === badgeName);
 
-        <div className="badges-box__box">
-          <div className="badges-box__list">
-            {visibleBadges.map((badgeName) => {
-              const badge = badges.find((b) => b.name === badgeName);
+            if (!badge) return null;
 
-              if (!badge) return null;
-
-              return (
-                <div key={badge.name} className="badges-box__item">
-                  <div className="badges-box__item-icon">
-                    <img
-                      src={badge.badge.url}
-                      alt={badge.name}
-                      width={32}
-                      height={32}
-                    />
-                  </div>
-                  <div className="badges-box__item-content">
-                    <h3 className="badges-box__item-title">{badge.title}</h3>
-                    <p className="badges-box__item-description">
-                      {badge.description}
-                    </p>
-                  </div>
+            return (
+              <div key={badge.name} className="badges-box__item">
+                <div className="badges-box__item-icon">
+                  <img
+                    src={badge.badge.url}
+                    alt={badge.name}
+                    width={32}
+                    height={32}
+                  />
                 </div>
-              );
-            })}
-          </div>
-          {hasMoreBadges && (
-            <div className="badges-box__view-all-container">
-              <button
-                type="button"
-                className="badges-box__view-all"
-                onClick={() => setShowAllBadgesModal(true)}
-              >
-                {t("view_all")}
-              </button>
-            </div>
-          )}
+                <div className="badges-box__item-content">
+                  <h3 className="badges-box__item-title">{badge.title}</h3>
+                  <p className="badges-box__item-description">
+                    {badge.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
         </div>
+        {hasMoreBadges && (
+          <div className="badges-box__view-all-container">
+            <button
+              type="button"
+              className="badges-box__view-all"
+              onClick={() => setShowAllBadgesModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
       </div>
 
       <AllBadgesModal
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.scss b/src/renderer/src/pages/profile/profile-content/friends-box.scss
index 0bc76c31..8e4ab919 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -1,17 +1,7 @@
 @use "../../../scss/globals.scss";
 
 .friends-box {
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
     position: relative;
   }
@@ -35,7 +25,6 @@
   }
 
   &__view-all-container {
-    background-color: globals.$background-color;
     padding-top: calc(globals.$spacing-unit * 2);
     margin-top: calc(globals.$spacing-unit * 2);
     display: flex;
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.tsx b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
index 1f3f180a..49c9a619 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -1,5 +1,5 @@
 import { userProfileContext } from "@renderer/context";
-import { useFormat, useUserDetails } from "@renderer/hooks";
+import { useUserDetails } from "@renderer/hooks";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PlusIcon } from "@primer/octicons-react";
@@ -10,10 +10,9 @@ import { AddFriendModal } from "./add-friend-modal";
 import "./friends-box.scss";
 
 export function FriendsBox() {
-  const { userProfile, userStats } = useContext(userProfileContext);
+  const { userProfile } = useContext(userProfileContext);
   const { userDetails } = useUserDetails();
   const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
   const [showAllFriendsModal, setShowAllFriendsModal] = useState(false);
   const [showAddFriendModal, setShowAddFriendModal] = useState(false);
 
@@ -38,73 +37,50 @@ export function FriendsBox() {
 
   return (
     <>
-      <div>
-        <div className="friends-box__section-header">
-          <div className="profile-content__section-title-group">
-            <h2>{t("friends")}</h2>
-            {userStats && (
-              <span className="profile-content__section-badge">
-                {numberFormatter.format(userStats.friendsCount)}
-              </span>
-            )}
-          </div>
-          {isMe && (
-            <button
-              type="button"
-              className="friends-box__add-friend-button"
-              onClick={() => setShowAddFriendModal(true)}
+      <div className="friends-box__box">
+        <ul className="friends-box__list">
+          {userProfile?.friends.map((friend) => (
+            <li
+              key={friend.id}
+              title={
+                friend.currentGame
+                  ? t("playing", { game: friend.currentGame.title })
+                  : undefined
+              }
             >
-              <PlusIcon size={16} />
-              {t("add_friends")}
-            </button>
-          )}
-        </div>
-
-        <div className="friends-box__box">
-          <ul className="friends-box__list">
-            {userProfile?.friends.map((friend) => (
-              <li
-                key={friend.id}
-                title={
-                  friend.currentGame
-                    ? t("playing", { game: friend.currentGame.title })
-                    : undefined
-                }
+              <Link
+                to={`/profile/${friend.id}`}
+                className="friends-box__list-item"
               >
-                <Link
-                  to={`/profile/${friend.id}`}
-                  className="friends-box__list-item"
-                >
-                  <Avatar
-                    size={32}
-                    src={friend.profileImageUrl}
-                    alt={friend.displayName}
-                  />
+                <Avatar
+                  size={32}
+                  src={friend.profileImageUrl}
+                  alt={friend.displayName}
+                />
 
-                  <div className="friends-box__friend-details">
-                    <span className="friends-box__friend-name">
-                      {friend.displayName}
-                    </span>
-                    {friend.currentGame && (
-                      <div className="friends-box__game-info">
-                        {getGameImage(friend.currentGame)}
-                        <small>{friend.currentGame.title}</small>
-                      </div>
-                    )}
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-          <div className="friends-box__view-all-container">
-            <button
-              type="button"
-              className="friends-box__view-all"
-              onClick={() => setShowAllFriendsModal(true)}
-            >
-              {t("view_all")}
-            </button>
-          </div>
+                <div className="friends-box__friend-details">
+                  <span className="friends-box__friend-name">
+                    {friend.displayName}
+                  </span>
+                  {friend.currentGame && (
+                    <div className="friends-box__game-info">
+                      {getGameImage(friend.currentGame)}
+                      <small>{friend.currentGame.title}</small>
+                    </div>
+                  )}
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <div className="friends-box__view-all-container">
+          <button
+            type="button"
+            className="friends-box__view-all"
+            onClick={() => setShowAllFriendsModal(true)}
+          >
+            {t("view_all")}
+          </button>
         </div>
       </div>
 
@@ -125,3 +101,31 @@ export function FriendsBox() {
     </>
   );
 }
+
+export function FriendsBoxAddButton() {
+  const { userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
+  const { t } = useTranslation("user_profile");
+  const [showAddFriendModal, setShowAddFriendModal] = useState(false);
+
+  const isMe = userDetails?.id === userProfile?.id;
+
+  if (!isMe) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="friends-box__add-friend-button"
+        onClick={() => setShowAddFriendModal(true)}
+      >
+        <PlusIcon size={16} />
+        {t("add_friends")}
+      </button>
+      <AddFriendModal
+        visible={showAddFriendModal}
+        onClose={() => setShowAddFriendModal(false)}
+      />
+    </>
+  );
+}
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index c425b047..8c200b06 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -15,10 +15,11 @@ import type { GameShop } from "@types";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
 import { BadgesBox } from "./badges-box";
-import { FriendsBox } from "./friends-box";
+import { FriendsBox, FriendsBoxAddButton } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
 import { UserKarmaBox } from "./user-karma-box";
+import { ProfileSection } from "../profile-section/profile-section";
 import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
 import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
@@ -187,8 +188,6 @@ export function ProfileContent() {
       );
       setReviews(response.reviews);
       setReviewsTotalCount(response.totalCount);
-    } catch (error) {
-      // Error handling for fetching reviews
     } finally {
       setIsLoadingReviews(false);
     }
@@ -427,11 +426,41 @@ export function ProfileContent() {
 
         {shouldShowRightContent && (
           <div className="profile-content__right-content">
-            <UserStatsBox />
-            <BadgesBox />
-            <UserKarmaBox />
-            <RecentGamesBox />
-            <FriendsBox />
+            {userStats && (
+              <ProfileSection title={t("stats")} defaultOpen={true}>
+                <UserStatsBox />
+              </ProfileSection>
+            )}
+            {userProfile?.badges.length > 0 && (
+              <ProfileSection
+                title={t("badges")}
+                count={userProfile.badges.length}
+                defaultOpen={true}
+              >
+                <BadgesBox />
+              </ProfileSection>
+            )}
+            {userProfile?.karma !== undefined &&
+              userProfile?.karma !== null && (
+                <ProfileSection title={t("karma")} defaultOpen={true}>
+                  <UserKarmaBox />
+                </ProfileSection>
+              )}
+            {userProfile?.recentGames.length > 0 && (
+              <ProfileSection title={t("activity")} defaultOpen={true}>
+                <RecentGamesBox />
+              </ProfileSection>
+            )}
+            {userProfile?.friends.length > 0 && (
+              <ProfileSection
+                title={t("friends")}
+                count={userStats?.friendsCount || userProfile.friends.length}
+                action={<FriendsBoxAddButton />}
+                defaultOpen={true}
+              >
+                <FriendsBox />
+              </ProfileSection>
+            )}
             <ReportProfile />
           </div>
         )}
diff --git a/src/renderer/src/pages/profile/profile-content/recent-games-box.scss b/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
index 6478fd79..4bfb51f0 100644
--- a/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
@@ -2,19 +2,9 @@
 
 .recent-games {
   &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
   }
 
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__list {
     list-style: none;
     margin: 0;
diff --git a/src/renderer/src/pages/profile/profile-content/recent-games-box.tsx b/src/renderer/src/pages/profile/profile-content/recent-games-box.tsx
index 5e13b0a9..e61ca423 100644
--- a/src/renderer/src/pages/profile/profile-content/recent-games-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/recent-games-box.tsx
@@ -42,38 +42,32 @@ export function RecentGamesBox() {
   if (!userProfile?.recentGames.length) return null;
 
   return (
-    <div>
-      <div className="recent-games__section-header">
-        <h2>{t("activity")}</h2>
-      </div>
+    <div className="recent-games__box">
+      <ul className="recent-games__list">
+        {userProfile?.recentGames.map((game) => (
+          <li key={`${game.shop}-${game.objectId}`}>
+            <Link
+              to={buildUserGameDetailsPath(game)}
+              className="recent-games__list-item"
+            >
+              <img
+                src={game.iconUrl!}
+                alt={game.title}
+                className="recent-games__game-image"
+              />
 
-      <div className="recent-games__box">
-        <ul className="recent-games__list">
-          {userProfile?.recentGames.map((game) => (
-            <li key={`${game.shop}-${game.objectId}`}>
-              <Link
-                to={buildUserGameDetailsPath(game)}
-                className="recent-games__list-item"
-              >
-                <img
-                  src={game.iconUrl!}
-                  alt={game.title}
-                  className="recent-games__game-image"
-                />
+              <div className="recent-games__game-details">
+                <span className="recent-games__game-title">{game.title}</span>
 
-                <div className="recent-games__game-details">
-                  <span className="recent-games__game-title">{game.title}</span>
-
-                  <div className="recent-games__game-description">
-                    <ClockIcon />
-                    <small>{formatPlayTime(game)}</small>
-                  </div>
+                <div className="recent-games__game-description">
+                  <ClockIcon />
+                  <small>{formatPlayTime(game)}</small>
                 </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/src/renderer/src/pages/profile/profile-content/user-karma-box.scss b/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
index 63015b4d..79261aa1 100644
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
@@ -2,19 +2,9 @@
 
 .user-karma {
   &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
   }
 
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__content {
     display: flex;
     flex-direction: column;
diff --git a/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx b/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
index d2232276..b8dd7244 100644
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
@@ -18,24 +18,18 @@ export function UserKarmaBox() {
   if (karma === undefined || karma === null) return null;
 
   return (
-    <div>
-      <div className="user-karma__section-header">
-        <h2>{t("karma")}</h2>
-      </div>
-
-      <div className="user-karma__box">
-        <div className="user-karma__content">
-          <div className="user-karma__stats-row">
-            <p className="user-karma__description">
-              <Award size={20} /> {numberFormatter.format(karma)}{" "}
-              {t("karma_count")}
-            </p>
-          </div>
-          <div className="user-karma__info">
-            <small className="user-karma__info-text">
-              {t("karma_description")}
-            </small>
-          </div>
+    <div className="user-karma__box">
+      <div className="user-karma__content">
+        <div className="user-karma__stats-row">
+          <p className="user-karma__description">
+            <Award size={20} /> {numberFormatter.format(karma)}{" "}
+            {t("karma_count")}
+          </p>
+        </div>
+        <div className="user-karma__info">
+          <small className="user-karma__info-text">
+            {t("karma_description")}
+          </small>
         </div>
       </div>
     </div>
diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
index c19fb612..fc92e466 100644
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
@@ -2,19 +2,9 @@
 
 .user-stats {
   &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
   }
 
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__list {
     list-style: none;
     margin: 0;
diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
index 26ec79f4..f7e76e79 100644
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
@@ -34,87 +34,81 @@ export function UserStatsBox() {
   if (!userStats) return null;
 
   return (
-    <div>
-      <div className="user-stats__section-header">
-        <h2>{t("stats")}</h2>
-      </div>
-
-      <div className="user-stats__box">
-        <ul className="user-stats__list">
-          {(isMe || userStats.unlockedAchievementSum !== undefined) && (
-            <li className="user-stats__list-item">
-              <h3 className="user-stats__list-title">
-                {t("achievements_unlocked")}
-              </h3>
-              {userStats.unlockedAchievementSum !== undefined ? (
-                <div className="user-stats__stats-row">
-                  <p className="user-stats__list-description">
-                    <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
-                    {t("achievements")}
-                  </p>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => showHydraCloudModal("achievements")}
-                  className="user-stats__link"
-                >
-                  <small style={{ color: "var(--color-warning)" }}>
-                    {t("show_achievements_on_profile")}
-                  </small>
-                </button>
-              )}
-            </li>
-          )}
-
-          {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
-            <li className="user-stats__list-item">
-              <h3 className="user-stats__list-title">{t("earned_points")}</h3>
-              {userStats.achievementsPointsEarnedSum !== undefined ? (
-                <div className="user-stats__stats-row">
-                  <p className="user-stats__list-description">
-                    <HydraIcon width={20} height={20} />
-                    {numberFormatter.format(
-                      userStats.achievementsPointsEarnedSum.value
-                    )}
-                  </p>
-                  <p title={t("ranking_updated_weekly")}>
-                    {t("top_percentile", {
-                      percentile:
-                        userStats.achievementsPointsEarnedSum.topPercentile,
-                    })}
-                  </p>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => showHydraCloudModal("achievements-points")}
-                  className="user-stats__link"
-                >
-                  <small className="user-stats__link--warning">
-                    {t("show_points_on_profile")}
-                  </small>
-                </button>
-              )}
-            </li>
-          )}
-
+    <div className="user-stats__box">
+      <ul className="user-stats__list">
+        {(isMe || userStats.unlockedAchievementSum !== undefined) && (
           <li className="user-stats__list-item">
-            <h3 className="user-stats__list-title">{t("total_play_time")}</h3>
-            <div className="user-stats__stats-row">
-              <p className="user-stats__list-description">
-                <ClockIcon />
-                {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
-              </p>
-              <p title={t("ranking_updated_weekly")}>
-                {t("top_percentile", {
-                  percentile: userStats.totalPlayTimeInSeconds.topPercentile,
-                })}
-              </p>
-            </div>
+            <h3 className="user-stats__list-title">
+              {t("achievements_unlocked")}
+            </h3>
+            {userStats.unlockedAchievementSum !== undefined ? (
+              <div className="user-stats__stats-row">
+                <p className="user-stats__list-description">
+                  <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
+                  {t("achievements")}
+                </p>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => showHydraCloudModal("achievements")}
+                className="user-stats__link"
+              >
+                <small style={{ color: "var(--color-warning)" }}>
+                  {t("show_achievements_on_profile")}
+                </small>
+              </button>
+            )}
           </li>
-        </ul>
-      </div>
+        )}
+
+        {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
+          <li className="user-stats__list-item">
+            <h3 className="user-stats__list-title">{t("earned_points")}</h3>
+            {userStats.achievementsPointsEarnedSum !== undefined ? (
+              <div className="user-stats__stats-row">
+                <p className="user-stats__list-description">
+                  <HydraIcon width={20} height={20} />
+                  {numberFormatter.format(
+                    userStats.achievementsPointsEarnedSum.value
+                  )}
+                </p>
+                <p title={t("ranking_updated_weekly")}>
+                  {t("top_percentile", {
+                    percentile:
+                      userStats.achievementsPointsEarnedSum.topPercentile,
+                  })}
+                </p>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => showHydraCloudModal("achievements-points")}
+                className="user-stats__link"
+              >
+                <small className="user-stats__link--warning">
+                  {t("show_points_on_profile")}
+                </small>
+              </button>
+            )}
+          </li>
+        )}
+
+        <li className="user-stats__list-item">
+          <h3 className="user-stats__list-title">{t("total_play_time")}</h3>
+          <div className="user-stats__stats-row">
+            <p className="user-stats__list-description">
+              <ClockIcon />
+              {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
+            </p>
+            <p title={t("ranking_updated_weekly")}>
+              {t("top_percentile", {
+                percentile: userStats.totalPlayTimeInSeconds.topPercentile,
+              })}
+            </p>
+          </div>
+        </li>
+      </ul>
     </div>
   );
 }
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 44abebc6..7f3b757a 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -30,7 +30,7 @@
   &__copy-button {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     background: none;
     border: none;
     color: globals.$body-color;
@@ -38,7 +38,11 @@
     cursor: pointer;
     padding: calc(globals.$spacing-unit / 1.5);
     border-radius: 6px;
-    transition: all ease 0.2s;
+    transition: background-color ease 0.2s;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-shrink: 0;
+    box-sizing: border-box;
 
     &:hover {
       opacity: 1;
@@ -46,6 +50,12 @@
     }
   }
 
+  &__friend-code {
+    font-size: globals.$small-font-size;
+    font-family: monospace;
+    white-space: nowrap;
+  }
+
   &__user-information {
     display: flex;
     padding: calc(globals.$spacing-unit * 7) calc(globals.$spacing-unit * 3);
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index 9755fb68..7c4c1e75 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -20,6 +20,7 @@ import {
 } from "@renderer/hooks";
 import { addSeconds } from "date-fns";
 import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
 
 import type { FriendRequestAction } from "@types";
 import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal";
@@ -34,6 +35,7 @@ type FriendAction =
 export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
+  const [isCopyButtonHovered, setIsCopyButtonHovered] = useState(false);
 
   const { isMe, getUserProfile, userProfile, heroBackground, backgroundImage } =
     useContext(userProfileContext);
@@ -312,14 +314,32 @@ export function ProfileHero() {
                     {userProfile?.displayName}
                   </h2>
 
-                  <button
+                  <motion.button
                     type="button"
                     className="profile-hero__copy-button"
                     onClick={copyFriendCode}
                     title={t("copy_friend_code")}
+                    onMouseEnter={() => setIsCopyButtonHovered(true)}
+                    onMouseLeave={() => setIsCopyButtonHovered(false)}
+                    initial={{ width: 28 }}
+                    animate={{
+                      width: isCopyButtonHovered ? 94 : 28,
+                    }}
+                    transition={{ duration: 0.2, ease: "easeInOut" }}
                   >
                     <CopyIcon size={16} />
-                  </button>
+                    <motion.span
+                      className="profile-hero__friend-code"
+                      initial={{ opacity: 0, marginLeft: 0 }}
+                      animate={{
+                        opacity: isCopyButtonHovered ? 1 : 0,
+                        marginLeft: isCopyButtonHovered ? 8 : 0,
+                      }}
+                      transition={{ duration: 0.2, ease: "easeInOut" }}
+                    >
+                      {userProfile?.id}
+                    </motion.span>
+                  </motion.button>
                 </div>
               ) : (
                 <Skeleton width={150} height={28} />
diff --git a/src/renderer/src/pages/profile/profile-section/profile-section.scss b/src/renderer/src/pages/profile/profile-section/profile-section.scss
new file mode 100644
index 00000000..dfc6abf9
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-section/profile-section.scss
@@ -0,0 +1,71 @@
+@use "../../../scss/globals.scss";
+
+.profile-section {
+  background-color: globals.$background-color;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: globals.$background-color;
+    padding-right: calc(globals.$spacing-unit * 2);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__button {
+    padding: calc(globals.$spacing-unit * 2.5) calc(globals.$spacing-unit * 2);
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    color: globals.$muted-color;
+    flex: 1;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    gap: globals.$spacing-unit;
+    font-size: globals.$body-font-size;
+    font-weight: bold;
+    border: none;
+
+    &:active {
+      opacity: globals.$active-opacity;
+    }
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+  }
+
+  &__chevron {
+    transition: transform ease 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
+    background-color: globals.$dark-background-color;
+    position: relative;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-section/profile-section.tsx b/src/renderer/src/pages/profile/profile-section/profile-section.tsx
new file mode 100644
index 00000000..4586d58f
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-section/profile-section.tsx
@@ -0,0 +1,64 @@
+import { ChevronDownIcon } from "@primer/octicons-react";
+import { useEffect, useRef, useState } from "react";
+import "./profile-section.scss";
+
+export interface ProfileSectionProps {
+  title: string;
+  count?: number;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function ProfileSection({
+  title,
+  count,
+  action,
+  children,
+  defaultOpen = true,
+}: ProfileSectionProps) {
+  const content = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (content.current && content.current.scrollHeight !== height) {
+      setHeight(isOpen ? content.current.scrollHeight : 0);
+    } else if (!isOpen) {
+      setHeight(0);
+    }
+  }, [isOpen, children, height]);
+
+  return (
+    <div className="profile-section">
+      <div className="profile-section__header">
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className="profile-section__button"
+        >
+          <ChevronDownIcon
+            className={`profile-section__chevron ${
+              isOpen ? "profile-section__chevron--open" : ""
+            }`}
+          />
+          <span>{title}</span>
+          {count !== undefined && (
+            <span className="profile-section__count">{count}</span>
+          )}
+        </button>
+        {action && <div className="profile-section__action">{action}</div>}
+      </div>
+
+      <div
+        ref={content}
+        className="profile-section__content"
+        style={{
+          maxHeight: `${height}px`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/index.ts b/src/renderer/src/pages/shared-modals/user-friend-modal/index.ts
deleted file mode 100644
index c7484512..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./user-friend-modal";
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss
deleted file mode 100644
index 216538ff..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-item {
-  &__container {
-    display: flex;
-    gap: calc(globals.$spacing-unit * 3);
-    align-items: center;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    width: 100%;
-    height: 54px;
-    min-height: 54px;
-    transition: all ease 0.2s;
-    position: relative;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.15);
-    }
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-    flex-direction: row;
-    color: globals.$body-color;
-    gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2);
-    padding: 0 globals.$spacing-unit;
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      flex: 1;
-      min-width: 0;
-    }
-
-    &__actions {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-    }
-  }
-
-  &__display-name {
-    font-weight: bold;
-    font-size: globals.$body-font-size;
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__accept-button {
-    cursor: pointer;
-    color: globals.$body-color;
-    width: 28px;
-    height: 28px;
-
-    &:hover {
-      color: globals.$success-color;
-    }
-  }
-
-  &__cancel-button {
-    cursor: pointer;
-    color: globals.$body-color;
-    width: 28px;
-    height: 28px;
-
-    &:hover {
-      color: globals.$danger-color;
-    }
-  }
-}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
deleted file mode 100644
index 0538e717..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
-import { useTranslation } from "react-i18next";
-import { Avatar } from "@renderer/components";
-import "./user-friend-item.scss";
-
-export type UserFriendItemProps = {
-  userId: string;
-  profileImageUrl: string | null;
-  displayName: string;
-} & (
-  | {
-      type: "ACCEPTED";
-      onClickUndoFriendship: (userId: string) => void;
-      onClickItem: (userId: string) => void;
-    }
-  | { type: "BLOCKED"; onClickUnblock: (userId: string) => void }
-  | {
-      type: "SENT" | "RECEIVED";
-      onClickCancelRequest: (userId: string) => void;
-      onClickAcceptRequest: (userId: string) => void;
-      onClickRefuseRequest: (userId: string) => void;
-      onClickItem: (userId: string) => void;
-    }
-  | { type: null; onClickItem: (userId: string) => void }
-);
-
-export const UserFriendItem = (props: UserFriendItemProps) => {
-  const { t } = useTranslation("user_profile");
-  const { userId, profileImageUrl, displayName, type } = props;
-
-  const getRequestDescription = () => {
-    if (type === "ACCEPTED" || type === null) return null;
-
-    return (
-      <small>
-        {type == "SENT" ? t("request_sent") : t("request_received")}
-      </small>
-    );
-  };
-
-  const getRequestActions = () => {
-    if (type === null) return null;
-
-    if (type === "SENT") {
-      return (
-        <button
-          className="user-friend-item__cancel-button"
-          onClick={() => props.onClickCancelRequest(userId)}
-          title={t("cancel_request")}
-        >
-          <XCircleIcon size={28} />
-        </button>
-      );
-    }
-
-    if (type === "RECEIVED") {
-      return (
-        <>
-          <button
-            className="user-friend-item__accept-button"
-            onClick={() => props.onClickAcceptRequest(userId)}
-            title={t("accept_request")}
-          >
-            <CheckCircleIcon size={28} />
-          </button>
-          <button
-            className="user-friend-item__cancel-button"
-            onClick={() => props.onClickRefuseRequest(userId)}
-            title={t("ignore_request")}
-          >
-            <XCircleIcon size={28} />
-          </button>
-        </>
-      );
-    }
-
-    if (type === "ACCEPTED") {
-      return (
-        <button
-          className="user-friend-item__cancel-button"
-          onClick={() => props.onClickUndoFriendship(userId)}
-          title={t("undo_friendship")}
-        >
-          <XCircleIcon size={28} />
-        </button>
-      );
-    }
-
-    if (type === "BLOCKED") {
-      return (
-        <button
-          className="user-friend-item__cancel-button"
-          onClick={() => props.onClickUnblock(userId)}
-          title={t("unblock")}
-        >
-          <XCircleIcon size={28} />
-        </button>
-      );
-    }
-
-    return null;
-  };
-
-  if (type === "BLOCKED") {
-    return (
-      <div className="user-friend-item__container">
-        <div className="user-friend-item__button">
-          <Avatar size={35} src={profileImageUrl} alt={displayName} />
-          <div className="user-friend-item__button__content">
-            <p className="user-friend-item__display-name">{displayName}</p>
-          </div>
-        </div>
-        <div className="user-friend-item__button__actions">
-          {getRequestActions()}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="user-friend-item__container">
-      <button
-        type="button"
-        className="user-friend-item__button"
-        onClick={() => props.onClickItem(userId)}
-      >
-        <Avatar size={35} src={profileImageUrl} alt={displayName} />
-        <div className="user-friend-item__button__content">
-          <p className="user-friend-item__display-name">{displayName}</p>
-
-          {getRequestDescription()}
-        </div>
-      </button>
-      <div className="user-friend-item__button__actions">
-        {getRequestActions()}
-      </div>
-    </div>
-  );
-};
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss
deleted file mode 100644
index 8c896a9e..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-modal-add-friend {
-  &__actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: globals.$spacing-unit;
-  }
-
-  &__button {
-    align-self: end;
-  }
-
-  &__pending-container {
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx
deleted file mode 100644
index 84248522..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Button, TextField } from "@renderer/components";
-import { useToast, useUserDetails } from "@renderer/hooks";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { UserFriendItem } from "./user-friend-item";
-import "./user-friend-modal-add-friend.scss";
-
-export interface UserFriendModalAddFriendProps {
-  closeModal: () => void;
-}
-
-export const UserFriendModalAddFriend = ({
-  closeModal,
-}: UserFriendModalAddFriendProps) => {
-  const { t } = useTranslation("user_profile");
-
-  const [friendCode, setFriendCode] = useState("");
-  const [isAddingFriend, setIsAddingFriend] = useState(false);
-
-  const navigate = useNavigate();
-
-  const { sendFriendRequest, updateFriendRequestState, friendRequests } =
-    useUserDetails();
-
-  const { showSuccessToast, showErrorToast } = useToast();
-
-  const handleClickAddFriend = () => {
-    setIsAddingFriend(true);
-    sendFriendRequest(friendCode)
-      .then(() => {
-        setFriendCode("");
-      })
-      .catch(() => {
-        showErrorToast(t("error_adding_friend"));
-      })
-      .finally(() => {
-        setIsAddingFriend(false);
-      });
-  };
-
-  const handleClickRequest = (userId: string) => {
-    closeModal();
-    navigate(`/profile/${userId}`);
-  };
-
-  const handleClickSeeProfile = () => {
-    if (friendCode.length === 8) {
-      closeModal();
-      navigate(`/profile/${friendCode}`);
-    }
-  };
-
-  const validateFriendCode = (callback: () => void) => {
-    if (friendCode.length === 8) {
-      return callback();
-    }
-
-    showErrorToast(t("friend_code_length_error"));
-  };
-
-  const handleCancelFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "CANCEL").catch(() => {
-      showErrorToast(t("try_again"));
-    });
-  };
-
-  const handleAcceptFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "ACCEPTED")
-      .then(() => {
-        showSuccessToast(t("request_accepted"));
-      })
-      .catch(() => {
-        showErrorToast(t("try_again"));
-      });
-  };
-
-  const handleRefuseFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "REFUSED").catch(() => {
-      showErrorToast(t("try_again"));
-    });
-  };
-
-  const handleChangeFriendCode = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const friendCode = e.target.value.trim().slice(0, 8);
-    setFriendCode(friendCode);
-  };
-
-  return (
-    <>
-      <div className="user-friend-modal-add-friend__actions">
-        <TextField
-          label={t("friend_code")}
-          value={friendCode}
-          containerProps={{ style: { width: "100%" } }}
-          onChange={handleChangeFriendCode}
-        />
-        <Button
-          disabled={isAddingFriend}
-          className="user-friend-modal-add-friend__button"
-          type="button"
-          onClick={() => validateFriendCode(handleClickAddFriend)}
-        >
-          {isAddingFriend ? t("sending") : t("add")}
-        </Button>
-
-        <Button
-          onClick={() => validateFriendCode(handleClickSeeProfile)}
-          disabled={isAddingFriend}
-          className="user-friend-modal-add-friend__button"
-          type="button"
-        >
-          {t("see_profile")}
-        </Button>
-      </div>
-
-      <div className="user-friend-modal-add-friend__pending-container">
-        <h3>{t("pending")}</h3>
-        {friendRequests.length === 0 && <p>{t("no_pending_invites")}</p>}
-        {friendRequests.map((request) => {
-          return (
-            <UserFriendItem
-              key={request.id}
-              displayName={request.displayName}
-              type={request.type}
-              profileImageUrl={request.profileImageUrl}
-              userId={request.id}
-              onClickAcceptRequest={handleAcceptFriendRequest}
-              onClickCancelRequest={handleCancelFriendRequest}
-              onClickRefuseRequest={handleRefuseFriendRequest}
-              onClickItem={handleClickRequest}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-};
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss
deleted file mode 100644
index eaf0e527..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-modal-list {
-  display: flex;
-  flex-direction: column;
-  gap: calc(globals.$spacing-unit * 2);
-  max-height: 400px;
-  overflow-y: scroll;
-
-  &__skeleton {
-    width: 100%;
-    height: 54px;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
deleted file mode 100644
index d5259777..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { UserFriend } from "@types";
-import { useEffect, useRef, useState } from "react";
-import { UserFriendItem } from "./user-friend-item";
-import { useNavigate } from "react-router-dom";
-import { useUserDetails } from "@renderer/hooks";
-import { useTranslation } from "react-i18next";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-import "./user-friend-modal-list.scss";
-
-export interface UserFriendModalListProps {
-  userId: string;
-  closeModal: () => void;
-}
-
-const pageSize = 12;
-
-export const UserFriendModalList = ({
-  userId,
-  closeModal,
-}: UserFriendModalListProps) => {
-  const { t } = useTranslation("user_profile");
-  const navigate = useNavigate();
-
-  const [page, setPage] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [maxPage, setMaxPage] = useState(0);
-  const [friends, setFriends] = useState<UserFriend[]>([]);
-  const listContainer = useRef<HTMLDivElement>(null);
-
-  const { userDetails } = useUserDetails();
-  const isMe = userDetails?.id == userId;
-
-  const loadNextPage = () => {
-    if (page > maxPage) return;
-    setIsLoading(true);
-
-    const url = isMe ? "/profile/friends" : `/users/${userId}/friends`;
-
-    window.electron.hydraApi
-      .get<{ totalFriends: number; friends: UserFriend[] }>(url, {
-        params: { take: pageSize, skip: page * pageSize },
-      })
-      .then((newPage) => {
-        if (page === 0) {
-          setMaxPage(newPage.totalFriends / pageSize);
-        }
-
-        setFriends([...friends, ...newPage.friends]);
-        setPage(page + 1);
-      })
-      .catch(() => {})
-      .finally(() => setIsLoading(false));
-  };
-
-  const handleScroll = () => {
-    const scrollTop = listContainer.current?.scrollTop || 0;
-    const scrollHeight = listContainer.current?.scrollHeight || 0;
-    const clientHeight = listContainer.current?.clientHeight || 0;
-    const maxScrollTop = scrollHeight - clientHeight;
-
-    if (scrollTop < maxScrollTop * 0.9 || isLoading) {
-      return;
-    }
-
-    loadNextPage();
-  };
-
-  useEffect(() => {
-    const container = listContainer.current;
-    container?.addEventListener("scroll", handleScroll);
-    return () => container?.removeEventListener("scroll", handleScroll);
-  }, [isLoading]);
-
-  const reloadList = () => {
-    setPage(0);
-    setMaxPage(0);
-    setFriends([]);
-    loadNextPage();
-  };
-
-  useEffect(() => {
-    reloadList();
-  }, [userId]);
-
-  const handleClickFriend = (userId: string) => {
-    closeModal();
-    navigate(`/profile/${userId}`);
-  };
-
-  return (
-    <SkeletonTheme baseColor="#1c1c1c" highlightColor="#444">
-      <div ref={listContainer} className="user-friend-modal-list">
-        {!isLoading && friends.length === 0 && <p>{t("no_friends_added")}</p>}
-        {friends.map((friend) => (
-          <UserFriendItem
-            userId={friend.id}
-            displayName={friend.displayName}
-            profileImageUrl={friend.profileImageUrl}
-            onClickItem={handleClickFriend}
-            type={null}
-            key={"modal" + friend.id}
-          />
-        ))}
-        {isLoading && <Skeleton className="user-friend-modal-list__skeleton" />}
-      </div>
-    </SkeletonTheme>
-  );
-};
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
deleted file mode 100644
index 550c0fd9..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-modal {
-  &__container {
-    display: flex;
-    width: 500px;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-
-  &__header {
-    display: flex;
-    gap: globals.$spacing-unit;
-    align-items: center;
-  }
-
-  &__friend-code-button {
-    color: globals.$body-color;
-    cursor: pointer;
-    display: flex;
-    gap: calc(globals.$spacing-unit / 2);
-    align-items: center;
-    transition: all ease 0.2s;
-
-    &:hover {
-      color: globals.$muted-color;
-    }
-  }
-
-  &__tabs {
-    display: flex;
-    gap: globals.$spacing-unit;
-  }
-}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
deleted file mode 100644
index 7c045394..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Button, Modal } from "@renderer/components";
-import { useCallback, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend";
-import { useToast, useUserDetails } from "@renderer/hooks";
-import { UserFriendModalList } from "./user-friend-modal-list";
-import { CopyIcon } from "@primer/octicons-react";
-import "./user-friend-modal.scss";
-
-export enum UserFriendModalTab {
-  FriendsList,
-  AddFriend,
-}
-
-export interface UserFriendsModalProps {
-  visible: boolean;
-  onClose: () => void;
-  initialTab: UserFriendModalTab | null;
-  userId: string;
-}
-
-export const UserFriendModal = ({
-  visible,
-  onClose,
-  initialTab,
-  userId,
-}: UserFriendsModalProps) => {
-  const { t } = useTranslation("user_profile");
-
-  const tabs = [t("friends_list"), t("add_friends")];
-
-  const [currentTab, setCurrentTab] = useState(
-    initialTab || UserFriendModalTab.FriendsList
-  );
-
-  const { showSuccessToast } = useToast();
-
-  const { userDetails } = useUserDetails();
-  const isMe = userDetails?.id == userId;
-
-  useEffect(() => {
-    if (initialTab != null) {
-      setCurrentTab(initialTab);
-    }
-  }, [initialTab]);
-
-  const renderTab = () => {
-    if (currentTab == UserFriendModalTab.FriendsList) {
-      return <UserFriendModalList userId={userId} closeModal={onClose} />;
-    }
-
-    if (currentTab == UserFriendModalTab.AddFriend) {
-      return <UserFriendModalAddFriend closeModal={onClose} />;
-    }
-
-    return <></>;
-  };
-
-  const copyToClipboard = useCallback(() => {
-    navigator.clipboard.writeText(userDetails!.id);
-    showSuccessToast(t("friend_code_copied"));
-  }, [userDetails, showSuccessToast, t]);
-
-  return (
-    <Modal visible={visible} title={t("friends")} onClose={onClose}>
-      <div className="user-friend-modal__container">
-        {isMe && (
-          <>
-            <div className="user-friend-modal__header">
-              <p>{t("your_friend_code")}</p>
-              <button
-                className="user-friend-modal__friend-code-button"
-                onClick={copyToClipboard}
-              >
-                <h3>{userDetails.id}</h3>
-                <CopyIcon />
-              </button>
-            </div>
-            <section className="user-friend-modal__tabs">
-              {tabs.map((tab, index) => (
-                <Button
-                  key={tab}
-                  theme={index === currentTab ? "primary" : "outline"}
-                  onClick={() => setCurrentTab(index)}
-                >
-                  {tab}
-                </Button>
-              ))}
-            </section>
-          </>
-        )}
-        {renderTab()}
-      </div>
-    </Modal>
-  );
-};

From dff8d02f3f5d3338980957edf1077db6d431c374 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 23 Dec 2025 18:48:56 +0200
Subject: [PATCH 32/72] refactor: remove unused userDetails variable from App
 component

---
 src/renderer/src/app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
index 7c0ea607..9334b5b9 100644
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -53,7 +53,6 @@ export function App() {
   const { clearDownload, setLastPacket } = useDownload();
 
   const {
-    userDetails,
     hasActiveSubscription,
     fetchUserDetails,
     updateUserDetails,

From cea5afc7f7d57af7d8bfee7b57f62c3c99d42ad4 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Wed, 24 Dec 2025 13:22:57 +0200
Subject: [PATCH 33/72] feat: enhance add friend modal with friend code display
 and copy functionality

---
 .../profile-content/add-friend-modal.scss     | 41 +++++++++++++++++++
 .../profile-content/add-friend-modal.tsx      | 28 +++++++++++++
 .../profile/profile-content/friends-box.scss  |  5 ++-
 .../profile/profile-content/friends-box.tsx   | 28 ++++++++-----
 .../profile-content/profile-content.tsx       |  7 ----
 .../profile-content/recent-games-box.scss     |  4 +-
 .../profile-content/user-karma-box.scss       | 37 -----------------
 .../profile-content/user-karma-box.tsx        | 37 -----------------
 .../profile-content/user-stats-box.scss       | 10 ++++-
 .../profile-content/user-stats-box.tsx        | 26 +++++++++++-
 .../profile/profile-hero/profile-hero.scss    |  4 +-
 .../profile/profile-hero/profile-hero.tsx     |  8 ++--
 12 files changed, 132 insertions(+), 103 deletions(-)
 delete mode 100644 src/renderer/src/pages/profile/profile-content/user-karma-box.scss
 delete mode 100644 src/renderer/src/pages/profile/profile-content/user-karma-box.tsx

diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
index f33b5515..6e89ae1a 100644
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
@@ -7,6 +7,47 @@
   width: 100%;
   min-width: 400px;
 
+  &__my-code {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__my-code-label {
+    font-size: 0.875rem;
+    color: globals.$muted-color;
+    font-weight: 500;
+  }
+
+  &__my-code-value {
+    font-size: 0.875rem;
+    color: globals.$body-color;
+    font-family: monospace;
+    font-weight: 600;
+    flex: 1;
+  }
+
+  &__copy-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 4px;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      color: globals.$body-color;
+    }
+  }
+
   &__actions {
     display: flex;
     flex-direction: row;
diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
index efe95ec5..7f370a39 100644
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
@@ -3,6 +3,7 @@ import { useToast, useUserDetails } from "@renderer/hooks";
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { CopyIcon } from "@primer/octicons-react";
 import "./add-friend-modal.scss";
 
 interface AddFriendModalProps {
@@ -22,10 +23,18 @@ export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
     updateFriendRequestState,
     friendRequests,
     fetchFriendRequests,
+    userDetails,
   } = useUserDetails();
 
   const { showSuccessToast, showErrorToast } = useToast();
 
+  const copyMyFriendCode = () => {
+    if (userDetails?.id) {
+      navigator.clipboard.writeText(userDetails.id);
+      showSuccessToast(t("friend_code_copied"));
+    }
+  };
+
   useEffect(() => {
     if (visible) {
       setFriendCode("");
@@ -88,6 +97,25 @@ export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
   return (
     <Modal visible={visible} title={t("add_friends")} onClose={onClose}>
       <div className="add-friend-modal">
+        {userDetails?.id && (
+          <div className="add-friend-modal__my-code">
+            <span className="add-friend-modal__my-code-label">
+              {t("your_friend_code")}
+            </span>
+            <span className="add-friend-modal__my-code-value">
+              {userDetails.id}
+            </span>
+            <button
+              onClick={copyMyFriendCode}
+              type="button"
+              className="add-friend-modal__copy-icon-button"
+              title={t("copy_friend_code")}
+            >
+              <CopyIcon size={16} />
+            </button>
+          </div>
+        )}
+
         <div className="add-friend-modal__actions">
           <TextField
             label={t("friend_code")}
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.scss b/src/renderer/src/pages/profile/profile-content/friends-box.scss
index 8e4ab919..088b204f 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -60,11 +60,12 @@
 
   &__friend-name {
     color: globals.$muted-color;
-    font-weight: bold;
-    font-size: globals.$body-font-size;
+    font-size: 0.8rem;
+    font-weight: 600;
   }
 
   &__game-info {
+    font-size: 0.75rem;
     display: flex;
     gap: globals.$spacing-unit;
     align-items: center;
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.tsx b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
index 49c9a619..cd0fed24 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -9,6 +9,8 @@ import { AllFriendsModal } from "./all-friends-modal";
 import { AddFriendModal } from "./add-friend-modal";
 import "./friends-box.scss";
 
+const MAX_VISIBLE_FRIENDS = 5;
+
 export function FriendsBox() {
   const { userProfile } = useContext(userProfileContext);
   const { userDetails } = useUserDetails();
@@ -35,11 +37,15 @@ export function FriendsBox() {
 
   if (!userProfile?.friends.length) return null;
 
+  const visibleFriends = userProfile.friends.slice(0, MAX_VISIBLE_FRIENDS);
+  const totalFriends = userProfile.friends.length;
+  const showViewAllButton = totalFriends > MAX_VISIBLE_FRIENDS;
+
   return (
     <>
       <div className="friends-box__box">
         <ul className="friends-box__list">
-          {userProfile?.friends.map((friend) => (
+          {visibleFriends.map((friend) => (
             <li
               key={friend.id}
               title={
@@ -73,15 +79,17 @@ export function FriendsBox() {
             </li>
           ))}
         </ul>
-        <div className="friends-box__view-all-container">
-          <button
-            type="button"
-            className="friends-box__view-all"
-            onClick={() => setShowAllFriendsModal(true)}
-          >
-            {t("view_all")}
-          </button>
-        </div>
+        {showViewAllButton && (
+          <div className="friends-box__view-all-container">
+            <button
+              type="button"
+              className="friends-box__view-all"
+              onClick={() => setShowAllFriendsModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
       </div>
 
       {userProfile && (
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index 8c200b06..d3be6091 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -18,7 +18,6 @@ import { BadgesBox } from "./badges-box";
 import { FriendsBox, FriendsBoxAddButton } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
-import { UserKarmaBox } from "./user-karma-box";
 import { ProfileSection } from "../profile-section/profile-section";
 import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
 import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
@@ -440,12 +439,6 @@ export function ProfileContent() {
                 <BadgesBox />
               </ProfileSection>
             )}
-            {userProfile?.karma !== undefined &&
-              userProfile?.karma !== null && (
-                <ProfileSection title={t("karma")} defaultOpen={true}>
-                  <UserKarmaBox />
-                </ProfileSection>
-              )}
             {userProfile?.recentGames.length > 0 && (
               <ProfileSection title={t("activity")} defaultOpen={true}>
                 <RecentGamesBox />
diff --git a/src/renderer/src/pages/profile/profile-content/recent-games-box.scss b/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
index 4bfb51f0..394fbca7 100644
--- a/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
@@ -47,13 +47,15 @@
   }
 
   &__game-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
   &__game-description {
+    font-size: 0.75rem;
     display: flex;
     align-items: center;
     gap: globals.$spacing-unit;
diff --git a/src/renderer/src/pages/profile/profile-content/user-karma-box.scss b/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
deleted file mode 100644
index 79261aa1..00000000
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-karma {
-  &__box {
-    padding: calc(globals.$spacing-unit * 2);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 1.5);
-  }
-
-  &__stats-row {
-    display: flex;
-    align-items: center;
-    color: globals.$body-color;
-  }
-
-  &__description {
-    display: flex;
-    align-items: center;
-    gap: globals.$spacing-unit;
-    font-weight: 600;
-    font-size: 1.1rem;
-  }
-
-  &__info {
-    padding-top: calc(globals.$spacing-unit * 0.5);
-  }
-
-  &__info-text {
-    color: globals.$muted-color;
-    font-size: 0.85rem;
-    line-height: 1.4;
-  }
-}
diff --git a/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx b/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
deleted file mode 100644
index b8dd7244..00000000
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useContext } from "react";
-import { userProfileContext } from "@renderer/context";
-import { useTranslation } from "react-i18next";
-import { useFormat, useUserDetails } from "@renderer/hooks";
-import { Award } from "lucide-react";
-import "./user-karma-box.scss";
-
-export function UserKarmaBox() {
-  const { isMe, userProfile } = useContext(userProfileContext);
-  const { userDetails } = useUserDetails();
-  const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
-
-  // Get karma from userDetails (for current user) or userProfile (for other users)
-  const karma = isMe ? userDetails?.karma : userProfile?.karma;
-
-  // Don't show if karma is not available
-  if (karma === undefined || karma === null) return null;
-
-  return (
-    <div className="user-karma__box">
-      <div className="user-karma__content">
-        <div className="user-karma__stats-row">
-          <p className="user-karma__description">
-            <Award size={20} /> {numberFormatter.format(karma)}{" "}
-            {t("karma_count")}
-          </p>
-        </div>
-        <div className="user-karma__info">
-          <small className="user-karma__info-text">
-            {t("karma_description")}
-          </small>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
index fc92e466..72a4d580 100644
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
@@ -32,13 +32,15 @@
   }
 
   &__list-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
   &__list-description {
+    font-size: 0.75rem;
     display: flex;
     align-items: center;
     gap: globals.$spacing-unit;
@@ -62,4 +64,10 @@
       cursor: pointer;
     }
   }
+
+  &__karma-info-text {
+    color: globals.$muted-color;
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
 }
diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
index f7e76e79..6fbabdca 100644
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
@@ -1,16 +1,18 @@
 import { useCallback, useContext } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
-import { useFormat } from "@renderer/hooks";
+import { useFormat, useUserDetails } from "@renderer/hooks";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { ClockIcon, TrophyIcon } from "@primer/octicons-react";
+import { Award } from "lucide-react";
 import "./user-stats-box.scss";
 
 export function UserStatsBox() {
   const { showHydraCloudModal } = useSubscription();
-  const { userStats, isMe } = useContext(userProfileContext);
+  const { userStats, isMe, userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
   const { t } = useTranslation("user_profile");
   const { numberFormatter } = useFormat();
 
@@ -33,6 +35,9 @@ export function UserStatsBox() {
 
   if (!userStats) return null;
 
+  const karma = isMe ? userDetails?.karma : userProfile?.karma;
+  const hasKarma = karma !== undefined && karma !== null;
+
   return (
     <div className="user-stats__box">
       <ul className="user-stats__list">
@@ -108,6 +113,23 @@ export function UserStatsBox() {
             </p>
           </div>
         </li>
+
+        {hasKarma && karma !== undefined && karma !== null && (
+          <li className="user-stats__list-item user-stats__list-item--karma">
+            <h3 className="user-stats__list-title">{t("karma")}</h3>
+            <div className="user-stats__stats-row">
+              <p className="user-stats__list-description">
+                <Award size={20} /> {numberFormatter.format(karma)}{" "}
+                {t("karma_count")}
+              </p>
+            </div>
+            <div className="user-stats__karma-info">
+              <small className="user-stats__karma-info-text">
+                {t("karma_description")}
+              </small>
+            </div>
+          </li>
+        )}
       </ul>
     </div>
   );
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 7f3b757a..7061eceb 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -30,7 +30,7 @@
   &__copy-button {
     display: flex;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: flex-end;
     background: none;
     border: none;
     color: globals.$body-color;
@@ -51,7 +51,7 @@
   }
 
   &__friend-code {
-    font-size: globals.$small-font-size;
+    font-size: 0.875rem;
     font-family: monospace;
     white-space: nowrap;
   }
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index 7c4c1e75..b5392935 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -323,22 +323,22 @@ export function ProfileHero() {
                     onMouseLeave={() => setIsCopyButtonHovered(false)}
                     initial={{ width: 28 }}
                     animate={{
-                      width: isCopyButtonHovered ? 94 : 28,
+                      width: isCopyButtonHovered ? 105 : 28,
                     }}
                     transition={{ duration: 0.2, ease: "easeInOut" }}
                   >
-                    <CopyIcon size={16} />
                     <motion.span
                       className="profile-hero__friend-code"
-                      initial={{ opacity: 0, marginLeft: 0 }}
+                      initial={{ opacity: 0, marginRight: 0 }}
                       animate={{
                         opacity: isCopyButtonHovered ? 1 : 0,
-                        marginLeft: isCopyButtonHovered ? 8 : 0,
+                        marginRight: isCopyButtonHovered ? 8 : 0,
                       }}
                       transition={{ duration: 0.2, ease: "easeInOut" }}
                     >
                       {userProfile?.id}
                     </motion.span>
+                    <CopyIcon size={16} />
                   </motion.button>
                 </div>
               ) : (

From f8ac284bc2d2601b3abf1b2a1b5f22e1da817315 Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Thu, 25 Dec 2025 14:16:11 +0300
Subject: [PATCH 34/72] New hosters

---
 .../events/torrenting/start-game-download.ts  |  37 ++++-
 .../services/download/download-manager.ts     | 131 ++++++++++++++----
 src/main/services/hosters/buzzheavier.ts      |  82 +++++++++++
 src/main/services/hosters/fuckingfast.ts      | 129 +++++++++++++++++
 src/main/services/hosters/index.ts            |   2 +
 src/renderer/src/constants.ts                 |   2 +
 src/shared/constants.ts                       |   2 +
 src/shared/index.ts                           |  10 ++
 8 files changed, 365 insertions(+), 30 deletions(-)
 create mode 100644 src/main/services/hosters/buzzheavier.ts
 create mode 100644 src/main/services/hosters/fuckingfast.ts

diff --git a/src/main/events/torrenting/start-game-download.ts b/src/main/events/torrenting/start-game-download.ts
index 4375698f..940f3025 100644
--- a/src/main/events/torrenting/start-game-download.ts
+++ b/src/main/events/torrenting/start-game-download.ts
@@ -82,7 +82,6 @@ const startGameDownload = async (
     queued: true,
     extracting: false,
     automaticallyExtract,
-    extractionProgress: 0,
   };
 
   try {
@@ -124,6 +123,42 @@ const startGameDownload = async (
     }
 
     if (err instanceof Error) {
+      if (downloader === Downloader.Buzzheavier) {
+        if (err.message.includes("Rate limit")) {
+          return {
+            ok: false,
+            error: "Buzzheavier: Rate limit exceeded",
+          };
+        }
+        if (
+          err.message.includes("not found") ||
+          err.message.includes("deleted")
+        ) {
+          return {
+            ok: false,
+            error: "Buzzheavier: File not found",
+          };
+        }
+      }
+
+      if (downloader === Downloader.FuckingFast) {
+        if (err.message.includes("Rate limit")) {
+          return {
+            ok: false,
+            error: "FuckingFast: Rate limit exceeded",
+          };
+        }
+        if (
+          err.message.includes("not found") ||
+          err.message.includes("deleted")
+        ) {
+          return {
+            ok: false,
+            error: "FuckingFast: File not found",
+          };
+        }
+      }
+
       return { ok: false, error: err.message };
     }
 
diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index c208fa32..ce06e5e4 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -20,14 +20,47 @@ import { RealDebridClient } from "./real-debrid";
 import path from "path";
 import { logger } from "../logger";
 import { db, downloadsSublevel, gamesSublevel, levelKeys } from "@main/level";
-import { orderBy } from "lodash-es";
+import { sortBy } from "lodash-es";
 import { TorBoxClient } from "./torbox";
 import { GameFilesManager } from "../game-files-manager";
 import { HydraDebridClient } from "./hydra-debrid";
+import { BuzzheavierApi, FuckingFastApi } from "@main/services/hosters";
 
 export class DownloadManager {
   private static downloadingGameId: string | null = null;
 
+  private static extractFilename(url: string, originalUrl?: string): string | undefined {
+    if (originalUrl && originalUrl.includes('#')) {
+      const hashPart = originalUrl.split('#')[1];
+      if (hashPart && !hashPart.startsWith('http')) {
+        return hashPart;
+      }
+    }
+
+    if (url.includes('#')) {
+      const hashPart = url.split('#')[1];
+      if (hashPart && !hashPart.startsWith('http')) {
+        return hashPart;
+      }
+    }
+
+    try {
+      const urlObj = new URL(url);
+      const pathname = urlObj.pathname;
+      const filename = pathname.split('/').pop();
+      if (filename && filename.length > 0) {
+        return filename;
+      }
+    } catch {
+    }
+
+    return undefined;
+  }
+
+  private static sanitizeFilename(filename: string): string {
+    return filename.replace(/[<>:"/\\|?*]/g, '_');
+  }
+
   public static async startRPC(
     download?: Download,
     downloadsToSeed?: Download[]
@@ -126,10 +159,21 @@ export class DownloadManager {
         }
       );
 
+      if (WindowManager.mainWindow && download) {
+        WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
+        WindowManager.mainWindow.webContents.send(
+          "on-download-progress",
+          JSON.parse(
+            JSON.stringify({
+              ...status,
+              game,
+            })
+          )
+        );
+      }
+
       const shouldExtract = download.automaticallyExtract;
 
-      // Handle download completion BEFORE sending progress to renderer
-      // This ensures extraction starts and DB is updated before UI reacts
       if (progress === 1 && download) {
         publishDownloadCompleteNotification(game);
 
@@ -143,7 +187,6 @@ export class DownloadManager {
             shouldSeed: true,
             queued: false,
             extracting: shouldExtract,
-            extractionProgress: shouldExtract ? 0 : download.extractionProgress,
           });
         } else {
           await downloadsSublevel.put(gameId, {
@@ -152,22 +195,12 @@ export class DownloadManager {
             shouldSeed: false,
             queued: false,
             extracting: shouldExtract,
-            extractionProgress: shouldExtract ? 0 : download.extractionProgress,
           });
 
           this.cancelDownload(gameId);
         }
 
         if (shouldExtract) {
-          // Send initial extraction progress BEFORE download progress
-          // This ensures the UI shows extraction immediately
-          WindowManager.mainWindow?.webContents.send(
-            "on-extraction-progress",
-            game.shop,
-            game.objectId,
-            0
-          );
-
           const gameFilesManager = new GameFilesManager(
             game.shop,
             game.objectId
@@ -194,10 +227,10 @@ export class DownloadManager {
           .values()
           .all()
           .then((games) => {
-            return orderBy(
+            return sortBy(
               games.filter((game) => game.status === "paused" && game.queued),
               "timestamp",
-              "desc"
+              "DESC"
             );
           });
 
@@ -209,18 +242,6 @@ export class DownloadManager {
           this.downloadingGameId = null;
         }
       }
-
-      // Send progress to renderer after completion handling
-      if (WindowManager.mainWindow && download) {
-        WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
-        WindowManager.mainWindow.webContents.send(
-          "on-download-progress",
-          structuredClone({
-            ...status,
-            game,
-          })
-        );
-      }
     }
   }
 
@@ -360,6 +381,58 @@ export class DownloadManager {
           save_path: download.downloadPath,
         };
       }
+      case Downloader.Buzzheavier: {
+        logger.log(`[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`);
+        try {
+          const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
+          logger.log(`[DownloadManager] Buzzheavier direct URL obtained`);
+
+          const filename = this.extractFilename(directUrl, download.uri);
+          const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
+          
+          if (sanitizedFilename) {
+            logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
+          }
+
+          return {
+            action: "start",
+            game_id: downloadId,
+            url: directUrl,
+            save_path: download.downloadPath,
+            out: sanitizedFilename,
+            allow_multiple_connections: true,
+          };
+        } catch (error) {
+          logger.error(`[DownloadManager] Error processing Buzzheavier download:`, error);
+          throw error;
+        }
+      }
+      case Downloader.FuckingFast: {
+        logger.log(`[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`);
+        try {
+          const directUrl = await FuckingFastApi.getDirectLink(download.uri);
+          logger.log(`[DownloadManager] FuckingFast direct URL obtained`);
+
+          const filename = this.extractFilename(directUrl, download.uri);
+          const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
+          
+          if (sanitizedFilename) {
+            logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
+          }
+
+          return {
+            action: "start",
+            game_id: downloadId,
+            url: directUrl,
+            save_path: download.downloadPath,
+            out: sanitizedFilename,
+            allow_multiple_connections: true,
+          };
+        } catch (error) {
+          logger.error(`[DownloadManager] Error processing FuckingFast download:`, error);
+          throw error;
+        }
+      }
       case Downloader.Mediafire: {
         const downloadUrl = await MediafireApi.getDownloadUrl(download.uri);
 
@@ -426,4 +499,4 @@ export class DownloadManager {
     await PythonRPC.rpc.post("/action", payload);
     this.downloadingGameId = levelKeys.game(download.shop, download.objectId);
   }
-}
+}
\ No newline at end of file
diff --git a/src/main/services/hosters/buzzheavier.ts b/src/main/services/hosters/buzzheavier.ts
new file mode 100644
index 00000000..7f8b7733
--- /dev/null
+++ b/src/main/services/hosters/buzzheavier.ts
@@ -0,0 +1,82 @@
+import axios from "axios";
+import {
+  HOSTER_USER_AGENT,
+  extractHosterFilename,
+  handleHosterError,
+} from "./fuckingfast";
+import { logger } from "@main/services";
+
+export class BuzzheavierApi {
+  private static readonly BUZZHEAVIER_DOMAINS = [
+    "buzzheavier.com",
+    "bzzhr.co",
+    "fuckingfast.net",
+  ];
+
+  private static isSupportedDomain(url: string): boolean {
+    const lowerUrl = url.toLowerCase();
+    return this.BUZZHEAVIER_DOMAINS.some((domain) => lowerUrl.includes(domain));
+  }
+
+  private static async getBuzzheavierDirectLink(url: string): Promise<string> {
+    try {
+      const baseUrl = url.split("#")[0];
+      logger.log(`[Buzzheavier] Starting download link extraction for: ${baseUrl}`);
+
+      await axios.get(baseUrl, {
+        headers: { "User-Agent": HOSTER_USER_AGENT },
+        timeout: 30000,
+      });
+
+      const downloadUrl = `${baseUrl}/download`;
+      logger.log(`[Buzzheavier] Making HEAD request to: ${downloadUrl}`);
+      const headResponse = await axios.head(downloadUrl, {
+        headers: {
+          "hx-current-url": baseUrl,
+          "hx-request": "true",
+          referer: baseUrl,
+          "User-Agent": HOSTER_USER_AGENT,
+        },
+        maxRedirects: 0,
+        validateStatus: (status) =>
+          status === 200 || status === 204 || status === 301 || status === 302,
+        timeout: 30000,
+      });
+
+      const hxRedirect = headResponse.headers["hx-redirect"];
+      logger.log(`[Buzzheavier] Received hx-redirect header: ${hxRedirect}`);
+      if (!hxRedirect) {
+        logger.error(`[Buzzheavier] No hx-redirect header found. Status: ${headResponse.status}`);
+        throw new Error(
+          "Could not extract download link. File may be deleted or is a directory."
+        );
+      }
+
+      const domain = new URL(baseUrl).hostname;
+      const directLink = hxRedirect.startsWith("/dl/")
+        ? `https://${domain}${hxRedirect}`
+        : hxRedirect;
+      logger.log(`[Buzzheavier] Extracted direct link`);
+      return directLink;
+    } catch (error) {
+      logger.error(`[Buzzheavier] Error in getBuzzheavierDirectLink:`, error);
+      handleHosterError(error);
+    }
+  }
+
+  public static async getDirectLink(url: string): Promise<string> {
+    if (!this.isSupportedDomain(url)) {
+      throw new Error(
+        `Unsupported domain. Supported domains: ${this.BUZZHEAVIER_DOMAINS.join(", ")}`
+      );
+    }
+    return this.getBuzzheavierDirectLink(url);
+  }
+
+  public static async getFilename(
+    url: string,
+    directUrl?: string
+  ): Promise<string> {
+    return extractHosterFilename(url, directUrl);
+  }
+}
\ No newline at end of file
diff --git a/src/main/services/hosters/fuckingfast.ts b/src/main/services/hosters/fuckingfast.ts
new file mode 100644
index 00000000..c9001d9a
--- /dev/null
+++ b/src/main/services/hosters/fuckingfast.ts
@@ -0,0 +1,129 @@
+import axios from "axios";
+import { logger } from "@main/services";
+
+export const HOSTER_USER_AGENT =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0";
+
+export async function extractHosterFilename(
+  url: string,
+  directUrl?: string
+): Promise<string> {
+  if (url.includes("#")) {
+    const fragment = url.split("#")[1];
+    if (fragment && !fragment.startsWith("http")) {
+      return fragment;
+    }
+  }
+
+  if (directUrl) {
+    try {
+      const response = await axios.head(directUrl, {
+        timeout: 10000,
+        headers: { "User-Agent": HOSTER_USER_AGENT },
+      });
+
+      const contentDisposition = response.headers["content-disposition"];
+      if (contentDisposition) {
+        const filenameMatch = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(
+          contentDisposition
+        );
+        if (filenameMatch && filenameMatch[1]) {
+          return filenameMatch[1].replace(/['"]/g, "");
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+
+    const urlPath = new URL(directUrl).pathname;
+    const filename = urlPath.split("/").pop()?.split("?")[0];
+    if (filename) {
+      return filename;
+    }
+  }
+
+  return "downloaded_file";
+}
+
+export function handleHosterError(error: unknown): never {
+  if (axios.isAxiosError(error)) {
+    if (error.response?.status === 404) {
+      throw new Error("File not found");
+    }
+    if (error.response?.status === 429) {
+      throw new Error("Rate limit exceeded. Please try again later.");
+    }
+    if (error.response?.status === 403) {
+      throw new Error("Access denied. File may be private or deleted.");
+    }
+    throw new Error(`Network error: ${error.response?.status || "Unknown"}`);
+  }
+  throw error;
+}
+
+// ============================================
+// FuckingFast API Class
+// ============================================
+export class FuckingFastApi {
+  private static readonly FUCKINGFAST_DOMAINS = ["fuckingfast.co"];
+
+  private static readonly FUCKINGFAST_REGEX =
+    /window\.open\("(https:\/\/fuckingfast\.co\/dl\/[^"]*)"\)/;
+
+  private static isSupportedDomain(url: string): boolean {
+    const lowerUrl = url.toLowerCase();
+    return this.FUCKINGFAST_DOMAINS.some((domain) => lowerUrl.includes(domain));
+  }
+
+  private static async getFuckingFastDirectLink(url: string): Promise<string> {
+    try {
+      logger.log(`[FuckingFast] Starting download link extraction for: ${url}`);
+      const response = await axios.get(url, {
+        headers: { "User-Agent": HOSTER_USER_AGENT },
+        timeout: 30000,
+      });
+
+      const html = response.data;
+
+      if (html.toLowerCase().includes("rate limit")) {
+        logger.error(`[FuckingFast] Rate limit detected`);
+        throw new Error(
+          "Rate limit exceeded. Please wait a few minutes and try again."
+        );
+      }
+
+      if (html.includes("File Not Found Or Deleted")) {
+        logger.error(`[FuckingFast] File not found or deleted`);
+        throw new Error("File not found or deleted");
+      }
+
+      const match = this.FUCKINGFAST_REGEX.exec(html);
+      if (!match || !match[1]) {
+        logger.error(`[FuckingFast] Could not extract download link`);
+        throw new Error("Could not extract download link from page");
+      }
+
+      logger.log(`[FuckingFast] Successfully extracted direct link`);
+      return match[1];
+    } catch (error) {
+      logger.error(`[FuckingFast] Error:`, error);
+      handleHosterError(error);
+    }
+  }
+
+  public static async getDirectLink(url: string): Promise<string> {
+    if (!this.isSupportedDomain(url)) {
+      throw new Error(
+        `Unsupported domain. Supported domains: ${this.FUCKINGFAST_DOMAINS.join(", ")}`
+      );
+    }
+    return this.getFuckingFastDirectLink(url);
+  }
+
+  public static async getFilename(
+    url: string,
+    directUrl?: string
+  ): Promise<string> {
+    return extractHosterFilename(url, directUrl);
+  }
+}
\ No newline at end of file
diff --git a/src/main/services/hosters/index.ts b/src/main/services/hosters/index.ts
index 3f3b9ac9..5f918811 100644
--- a/src/main/services/hosters/index.ts
+++ b/src/main/services/hosters/index.ts
@@ -3,3 +3,5 @@ export * from "./qiwi";
 export * from "./datanodes";
 export * from "./mediafire";
 export * from "./pixeldrain";
+export * from "./buzzheavier";
+export * from "./fuckingfast";
diff --git a/src/renderer/src/constants.ts b/src/renderer/src/constants.ts
index 3329a0cc..89de5503 100644
--- a/src/renderer/src/constants.ts
+++ b/src/renderer/src/constants.ts
@@ -10,6 +10,8 @@ export const DOWNLOADER_NAME = {
   [Downloader.Qiwi]: "Qiwi",
   [Downloader.Datanodes]: "Datanodes",
   [Downloader.Mediafire]: "Mediafire",
+  [Downloader.Buzzheavier]: "Buzzheavier",
+  [Downloader.FuckingFast]: "FuckingFast",
   [Downloader.TorBox]: "TorBox",
   [Downloader.Hydra]: "Nimbus",
 };
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 619dca65..6e900175 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -8,6 +8,8 @@ export enum Downloader {
   Mediafire,
   TorBox,
   Hydra,
+  Buzzheavier,
+  FuckingFast,
 }
 
 export enum DownloadSourceStatus {
diff --git a/src/shared/index.ts b/src/shared/index.ts
index 615fa36e..d54ef387 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -114,6 +114,16 @@ export const getDownloadersForUri = (uri: string) => {
   if (uri.startsWith("https://datanodes.to")) return [Downloader.Datanodes];
   if (uri.startsWith("https://www.mediafire.com"))
     return [Downloader.Mediafire];
+  if (
+    uri.startsWith("https://buzzheavier.com") ||
+    uri.startsWith("https://bzzhr.co") ||
+    uri.startsWith("https://fuckingfast.net")
+  ) {
+    return [Downloader.Buzzheavier];
+  }
+  if (uri.startsWith("https://fuckingfast.co")) {
+    return [Downloader.FuckingFast];
+  }
 
   if (realDebridHosts.some((host) => uri.startsWith(host)))
     return [Downloader.RealDebrid];

From 37f085e2c0e0d5d400c8f09b76993695b81e3316 Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Fri, 26 Dec 2025 01:13:36 +0300
Subject: [PATCH 35/72] .

---
 .../events/torrenting/start-game-download.ts  |   4 +-
 .../services/download/download-manager.ts     | 153 ++++++------------
 2 files changed, 47 insertions(+), 110 deletions(-)

diff --git a/src/main/events/torrenting/start-game-download.ts b/src/main/events/torrenting/start-game-download.ts
index 940f3025..97de9f28 100644
--- a/src/main/events/torrenting/start-game-download.ts
+++ b/src/main/events/torrenting/start-game-download.ts
@@ -41,7 +41,6 @@ const startGameDownload = async (
   const game = await gamesSublevel.get(gameKey);
   const gameAssets = await gamesShopAssetsSublevel.get(gameKey);
 
-  /* Delete any previous download */
   await downloadsSublevel.del(gameKey);
 
   if (game) {
@@ -82,6 +81,7 @@ const startGameDownload = async (
     queued: true,
     extracting: false,
     automaticallyExtract,
+    extractionProgress: null,
   };
 
   try {
@@ -166,4 +166,4 @@ const startGameDownload = async (
   }
 };
 
-registerEvent("startGameDownload", startGameDownload);
+registerEvent("startGameDownload", startGameDownload);
\ No newline at end of file
diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index ce06e5e4..8cd16487 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -30,29 +30,21 @@ export class DownloadManager {
   private static downloadingGameId: string | null = null;
 
   private static extractFilename(url: string, originalUrl?: string): string | undefined {
-    if (originalUrl && originalUrl.includes('#')) {
+    if (originalUrl?.includes('#')) {
       const hashPart = originalUrl.split('#')[1];
-      if (hashPart && !hashPart.startsWith('http')) {
-        return hashPart;
-      }
+      if (hashPart && !hashPart.startsWith('http')) return hashPart;
     }
 
     if (url.includes('#')) {
       const hashPart = url.split('#')[1];
-      if (hashPart && !hashPart.startsWith('http')) {
-        return hashPart;
-      }
+      if (hashPart && !hashPart.startsWith('http')) return hashPart;
     }
 
     try {
       const urlObj = new URL(url);
-      const pathname = urlObj.pathname;
-      const filename = pathname.split('/').pop();
-      if (filename && filename.length > 0) {
-        return filename;
-      }
-    } catch {
-    }
+      const filename = urlObj.pathname.split('/').pop();
+      if (filename?.length) return filename;
+    } catch {}
 
     return undefined;
   }
@@ -61,6 +53,24 @@ export class DownloadManager {
     return filename.replace(/[<>:"/\\|?*]/g, '_');
   }
 
+  private static createDownloadPayload(directUrl: string, originalUrl: string, downloadId: string, savePath: string) {
+    const filename = this.extractFilename(directUrl, originalUrl);
+    const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
+    
+    if (sanitizedFilename) {
+      logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
+    }
+
+    return {
+      action: "start" as const,
+      game_id: downloadId,
+      url: directUrl,
+      save_path: savePath,
+      out: sanitizedFilename,
+      allow_multiple_connections: true,
+    };
+  }
+
   public static async startRPC(
     download?: Download,
     downloadsToSeed?: Download[]
@@ -86,9 +96,7 @@ export class DownloadManager {
   }
 
   private static async getDownloadStatus() {
-    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>(
-      "/status"
-    );
+    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>("/status");
     if (response.data === null || !this.downloadingGameId) return null;
     const downloadId = this.downloadingGameId;
 
@@ -104,8 +112,7 @@ export class DownloadManager {
         status,
       } = response.data;
 
-      const isDownloadingMetadata =
-        status === LibtorrentStatus.DownloadingMetadata;
+      const isDownloadingMetadata = status === LibtorrentStatus.DownloadingMetadata;
       const isCheckingFiles = status === LibtorrentStatus.CheckingFiles;
 
       const download = await downloadsSublevel.get(downloadId);
@@ -154,21 +161,14 @@ export class DownloadManager {
 
       const userPreferences = await db.get<string, UserPreferences | null>(
         levelKeys.userPreferences,
-        {
-          valueEncoding: "json",
-        }
+        { valueEncoding: "json" }
       );
 
       if (WindowManager.mainWindow && download) {
         WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
         WindowManager.mainWindow.webContents.send(
           "on-download-progress",
-          JSON.parse(
-            JSON.stringify({
-              ...status,
-              game,
-            })
-          )
+          JSON.parse(JSON.stringify({ ...status, game }))
         );
       }
 
@@ -177,10 +177,7 @@ export class DownloadManager {
       if (progress === 1 && download) {
         publishDownloadCompleteNotification(game);
 
-        if (
-          userPreferences?.seedAfterDownloadComplete &&
-          download.downloader === Downloader.Torrent
-        ) {
+        if (userPreferences?.seedAfterDownloadComplete && download.downloader === Downloader.Torrent) {
           await downloadsSublevel.put(gameId, {
             ...download,
             status: "seeding",
@@ -201,38 +198,25 @@ export class DownloadManager {
         }
 
         if (shouldExtract) {
-          const gameFilesManager = new GameFilesManager(
-            game.shop,
-            game.objectId
-          );
+          const gameFilesManager = new GameFilesManager(game.shop, game.objectId);
 
-          if (
-            FILE_EXTENSIONS_TO_EXTRACT.some((ext) =>
-              download.folderName?.endsWith(ext)
-            )
-          ) {
+          if (FILE_EXTENSIONS_TO_EXTRACT.some((ext) => download.folderName?.endsWith(ext))) {
             gameFilesManager.extractDownloadedFile();
           } else {
             gameFilesManager
-              .extractFilesInDirectory(
-                path.join(download.downloadPath, download.folderName!)
-              )
-              .then(() => {
-                gameFilesManager.setExtractionComplete();
-              });
+              .extractFilesInDirectory(path.join(download.downloadPath, download.folderName!))
+              .then(() => gameFilesManager.setExtractionComplete());
           }
         }
 
         const downloads = await downloadsSublevel
           .values()
           .all()
-          .then((games) => {
-            return sortBy(
-              games.filter((game) => game.status === "paused" && game.queued),
-              "timestamp",
-              "DESC"
-            );
-          });
+          .then((games) => sortBy(
+            games.filter((game) => game.status === "paused" && game.queued),
+            "timestamp",
+            "DESC"
+          ));
 
         const [nextItemOnQueue] = downloads;
 
@@ -259,9 +243,7 @@ export class DownloadManager {
 
       if (!download) return;
 
-      const totalSize = await getDirSize(
-        path.join(download.downloadPath, status.folderName)
-      );
+      const totalSize = await getDirSize(path.join(download.downloadPath, status.folderName));
 
       if (totalSize < status.fileSize) {
         await this.cancelDownload(status.gameId);
@@ -282,10 +264,7 @@ export class DownloadManager {
 
   static async pauseDownload(downloadKey = this.downloadingGameId) {
     await PythonRPC.rpc
-      .post("/action", {
-        action: "pause",
-        game_id: downloadKey,
-      } as PauseDownloadPayload)
+      .post("/action", { action: "pause", game_id: downloadKey } as PauseDownloadPayload)
       .catch(() => {});
 
     if (downloadKey === this.downloadingGameId) {
@@ -300,13 +279,8 @@ export class DownloadManager {
 
   static async cancelDownload(downloadKey = this.downloadingGameId) {
     await PythonRPC.rpc
-      .post("/action", {
-        action: "cancel",
-        game_id: downloadKey,
-      })
-      .catch((err) => {
-        logger.error("Failed to cancel game download", err);
-      });
+      .post("/action", { action: "cancel", game_id: downloadKey })
+      .catch((err) => logger.error("Failed to cancel game download", err));
 
     if (downloadKey === this.downloadingGameId) {
       WindowManager.mainWindow?.setProgressBar(-1);
@@ -339,7 +313,6 @@ export class DownloadManager {
         const id = download.uri.split("/").pop();
         const token = await GofileApi.authorize();
         const downloadLink = await GofileApi.getDownloadLink(id!);
-
         await GofileApi.checkDownloadUrl(downloadLink);
 
         return {
@@ -386,22 +359,7 @@ export class DownloadManager {
         try {
           const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] Buzzheavier direct URL obtained`);
-
-          const filename = this.extractFilename(directUrl, download.uri);
-          const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
-          
-          if (sanitizedFilename) {
-            logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
-          }
-
-          return {
-            action: "start",
-            game_id: downloadId,
-            url: directUrl,
-            save_path: download.downloadPath,
-            out: sanitizedFilename,
-            allow_multiple_connections: true,
-          };
+          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
         } catch (error) {
           logger.error(`[DownloadManager] Error processing Buzzheavier download:`, error);
           throw error;
@@ -412,22 +370,7 @@ export class DownloadManager {
         try {
           const directUrl = await FuckingFastApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] FuckingFast direct URL obtained`);
-
-          const filename = this.extractFilename(directUrl, download.uri);
-          const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
-          
-          if (sanitizedFilename) {
-            logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
-          }
-
-          return {
-            action: "start",
-            game_id: downloadId,
-            url: directUrl,
-            save_path: download.downloadPath,
-            out: sanitizedFilename,
-            allow_multiple_connections: true,
-          };
+          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
         } catch (error) {
           logger.error(`[DownloadManager] Error processing FuckingFast download:`, error);
           throw error;
@@ -435,7 +378,6 @@ export class DownloadManager {
       }
       case Downloader.Mediafire: {
         const downloadUrl = await MediafireApi.getDownloadUrl(download.uri);
-
         return {
           action: "start",
           game_id: downloadId,
@@ -452,7 +394,6 @@ export class DownloadManager {
         };
       case Downloader.RealDebrid: {
         const downloadUrl = await RealDebridClient.getDownloadUrl(download.uri);
-
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnRealDebrid);
 
         return {
@@ -465,7 +406,6 @@ export class DownloadManager {
       }
       case Downloader.TorBox: {
         const { name, url } = await TorBoxClient.getDownloadInfo(download.uri);
-
         if (!url) return;
         return {
           action: "start",
@@ -477,10 +417,7 @@ export class DownloadManager {
         };
       }
       case Downloader.Hydra: {
-        const downloadUrl = await HydraDebridClient.getDownloadUrl(
-          download.uri
-        );
-
+        const downloadUrl = await HydraDebridClient.getDownloadUrl(download.uri);
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
 
         return {

From 067f7a00bef41e8ede399de88b58161a76c985f9 Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Fri, 26 Dec 2025 01:19:04 +0300
Subject: [PATCH 36/72] .

---
 src/main/events/torrenting/start-game-download.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/events/torrenting/start-game-download.ts b/src/main/events/torrenting/start-game-download.ts
index 97de9f28..7e57dff2 100644
--- a/src/main/events/torrenting/start-game-download.ts
+++ b/src/main/events/torrenting/start-game-download.ts
@@ -81,7 +81,7 @@ const startGameDownload = async (
     queued: true,
     extracting: false,
     automaticallyExtract,
-    extractionProgress: null,
+    extractionProgress: 0,
   };
 
   try {

From 7f0dc5eee46bd8fddb4dfe13fc39063790a2af13 Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Fri, 26 Dec 2025 01:25:56 +0300
Subject: [PATCH 37/72] .

---
 src/main/services/download/download-manager.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index 8cd16487..68890a66 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -44,7 +44,9 @@ export class DownloadManager {
       const urlObj = new URL(url);
       const filename = urlObj.pathname.split('/').pop();
       if (filename?.length) return filename;
-    } catch {}
+    } catch {
+      // Invalid URL
+    }
 
     return undefined;
   }

From 358f41b4ba33e1755ecac968f9f606775f431e04 Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Fri, 26 Dec 2025 01:34:09 +0300
Subject: [PATCH 38/72] .

---
 src/main/events/torrenting/start-game-download.ts | 2 +-
 src/main/services/download/download-manager.ts    | 2 +-
 src/main/services/hosters/buzzheavier.ts          | 2 +-
 src/main/services/hosters/fuckingfast.ts          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/events/torrenting/start-game-download.ts b/src/main/events/torrenting/start-game-download.ts
index 7e57dff2..e44ba936 100644
--- a/src/main/events/torrenting/start-game-download.ts
+++ b/src/main/events/torrenting/start-game-download.ts
@@ -166,4 +166,4 @@ const startGameDownload = async (
   }
 };
 
-registerEvent("startGameDownload", startGameDownload);
\ No newline at end of file
+registerEvent("startGameDownload", startGameDownload);
diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index 68890a66..bc9ddf1d 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -438,4 +438,4 @@ export class DownloadManager {
     await PythonRPC.rpc.post("/action", payload);
     this.downloadingGameId = levelKeys.game(download.shop, download.objectId);
   }
-}
\ No newline at end of file
+}
diff --git a/src/main/services/hosters/buzzheavier.ts b/src/main/services/hosters/buzzheavier.ts
index 7f8b7733..819c8f25 100644
--- a/src/main/services/hosters/buzzheavier.ts
+++ b/src/main/services/hosters/buzzheavier.ts
@@ -79,4 +79,4 @@ export class BuzzheavierApi {
   ): Promise<string> {
     return extractHosterFilename(url, directUrl);
   }
-}
\ No newline at end of file
+}
diff --git a/src/main/services/hosters/fuckingfast.ts b/src/main/services/hosters/fuckingfast.ts
index c9001d9a..00d0ff58 100644
--- a/src/main/services/hosters/fuckingfast.ts
+++ b/src/main/services/hosters/fuckingfast.ts
@@ -126,4 +126,4 @@ export class FuckingFastApi {
   ): Promise<string> {
     return extractHosterFilename(url, directUrl);
   }
-}
\ No newline at end of file
+}

From 0b4d31e482d8ee41762e2b3bef06a6dde6a5ff87 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 26 Dec 2025 23:37:35 +0200
Subject: [PATCH 39/72] refactor: update notification item components to use
 button elements for better accessibility

---
 .../notifications/local-notification-item.tsx      | 14 ++++----------
 .../src/pages/notifications/notification-item.tsx  | 12 +++---------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/pages/notifications/local-notification-item.tsx b/src/renderer/src/pages/notifications/local-notification-item.tsx
index 1003f9d5..30380965 100644
--- a/src/renderer/src/pages/notifications/local-notification-item.tsx
+++ b/src/renderer/src/pages/notifications/local-notification-item.tsx
@@ -25,7 +25,7 @@ export function LocalNotificationItem({
   notification,
   onDismiss,
   onMarkAsRead,
-}: LocalNotificationItemProps) {
+}: Readonly<LocalNotificationItemProps>) {
   const { t } = useTranslation("notifications_page");
   const { formatDistance } = useDate();
   const navigate = useNavigate();
@@ -64,18 +64,12 @@ export function LocalNotificationItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
       className={cn("notification-item", {
         "notification-item--unread": !notification.isRead,
       })}
       onClick={handleClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          handleClick();
-        }
-      }}
-      role="button"
-      tabIndex={0}
     >
       <div className="notification-item__picture">
         {notification.pictureUrl ? (
@@ -104,6 +98,6 @@ export function LocalNotificationItem({
       >
         <XIcon size={16} />
       </button>
-    </div>
+    </button>
   );
 }
diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
index 976ab631..b250ffe8 100644
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -172,20 +172,14 @@ export function NotificationItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
       className={cn("notification-item", {
         "notification-item--unread":
           !notification.isRead ||
           notification.type === "FRIEND_REQUEST_RECEIVED",
       })}
       onClick={handleClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          handleClick();
-        }
-      }}
-      role="button"
-      tabIndex={0}
     >
       <div
         className={cn("notification-item__picture", {
@@ -229,6 +223,6 @@ export function NotificationItem({
           <XIcon size={16} />
         </button>
       )}
-    </div>
+    </button>
   );
 }

From 263d0be4e4196e12aefa9726ea4058896cc850c2 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 26 Dec 2025 23:38:01 +0200
Subject: [PATCH 40/72] refactor: improve code formatting and logging
 consistency in download manager and buzzheavier services

---
 .../services/download/download-manager.ts     | 118 +++++++++++++-----
 src/main/services/hosters/buzzheavier.ts      |   8 +-
 2 files changed, 92 insertions(+), 34 deletions(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index bc9ddf1d..b6a21ca3 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -29,20 +29,23 @@ import { BuzzheavierApi, FuckingFastApi } from "@main/services/hosters";
 export class DownloadManager {
   private static downloadingGameId: string | null = null;
 
-  private static extractFilename(url: string, originalUrl?: string): string | undefined {
-    if (originalUrl?.includes('#')) {
-      const hashPart = originalUrl.split('#')[1];
-      if (hashPart && !hashPart.startsWith('http')) return hashPart;
+  private static extractFilename(
+    url: string,
+    originalUrl?: string
+  ): string | undefined {
+    if (originalUrl?.includes("#")) {
+      const hashPart = originalUrl.split("#")[1];
+      if (hashPart && !hashPart.startsWith("http")) return hashPart;
     }
 
-    if (url.includes('#')) {
-      const hashPart = url.split('#')[1];
-      if (hashPart && !hashPart.startsWith('http')) return hashPart;
+    if (url.includes("#")) {
+      const hashPart = url.split("#")[1];
+      if (hashPart && !hashPart.startsWith("http")) return hashPart;
     }
 
     try {
       const urlObj = new URL(url);
-      const filename = urlObj.pathname.split('/').pop();
+      const filename = urlObj.pathname.split("/").pop();
       if (filename?.length) return filename;
     } catch {
       // Invalid URL
@@ -52,13 +55,20 @@ export class DownloadManager {
   }
 
   private static sanitizeFilename(filename: string): string {
-    return filename.replace(/[<>:"/\\|?*]/g, '_');
+    return filename.replace(/[<>:"/\\|?*]/g, "_");
   }
 
-  private static createDownloadPayload(directUrl: string, originalUrl: string, downloadId: string, savePath: string) {
+  private static createDownloadPayload(
+    directUrl: string,
+    originalUrl: string,
+    downloadId: string,
+    savePath: string
+  ) {
     const filename = this.extractFilename(directUrl, originalUrl);
-    const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
-    
+    const sanitizedFilename = filename
+      ? this.sanitizeFilename(filename)
+      : undefined;
+
     if (sanitizedFilename) {
       logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
     }
@@ -98,7 +108,9 @@ export class DownloadManager {
   }
 
   private static async getDownloadStatus() {
-    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>("/status");
+    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>(
+      "/status"
+    );
     if (response.data === null || !this.downloadingGameId) return null;
     const downloadId = this.downloadingGameId;
 
@@ -114,7 +126,8 @@ export class DownloadManager {
         status,
       } = response.data;
 
-      const isDownloadingMetadata = status === LibtorrentStatus.DownloadingMetadata;
+      const isDownloadingMetadata =
+        status === LibtorrentStatus.DownloadingMetadata;
       const isCheckingFiles = status === LibtorrentStatus.CheckingFiles;
 
       const download = await downloadsSublevel.get(downloadId);
@@ -179,7 +192,10 @@ export class DownloadManager {
       if (progress === 1 && download) {
         publishDownloadCompleteNotification(game);
 
-        if (userPreferences?.seedAfterDownloadComplete && download.downloader === Downloader.Torrent) {
+        if (
+          userPreferences?.seedAfterDownloadComplete &&
+          download.downloader === Downloader.Torrent
+        ) {
           await downloadsSublevel.put(gameId, {
             ...download,
             status: "seeding",
@@ -200,13 +216,22 @@ export class DownloadManager {
         }
 
         if (shouldExtract) {
-          const gameFilesManager = new GameFilesManager(game.shop, game.objectId);
+          const gameFilesManager = new GameFilesManager(
+            game.shop,
+            game.objectId
+          );
 
-          if (FILE_EXTENSIONS_TO_EXTRACT.some((ext) => download.folderName?.endsWith(ext))) {
+          if (
+            FILE_EXTENSIONS_TO_EXTRACT.some((ext) =>
+              download.folderName?.endsWith(ext)
+            )
+          ) {
             gameFilesManager.extractDownloadedFile();
           } else {
             gameFilesManager
-              .extractFilesInDirectory(path.join(download.downloadPath, download.folderName!))
+              .extractFilesInDirectory(
+                path.join(download.downloadPath, download.folderName!)
+              )
               .then(() => gameFilesManager.setExtractionComplete());
           }
         }
@@ -214,11 +239,13 @@ export class DownloadManager {
         const downloads = await downloadsSublevel
           .values()
           .all()
-          .then((games) => sortBy(
-            games.filter((game) => game.status === "paused" && game.queued),
-            "timestamp",
-            "DESC"
-          ));
+          .then((games) =>
+            sortBy(
+              games.filter((game) => game.status === "paused" && game.queued),
+              "timestamp",
+              "DESC"
+            )
+          );
 
         const [nextItemOnQueue] = downloads;
 
@@ -245,7 +272,9 @@ export class DownloadManager {
 
       if (!download) return;
 
-      const totalSize = await getDirSize(path.join(download.downloadPath, status.folderName));
+      const totalSize = await getDirSize(
+        path.join(download.downloadPath, status.folderName)
+      );
 
       if (totalSize < status.fileSize) {
         await this.cancelDownload(status.gameId);
@@ -266,7 +295,10 @@ export class DownloadManager {
 
   static async pauseDownload(downloadKey = this.downloadingGameId) {
     await PythonRPC.rpc
-      .post("/action", { action: "pause", game_id: downloadKey } as PauseDownloadPayload)
+      .post("/action", {
+        action: "pause",
+        game_id: downloadKey,
+      } as PauseDownloadPayload)
       .catch(() => {});
 
     if (downloadKey === this.downloadingGameId) {
@@ -357,24 +389,44 @@ export class DownloadManager {
         };
       }
       case Downloader.Buzzheavier: {
-        logger.log(`[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`);
+        logger.log(
+          `[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`
+        );
         try {
           const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] Buzzheavier direct URL obtained`);
-          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
+          return this.createDownloadPayload(
+            directUrl,
+            download.uri,
+            downloadId,
+            download.downloadPath
+          );
         } catch (error) {
-          logger.error(`[DownloadManager] Error processing Buzzheavier download:`, error);
+          logger.error(
+            `[DownloadManager] Error processing Buzzheavier download:`,
+            error
+          );
           throw error;
         }
       }
       case Downloader.FuckingFast: {
-        logger.log(`[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`);
+        logger.log(
+          `[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`
+        );
         try {
           const directUrl = await FuckingFastApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] FuckingFast direct URL obtained`);
-          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
+          return this.createDownloadPayload(
+            directUrl,
+            download.uri,
+            downloadId,
+            download.downloadPath
+          );
         } catch (error) {
-          logger.error(`[DownloadManager] Error processing FuckingFast download:`, error);
+          logger.error(
+            `[DownloadManager] Error processing FuckingFast download:`,
+            error
+          );
           throw error;
         }
       }
@@ -419,7 +471,9 @@ export class DownloadManager {
         };
       }
       case Downloader.Hydra: {
-        const downloadUrl = await HydraDebridClient.getDownloadUrl(download.uri);
+        const downloadUrl = await HydraDebridClient.getDownloadUrl(
+          download.uri
+        );
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
 
         return {
diff --git a/src/main/services/hosters/buzzheavier.ts b/src/main/services/hosters/buzzheavier.ts
index 819c8f25..9ef2d830 100644
--- a/src/main/services/hosters/buzzheavier.ts
+++ b/src/main/services/hosters/buzzheavier.ts
@@ -21,7 +21,9 @@ export class BuzzheavierApi {
   private static async getBuzzheavierDirectLink(url: string): Promise<string> {
     try {
       const baseUrl = url.split("#")[0];
-      logger.log(`[Buzzheavier] Starting download link extraction for: ${baseUrl}`);
+      logger.log(
+        `[Buzzheavier] Starting download link extraction for: ${baseUrl}`
+      );
 
       await axios.get(baseUrl, {
         headers: { "User-Agent": HOSTER_USER_AGENT },
@@ -46,7 +48,9 @@ export class BuzzheavierApi {
       const hxRedirect = headResponse.headers["hx-redirect"];
       logger.log(`[Buzzheavier] Received hx-redirect header: ${hxRedirect}`);
       if (!hxRedirect) {
-        logger.error(`[Buzzheavier] No hx-redirect header found. Status: ${headResponse.status}`);
+        logger.error(
+          `[Buzzheavier] No hx-redirect header found. Status: ${headResponse.status}`
+        );
         throw new Error(
           "Could not extract download link. File may be deleted or is a directory."
         );

From e335e05628bec11d22fdaa13c927dbcd26eaebb9 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 27 Dec 2025 00:32:15 +0200
Subject: [PATCH 41/72] style: update notification item styles for improved
 layout and alignment

---
 src/renderer/src/pages/notifications/notification-item.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/src/pages/notifications/notification-item.scss b/src/renderer/src/pages/notifications/notification-item.scss
index e64063f0..3cdaf3d9 100644
--- a/src/renderer/src/pages/notifications/notification-item.scss
+++ b/src/renderer/src/pages/notifications/notification-item.scss
@@ -11,6 +11,8 @@
   transition: all ease 0.2s;
   position: relative;
   opacity: 0.4;
+  width: 100%;
+  text-align: left;
 
   &:hover {
     background-color: rgba(255, 255, 255, 0.03);

From 798f88618e257886d41b3b849f1beb96ec778a27 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 27 Dec 2025 00:42:23 +0200
Subject: [PATCH 42/72] style: enhance notification item styles with color
 adjustments and SVG inheritance

---
 src/renderer/src/pages/notifications/notification-item.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/renderer/src/pages/notifications/notification-item.scss b/src/renderer/src/pages/notifications/notification-item.scss
index 3cdaf3d9..4e97237d 100644
--- a/src/renderer/src/pages/notifications/notification-item.scss
+++ b/src/renderer/src/pages/notifications/notification-item.scss
@@ -42,12 +42,17 @@
     align-items: center;
     justify-content: center;
     background-color: globals.$background-color;
+    color: #fff;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+
+    svg {
+      color: inherit;
+    }
   }
 
   &__badge-picture {

From a01e1b1709d09461923d90c0c50c1fea86eaf981 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 27 Dec 2025 00:51:26 +0200
Subject: [PATCH 43/72] style: formatting

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index d360dde4..79dc4b6e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 <div align="center">
 
 [<img src="https://raw.githubusercontent.com/hydralauncher/hydra/refs/heads/main/resources/icon.png" width="144"/>](https://help.hydralauncher.gg)
+
   <h1 align="center">Hydra Launcher</h1>
 
   <p align="center">

From 240a75c1d023e10f88c7fc21c4f83e530f68495f Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Sat, 27 Dec 2025 03:02:35 +0300
Subject: [PATCH 44/72] Buzzheavier fix

---
 .../services/download/download-manager.ts     | 133 ++++++------------
 1 file changed, 45 insertions(+), 88 deletions(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index b6a21ca3..98518c68 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -29,24 +29,30 @@ import { BuzzheavierApi, FuckingFastApi } from "@main/services/hosters";
 export class DownloadManager {
   private static downloadingGameId: string | null = null;
 
-  private static extractFilename(
-    url: string,
-    originalUrl?: string
-  ): string | undefined {
-    if (originalUrl?.includes("#")) {
-      const hashPart = originalUrl.split("#")[1];
-      if (hashPart && !hashPart.startsWith("http")) return hashPart;
+  private static extractFilename(url: string, originalUrl?: string): string | undefined {
+    if (originalUrl?.includes('#')) {
+      const hashPart = originalUrl.split('#')[1];
+      if (hashPart && !hashPart.startsWith('http') && hashPart.includes('.')) {
+        return hashPart;
+      }
     }
 
-    if (url.includes("#")) {
-      const hashPart = url.split("#")[1];
-      if (hashPart && !hashPart.startsWith("http")) return hashPart;
+    if (url.includes('#')) {
+      const hashPart = url.split('#')[1];
+      if (hashPart && !hashPart.startsWith('http') && hashPart.includes('.')) {
+        return hashPart;
+      }
     }
 
     try {
       const urlObj = new URL(url);
-      const filename = urlObj.pathname.split("/").pop();
-      if (filename?.length) return filename;
+      const pathname = urlObj.pathname;
+      const pathParts = pathname.split('/');
+      const filename = pathParts[pathParts.length - 1];
+      
+      if (filename && filename.includes('.') && filename.length > 0) {
+        return decodeURIComponent(filename);
+      }
     } catch {
       // Invalid URL
     }
@@ -55,22 +61,17 @@ export class DownloadManager {
   }
 
   private static sanitizeFilename(filename: string): string {
-    return filename.replace(/[<>:"/\\|?*]/g, "_");
+    return filename.replace(/[<>:"/\\|?*]/g, '_');
   }
 
-  private static createDownloadPayload(
-    directUrl: string,
-    originalUrl: string,
-    downloadId: string,
-    savePath: string
-  ) {
-    const filename = this.extractFilename(directUrl, originalUrl);
-    const sanitizedFilename = filename
-      ? this.sanitizeFilename(filename)
-      : undefined;
-
+  private static createDownloadPayload(directUrl: string, originalUrl: string, downloadId: string, savePath: string) {
+    const filename = this.extractFilename(originalUrl, directUrl) || this.extractFilename(directUrl);
+    const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
+    
     if (sanitizedFilename) {
       logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
+    } else {
+      logger.log(`[DownloadManager] No filename extracted, aria2 will use default`);
     }
 
     return {
@@ -108,9 +109,7 @@ export class DownloadManager {
   }
 
   private static async getDownloadStatus() {
-    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>(
-      "/status"
-    );
+    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>("/status");
     if (response.data === null || !this.downloadingGameId) return null;
     const downloadId = this.downloadingGameId;
 
@@ -126,8 +125,7 @@ export class DownloadManager {
         status,
       } = response.data;
 
-      const isDownloadingMetadata =
-        status === LibtorrentStatus.DownloadingMetadata;
+      const isDownloadingMetadata = status === LibtorrentStatus.DownloadingMetadata;
       const isCheckingFiles = status === LibtorrentStatus.CheckingFiles;
 
       const download = await downloadsSublevel.get(downloadId);
@@ -192,10 +190,7 @@ export class DownloadManager {
       if (progress === 1 && download) {
         publishDownloadCompleteNotification(game);
 
-        if (
-          userPreferences?.seedAfterDownloadComplete &&
-          download.downloader === Downloader.Torrent
-        ) {
+        if (userPreferences?.seedAfterDownloadComplete && download.downloader === Downloader.Torrent) {
           await downloadsSublevel.put(gameId, {
             ...download,
             status: "seeding",
@@ -216,22 +211,13 @@ export class DownloadManager {
         }
 
         if (shouldExtract) {
-          const gameFilesManager = new GameFilesManager(
-            game.shop,
-            game.objectId
-          );
+          const gameFilesManager = new GameFilesManager(game.shop, game.objectId);
 
-          if (
-            FILE_EXTENSIONS_TO_EXTRACT.some((ext) =>
-              download.folderName?.endsWith(ext)
-            )
-          ) {
+          if (FILE_EXTENSIONS_TO_EXTRACT.some((ext) => download.folderName?.endsWith(ext))) {
             gameFilesManager.extractDownloadedFile();
           } else {
             gameFilesManager
-              .extractFilesInDirectory(
-                path.join(download.downloadPath, download.folderName!)
-              )
+              .extractFilesInDirectory(path.join(download.downloadPath, download.folderName!))
               .then(() => gameFilesManager.setExtractionComplete());
           }
         }
@@ -239,13 +225,11 @@ export class DownloadManager {
         const downloads = await downloadsSublevel
           .values()
           .all()
-          .then((games) =>
-            sortBy(
-              games.filter((game) => game.status === "paused" && game.queued),
-              "timestamp",
-              "DESC"
-            )
-          );
+          .then((games) => sortBy(
+            games.filter((game) => game.status === "paused" && game.queued),
+            "timestamp",
+            "DESC"
+          ));
 
         const [nextItemOnQueue] = downloads;
 
@@ -272,9 +256,7 @@ export class DownloadManager {
 
       if (!download) return;
 
-      const totalSize = await getDirSize(
-        path.join(download.downloadPath, status.folderName)
-      );
+      const totalSize = await getDirSize(path.join(download.downloadPath, status.folderName));
 
       if (totalSize < status.fileSize) {
         await this.cancelDownload(status.gameId);
@@ -295,10 +277,7 @@ export class DownloadManager {
 
   static async pauseDownload(downloadKey = this.downloadingGameId) {
     await PythonRPC.rpc
-      .post("/action", {
-        action: "pause",
-        game_id: downloadKey,
-      } as PauseDownloadPayload)
+      .post("/action", { action: "pause", game_id: downloadKey } as PauseDownloadPayload)
       .catch(() => {});
 
     if (downloadKey === this.downloadingGameId) {
@@ -389,44 +368,24 @@ export class DownloadManager {
         };
       }
       case Downloader.Buzzheavier: {
-        logger.log(
-          `[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`
-        );
+        logger.log(`[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`);
         try {
           const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] Buzzheavier direct URL obtained`);
-          return this.createDownloadPayload(
-            directUrl,
-            download.uri,
-            downloadId,
-            download.downloadPath
-          );
+          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
         } catch (error) {
-          logger.error(
-            `[DownloadManager] Error processing Buzzheavier download:`,
-            error
-          );
+          logger.error(`[DownloadManager] Error processing Buzzheavier download:`, error);
           throw error;
         }
       }
       case Downloader.FuckingFast: {
-        logger.log(
-          `[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`
-        );
+        logger.log(`[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`);
         try {
           const directUrl = await FuckingFastApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] FuckingFast direct URL obtained`);
-          return this.createDownloadPayload(
-            directUrl,
-            download.uri,
-            downloadId,
-            download.downloadPath
-          );
+          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
         } catch (error) {
-          logger.error(
-            `[DownloadManager] Error processing FuckingFast download:`,
-            error
-          );
+          logger.error(`[DownloadManager] Error processing FuckingFast download:`, error);
           throw error;
         }
       }
@@ -471,9 +430,7 @@ export class DownloadManager {
         };
       }
       case Downloader.Hydra: {
-        const downloadUrl = await HydraDebridClient.getDownloadUrl(
-          download.uri
-        );
+        const downloadUrl = await HydraDebridClient.getDownloadUrl(download.uri);
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
 
         return {

From aff9e13bca02f031f191481f8a3ef609a59c93d2 Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Sat, 27 Dec 2025 03:17:42 +0300
Subject: [PATCH 45/72] Sonar fix

---
 src/main/services/download/download-manager.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index 98518c68..de5b8030 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -50,7 +50,7 @@ export class DownloadManager {
       const pathParts = pathname.split('/');
       const filename = pathParts[pathParts.length - 1];
       
-      if (filename && filename.includes('.') && filename.length > 0) {
+      if (filename?.includes('.') && filename.length > 0) {
         return decodeURIComponent(filename);
       }
     } catch {
@@ -61,7 +61,7 @@ export class DownloadManager {
   }
 
   private static sanitizeFilename(filename: string): string {
-    return filename.replace(/[<>:"/\\|?*]/g, '_');
+    return filename.replaceAll(/[<>:"/\\|?*]/g, '_');
   }
 
   private static createDownloadPayload(directUrl: string, originalUrl: string, downloadId: string, savePath: string) {
@@ -449,4 +449,4 @@ export class DownloadManager {
     await PythonRPC.rpc.post("/action", payload);
     this.downloadingGameId = levelKeys.game(download.shop, download.objectId);
   }
-}
+}
\ No newline at end of file

From 991aa05760af180068ac6ec37b7a9aa94b61905a Mon Sep 17 00:00:00 2001
From: Wkeynhk <wkeynhk@gmail.com>
Date: Sat, 27 Dec 2025 03:23:36 +0300
Subject: [PATCH 46/72] Sonar fix2

---
 src/main/services/download/download-manager.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index de5b8030..3cd30a7b 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -217,7 +217,7 @@ export class DownloadManager {
             gameFilesManager.extractDownloadedFile();
           } else {
             gameFilesManager
-              .extractFilesInDirectory(path.join(download.downloadPath, download.folderName!))
+              .extractFilesInDirectory(path.join(download.downloadPath, download.folderName))
               .then(() => gameFilesManager.setExtractionComplete());
           }
         }
@@ -449,4 +449,4 @@ export class DownloadManager {
     await PythonRPC.rpc.post("/action", payload);
     this.downloadingGameId = levelKeys.game(download.shop, download.objectId);
   }
-}
\ No newline at end of file
+}

From 91adb97013f29d1cf056e509ec802b2403fc4327 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 27 Dec 2025 02:50:27 +0200
Subject: [PATCH 47/72] refactor: improve code formatting and consistency in
 DownloadManager

---
 .../services/download/download-manager.ts     | 132 +++++++++++++-----
 1 file changed, 95 insertions(+), 37 deletions(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index 3cd30a7b..c36bf8ce 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -29,17 +29,20 @@ import { BuzzheavierApi, FuckingFastApi } from "@main/services/hosters";
 export class DownloadManager {
   private static downloadingGameId: string | null = null;
 
-  private static extractFilename(url: string, originalUrl?: string): string | undefined {
-    if (originalUrl?.includes('#')) {
-      const hashPart = originalUrl.split('#')[1];
-      if (hashPart && !hashPart.startsWith('http') && hashPart.includes('.')) {
+  private static extractFilename(
+    url: string,
+    originalUrl?: string
+  ): string | undefined {
+    if (originalUrl?.includes("#")) {
+      const hashPart = originalUrl.split("#")[1];
+      if (hashPart && !hashPart.startsWith("http") && hashPart.includes(".")) {
         return hashPart;
       }
     }
 
-    if (url.includes('#')) {
-      const hashPart = url.split('#')[1];
-      if (hashPart && !hashPart.startsWith('http') && hashPart.includes('.')) {
+    if (url.includes("#")) {
+      const hashPart = url.split("#")[1];
+      if (hashPart && !hashPart.startsWith("http") && hashPart.includes(".")) {
         return hashPart;
       }
     }
@@ -47,10 +50,10 @@ export class DownloadManager {
     try {
       const urlObj = new URL(url);
       const pathname = urlObj.pathname;
-      const pathParts = pathname.split('/');
+      const pathParts = pathname.split("/");
       const filename = pathParts[pathParts.length - 1];
-      
-      if (filename?.includes('.') && filename.length > 0) {
+
+      if (filename?.includes(".") && filename.length > 0) {
         return decodeURIComponent(filename);
       }
     } catch {
@@ -61,17 +64,28 @@ export class DownloadManager {
   }
 
   private static sanitizeFilename(filename: string): string {
-    return filename.replaceAll(/[<>:"/\\|?*]/g, '_');
+    return filename.replaceAll(/[<>:"/\\|?*]/g, "_");
   }
 
-  private static createDownloadPayload(directUrl: string, originalUrl: string, downloadId: string, savePath: string) {
-    const filename = this.extractFilename(originalUrl, directUrl) || this.extractFilename(directUrl);
-    const sanitizedFilename = filename ? this.sanitizeFilename(filename) : undefined;
-    
+  private static createDownloadPayload(
+    directUrl: string,
+    originalUrl: string,
+    downloadId: string,
+    savePath: string
+  ) {
+    const filename =
+      this.extractFilename(originalUrl, directUrl) ||
+      this.extractFilename(directUrl);
+    const sanitizedFilename = filename
+      ? this.sanitizeFilename(filename)
+      : undefined;
+
     if (sanitizedFilename) {
       logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
     } else {
-      logger.log(`[DownloadManager] No filename extracted, aria2 will use default`);
+      logger.log(
+        `[DownloadManager] No filename extracted, aria2 will use default`
+      );
     }
 
     return {
@@ -109,7 +123,9 @@ export class DownloadManager {
   }
 
   private static async getDownloadStatus() {
-    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>("/status");
+    const response = await PythonRPC.rpc.get<LibtorrentPayload | null>(
+      "/status"
+    );
     if (response.data === null || !this.downloadingGameId) return null;
     const downloadId = this.downloadingGameId;
 
@@ -125,7 +141,8 @@ export class DownloadManager {
         status,
       } = response.data;
 
-      const isDownloadingMetadata = status === LibtorrentStatus.DownloadingMetadata;
+      const isDownloadingMetadata =
+        status === LibtorrentStatus.DownloadingMetadata;
       const isCheckingFiles = status === LibtorrentStatus.CheckingFiles;
 
       const download = await downloadsSublevel.get(downloadId);
@@ -190,7 +207,10 @@ export class DownloadManager {
       if (progress === 1 && download) {
         publishDownloadCompleteNotification(game);
 
-        if (userPreferences?.seedAfterDownloadComplete && download.downloader === Downloader.Torrent) {
+        if (
+          userPreferences?.seedAfterDownloadComplete &&
+          download.downloader === Downloader.Torrent
+        ) {
           await downloadsSublevel.put(gameId, {
             ...download,
             status: "seeding",
@@ -211,13 +231,22 @@ export class DownloadManager {
         }
 
         if (shouldExtract) {
-          const gameFilesManager = new GameFilesManager(game.shop, game.objectId);
+          const gameFilesManager = new GameFilesManager(
+            game.shop,
+            game.objectId
+          );
 
-          if (FILE_EXTENSIONS_TO_EXTRACT.some((ext) => download.folderName?.endsWith(ext))) {
+          if (
+            FILE_EXTENSIONS_TO_EXTRACT.some((ext) =>
+              download.folderName?.endsWith(ext)
+            )
+          ) {
             gameFilesManager.extractDownloadedFile();
-          } else {
+          } else if (download.folderName) {
             gameFilesManager
-              .extractFilesInDirectory(path.join(download.downloadPath, download.folderName))
+              .extractFilesInDirectory(
+                path.join(download.downloadPath, download.folderName)
+              )
               .then(() => gameFilesManager.setExtractionComplete());
           }
         }
@@ -225,11 +254,13 @@ export class DownloadManager {
         const downloads = await downloadsSublevel
           .values()
           .all()
-          .then((games) => sortBy(
-            games.filter((game) => game.status === "paused" && game.queued),
-            "timestamp",
-            "DESC"
-          ));
+          .then((games) =>
+            sortBy(
+              games.filter((game) => game.status === "paused" && game.queued),
+              "timestamp",
+              "DESC"
+            )
+          );
 
         const [nextItemOnQueue] = downloads;
 
@@ -256,7 +287,9 @@ export class DownloadManager {
 
       if (!download) return;
 
-      const totalSize = await getDirSize(path.join(download.downloadPath, status.folderName));
+      const totalSize = await getDirSize(
+        path.join(download.downloadPath, status.folderName)
+      );
 
       if (totalSize < status.fileSize) {
         await this.cancelDownload(status.gameId);
@@ -277,7 +310,10 @@ export class DownloadManager {
 
   static async pauseDownload(downloadKey = this.downloadingGameId) {
     await PythonRPC.rpc
-      .post("/action", { action: "pause", game_id: downloadKey } as PauseDownloadPayload)
+      .post("/action", {
+        action: "pause",
+        game_id: downloadKey,
+      } as PauseDownloadPayload)
       .catch(() => {});
 
     if (downloadKey === this.downloadingGameId) {
@@ -368,24 +404,44 @@ export class DownloadManager {
         };
       }
       case Downloader.Buzzheavier: {
-        logger.log(`[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`);
+        logger.log(
+          `[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`
+        );
         try {
           const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] Buzzheavier direct URL obtained`);
-          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
+          return this.createDownloadPayload(
+            directUrl,
+            download.uri,
+            downloadId,
+            download.downloadPath
+          );
         } catch (error) {
-          logger.error(`[DownloadManager] Error processing Buzzheavier download:`, error);
+          logger.error(
+            `[DownloadManager] Error processing Buzzheavier download:`,
+            error
+          );
           throw error;
         }
       }
       case Downloader.FuckingFast: {
-        logger.log(`[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`);
+        logger.log(
+          `[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`
+        );
         try {
           const directUrl = await FuckingFastApi.getDirectLink(download.uri);
           logger.log(`[DownloadManager] FuckingFast direct URL obtained`);
-          return this.createDownloadPayload(directUrl, download.uri, downloadId, download.downloadPath);
+          return this.createDownloadPayload(
+            directUrl,
+            download.uri,
+            downloadId,
+            download.downloadPath
+          );
         } catch (error) {
-          logger.error(`[DownloadManager] Error processing FuckingFast download:`, error);
+          logger.error(
+            `[DownloadManager] Error processing FuckingFast download:`,
+            error
+          );
           throw error;
         }
       }
@@ -430,7 +486,9 @@ export class DownloadManager {
         };
       }
       case Downloader.Hydra: {
-        const downloadUrl = await HydraDebridClient.getDownloadUrl(download.uri);
+        const downloadUrl = await HydraDebridClient.getDownloadUrl(
+          download.uri
+        );
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
 
         return {

From dc31ac0831ae851185c46e4095189bb5199ff2e9 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 30 Dec 2025 00:25:45 +0200
Subject: [PATCH 48/72] fix: library cards not using placeholder and icon as a
 game cover

---
 .../src/pages/library/library-game-card.scss  | 20 +++++++++++
 .../src/pages/library/library-game-card.tsx   | 35 ++++++++++++++-----
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/pages/library/library-game-card.scss b/src/renderer/src/pages/library/library-game-card.scss
index ab9a9f2a..a0ef7e29 100644
--- a/src/renderer/src/pages/library/library-game-card.scss
+++ b/src/renderer/src/pages/library/library-game-card.scss
@@ -221,6 +221,26 @@
     left: 0;
     z-index: 0;
   }
+
+  &__cover-placeholder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08) 0%,
+      rgba(255, 255, 255, 0.04) 50%,
+      rgba(255, 255, 255, 0.08) 100%
+    );
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
+  }
 }
 
 @keyframes pulse {
diff --git a/src/renderer/src/pages/library/library-game-card.tsx b/src/renderer/src/pages/library/library-game-card.tsx
index a91176cb..59235e9b 100644
--- a/src/renderer/src/pages/library/library-game-card.tsx
+++ b/src/renderer/src/pages/library/library-game-card.tsx
@@ -1,7 +1,12 @@
 import { LibraryGame } from "@types";
 import { useGameCard } from "@renderer/hooks";
-import { memo } from "react";
-import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
+import { memo, useState, useEffect } from "react";
+import {
+  ClockIcon,
+  AlertFillIcon,
+  TrophyIcon,
+  ImageIcon,
+} from "@primer/octicons-react";
 import "./library-game-card.scss";
 
 interface LibraryGameCardProps {
@@ -26,7 +31,6 @@ export const LibraryGameCard = memo(function LibraryGameCard({
     useGameCard(game, onContextMenu);
 
   const coverImage = (
-    game.customIconUrl ??
     game.coverImageUrl ??
     game.libraryImageUrl ??
     game.libraryHeroImageUrl ??
@@ -34,6 +38,12 @@ export const LibraryGameCard = memo(function LibraryGameCard({
     ""
   ).replaceAll("\\", "/");
 
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    setImageError(false);
+  }, [coverImage]);
+
   return (
     <button
       type="button"
@@ -98,12 +108,19 @@ export const LibraryGameCard = memo(function LibraryGameCard({
         )}
       </div>
 
-      <img
-        src={coverImage ?? undefined}
-        alt={game.title}
-        className="library-game-card__game-image"
-        loading="lazy"
-      />
+      {imageError || !coverImage ? (
+        <div className="library-game-card__cover-placeholder">
+          <ImageIcon size={48} />
+        </div>
+      ) : (
+        <img
+          src={coverImage}
+          alt={game.title}
+          className="library-game-card__game-image"
+          loading="lazy"
+          onError={() => setImageError(true)}
+        />
+      )}
     </button>
   );
 });

From af884d3772de9acd2cc766de4b77ebee43236a0c Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 30 Dec 2025 14:09:04 +0200
Subject: [PATCH 49/72] refactor: simplify cover image assignment in
 LibraryGameCard

---
 src/renderer/src/pages/library/library-game-card.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/renderer/src/pages/library/library-game-card.tsx b/src/renderer/src/pages/library/library-game-card.tsx
index 59235e9b..50f74e7a 100644
--- a/src/renderer/src/pages/library/library-game-card.tsx
+++ b/src/renderer/src/pages/library/library-game-card.tsx
@@ -30,13 +30,7 @@ export const LibraryGameCard = memo(function LibraryGameCard({
   const { formatPlayTime, handleCardClick, handleContextMenuClick } =
     useGameCard(game, onContextMenu);
 
-  const coverImage = (
-    game.coverImageUrl ??
-    game.libraryImageUrl ??
-    game.libraryHeroImageUrl ??
-    game.iconUrl ??
-    ""
-  ).replaceAll("\\", "/");
+  const coverImage = game.coverImageUrl?.replaceAll("\\", "/") ?? "";
 
   const [imageError, setImageError] = useState(false);
 

From 92d87c5d332a8e70add3e168c527fcf83dc349de Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Wed, 31 Dec 2025 01:59:25 +0200
Subject: [PATCH 50/72] refactor: remove unnecessary useEffect in
 LibraryGameCard

---
 src/renderer/src/pages/library/library-game-card.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/renderer/src/pages/library/library-game-card.tsx b/src/renderer/src/pages/library/library-game-card.tsx
index 50f74e7a..101236ae 100644
--- a/src/renderer/src/pages/library/library-game-card.tsx
+++ b/src/renderer/src/pages/library/library-game-card.tsx
@@ -1,6 +1,6 @@
 import { LibraryGame } from "@types";
 import { useGameCard } from "@renderer/hooks";
-import { memo, useState, useEffect } from "react";
+import { memo, useState } from "react";
 import {
   ClockIcon,
   AlertFillIcon,
@@ -34,10 +34,6 @@ export const LibraryGameCard = memo(function LibraryGameCard({
 
   const [imageError, setImageError] = useState(false);
 
-  useEffect(() => {
-    setImageError(false);
-  }, [coverImage]);
-
   return (
     <button
       type="button"

From 8fa33119d6bb6380c2fc886bb658165beb3479a9 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 2 Jan 2026 23:20:08 +0200
Subject: [PATCH 51/72] feat: add support for VikingFile and display if link is
 available

---
 .env.example                                  |  1 +
 python_rpc/http_downloader.py                 | 13 ++-
 .../services/download/download-manager.ts     | 24 +++++
 src/main/services/hosters/index.ts            |  1 +
 src/main/services/hosters/vikingfile.ts       | 51 ++++++++++
 src/main/vite-env.d.ts                        |  1 +
 src/renderer/src/constants.ts                 |  1 +
 .../modals/download-settings-modal.scss       | 66 ++++++++++---
 .../modals/download-settings-modal.tsx        | 98 +++++++++++++++----
 src/shared/constants.ts                       |  1 +
 src/shared/index.ts                           |  3 +
 src/types/index.ts                            |  1 +
 12 files changed, 226 insertions(+), 35 deletions(-)
 create mode 100644 src/main/services/hosters/vikingfile.ts

diff --git a/.env.example b/.env.example
index 051d8aa3..e13fc1bd 100644
--- a/.env.example
+++ b/.env.example
@@ -1,6 +1,7 @@
 MAIN_VITE_API_URL=
 MAIN_VITE_AUTH_URL=
 MAIN_VITE_WS_URL=
+MAIN_VITE_NIMBUS_API_URL=
 RENDERER_VITE_REAL_DEBRID_REFERRAL_ID=
 RENDERER_VITE_TORBOX_REFERRAL_CODE=
 MAIN_VITE_LAUNCHER_SUBDOMAIN=
diff --git a/python_rpc/http_downloader.py b/python_rpc/http_downloader.py
index 71e4b57e..0ddf5f8e 100644
--- a/python_rpc/http_downloader.py
+++ b/python_rpc/http_downloader.py
@@ -11,12 +11,19 @@ class HttpDownloader:
             )
         )
 
-    def start_download(self, url: str, save_path: str, header: str, out: str = None):
+    def start_download(self, url: str, save_path: str, header, out: str = None):
         if self.download:
             self.aria2.resume([self.download])
         else:
-            downloads = self.aria2.add(url, options={"header": header, "dir": save_path, "out": out})
-            
+            options = {"dir": save_path}
+            if header:
+                if isinstance(header, list):
+                    options["header"] = header
+                else:
+                    options["header"] = header
+            if out:
+                options["out"] = out
+            downloads = self.aria2.add(url, options=options)
             self.download = downloads[0]
     
     def pause_download(self):
diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index c36bf8ce..7fcdcd02 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -8,6 +8,7 @@ import {
   DatanodesApi,
   MediafireApi,
   PixelDrainApi,
+  VikingFileApi,
 } from "../hosters";
 import { PythonRPC } from "../python-rpc";
 import {
@@ -499,6 +500,29 @@ export class DownloadManager {
           allow_multiple_connections: true,
         };
       }
+      case Downloader.VikingFile: {
+        logger.log(
+          `[DownloadManager] Processing VikingFile download for URI: ${download.uri}`
+        );
+        try {
+          const downloadUrl = await VikingFileApi.getDownloadUrl(download.uri);
+          logger.log(`[DownloadManager] VikingFile direct URL obtained`);
+          return {
+            action: "start",
+            game_id: downloadId,
+            url: downloadUrl,
+            save_path: download.downloadPath,
+            header:
+              "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
+          };
+        } catch (error) {
+          logger.error(
+            `[DownloadManager] Error processing VikingFile download:`,
+            error
+          );
+          throw error;
+        }
+      }
     }
   }
 
diff --git a/src/main/services/hosters/index.ts b/src/main/services/hosters/index.ts
index 5f918811..e22fb680 100644
--- a/src/main/services/hosters/index.ts
+++ b/src/main/services/hosters/index.ts
@@ -5,3 +5,4 @@ export * from "./mediafire";
 export * from "./pixeldrain";
 export * from "./buzzheavier";
 export * from "./fuckingfast";
+export * from "./vikingfile";
diff --git a/src/main/services/hosters/vikingfile.ts b/src/main/services/hosters/vikingfile.ts
new file mode 100644
index 00000000..dae971c4
--- /dev/null
+++ b/src/main/services/hosters/vikingfile.ts
@@ -0,0 +1,51 @@
+import axios from "axios";
+
+interface UnlockResponse {
+  link: string;
+  hoster: string;
+}
+
+export class VikingFileApi {
+  private static readonly browserHeaders = {
+    "User-Agent":
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
+    Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+    Referer: "https://vikingfile.com/",
+  };
+
+  public static async getDownloadUrl(uri: string): Promise<string> {
+    const unlockResponse = await axios.post<UnlockResponse>(
+      `${import.meta.env.MAIN_VITE_NIMBUS_API_URL}/hosters/unlock`,
+      { url: uri }
+    );
+
+    if (!unlockResponse.data.link) {
+      throw new Error("Failed to unlock VikingFile URL");
+    }
+
+    const redirectUrl = unlockResponse.data.link;
+
+    // Follow the redirect to get the final Cloudflare storage URL
+    try {
+      const redirectResponse = await axios.head(redirectUrl, {
+        headers: this.browserHeaders,
+        maxRedirects: 0,
+        validateStatus: (status) =>
+          status === 301 || status === 302 || status === 200,
+      });
+
+      if (
+        redirectResponse.headers.location ||
+        redirectResponse.status === 301 ||
+        redirectResponse.status === 302
+      ) {
+        return redirectResponse.headers.location || redirectUrl;
+      }
+
+      return redirectUrl;
+    } catch (error) {
+      // Fallback to the redirect URL if following redirect fails
+      return redirectUrl;
+    }
+  }
+}
diff --git a/src/main/vite-env.d.ts b/src/main/vite-env.d.ts
index 7b0ed536..888d8329 100644
--- a/src/main/vite-env.d.ts
+++ b/src/main/vite-env.d.ts
@@ -7,6 +7,7 @@ interface ImportMetaEnv {
   readonly MAIN_VITE_CHECKOUT_URL: string;
   readonly MAIN_VITE_EXTERNAL_RESOURCES_URL: string;
   readonly MAIN_VITE_WS_URL: string;
+  readonly MAIN_VITE_NIMBUS_API_URL: string;
   readonly MAIN_VITE_LAUNCHER_SUBDOMAIN: string;
   readonly ELECTRON_RENDERER_URL: string;
 }
diff --git a/src/renderer/src/constants.ts b/src/renderer/src/constants.ts
index 89de5503..153fd644 100644
--- a/src/renderer/src/constants.ts
+++ b/src/renderer/src/constants.ts
@@ -14,6 +14,7 @@ export const DOWNLOADER_NAME = {
   [Downloader.FuckingFast]: "FuckingFast",
   [Downloader.TorBox]: "TorBox",
   [Downloader.Hydra]: "Nimbus",
+  [Downloader.VikingFile]: "VikingFile",
 };
 
 export const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index 1b7c51e8..b2885cb3 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -19,23 +19,67 @@
     color: globals.$body-color;
   }
 
-  &__downloaders {
-    display: grid;
-    gap: globals.$spacing-unit;
-    grid-template-columns: repeat(2, 1fr);
+  &__downloaders-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid globals.$border-color;
+    border-radius: 4px;
+    padding: calc(globals.$spacing-unit / 2);
+    background-color: globals.$dark-background-color;
   }
 
-  &__downloader-option {
-    position: relative;
+  &__downloader-item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2);
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-color: transparent;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+    color: globals.$body-color;
+    font-size: 14px;
+    text-align: left;
 
-    &:only-child {
-      grid-column: 1 / -1;
+    &:hover:not(&--disabled) {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &--selected {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
   }
 
-  &__downloader-icon {
-    position: absolute;
-    left: calc(globals.$spacing-unit * 2);
+  &__downloader-name {
+    flex: 1;
+  }
+
+  &__availability-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    &--available {
+      background-color: #22c55e;
+      box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
+    }
+
+    &--unavailable {
+      background-color: #ef4444;
+      box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
+    }
   }
 
   &__path-error {
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index a6c32b6e..f488d23a 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -7,8 +7,13 @@ import {
   Modal,
   TextField,
 } from "@renderer/components";
-import { CheckCircleFillIcon, DownloadIcon } from "@primer/octicons-react";
-import { Downloader, formatBytes, getDownloadersForUris } from "@shared";
+import { DownloadIcon } from "@primer/octicons-react";
+import {
+  Downloader,
+  formatBytes,
+  getDownloadersForUri,
+  getDownloadersForUris,
+} from "@shared";
 import type { GameRepack } from "@types";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import { useAppSelector, useFeature, useToast } from "@renderer/hooks";
@@ -82,6 +87,41 @@ export function DownloadSettingsModal({
     return getDownloadersForUris(repack?.uris ?? []);
   }, [repack?.uris]);
 
+  const downloadOptions = useMemo(() => {
+    if (!repack) return [];
+
+    const unavailableUrisSet = new Set(repack.unavailableUris ?? []);
+
+    const downloaderMap = new Map<
+      Downloader,
+      { hasAvailable: boolean; hasUnavailable: boolean }
+    >();
+
+    for (const uri of repack.uris) {
+      const uriDownloaders = getDownloadersForUri(uri);
+      if (uriDownloaders.length > 0) {
+        const downloader = uriDownloaders[0];
+        const isAvailable = !unavailableUrisSet.has(uri);
+
+        const existing = downloaderMap.get(downloader);
+        if (existing) {
+          existing.hasAvailable = existing.hasAvailable || isAvailable;
+          existing.hasUnavailable = existing.hasUnavailable || !isAvailable;
+        } else {
+          downloaderMap.set(downloader, {
+            hasAvailable: isAvailable,
+            hasUnavailable: !isAvailable,
+          });
+        }
+      }
+    }
+
+    return Array.from(downloaderMap.entries()).map(([downloader, status]) => ({
+      downloader,
+      isAvailable: status.hasAvailable,
+    }));
+  }, [repack]);
+
   const getDefaultDownloader = useCallback(
     (availableDownloaders: Downloader[]) => {
       if (availableDownloaders.length === 0) return null;
@@ -186,31 +226,47 @@ export function DownloadSettingsModal({
         <div className="download-settings-modal__downloads-path-field">
           <span>{t("downloader")}</span>
 
-          <div className="download-settings-modal__downloaders">
-            {downloaders.map((downloader) => {
-              const shouldDisableButton =
-                (downloader === Downloader.RealDebrid &&
+          <div className="download-settings-modal__downloaders-list">
+            {downloadOptions.map((option) => {
+              const isUnavailable = !option.isAvailable;
+              const shouldDisableOption =
+                isUnavailable ||
+                (option.downloader === Downloader.RealDebrid &&
                   !userPreferences?.realDebridApiToken) ||
-                (downloader === Downloader.TorBox &&
+                (option.downloader === Downloader.TorBox &&
                   !userPreferences?.torBoxApiToken) ||
-                (downloader === Downloader.Hydra &&
+                (option.downloader === Downloader.Hydra &&
                   !isFeatureEnabled(Feature.Nimbus));
 
+              const isSelected = selectedDownloader === option.downloader;
+
               return (
-                <Button
-                  key={downloader}
-                  className="download-settings-modal__downloader-option"
-                  theme={
-                    selectedDownloader === downloader ? "primary" : "outline"
-                  }
-                  disabled={shouldDisableButton}
-                  onClick={() => setSelectedDownloader(downloader)}
+                <button
+                  type="button"
+                  key={option.downloader}
+                  className={`download-settings-modal__downloader-item ${
+                    isSelected
+                      ? "download-settings-modal__downloader-item--selected"
+                      : ""
+                  } ${
+                    shouldDisableOption
+                      ? "download-settings-modal__downloader-item--disabled"
+                      : ""
+                  }`}
+                  disabled={shouldDisableOption}
+                  onClick={() => setSelectedDownloader(option.downloader)}
                 >
-                  {selectedDownloader === downloader && (
-                    <CheckCircleFillIcon className="download-settings-modal__downloader-icon" />
-                  )}
-                  {DOWNLOADER_NAME[downloader]}
-                </Button>
+                  <span className="download-settings-modal__downloader-name">
+                    {DOWNLOADER_NAME[option.downloader]}
+                  </span>
+                  <span
+                    className={`download-settings-modal__availability-indicator ${
+                      option.isAvailable
+                        ? "download-settings-modal__availability-indicator--available"
+                        : "download-settings-modal__availability-indicator--unavailable"
+                    }`}
+                  />
+                </button>
               );
             })}
           </div>
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 6e900175..5c28a27e 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -10,6 +10,7 @@ export enum Downloader {
   Hydra,
   Buzzheavier,
   FuckingFast,
+  VikingFile,
 }
 
 export enum DownloadSourceStatus {
diff --git a/src/shared/index.ts b/src/shared/index.ts
index d54ef387..36996e1d 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -124,6 +124,9 @@ export const getDownloadersForUri = (uri: string) => {
   if (uri.startsWith("https://fuckingfast.co")) {
     return [Downloader.FuckingFast];
   }
+  if (uri.startsWith("https://vikingfile.com")) {
+    return [Downloader.VikingFile];
+  }
 
   if (realDebridHosts.some((host) => uri.startsWith(host)))
     return [Downloader.RealDebrid];
diff --git a/src/types/index.ts b/src/types/index.ts
index de792b05..2330c93b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -20,6 +20,7 @@ export interface GameRepack {
   title: string;
   fileSize: string | null;
   uris: string[];
+  unavailableUris: string[];
   uploadDate: string | null;
   downloadSourceId: string;
   downloadSourceName: string;

From d929fbaeaa703c627afe00e4b0108c87f219d9da Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 2 Jan 2026 23:23:08 +0200
Subject: [PATCH 52/72] refactor: simplify header assignment in HttpDownloader

---
 python_rpc/http_downloader.py | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/python_rpc/http_downloader.py b/python_rpc/http_downloader.py
index 0ddf5f8e..723f6d4b 100644
--- a/python_rpc/http_downloader.py
+++ b/python_rpc/http_downloader.py
@@ -17,10 +17,7 @@ class HttpDownloader:
         else:
             options = {"dir": save_path}
             if header:
-                if isinstance(header, list):
-                    options["header"] = header
-                else:
-                    options["header"] = header
+                options["header"] = header
             if out:
                 options["out"] = out
             downloads = self.aria2.add(url, options=options)

From 9a7ad148e3409c07c8bca050db2639ba4df2ce56 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 2 Jan 2026 23:24:20 +0200
Subject: [PATCH 53/72] fix: use logger for error handling in VikingFile.ts

---
 src/main/services/hosters/vikingfile.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/main/services/hosters/vikingfile.ts b/src/main/services/hosters/vikingfile.ts
index dae971c4..ae09bba2 100644
--- a/src/main/services/hosters/vikingfile.ts
+++ b/src/main/services/hosters/vikingfile.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import { logger } from "../logger";
 
 interface UnlockResponse {
   link: string;
@@ -44,7 +45,10 @@ export class VikingFileApi {
 
       return redirectUrl;
     } catch (error) {
-      // Fallback to the redirect URL if following redirect fails
+      logger.error(
+        `[VikingFile] Error following redirect, using redirect URL:`,
+        error
+      );
       return redirectUrl;
     }
   }

From c9729fb3ebfc9129f179dabcc3dc7bcd9c32570b Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 2 Jan 2026 23:59:21 +0200
Subject: [PATCH 54/72] chore: update build and release workflows to include
 MAIN_VITE_NIMBUS_API_URL

---
 .github/workflows/build.yml   | 2 ++
 .github/workflows/release.yml | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 5086d8e5..31354bc3 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -57,6 +57,7 @@ jobs:
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_STAGING_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_STAGING_CHECKOUT_URL }}
           MAIN_VITE_WS_URL: ${{ vars.MAIN_VITE_WS_STAGING_URL }}
+          MAIN_VITE_NIMBUS_API_URL: ${{ vars.MAIN_VITE_NIMBUS_API_URL }}
           RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
           MAIN_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -73,6 +74,7 @@ jobs:
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_STAGING_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_STAGING_CHECKOUT_URL }}
           MAIN_VITE_WS_URL: ${{ vars.MAIN_VITE_WS_STAGING_URL }}
+          MAIN_VITE_NIMBUS_API_URL: ${{ vars.MAIN_VITE_NIMBUS_API_URL }}
           RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
           MAIN_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index df01b358..45163c4b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -54,9 +54,10 @@ jobs:
           MAIN_VITE_API_URL: ${{ vars.MAIN_VITE_API_URL }}
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_CHECKOUT_URL }}
+          MAIN_VITE_WS_URL: ${{ vars.MAIN_VITE_WS_URL }}
+          MAIN_VITE_NIMBUS_API_URL: ${{ vars.MAIN_VITE_NIMBUS_API_URL }}
           RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
           MAIN_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
-          MAIN_VITE_WS_URL: ${{ vars.MAIN_VITE_WS_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           RENDERER_VITE_SENTRY_DSN: ${{ vars.SENTRY_DSN }}
@@ -71,9 +72,10 @@ jobs:
           MAIN_VITE_API_URL: ${{ vars.MAIN_VITE_API_URL }}
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_CHECKOUT_URL }}
+          MAIN_VITE_WS_URL: ${{ vars.MAIN_VITE_WS_URL }}
+          MAIN_VITE_NIMBUS_API_URL: ${{ vars.MAIN_VITE_NIMBUS_API_URL }}
           RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
           MAIN_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.EXTERNAL_RESOURCES_URL }}
-          MAIN_VITE_WS_URL: ${{ vars.MAIN_VITE_WS_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           RENDERER_VITE_SENTRY_DSN: ${{ vars.SENTRY_DSN }}

From 2bc026677583fd2d78a2b74cde965dc0b7fb7c7a Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 00:18:07 +0200
Subject: [PATCH 55/72] feat: add loading state to download button and enhance
 UI with spinner

---
 src/locales/en/translation.json                   |  1 +
 .../modals/download-settings-modal.scss           | 13 +++++++++++++
 .../modals/download-settings-modal.tsx            | 15 ++++++++++++---
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 07029def..c71eab4e 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -175,6 +175,7 @@
     "repacks_modal_description": "Choose the repack you want to download",
     "select_folder_hint": "To change the default folder, go to the <0>Settings</0>",
     "download_now": "Download now",
+    "loading": "Loading...",
     "no_shop_details": "Could not retrieve shop details.",
     "download_options": "Download options",
     "download_path": "Download path",
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index b2885cb3..4c33ebb4 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -93,4 +93,17 @@
   &__change-path-button {
     align-self: flex-end;
   }
+
+  &__loading-spinner {
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index f488d23a..71558e6d 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -7,7 +7,7 @@ import {
   Modal,
   TextField,
 } from "@renderer/components";
-import { DownloadIcon } from "@primer/octicons-react";
+import { DownloadIcon, SyncIcon } from "@primer/octicons-react";
 import {
   Downloader,
   formatBytes,
@@ -323,8 +323,17 @@ export function DownloadSettingsModal({
             !hasWritePermission
           }
         >
-          <DownloadIcon />
-          {t("download_now")}
+          {downloadStarting ? (
+            <>
+              <SyncIcon className="download-settings-modal__loading-spinner" />
+              {t("loading")}
+            </>
+          ) : (
+            <>
+              <DownloadIcon />
+              {t("download_now")}
+            </>
+          )}
         </Button>
       </div>
     </Modal>

From de483da51caf12cb0d0fc5a3b2fcbb81432db95e Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 01:08:25 +0200
Subject: [PATCH 56/72] fix: handle download not found exception in
 HttpDownloader and enforce IPv4 in HTTP agents

---
 python_rpc/http_downloader.py            |  7 ++++++-
 src/main/services/aria2.ts               |  1 +
 src/main/services/hosters/buzzheavier.ts | 14 ++++++++++++++
 src/main/services/hosters/vikingfile.ts  |  4 ++++
 src/main/services/python-rpc.ts          |  4 ++++
 5 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/python_rpc/http_downloader.py b/python_rpc/http_downloader.py
index 723f6d4b..40428bd7 100644
--- a/python_rpc/http_downloader.py
+++ b/python_rpc/http_downloader.py
@@ -1,4 +1,5 @@
 import aria2p
+from aria2p.client import ClientException as DownloadNotFound
 
 class HttpDownloader:
     def __init__(self):
@@ -36,7 +37,11 @@ class HttpDownloader:
         if self.download == None:
             return None
 
-        download = self.aria2.get_download(self.download.gid)
+        try:
+            download = self.aria2.get_download(self.download.gid)
+        except DownloadNotFound:
+            self.download = None
+            return None
 
         response = {
             'folderName': download.name,
diff --git a/src/main/services/aria2.ts b/src/main/services/aria2.ts
index f3f49018..438008b2 100644
--- a/src/main/services/aria2.ts
+++ b/src/main/services/aria2.ts
@@ -21,6 +21,7 @@ export class Aria2 {
         "--rpc-listen-all",
         "--file-allocation=none",
         "--allow-overwrite=true",
+        "--disable-ipv6",
       ],
       { stdio: "inherit", windowsHide: true }
     );
diff --git a/src/main/services/hosters/buzzheavier.ts b/src/main/services/hosters/buzzheavier.ts
index 9ef2d830..5aa209b4 100644
--- a/src/main/services/hosters/buzzheavier.ts
+++ b/src/main/services/hosters/buzzheavier.ts
@@ -1,4 +1,6 @@
 import axios from "axios";
+import http from "http";
+import https from "https";
 import {
   HOSTER_USER_AGENT,
   extractHosterFilename,
@@ -28,6 +30,12 @@ export class BuzzheavierApi {
       await axios.get(baseUrl, {
         headers: { "User-Agent": HOSTER_USER_AGENT },
         timeout: 30000,
+        httpAgent: new http.Agent({
+          family: 4, // Force IPv4
+        }),
+        httpsAgent: new https.Agent({
+          family: 4, // Force IPv4
+        }),
       });
 
       const downloadUrl = `${baseUrl}/download`;
@@ -43,6 +51,12 @@ export class BuzzheavierApi {
         validateStatus: (status) =>
           status === 200 || status === 204 || status === 301 || status === 302,
         timeout: 30000,
+        httpAgent: new http.Agent({
+          family: 4, // Force IPv4
+        }),
+        httpsAgent: new https.Agent({
+          family: 4, // Force IPv4
+        }),
       });
 
       const hxRedirect = headResponse.headers["hx-redirect"];
diff --git a/src/main/services/hosters/vikingfile.ts b/src/main/services/hosters/vikingfile.ts
index ae09bba2..5f97a767 100644
--- a/src/main/services/hosters/vikingfile.ts
+++ b/src/main/services/hosters/vikingfile.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import https from "https";
 import { logger } from "../logger";
 
 interface UnlockResponse {
@@ -33,6 +34,9 @@ export class VikingFileApi {
         maxRedirects: 0,
         validateStatus: (status) =>
           status === 301 || status === 302 || status === 200,
+        httpsAgent: new https.Agent({
+          family: 4, // Force IPv4
+        }),
       });
 
       if (
diff --git a/src/main/services/python-rpc.ts b/src/main/services/python-rpc.ts
index 2a1dce79..919f6e7e 100644
--- a/src/main/services/python-rpc.ts
+++ b/src/main/services/python-rpc.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import http from "http";
 
 import cp from "node:child_process";
 import fs from "node:fs";
@@ -31,6 +32,9 @@ export class PythonRPC {
   public static readonly RPC_PORT = "8084";
   public static readonly rpc = axios.create({
     baseURL: `http://localhost:${this.RPC_PORT}`,
+    httpAgent: new http.Agent({
+      family: 4, // Force IPv4
+    }),
   });
 
   private static pythonProcess: cp.ChildProcess | null = null;

From 765ec70dd0e2b6bcd1e4e38899e287c0974baf4d Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 01:40:21 +0200
Subject: [PATCH 57/72] refactor: streamline downloader logic in
 DownloadSettingsModal

---
 .../pages/game-details/modals/download-settings-modal.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index 71558e6d..0b8aff7d 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -99,10 +99,9 @@ export function DownloadSettingsModal({
 
     for (const uri of repack.uris) {
       const uriDownloaders = getDownloadersForUri(uri);
-      if (uriDownloaders.length > 0) {
-        const downloader = uriDownloaders[0];
-        const isAvailable = !unavailableUrisSet.has(uri);
+      const isAvailable = !unavailableUrisSet.has(uri);
 
+      for (const downloader of uriDownloaders) {
         const existing = downloaderMap.get(downloader);
         if (existing) {
           existing.hasAvailable = existing.hasAvailable || isAvailable;

From 4584783f44faa50c22863daec1ee733f2419571a Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 04:47:46 +0200
Subject: [PATCH 58/72] refactor: enhance download progress tracking in
 DownloadManager

---
 .../services/download/download-manager.ts     | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/main/services/download/download-manager.ts b/src/main/services/download/download-manager.ts
index 7fcdcd02..bc6746e2 100644
--- a/src/main/services/download/download-manager.ts
+++ b/src/main/services/download/download-manager.ts
@@ -151,14 +151,28 @@ export class DownloadManager {
       if (!isDownloadingMetadata && !isCheckingFiles) {
         if (!download) return null;
 
-        await downloadsSublevel.put(downloadId, {
+        const updatedDownload = {
           ...download,
           bytesDownloaded,
           fileSize,
           progress,
           folderName,
-          status: "active",
-        });
+          status: "active" as const,
+        };
+
+        await downloadsSublevel.put(downloadId, updatedDownload);
+
+        return {
+          numPeers,
+          numSeeds,
+          downloadSpeed,
+          timeRemaining: calculateETA(fileSize, bytesDownloaded, downloadSpeed),
+          isDownloadingMetadata,
+          isCheckingFiles,
+          progress,
+          gameId: downloadId,
+          download: updatedDownload,
+        } as DownloadProgress;
       }
 
       return {

From c1d7ea27f378d6a07d35388241de9d1bdf646ea4 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 19:37:47 +0200
Subject: [PATCH 59/72] feat: add unread filter option and enhance
 notifications UI

---
 src/locales/en/translation.json               |   1 +
 .../pages/notifications/notifications.scss    |  82 ++++-
 .../src/pages/notifications/notifications.tsx | 306 +++++++++++++-----
 3 files changed, 312 insertions(+), 77 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 07029def..c230b8b9 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -795,6 +795,7 @@
     "empty_description": "You're all caught up! Check back later for new updates.",
     "empty_filter_description": "No notifications match this filter.",
     "filter_all": "All",
+    "filter_unread": "Unread",
     "filter_friends": "Friends",
     "filter_badges": "Badges",
     "filter_upvotes": "Upvotes",
diff --git a/src/renderer/src/pages/notifications/notifications.scss b/src/renderer/src/pages/notifications/notifications.scss
index c8fa7c3f..20fbc343 100644
--- a/src/renderer/src/pages/notifications/notifications.scss
+++ b/src/renderer/src/pages/notifications/notifications.scss
@@ -8,6 +8,72 @@
   width: 100%;
   max-width: 800px;
   margin: 0 auto;
+  min-height: calc(100vh - 200px);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__filter-tabs {
+    display: flex;
+    gap: globals.$spacing-unit;
+    position: relative;
+    flex: 1;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__tab-wrapper {
+    position: relative;
+  }
+
+  &__tab {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    padding: calc(globals.$spacing-unit) calc(globals.$spacing-unit * 2);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.5);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    &--active {
+      color: white;
+    }
+  }
+
+  &__tab-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 20px;
+  }
+
+  &__tab-underline {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: white;
+  }
 
   &__actions {
     display: flex;
@@ -15,6 +81,12 @@
     justify-content: flex-end;
   }
 
+  &__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
   &__list {
     display: flex;
     flex-direction: column;
@@ -23,14 +95,22 @@
 
   &__empty {
     display: flex;
+    flex: 1;
     width: 100%;
-    height: 100%;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: globals.$spacing-unit;
   }
 
+  &__empty-filter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: calc(globals.$spacing-unit * 6);
+    color: globals.$body-color;
+  }
+
   &__icon-container {
     width: 60px;
     height: 60px;
diff --git a/src/renderer/src/pages/notifications/notifications.tsx b/src/renderer/src/pages/notifications/notifications.tsx
index f9bd0b46..f1c2d4de 100644
--- a/src/renderer/src/pages/notifications/notifications.tsx
+++ b/src/renderer/src/pages/notifications/notifications.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BellIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import { AnimatePresence, motion } from "framer-motion";
@@ -18,6 +18,11 @@ import type {
 } from "@types";
 import "./notifications.scss";
 
+type NotificationFilter = "all" | "unread";
+
+const STAGGER_DELAY_MS = 70;
+const EXIT_DURATION_MS = 250;
+
 export default function Notifications() {
   const { t, i18n } = useTranslation("notifications_page");
   const { showSuccessToast, showErrorToast } = useToast();
@@ -34,12 +39,14 @@ export default function Notifications() {
   >([]);
   const [badges, setBadges] = useState<Badge[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [clearingIds, setClearingIds] = useState<Set<string>>(new Set());
+  const [isClearing, setIsClearing] = useState(false);
+  const [filter, setFilter] = useState<NotificationFilter>("all");
   const [pagination, setPagination] = useState({
     total: 0,
     hasMore: false,
     skip: 0,
   });
+  const clearingTimeoutsRef = useRef<NodeJS.Timeout[]>([]);
 
   const fetchLocalNotifications = useCallback(async () => {
     try {
@@ -65,7 +72,11 @@ export default function Notifications() {
   }, [i18n.language]);
 
   const fetchApiNotifications = useCallback(
-    async (skip = 0, append = false) => {
+    async (
+      skip = 0,
+      append = false,
+      filterParam: NotificationFilter = "all"
+    ) => {
       if (!userDetails) return;
 
       try {
@@ -74,7 +85,7 @@ export default function Notifications() {
           await window.electron.hydraApi.get<NotificationsResponse>(
             "/profile/notifications",
             {
-              params: { filter: "all", take: 20, skip },
+              params: { filter: filterParam, take: 20, skip },
               needsAuth: true,
             }
           );
@@ -101,24 +112,24 @@ export default function Notifications() {
     [userDetails]
   );
 
-  const fetchAllNotifications = useCallback(async () => {
-    setIsLoading(true);
-    await Promise.all([
-      fetchLocalNotifications(),
-      fetchBadges(),
-      userDetails ? fetchApiNotifications(0, false) : Promise.resolve(),
-    ]);
-    setIsLoading(false);
-  }, [
-    fetchLocalNotifications,
-    fetchBadges,
-    fetchApiNotifications,
-    userDetails,
-  ]);
+  const fetchAllNotifications = useCallback(
+    async (filterParam: NotificationFilter = "all") => {
+      setIsLoading(true);
+      await Promise.all([
+        fetchLocalNotifications(),
+        fetchBadges(),
+        userDetails
+          ? fetchApiNotifications(0, false, filterParam)
+          : Promise.resolve(),
+      ]);
+      setIsLoading(false);
+    },
+    [fetchLocalNotifications, fetchBadges, fetchApiNotifications, userDetails]
+  );
 
   useEffect(() => {
-    fetchAllNotifications();
-  }, [fetchAllNotifications]);
+    fetchAllNotifications(filter);
+  }, [fetchAllNotifications, filter]);
 
   useEffect(() => {
     const unsubscribe = window.electron.onLocalNotificationCreated(
@@ -130,6 +141,13 @@ export default function Notifications() {
     return () => unsubscribe();
   }, []);
 
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      clearingTimeoutsRef.current.forEach(clearTimeout);
+    };
+  }, []);
+
   const mergedNotifications = useMemo<MergedNotification[]>(() => {
     const sortByDate = (a: MergedNotification, b: MergedNotification) =>
       new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
@@ -144,23 +162,28 @@ export default function Notifications() {
       .filter((n) => n.priority !== 1)
       .map((n) => ({ ...n, source: "api" as const }));
 
-    const localWithSource: MergedNotification[] = localNotifications.map(
-      (n) => ({
+    // Filter local notifications based on current filter
+    const filteredLocalNotifications =
+      filter === "unread"
+        ? localNotifications.filter((n) => !n.isRead)
+        : localNotifications;
+
+    const localWithSource: MergedNotification[] =
+      filteredLocalNotifications.map((n) => ({
         ...n,
         source: "local" as const,
-      })
-    );
+      }));
 
     const lowPriority = [...lowPriorityApi, ...localWithSource].sort(
       sortByDate
     );
 
     return [...highPriority, ...lowPriority];
-  }, [apiNotifications, localNotifications]);
+  }, [apiNotifications, localNotifications, filter]);
 
   const displayedNotifications = useMemo(() => {
-    return mergedNotifications.filter((n) => !clearingIds.has(n.id));
-  }, [mergedNotifications, clearingIds]);
+    return mergedNotifications;
+  }, [mergedNotifications]);
 
   const notifyCountChange = useCallback(() => {
     window.dispatchEvent(new CustomEvent("notificationsChanged"));
@@ -251,42 +274,86 @@ export default function Notifications() {
     [showErrorToast, t, notifyCountChange]
   );
 
+  const removeNotificationFromState = useCallback(
+    (notification: MergedNotification) => {
+      if (notification.source === "api") {
+        setApiNotifications((prev) =>
+          prev.filter((n) => n.id !== notification.id)
+        );
+      } else {
+        setLocalNotifications((prev) =>
+          prev.filter((n) => n.id !== notification.id)
+        );
+      }
+    },
+    []
+  );
+
+  const removeNotificationWithDelay = useCallback(
+    (notification: MergedNotification, delayMs: number): Promise<void> => {
+      return new Promise<void>((resolve) => {
+        const timeout = setTimeout(() => {
+          removeNotificationFromState(notification);
+          resolve();
+        }, delayMs);
+
+        clearingTimeoutsRef.current.push(timeout);
+      });
+    },
+    [removeNotificationFromState]
+  );
+
   const handleClearAll = useCallback(async () => {
+    if (isClearing) return;
+
     try {
-      // Mark all as clearing for animation
-      const allIds = new Set([
-        ...apiNotifications.map((n) => n.id),
-        ...localNotifications.map((n) => n.id),
-      ]);
-      setClearingIds(allIds);
+      setIsClearing(true);
 
-      // Wait for exit animation
-      await new Promise((resolve) => setTimeout(resolve, 300));
+      // Clear any existing timeouts
+      clearingTimeoutsRef.current.forEach(clearTimeout);
+      clearingTimeoutsRef.current = [];
 
-      // Clear all API notifications
-      if (userDetails && apiNotifications.length > 0) {
+      // Snapshot current notifications for staggered removal
+      const notificationsToRemove = [...displayedNotifications];
+      const totalNotifications = notificationsToRemove.length;
+
+      if (totalNotifications === 0) {
+        setIsClearing(false);
+        return;
+      }
+
+      // Remove items one by one with staggered delays for visual effect
+      const removalPromises = notificationsToRemove.map((notification, index) =>
+        removeNotificationWithDelay(notification, index * STAGGER_DELAY_MS)
+      );
+
+      // Wait for all items to be removed from state
+      await Promise.all(removalPromises);
+
+      // Wait for the last exit animation to complete
+      await new Promise((resolve) => setTimeout(resolve, EXIT_DURATION_MS));
+
+      // Perform actual backend deletions (state is already cleared by staggered removal)
+      if (userDetails) {
         await window.electron.hydraApi.delete(`/profile/notifications/all`, {
           needsAuth: true,
         });
-        setApiNotifications([]);
       }
-
-      // Clear all local notifications
       await window.electron.clearAllLocalNotifications();
-      setLocalNotifications([]);
-
-      setClearingIds(new Set());
       setPagination({ total: 0, hasMore: false, skip: 0 });
       notifyCountChange();
       showSuccessToast(t("cleared_all"));
     } catch (error) {
       logger.error("Failed to clear all notifications", error);
-      setClearingIds(new Set());
       showErrorToast(t("failed_to_clear"));
+    } finally {
+      setIsClearing(false);
+      clearingTimeoutsRef.current = [];
     }
   }, [
-    apiNotifications,
-    localNotifications,
+    displayedNotifications,
+    isClearing,
+    removeNotificationWithDelay,
     userDetails,
     showSuccessToast,
     showErrorToast,
@@ -296,9 +363,19 @@ export default function Notifications() {
 
   const handleLoadMore = useCallback(() => {
     if (pagination.hasMore && !isLoading) {
-      fetchApiNotifications(pagination.skip, true);
+      fetchApiNotifications(pagination.skip, true, filter);
     }
-  }, [pagination, isLoading, fetchApiNotifications]);
+  }, [pagination, isLoading, fetchApiNotifications, filter]);
+
+  const handleFilterChange = useCallback(
+    (newFilter: NotificationFilter) => {
+      if (newFilter !== filter) {
+        setFilter(newFilter);
+        setPagination({ total: 0, hasMore: false, skip: 0 });
+      }
+    },
+    [filter]
+  );
 
   const handleAcceptFriendRequest = useCallback(() => {
     showSuccessToast(t("friend_request_accepted"));
@@ -317,10 +394,13 @@ export default function Notifications() {
     return (
       <motion.div
         key={key}
-        layout
         initial={{ opacity: 0, x: -20 }}
         animate={{ opacity: 1, x: 0 }}
-        exit={{ opacity: 0, x: 100, transition: { duration: 0.2 } }}
+        exit={{
+          opacity: 0,
+          x: 80,
+          transition: { duration: EXIT_DURATION_MS / 1000 },
+        }}
         transition={{ duration: 0.2 }}
       >
         {notification.source === "local" ? (
@@ -343,8 +423,57 @@ export default function Notifications() {
     );
   };
 
+  const unreadCount = useMemo(() => {
+    const apiUnread = apiNotifications.filter((n) => !n.isRead).length;
+    const localUnread = localNotifications.filter((n) => !n.isRead).length;
+    return apiUnread + localUnread;
+  }, [apiNotifications, localNotifications]);
+
+  const renderFilterTabs = () => (
+    <div className="notifications__filter-tabs">
+      <div className="notifications__tab-wrapper">
+        <button
+          type="button"
+          className={`notifications__tab ${filter === "all" ? "notifications__tab--active" : ""}`}
+          onClick={() => handleFilterChange("all")}
+        >
+          {t("filter_all")}
+        </button>
+        {filter === "all" && (
+          <motion.div
+            className="notifications__tab-underline"
+            layoutId="notifications-tab-underline"
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+          />
+        )}
+      </div>
+      <div className="notifications__tab-wrapper">
+        <button
+          type="button"
+          className={`notifications__tab ${filter === "unread" ? "notifications__tab--active" : ""}`}
+          onClick={() => handleFilterChange("unread")}
+        >
+          {t("filter_unread")}
+          {unreadCount > 0 && (
+            <span className="notifications__tab-badge">{unreadCount}</span>
+          )}
+        </button>
+        {filter === "unread" && (
+          <motion.div
+            className="notifications__tab-underline"
+            layoutId="notifications-tab-underline"
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+
+  const hasNoNotifications = mergedNotifications.length === 0;
+  const shouldDisableActions = isClearing || hasNoNotifications;
+
   const renderContent = () => {
-    if (isLoading && mergedNotifications.length === 0) {
+    if (isLoading && hasNoNotifications) {
       return (
         <div className="notifications__loading">
           <span>{t("loading")}</span>
@@ -352,36 +481,61 @@ export default function Notifications() {
       );
     }
 
-    if (mergedNotifications.length === 0) {
-      return (
-        <div className="notifications__empty">
-          <div className="notifications__icon-container">
-            <BellIcon size={24} />
-          </div>
-          <h2>{t("empty_title")}</h2>
-          <p>{t("empty_description")}</p>
-        </div>
-      );
-    }
-
     return (
       <div className="notifications">
-        <div className="notifications__actions">
-          <Button theme="outline" onClick={handleMarkAllAsRead}>
-            {t("mark_all_as_read")}
-          </Button>
-          <Button theme="danger" onClick={handleClearAll}>
-            {t("clear_all")}
-          </Button>
+        <div className="notifications__header">
+          {renderFilterTabs()}
+          <div className="notifications__actions">
+            <Button
+              theme="outline"
+              onClick={handleMarkAllAsRead}
+              disabled={shouldDisableActions}
+            >
+              {t("mark_all_as_read")}
+            </Button>
+            <Button
+              theme="danger"
+              onClick={handleClearAll}
+              disabled={shouldDisableActions}
+            >
+              {t("clear_all")}
+            </Button>
+          </div>
         </div>
 
-        <div className="notifications__list">
-          <AnimatePresence mode="popLayout">
-            {displayedNotifications.map(renderNotification)}
-          </AnimatePresence>
-        </div>
+        {/* Keep AnimatePresence mounted during clearing to preserve exit animations */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={filter}
+            className="notifications__content-wrapper"
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 10 }}
+            transition={{ duration: 0.2 }}
+          >
+            {hasNoNotifications && !isClearing ? (
+              <div className="notifications__empty">
+                <div className="notifications__icon-container">
+                  <BellIcon size={24} />
+                </div>
+                <h2>{t("empty_title")}</h2>
+                <p>
+                  {filter === "unread"
+                    ? t("empty_filter_description")
+                    : t("empty_description")}
+                </p>
+              </div>
+            ) : (
+              <div className="notifications__list">
+                <AnimatePresence>
+                  {displayedNotifications.map(renderNotification)}
+                </AnimatePresence>
+              </div>
+            )}
+          </motion.div>
+        </AnimatePresence>
 
-        {pagination.hasMore && (
+        {pagination.hasMore && !isClearing && (
           <div className="notifications__load-more">
             <Button
               theme="outline"

From 6c4e8c406f71c5850b9fd5db7b476a27d2a9f245 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 19:44:39 +0200
Subject: [PATCH 60/72] refactor: update HTTP module imports to use node:
 prefix for consistency

---
 src/main/services/hosters/buzzheavier.ts | 4 ++--
 src/main/services/hosters/vikingfile.ts  | 2 +-
 src/main/services/python-rpc.ts          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/services/hosters/buzzheavier.ts b/src/main/services/hosters/buzzheavier.ts
index 5aa209b4..581f5a87 100644
--- a/src/main/services/hosters/buzzheavier.ts
+++ b/src/main/services/hosters/buzzheavier.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
-import http from "http";
-import https from "https";
+import http from "node:http";
+import https from "node:https";
 import {
   HOSTER_USER_AGENT,
   extractHosterFilename,
diff --git a/src/main/services/hosters/vikingfile.ts b/src/main/services/hosters/vikingfile.ts
index 5f97a767..ad89b876 100644
--- a/src/main/services/hosters/vikingfile.ts
+++ b/src/main/services/hosters/vikingfile.ts
@@ -1,5 +1,5 @@
 import axios from "axios";
-import https from "https";
+import https from "node:https";
 import { logger } from "../logger";
 
 interface UnlockResponse {
diff --git a/src/main/services/python-rpc.ts b/src/main/services/python-rpc.ts
index 919f6e7e..d04b00ab 100644
--- a/src/main/services/python-rpc.ts
+++ b/src/main/services/python-rpc.ts
@@ -1,5 +1,5 @@
 import axios from "axios";
-import http from "http";
+import http from "node:http";
 
 import cp from "node:child_process";
 import fs from "node:fs";

From 07c277c0336d770656e969a95ca68b94dc563f2c Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 20:11:22 +0200
Subject: [PATCH 61/72] refactor: remove karma description from translations
 across multiple languages

---
 src/locales/en/translation.json                              | 1 -
 src/locales/es/translation.json                              | 1 -
 src/locales/fi/translation.json                              | 3 +--
 src/locales/hu/translation.json                              | 1 -
 src/locales/lv/translation.json                              | 3 +--
 src/locales/pt-BR/translation.json                           | 1 -
 src/locales/ru/translation.json                              | 1 -
 src/locales/tr/translation.json                              | 1 -
 src/locales/uk/translation.json                              | 3 +--
 src/locales/zh/translation.json                              | 1 -
 .../src/pages/profile/profile-content/add-friend-modal.scss  | 2 ++
 .../src/pages/profile/profile-content/user-stats-box.tsx     | 5 -----
 12 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 07029def..9a266247 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -728,7 +728,6 @@
     "game_added_to_pinned": "Game added to pinned",
     "karma": "Karma",
     "karma_count": "karma",
-    "karma_description": "Earned from positive likes on reviews",
     "user_reviews": "Reviews",
     "delete_review": "Delete Review",
     "loading_reviews": "Loading reviews...",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 12dae377..fbbe33cd 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -710,7 +710,6 @@
     "amount_minutes_short": "{{amount}}m",
     "karma": "Karma",
     "karma_count": "karma",
-    "karma_description": "Conseguido por me gustas positivos en reseñas",
     "sort_by": "Filtrar por:",
     "game_added_to_pinned": "Juego añadido a fijados",
     "user_reviews": "Reseñas",
diff --git a/src/locales/fi/translation.json b/src/locales/fi/translation.json
index fee3ff22..05268771 100644
--- a/src/locales/fi/translation.json
+++ b/src/locales/fi/translation.json
@@ -673,8 +673,7 @@
     "game_removed_from_pinned": "Peli poistettu kiinnitetyistä",
     "game_added_to_pinned": "Peli lisätty kiinnitettyihin",
     "karma": "Karma",
-    "karma_count": "karmaa",
-    "karma_description": "Ansittu positiivisilla arvosteluäänillä"
+    "karma_count": "karmaa"
   },
   "achievement": {
     "achievement_unlocked": "Saavutus avattu",
diff --git a/src/locales/hu/translation.json b/src/locales/hu/translation.json
index b83fec51..532c77e7 100644
--- a/src/locales/hu/translation.json
+++ b/src/locales/hu/translation.json
@@ -718,7 +718,6 @@
     "game_added_to_pinned": "Játék hozzáadva a kitűzöttekhez",
     "karma": "Karma",
     "karma_count": "karma",
-    "karma_description": "Pozitív értékelésekkel szerzett pontok",
     "user_reviews": "Vélemények",
     "delete_review": "Vélemény Törlése",
     "loading_reviews": "Vélemények betöltése..."
diff --git a/src/locales/lv/translation.json b/src/locales/lv/translation.json
index 26aacb74..4b87dade 100644
--- a/src/locales/lv/translation.json
+++ b/src/locales/lv/translation.json
@@ -673,8 +673,7 @@
     "game_removed_from_pinned": "Spēle dzēsta no piespraustajiem",
     "game_added_to_pinned": "Spēle pievienota piespraustajiem",
     "karma": "Karma",
-    "karma_count": "karma",
-    "karma_description": "Nopelnīta ar pozitīviem atsauksmju vērtējumiem"
+    "karma_count": "karma"
   },
   "achievement": {
     "achievement_unlocked": "Sasniegums atbloķēts",
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index 719f72f7..7499bfeb 100755
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -720,7 +720,6 @@
     "achievements_earned": "Conquistas recebidas",
     "karma": "Karma",
     "karma_count": "karma",
-    "karma_description": "Ganho a partir de curtidas positivas em avaliações",
     "manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente",
     "user_reviews": "Avaliações",
     "loading_reviews": "Carregando avaliações...",
diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json
index 1cf7ae2f..f0b7f764 100644
--- a/src/locales/ru/translation.json
+++ b/src/locales/ru/translation.json
@@ -709,7 +709,6 @@
     "game_added_to_pinned": "Игра добавлена в закрепленные",
     "karma": "Карма",
     "karma_count": "карма",
-    "karma_description": "Заработана положительными оценками отзывов",
     "user_reviews": "Отзывы",
     "loading_reviews": "Загрузка отзывов...",
     "no_reviews": "Пока нет отзывов",
diff --git a/src/locales/tr/translation.json b/src/locales/tr/translation.json
index 52e1f10f..94d12ee3 100644
--- a/src/locales/tr/translation.json
+++ b/src/locales/tr/translation.json
@@ -706,7 +706,6 @@
     "game_added_to_pinned": "Oyun sabitlenmişlere eklendi",
     "karma": "Karma",
     "karma_count": "karma",
-    "karma_description": "İncelemelerdeki olumlu beğenilerden kazanılır",
     "user_reviews": "İncelemeler",
     "delete_review": "İncelemeyi Sil",
     "loading_reviews": "İncelemeler yükleniyor..."
diff --git a/src/locales/uk/translation.json b/src/locales/uk/translation.json
index 323d8ad5..32c79f9c 100644
--- a/src/locales/uk/translation.json
+++ b/src/locales/uk/translation.json
@@ -668,8 +668,7 @@
     "game_removed_from_pinned": "Гру видалено із закріплених",
     "game_added_to_pinned": "Гру додано до закріплених",
     "karma": "Карма",
-    "karma_count": "карма",
-    "karma_description": "Зароблена позитивними оцінками на відгуках"
+    "karma_count": "карма"
   },
   "achievement": {
     "achievement_unlocked": "Досягнення розблоковано",
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
index bfc353d9..094a49ca 100644
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -689,7 +689,6 @@
     "game_removed_from_pinned": "游戏已从置顶移除",
     "karma": "业力",
     "karma_count": "业力值",
-    "karma_description": "通过评论获得的点赞",
     "loading_reviews": "正在加载评价...",
     "manual_playtime_tooltip": "该游戏时长已手动更新",
     "pinned": "已置顶",
diff --git a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
index 6e89ae1a..8d2a38dc 100644
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
@@ -100,8 +100,10 @@
     padding: calc(globals.$spacing-unit * 1.5);
     background-color: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
+    border: none;
     cursor: pointer;
     transition: all ease 0.2s;
+    text-align: left;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.1);
diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
index 6fbabdca..8b61cdd6 100644
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
@@ -123,11 +123,6 @@ export function UserStatsBox() {
                 {t("karma_count")}
               </p>
             </div>
-            <div className="user-stats__karma-info">
-              <small className="user-stats__karma-info-text">
-                {t("karma_description")}
-              </small>
-            </div>
           </li>
         )}
       </ul>

From b2bffeb2b0fa4b5d824c2f81a7425d3992431734 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 21:01:39 +0200
Subject: [PATCH 62/72] fix: update API endpoint for deleting friend requests
 in useUserDetails hook

---
 src/renderer/src/hooks/use-user-details.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts
index d8b9bbd2..eb374e28 100644
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/src/renderer/src/hooks/use-user-details.ts
@@ -111,7 +111,7 @@ export function useUserDetails() {
   );
 
   const undoFriendship = (userId: string) =>
-    window.electron.hydraApi.delete(`/profile/friends/${userId}`);
+    window.electron.hydraApi.delete(`/profile/friend-requests/${userId}`);
 
   const blockUser = (userId: string) =>
     window.electron.hydraApi.post(`/users/${userId}/block`);

From 8b3bcd88b1a503b9cae14814ce1166b16b4aa2c5 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:42:49 -0300
Subject: [PATCH 63/72] feat: add workwonders

---
 package.json                               |  1 +
 src/renderer/src/app.tsx                   | 57 ++++++++++++++++------
 src/renderer/src/hooks/use-user-details.ts |  1 +
 src/types/index.ts                         |  1 +
 yarn.lock                                  | 12 +++++
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index bb74198f..e60f83f8 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "user-agents": "^1.1.387",
     "uuid": "^13.0.0",
     "winreg": "^1.2.5",
+    "workwonders-sdk": "0.0.9",
     "ws": "^8.18.1",
     "yaml": "^2.6.1",
     "yup": "^1.5.0"
diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
index 9334b5b9..376818d3 100644
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
-
+import { WorkWondersSdk } from "workwonders-sdk";
 import {
   useAppDispatch,
   useAppSelector,
@@ -52,6 +52,8 @@ export function App() {
 
   const { clearDownload, setLastPacket } = useDownload();
 
+  const wokwondersRef = useRef<WorkWondersSdk | null>(null);
+
   const {
     hasActiveSubscription,
     fetchUserDetails,
@@ -114,7 +116,24 @@ export function App() {
     return () => unsubscribe();
   }, [updateLibrary]);
 
-  useEffect(() => {
+  const setupWorkWonders = useCallback(
+    async (token?: string, locale?: string) => {
+      if (wokwondersRef.current) return;
+
+      wokwondersRef.current = new WorkWondersSdk();
+      await wokwondersRef.current.init({
+        organization: "hydra",
+        token,
+        locale,
+      });
+
+      await wokwondersRef.current.initChangelogWidget();
+      wokwondersRef.current.initChangelogWidgetMini();
+    },
+    [wokwondersRef]
+  );
+
+  const setupExternalResources = useCallback(async () => {
     const cachedUserDetails = window.localStorage.getItem("userDetails");
 
     if (cachedUserDetails) {
@@ -125,21 +144,26 @@ export function App() {
       dispatch(setProfileBackground(profileBackground));
     }
 
-    fetchUserDetails()
-      .then((response) => {
-        if (response) {
-          updateUserDetails(response);
-        }
-      })
-      .finally(() => {
-        if (document.getElementById("external-resources")) return;
+    const userPreferences = await window.electron.getUserPreferences();
+    const userDetails = await fetchUserDetails().catch(() => null);
 
-        const $script = document.createElement("script");
-        $script.id = "external-resources";
-        $script.src = `${import.meta.env.RENDERER_VITE_EXTERNAL_RESOURCES_URL}/bundle.js?t=${Date.now()}`;
-        document.head.appendChild($script);
-      });
-  }, [fetchUserDetails, updateUserDetails, dispatch]);
+    if (userDetails) {
+      updateUserDetails(userDetails);
+    }
+
+    setupWorkWonders(userDetails?.workwondersJwt, userPreferences?.language);
+
+    if (!document.getElementById("external-resources")) {
+      const $script = document.createElement("script");
+      $script.id = "external-resources";
+      $script.src = `${import.meta.env.RENDERER_VITE_EXTERNAL_RESOURCES_URL}/bundle.js?t=${Date.now()}`;
+      document.head.appendChild($script);
+    }
+  }, [fetchUserDetails, updateUserDetails, dispatch, setupWorkWonders]);
+
+  useEffect(() => {
+    setupExternalResources();
+  }, [setupExternalResources]);
 
   const onSignIn = useCallback(() => {
     fetchUserDetails().then((response) => {
@@ -203,6 +227,7 @@ export function App() {
 
   useEffect(() => {
     if (contentRef.current) contentRef.current.scrollTop = 0;
+    wokwondersRef.current?.notifyUrlChange();
   }, [location.pathname, location.search]);
 
   useEffect(() => {
diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts
index d8b9bbd2..3a60be22 100644
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/src/renderer/src/hooks/use-user-details.ts
@@ -59,6 +59,7 @@ export function useUserDetails() {
         username: userDetails?.username || "",
         subscription: userDetails?.subscription || null,
         featurebaseJwt: userDetails?.featurebaseJwt || "",
+        workwondersJwt: userDetails?.workwondersJwt || "",
         karma: userDetails?.karma || 0,
       });
     },
diff --git a/src/types/index.ts b/src/types/index.ts
index de792b05..d3d36006 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -187,6 +187,7 @@ export interface UserDetails {
   profileVisibility: ProfileVisibility;
   bio: string;
   featurebaseJwt: string;
+  workwondersJwt: string;
   subscription: Subscription | null;
   karma: number;
   quirks?: {
diff --git a/yarn.lock b/yarn.lock
index 9d354966..9950f599 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6354,6 +6354,11 @@ keyv@^4.0.0, keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+ky@^1.11.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/ky/-/ky-1.14.1.tgz#16f20b3bf3939abcc04e2a9613f47360fe5f64c9"
+  integrity sha512-hYje4L9JCmpEQBtudo+v52X5X8tgWXUYyPcxKSuxQNboqufecl9VMWjGiucAFH060AwPXHZuH+WB2rrqfkmafw==
+
 language-subtag-registry@^0.3.20:
   version "0.3.23"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
@@ -9123,6 +9128,13 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
+workwonders-sdk@0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/workwonders-sdk/-/workwonders-sdk-0.0.9.tgz#ec2cf8f47304cc9c52b273383443f3978cd381a1"
+  integrity sha512-ZhzOXL+/Vq9wCzneE8NUvL3RVIaFMygFtjO5BKXSXsP1iSq2jZ9l3xedmxwZyyTvMYN5t4oIwCwFE0NWujtH9A==
+  dependencies:
+    ky "^1.11.0"
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"

From 7ed514b6ef49e8bc3ac496e05836b3c6dbce5c16 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:54:42 -0300
Subject: [PATCH 64/72] feat: parse locale before ww init

---
 src/renderer/src/app.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
index 376818d3..ac7ded9f 100644
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -120,11 +120,16 @@ export function App() {
     async (token?: string, locale?: string) => {
       if (wokwondersRef.current) return;
 
+      const possibleLocales = ["en", "pt", "ru"];
+
+      const parsedLocale =
+        possibleLocales.find((l) => l === locale?.slice(0, 2)) ?? "en";
+
       wokwondersRef.current = new WorkWondersSdk();
       await wokwondersRef.current.init({
         organization: "hydra",
         token,
-        locale,
+        locale: parsedLocale,
       });
 
       await wokwondersRef.current.initChangelogWidget();

From e52f10a5ff858c36bdfdac62652d706800c8cdd2 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sat, 3 Jan 2026 17:17:16 -0300
Subject: [PATCH 65/72] chore: bump ww version

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e60f83f8..99545c6e 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "user-agents": "^1.1.387",
     "uuid": "^13.0.0",
     "winreg": "^1.2.5",
-    "workwonders-sdk": "0.0.9",
+    "workwonders-sdk": "0.0.10",
     "ws": "^8.18.1",
     "yaml": "^2.6.1",
     "yup": "^1.5.0"
diff --git a/yarn.lock b/yarn.lock
index 9950f599..d98c554d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9128,10 +9128,10 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-workwonders-sdk@0.0.9:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/workwonders-sdk/-/workwonders-sdk-0.0.9.tgz#ec2cf8f47304cc9c52b273383443f3978cd381a1"
-  integrity sha512-ZhzOXL+/Vq9wCzneE8NUvL3RVIaFMygFtjO5BKXSXsP1iSq2jZ9l3xedmxwZyyTvMYN5t4oIwCwFE0NWujtH9A==
+workwonders-sdk@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/workwonders-sdk/-/workwonders-sdk-0.0.10.tgz#377167370a39c905c5228f8972c37c19004b7b21"
+  integrity sha512-bnswhlLRz1TCiqGV8l+VEOBej7u1SAkzLMEv6A60Sp0+S4j4pnmSve92KeOts/GYtUeNDuNM7fLPwZwMKY3sAg==
   dependencies:
     ky "^1.11.0"
 

From 87fcbaa56e23f3af9195ab588625ba05baa1d9ca Mon Sep 17 00:00:00 2001
From: Chubby Granny Chaser <hydralauncher@proton.me>
Date: Sat, 3 Jan 2026 21:07:09 +0000
Subject: [PATCH 66/72] chore: bump version to 3.8.0 and update translations
 for downloader status and notifications

---
 package.json                                  |   2 +-
 src/locales/en/translation.json               |   6 +
 src/locales/es/translation.json               |  51 +++
 src/locales/pt-BR/translation.json            |  51 +++
 src/locales/ru/translation.json               |  51 +++
 src/main/services/aria2.ts                    |   1 -
 src/main/services/hosters/vikingfile.ts       |  12 -
 src/renderer/src/constants.ts                 |   2 +-
 .../modals/download-settings-modal.scss       | 129 ++++++-
 .../modals/download-settings-modal.tsx        | 318 ++++++++++++------
 .../modals/real-debrid-info-modal.scss        |  37 ++
 .../modals/real-debrid-info-modal.tsx         |  59 ++++
 12 files changed, 594 insertions(+), 125 deletions(-)
 create mode 100644 src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss
 create mode 100644 src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx

diff --git a/package.json b/package.json
index bb74198f..43aa7b78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.7.6",
+  "version": "3.8.0",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 7180fab2..8ddeb83d 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -185,6 +185,12 @@
     "open_screenshot": "Open screenshot {{number}}",
     "download_settings": "Download settings",
     "downloader": "Downloader",
+    "downloader_online": "Online",
+    "downloader_not_configured": "Available but not configured",
+    "downloader_offline": "Link is offline",
+    "downloader_not_available": "Not available",
+    "recommended": "Recommended",
+    "go_to_settings": "Go to Settings",
     "select_executable": "Select",
     "no_executable_selected": "No executable selected",
     "open_folder": "Open folder",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 12dae377..f4cf078c 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -182,6 +182,12 @@
     "open_screenshot": "Abrir captura número {{number}}",
     "download_settings": "Descargar ajustes",
     "downloader": "Descargador",
+    "downloader_online": "En línea",
+    "downloader_not_configured": "Disponible pero no configurado",
+    "downloader_offline": "El enlace está fuera de línea",
+    "downloader_not_available": "No disponible",
+    "recommended": "Recomendado",
+    "go_to_settings": "Ir a Ajustes",
     "select_executable": "Seleccionar",
     "no_executable_selected": "Sin ejecutable seleccionado",
     "open_folder": "Abrir carpeta",
@@ -651,6 +657,7 @@
     "sending": "Enviando",
     "friend_request_sent": "Solicitud de amistad enviada",
     "friends": "Amistades",
+    "badges": "Insignias",
     "friends_list": "Lista de amistades",
     "user_not_found": "Usuario no encontrado",
     "block_user": "Bloquear usuario",
@@ -661,12 +668,16 @@
     "ignore_request": "Ignorar solicitud",
     "cancel_request": "Cancelar solicitud",
     "undo_friendship": "Deshacer amistad",
+    "friendship_removed": "Amigo eliminado",
     "request_accepted": "Solicitud aceptada",
     "user_blocked_successfully": "Usuario bloqueado exitosamente",
     "user_block_modal_text": "Esto va a bloquear a {{displayName}}",
     "blocked_users": "Usuarios bloqueados",
     "unblock": "Desbloquear",
     "no_friends_added": "No tenés amistades añadidas",
+    "view_all": "Ver todo",
+    "load_more": "Cargar más",
+    "loading": "Cargando",
     "pending": "Pendiente",
     "no_pending_invites": "No tenés invitaciones pendientes",
     "no_blocked_users": "No has bloqueado a nadie",
@@ -690,6 +701,7 @@
     "report_reason_other": "Otros",
     "profile_reported": "Perfil reportado",
     "your_friend_code": "Tu código de amistad:",
+    "copy_friend_code": "Copiar código de amistad",
     "upload_banner": "Subir banner",
     "uploading_banner": "Subiendo banner…",
     "background_image_updated": "Imagen de fondo actualizada",
@@ -715,6 +727,9 @@
     "game_added_to_pinned": "Juego añadido a fijados",
     "user_reviews": "Reseñas",
     "loading_reviews": "Cargando reseñas...",
+    "wrapped_2025": "Wrapped 2025",
+    "view_my_wrapped_button": "Ver Mi Wrapped 2025",
+    "view_wrapped_button": "Ver Wrapped 2025 de {{displayName}}",
     "no_reviews": "Sin reseñas aún",
     "delete_review": "Eliminar reseña"
   },
@@ -767,5 +782,41 @@
     "all_games": "Todos los Juegos",
     "recently_played": "Jugados Recientemente",
     "favorites": "Favoritos"
+  },
+  "notifications_page": {
+    "title": "Notificaciones",
+    "mark_all_as_read": "Marcar todo como leído",
+    "clear_all": "Limpiar todo",
+    "loading": "Cargando...",
+    "empty_title": "Sin notificaciones",
+    "empty_description": "¡Estás al día! Volvé más tarde para ver nuevas actualizaciones.",
+    "empty_filter_description": "No hay notificaciones que coincidan con este filtro.",
+    "filter_all": "Todas",
+    "filter_unread": "No leídas",
+    "filter_friends": "Amigos",
+    "filter_badges": "Insignias",
+    "filter_upvotes": "Votos",
+    "filter_local": "Locales",
+    "load_more": "Cargar más",
+    "dismiss": "Descartar",
+    "accept": "Aceptar",
+    "refuse": "Rechazar",
+    "notification": "Notificación",
+    "friend_request_received_title": "¡Nueva solicitud de amistad!",
+    "friend_request_received_description": "{{displayName}} quiere ser tu amigo",
+    "friend_request_accepted_title": "¡Solicitud de amistad aceptada!",
+    "friend_request_accepted_description": "{{displayName}} aceptó tu solicitud de amistad",
+    "badge_received_title": "¡Obtuviste una nueva insignia!",
+    "badge_received_description": "{{badgeName}}",
+    "review_upvote_title": "¡Tu reseña de {{gameTitle}} recibió votos!",
+    "review_upvote_description": "Tu reseña recibió {{count}} nuevos votos",
+    "marked_all_as_read": "Todas las notificaciones marcadas como leídas",
+    "failed_to_mark_as_read": "Error al marcar las notificaciones como leídas",
+    "cleared_all": "Todas las notificaciones eliminadas",
+    "failed_to_clear": "Error al eliminar las notificaciones",
+    "failed_to_load": "Error al cargar las notificaciones",
+    "failed_to_dismiss": "Error al descartar la notificación",
+    "friend_request_accepted": "Solicitud de amistad aceptada",
+    "friend_request_refused": "Solicitud de amistad rechazada"
   }
 }
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index 719f72f7..5f7d672a 100755
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -172,6 +172,12 @@
     "open_screenshot": "Ver captura de tela {{number}}",
     "download_settings": "Ajustes do download",
     "downloader": "Downloader",
+    "downloader_online": "Online",
+    "downloader_not_configured": "Disponível mas não configurado",
+    "downloader_offline": "Link está offline",
+    "downloader_not_available": "Não disponível",
+    "recommended": "Recomendado",
+    "go_to_settings": "Ir para Configurações",
     "select_executable": "Explorar",
     "no_executable_selected": "Nenhum executável selecionado",
     "open_folder": "Abrir pasta",
@@ -654,6 +660,7 @@
     "see_profile": "Ver perfil",
     "friend_request_sent": "Pedido de amizade enviado",
     "friends": "Amigos",
+    "badges": "Insígnias",
     "add": "Adicionar",
     "sending": "Enviando",
     "friends_list": "Lista de amigos",
@@ -666,12 +673,16 @@
     "ignore_request": "Ignorar pedido",
     "cancel_request": "Cancelar pedido",
     "undo_friendship": "Desfazer amizade",
+    "friendship_removed": "Amigo removido",
     "request_accepted": "Pedido de amizade aceito",
     "user_blocked_successfully": "Usuário bloqueado com sucesso",
     "user_block_modal_text": "Bloquear {{displayName}}",
     "blocked_users": "Usuários bloqueados",
     "unblock": "Desbloquear",
     "no_friends_added": "Você ainda não possui amigos adicionados",
+    "view_all": "Ver todos",
+    "load_more": "Carregar mais",
+    "loading": "Carregando",
     "pending": "Pendentes",
     "no_pending_invites": "Você não possui convites de amizade pendentes",
     "no_blocked_users": "Você não tem nenhum usuário bloqueado",
@@ -695,6 +706,7 @@
     "report_reason_other": "Outro",
     "profile_reported": "Perfil reportado",
     "your_friend_code": "Seu código de amigo:",
+    "copy_friend_code": "Copiar código de amigo",
     "upload_banner": "Carregar banner",
     "uploading_banner": "Carregando banner…",
     "background_image_updated": "Imagem de fundo salva",
@@ -724,6 +736,9 @@
     "manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente",
     "user_reviews": "Avaliações",
     "loading_reviews": "Carregando avaliações...",
+    "wrapped_2025": "Wrapped 2025",
+    "view_my_wrapped_button": "Ver Meu Wrapped 2025",
+    "view_wrapped_button": "Ver Wrapped 2025 de {{displayName}}",
     "no_reviews": "Ainda não há avaliações",
     "delete_review": "Excluir avaliação"
   },
@@ -776,5 +791,41 @@
     "all_games": "Todos os Jogos",
     "recently_played": "Jogados Recentemente",
     "favorites": "Favoritos"
+  },
+  "notifications_page": {
+    "title": "Notificações",
+    "mark_all_as_read": "Marcar todas como lidas",
+    "clear_all": "Limpar todas",
+    "loading": "Carregando...",
+    "empty_title": "Sem notificações",
+    "empty_description": "Você está em dia! Volte mais tarde para ver novas atualizações.",
+    "empty_filter_description": "Nenhuma notificação corresponde a este filtro.",
+    "filter_all": "Todas",
+    "filter_unread": "Não lidas",
+    "filter_friends": "Amigos",
+    "filter_badges": "Insígnias",
+    "filter_upvotes": "Votos",
+    "filter_local": "Locais",
+    "load_more": "Carregar mais",
+    "dismiss": "Descartar",
+    "accept": "Aceitar",
+    "refuse": "Recusar",
+    "notification": "Notificação",
+    "friend_request_received_title": "Nova solicitação de amizade!",
+    "friend_request_received_description": "{{displayName}} quer ser seu amigo",
+    "friend_request_accepted_title": "Solicitação de amizade aceita!",
+    "friend_request_accepted_description": "{{displayName}} aceitou sua solicitação de amizade",
+    "badge_received_title": "Você recebeu uma nova insígnia!",
+    "badge_received_description": "{{badgeName}}",
+    "review_upvote_title": "Sua avaliação de {{gameTitle}} recebeu votos!",
+    "review_upvote_description": "Sua avaliação recebeu {{count}} novos votos",
+    "marked_all_as_read": "Todas as notificações marcadas como lidas",
+    "failed_to_mark_as_read": "Falha ao marcar notificações como lidas",
+    "cleared_all": "Todas as notificações limpas",
+    "failed_to_clear": "Falha ao limpar notificações",
+    "failed_to_load": "Falha ao carregar notificações",
+    "failed_to_dismiss": "Falha ao descartar notificação",
+    "friend_request_accepted": "Solicitação de amizade aceita",
+    "friend_request_refused": "Solicitação de amizade recusada"
   }
 }
diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json
index 1cf7ae2f..d43a0976 100644
--- a/src/locales/ru/translation.json
+++ b/src/locales/ru/translation.json
@@ -182,6 +182,12 @@
     "open_screenshot": "Открыть скриншот {{number}}",
     "download_settings": "Параметры загрузки",
     "downloader": "Загрузчик",
+    "downloader_online": "Онлайн",
+    "downloader_not_configured": "Доступен, но не настроен",
+    "downloader_offline": "Ссылка недоступна",
+    "downloader_not_available": "Недоступно",
+    "recommended": "Рекомендуется",
+    "go_to_settings": "Перейти в настройки",
     "select_executable": "Выбрать",
     "no_executable_selected": "Файл не выбран",
     "open_folder": "Открыть папку",
@@ -651,6 +657,7 @@
     "sending": "Отправка",
     "friend_request_sent": "Запрос в друзья отправлен",
     "friends": "Друзья",
+    "badges": "Значки",
     "friends_list": "Список друзей",
     "user_not_found": "Пользователь не найден",
     "block_user": "Заблокировать пользователя",
@@ -661,12 +668,16 @@
     "ignore_request": "Игнорировать запрос",
     "cancel_request": "Отменить запрос",
     "undo_friendship": "Удалить друга",
+    "friendship_removed": "Друг удален",
     "request_accepted": "Запрос принят",
     "user_blocked_successfully": "Пользователь успешно заблокирован",
     "user_block_modal_text": "{{displayName}} будет заблокирован",
     "blocked_users": "Заблокированные пользователи",
     "unblock": "Разблокировать",
     "no_friends_added": "Вы ещё не добавили ни одного друга",
+    "view_all": "Показать все",
+    "load_more": "Загрузить еще",
+    "loading": "Загрузка",
     "pending": "Ожидание",
     "no_pending_invites": "У вас нет запросов ожидающих ответа",
     "no_blocked_users": "Вы не заблокировали ни одного пользователя",
@@ -690,6 +701,7 @@
     "report_reason_other": "Другое",
     "profile_reported": "Жалоба на профиль отправлена",
     "your_friend_code": "Код вашего друга:",
+    "copy_friend_code": "Копировать код друга",
     "upload_banner": "Загрузить баннер",
     "uploading_banner": "Загрузка баннера...",
     "background_image_updated": "Фоновое изображение обновлено",
@@ -712,6 +724,9 @@
     "karma_description": "Заработана положительными оценками отзывов",
     "user_reviews": "Отзывы",
     "loading_reviews": "Загрузка отзывов...",
+    "wrapped_2025": "Wrapped 2025",
+    "view_my_wrapped_button": "Просмотреть мой Wrapped 2025",
+    "view_wrapped_button": "Просмотреть Wrapped 2025 {{displayName}}",
     "no_reviews": "Пока нет отзывов",
     "delete_review": "Удалить отзыв"
   },
@@ -764,5 +779,41 @@
     "all_games": "Все игры",
     "recently_played": "Недавно сыгранные",
     "favorites": "Избранное"
+  },
+  "notifications_page": {
+    "title": "Уведомления",
+    "mark_all_as_read": "Отметить все как прочитанные",
+    "clear_all": "Очистить все",
+    "loading": "Загрузка...",
+    "empty_title": "Нет уведомлений",
+    "empty_description": "Вы в курсе всех событий! Загляните позже за новыми обновлениями.",
+    "empty_filter_description": "Нет уведомлений, соответствующих этому фильтру.",
+    "filter_all": "Все",
+    "filter_unread": "Непрочитанные",
+    "filter_friends": "Друзья",
+    "filter_badges": "Значки",
+    "filter_upvotes": "Голоса",
+    "filter_local": "Локальные",
+    "load_more": "Загрузить еще",
+    "dismiss": "Отклонить",
+    "accept": "Принять",
+    "refuse": "Отклонить",
+    "notification": "Уведомление",
+    "friend_request_received_title": "Новый запрос в друзья!",
+    "friend_request_received_description": "{{displayName}} хочет добавить вас в друзья",
+    "friend_request_accepted_title": "Запрос в друзья принят!",
+    "friend_request_accepted_description": "{{displayName}} принял ваш запрос в друзья",
+    "badge_received_title": "Вы получили новый значок!",
+    "badge_received_description": "{{badgeName}}",
+    "review_upvote_title": "Ваш отзыв на {{gameTitle}} получил голоса!",
+    "review_upvote_description": "Ваш отзыв получил {{count}} новых голосов",
+    "marked_all_as_read": "Все уведомления отмечены как прочитанные",
+    "failed_to_mark_as_read": "Не удалось отметить уведомления как прочитанные",
+    "cleared_all": "Все уведомления очищены",
+    "failed_to_clear": "Не удалось очистить уведомления",
+    "failed_to_load": "Не удалось загрузить уведомления",
+    "failed_to_dismiss": "Не удалось отклонить уведомление",
+    "friend_request_accepted": "Запрос в друзья принят",
+    "friend_request_refused": "Запрос в друзья отклонен"
   }
 }
diff --git a/src/main/services/aria2.ts b/src/main/services/aria2.ts
index 438008b2..f3f49018 100644
--- a/src/main/services/aria2.ts
+++ b/src/main/services/aria2.ts
@@ -21,7 +21,6 @@ export class Aria2 {
         "--rpc-listen-all",
         "--file-allocation=none",
         "--allow-overwrite=true",
-        "--disable-ipv6",
       ],
       { stdio: "inherit", windowsHide: true }
     );
diff --git a/src/main/services/hosters/vikingfile.ts b/src/main/services/hosters/vikingfile.ts
index ad89b876..97b4236c 100644
--- a/src/main/services/hosters/vikingfile.ts
+++ b/src/main/services/hosters/vikingfile.ts
@@ -8,13 +8,6 @@ interface UnlockResponse {
 }
 
 export class VikingFileApi {
-  private static readonly browserHeaders = {
-    "User-Agent":
-      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
-    Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
-    Referer: "https://vikingfile.com/",
-  };
-
   public static async getDownloadUrl(uri: string): Promise<string> {
     const unlockResponse = await axios.post<UnlockResponse>(
       `${import.meta.env.MAIN_VITE_NIMBUS_API_URL}/hosters/unlock`,
@@ -27,16 +20,11 @@ export class VikingFileApi {
 
     const redirectUrl = unlockResponse.data.link;
 
-    // Follow the redirect to get the final Cloudflare storage URL
     try {
       const redirectResponse = await axios.head(redirectUrl, {
-        headers: this.browserHeaders,
         maxRedirects: 0,
         validateStatus: (status) =>
           status === 301 || status === 302 || status === 200,
-        httpsAgent: new https.Agent({
-          family: 4, // Force IPv4
-        }),
       });
 
       if (
diff --git a/src/renderer/src/constants.ts b/src/renderer/src/constants.ts
index 153fd644..d227969b 100644
--- a/src/renderer/src/constants.ts
+++ b/src/renderer/src/constants.ts
@@ -1,6 +1,6 @@
 import { Downloader } from "@shared";
 
-export const VERSION_CODENAME = "Supernova";
+export const VERSION_CODENAME = "Harbinger";
 
 export const DOWNLOADER_NAME = {
   [Downloader.RealDebrid]: "Real-Debrid",
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index 4c33ebb4..79c8252d 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -19,25 +19,52 @@
     color: globals.$body-color;
   }
 
+  &__downloaders-list-wrapper {
+    border: 1px solid globals.$border-color;
+    overflow: hidden;
+    background-color: globals.$dark-background-color;
+  }
+
   &__downloaders-list {
     display: flex;
     flex-direction: column;
-    gap: calc(globals.$spacing-unit / 2);
+    gap: 0;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid globals.$border-color;
-    border-radius: 4px;
-    padding: calc(globals.$spacing-unit / 2);
-    background-color: globals.$dark-background-color;
+    overflow-x: hidden;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 12px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  &__recommendation-badge {
+    margin-left: calc(globals.$spacing-unit);
+    font-size: 10px;
   }
 
   &__downloader-item {
     display: flex;
     align-items: center;
-    gap: calc(globals.$spacing-unit * 1.5);
+    gap: 8px;
     padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2);
     border: 1px solid transparent;
-    border-radius: 4px;
+    border-bottom: 1px solid globals.$border-color;
+    border-radius: 0;
     background-color: transparent;
     cursor: pointer;
     transition:
@@ -46,8 +73,10 @@
     color: globals.$body-color;
     font-size: 14px;
     text-align: left;
+    height: 48px;
+    box-sizing: border-box;
 
-    &:hover:not(&--disabled) {
+    &:hover {
       background-color: rgba(255, 255, 255, 0.05);
     }
 
@@ -55,19 +84,63 @@
       background-color: rgba(255, 255, 255, 0.08);
     }
 
-    &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+    &--last {
+      border-bottom: none;
     }
   }
 
-  &__downloader-name {
-    flex: 1;
+  &__downloader-item-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__recommendation-badge {
+    margin-left: auto;
+  }
+
+  &__check-icon {
+    color: white;
+    flex-shrink: 0;
+  }
+
+  &__check-icon-wrapper {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__recommendation-badge {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    height: 20px;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .badge {
+      padding: 2px 6px;
+      font-size: 10px;
+      line-height: 1.2;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+  }
+
+  &__availability-indicator-wrapper {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
   }
 
   &__availability-indicator {
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
 
@@ -80,6 +153,32 @@
       background-color: #ef4444;
       box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
     }
+
+    &--not-present {
+      background-color: #6b7280;
+      box-shadow: 0 0 6px rgba(107, 114, 128, 0.5);
+    }
+
+    &--warning {
+      background-color: #eab308;
+      box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
+    }
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.1);
+    }
+  }
+
+  &__availability-indicator--pulsating {
+    animation: pulse 2s ease-in-out infinite;
   }
 
   &__path-error {
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index 0b8aff7d..597f6ae5 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -1,22 +1,25 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
+  Badge,
   Button,
   CheckboxField,
   Link,
   Modal,
   TextField,
 } from "@renderer/components";
-import { DownloadIcon, SyncIcon } from "@primer/octicons-react";
 import {
-  Downloader,
-  formatBytes,
-  getDownloadersForUri,
-  getDownloadersForUris,
-} from "@shared";
+  DownloadIcon,
+  SyncIcon,
+  CheckCircleFillIcon,
+} from "@primer/octicons-react";
+import { Downloader, formatBytes, getDownloadersForUri } from "@shared";
 import type { GameRepack } from "@types";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import { useAppSelector, useFeature, useToast } from "@renderer/hooks";
+import { motion } from "framer-motion";
+import { Tooltip } from "react-tooltip";
+import { RealDebridInfoModal } from "./real-debrid-info-modal";
 import "./download-settings-modal.scss";
 
 export interface DownloadSettingsModalProps {
@@ -56,6 +59,7 @@ export function DownloadSettingsModal({
   const [hasWritePermission, setHasWritePermission] = useState<boolean | null>(
     null
   );
+  const [showRealDebridModal, setShowRealDebridModal] = useState(false);
 
   const { isFeatureEnabled, Feature } = useFeature();
 
@@ -83,51 +87,115 @@ export function DownloadSettingsModal({
     }
   }, [visible, checkFolderWritePermission, selectedPath]);
 
-  const downloaders = useMemo(() => {
-    return getDownloadersForUris(repack?.uris ?? []);
-  }, [repack?.uris]);
-
   const downloadOptions = useMemo(() => {
-    if (!repack) return [];
-
-    const unavailableUrisSet = new Set(repack.unavailableUris ?? []);
+    const unavailableUrisSet = new Set(repack?.unavailableUris ?? []);
 
     const downloaderMap = new Map<
       Downloader,
       { hasAvailable: boolean; hasUnavailable: boolean }
     >();
 
-    for (const uri of repack.uris) {
-      const uriDownloaders = getDownloadersForUri(uri);
-      const isAvailable = !unavailableUrisSet.has(uri);
+    if (repack) {
+      for (const uri of repack.uris) {
+        const uriDownloaders = getDownloadersForUri(uri);
+        const isAvailable = !unavailableUrisSet.has(uri);
 
-      for (const downloader of uriDownloaders) {
-        const existing = downloaderMap.get(downloader);
-        if (existing) {
-          existing.hasAvailable = existing.hasAvailable || isAvailable;
-          existing.hasUnavailable = existing.hasUnavailable || !isAvailable;
-        } else {
-          downloaderMap.set(downloader, {
-            hasAvailable: isAvailable,
-            hasUnavailable: !isAvailable,
-          });
+        for (const downloader of uriDownloaders) {
+          const existing = downloaderMap.get(downloader);
+          if (existing) {
+            existing.hasAvailable = existing.hasAvailable || isAvailable;
+            existing.hasUnavailable = existing.hasUnavailable || !isAvailable;
+          } else {
+            downloaderMap.set(downloader, {
+              hasAvailable: isAvailable,
+              hasUnavailable: !isAvailable,
+            });
+          }
         }
       }
     }
 
-    return Array.from(downloaderMap.entries()).map(([downloader, status]) => ({
-      downloader,
-      isAvailable: status.hasAvailable,
-    }));
-  }, [repack]);
+    const allDownloaders = Object.values(Downloader).filter(
+      (value) => typeof value === "number"
+    ) as Downloader[];
+
+    return allDownloaders
+      .filter((downloader) => downloader !== Downloader.Hydra) // Temporarily comment out Nimbus
+      .map((downloader) => {
+        const status = downloaderMap.get(downloader);
+        const canHandle = status !== undefined;
+        const isAvailable = status?.hasAvailable ?? false;
+
+        let isConfigured = true;
+        if (downloader === Downloader.RealDebrid) {
+          isConfigured = !!userPreferences?.realDebridApiToken;
+        } else if (downloader === Downloader.TorBox) {
+          isConfigured = !!userPreferences?.torBoxApiToken;
+        }
+        // } else if (downloader === Downloader.Hydra) {
+        //   isConfigured = isFeatureEnabled(Feature.Nimbus);
+        // }
+
+        const isAvailableButNotConfigured =
+          isAvailable && !isConfigured && canHandle;
+
+        return {
+          downloader,
+          isAvailable: isAvailable && isConfigured,
+          canHandle,
+          isAvailableButNotConfigured,
+        };
+      })
+      .sort((a, b) => {
+        if (a.isAvailable && !b.isAvailable) return -1;
+        if (!a.isAvailable && b.isAvailable) return 1;
+        if (
+          a.canHandle &&
+          !a.isAvailable &&
+          !a.isAvailableButNotConfigured &&
+          !b.canHandle
+        )
+          return -1;
+        if (
+          !a.canHandle &&
+          b.canHandle &&
+          !b.isAvailable &&
+          !b.isAvailableButNotConfigured
+        )
+          return 1;
+        if (a.isAvailableButNotConfigured && !b.canHandle) return -1;
+        if (!a.canHandle && b.isAvailableButNotConfigured) return 1;
+        if (
+          a.isAvailableButNotConfigured &&
+          b.canHandle &&
+          !b.isAvailable &&
+          !b.isAvailableButNotConfigured
+        )
+          return 1;
+        if (
+          !a.isAvailableButNotConfigured &&
+          a.canHandle &&
+          !a.isAvailable &&
+          b.isAvailableButNotConfigured
+        )
+          return -1;
+        return 0;
+      });
+  }, [
+    repack,
+    userPreferences?.realDebridApiToken,
+    userPreferences?.torBoxApiToken,
+    isFeatureEnabled,
+    Feature,
+  ]);
 
   const getDefaultDownloader = useCallback(
     (availableDownloaders: Downloader[]) => {
       if (availableDownloaders.length === 0) return null;
 
-      if (availableDownloaders.includes(Downloader.Hydra)) {
-        return Downloader.Hydra;
-      }
+      // if (availableDownloaders.includes(Downloader.Hydra)) {
+      //   return Downloader.Hydra;
+      // }
 
       if (availableDownloaders.includes(Downloader.RealDebrid)) {
         return Downloader.RealDebrid;
@@ -151,26 +219,12 @@ export function DownloadSettingsModal({
         .then((defaultDownloadsPath) => setSelectedPath(defaultDownloadsPath));
     }
 
-    const filteredDownloaders = downloaders.filter((downloader) => {
-      if (downloader === Downloader.RealDebrid)
-        return userPreferences?.realDebridApiToken;
-      if (downloader === Downloader.TorBox)
-        return userPreferences?.torBoxApiToken;
-      if (downloader === Downloader.Hydra)
-        return isFeatureEnabled(Feature.Nimbus);
-      return true;
-    });
+    const availableDownloaders = downloadOptions
+      .filter((option) => option.isAvailable)
+      .map((option) => option.downloader);
 
-    setSelectedDownloader(getDefaultDownloader(filteredDownloaders));
-  }, [
-    Feature,
-    isFeatureEnabled,
-    getDefaultDownloader,
-    userPreferences?.downloadsPath,
-    downloaders,
-    userPreferences?.realDebridApiToken,
-    userPreferences?.torBoxApiToken,
-  ]);
+    setSelectedDownloader(getDefaultDownloader(availableDownloaders));
+  }, [getDefaultDownloader, userPreferences?.downloadsPath, downloadOptions]);
 
   const handleChooseDownloadsPath = async () => {
     const { filePaths } = await window.electron.showOpenDialog({
@@ -225,49 +279,111 @@ export function DownloadSettingsModal({
         <div className="download-settings-modal__downloads-path-field">
           <span>{t("downloader")}</span>
 
-          <div className="download-settings-modal__downloaders-list">
-            {downloadOptions.map((option) => {
-              const isUnavailable = !option.isAvailable;
-              const shouldDisableOption =
-                isUnavailable ||
-                (option.downloader === Downloader.RealDebrid &&
-                  !userPreferences?.realDebridApiToken) ||
-                (option.downloader === Downloader.TorBox &&
-                  !userPreferences?.torBoxApiToken) ||
-                (option.downloader === Downloader.Hydra &&
-                  !isFeatureEnabled(Feature.Nimbus));
+          <div className="download-settings-modal__downloaders-list-wrapper">
+            <div className="download-settings-modal__downloaders-list">
+              {downloadOptions.map((option, index) => {
+                const isSelected = selectedDownloader === option.downloader;
+                const tooltipId = `availability-indicator-${option.downloader}`;
+                const isLastItem = index === downloadOptions.length - 1;
 
-              const isSelected = selectedDownloader === option.downloader;
+                const Indicator = option.isAvailable ? motion.span : "span";
 
-              return (
-                <button
-                  type="button"
-                  key={option.downloader}
-                  className={`download-settings-modal__downloader-item ${
-                    isSelected
-                      ? "download-settings-modal__downloader-item--selected"
-                      : ""
-                  } ${
-                    shouldDisableOption
-                      ? "download-settings-modal__downloader-item--disabled"
-                      : ""
-                  }`}
-                  disabled={shouldDisableOption}
-                  onClick={() => setSelectedDownloader(option.downloader)}
-                >
-                  <span className="download-settings-modal__downloader-name">
-                    {DOWNLOADER_NAME[option.downloader]}
-                  </span>
-                  <span
-                    className={`download-settings-modal__availability-indicator ${
-                      option.isAvailable
-                        ? "download-settings-modal__availability-indicator--available"
-                        : "download-settings-modal__availability-indicator--unavailable"
-                    }`}
-                  />
-                </button>
-              );
-            })}
+                return (
+                  <div
+                    key={option.downloader}
+                    className="download-settings-modal__downloader-item-wrapper"
+                  >
+                    <button
+                      type="button"
+                      className={`download-settings-modal__downloader-item ${
+                        isSelected
+                          ? "download-settings-modal__downloader-item--selected"
+                          : ""
+                      } ${
+                        isLastItem
+                          ? "download-settings-modal__downloader-item--last"
+                          : ""
+                      }`}
+                      onClick={() => {
+                        if (
+                          option.downloader === Downloader.RealDebrid &&
+                          option.isAvailableButNotConfigured
+                        ) {
+                          setShowRealDebridModal(true);
+                        } else {
+                          setSelectedDownloader(option.downloader);
+                        }
+                      }}
+                    >
+                      <span className="download-settings-modal__downloader-name">
+                        {DOWNLOADER_NAME[option.downloader]}
+                      </span>
+                      <div className="download-settings-modal__availability-indicator-wrapper">
+                        {option.isAvailable ? (
+                          <Indicator
+                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--available download-settings-modal__availability-indicator--pulsating`}
+                            animate={{
+                              scale: [1, 1.1, 1],
+                              opacity: [1, 0.7, 1],
+                            }}
+                            transition={{
+                              duration: 2,
+                              repeat: Infinity,
+                              ease: "easeInOut",
+                            }}
+                            data-tooltip-id={tooltipId}
+                            data-tooltip-content={t("downloader_online")}
+                          />
+                        ) : option.isAvailableButNotConfigured ? (
+                          <span
+                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--warning`}
+                            data-tooltip-id={tooltipId}
+                            data-tooltip-content={t(
+                              "downloader_not_configured"
+                            )}
+                          />
+                        ) : option.canHandle ? (
+                          <span
+                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--unavailable`}
+                            data-tooltip-id={tooltipId}
+                            data-tooltip-content={t("downloader_offline")}
+                          />
+                        ) : (
+                          <span
+                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--not-present`}
+                            data-tooltip-id={tooltipId}
+                            data-tooltip-content={t("downloader_not_available")}
+                          />
+                        )}
+                      </div>
+                      <Tooltip id={tooltipId} />
+                      {isSelected ? (
+                        <motion.div
+                          className="download-settings-modal__check-icon-wrapper"
+                          initial={{ scale: 0 }}
+                          animate={{ scale: 1 }}
+                          transition={{
+                            type: "spring",
+                            stiffness: 300,
+                            damping: 20,
+                          }}
+                        >
+                          <CheckCircleFillIcon
+                            size={16}
+                            className="download-settings-modal__check-icon"
+                          />
+                        </motion.div>
+                      ) : option.downloader === Downloader.RealDebrid &&
+                        option.canHandle ? (
+                        <div className="download-settings-modal__recommendation-badge">
+                          <Badge>{t("recommended")}</Badge>
+                        </div>
+                      ) : null}
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
           </div>
         </div>
 
@@ -319,7 +435,14 @@ export function DownloadSettingsModal({
           disabled={
             downloadStarting ||
             selectedDownloader === null ||
-            !hasWritePermission
+            !hasWritePermission ||
+            downloadOptions.some(
+              (option) =>
+                option.downloader === selectedDownloader &&
+                (option.isAvailableButNotConfigured ||
+                  (!option.isAvailable && option.canHandle) ||
+                  !option.canHandle)
+            )
           }
         >
           {downloadStarting ? (
@@ -335,6 +458,11 @@ export function DownloadSettingsModal({
           )}
         </Button>
       </div>
+
+      <RealDebridInfoModal
+        visible={showRealDebridModal}
+        onClose={() => setShowRealDebridModal(false)}
+      />
     </Modal>
   );
 }
diff --git a/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss
new file mode 100644
index 00000000..222ce4ec
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss
@@ -0,0 +1,37 @@
+@use "../../../scss/globals.scss";
+
+.real-debrid-info-modal {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2.5);
+    width: 100%;
+    max-width: 500px;
+  }
+
+  &__description-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 1.5);
+  }
+
+  &__description {
+    margin: 0;
+    color: globals.$body-color;
+    line-height: 1.6;
+  }
+
+  &__create-account {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+    color: #c0c1c7;
+    text-decoration: underline;
+    font-size: 14px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
diff --git a/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx
new file mode 100644
index 00000000..be82bd76
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button, Link, Modal } from "@renderer/components";
+import { LinkExternalIcon } from "@primer/octicons-react";
+import "./real-debrid-info-modal.scss";
+
+const realDebridReferralId = import.meta.env
+  .RENDERER_VITE_REAL_DEBRID_REFERRAL_ID;
+
+const REAL_DEBRID_URL = realDebridReferralId
+  ? `https://real-debrid.com/?id=${realDebridReferralId}`
+  : "https://real-debrid.com";
+
+export interface RealDebridInfoModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function RealDebridInfoModal({
+  visible,
+  onClose,
+}: Readonly<RealDebridInfoModalProps>) {
+  const { t } = useTranslation("game_details");
+  const { t: tSettings } = useTranslation("settings");
+  const navigate = useNavigate();
+
+  return (
+    <Modal
+      visible={visible}
+      title={tSettings("enable_real_debrid")}
+      onClose={onClose}
+    >
+      <div className="real-debrid-info-modal__content">
+        <div className="real-debrid-info-modal__description-container">
+          <p className="real-debrid-info-modal__description">
+            {tSettings("real_debrid_description")}
+          </p>
+          <Link
+            to={REAL_DEBRID_URL}
+            className="real-debrid-info-modal__create-account"
+          >
+            <LinkExternalIcon />
+            {tSettings("create_real_debrid_account")}
+          </Link>
+        </div>
+
+        <Button
+          onClick={() => {
+            onClose();
+            navigate("/settings?tab=4");
+          }}
+        >
+          {t("go_to_settings")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+

From 290209f37294a6df0a2cc637aeb4efd1bd9fda3d Mon Sep 17 00:00:00 2001
From: Chubby Granny Chaser <hydralauncher@proton.me>
Date: Sat, 3 Jan 2026 21:07:35 +0000
Subject: [PATCH 67/72] chore: remove unnecessary blank lines in
 RealDebridInfoModal component files

---
 .../src/pages/game-details/modals/real-debrid-info-modal.scss    | 1 -
 .../src/pages/game-details/modals/real-debrid-info-modal.tsx     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss
index 222ce4ec..5a97ae92 100644
--- a/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.scss
@@ -34,4 +34,3 @@
     }
   }
 }
-
diff --git a/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx
index be82bd76..be539db7 100644
--- a/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/real-debrid-info-modal.tsx
@@ -56,4 +56,3 @@ export function RealDebridInfoModal({
     </Modal>
   );
 }
-

From 87895bb715bc19edc49ec70d048f10e4f31b914a Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 23:22:40 +0200
Subject: [PATCH 68/72] refactor: enhance disabled state styling and logic in
 DownloadSettingsModal

---
 .../modals/download-settings-modal.scss       | 20 +++++++++++++++----
 .../modals/download-settings-modal.tsx        |  5 +++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index 79c8252d..d935daf9 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -87,6 +87,22 @@
     &--last {
       border-bottom: none;
     }
+
+    &:disabled {
+      cursor: default;
+
+      &:hover {
+        background-color: transparent;
+      }
+
+      .download-settings-modal__downloader-name {
+        opacity: 0.5;
+      }
+
+      .download-settings-modal__availability-indicator-wrapper {
+        opacity: 0.5;
+      }
+    }
   }
 
   &__downloader-item-wrapper {
@@ -94,10 +110,6 @@
     flex-direction: column;
   }
 
-  &__recommendation-badge {
-    margin-left: auto;
-  }
-
   &__check-icon {
     color: white;
     flex-shrink: 0;
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index 597f6ae5..f9dc6fa0 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -288,6 +288,10 @@ export function DownloadSettingsModal({
 
                 const Indicator = option.isAvailable ? motion.span : "span";
 
+                const isDisabled =
+                  !option.canHandle ||
+                  (!option.isAvailable && !option.isAvailableButNotConfigured);
+
                 return (
                   <div
                     key={option.downloader}
@@ -304,6 +308,7 @@ export function DownloadSettingsModal({
                           ? "download-settings-modal__downloader-item--last"
                           : ""
                       }`}
+                      disabled={isDisabled}
                       onClick={() => {
                         if (
                           option.downloader === Downloader.RealDebrid &&

From fe6553bcdc8ecec8200ec443bf80945e345ab966 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 23:23:35 +0200
Subject: [PATCH 69/72] chore: remove unused HTTPS import in vikingfile service

---
 src/main/services/hosters/vikingfile.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/services/hosters/vikingfile.ts b/src/main/services/hosters/vikingfile.ts
index 97b4236c..0c6d30dc 100644
--- a/src/main/services/hosters/vikingfile.ts
+++ b/src/main/services/hosters/vikingfile.ts
@@ -1,5 +1,4 @@
 import axios from "axios";
-import https from "node:https";
 import { logger } from "../logger";
 
 interface UnlockResponse {

From 01938f8905b57dc984bd431888469d26af10e2ad Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 23:34:19 +0200
Subject: [PATCH 70/72] refactor: simplify downloader sorting and enhance
 availability indicators in DownloadSettingsModal

---
 .../modals/download-settings-modal.scss       |   5 -
 .../modals/download-settings-modal.tsx        | 191 +++++++++---------
 2 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index d935daf9..75add6d3 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -52,11 +52,6 @@
     }
   }
 
-  &__recommendation-badge {
-    margin-left: calc(globals.$spacing-unit);
-    font-size: 10px;
-  }
-
   &__downloader-item {
     display: flex;
     align-items: center;
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index f9dc6fa0..9e3802e1 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -119,6 +119,17 @@ export function DownloadSettingsModal({
       (value) => typeof value === "number"
     ) as Downloader[];
 
+    const getDownloaderPriority = (option: {
+      isAvailable: boolean;
+      canHandle: boolean;
+      isAvailableButNotConfigured: boolean;
+    }) => {
+      if (option.isAvailable) return 0;
+      if (option.canHandle && !option.isAvailableButNotConfigured) return 1;
+      if (option.isAvailableButNotConfigured) return 2;
+      return 3;
+    };
+
     return allDownloaders
       .filter((downloader) => downloader !== Downloader.Hydra) // Temporarily comment out Nimbus
       .map((downloader) => {
@@ -146,41 +157,7 @@ export function DownloadSettingsModal({
           isAvailableButNotConfigured,
         };
       })
-      .sort((a, b) => {
-        if (a.isAvailable && !b.isAvailable) return -1;
-        if (!a.isAvailable && b.isAvailable) return 1;
-        if (
-          a.canHandle &&
-          !a.isAvailable &&
-          !a.isAvailableButNotConfigured &&
-          !b.canHandle
-        )
-          return -1;
-        if (
-          !a.canHandle &&
-          b.canHandle &&
-          !b.isAvailable &&
-          !b.isAvailableButNotConfigured
-        )
-          return 1;
-        if (a.isAvailableButNotConfigured && !b.canHandle) return -1;
-        if (!a.canHandle && b.isAvailableButNotConfigured) return 1;
-        if (
-          a.isAvailableButNotConfigured &&
-          b.canHandle &&
-          !b.isAvailable &&
-          !b.isAvailableButNotConfigured
-        )
-          return 1;
-        if (
-          !a.isAvailableButNotConfigured &&
-          a.canHandle &&
-          !a.isAvailable &&
-          b.isAvailableButNotConfigured
-        )
-          return -1;
-        return 0;
-      });
+      .sort((a, b) => getDownloaderPriority(a) - getDownloaderPriority(b));
   }, [
     repack,
     userPreferences?.realDebridApiToken,
@@ -292,6 +269,90 @@ export function DownloadSettingsModal({
                   !option.canHandle ||
                   (!option.isAvailable && !option.isAvailableButNotConfigured);
 
+                const getAvailabilityIndicator = () => {
+                  if (option.isAvailable) {
+                    return (
+                      <Indicator
+                        className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--available download-settings-modal__availability-indicator--pulsating`}
+                        animate={{
+                          scale: [1, 1.1, 1],
+                          opacity: [1, 0.7, 1],
+                        }}
+                        transition={{
+                          duration: 2,
+                          repeat: Infinity,
+                          ease: "easeInOut",
+                        }}
+                        data-tooltip-id={tooltipId}
+                        data-tooltip-content={t("downloader_online")}
+                      />
+                    );
+                  }
+
+                  if (option.isAvailableButNotConfigured) {
+                    return (
+                      <span
+                        className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--warning`}
+                        data-tooltip-id={tooltipId}
+                        data-tooltip-content={t("downloader_not_configured")}
+                      />
+                    );
+                  }
+
+                  if (option.canHandle) {
+                    return (
+                      <span
+                        className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--unavailable`}
+                        data-tooltip-id={tooltipId}
+                        data-tooltip-content={t("downloader_offline")}
+                      />
+                    );
+                  }
+
+                  return (
+                    <span
+                      className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--not-present`}
+                      data-tooltip-id={tooltipId}
+                      data-tooltip-content={t("downloader_not_available")}
+                    />
+                  );
+                };
+
+                const getRightContent = () => {
+                  if (isSelected) {
+                    return (
+                      <motion.div
+                        className="download-settings-modal__check-icon-wrapper"
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 20,
+                        }}
+                      >
+                        <CheckCircleFillIcon
+                          size={16}
+                          className="download-settings-modal__check-icon"
+                        />
+                      </motion.div>
+                    );
+                  }
+
+                  if (
+                    option.downloader === Downloader.RealDebrid &&
+                    option.canHandle
+                  ) {
+                    return (
+                      <div className="download-settings-modal__recommendation-badge">
+                        <Badge>{t("recommended")}</Badge>
+                      </div>
+                    );
+                  }
+
+                  return null;
+                };
+
                 return (
                   <div
                     key={option.downloader}
@@ -324,66 +385,10 @@ export function DownloadSettingsModal({
                         {DOWNLOADER_NAME[option.downloader]}
                       </span>
                       <div className="download-settings-modal__availability-indicator-wrapper">
-                        {option.isAvailable ? (
-                          <Indicator
-                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--available download-settings-modal__availability-indicator--pulsating`}
-                            animate={{
-                              scale: [1, 1.1, 1],
-                              opacity: [1, 0.7, 1],
-                            }}
-                            transition={{
-                              duration: 2,
-                              repeat: Infinity,
-                              ease: "easeInOut",
-                            }}
-                            data-tooltip-id={tooltipId}
-                            data-tooltip-content={t("downloader_online")}
-                          />
-                        ) : option.isAvailableButNotConfigured ? (
-                          <span
-                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--warning`}
-                            data-tooltip-id={tooltipId}
-                            data-tooltip-content={t(
-                              "downloader_not_configured"
-                            )}
-                          />
-                        ) : option.canHandle ? (
-                          <span
-                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--unavailable`}
-                            data-tooltip-id={tooltipId}
-                            data-tooltip-content={t("downloader_offline")}
-                          />
-                        ) : (
-                          <span
-                            className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--not-present`}
-                            data-tooltip-id={tooltipId}
-                            data-tooltip-content={t("downloader_not_available")}
-                          />
-                        )}
+                        {getAvailabilityIndicator()}
                       </div>
                       <Tooltip id={tooltipId} />
-                      {isSelected ? (
-                        <motion.div
-                          className="download-settings-modal__check-icon-wrapper"
-                          initial={{ scale: 0 }}
-                          animate={{ scale: 1 }}
-                          transition={{
-                            type: "spring",
-                            stiffness: 300,
-                            damping: 20,
-                          }}
-                        >
-                          <CheckCircleFillIcon
-                            size={16}
-                            className="download-settings-modal__check-icon"
-                          />
-                        </motion.div>
-                      ) : option.downloader === Downloader.RealDebrid &&
-                        option.canHandle ? (
-                        <div className="download-settings-modal__recommendation-badge">
-                          <Badge>{t("recommended")}</Badge>
-                        </div>
-                      ) : null}
+                      {getRightContent()}
                     </button>
                   </div>
                 );

From 4dfdc4d79884a7134f84c6fb8577efd5458113f8 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 23:40:07 +0200
Subject: [PATCH 71/72] chore: remove commented code in DownloadSettingsModal

---
 .../src/pages/game-details/modals/download-settings-modal.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index 9e3802e1..0a2c6721 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -170,10 +170,6 @@ export function DownloadSettingsModal({
     (availableDownloaders: Downloader[]) => {
       if (availableDownloaders.length === 0) return null;
 
-      // if (availableDownloaders.includes(Downloader.Hydra)) {
-      //   return Downloader.Hydra;
-      // }
-
       if (availableDownloaders.includes(Downloader.RealDebrid)) {
         return Downloader.RealDebrid;
       }

From 7e7390885e5c549d3e44fede27b68afa101b2d54 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sat, 3 Jan 2026 19:55:48 -0300
Subject: [PATCH 72/72] feat: adding ww feedback button

---
 src/renderer/src/app.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
index ac7ded9f..bc23f844 100644
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -52,7 +52,7 @@ export function App() {
 
   const { clearDownload, setLastPacket } = useDownload();
 
-  const wokwondersRef = useRef<WorkWondersSdk | null>(null);
+  const workwondersRef = useRef<WorkWondersSdk | null>(null);
 
   const {
     hasActiveSubscription,
@@ -118,24 +118,25 @@ export function App() {
 
   const setupWorkWonders = useCallback(
     async (token?: string, locale?: string) => {
-      if (wokwondersRef.current) return;
+      if (workwondersRef.current) return;
 
       const possibleLocales = ["en", "pt", "ru"];
 
       const parsedLocale =
         possibleLocales.find((l) => l === locale?.slice(0, 2)) ?? "en";
 
-      wokwondersRef.current = new WorkWondersSdk();
-      await wokwondersRef.current.init({
+      workwondersRef.current = new WorkWondersSdk();
+      await workwondersRef.current.init({
         organization: "hydra",
         token,
         locale: parsedLocale,
       });
 
-      await wokwondersRef.current.initChangelogWidget();
-      wokwondersRef.current.initChangelogWidgetMini();
+      await workwondersRef.current.initChangelogWidget();
+      workwondersRef.current.initChangelogWidgetMini();
+      workwondersRef.current.initFeedbackWidget();
     },
-    [wokwondersRef]
+    [workwondersRef]
   );
 
   const setupExternalResources = useCallback(async () => {
@@ -232,7 +233,7 @@ export function App() {
 
   useEffect(() => {
     if (contentRef.current) contentRef.current.scrollTop = 0;
-    wokwondersRef.current?.notifyUrlChange();
+    workwondersRef.current?.notifyUrlChange();
   }, [location.pathname, location.search]);
 
   useEffect(() => {