feat: refactor

src/renderer/src/components/header/auto-update-sub-header.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { SyncIcon } from "@primer/octicons-react";
 import { Link } from "../link/link";
 import * as styles from "./header.css";
-import { AppUpdaterEvent } from "@types";
+import type { AppUpdaterEvent } from "@types";
 
 export const releasesPageUrl =
   "https://github.com/hydralauncher/hydra/releases/latest";

src/renderer/src/components/hero/hero.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import * as styles from "./hero.css";
 import { useEffect, useState } from "react";
-import { TrendingGame } from "@types";
+import type { TrendingGame } from "@types";
 import { useTranslation } from "react-i18next";
 import Skeleton from "react-loading-skeleton";
 

src/renderer/src/context/game-details/game-details.context.tsx

@@ -155,14 +155,15 @@ export function GameDetailsContextProvider({
       setStats(result);
     });
 
-    window.electron
-      .getGameAchievements(objectId, shop as GameShop)
-      .then((achievements) => {
-        if (abortController.signal.aborted) return;
-        if (!userDetails) return;
-        setAchievements(achievements);
-      })
-      .catch(() => {});
+    if (userDetails) {
+      window.electron
+        .getUnlockedAchievements(objectId, shop as GameShop)
+        .then((achievements) => {
+          if (abortController.signal.aborted) return;
+          setAchievements(achievements);
+        })
+        .catch(() => {});
+    }
 
     updateGame();
   }, [

src/renderer/src/declaration.d.ts

@@ -66,11 +66,6 @@ declare global {
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
     getGameStats: (objectId: string, shop: GameShop) => Promise<GameStats>;
     getTrendingGames: () => Promise<TrendingGame[]>;
-    getGameAchievements: (
-      objectId: string,
-      shop: GameShop,
-      userId?: string
-    ) => Promise<UserAchievement[]>;
     onAchievementUnlocked: (
       cb: (
         objectId: string,
@@ -208,6 +203,10 @@ declare global {
       shop: GameShop,
       userId: string
     ) => Promise<ComparedAchievements>;
+    getUnlockedAchievements: (
+      objectId: string,
+      shop: GameShop
+    ) => Promise<UserAchievement[]>;
 
     /* Profile */
     getMe: () => Promise<UserDetails | null>;

src/renderer/src/features/running-game-slice.ts

@@ -1,5 +1,5 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { GameRunning } from "@types";
+import type { GameRunning } from "@types";
 
 export interface GameRunningState {
   gameRunning: GameRunning | null;

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

@@ -11,14 +11,14 @@ import {
 import { LockIcon, PersonIcon, TrophyIcon } from "@primer/octicons-react";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { gameDetailsContext } from "@renderer/context";
-import { ComparedAchievements, UserAchievement } from "@types";
+import type { ComparedAchievements, UserAchievement } from "@types";
 import { average } from "color.js";
 import Color from "color";
 import { Link } from "@renderer/components";
 import { ComparedAchievementList } from "./compared-achievement-list";
 
 interface UserInfo {
-  userId: string;
+  id: string;
   displayName: string;
   profileImageUrl: string | null;
   totalAchievementCount: number;
@@ -43,7 +43,9 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
   const { t } = useTranslation("achievement");
   const { userDetails, hasActiveSubscription } = useUserDetails();
 
-  const getProfileImage = (user: UserInfo) => {
+  const getProfileImage = (
+    user: Pick<UserInfo, "profileImageUrl" | "displayName">
+  ) => {
     return (
       <div className={styles.profileAvatar}>
         {user.profileImageUrl ? (
@@ -59,11 +61,7 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
     );
   };
 
-  if (
-    isComparison &&
-    userDetails?.id == user.userId &&
-    !hasActiveSubscription
-  ) {
+  if (isComparison && userDetails?.id == user.id && !hasActiveSubscription) {
     return (
       <div
         style={{
@@ -213,11 +211,8 @@ export function AchievementsContent({
   const dispatch = useAppDispatch();
 
   const { userDetails, hasActiveSubscription } = useUserDetails();
-
   useEffect(() => {
-    if (gameTitle) {
-      dispatch(setHeaderTitle(gameTitle));
-    }
+    dispatch(setHeaderTitle(gameTitle));
   }, [dispatch, gameTitle]);
 
   const handleHeroLoad = async () => {
@@ -247,16 +242,15 @@ export function AchievementsContent({
   };
 
   const getProfileImage = (
-    profileImageUrl: string | null,
-    displayName: string
+    user: Pick<UserInfo, "profileImageUrl" | "displayName">
   ) => {
     return (
       <div className={styles.profileAvatarSmall}>
-        {profileImageUrl ? (
+        {user.profileImageUrl ? (
           <img
             className={styles.profileAvatarSmall}
-            src={profileImageUrl}
-            alt={displayName}
+            src={user.profileImageUrl}
+            alt={user.displayName}
           />
         ) : (
           <PersonIcon size={24} />
@@ -315,7 +309,6 @@ export function AchievementsContent({
             <AchievementSummary
               user={{
                 ...userDetails,
-                userId: userDetails.id,
                 totalAchievementCount: comparedAchievements
                   ? comparedAchievements.owner.totalAchievementCount
                   : achievements!.length,
@@ -346,36 +339,21 @@ export function AchievementsContent({
               <div></div>
               {hasActiveSubscription && (
                 <div style={{ display: "flex", justifyContent: "center" }}>
-                  {getProfileImage(
-                    userDetails.profileImageUrl,
-                    userDetails.displayName
-                  )}
+                  {getProfileImage({ ...userDetails })}
                 </div>
               )}
               <div style={{ display: "flex", justifyContent: "center" }}>
-                {getProfileImage(
-                  otherUser.profileImageUrl,
-                  otherUser.displayName
-                )}
+                {getProfileImage(otherUser)}
               </div>
             </div>
           </div>
         )}
 
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            width: "100%",
-            backgroundColor: vars.color.background,
-          }}
-        >
-          {otherUser ? (
-            <ComparedAchievementList achievements={comparedAchievements!} />
-          ) : (
-            <AchievementList achievements={achievements!} />
-          )}
-        </div>
+        {otherUser ? (
+          <ComparedAchievementList achievements={comparedAchievements!} />
+        ) : (
+          <AchievementList achievements={achievements!} />
+        )}
       </section>
     </div>
   );

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

@@ -4,7 +4,7 @@ import * as styles from "./achievements.css";
 export function AchievementsSkeleton() {
   return (
     <div className={styles.container}>
-      <div className={styles.heroImage}>
+      <div className={styles.hero}>
         <Skeleton className={styles.heroImageSkeleton} />
       </div>
       <div className={styles.heroPanelSkeleton}></div>

src/renderer/src/pages/achievements/achievements.css.ts

@@ -3,8 +3,8 @@ import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
 export const HERO_HEIGHT = 150;
-export const LOGO_HEIGHT = 100;
-export const LOGO_MAX_WIDTH = 200;
+const LOGO_HEIGHT = 100;
+const LOGO_MAX_WIDTH = 200;
 
 export const wrapper = style({
   display: "flex",
@@ -104,6 +104,7 @@ export const list = style({
   gap: `${SPACING_UNIT * 2}px`,
   padding: `${SPACING_UNIT * 2}px`,
   width: "100%",
+  backgroundColor: vars.color.background,
 });
 
 export const listItem = style({
@@ -162,12 +163,7 @@ export const heroLogoBackdrop = style({
 });
 
 export const heroImageSkeleton = style({
-  height: "300px",
-  "@media": {
-    "(min-width: 1250px)": {
-      height: "350px",
-    },
-  },
+  height: "150px",
 });
 
 export const heroPanelSkeleton = style({

src/renderer/src/pages/achievements/achievements.tsx

@@ -52,7 +52,7 @@ export default function Achievements() {
     if (!otherUserId || !comparedAchievements) return null;
 
     return {
-      userId: otherUserId,
+      id: otherUserId,
       displayName: comparedAchievements.target.displayName,
       profileImageUrl: comparedAchievements.target.profileImageUrl,
       totalAchievementCount: comparedAchievements.target.totalAchievementCount,

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 { LibraryGame } from "@types";
+import type { LibraryGame } from "@types";
 import { orderBy } from "lodash-es";
 import { ArrowDownIcon } from "@primer/octicons-react";
 

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
-import { GameRepack, GameShop, Steam250Game } from "@types";
+import type { GameRepack, GameShop, Steam250Game } from "@types";
 
 import { Button, ConfirmationModal } from "@renderer/components";
 import { buildGameDetailsPath } from "@renderer/helpers";

src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Button, Modal } from "@renderer/components";
 import * as styles from "./remove-from-library-modal.css";
-import { Game } from "@types";
+import type { Game } from "@types";
 
 interface RemoveGameFromLibraryModalProps {
   visible: boolean;

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

@@ -14,7 +14,7 @@ import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
 import { FriendsBox } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
-import { UserGame } from "@types";
+import type { UserGame } from "@types";
 import {
   buildGameAchievementPath,
   buildGameDetailsPath,

src/renderer/src/pages/settings/add-download-source-modal.tsx

@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { downloadSourcesTable } from "@renderer/dexie";
-import { DownloadSourceValidationResult } from "@types";
+import type { DownloadSourceValidationResult } from "@types";
 import { downloadSourcesWorker } from "@renderer/workers";
 
 interface AddDownloadSourceModalProps {

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx

@@ -1,5 +1,5 @@
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
-import { UserFriend } from "@types";
+import type { UserFriend } from "@types";
 import { useEffect, useRef, useState } from "react";
 import { UserFriendItem } from "./user-friend-item";
 import { useNavigate } from "react-router-dom";

src/renderer/src/workers/repacks.worker.ts

@@ -1,6 +1,6 @@
 import { repacksTable } from "@renderer/dexie";
 import { formatName } from "@shared";
-import { GameRepack } from "@types";
+import type { GameRepack } from "@types";
 import flexSearch from "flexsearch";
 
 interface SerializedGameRepack extends Omit<GameRepack, "uris"> {