feat: migrating achievements to level

src/renderer/src/components/sidebar/sidebar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import type { LibraryGame } from "@types";
+import type { Game } from "@types";
 
 import { TextField } from "@renderer/components";
 import {
@@ -35,7 +35,7 @@ export function Sidebar() {
   const { library, updateLibrary } = useLibrary();
   const navigate = useNavigate();
 
-  const [filteredLibrary, setFilteredLibrary] = useState<LibraryGame[]>([]);
+  const [filteredLibrary, setFilteredLibrary] = useState<Game[]>([]);
 
   const [isResizing, setIsResizing] = useState(false);
   const [sidebarWidth, setSidebarWidth] = useState(
@@ -117,7 +117,7 @@ export function Sidebar() {
     };
   }, [isResizing]);
 
-  const getGameTitle = (game: LibraryGame) => {
+  const getGameTitle = (game: Game) => {
     if (lastPacket?.game.id === game.id) {
       return t("downloading", {
         title: game.title,
@@ -140,10 +140,7 @@ export function Sidebar() {
     }
   };
 
-  const handleSidebarGameClick = (
-    event: React.MouseEvent,
-    game: LibraryGame
-  ) => {
+  const handleSidebarGameClick = (event: React.MouseEvent, game: Game) => {
     const path = buildGameDetailsPath({
       ...game,
       objectId: game.objectID,

src/renderer/src/declaration.d.ts

@@ -2,7 +2,6 @@ import type { CatalogueCategory } from "@shared";
 import type {
   AppUpdaterEvent,
   Game,
-  LibraryGame,
   GameShop,
   HowLongToBeatCategory,
   ShopDetails,
@@ -23,7 +22,6 @@ import type {
   UserStats,
   UserDetails,
   FriendRequestSync,
-  GameAchievement,
   GameArtifact,
   LudusaviBackup,
   UserAchievement,
@@ -77,7 +75,7 @@ declare global {
     onUpdateAchievements: (
       objectId: string,
       shop: GameShop,
-      cb: (achievements: GameAchievement[]) => void
+      cb: (achievements: UserAchievement[]) => void
     ) => () => Electron.IpcRenderer;
     getPublishers: () => Promise<string[]>;
     getDevelopers: () => Promise<string[]>;
@@ -102,7 +100,7 @@ declare global {
       winePrefixPath: string | null
     ) => Promise<void>;
     verifyExecutablePathInUse: (executablePath: string) => Promise<Game>;
-    getLibrary: () => Promise<LibraryGame[]>;
+    getLibrary: () => Promise<Game[]>;
     openGameInstaller: (gameId: number) => Promise<boolean>;
     openGameInstallerPath: (gameId: number) => Promise<boolean>;
     openGameExecutablePath: (gameId: number) => Promise<void>;

src/renderer/src/features/library-slice.ts

@@ -1,10 +1,10 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 
-import type { LibraryGame } from "@types";
+import type { Game } from "@types";
 
 export interface LibraryState {
-  value: LibraryGame[];
+  value: Game[];
 }
 
 const initialState: LibraryState = {

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

@@ -47,7 +47,14 @@ export function AchievementList({ achievements }: AchievementListProps) {
             </h4>
             <p>{achievement.description}</p>
           </div>
-          <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              alignItems: "flex-end",
+            }}
+          >
             {achievement.points != undefined ? (
               <div
                 style={{ display: "flex", alignItems: "center", gap: "4px" }}

src/renderer/src/pages/downloads/download-group.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-import type { LibraryGame, SeedingStatus } from "@types";
+import type { Game, SeedingStatus } from "@types";
 
 import { Badge, Button } from "@renderer/components";
 import {
@@ -32,7 +32,7 @@ import {
 } from "@primer/octicons-react";
 
 export interface DownloadGroupProps {
-  library: LibraryGame[];
+  library: Game[];
   title: string;
   openDeleteGameModal: (gameId: number) => void;
   openGameInstaller: (gameId: number) => void;
@@ -65,7 +65,7 @@ export function DownloadGroup({
     resumeSeeding,
   } = useDownload();
 
-  const getFinalDownloadSize = (game: LibraryGame) => {
+  const getFinalDownloadSize = (game: Game) => {
     const isGameDownloading = lastPacket?.game.id === game.id;
 
     if (game.fileSize) return formatBytes(game.fileSize);
@@ -86,7 +86,7 @@ export function DownloadGroup({
     return map;
   }, [seedingStatus]);
 
-  const getGameInfo = (game: LibraryGame) => {
+  const getGameInfo = (game: Game) => {
     const isGameDownloading = lastPacket?.game.id === game.id;
     const finalDownloadSize = getFinalDownloadSize(game);
     const seedingStatus = seedingMap.get(game.id);
@@ -165,7 +165,7 @@ export function DownloadGroup({
     return <p>{t(game.status as string)}</p>;
   };
 
-  const getGameActions = (game: LibraryGame): DropdownMenuItem[] => {
+  const getGameActions = (game: Game): DropdownMenuItem[] => {
     const isGameDownloading = lastPacket?.game.id === game.id;
 
     const deleting = isGameDeleting(game.id);

src/renderer/src/pages/downloads/downloads.tsx

@@ -7,7 +7,7 @@ import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 import * as styles from "./downloads.css";
 import { DeleteGameModal } from "./delete-game-modal";
 import { DownloadGroup } from "./download-group";
-import type { LibraryGame, SeedingStatus } from "@types";
+import type { Game, SeedingStatus } from "@types";
 import { orderBy } from "lodash-es";
 import { ArrowDownIcon } from "@primer/octicons-react";
 
@@ -49,8 +49,8 @@ export default function Downloads() {
     setShowDeleteModal(true);
   };
 
-  const libraryGroup: Record<string, LibraryGame[]> = useMemo(() => {
-    const initialValue: Record<string, LibraryGame[]> = {
+  const libraryGroup: Record<string, Game[]> = useMemo(() => {
+    const initialValue: Record<string, Game[]> = {
       downloading: [],
       queued: [],
       complete: [],

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

@@ -23,7 +23,7 @@ import { buildGameAchievementPath } from "@renderer/helpers";
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 
-const fakeAchievements: UserAchievement[] = [
+const achievementsPlaceholder: UserAchievement[] = [
   {
     displayName: "Timber!!",
     name: "",
@@ -140,7 +140,7 @@ export function Sidebar() {
             <h3>{t("sign_in_to_see_achievements")}</h3>
           </div>
           <ul className={styles.list} style={{ filter: "blur(4px)" }}>
-            {fakeAchievements.map((achievement, index) => (
+            {achievementsPlaceholder.map((achievement, index) => (
               <li key={index}>
                 <div className={styles.listItem}>
                   <img