Merge branch 'main' into feat/context_menu-and-enhancement-actions

2026-01-11 13:56:16 +00:00 · 2025-09-28 00:52:38 +01:00
parent 08702d3157 2cebc73789
commit 1525ccc438
20 changed files with 497 additions and 147 deletions
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -465,6 +465,9 @@
    "activity": "Recent Activity",
    "library": "Library",
    "pinned": "Pinned",
+    "achievements_earned": "Achievements earned",
+    "played_recently": "Played recently",
+    "playtime": "Playtime",
    "total_play_time": "Total playtime",
    "manual_playtime_tooltip": "This playtime has been manually updated",
    "no_recent_activity_title": "Hmmm… nothing here",
@@ -541,7 +544,9 @@
    "show_achievements_on_profile": "Show your achievements on your profile",
    "show_points_on_profile": "Show your earned points on your profile",
    "error_adding_friend": "Could not send friend request. Please check friend code",
-    "friend_code_length_error": "Friend code must have 8 characters"
+    "friend_code_length_error": "Friend code must have 8 characters",
+    "game_removed_from_pinned": "Game removed from pinned",
+    "game_added_to_pinned": "Game added to pinned"
  },
  "achievement": {
    "achievement_unlocked": "Achievement unlocked",
--- a/src/locales/ru/translation.json
+++ b/src/locales/ru/translation.json
@@ -10,7 +10,8 @@
    "hot": "Сейчас популярно",
    "start_typing": "Начинаю вводить текст...",
    "weekly": "📅 Лучшие игры недели",
-    "achievements": "🏆 Игры с достижениями"
+    "achievements": "🏆 Игры с достижениями",
+    "already_in_library": "Уже в библиотеке"
  },
  "sidebar": {
    "catalogue": "Каталог",
@@ -219,7 +220,23 @@
    "invalid_wine_prefix_path": "Недопустимый путь префикса Wine",
    "invalid_wine_prefix_path_description": "Путь к префиксу Wine недействителен. Пожалуйста, проверьте путь и попробуйте снова.",
    "missing_wine_prefix": "Префикс Wine необходим для создания резервной копии в Linux",
-    "download_error_not_cached_on_hydra": "Эта загрузка недоступна на Nimbus."
+    "download_error_not_cached_on_hydra": "Эта загрузка недоступна на Nimbus.",
+    "update_playtime_success": "Время игры успешно обновлено",
+    "update_playtime_error": "Не удалось обновить время игры",
+    "manual_playtime_warning": "Ваши часы будут отмечены как обновленные вручную. Это действие нельзя отменить.",
+    "artifact_renamed": "Резервная копия успешно переименована",
+    "rename_artifact": "Переименовать резервную копию",
+    "rename_artifact_description": "Переименуйте резервную копию, присвоив ей более описательное имя.",
+    "artifact_name_label": "Название резервной копии",
+    "artifact_name_placeholder": "Введите название для резервной копии",
+    "max_length_field": "Это поле должно содержать менее {{length}} символов",
+    "freeze_backup": "Закрепить, чтобы она не была перезаписана автоматическими резервными копиями",
+    "unfreeze_backup": "Открепить",
+    "backup_frozen": "Резервная копия закреплена",
+    "backup_unfrozen": "Резервная копия откреплена",
+    "backup_freeze_failed": "Не удалось закрепить резервную копию",
+    "backup_freeze_failed_description": "Вы должны оставить как минимум один свободный слот для автоматических резервных копий",
+    "manual_playtime_tooltip": "Это время игры было обновлено вручную"
  },
  "activation": {
    "title": "Активировать Hydra",
@@ -395,7 +412,8 @@
    "hidden": "Скрытый",
    "test_notification": "Тестовое уведомление",
    "notification_preview": "Предварительный просмотр уведомления о достижении",
-    "enable_friend_start_game_notifications": "Когда друг начинает играть в игру"
+    "enable_friend_start_game_notifications": "Когда друг начинает играть в игру",
+    "enable_steam_achievements": "Включить поиск достижений Steam"
  },
  "notifications": {
    "download_complete": "Загрузка завершена",
@@ -408,12 +426,12 @@
    "notification_achievement_unlocked_title": "Достижение разблокировано для {{game}}",
    "notification_achievement_unlocked_body": "были разблокированы {{achievement}} и другие {{count}}",
    "new_friend_request_title": "Новый запрос на добавление в друзья",
-    "new_friend_request_description": "Вы получили новый запрос на добавление в друзья",
    "extraction_complete": "Распаковка завершена",
    "game_extracted": "{{title}} успешно распакован",
    "friend_started_playing_game": "{{displayName}} начал играть в игру",
    "test_achievement_notification_title": "Это тестовое уведомление",
-    "test_achievement_notification_description": "Довольно круто, да?"
+    "test_achievement_notification_description": "Довольно круто, да?",
+    "new_friend_request_description": "{{displayName}} отправил вам запрос в друзья"
  },
  "system_tray": {
    "open": "Открыть Hydra",
@@ -515,7 +533,9 @@
    "achievements_unlocked": "Достижения разблокированы",
    "earned_points": "Заработано очков:",
    "show_achievements_on_profile": "Покажите свои достижения в профиле",
-    "show_points_on_profile": "Показывать заработанные очки в своем профиле"
+    "show_points_on_profile": "Показывать заработанные очки в своем профиле",
+    "error_adding_friend": "Не удалось отправить запрос в друзья. Пожалуйста, проверьте код друга",
+    "friend_code_length_error": "Код друга должен содержать 8 символов"
  },
  "achievement": {
    "achievement_unlocked": "Достижение разблокировано",
--- a/src/main/events/index.ts
+++ b/src/main/events/index.ts
@@ -16,8 +16,7 @@ import "./hardware/check-folder-write-permission";
 import "./library/add-game-to-library";
 import "./library/add-game-to-favorites";
 import "./library/remove-game-from-favorites";
-import "./library/add-game-to-pinned";
-import "./library/remove-game-from-pinned";
+import "./library/toggle-game-pin";
 import "./library/create-game-shortcut";
 import "./library/close-game";
 import "./library/delete-game-folder";
--- a/src/main/events/library/add-game-to-pinned.ts
+++ b/src/main/events/library/add-game-to-pinned.ts
@@ -1,29 +0,0 @@
-import { registerEvent } from "../register-event";
-import { gamesSublevel, levelKeys } from "@main/level";
-import { HydraApi } from "@main/services";
-import type { GameShop } from "@types";
-
-const addGameToPinned = async (
-  _event: Electron.IpcMainInvokeEvent,
-  shop: GameShop,
-  objectId: string
-) => {
-  const gameKey = levelKeys.game(shop, objectId);
-
-  const game = await gamesSublevel.get(gameKey);
-  if (!game) return;
-
-  const response = await HydraApi.put(`/profile/games/${shop}/${objectId}/pin`);
-
-  try {
-    await gamesSublevel.put(gameKey, {
-      ...game,
-      pinned: true,
-      pinnedDate: new Date(response.pinnedDate),
-    });
-  } catch (error) {
-    throw new Error(`Failed to update game pinned status: ${error}`);
-  }
-};
-
-registerEvent("addGameToPinned", addGameToPinned);
--- a/src/main/events/library/remove-game-from-pinned.ts
+++ b/src/main/events/library/remove-game-from-pinned.ts
@@ -1,29 +0,0 @@
-import { registerEvent } from "../register-event";
-import { gamesSublevel, levelKeys } from "@main/level";
-import { HydraApi } from "@main/services";
-import type { GameShop } from "@types";
-
-const removeGameFromPinned = async (
-  _event: Electron.IpcMainInvokeEvent,
-  shop: GameShop,
-  objectId: string
-) => {
-  const gameKey = levelKeys.game(shop, objectId);
-
-  const game = await gamesSublevel.get(gameKey);
-  if (!game) return;
-
-  HydraApi.put(`/profile/games/${shop}/${objectId}/unpin`).catch(() => {});
-
-  try {
-    await gamesSublevel.put(gameKey, {
-      ...game,
-      pinned: false,
-      pinnedDate: null,
-    });
-  } catch (error) {
-    throw new Error(`Failed to update game pinned status: ${error}`);
-  }
-};
-
-registerEvent("removeGameFromPinned", removeGameFromPinned);
--- a/src/main/events/library/toggle-game-pin.ts
+++ b/src/main/events/library/toggle-game-pin.ts
@@ -0,0 +1,43 @@
+import { registerEvent } from "../register-event";
+import { gamesSublevel, levelKeys } from "@main/level";
+import { HydraApi, logger } from "@main/services";
+import type { GameShop, UserGame } from "@types";
+
+const toggleGamePin = async (
+  _event: Electron.IpcMainInvokeEvent,
+  shop: GameShop,
+  objectId: string,
+  pin: boolean
+) => {
+  try {
+    const gameKey = levelKeys.game(shop, objectId);
+
+    const game = await gamesSublevel.get(gameKey);
+    if (!game) return;
+
+    if (pin) {
+      const response = await HydraApi.put<UserGame>(
+        `/profile/games/${shop}/${objectId}/pin`
+      );
+
+      await gamesSublevel.put(gameKey, {
+        ...game,
+        isPinned: pin,
+        pinnedDate: new Date(response.pinnedDate!),
+      });
+    } else {
+      await HydraApi.put(`/profile/games/${shop}/${objectId}/unpin`);
+
+      await gamesSublevel.put(gameKey, {
+        ...game,
+        isPinned: pin,
+        pinnedDate: null,
+      });
+    }
+  } catch (error) {
+    logger.error("Failed to update game pinned status", error);
+    throw new Error(`Failed to update game pinned status: ${error}`);
+  }
+};
+
+registerEvent("toggleGamePin", toggleGamePin);
--- a/src/main/events/user/get-user-library.ts
+++ b/src/main/events/user/get-user-library.ts
@@ -6,13 +6,18 @@ const getUserLibrary = async (
  _event: Electron.IpcMainInvokeEvent,
  userId: string,
  take: number = 12,
-  skip: number = 0
+  skip: number = 0,
+  sortBy?: string
 ): Promise<UserLibraryResponse | null> => {
  const params = new URLSearchParams();

  params.append("take", take.toString());
  params.append("skip", skip.toString());

+  if (sortBy) {
+    params.append("sortBy", sortBy);
+  }
+
  const queryString = params.toString();
  const baseUrl = `/users/${userId}/library`;
  const url = queryString ? `${baseUrl}?${queryString}` : baseUrl;
--- a/src/main/services/library-sync/merge-with-remote-games.ts
+++ b/src/main/services/library-sync/merge-with-remote-games.ts
@@ -37,7 +37,7 @@ export const mergeWithRemoteGames = async () => {
            lastTimePlayed: updatedLastTimePlayed,
            playTimeInMilliseconds: updatedPlayTime,
            favorite: game.isFavorite ?? localGame.favorite,
-            pinned: game.isPinned ?? localGame.pinned,
+            isPinned: game.isPinned ?? localGame.isPinned,
          });
        } else {
          await gamesSublevel.put(gameKey, {
@@ -51,7 +51,7 @@ export const mergeWithRemoteGames = async () => {
            hasManuallyUpdatedPlaytime: game.hasManuallyUpdatedPlaytime,
            isDeleted: false,
            favorite: game.isFavorite ?? false,
-            pinned: game.isPinned ?? false,
+            isPinned: game.isPinned ?? false,
          });
        }

--- a/src/main/services/library-sync/upload-games-batch.ts
+++ b/src/main/services/library-sync/upload-games-batch.ts
@@ -27,7 +27,7 @@ export const uploadGamesBatch = async () => {
          shop: game.shop,
          lastTimePlayed: game.lastTimePlayed,
          isFavorite: game.favorite,
-          isPinned: game.pinned ?? false,
+          isPinned: game.isPinned ?? false,
        };
      })
    ).catch(() => {});
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -143,10 +143,8 @@ contextBridge.exposeInMainWorld("electron", {
    ipcRenderer.invoke("addGameToFavorites", shop, objectId),
  removeGameFromFavorites: (shop: GameShop, objectId: string) =>
    ipcRenderer.invoke("removeGameFromFavorites", shop, objectId),
-  addGameToPinned: (shop: GameShop, objectId: string) =>
-    ipcRenderer.invoke("addGameToPinned", shop, objectId),
-  removeGameFromPinned: (shop: GameShop, objectId: string) =>
-    ipcRenderer.invoke("removeGameFromPinned", shop, objectId),
+  toggleGamePin: (shop: GameShop, objectId: string, pinned: boolean) =>
+    ipcRenderer.invoke("toggleGamePin", shop, objectId, pinned),
  updateLaunchOptions: (
    shop: GameShop,
    objectId: string,
@@ -370,8 +368,12 @@ contextBridge.exposeInMainWorld("electron", {

  /* User */
  getUser: (userId: string) => ipcRenderer.invoke("getUser", userId),
-  getUserLibrary: (userId: string, take?: number, skip?: number) =>
-    ipcRenderer.invoke("getUserLibrary", userId, take, skip),
+  getUserLibrary: (
+    userId: string,
+    take?: number,
+    skip?: number,
+    sortBy?: string
+  ) => ipcRenderer.invoke("getUserLibrary", userId, take, skip, sortBy),
  blockUser: (userId: string) => ipcRenderer.invoke("blockUser", userId),
  unblockUser: (userId: string) => ipcRenderer.invoke("unblockUser", userId),
  getUserFriends: (userId: string, take: number, skip: number) =>
--- a/src/renderer/src/context/user-profile/user-profile.context.tsx
+++ b/src/renderer/src/context/user-profile/user-profile.context.tsx
@@ -14,6 +14,7 @@ export interface UserProfileContext {
  isMe: boolean;
  userStats: UserStats | null;
  getUserProfile: () => Promise<void>;
+  getUserLibraryGames: (sortBy?: string) => Promise<void>;
  setSelectedBackgroundImage: React.Dispatch<React.SetStateAction<string>>;
  backgroundImage: string;
  badges: Badge[];
@@ -29,6 +30,7 @@ export const userProfileContext = createContext<UserProfileContext>({
  isMe: false,
  userStats: null,
  getUserProfile: async () => {},
+  getUserLibraryGames: async (_sortBy?: string) => {},
  setSelectedBackgroundImage: () => {},
  backgroundImage: "",
  badges: [],
@@ -91,21 +93,30 @@ export function UserProfileContextProvider({
    });
  }, [userId]);

-  const getUserLibraryGames = useCallback(async () => {
-    try {
-      const response = await window.electron.getUserLibrary(userId);
-      if (response) {
-        setLibraryGames(response.library);
-        setPinnedGames(response.pinnedGames);
-      } else {
+  const getUserLibraryGames = useCallback(
+    async (sortBy?: string) => {
+      try {
+        const response = await window.electron.getUserLibrary(
+          userId,
+          12,
+          0,
+          sortBy
+        );
+
+        if (response) {
+          setLibraryGames(response.library);
+          setPinnedGames(response.pinnedGames);
+        } else {
+          setLibraryGames([]);
+          setPinnedGames([]);
+        }
+      } catch (error) {
        setLibraryGames([]);
        setPinnedGames([]);
      }
-    } catch (error) {
-      setLibraryGames([]);
-      setPinnedGames([]);
-    }
-  }, [userId]);
+    },
+    [userId]
+  );

  const getUserProfile = useCallback(async () => {
    getUserStats();
@@ -149,6 +160,7 @@ export function UserProfileContextProvider({
        heroBackground,
        isMe,
        getUserProfile,
+        getUserLibraryGames,
        setSelectedBackgroundImage,
        backgroundImage: getBackgroundImageUrl(),
        userStats,
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -127,8 +127,11 @@ declare global {
      shop: GameShop,
      objectId: string
    ) => Promise<void>;
-    addGameToPinned: (shop: GameShop, objectId: string) => Promise<void>;
-    removeGameFromPinned: (shop: GameShop, objectId: string) => Promise<void>;
+    toggleGamePin: (
+      shop: GameShop,
+      objectId: string,
+      pinned: boolean
+    ) => Promise<void>;
    updateLaunchOptions: (
      shop: GameShop,
      objectId: string,
@@ -293,7 +296,8 @@ declare global {
    getUserLibrary: (
      userId: string,
      take?: number,
-      skip?: number
+      skip?: number,
+      sortBy?: string
    ) => Promise<UserLibraryResponse>;
    blockUser: (userId: string) => Promise<void>;
    unblockUser: (userId: string) => Promise<void>;
--- a/src/renderer/src/hooks/use-section-collapse.ts
+++ b/src/renderer/src/hooks/use-section-collapse.ts
@@ -0,0 +1,27 @@
+import { useState, useCallback } from "react";
+
+interface SectionCollapseState {
+  pinned: boolean;
+  library: boolean;
+}
+
+export function useSectionCollapse() {
+  const [collapseState, setCollapseState] = useState<SectionCollapseState>({
+    pinned: false,
+    library: false,
+  });
+
+  const toggleSection = useCallback((section: keyof SectionCollapseState) => {
+    setCollapseState((prevState) => ({
+      ...prevState,
+      [section]: !prevState[section],
+    }));
+  }, []);
+
+  return {
+    collapseState,
+    toggleSection,
+    isPinnedCollapsed: collapseState.pinned,
+    isLibraryCollapsed: collapseState.library,
+  };
+}
--- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
@@ -122,14 +122,14 @@ export function HeroPanelActions() {
    setToggleLibraryGameDisabled(true);

    try {
-      if (game?.pinned && objectId) {
-        await window.electron.removeGameFromPinned(shop, objectId).then(() => {
+      if (game?.isPinned && objectId) {
+        await window.electron.toggleGamePin(shop, objectId, false).then(() => {
          showSuccessToast(t("game_removed_from_pinned"));
        });
      } else {
        if (!objectId) return;

-        await window.electron.addGameToPinned(shop, objectId).then(() => {
+        await window.electron.toggleGamePin(shop, objectId, true).then(() => {
          showSuccessToast(t("game_added_to_pinned"));
        });
      }
@@ -264,7 +264,7 @@ export function HeroPanelActions() {
            disabled={deleting}
            className="hero-panel-actions__action"
          >
-            {game.pinned ? <PinSlashIcon /> : <PinIcon />}
+            {game.isPinned ? <PinSlashIcon /> : <PinIcon />}
          </Button>
        )}

--- a/src/renderer/src/pages/game-details/modals/change-game-playtime-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/change-game-playtime-modal.tsx
@@ -72,7 +72,6 @@ export function ChangeGamePlaytimeModal({
      onSuccess?.(t("update_playtime_success"));
      onClose();
    } catch (error) {
-      console.log(error);
      onError?.(t("update_playtime_error"));
    } finally {
      setIsSubmitting(false);
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss
@@ -54,8 +54,47 @@
  &__section-header {
    display: flex;
    align-items: center;
-    justify-content: space-between;
    margin-bottom: calc(globals.$spacing-unit * 2);
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__section-title-group {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    flex: 1;
+  }
+
+  &__section-badge {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+
+  &__collapse-button {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 0.2s;
+    flex-shrink: 0;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
  }

  &__tabs {
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -3,24 +3,45 @@ import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ProfileHero } from "../profile-hero/profile-hero";
 import { useAppDispatch, useFormat } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
-import { TelescopeIcon } from "@primer/octicons-react";
+import { TelescopeIcon, ChevronRightIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
+import { UserGame } from "@types";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
 import { FriendsBox } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
 import { UserLibraryGameCard } from "./user-library-game-card";
+import { SortOptions } from "./sort-options";
+import { useSectionCollapse } from "@renderer/hooks/use-section-collapse";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  sectionVariants,
+  gameCardVariants,
+  gameGridVariants,
+  chevronVariants,
+  GAME_STATS_ANIMATION_DURATION_IN_MS,
+} from "./profile-animations";
 import "./profile-content.scss";

-const GAME_STATS_ANIMATION_DURATION_IN_MS = 3500;
+type SortOption = "playtime" | "achievementCount" | "playedRecently";

 export function ProfileContent() {
-  const { userProfile, isMe, userStats, libraryGames, pinnedGames } =
-    useContext(userProfileContext);
+  const {
+    userProfile,
+    isMe,
+    userStats,
+    libraryGames,
+    pinnedGames,
+    getUserLibraryGames,
+  } = useContext(userProfileContext);
  const [statsIndex, setStatsIndex] = useState(0);
  const [isAnimationRunning, setIsAnimationRunning] = useState(true);
+  const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
+  const [prevLibraryGames, setPrevLibraryGames] = useState<UserGame[]>([]);
+  const [prevPinnedGames, setPrevPinnedGames] = useState<UserGame[]>([]);
  const statsAnimation = useRef(-1);
+  const { toggleSection, isPinnedCollapsed } = useSectionCollapse();

  const dispatch = useAppDispatch();

@@ -34,6 +55,12 @@ export function ProfileContent() {
    }
  }, [userProfile, dispatch]);

+  useEffect(() => {
+    if (userProfile) {
+      getUserLibraryGames(sortBy);
+    }
+  }, [sortBy, getUserLibraryGames, userProfile]);
+
  const handleOnMouseEnterGameCard = () => {
    setIsAnimationRunning(false);
  };
@@ -65,6 +92,27 @@ export function ProfileContent() {

  const { numberFormatter } = useFormat();

+  const gamesHaveChanged = (
+    current: UserGame[],
+    previous: UserGame[]
+  ): boolean => {
+    if (current.length !== previous.length) return true;
+    return current.some(
+      (game, index) => game.objectId !== previous[index]?.objectId
+    );
+  };
+
+  const shouldAnimateLibrary = gamesHaveChanged(libraryGames, prevLibraryGames);
+  const shouldAnimatePinned = gamesHaveChanged(pinnedGames, prevPinnedGames);
+
+  useEffect(() => {
+    setPrevLibraryGames(libraryGames);
+  }, [libraryGames]);
+
+  useEffect(() => {
+    setPrevPinnedGames(pinnedGames);
+  }, [pinnedGames]);
+
  const usersAreFriends = useMemo(() => {
    return userProfile?.relation?.status === "ACCEPTED";
  }, [userProfile]);
@@ -82,13 +130,19 @@ export function ProfileContent() {

    const hasGames = libraryGames.length > 0;
    const hasPinnedGames = pinnedGames.length > 0;
+    const hasAnyGames = hasGames || hasPinnedGames;

-    const shouldShowRightContent = hasGames || userProfile.friends.length > 0;
+    const shouldShowRightContent =
+      hasAnyGames || userProfile.friends.length > 0;

    return (
      <section className="profile-content__section">
        <div className="profile-content__main">
-          {!hasGames && (
+          {hasAnyGames && (
+            <SortOptions sortBy={sortBy} onSortChange={setSortBy} />
+          )}
+
+          {!hasAnyGames && (
            <div className="profile-content__no-games">
              <div className="profile-content__telescope-icon">
                <TelescopeIcon size={24} />
@@ -98,48 +152,167 @@ export function ProfileContent() {
            </div>
          )}

-          {hasGames && (
-            <>
+          {hasAnyGames && (
+            <div>
              {hasPinnedGames && (
                <div style={{ marginBottom: "2rem" }}>
                  <div className="profile-content__section-header">
-                    <h2>{t("pinned")}</h2>
-                    <span>{pinnedGames.length}</span>
+                    <div className="profile-content__section-title-group">
+                      <button
+                        type="button"
+                        className="profile-content__collapse-button"
+                        onClick={() => toggleSection("pinned")}
+                        aria-label={
+                          isPinnedCollapsed
+                            ? "Expand pinned section"
+                            : "Collapse pinned section"
+                        }
+                      >
+                        <motion.div
+                          variants={chevronVariants}
+                          animate={isPinnedCollapsed ? "collapsed" : "expanded"}
+                        >
+                          <ChevronRightIcon size={16} />
+                        </motion.div>
+                      </button>
+                      <h2>{t("pinned")}</h2>
+                      <span className="profile-content__section-badge">
+                        {pinnedGames.length}
+                      </span>
+                    </div>
                  </div>

-                  <ul className="profile-content__games-grid">
-                    {pinnedGames?.map((game) => (
-                      <UserLibraryGameCard
-                        game={game}
-                        key={game.objectId}
-                        statIndex={statsIndex}
-                        onMouseEnter={handleOnMouseEnterGameCard}
-                        onMouseLeave={handleOnMouseLeaveGameCard}
-                      />
-                    ))}
-                  </ul>
+                  <AnimatePresence initial={true} mode="wait">
+                    {!isPinnedCollapsed && (
+                      <motion.div
+                        key="pinned-content"
+                        variants={sectionVariants}
+                        initial="collapsed"
+                        animate="expanded"
+                        exit="collapsed"
+                        layout
+                      >
+                        <motion.ul
+                          className="profile-content__games-grid"
+                          variants={
+                            shouldAnimatePinned ? gameGridVariants : undefined
+                          }
+                          initial={shouldAnimatePinned ? "hidden" : undefined}
+                          animate={shouldAnimatePinned ? "visible" : undefined}
+                          exit={shouldAnimatePinned ? "exit" : undefined}
+                          key={
+                            shouldAnimatePinned
+                              ? `pinned-${sortBy}`
+                              : `pinned-static`
+                          }
+                        >
+                          {shouldAnimatePinned ? (
+                            <AnimatePresence mode="wait">
+                              {pinnedGames?.map((game, index) => (
+                                <motion.li
+                                  key={game.objectId}
+                                  variants={gameCardVariants}
+                                  initial="hidden"
+                                  animate="visible"
+                                  exit="exit"
+                                  transition={{ delay: index * 0.1 }}
+                                  style={{ listStyle: "none" }}
+                                >
+                                  <UserLibraryGameCard
+                                    game={game}
+                                    statIndex={statsIndex}
+                                    onMouseEnter={handleOnMouseEnterGameCard}
+                                    onMouseLeave={handleOnMouseLeaveGameCard}
+                                  />
+                                </motion.li>
+                              ))}
+                            </AnimatePresence>
+                          ) : (
+                            pinnedGames?.map((game) => (
+                              <li
+                                key={game.objectId}
+                                style={{ listStyle: "none" }}
+                              >
+                                <UserLibraryGameCard
+                                  game={game}
+                                  statIndex={statsIndex}
+                                  onMouseEnter={handleOnMouseEnterGameCard}
+                                  onMouseLeave={handleOnMouseLeaveGameCard}
+                                />
+                              </li>
+                            ))
+                          )}
+                        </motion.ul>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
                </div>
              )}

-              <div className="profile-content__section-header">
-                <h2>{t("library")}</h2>
-                {userStats && (
-                  <span>{numberFormatter.format(userStats.libraryCount)}</span>
-                )}
-              </div>
+              {hasGames && (
+                <div>
+                  <div className="profile-content__section-header">
+                    <div className="profile-content__section-title-group">
+                      <h2>{t("library")}</h2>
+                      {userStats && (
+                        <span className="profile-content__section-badge">
+                          {numberFormatter.format(userStats.libraryCount)}
+                        </span>
+                      )}
+                    </div>
+                  </div>

-              <ul className="profile-content__games-grid">
-                {libraryGames?.map((game) => (
-                  <UserLibraryGameCard
-                    game={game}
-                    key={game.objectId}
-                    statIndex={statsIndex}
-                    onMouseEnter={handleOnMouseEnterGameCard}
-                    onMouseLeave={handleOnMouseLeaveGameCard}
-                  />
-                ))}
-              </ul>
-            </>
+                  <motion.ul
+                    className="profile-content__games-grid"
+                    variants={
+                      shouldAnimateLibrary ? gameGridVariants : undefined
+                    }
+                    initial={shouldAnimateLibrary ? "hidden" : undefined}
+                    animate={shouldAnimateLibrary ? "visible" : undefined}
+                    exit={shouldAnimateLibrary ? "exit" : undefined}
+                    key={
+                      shouldAnimateLibrary
+                        ? `library-${sortBy}`
+                        : `library-static`
+                    }
+                  >
+                    {shouldAnimateLibrary ? (
+                      <AnimatePresence mode="wait">
+                        {libraryGames?.map((game, index) => (
+                          <motion.li
+                            key={game.objectId}
+                            variants={gameCardVariants}
+                            initial="hidden"
+                            animate="visible"
+                            exit="exit"
+                            transition={{ delay: index * 0.1 }}
+                            style={{ listStyle: "none" }}
+                          >
+                            <UserLibraryGameCard
+                              game={game}
+                              statIndex={statsIndex}
+                              onMouseEnter={handleOnMouseEnterGameCard}
+                              onMouseLeave={handleOnMouseLeaveGameCard}
+                            />
+                          </motion.li>
+                        ))}
+                      </AnimatePresence>
+                    ) : (
+                      libraryGames?.map((game) => (
+                        <li key={game.objectId} style={{ listStyle: "none" }}>
+                          <UserLibraryGameCard
+                            game={game}
+                            statIndex={statsIndex}
+                            onMouseEnter={handleOnMouseEnterGameCard}
+                            onMouseLeave={handleOnMouseLeaveGameCard}
+                          />
+                        </li>
+                      ))
+                    )}
+                  </motion.ul>
+                </div>
+              )}
+            </div>
          )}
        </div>

@@ -163,6 +336,11 @@ export function ProfileContent() {
    statsIndex,
    libraryGames,
    pinnedGames,
+    isPinnedCollapsed,
+    toggleSection,
+    shouldAnimateLibrary,
+    shouldAnimatePinned,
+    sortBy,
  ]);

  return (
--- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss
@@ -65,18 +65,45 @@
    padding: 8px;
  }

-  &__favorite-icon {
+  &__actions-container {
    position: absolute;
    top: 8px;
    right: 8px;
-    color: #ff6b6b;
+    display: flex;
+    gap: 6px;
+    z-index: 2;
+  }
+
+  &__favorite-icon {
+    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
-    padding: 4px;
+    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
-    z-index: 2;
+  }
+
+  &__pin-button {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.7);
+    border: none;
+    border-radius: 50%;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
  }

  &__playtime {
--- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx
@@ -1,6 +1,6 @@
 import { UserGame } from "@types";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
-import { useFormat } from "@renderer/hooks";
+import { useFormat, useToast } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { useCallback, useContext, useState } from "react";
 import {
@@ -14,6 +14,8 @@ import {
  TrophyIcon,
  AlertFillIcon,
  HeartFillIcon,
+  PinIcon,
+  PinSlashIcon,
 } from "@primer/octicons-react";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { Tooltip } from "react-tooltip";
@@ -33,11 +35,14 @@ export function UserLibraryGameCard({
  onMouseEnter,
  onMouseLeave,
 }: UserLibraryGameCardProps) {
-  const { userProfile } = useContext(userProfileContext);
+  const { userProfile, isMe, getUserLibraryGames } =
+    useContext(userProfileContext);
  const { t } = useTranslation("user_profile");
  const { numberFormatter } = useFormat();
+  const { showSuccessToast } = useToast();
  const navigate = useNavigate();
  const [isTooltipHovered, setIsTooltipHovered] = useState(false);
+  const [isPinning, setIsPinning] = useState(false);

  const getStatsItemCount = useCallback(() => {
    let statsCount = 1;
@@ -89,6 +94,28 @@ export function UserLibraryGameCard({
    [numberFormatter, t]
  );

+  const toggleGamePinned = async () => {
+    setIsPinning(true);
+
+    try {
+      await window.electron.toggleGamePin(
+        game.shop,
+        game.objectId,
+        !game.isPinned
+      );
+
+      await getUserLibraryGames();
+
+      if (game.isPinned) {
+        showSuccessToast(t("game_removed_from_pinned"));
+      } else {
+        showSuccessToast(t("game_added_to_pinned"));
+      }
+    } finally {
+      setIsPinning(false);
+    }
+  };
+
  return (
    <>
      <li
@@ -103,9 +130,30 @@ export function UserLibraryGameCard({
          onClick={() => navigate(buildUserGameDetailsPath(game))}
        >
          <div className="user-library-game__overlay">
-            {game.isFavorite && (
-              <div className="user-library-game__favorite-icon">
-                <HeartFillIcon size={14} />
+            {(game.isFavorite || isMe) && (
+              <div className="user-library-game__actions-container">
+                {game.isFavorite && (
+                  <div className="user-library-game__favorite-icon">
+                    <HeartFillIcon size={12} />
+                  </div>
+                )}
+                {isMe && (
+                  <button
+                    type="button"
+                    className="user-library-game__pin-button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleGamePinned();
+                    }}
+                    disabled={isPinning}
+                  >
+                    {game.isPinned ? (
+                      <PinSlashIcon size={12} />
+                    ) : (
+                      <PinIcon size={12} />
+                    )}
+                  </button>
+                )}
              </div>
            )}
            <small
--- a/src/types/level.types.ts
+++ b/src/types/level.types.ts
@@ -44,7 +44,7 @@ export interface Game {
  executablePath?: string | null;
  launchOptions?: string | null;
  favorite?: boolean;
-  pinned?: boolean;
+  isPinned?: boolean;
  pinnedDate?: Date | null;
  automaticCloudSync?: boolean;
  hasManuallyUpdatedPlaytime?: boolean;