chore: update subproject commit reference and clean up imports in settings-general

src/locales/en/translation.json

@@ -436,6 +436,7 @@
     "launch_with_system": "Launch Hydra on system start-up",
     "general": "General",
     "behavior": "Behavior",
+    "achievements": "Achievements",
     "download_sources": "Download sources",
     "language": "Language",
     "api_token": "API Token",
@@ -559,6 +560,8 @@
     "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_achievement_screenshots": "Enable achievement screenshots",
+    "open_screenshots_directory": "Open screenshots directory",
     "enable_new_download_options_badges": "Show new download options badges",
     "achievement_custom_notification_position": "Achievement custom notification position",
     "top-left": "Top left",
@@ -635,6 +638,7 @@
     "amount_minutes_short": "{{amount}}m",
     "last_time_played": "Last played {{period}}",
     "activity": "Recent Activity",
+    "souvenirs": "Souvenirs",
     "library": "Library",
     "pinned": "Pinned",
     "sort_by": "Sort by:",
@@ -732,6 +736,12 @@
     "user_reviews": "Reviews",
     "delete_review": "Delete Review",
     "loading_reviews": "Loading reviews...",
+    "souvenir_deleted_successfully": "Souvenir deleted successfully",
+    "souvenir_deletion_failed": "Failed to delete souvenir",
+    "delete_souvenir_modal_title": "Are you sure you want to delete this souvenir?",
+    "delete_souvenir_modal_description": "This action cannot be undone.",
+    "delete_souvenir_modal_delete_button": "Delete",
+    "delete_souvenir_modal_cancel_button": "Cancel",
     "wrapped_2025": "Wrapped 2025",
     "view_my_wrapped_button": "View My Wrapped 2025",
     "view_wrapped_button": "View {{displayName}}'s Wrapped 2025"

src/main/constants.ts

@@ -31,6 +31,11 @@ export const logsPath = path.join(
   `logs${isStaging ? "-staging" : ""}`
 );
 
+export const screenshotsPath = path.join(
+  SystemPath.getPath("userData"),
+  "Screenshots"
+);
+
 export const achievementSoundPath = app.isPackaged
   ? path.join(process.resourcesPath, "achievement.wav")
   : path.join(__dirname, "..", "..", "resources", "achievement.wav");

src/main/events/index.ts

@@ -1,4 +1,9 @@
-import { appVersion, defaultDownloadsPath, isStaging } from "@main/constants";
+import {
+  appVersion,
+  defaultDownloadsPath,
+  isStaging,
+  screenshotsPath,
+} from "@main/constants";
 import { ipcMain } from "electron";
 
 import "./auth";
@@ -16,7 +21,6 @@ import "./themes";
 import "./torrenting";
 import "./user";
 import "./user-preferences";
-
 import { isPortableVersion } from "@main/helpers";
 
 ipcMain.handle("ping", () => "pong");
@@ -24,3 +28,4 @@ ipcMain.handle("getVersion", () => appVersion);
 ipcMain.handle("isStaging", () => isStaging);
 ipcMain.handle("isPortableVersion", () => isPortableVersion());
 ipcMain.handle("getDefaultDownloadsPath", () => defaultDownloadsPath);
+ipcMain.handle("getScreenshotsPath", () => screenshotsPath);

src/main/events/misc/open-folder.ts

@@ -0,0 +1,11 @@
+import { shell } from "electron";
+import { registerEvent } from "../register-event";
+
+const openFolder = async (
+  _event: Electron.IpcMainInvokeEvent,
+  folderPath: string
+) => {
+  return shell.openPath(folderPath);
+};
+
+registerEvent("openFolder", openFolder);

src/main/events/user/get-unlocked-achievements.ts

@@ -3,6 +3,8 @@ import { registerEvent } from "../register-event";
 import { getGameAchievementData } from "@main/services/achievements/get-game-achievement-data";
 import { db, gameAchievementsSublevel, levelKeys } from "@main/level";
 import { AchievementWatcherManager } from "@main/services/achievements/achievement-watcher-manager";
+import { HydraApi } from "@main/services";
+import { UserNotLoggedInError } from "@shared";
 
 export const getUnlockedAchievements = async (
   objectId: string,
@@ -31,6 +33,28 @@ export const getUnlockedAchievements = async (
 
   const unlockedAchievements = cachedAchievements?.unlockedAchievements ?? [];
 
+  let remoteUserAchievements: UserAchievement[] = [];
+  try {
+    const userDetails = await db.get<string, any>(levelKeys.user, {
+      valueEncoding: "json",
+    });
+
+    if (userDetails?.id) {
+      remoteUserAchievements = await HydraApi.get<UserAchievement[]>(
+        `/users/${userDetails.id}/games/achievements`,
+        {
+          shop,
+          objectId,
+          language: userPreferences?.language ?? "en",
+        }
+      );
+    }
+  } catch (error) {
+    if (!(error instanceof UserNotLoggedInError)) {
+      console.warn("Failed to fetch remote user achievements:", error);
+    }
+  }
+
   return achievementsData
     .map((achievementData) => {
       const unlockedAchievementData = unlockedAchievements.find(
@@ -42,6 +66,16 @@ export const getUnlockedAchievements = async (
         }
       );
 
+      // Find corresponding remote achievement data for image URL
+      const remoteAchievementData = remoteUserAchievements.find(
+        (remoteAchievement) => {
+          return (
+            remoteAchievement.name.toUpperCase() ==
+            achievementData.name.toUpperCase()
+          );
+        }
+      );
+
       const icongray = achievementData.icongray.endsWith("/")
         ? achievementData.icon
         : achievementData.icongray;
@@ -51,6 +85,7 @@ export const getUnlockedAchievements = async (
           ...achievementData,
           unlocked: true,
           unlockTime: unlockedAchievementData.unlockTime,
+          imageUrl: remoteAchievementData?.imageUrl || null,
         };
       }
 
@@ -63,6 +98,7 @@ export const getUnlockedAchievements = async (
           !achievementData.hidden || showHiddenAchievementsDescription
             ? achievementData.description
             : undefined,
+        imageUrl: remoteAchievementData?.imageUrl || null,
       };
     })
     .sort((a, b) => {

src/main/services/achievements/achievement-image-service.ts

@@ -0,0 +1,150 @@
+import fs from "node:fs";
+import path from "node:path";
+import axios from "axios";
+import { fileTypeFromFile } from "file-type";
+import { HydraApi } from "@main/services/hydra-api";
+import { gameAchievementsSublevel, levelKeys, db } from "@main/level";
+import { logger } from "@main/services/logger";
+import type { GameShop, User } from "@types";
+
+export class AchievementImageService {
+  private static async uploadImageToCDN(imagePath: string): Promise<string> {
+    const stat = fs.statSync(imagePath);
+    const fileBuffer = fs.readFileSync(imagePath);
+    const fileSizeInBytes = stat.size;
+
+    const response = await HydraApi.post<{
+      presignedUrl: string;
+      imageKey: string;
+    }>("/presigned-urls/achievement-image", {
+      imageExt: path.extname(imagePath).slice(1),
+      imageLength: fileSizeInBytes,
+    });
+
+    const mimeType = await fileTypeFromFile(imagePath);
+
+    await axios.put(response.presignedUrl, fileBuffer, {
+      headers: {
+        "Content-Type": mimeType?.mime,
+      },
+    });
+
+    return response.imageKey;
+  }
+
+  private static async storeImageLocally(imagePath: string): Promise<string> {
+    const fileBuffer = fs.readFileSync(imagePath);
+    const base64Image = fileBuffer.toString("base64");
+    const mimeType = await fileTypeFromFile(imagePath);
+
+    return `data:${mimeType?.mime || "image/jpeg"};base64,${base64Image}`;
+  }
+
+  private static async hasActiveSubscription(): Promise<boolean> {
+    return db
+      .get<string, User>(levelKeys.user, { valueEncoding: "json" })
+      .then((user) => {
+        const expiresAt = new Date(user?.subscription?.expiresAt ?? 0);
+        return expiresAt > new Date();
+      })
+      .catch(() => false);
+  }
+
+  private static async updateLocalAchievementData(
+    shop: GameShop,
+    gameId: string,
+    imageUrl: string
+  ): Promise<void> {
+    const achievementKey = levelKeys.game(shop, gameId);
+    const existingData = await gameAchievementsSublevel
+      .get(achievementKey)
+      .catch(() => null);
+
+    if (existingData) {
+      await gameAchievementsSublevel.put(achievementKey, {
+        ...existingData,
+        imageUrl,
+      });
+    }
+  }
+
+  private static cleanupImageFile(imagePath: string): void {
+    try {
+      fs.unlinkSync(imagePath);
+    } catch (error) {
+      logger.error(`Failed to cleanup screenshot file ${imagePath}:`, error);
+    }
+  }
+
+  /**
+   * Uploads an achievement image either to CDN (for subscribers) or stores locally
+   * @param gameId - The game identifier
+   * @param achievementName - The achievement name
+   * @param imagePath - Path to the image file to upload
+   * @param shop - The game shop (optional)
+   * @returns Promise with success status and imageKey (for subscribers) or imageUrl (for non-subscribers)
+   */
+  static async uploadAchievementImage(
+    gameId: string,
+    achievementName: string,
+    imagePath: string
+  ): Promise<{ success: boolean; imageKey?: string; imageUrl?: string }> {
+    try {
+      const hasSubscription = await this.hasActiveSubscription();
+
+      if (hasSubscription) {
+        const imageKey = await this.uploadImageToCDN(imagePath);
+        logger.log(
+          `Achievement image uploaded to CDN for ${gameId}:${achievementName}`
+        );
+        return { success: true, imageKey };
+      } else {
+        const imageUrl = await this.storeImageLocally(imagePath);
+        logger.log(
+          `Achievement image stored locally for ${gameId}:${achievementName}`
+        );
+        return { success: true, imageUrl };
+      }
+    } catch (error) {
+      logger.error(
+        `Failed to upload achievement image for ${gameId}:${achievementName}:`,
+        error
+      );
+      throw error;
+    }
+  }
+
+  /**
+   * Uploads achievement image and updates local database, with automatic cleanup
+   * @param gameId - The game identifier
+   * @param achievementName - The achievement name
+   * @param imagePath - Path to the image file to upload
+   * @param shop - The game shop
+   * @returns Promise with success status and imageKey or imageUrl
+   */
+  static async uploadAndUpdateAchievementImage(
+    gameId: string,
+    achievementName: string,
+    imagePath: string,
+    shop: GameShop
+  ): Promise<{ success: boolean; imageKey?: string; imageUrl?: string }> {
+    try {
+      const result = await this.uploadAchievementImage(
+        gameId,
+        achievementName,
+        imagePath
+      );
+
+      if (result.imageUrl) {
+        await this.updateLocalAchievementData(shop, gameId, result.imageUrl);
+      }
+
+      this.cleanupImageFile(imagePath);
+
+      return result;
+    } catch (error) {
+      this.cleanupImageFile(imagePath);
+      throw error;
+    }
+  }
+}

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

@@ -13,7 +13,7 @@ const getModifiedSinceHeader = (
     return undefined;
   }
 
-  if (userLanguage != cachedAchievements.language) {
+  if (userLanguage !== cachedAchievements.language) {
     return undefined;
   }
 

src/main/services/achievements/merge-achievements.ts

@@ -15,6 +15,8 @@ import { achievementsLogger } from "../logger";
 import { db, gameAchievementsSublevel, levelKeys } from "@main/level";
 import { getGameAchievementData } from "./get-game-achievement-data";
 import { AchievementWatcherManager } from "./achievement-watcher-manager";
+import { ScreenshotService } from "../screenshot";
+import { AchievementImageService } from "./achievement-image-service";
 
 const isRareAchievement = (points: number) => {
   const rawPercentage = (50 - Math.sqrt(points)) * 2;
@@ -53,11 +55,8 @@ const saveAchievementsOnLocal = async (
     });
 };
 
-export const mergeAchievements = async (
-  game: Game,
-  achievements: UnlockedAchievement[],
-  publishNotification: boolean
-) => {
+// Helpers extracted to lower cognitive complexity
+const getLocalData = async (game: Game) => {
   const gameKey = levelKeys.game(game.shop, game.objectId);
 
   let localGameAchievement = await gameAchievementsSublevel.get(gameKey);
@@ -73,11 +72,20 @@ export const mergeAchievements = async (
     localGameAchievement = await gameAchievementsSublevel.get(gameKey);
   }
 
-  const achievementsData = localGameAchievement?.achievements ?? [];
-  const unlockedAchievements = localGameAchievement?.unlockedAchievements ?? [];
+  return {
+    achievementsData: localGameAchievement?.achievements ?? [],
+    unlockedAchievements: localGameAchievement?.unlockedAchievements ?? [],
+    userPreferences,
+    gameKey,
+  };
+};
 
+const computeNewAndMergedAchievements = (
+  incoming: UnlockedAchievement[],
+  unlockedAchievements: UnlockedAchievement[]
+) => {
   const newAchievementsMap = new Map(
-    achievements.toReversed().map((achievement) => {
+    incoming.toReversed().map((achievement) => {
       return [achievement.name.toUpperCase(), achievement];
     })
   );
@@ -97,68 +105,154 @@ export const mergeAchievements = async (
       };
     });
 
-  const mergedLocalAchievements = unlockedAchievements.concat(newAchievements);
+  return {
+    newAchievements,
+    mergedLocalAchievements: unlockedAchievements.concat(newAchievements),
+  };
+};
 
+const publishAchievementNotificationIfNeeded = (
+  game: Game,
+  newAchievements: UnlockedAchievement[],
+  unlockedAchievements: UnlockedAchievement[],
+  achievementsData: any[],
+  userPreferences: UserPreferences,
+  mergedLocalCount: number,
+  publishNotification: boolean
+) => {
   if (
-    newAchievements.length &&
-    publishNotification &&
-    userPreferences.achievementNotificationsEnabled !== false
+    !newAchievements.length ||
+    !publishNotification ||
+    userPreferences.achievementNotificationsEnabled === false
   ) {
-    const filteredAchievements = newAchievements
-      .toSorted((a, b) => {
-        return a.unlockTime - b.unlockTime;
-      })
-      .map((achievement) => {
-        return achievementsData.find((steamAchievement) => {
-          return (
-            achievement.name.toUpperCase() ===
-            steamAchievement.name.toUpperCase()
-          );
-        });
-      })
-      .filter((achievement) => !!achievement);
-
-    const achievementsInfo: AchievementNotificationInfo[] =
-      filteredAchievements.map((achievement, index) => {
-        return {
-          title: achievement.displayName,
-          description: achievement.description,
-          points: achievement.points,
-          isHidden: achievement.hidden,
-          isRare: achievement.points
-            ? isRareAchievement(achievement.points)
-            : false,
-          isPlatinum:
-            index === filteredAchievements.length - 1 &&
-            newAchievements.length + unlockedAchievements.length ===
-              achievementsData.length,
-          iconUrl: achievement.icon,
-        };
-      });
-
-    achievementsLogger.log(
-      "Publishing achievement notification",
-      game.objectId,
-      game.title
-    );
-
-    if (userPreferences.achievementCustomNotificationsEnabled !== false) {
-      WindowManager.notificationWindow?.webContents.send(
-        "on-achievement-unlocked",
-        userPreferences.achievementCustomNotificationPosition ?? "top-left",
-        achievementsInfo
-      );
-    } else {
-      publishNewAchievementNotification({
-        achievements: achievementsInfo,
-        unlockedAchievementCount: mergedLocalAchievements.length,
-        totalAchievementCount: achievementsData.length,
-        gameTitle: game.title,
-        gameIcon: game.iconUrl,
-      });
-    }
+    return;
   }
 
+  const filteredAchievements = newAchievements
+    .toSorted((a, b) => a.unlockTime - b.unlockTime)
+    .map((achievement) => {
+      return achievementsData.find((steamAchievement: any) => {
+        return (
+          achievement.name.toUpperCase() === steamAchievement.name.toUpperCase()
+        );
+      });
+    })
+    .filter((achievement) => !!achievement);
+
+  const achievementsInfo: AchievementNotificationInfo[] =
+    filteredAchievements.map((achievement: any, index: number) => {
+      return {
+        title: achievement.displayName,
+        description: achievement.description,
+        points: achievement.points,
+        isHidden: achievement.hidden,
+        isRare: achievement.points
+          ? isRareAchievement(achievement.points)
+          : false,
+        isPlatinum:
+          index === filteredAchievements.length - 1 &&
+          newAchievements.length + unlockedAchievements.length ===
+            achievementsData.length,
+        iconUrl: achievement.icon,
+      };
+    });
+
+  achievementsLogger.log(
+    "Publishing achievement notification",
+    game.objectId,
+    game.title
+  );
+
+  if (userPreferences.achievementCustomNotificationsEnabled !== false) {
+    WindowManager.notificationWindow?.webContents.send(
+      "on-achievement-unlocked",
+      userPreferences.achievementCustomNotificationPosition ?? "top-left",
+      achievementsInfo
+    );
+  } else {
+    publishNewAchievementNotification({
+      achievements: achievementsInfo,
+      unlockedAchievementCount: mergedLocalCount,
+      totalAchievementCount: achievementsData.length,
+      gameTitle: game.title,
+      gameIcon: game.iconUrl,
+    });
+  }
+};
+
+const addImagesToNewAchievementsIfEnabled = async (
+  newAchievements: UnlockedAchievement[],
+  achievementsData: any[],
+  mergedLocalAchievements: UnlockedAchievement[],
+  game: Game,
+  userPreferences: UserPreferences
+): Promise<UnlockedAchievement[]> => {
+  const achievementsWithImages = [...mergedLocalAchievements];
+
+  if (
+    !newAchievements.length ||
+    userPreferences.enableAchievementScreenshots !== true
+  ) {
+    return achievementsWithImages;
+  }
+
+  try {
+    for (const achievement of newAchievements) {
+      try {
+        const achievementData = achievementsData.find(
+          (steamAchievement: any) => {
+            return (
+              achievement.name.toUpperCase() ===
+              steamAchievement.name.toUpperCase()
+            );
+          }
+        );
+
+        const achievementDisplayName =
+          achievementData?.displayName || achievement.name;
+
+        const screenshotPath = await ScreenshotService.captureDesktopScreenshot(
+          game.title,
+          achievementDisplayName
+        );
+
+        const uploadResult =
+          await AchievementImageService.uploadAchievementImage(
+            game.objectId,
+            achievement.name,
+            screenshotPath
+          );
+
+        const achievementIndex = achievementsWithImages.findIndex(
+          (a) => a.name.toUpperCase() === achievement.name.toUpperCase()
+        );
+        if (achievementIndex !== -1 && uploadResult.imageKey) {
+          achievementsWithImages[achievementIndex] = {
+            ...achievementsWithImages[achievementIndex],
+            imageKey: uploadResult.imageKey,
+          };
+        }
+      } catch (error) {
+        achievementsLogger.error("Failed to upload achievement image", error);
+      }
+    }
+  } catch (error) {
+    achievementsLogger.error(
+      "Failed to capture screenshot for achievement",
+      error
+    );
+  }
+
+  return achievementsWithImages;
+};
+
+const syncAchievements = async (
+  game: Game,
+  publishNotification: boolean,
+  achievementsWithImages: UnlockedAchievement[],
+  newAchievements: UnlockedAchievement[],
+  gameKey: string
+) => {
   const shouldSyncWithRemote =
     game.remoteId &&
     (newAchievements.length || AchievementWatcherManager.hasFinishedPreSearch);
@@ -168,26 +262,26 @@ export const mergeAchievements = async (
       "/profile/games/achievements",
       {
         id: game.remoteId,
-        achievements: mergedLocalAchievements,
+        achievements: achievementsWithImages,
       },
       { needsSubscription: !newAchievements.length }
     )
-      .then((response) => {
+      .then(async (response) => {
         if (response) {
-          return saveAchievementsOnLocal(
+          await saveAchievementsOnLocal(
             response.objectId,
             response.shop,
             response.achievements,
             publishNotification
           );
+        } else {
+          await saveAchievementsOnLocal(
+            game.objectId,
+            game.shop,
+            achievementsWithImages,
+            publishNotification
+          );
         }
-
-        return saveAchievementsOnLocal(
-          game.objectId,
-          game.shop,
-          mergedLocalAchievements,
-          publishNotification
-        );
       })
       .catch((err) => {
         if (err instanceof SubscriptionRequiredError) {
@@ -201,7 +295,7 @@ export const mergeAchievements = async (
         return saveAchievementsOnLocal(
           game.objectId,
           game.shop,
-          mergedLocalAchievements,
+          achievementsWithImages,
           publishNotification
         );
       })
@@ -212,10 +306,48 @@ export const mergeAchievements = async (
     await saveAchievementsOnLocal(
       game.objectId,
       game.shop,
-      mergedLocalAchievements,
+      achievementsWithImages,
       publishNotification
     );
   }
+};
+
+export const mergeAchievements = async (
+  game: Game,
+  achievements: UnlockedAchievement[],
+  publishNotification: boolean
+) => {
+  const { achievementsData, unlockedAchievements, userPreferences, gameKey } =
+    await getLocalData(game);
+
+  const { newAchievements, mergedLocalAchievements } =
+    computeNewAndMergedAchievements(achievements, unlockedAchievements);
+
+  publishAchievementNotificationIfNeeded(
+    game,
+    newAchievements,
+    unlockedAchievements,
+    achievementsData,
+    userPreferences,
+    mergedLocalAchievements.length,
+    publishNotification
+  );
+
+  const achievementsWithImages = await addImagesToNewAchievementsIfEnabled(
+    newAchievements,
+    achievementsData,
+    mergedLocalAchievements,
+    game,
+    userPreferences
+  );
+
+  await syncAchievements(
+    game,
+    publishNotification,
+    achievementsWithImages,
+    newAchievements,
+    gameKey
+  );
 
   return newAchievements.length;
 };

src/main/services/index.ts

@@ -13,6 +13,7 @@ export * from "./game-files-manager";
 export * from "./common-redist-manager";
 export * from "./aria2";
 export * from "./ws";
+export * from "./screenshot";
 export * from "./system-path";
 export * from "./library-sync";
 export * from "./wine";

src/main/services/screenshot.ts

@@ -0,0 +1,179 @@
+import { desktopCapturer, nativeImage, app } from "electron";
+import fs from "node:fs";
+import path from "node:path";
+import { logger } from "./logger";
+import { screenshotsPath } from "@main/constants";
+
+export class ScreenshotService {
+  private static readonly SCREENSHOT_QUALITY = 80;
+  private static readonly SCREENSHOT_FORMAT = "jpeg";
+  private static readonly MAX_WIDTH = 1280;
+  private static readonly MAX_HEIGHT = 720;
+
+  private static compressImage(
+    image: Electron.NativeImage
+  ): Electron.NativeImage {
+    const size = image.getSize();
+
+    let newWidth = size.width;
+    let newHeight = size.height;
+
+    if (newWidth > this.MAX_WIDTH || newHeight > this.MAX_HEIGHT) {
+      const aspectRatio = newWidth / newHeight;
+
+      if (newWidth > newHeight) {
+        newWidth = this.MAX_WIDTH;
+        newHeight = Math.round(newWidth / aspectRatio);
+      } else {
+        newHeight = this.MAX_HEIGHT;
+        newWidth = Math.round(newHeight * aspectRatio);
+      }
+    }
+
+    if (newWidth !== size.width || newHeight !== size.height) {
+      return image.resize({ width: newWidth, height: newHeight });
+    }
+
+    return image;
+  }
+
+  public static async captureDesktopScreenshot(
+    gameTitle?: string,
+    achievementName?: string
+  ): Promise<string> {
+    try {
+      const sources = await desktopCapturer.getSources({
+        types: ["screen"],
+        thumbnailSize: { width: 1920, height: 1080 },
+      });
+
+      if (sources.length === 0) {
+        throw new Error("No desktop sources available for screenshot");
+      }
+
+      console.log("sources", sources);
+
+      const primaryScreen = sources[0];
+
+      const originalImage = nativeImage.createFromDataURL(
+        primaryScreen.thumbnail.toDataURL()
+      );
+
+      const compressedImage = this.compressImage(originalImage);
+
+      let finalDir = screenshotsPath;
+      let filename: string;
+
+      if (gameTitle && achievementName) {
+        const sanitizedGameTitle = gameTitle.replaceAll(/[<>:"/\\|?*]/g, "_");
+        const gameDir = path.join(screenshotsPath, sanitizedGameTitle);
+        finalDir = gameDir;
+
+        const sanitizedAchievementName = achievementName.replaceAll(
+          /[<>:"/\\|?*]/g,
+          "_"
+        );
+        filename = `${sanitizedAchievementName}.${this.SCREENSHOT_FORMAT}`;
+      } else {
+        const timestamp = Date.now();
+        filename = `achievement_screenshot_${timestamp}.${this.SCREENSHOT_FORMAT}`;
+      }
+
+      if (!fs.existsSync(finalDir)) {
+        fs.mkdirSync(finalDir, { recursive: true });
+      }
+
+      const screenshotPath = path.join(finalDir, filename);
+
+      const jpegBuffer = compressedImage.toJPEG(this.SCREENSHOT_QUALITY);
+      fs.writeFileSync(screenshotPath, jpegBuffer);
+
+      logger.log(`Compressed screenshot saved to: ${screenshotPath}`);
+      return screenshotPath;
+    } catch (error) {
+      logger.error("Failed to capture desktop screenshot:", error);
+      throw error;
+    }
+  }
+
+  public static async cleanupOldScreenshots(): Promise<void> {
+    try {
+      const userDataPath = app.getPath("userData");
+      const screenshotsDir = path.join(userDataPath, "screenshots");
+
+      if (!fs.existsSync(screenshotsDir)) {
+        return;
+      }
+
+      const getAllFiles = (
+        dir: string
+      ): Array<{ name: string; path: string; mtime: Date }> => {
+        const files: Array<{ name: string; path: string; mtime: Date }> = [];
+
+        const items = fs.readdirSync(dir);
+        for (const item of items) {
+          const itemPath = path.join(dir, item);
+          const stat = fs.statSync(itemPath);
+
+          if (stat.isDirectory()) {
+            files.push(...getAllFiles(itemPath));
+          } else if (item.endsWith(`.${this.SCREENSHOT_FORMAT}`)) {
+            files.push({
+              name: item,
+              path: itemPath,
+              mtime: stat.mtime,
+            });
+          }
+        }
+
+        return files;
+      };
+
+      const allFiles = getAllFiles(screenshotsDir).sort(
+        (a, b) => b.mtime.getTime() - a.mtime.getTime()
+      );
+
+      const filesToDelete = allFiles.slice(50);
+
+      for (const file of filesToDelete) {
+        try {
+          fs.unlinkSync(file.path);
+          logger.log(`Cleaned up old screenshot: ${file.name}`);
+        } catch (error) {
+          logger.error(`Failed to delete screenshot ${file.name}:`, error);
+        }
+      }
+
+      const cleanupEmptyDirs = (dir: string) => {
+        if (dir === screenshotsDir) return;
+
+        try {
+          const items = fs.readdirSync(dir);
+          if (items.length === 0) {
+            fs.rmdirSync(dir);
+            logger.log(`Cleaned up empty directory: ${dir}`);
+          }
+        } catch (error) {
+          logger.error(`Failed to read directory ${dir}:`, error);
+        }
+      };
+
+      const gameDirectories = fs
+        .readdirSync(screenshotsDir)
+        .map((item) => path.join(screenshotsDir, item))
+        .filter((itemPath) => {
+          try {
+            return fs.statSync(itemPath).isDirectory();
+          } catch {
+            return false;
+          }
+        });
+
+      for (const gameDir of gameDirectories) {
+        cleanupEmptyDirs(gameDir);
+      }
+    } catch (error) {
+      logger.error("Failed to cleanup old screenshots:", error);
+    }
+  }
+}

src/main/services/user/get-user-data.ts

@@ -1,4 +1,9 @@
-import { User, type ProfileVisibility, type UserDetails } from "@types";
+import {
+  User,
+  type ProfileVisibility,
+  type UserDetails,
+  type UserPreferences,
+} from "@types";
 import { HydraApi } from "../hydra-api";
 import { UserNotLoggedInError } from "@shared";
 import { logger } from "../logger";
@@ -6,7 +11,24 @@ import { db } from "@main/level";
 import { levelKeys } from "@main/level/sublevels";
 
 export const getUserData = async () => {
-  return HydraApi.get<UserDetails>(`/profile/me`)
+  let language = "en";
+  try {
+    const userPreferences = await db.get<string, UserPreferences | null>(
+      levelKeys.userPreferences,
+      { valueEncoding: "json" }
+    );
+
+    if (userPreferences?.language) {
+      const supportedLanguages = ["pt", "ru", "es"];
+      const userLang = userPreferences.language.split("-")[0];
+      language = supportedLanguages.includes(userLang) ? userLang : "en";
+    }
+  } catch (error) {
+    logger.error("Failed to get user preferences for language", error);
+  }
+
+  const params = new URLSearchParams({ language });
+  return HydraApi.get<UserDetails>(`/profile/me?${params.toString()}`)
     .then(async (me) => {
       try {
         const user = await db.get<string, User>(levelKeys.user, {

src/preload/index.ts

@@ -363,9 +363,11 @@ contextBridge.exposeInMainWorld("electron", {
   ping: () => ipcRenderer.invoke("ping"),
   getVersion: () => ipcRenderer.invoke("getVersion"),
   getDefaultDownloadsPath: () => ipcRenderer.invoke("getDefaultDownloadsPath"),
+  getScreenshotsPath: () => ipcRenderer.invoke("getScreenshotsPath"),
   isStaging: () => ipcRenderer.invoke("isStaging"),
   isPortableVersion: () => ipcRenderer.invoke("isPortableVersion"),
   openExternal: (src: string) => ipcRenderer.invoke("openExternal", src),
+  openFolder: (path: string) => ipcRenderer.invoke("openFolder", path),
   openCheckout: () => ipcRenderer.invoke("openCheckout"),
   showOpenDialog: (options: Electron.OpenDialogOptions) =>
     ipcRenderer.invoke("showOpenDialog", options),

src/renderer/src/app.scss

@@ -47,6 +47,17 @@ button {
   font-family: inherit;
 }
 
+dialog {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
+  width: auto;
+  height: auto;
+}
+
 h1,
 h2,
 h3,

src/renderer/src/components/fullscreen-image-modal/fullscreen-image-modal.scss

@@ -0,0 +1,133 @@
+.fullscreen-image-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.2s ease-out;
+  cursor: pointer;
+
+  &__backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  &__container {
+    position: relative;
+    max-width: 95vw;
+    max-height: 95vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+  }
+
+  &__close-button {
+    position: fixed;
+    top: 52px;
+    right: 32px;
+    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-color 0.2s ease;
+    z-index: 10000;
+    pointer-events: auto;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &__image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  &__image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    animation: scaleIn 0.2s ease-out;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .fullscreen-image-modal {
+    &__close-button {
+      top: 16px;
+      right: 16px;
+      width: 36px;
+      height: 36px;
+    }
+
+    &__container {
+      max-width: 100vw;
+      max-height: 100vh;
+      padding: 48px 16px 16px;
+    }
+  }
+}
+
+@media (max-height: 420px) {
+  .fullscreen-image-modal {
+    &__close-button {
+      top: 8px;
+      right: 8px;
+      width: 32px;
+      height: 32px;
+    }
+
+    &__container {
+      padding-top: 40px;
+    }
+  }
+}

src/renderer/src/components/fullscreen-image-modal/fullscreen-image-modal.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from "react";
+import { XIcon } from "@primer/octicons-react";
+import "./fullscreen-image-modal.scss";
+
+interface FullscreenImageModalProps {
+  isOpen: boolean;
+  imageUrl: string;
+  imageAlt: string;
+  onClose: () => void;
+}
+
+export function FullscreenImageModal({
+  isOpen,
+  imageUrl,
+  imageAlt,
+  onClose,
+}: Readonly<FullscreenImageModalProps>) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <dialog className="fullscreen-image-modal" aria-modal="true" open>
+      <button
+        type="button"
+        className="fullscreen-image-modal__backdrop"
+        onClick={onClose}
+        aria-label="Close fullscreen image"
+      />
+      <div className="fullscreen-image-modal__container">
+        <button
+          className="fullscreen-image-modal__close-button"
+          onClick={onClose}
+          aria-label="Close fullscreen image"
+        >
+          <XIcon size={24} />
+        </button>
+
+        <div className="fullscreen-image-modal__image-container">
+          <img
+            src={imageUrl}
+            alt={imageAlt}
+            className="fullscreen-image-modal__image"
+            loading="eager"
+          />
+        </div>
+      </div>
+    </dialog>
+  );
+}

src/renderer/src/components/fullscreen-image-modal/index.ts

@@ -0,0 +1 @@
+export { FullscreenImageModal } from "./fullscreen-image-modal";

src/renderer/src/context/user-profile/user-profile.context.tsx

@@ -1,6 +1,12 @@
 import { darkenColor } from "@renderer/helpers";
 import { useAppSelector, useToast } from "@renderer/hooks";
-import type { Badge, UserProfile, UserStats, UserGame } from "@types";
+import type {
+  Badge,
+  UserProfile,
+  UserStats,
+  UserGame,
+  ProfileAchievement,
+} from "@types";
 import { average } from "color.js";
 
 import { createContext, useCallback, useEffect, useState } from "react";
@@ -202,22 +208,56 @@ export function UserProfileContextProvider({
     getUserStats();
     getUserLibraryGames();
 
-    return window.electron.hydraApi
-      .get<UserProfile>(`/users/${userId}`)
-      .then((userProfile) => {
-        setUserProfile(userProfile);
+    const currentLanguage = i18n.language.split("-")[0];
+    const supportedLanguages = ["pt", "ru", "es"];
+    const language = supportedLanguages.includes(currentLanguage)
+      ? currentLanguage
+      : "en";
+
+    const params = new URLSearchParams({ language });
+
+    // Fetch main profile data
+    const profilePromise = window.electron.hydraApi
+      .get<UserProfile>(`/users/${userId}?${params.toString()}`)
+      .catch(() => {
+        showErrorToast(t("user_not_found"));
+        navigate(-1);
+        throw new Error("Profile not found");
+      });
+
+    // Fetch achievements separately
+    const achievementsPromise = window.electron.hydraApi
+      .get<
+        ProfileAchievement[]
+      >(`/users/${userId}/achievements?${params.toString()}`)
+      .catch(() => null); // If achievements fail, just return null
+
+    return Promise.all([profilePromise, achievementsPromise]).then(
+      ([userProfile, achievements]) => {
+        // Merge achievements into the profile
+        const profileWithAchievements = {
+          ...userProfile,
+          achievements: achievements || null,
+        };
+
+        setUserProfile(profileWithAchievements);
 
         if (userProfile.profileImageUrl) {
           getHeroBackgroundFromImageUrl(userProfile.profileImageUrl).then(
             (color) => setHeroBackground(color)
           );
         }
-      })
-      .catch(() => {
-        showErrorToast(t("user_not_found"));
-        navigate(-1);
-      });
-  }, [navigate, getUserStats, getUserLibraryGames, showErrorToast, userId, t]);
+      }
+    );
+  }, [
+    navigate,
+    getUserStats,
+    getUserLibraryGames,
+    showErrorToast,
+    userId,
+    t,
+    i18n,
+  ]);
 
   const getBadges = useCallback(async () => {
     const language = i18n.language.split("-")[0];

src/renderer/src/declaration.d.ts

@@ -282,7 +282,9 @@ declare global {
     isStaging: () => Promise<boolean>;
     ping: () => string;
     getDefaultDownloadsPath: () => Promise<string>;
+    getScreenshotsPath: () => Promise<string>;
     isPortableVersion: () => Promise<boolean>;
+    openFolder: (path: string) => Promise<string>;
     showOpenDialog: (
       options: Electron.OpenDialogOptions
     ) => Promise<Electron.OpenDialogReturnValue>;

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -2,9 +2,11 @@ import { useDate } from "@renderer/hooks";
 import type { UserAchievement } from "@types";
 import { useTranslation } from "react-i18next";
 import "./achievements.scss";
-import { EyeClosedIcon } from "@primer/octicons-react";
+import { EyeClosedIcon, SearchIcon } from "@primer/octicons-react";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
+import { useState } from "react";
+import { FullscreenImageModal } from "@renderer/components/fullscreen-image-modal";
 
 interface AchievementListProps {
   achievements: UserAchievement[];
@@ -16,17 +18,34 @@ export function AchievementList({
   const { t } = useTranslation("achievement");
   const { showHydraCloudModal } = useSubscription();
   const { formatDateTime } = useDate();
+  const [fullscreenImage, setFullscreenImage] = useState<{
+    url: string;
+    alt: string;
+  } | null>(null);
+
+  const handleImageClick = (imageUrl: string, achievementName: string) => {
+    setFullscreenImage({
+      url: imageUrl,
+      alt: `${achievementName} screenshot`,
+    });
+  };
+
+  const closeFullscreenImage = () => {
+    setFullscreenImage(null);
+  };
 
   return (
     <ul className="achievements__list">
       {achievements.map((achievement) => (
         <li key={achievement.name} className="achievements__item">
-          <img
-            className={`achievements__item-image ${!achievement.unlocked ? "achievements__item-image--locked" : ""}`}
-            src={achievement.icon}
-            alt={achievement.displayName}
-            loading="lazy"
-          />
+          <div className="achievements__item-icon-container">
+            <img
+              className={`achievements__item-image ${!achievement.unlocked ? "achievements__item-image--locked" : ""}`}
+              src={achievement.icon}
+              alt={achievement.displayName}
+              loading="lazy"
+            />
+          </div>
 
           <div className="achievements__item-content">
             <h4 className="achievements__item-title">
@@ -44,6 +63,41 @@ export function AchievementList({
           </div>
 
           <div className="achievements__item-meta">
+            {achievement.imageUrl && achievement.unlocked && (
+              <div className="achievements__item-image-container">
+                <div className="achievements__item-custom-image-wrapper">
+                  <button
+                    type="button"
+                    className="achievements__item-image-button"
+                    onClick={() =>
+                      achievement.imageUrl &&
+                      handleImageClick(
+                        achievement.imageUrl,
+                        achievement.displayName
+                      )
+                    }
+                    aria-label={`View ${achievement.displayName} screenshot in fullscreen`}
+                    style={{
+                      cursor: "pointer",
+                      padding: 0,
+                      border: "none",
+                      background: "transparent",
+                    }}
+                  >
+                    <img
+                      className="achievements__item-custom-image"
+                      src={achievement.imageUrl}
+                      alt={`${achievement.displayName} screenshot`}
+                      loading="lazy"
+                    />
+                  </button>
+                  <div className="achievements__item-custom-image-overlay">
+                    <SearchIcon size={20} />
+                  </div>
+                </div>
+              </div>
+            )}
+
             {achievement.points != undefined ? (
               <div
                 className="achievements__item-points"
@@ -66,6 +120,7 @@ export function AchievementList({
                 <p className="achievements__item-points-value">???</p>
               </button>
             )}
+
             {achievement.unlockTime != null && (
               <div
                 className="achievements__item-unlock-time"
@@ -79,6 +134,13 @@ export function AchievementList({
           </div>
         </li>
       ))}
+
+      <FullscreenImageModal
+        isOpen={fullscreenImage !== null}
+        imageUrl={fullscreenImage?.url || ""}
+        imageAlt={fullscreenImage?.alt || ""}
+        onClose={closeFullscreenImage}
+      />
     </ul>
   );
 }

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -50,6 +50,7 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
             className="achievements-content__profile-avatar"
             src={user.profileImageUrl}
             alt={user.displayName}
+            loading="lazy"
           />
         ) : (
           <PersonIcon size={24} />
@@ -150,6 +151,7 @@ export function AchievementsContent({
             className="achievements-content__comparison__small-avatar"
             src={user.profileImageUrl}
             alt={user.displayName}
+            loading="lazy"
           />
         ) : (
           <PersonIcon size={24} />
@@ -166,6 +168,7 @@ export function AchievementsContent({
         src={shopDetails?.assets?.libraryHeroImageUrl ?? ""}
         className="achievements-content__achievements-list__image"
         alt={gameTitle}
+        loading="lazy"
       />
 
       <section
@@ -186,6 +189,7 @@ export function AchievementsContent({
                   src={shopDetails?.assets?.logoImageUrl ?? ""}
                   className="achievements-content__achievements-list__section__container__hero__content__game-logo"
                   alt={gameTitle}
+                  loading="lazy"
                 />
               </Link>
             </div>

src/renderer/src/pages/achievements/achievements.scss

@@ -117,6 +117,70 @@ $logo-max-width: 200px;
       }
     }
 
+    &-image-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 4px 0;
+    }
+
+    &-icon-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: globals.$spacing-unit;
+    }
+
+    &-custom-image {
+      width: 120px;
+      height: 60px;
+      border-radius: 4px;
+      object-fit: cover;
+      opacity: 0.9;
+      transition: all 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &-custom-image-wrapper {
+      position: relative;
+      display: inline-block;
+      cursor: pointer;
+
+      &:hover {
+        .achievements__item-custom-image {
+          filter: grayscale(50%) brightness(0.7);
+        }
+
+        .achievements__item-custom-image-overlay {
+          opacity: 1;
+        }
+      }
+    }
+
+    &-custom-image-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.3);
+      border-radius: 4px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+      color: white;
+
+      svg {
+        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
+      }
+    }
+
     &-content {
       flex: 1;
     }
@@ -153,6 +217,7 @@ $logo-max-width: 200px;
       display: flex;
       flex-direction: column;
       gap: 8px;
+      align-items: end;
     }
 
     &-points {

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

@@ -114,6 +114,7 @@ export function Sidebar() {
                     }`}
                     src={achievement.icon}
                     alt={achievement.displayName}
+                    loading="lazy"
                   />
                   <div>
                     <p>{achievement.displayName}</p>
@@ -164,6 +165,7 @@ export function Sidebar() {
                     }`}
                     src={achievement.icon}
                     alt={achievement.displayName}
+                    loading="lazy"
                   />
                   <div>
                     <p>{achievement.displayName}</p>

src/renderer/src/pages/profile/profile-content/delete-souvenir-modal.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { Button, Modal } from "@renderer/components";
+import "../../../pages/game-details/modals/delete-review-modal.scss";
+
+interface DeleteSouvenirModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteSouvenirModal({
+  visible,
+  onClose,
+  onConfirm,
+}: Readonly<DeleteSouvenirModalProps>) {
+  const { t } = useTranslation("user_profile");
+
+  const handleDeleteSouvenir = () => {
+    onConfirm();
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("delete_souvenir_modal_title")}
+      description={t("delete_souvenir_modal_description")}
+      onClose={onClose}
+    >
+      <div className="delete-review-modal__actions">
+        <Button onClick={onClose} theme="outline">
+          {t("delete_souvenir_modal_cancel_button")}
+        </Button>
+
+        <Button onClick={handleDeleteSouvenir} theme="danger">
+          {t("delete_souvenir_modal_delete_button")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

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

@@ -206,6 +206,313 @@
       display: block;
     }
   }
+
+  &__images-section {
+    margin-bottom: calc(globals.$spacing-unit * 3);
+  }
+
+  &__images-grid {
+    display: grid;
+    gap: calc(globals.$spacing-unit * 2);
+    padding-bottom: calc(globals.$spacing-unit);
+    grid-template-columns: repeat(2, 1fr);
+
+    @container #{globals.$app-container} (min-width: 1000px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 1300px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 2000px) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 2600px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 3000px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+  }
+
+  &__image-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all ease 0.2s;
+    position: relative;
+    container-type: inline-size;
+
+    &:hover {
+      transform: translateY(-4px);
+      background: rgba(0, 0, 0, 0.4);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    }
+
+    @container (max-width: 240px) {
+      .profile-content__image-achievement-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .profile-content__image-achievement-name {
+        font-size: 13px;
+      }
+
+      .profile-content__image-game-title {
+        font-size: 11px;
+      }
+    }
+
+    @container (max-width: 280px) {
+      .profile-content__image-card-content {
+        gap: calc(globals.$spacing-unit * 0.75);
+      }
+    }
+  }
+
+  &__image-card-header {
+    width: 100%;
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__image-achievement-image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .profile-content__image-button {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    &:hover .profile-content__image-achievement-image-overlay {
+      opacity: 1;
+    }
+  }
+
+  &__image-achievement-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+    display: block;
+  }
+
+  &__image-achievement-image-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+
+    svg {
+      color: white;
+    }
+  }
+
+  &__image-delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    background: transparent;
+    border: 1px solid rgba(244, 67, 54, 0.5);
+    border-radius: 6px;
+    padding: 0;
+    color: rgba(244, 67, 54, 0.9);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 32px;
+    height: 32px;
+
+    &:hover {
+      background: rgba(244, 67, 54, 0.1);
+      border-color: rgba(244, 67, 54, 0.8);
+      color: #ff7961;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      border-color: rgba(244, 67, 54, 0.2);
+    }
+  }
+
+  // Show overlay on keyboard focus for accessibility
+  &__image-button:focus-visible + &__image-achievement-image-overlay {
+    opacity: 1;
+  }
+
+  &__image-card-content {
+    padding: 16px;
+    background: #121212;
+    backdrop-filter: blur(10px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__image-card-row {
+    display: flex;
+    gap: calc(globals.$spacing-unit * 1.5);
+    align-items: center;
+  }
+
+  &__image-achievement-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__image-achievement-description {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+  }
+
+  &__image-card-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 8px;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  &__image-unlock-time {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 500;
+    z-index: 2;
+    pointer-events: none;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__image-achievement-info {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1);
+    position: relative;
+    z-index: 2;
+  }
+
+  &__image-achievement-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    flex-shrink: 0;
+
+    &--large {
+      width: 36px;
+      height: 36px;
+    }
+  }
+
+  &__image-achievement-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__image-game-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(globals.$spacing-unit * 1);
+    position: relative;
+    z-index: 2;
+    min-width: 0;
+  }
+
+  &__image-game-left {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.75);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__image-game-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  &__image-game-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.2;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__image-item {
+    flex-shrink: 0;
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform ease 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    transition: border-color ease 0.2s;
+
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+  }
 }
 
 // Reviews minimal styles

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

@@ -10,6 +10,7 @@ import {
 import { ProfileHero } from "../profile-hero/profile-hero";
 import { useAppDispatch, useFormat, useUserDetails } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
+import { TelescopeIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import type { GameShop } from "@types";
 import { LockedProfile } from "./locked-profile";
@@ -18,14 +19,17 @@ import { BadgesBox } from "./badges-box";
 import { FriendsBox, FriendsBoxAddButton } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
+import { logger } from "@renderer/logger";
+import { AnimatePresence } from "framer-motion";
 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 { FullscreenImageModal } from "@renderer/components/fullscreen-image-modal";
 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 { AnimatePresence } from "framer-motion";
+import { SouvenirsTab } from "./souvenirs-tab";
 import "./profile-content.scss";
 
 type SortOption = "playtime" | "achievementCount" | "playedRecently";
@@ -85,6 +89,7 @@ export function ProfileContent() {
     userStats,
     libraryGames,
     pinnedGames,
+    getUserProfile,
     getUserLibraryGames,
     loadMoreLibraryGames,
     hasMoreLibraryGames,
@@ -94,6 +99,10 @@ export function ProfileContent() {
   const [statsIndex, setStatsIndex] = useState(0);
   const [isAnimationRunning, setIsAnimationRunning] = useState(true);
   const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
+  const [fullscreenImage, setFullscreenImage] = useState<{
+    url: string;
+    alt: string;
+  } | null>(null);
   const statsAnimation = useRef(-1);
 
   const [activeTab, setActiveTab] = useState<ProfileTabType>("library");
@@ -206,7 +215,7 @@ export function ProfileContent() {
       setReviews((prev) => prev.filter((review) => review.id !== reviewId));
       setReviewsTotalCount((prev) => prev - 1);
     } catch (error) {
-      console.error("Failed to delete review:", error);
+      logger.error("Failed to delete review:", error);
     }
   };
 
@@ -301,7 +310,7 @@ export function ProfileContent() {
         `/games/${review.game.shop}/${review.game.objectId}/reviews/${reviewId}/${endpoint}`
       );
     } catch (error) {
-      console.error("Failed to vote on review:", error);
+      logger.error("Failed to vote on review:", error);
 
       // Rollback optimistic update on error
       setReviews((prev) =>
@@ -335,6 +344,17 @@ export function ProfileContent() {
     setIsAnimationRunning(true);
   };
 
+  const handleImageClick = (imageUrl: string, achievementName: string) => {
+    setFullscreenImage({
+      url: imageUrl,
+      alt: `${achievementName} screenshot`,
+    });
+  };
+
+  const closeFullscreenImage = () => {
+    setFullscreenImage(null);
+  };
+
   useEffect(() => {
     let zero = performance.now();
     if (!isAnimationRunning) return;
@@ -381,46 +401,70 @@ export function ProfileContent() {
     return (
       <section className="profile-content__section">
         <div className="profile-content__main">
-          <ProfileTabs
-            activeTab={activeTab}
-            reviewsTotalCount={reviewsTotalCount}
-            onTabChange={setActiveTab}
-          />
+          {!hasAnyGames && (
+            <div className="profile-content__no-games">
+              <div className="profile-content__telescope-icon">
+                <TelescopeIcon size={24} />
+              </div>
+              <h2>{t("no_recent_activity_title")}</h2>
+              {isMe && <p>{t("no_recent_activity_description")}</p>}
+            </div>
+          )}
 
-          <div className="profile-content__tab-panels">
-            <AnimatePresence mode="wait">
-              {activeTab === "library" && (
-                <LibraryTab
-                  sortBy={sortBy}
-                  onSortChange={setSortBy}
-                  pinnedGames={pinnedGames}
-                  libraryGames={libraryGames}
-                  hasMoreLibraryGames={hasMoreLibraryGames}
-                  isLoadingLibraryGames={isLoadingLibraryGames}
-                  statsIndex={statsIndex}
-                  userStats={userStats}
-                  animatedGameIdsRef={animatedGameIdsRef}
-                  onLoadMore={handleLoadMore}
-                  onMouseEnter={handleOnMouseEnterGameCard}
-                  onMouseLeave={handleOnMouseLeaveGameCard}
-                  isMe={isMe}
-                />
-              )}
+          {hasAnyGames && (
+            <div>
+              <ProfileTabs
+                activeTab={activeTab}
+                reviewsTotalCount={reviewsTotalCount}
+                souvenirsCount={userProfile?.achievements?.length || 0}
+                onTabChange={setActiveTab}
+              />
 
-              {activeTab === "reviews" && (
-                <ReviewsTab
-                  reviews={reviews}
-                  isLoadingReviews={isLoadingReviews}
-                  votingReviews={votingReviews}
-                  userDetailsId={userDetails?.id}
-                  formatPlayTime={formatPlayTime}
-                  getRatingText={getRatingText}
-                  onVote={handleVoteReview}
-                  onDelete={handleDeleteClick}
-                />
-              )}
-            </AnimatePresence>
-          </div>
+              <div className="profile-content__tab-panels">
+                <AnimatePresence mode="wait">
+                  {activeTab === "library" && (
+                    <LibraryTab
+                      sortBy={sortBy}
+                      onSortChange={setSortBy}
+                      pinnedGames={pinnedGames}
+                      libraryGames={libraryGames}
+                      hasMoreLibraryGames={hasMoreLibraryGames}
+                      isLoadingLibraryGames={isLoadingLibraryGames}
+                      statsIndex={statsIndex}
+                      userStats={userStats}
+                      animatedGameIdsRef={animatedGameIdsRef}
+                      onLoadMore={handleLoadMore}
+                      onMouseEnter={handleOnMouseEnterGameCard}
+                      onMouseLeave={handleOnMouseLeaveGameCard}
+                      isMe={isMe}
+                    />
+                  )}
+
+                  {activeTab === "reviews" && (
+                    <ReviewsTab
+                      reviews={reviews}
+                      isLoadingReviews={isLoadingReviews}
+                      votingReviews={votingReviews}
+                      userDetailsId={userDetails?.id}
+                      formatPlayTime={formatPlayTime}
+                      getRatingText={getRatingText}
+                      onVote={handleVoteReview}
+                      onDelete={handleDeleteClick}
+                    />
+                  )}
+
+                  {activeTab === "souvenirs" && (
+                    <SouvenirsTab
+                      achievements={userProfile?.achievements || []}
+                      onImageClick={handleImageClick}
+                      isMe={isMe}
+                      onAchievementDeleted={getUserProfile}
+                    />
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          )}
         </div>
 
         {shouldShowRightContent && (
@@ -475,15 +519,25 @@ export function ProfileContent() {
     statsIndex,
     libraryGames,
     pinnedGames,
-
     sortBy,
     activeTab,
-    // ensure reviews UI updates correctly
     reviews,
     reviewsTotalCount,
     isLoadingReviews,
     votingReviews,
     deleteModalVisible,
+    handleOnMouseEnterGameCard,
+    handleOnMouseLeaveGameCard,
+    handleImageClick,
+    handleLoadMore,
+    formatPlayTime,
+    getRatingText,
+    handleVoteReview,
+    handleDeleteClick,
+    userDetails,
+    animatedGameIdsRef,
+    hasMoreLibraryGames,
+    isLoadingLibraryGames,
   ]);
 
   return (
@@ -491,6 +545,13 @@ export function ProfileContent() {
       <ProfileHero />
 
       {content}
+
+      <FullscreenImageModal
+        isOpen={fullscreenImage !== null}
+        imageUrl={fullscreenImage?.url || ""}
+        imageAlt={fullscreenImage?.alt || ""}
+        onClose={closeFullscreenImage}
+      />
     </div>
   );
 }

src/renderer/src/pages/profile/profile-content/profile-tabs.tsx

@@ -2,17 +2,19 @@ import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import "./profile-content.scss";
 
-export type ProfileTabType = "library" | "reviews";
+export type ProfileTabType = "library" | "reviews" | "souvenirs";
 
 interface ProfileTabsProps {
   activeTab: ProfileTabType;
   reviewsTotalCount: number;
+  souvenirsCount: number;
   onTabChange: (tab: ProfileTabType) => void;
 }
 
 export function ProfileTabs({
   activeTab,
   reviewsTotalCount,
+  souvenirsCount,
   onTabChange,
 }: Readonly<ProfileTabsProps>) {
   const { t } = useTranslation("user_profile");
@@ -64,6 +66,29 @@ export function ProfileTabs({
           />
         )}
       </div>
+      <div className="profile-content__tab-wrapper">
+        <button
+          type="button"
+          className={`profile-content__tab ${activeTab === "souvenirs" ? "profile-content__tab--active" : ""}`}
+          onClick={() => onTabChange("souvenirs")}
+        >
+          {t("souvenirs")}
+          {souvenirsCount > 0 && (
+            <span className="profile-content__tab-badge">{souvenirsCount}</span>
+          )}
+        </button>
+        {activeTab === "souvenirs" && (
+          <motion.div
+            className="profile-content__tab-underline"
+            layoutId="tab-underline"
+            transition={{
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+            }}
+          />
+        )}
+      </div>
     </div>
   );
 }

src/renderer/src/pages/profile/profile-content/souvenirs-tab.tsx

@@ -0,0 +1,286 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { ChevronDownIcon, ChevronRightIcon } from "@primer/octicons-react";
+import { TrashIcon, Maximize2 } from "lucide-react";
+import { useState, useMemo } from "react";
+import type { ProfileAchievement } from "@types";
+import { useToast, useDate } from "@renderer/hooks";
+import { logger } from "@renderer/logger";
+import { DeleteSouvenirModal } from "./delete-souvenir-modal";
+import "./profile-content.scss";
+
+interface SouvenirGameGroupProps {
+  gameTitle: string;
+  gameIconUrl: string | null;
+  achievements: ProfileAchievement[];
+  isMe: boolean;
+  deletingIds: Set<string>;
+  onImageClick: (imageUrl: string, achievementName: string) => void;
+  onDeleteClick: (achievement: ProfileAchievement) => void;
+}
+
+function SouvenirGameGroup({
+  gameTitle,
+  gameIconUrl,
+  achievements,
+  isMe,
+  deletingIds,
+  onImageClick,
+  onDeleteClick,
+}: Readonly<SouvenirGameGroupProps>) {
+  const { formatDistance } = useDate();
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <div className="profile-content__images-section">
+      <button
+        className="profile-content__section-header"
+        onClick={() => setIsExpanded(!isExpanded)}
+        type="button"
+        style={{
+          width: "100%",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: "inherit",
+          padding: 0,
+        }}
+      >
+        <div className="profile-content__section-title-group">
+          <div className="profile-content__collapse-button">
+            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
+          </div>
+
+          {gameIconUrl && (
+            <img
+              src={gameIconUrl}
+              alt=""
+              style={{
+                width: 24,
+                height: 24,
+                borderRadius: 4,
+                objectFit: "cover",
+              }}
+            />
+          )}
+
+          <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>
+            {gameTitle}
+          </h3>
+
+          <span className="profile-content__section-badge">
+            {achievements.length}
+          </span>
+        </div>
+      </button>
+
+      {isExpanded && (
+        <div className="profile-content__images-grid">
+          {achievements.map((achievement, index) => (
+            <div
+              key={`${achievement.gameTitle}-${achievement.name}-${index}`}
+              className="profile-content__image-card"
+            >
+              <div className="profile-content__image-card-header">
+                <div className="profile-content__image-achievement-image-wrapper">
+                  <button
+                    type="button"
+                    className="profile-content__image-button"
+                    onClick={() =>
+                      onImageClick(
+                        achievement.imageUrl,
+                        achievement.displayName
+                      )
+                    }
+                    aria-label={`View ${achievement.displayName} screenshot in fullscreen`}
+                    style={{
+                      cursor: "pointer",
+                      padding: 0,
+                      border: "none",
+                      background: "transparent",
+                    }}
+                  >
+                    <img
+                      src={achievement.imageUrl}
+                      alt={achievement.displayName}
+                      className="profile-content__image-achievement-image"
+                      loading="lazy"
+                    />
+                  </button>
+                  <div className="profile-content__image-achievement-image-overlay">
+                    <Maximize2 size={24} />
+                  </div>
+                  <span className="profile-content__image-unlock-time">
+                    {formatDistance(
+                      new Date(achievement.unlockTime),
+                      new Date(),
+                      {
+                        addSuffix: true,
+                      }
+                    )}
+                  </span>
+                </div>
+              </div>
+
+              <div className="profile-content__image-card-content">
+                <div className="profile-content__image-card-row">
+                  {achievement.achievementIcon && (
+                    <img
+                      src={achievement.achievementIcon}
+                      alt=""
+                      className="profile-content__image-achievement-icon profile-content__image-achievement-icon--large"
+                      loading="lazy"
+                    />
+                  )}
+
+                  <div className="profile-content__image-achievement-text">
+                    <span className="profile-content__image-achievement-name">
+                      {achievement.displayName}
+                    </span>
+                    <p className="profile-content__image-achievement-description">
+                      {achievement.description}
+                    </p>
+                  </div>
+
+                  <div className="profile-content__image-card-right">
+                    {isMe && (
+                      <button
+                        type="button"
+                        className="profile-content__image-delete-button"
+                        onClick={() => onDeleteClick(achievement)}
+                        aria-label={`Delete ${achievement.displayName} souvenir`}
+                        disabled={deletingIds.has(achievement.id)}
+                      >
+                        <TrashIcon size={14} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SouvenirsTabProps {
+  achievements: ProfileAchievement[];
+  onImageClick: (imageUrl: string, achievementName: string) => void;
+  isMe: boolean;
+  onAchievementDeleted: () => void;
+}
+
+export function SouvenirsTab({
+  achievements,
+  onImageClick,
+  isMe,
+  onAchievementDeleted,
+}: Readonly<SouvenirsTabProps>) {
+  const { t } = useTranslation("user_profile");
+  const { showSuccessToast, showErrorToast } = useToast();
+  const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
+  const [achievementToDelete, setAchievementToDelete] =
+    useState<ProfileAchievement | null>(null);
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+
+  const handleDeleteAchievement = async (achievement: ProfileAchievement) => {
+    if (deletingIds.has(achievement.id)) return;
+
+    setDeletingIds((prev) => new Set(prev).add(achievement.id));
+
+    try {
+      await window.electron.hydraApi.delete(
+        `/profile/games/achievements/${achievement.gameId}/${achievement.name}/image`
+      );
+
+      showSuccessToast(
+        t("souvenir_deleted_successfully", "Souvenir deleted successfully")
+      );
+      onAchievementDeleted();
+    } catch (error) {
+      logger.error("Failed to delete souvenir:", error);
+      showErrorToast(
+        t("souvenir_deletion_failed", "Failed to delete souvenir")
+      );
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(achievement.id);
+        return next;
+      });
+    }
+  };
+
+  const handleDeleteClick = (achievement: ProfileAchievement) => {
+    setAchievementToDelete(achievement);
+    setDeleteModalVisible(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (achievementToDelete) {
+      handleDeleteAchievement(achievementToDelete);
+      setAchievementToDelete(null);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setDeleteModalVisible(false);
+    setAchievementToDelete(null);
+  };
+
+  const groupedAchievements = useMemo(() => {
+    const groups: Record<string, ProfileAchievement[]> = {};
+    for (const achievement of achievements) {
+      if (!groups[achievement.gameId]) {
+        groups[achievement.gameId] = [];
+      }
+      groups[achievement.gameId].push(achievement);
+    }
+    return groups;
+  }, [achievements]);
+
+  return (
+    <>
+      <motion.div
+        key="souvenirs"
+        className="profile-content__tab-panel"
+        initial={{ opacity: 0, x: -10 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: 10 }}
+        transition={{ duration: 0.2 }}
+        aria-hidden={false}
+      >
+        {achievements.length === 0 && (
+          <div className="profile-content__no-souvenirs">
+            <p>{t("no_souvenirs", "No souvenirs yet")}</p>
+          </div>
+        )}
+
+        {Object.entries(groupedAchievements).map(
+          ([gameId, groupAchievements]) => {
+            const firstAchievement = groupAchievements[0];
+            return (
+              <SouvenirGameGroup
+                key={gameId}
+                gameTitle={firstAchievement.gameTitle}
+                gameIconUrl={firstAchievement.gameIconUrl}
+                achievements={groupAchievements}
+                isMe={isMe}
+                deletingIds={deletingIds}
+                onImageClick={onImageClick}
+                onDeleteClick={handleDeleteClick}
+              />
+            );
+          }
+        )}
+      </motion.div>
+
+      <DeleteSouvenirModal
+        visible={deleteModalVisible}
+        onClose={handleDeleteCancel}
+        onConfirm={handleDeleteConfirm}
+      />
+    </>
+  );
+}

src/renderer/src/pages/settings/settings-achievements.scss

@@ -0,0 +1,214 @@
+@use "../../scss/globals.scss";
+
+.settings-achievements {
+  &__checkbox-container {
+    opacity: globals.$disabled-opacity;
+    cursor: not-allowed;
+
+    &--enabled {
+      opacity: 1;
+      cursor: pointer;
+    }
+
+    &--with-tooltip {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+    }
+
+    &--tooltip {
+      cursor: pointer;
+    }
+  }
+
+  &__button-container {
+    margin-top: 16px;
+  }
+
+  &__section {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+    &-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+
+    > * + * {
+      margin-top: 16px;
+    }
+
+    &--achievements {
+      // First section sits flush with container top
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+  }
+
+  &__achievement-custom-notification-position__select-variation {
+    max-width: 300px;
+  }
+
+  &__test-achievement-notification-button {
+    margin-top: 8px;
+  }
+
+  &__volume-control {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    label {
+      font-size: 14px;
+      color: globals.$muted-color;
+    }
+  }
+
+  &__volume-slider-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 200px;
+    position: relative;
+    --volume-percent: 0%;
+  }
+
+  &__volume-icon {
+    color: globals.$muted-color;
+    flex-shrink: 0;
+  }
+
+  &__volume-value {
+    font-size: 14px;
+    color: globals.$body-color;
+    font-weight: 500;
+    min-width: 40px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  &__volume-slider {
+    flex: 1;
+    height: 6px;
+    border-radius: 3px;
+    background: globals.$dark-background-color;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: globals.$muted-color;
+      cursor: pointer;
+      border: 2px solid globals.$background-color;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transition: all 0.2s;
+      margin-top: -6px;
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
+      }
+
+      &:active {
+        transform: scale(1.05);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: globals.$muted-color;
+      cursor: pointer;
+      border: 2px solid globals.$background-color;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transition: all 0.2s;
+      margin-top: -6px;
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
+      }
+
+      &:active {
+        transform: scale(1.05);
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: linear-gradient(
+        to right,
+        globals.$muted-color 0%,
+        globals.$muted-color var(--volume-percent),
+        globals.$dark-background-color var(--volume-percent),
+        globals.$dark-background-color 100%
+      );
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: globals.$dark-background-color;
+    }
+
+    &::-moz-range-progress {
+      height: 6px;
+      border-radius: 3px;
+      background: globals.$muted-color;
+    }
+
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+      }
+
+      &::-moz-range-thumb {
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    &::-ms-thumb {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: globals.$muted-color;
+      cursor: pointer;
+      border: 2px solid globals.$background-color;
+    }
+
+    &::-ms-track {
+      width: 100%;
+      height: 6px;
+      background: transparent;
+      border-color: transparent;
+      color: transparent;
+    }
+
+    &::-ms-fill-lower {
+      background: globals.$muted-color;
+      border-radius: 3px;
+    }
+
+    &::-ms-fill-upper {
+      background: globals.$dark-background-color;
+      border-radius: 3px;
+    }
+  }
+}

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

@@ -0,0 +1,264 @@
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { CheckboxField, Button, SelectField } from "@renderer/components";
+import { useAppSelector } from "@renderer/hooks";
+import { settingsContext } from "@renderer/context";
+import "./settings-achievements.scss";
+import { QuestionIcon, UnmuteIcon } from "@primer/octicons-react";
+import { AchievementCustomNotificationPosition } from "@types";
+
+export function SettingsAchievements() {
+  const { t } = useTranslation("settings");
+
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
+  const { updateUserPreferences } = useContext(settingsContext);
+
+  const [form, setForm] = useState({
+    showHiddenAchievementsDescription: false,
+    enableSteamAchievements: false,
+    enableAchievementScreenshots: false,
+    achievementNotificationsEnabled: true,
+    achievementCustomNotificationsEnabled: true,
+    achievementCustomNotificationPosition:
+      "top-left" as AchievementCustomNotificationPosition,
+    achievementSoundVolume: 15,
+  });
+
+  const volumeUpdateTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (userPreferences) {
+      setForm((prev) => ({
+        ...prev,
+        showHiddenAchievementsDescription:
+          userPreferences.showHiddenAchievementsDescription ?? false,
+        enableSteamAchievements:
+          userPreferences.enableSteamAchievements ?? false,
+        enableAchievementScreenshots:
+          userPreferences.enableAchievementScreenshots ?? false,
+        achievementNotificationsEnabled:
+          userPreferences.achievementNotificationsEnabled ?? true,
+        achievementCustomNotificationsEnabled:
+          userPreferences.achievementCustomNotificationsEnabled ?? true,
+        achievementCustomNotificationPosition:
+          userPreferences.achievementCustomNotificationPosition ?? "top-left",
+        achievementSoundVolume: Math.round(
+          (userPreferences.achievementSoundVolume ?? 0.15) * 100
+        ),
+      }));
+    }
+  }, [userPreferences]);
+
+  const achievementCustomNotificationPositionOptions = useMemo(() => {
+    return [
+      "top-left",
+      "top-center",
+      "top-right",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right",
+    ].map((position) => ({
+      key: position,
+      value: position,
+      label: t(position),
+    }));
+  }, [t]);
+
+  const handleChange = async (values: Partial<typeof form>) => {
+    setForm((prev) => ({ ...prev, ...values }));
+    await updateUserPreferences(values);
+  };
+
+  const handleVolumeChange = useCallback(
+    (newVolume: number) => {
+      setForm((prev) => ({ ...prev, achievementSoundVolume: newVolume }));
+
+      if (volumeUpdateTimeoutRef.current) {
+        clearTimeout(volumeUpdateTimeoutRef.current);
+      }
+
+      volumeUpdateTimeoutRef.current = setTimeout(() => {
+        updateUserPreferences({ achievementSoundVolume: newVolume / 100 });
+      }, 300);
+    },
+    [updateUserPreferences]
+  );
+
+  const handleChangeAchievementCustomNotificationPosition = async (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const value = event.target.value as AchievementCustomNotificationPosition;
+
+    await handleChange({ achievementCustomNotificationPosition: value });
+    window.electron.updateAchievementCustomNotificationWindow();
+  };
+
+  return (
+    <div className="settings-achievements">
+      <div className="settings-achievements__section settings-achievements__section--achievements">
+        <CheckboxField
+          label={t("show_hidden_achievement_description")}
+          checked={form.showHiddenAchievementsDescription}
+          onChange={() =>
+            handleChange({
+              showHiddenAchievementsDescription:
+                !form.showHiddenAchievementsDescription,
+            })
+          }
+        />
+
+        <div className="settings-achievements__checkbox-container--with-tooltip">
+          <CheckboxField
+            label={t("enable_steam_achievements")}
+            checked={form.enableSteamAchievements}
+            onChange={() =>
+              handleChange({
+                enableSteamAchievements: !form.enableSteamAchievements,
+              })
+            }
+          />
+
+          <small
+            className="settings-achievements__checkbox-container--tooltip"
+            data-open-article="steam-achievements"
+          >
+            <QuestionIcon size={12} />
+          </small>
+        </div>
+
+        <div className="settings-achievements__checkbox-container--with-tooltip">
+          <CheckboxField
+            label={t("enable_achievement_screenshots")}
+            checked={form.enableAchievementScreenshots}
+            disabled={window.electron.platform === "linux"}
+            onChange={() =>
+              handleChange({
+                enableAchievementScreenshots:
+                  !form.enableAchievementScreenshots,
+              })
+            }
+          />
+
+          <small
+            className="settings-achievements__checkbox-container--tooltip"
+            data-open-article="achievement-souvenirs"
+          >
+            <QuestionIcon size={12} />
+          </small>
+        </div>
+
+        <div className="settings-achievements__button-container">
+          <Button
+            theme="outline"
+            disabled={window.electron.platform === "linux"}
+            onClick={async () => {
+              const screenshotsPath =
+                await window.electron.getScreenshotsPath();
+              window.electron.openFolder(screenshotsPath);
+            }}
+          >
+            {t("open_screenshots_directory")}
+          </Button>
+        </div>
+      </div>
+
+      <div className="settings-achievements__section settings-achievements__section--notifications">
+        <h3 className="settings-achievements__section-title">
+          {t("notifications")}
+        </h3>
+
+        <CheckboxField
+          label={t("enable_achievement_notifications")}
+          checked={form.achievementNotificationsEnabled}
+          onChange={async () => {
+            await handleChange({
+              achievementNotificationsEnabled:
+                !form.achievementNotificationsEnabled,
+            });
+            window.electron.updateAchievementCustomNotificationWindow();
+          }}
+        />
+
+        <CheckboxField
+          label={t("enable_achievement_custom_notifications")}
+          checked={form.achievementCustomNotificationsEnabled}
+          disabled={!form.achievementNotificationsEnabled}
+          onChange={async () => {
+            await handleChange({
+              achievementCustomNotificationsEnabled:
+                !form.achievementCustomNotificationsEnabled,
+            });
+            window.electron.updateAchievementCustomNotificationWindow();
+          }}
+        />
+
+        {form.achievementNotificationsEnabled &&
+          form.achievementCustomNotificationsEnabled && (
+            <>
+              <SelectField
+                className="settings-achievements__achievement-custom-notification-position__select-variation"
+                label={t("achievement_custom_notification_position")}
+                value={form.achievementCustomNotificationPosition}
+                onChange={handleChangeAchievementCustomNotificationPosition}
+                options={achievementCustomNotificationPositionOptions}
+              />
+
+              <Button
+                className="settings-achievements__test-achievement-notification-button"
+                onClick={() =>
+                  window.electron.showAchievementTestNotification()
+                }
+              >
+                {t("test_notification")}
+              </Button>
+            </>
+          )}
+
+        {form.achievementNotificationsEnabled && (
+          <div className="settings-achievements__volume-control">
+            <label htmlFor="achievement-volume">
+              {t("achievement_sound_volume")}
+            </label>
+            <div className="settings-achievements__volume-slider-wrapper">
+              <UnmuteIcon
+                size={16}
+                className="settings-achievements__volume-icon"
+              />
+              <input
+                id="achievement-volume"
+                type="range"
+                min="0"
+                max="100"
+                value={form.achievementSoundVolume}
+                onChange={(e) => {
+                  const volumePercent = parseInt(e.target.value, 10);
+                  if (!isNaN(volumePercent)) {
+                    handleVolumeChange(volumePercent);
+                  }
+                }}
+                className="settings-achievements__volume-slider"
+                style={
+                  {
+                    "--volume-percent": `${form.achievementSoundVolume}%`,
+                  } as React.CSSProperties
+                }
+              />
+              <span className="settings-achievements__volume-value">
+                {form.achievementSoundVolume}%
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/renderer/src/pages/settings/settings-behavior.scss

@@ -21,4 +21,25 @@
       cursor: pointer;
     }
   }
+
+  &__button-container {
+    margin-top: 16px;
+  }
+
+  &__section {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+    &-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+
+    // Add spacing between elements in the section
+    > * + * {
+      margin-top: 16px;
+    }
+  }
 }

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

@@ -5,7 +5,6 @@ import { CheckboxField } from "@renderer/components";
 import { useAppSelector } from "@renderer/hooks";
 import { settingsContext } from "@renderer/context";
 import "./settings-behavior.scss";
-import { QuestionIcon } from "@primer/octicons-react";
 
 export function SettingsBehavior() {
   const userPreferences = useAppSelector(
@@ -23,10 +22,8 @@ export function SettingsBehavior() {
     disableNsfwAlert: false,
     enableAutoInstall: false,
     seedAfterDownloadComplete: false,
-    showHiddenAchievementsDescription: false,
     showDownloadSpeedInMegabytes: false,
     extractFilesByDefault: true,
-    enableSteamAchievements: false,
     autoplayGameTrailers: true,
     hideToTrayOnGameStart: false,
     enableNewDownloadOptionsBadges: true,
@@ -45,13 +42,9 @@ export function SettingsBehavior() {
         enableAutoInstall: userPreferences.enableAutoInstall ?? false,
         seedAfterDownloadComplete:
           userPreferences.seedAfterDownloadComplete ?? false,
-        showHiddenAchievementsDescription:
-          userPreferences.showHiddenAchievementsDescription ?? false,
         showDownloadSpeedInMegabytes:
           userPreferences.showDownloadSpeedInMegabytes ?? false,
         extractFilesByDefault: userPreferences.extractFilesByDefault ?? true,
-        enableSteamAchievements:
-          userPreferences.enableSteamAchievements ?? false,
         autoplayGameTrailers: userPreferences.autoplayGameTrailers ?? true,
         hideToTrayOnGameStart: userPreferences.hideToTrayOnGameStart ?? false,
         enableNewDownloadOptionsBadges:
@@ -163,17 +156,6 @@ export function SettingsBehavior() {
         }
       />
 
-      <CheckboxField
-        label={t("show_hidden_achievement_description")}
-        checked={form.showHiddenAchievementsDescription}
-        onChange={() =>
-          handleChange({
-            showHiddenAchievementsDescription:
-              !form.showHiddenAchievementsDescription,
-          })
-        }
-      />
-
       <CheckboxField
         label={t("show_download_speed_in_megabytes")}
         checked={form.showDownloadSpeedInMegabytes}
@@ -194,25 +176,6 @@ export function SettingsBehavior() {
         }
       />
 
-      <div className={`settings-behavior__checkbox-container--with-tooltip`}>
-        <CheckboxField
-          label={t("enable_steam_achievements")}
-          checked={form.enableSteamAchievements}
-          onChange={() =>
-            handleChange({
-              enableSteamAchievements: !form.enableSteamAchievements,
-            })
-          }
-        />
-
-        <small
-          className="settings-behavior__checkbox-container--tooltip"
-          data-open-article="steam-achievements"
-        >
-          <QuestionIcon size={12} />
-        </small>
-      </div>
-
       <CheckboxField
         label={t("enable_new_download_options_badges")}
         checked={form.enableNewDownloadOptionsBadges}

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

@@ -1,11 +1,4 @@
-import {
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  useCallback,
-  useRef,
-} from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   TextField,
   Button,
@@ -19,9 +12,8 @@ import languageResources from "@locales";
 import { orderBy } from "lodash-es";
 import { settingsContext } from "@renderer/context";
 import "./settings-general.scss";
-import { DesktopDownloadIcon, UnmuteIcon } from "@primer/octicons-react";
+import { DesktopDownloadIcon } from "@primer/octicons-react";
 import { logger } from "@renderer/logger";
-import { AchievementCustomNotificationPosition } from "@types";
 
 interface LanguageOption {
   option: string;
@@ -46,11 +38,6 @@ export function SettingsGeneral() {
     repackUpdatesNotificationsEnabled: false,
     friendRequestNotificationsEnabled: false,
     friendStartGameNotificationsEnabled: true,
-    achievementNotificationsEnabled: true,
-    achievementCustomNotificationsEnabled: true,
-    achievementCustomNotificationPosition:
-      "top-left" as AchievementCustomNotificationPosition,
-    achievementSoundVolume: 15,
     language: "",
     customStyles: window.localStorage.getItem("customStyles") || "",
   });
@@ -59,8 +46,6 @@ export function SettingsGeneral() {
 
   const [defaultDownloadsPath, setDefaultDownloadsPath] = useState("");
 
-  const volumeUpdateTimeoutRef = useRef<NodeJS.Timeout>();
-
   useEffect(() => {
     window.electron.getDefaultDownloadsPath().then((path) => {
       setDefaultDownloadsPath(path);
@@ -91,9 +76,6 @@ export function SettingsGeneral() {
 
     return () => {
       clearInterval(interval);
-      if (volumeUpdateTimeoutRef.current) {
-        clearTimeout(volumeUpdateTimeoutRef.current);
-      }
     };
   }, []);
 
@@ -117,15 +99,6 @@ export function SettingsGeneral() {
           userPreferences.downloadNotificationsEnabled ?? false,
         repackUpdatesNotificationsEnabled:
           userPreferences.repackUpdatesNotificationsEnabled ?? false,
-        achievementNotificationsEnabled:
-          userPreferences.achievementNotificationsEnabled ?? true,
-        achievementCustomNotificationsEnabled:
-          userPreferences.achievementCustomNotificationsEnabled ?? true,
-        achievementCustomNotificationPosition:
-          userPreferences.achievementCustomNotificationPosition ?? "top-left",
-        achievementSoundVolume: Math.round(
-          (userPreferences.achievementSoundVolume ?? 0.15) * 100
-        ),
         friendRequestNotificationsEnabled:
           userPreferences.friendRequestNotificationsEnabled ?? false,
         friendStartGameNotificationsEnabled:
@@ -135,21 +108,6 @@ export function SettingsGeneral() {
     }
   }, [userPreferences, defaultDownloadsPath]);
 
-  const achievementCustomNotificationPositionOptions = useMemo(() => {
-    return [
-      "top-left",
-      "top-center",
-      "top-right",
-      "bottom-left",
-      "bottom-center",
-      "bottom-right",
-    ].map((position) => ({
-      key: position,
-      value: position,
-      label: t(position),
-    }));
-  }, [t]);
-
   const handleLanguageChange = (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
@@ -164,31 +122,6 @@ export function SettingsGeneral() {
     await updateUserPreferences(values);
   };
 
-  const handleVolumeChange = useCallback(
-    (newVolume: number) => {
-      setForm((prev) => ({ ...prev, achievementSoundVolume: newVolume }));
-
-      if (volumeUpdateTimeoutRef.current) {
-        clearTimeout(volumeUpdateTimeoutRef.current);
-      }
-
-      volumeUpdateTimeoutRef.current = setTimeout(() => {
-        updateUserPreferences({ achievementSoundVolume: newVolume / 100 });
-      }, 300);
-    },
-    [updateUserPreferences]
-  );
-
-  const handleChangeAchievementCustomNotificationPosition = async (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    const value = event.target.value as AchievementCustomNotificationPosition;
-
-    await handleChange({ achievementCustomNotificationPosition: value });
-
-    window.electron.updateAchievementCustomNotificationWindow();
-  };
-
   const handleChooseDownloadsPath = async () => {
     const { filePaths } = await window.electron.showOpenDialog({
       defaultPath: form.downloadsPath,
@@ -293,86 +226,6 @@ export function SettingsGeneral() {
         }
       />
 
-      <CheckboxField
-        label={t("enable_achievement_notifications")}
-        checked={form.achievementNotificationsEnabled}
-        onChange={async () => {
-          await handleChange({
-            achievementNotificationsEnabled:
-              !form.achievementNotificationsEnabled,
-          });
-
-          window.electron.updateAchievementCustomNotificationWindow();
-        }}
-      />
-
-      <CheckboxField
-        label={t("enable_achievement_custom_notifications")}
-        checked={form.achievementCustomNotificationsEnabled}
-        disabled={!form.achievementNotificationsEnabled}
-        onChange={async () => {
-          await handleChange({
-            achievementCustomNotificationsEnabled:
-              !form.achievementCustomNotificationsEnabled,
-          });
-
-          window.electron.updateAchievementCustomNotificationWindow();
-        }}
-      />
-
-      {form.achievementNotificationsEnabled &&
-        form.achievementCustomNotificationsEnabled && (
-          <>
-            <SelectField
-              className="settings-general__achievement-custom-notification-position__select-variation"
-              label={t("achievement_custom_notification_position")}
-              value={form.achievementCustomNotificationPosition}
-              onChange={handleChangeAchievementCustomNotificationPosition}
-              options={achievementCustomNotificationPositionOptions}
-            />
-
-            <Button
-              className="settings-general__test-achievement-notification-button"
-              onClick={() => window.electron.showAchievementTestNotification()}
-            >
-              {t("test_notification")}
-            </Button>
-          </>
-        )}
-
-      {form.achievementNotificationsEnabled && (
-        <div className="settings-general__volume-control">
-          <label htmlFor="achievement-volume">
-            {t("achievement_sound_volume")}
-          </label>
-          <div className="settings-general__volume-slider-wrapper">
-            <UnmuteIcon size={16} className="settings-general__volume-icon" />
-            <input
-              id="achievement-volume"
-              type="range"
-              min="0"
-              max="100"
-              value={form.achievementSoundVolume}
-              onChange={(e) => {
-                const volumePercent = parseInt(e.target.value, 10);
-                if (!isNaN(volumePercent)) {
-                  handleVolumeChange(volumePercent);
-                }
-              }}
-              className="settings-general__volume-slider"
-              style={
-                {
-                  "--volume-percent": `${form.achievementSoundVolume}%`,
-                } as React.CSSProperties
-              }
-            />
-            <span className="settings-general__volume-value">
-              {form.achievementSoundVolume}%
-            </span>
-          </div>
-        </div>
-      )}
-
       <h2 className="settings-general__section-title">{t("common_redist")}</h2>
 
       <p className="settings-general__common-redist-description">

src/renderer/src/pages/settings/settings.scss

@@ -2,26 +2,35 @@
 
 .settings {
   &__container {
-    padding: 24px;
+    padding: 16px;
     width: 100%;
     display: flex;
+    align-items: flex-start;
+  }
+
+  &__sidebar {
+    width: 240px;
+    min-width: 240px;
+    margin-right: 12px;
+    background-color: globals.$background-color;
+    border: solid 1px globals.$border-color;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: calc(globals.$spacing-unit * 2);
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
   }
 
   &__content {
     background-color: globals.$background-color;
-    width: 100%;
-    height: 100%;
+    flex: 1;
     padding: calc(globals.$spacing-unit * 3);
     border: solid 1px globals.$border-color;
-    box-shadow: 0px 0px 15px 0px #000000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     gap: calc(globals.$spacing-unit * 2);
     display: flex;
     flex-direction: column;
   }
-
-  &__categories {
-    display: flex;
-    gap: globals.$spacing-unit;
-  }
 }

src/renderer/src/pages/settings/settings.tsx

@@ -1,8 +1,8 @@
-import { Button } from "@renderer/components";
 import { useTranslation } from "react-i18next";
 import { SettingsGeneral } from "./settings-general";
 import { SettingsBehavior } from "./settings-behavior";
 import { SettingsDownloadSources } from "./settings-download-sources";
+import { SettingsAchievements } from "./settings-achievements";
 import {
   SettingsContextConsumer,
   SettingsContextProvider,
@@ -13,6 +13,16 @@ import { useMemo } from "react";
 import "./settings.scss";
 import { SettingsAppearance } from "./aparence/settings-appearance";
 import { SettingsDebrid } from "./settings-debrid";
+import cn from "classnames";
+import {
+  GearIcon,
+  ToolsIcon,
+  TrophyIcon,
+  DownloadIcon,
+  PaintbrushIcon,
+  CloudIcon,
+  PersonIcon,
+} from "@primer/octicons-react";
 
 export default function Settings() {
   const { t } = useTranslation("settings");
@@ -21,20 +31,34 @@ export default function Settings() {
 
   const categories = useMemo(() => {
     const categories = [
-      { tabLabel: t("general"), contentTitle: t("general") },
-      { tabLabel: t("behavior"), contentTitle: t("behavior") },
-      { tabLabel: t("download_sources"), contentTitle: t("download_sources") },
+      { tabLabel: t("general"), contentTitle: t("general"), Icon: GearIcon },
+      { tabLabel: t("behavior"), contentTitle: t("behavior"), Icon: ToolsIcon },
+      {
+        tabLabel: t("achievements"),
+        contentTitle: t("achievements"),
+        Icon: TrophyIcon,
+      },
+      {
+        tabLabel: t("download_sources"),
+        contentTitle: t("download_sources"),
+        Icon: DownloadIcon,
+      },
       {
         tabLabel: t("appearance"),
         contentTitle: t("appearance"),
+        Icon: PaintbrushIcon,
       },
-      { tabLabel: t("debrid"), contentTitle: t("debrid") },
+      { tabLabel: t("debrid"), contentTitle: t("debrid"), Icon: CloudIcon },
     ];
 
     if (userDetails)
       return [
         ...categories,
-        { tabLabel: t("account"), contentTitle: t("account") },
+        {
+          tabLabel: t("account"),
+          contentTitle: t("account"),
+          Icon: PersonIcon,
+        },
       ];
     return categories;
   }, [userDetails, t]);
@@ -53,14 +77,18 @@ export default function Settings() {
             }
 
             if (currentCategoryIndex === 2) {
-              return <SettingsDownloadSources />;
+              return <SettingsAchievements />;
             }
 
             if (currentCategoryIndex === 3) {
-              return <SettingsAppearance appearance={appearance} />;
+              return <SettingsDownloadSources />;
             }
 
             if (currentCategoryIndex === 4) {
+              return <SettingsAppearance appearance={appearance} />;
+            }
+
+            if (currentCategoryIndex === 5) {
               return <SettingsDebrid />;
             }
 
@@ -69,21 +97,32 @@ export default function Settings() {
 
           return (
             <section className="settings__container">
-              <div className="settings__content">
-                <section className="settings__categories">
+              <aside className="settings__sidebar">
+                <ul className="settings__categories sidebar__menu">
                   {categories.map((category, index) => (
-                    <Button
+                    <li
                       key={category.contentTitle}
-                      theme={
-                        currentCategoryIndex === index ? "primary" : "outline"
-                      }
-                      onClick={() => setCurrentCategoryIndex(index)}
+                      className={cn("sidebar__menu-item", {
+                        "sidebar__menu-item--active":
+                          currentCategoryIndex === index,
+                      })}
                     >
-                      {category.tabLabel}
-                    </Button>
+                      <button
+                        type="button"
+                        className="sidebar__menu-item-button"
+                        onClick={() => setCurrentCategoryIndex(index)}
+                      >
+                        <category.Icon size={16} />
+                        <span className="sidebar__menu-item-button-label">
+                          {category.tabLabel}
+                        </span>
+                      </button>
+                    </li>
                   ))}
-                </section>
+                </ul>
+              </aside>
 
+              <div className="settings__content">
                 <h2>{categories[currentCategoryIndex].contentTitle}</h2>
                 {renderCategory()}
               </div>

src/types/game.types.ts

@@ -5,6 +5,8 @@ export type ShortcutLocation = "desktop" | "start_menu";
 export interface UnlockedAchievement {
   name: string;
   unlockTime: number;
+  imageKey?: string | null;
+  imageUrl?: string | null;
 }
 
 export interface SteamAchievement {
@@ -20,4 +22,5 @@ export interface SteamAchievement {
 export interface UserAchievement extends SteamAchievement {
   unlocked: boolean;
   unlockTime: number | null;
+  imageUrl?: string | null;
 }

src/types/index.ts

@@ -189,11 +189,25 @@ export interface UserDetails {
   featurebaseJwt: string;
   subscription: Subscription | null;
   karma: number;
+  achievements: ProfileAchievement[] | null;
   quirks?: {
     backupsPerGameLimit: number;
   };
 }
 
+export interface ProfileAchievement {
+  id: string;
+  name: string;
+  displayName: string;
+  imageUrl: string;
+  unlockTime: number;
+  gameTitle: string;
+  gameIconUrl: string | null;
+  achievementIcon: string | null;
+  gameId: string;
+  description: string;
+}
+
 export interface UserProfile {
   id: string;
   displayName: string;
@@ -210,6 +224,7 @@ export interface UserProfile {
   bio: string;
   hasActiveSubscription: boolean;
   karma: number;
+  achievements: ProfileAchievement[] | null;
   quirks: {
     backupsPerGameLimit: number;
   };

src/types/level.types.ts

@@ -89,7 +89,8 @@ export interface GameAchievement {
   achievements: SteamAchievement[];
   unlockedAchievements: UnlockedAchievement[];
   updatedAt: number | undefined;
-  language: string | undefined;
+  imageUrl?: string | null;
+  language?: string;
 }
 
 export type AchievementCustomNotificationPosition =
@@ -125,6 +126,7 @@ export interface UserPreferences {
   showDownloadSpeedInMegabytes?: boolean;
   extractFilesByDefault?: boolean;
   enableSteamAchievements?: boolean;
+  enableAchievementScreenshots?: boolean;
   autoplayGameTrailers?: boolean;
   hideToTrayOnGameStart?: boolean;
   enableNewDownloadOptionsBadges?: boolean;