chore: update package.json to use yarn commands for type checking and building

package.json

@@ -19,12 +19,12 @@
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
     "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
-    "typecheck": "npm run typecheck:node && npm run typecheck:web",
+    "typecheck": "yarn run typecheck:node && yarn run typecheck:web",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
-    "build": "npm run typecheck && electron-vite build",
+    "build": "yarn run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps && node ./scripts/postinstall.cjs",
-    "build:unpack": "npm run build && electron-builder --dir",
+    "build:unpack": "yarn run build && electron-builder --dir",
     "build:win": "electron-vite build && electron-builder --win",
     "build:mac": "electron-vite build && electron-builder --mac",
     "build:linux": "electron-vite build && electron-builder --linux",

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

@@ -305,9 +305,11 @@ function HeroDownloadView({
                       )}
                   </span>
                 )}
-                <span className="download-group__progress-percentage">
-                  <AnimatedPercentage value={currentProgress} />
-                </span>
+                {(!lastPacket?.isCheckingFiles || currentProgress > 0) && (
+                  <span className="download-group__progress-percentage">
+                    <AnimatedPercentage value={currentProgress} />
+                  </span>
+                )}
               </div>
               <div className="download-group__progress-bar">
                 <div

src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx

@@ -132,116 +132,112 @@ export function UserLibraryGameCard({
         onClick={() => navigate(buildUserGameDetailsPath(game))}
         title={isTooltipHovered ? undefined : game.title}
       >
-          <div className="user-library-game__overlay">
-            {isMe && (
-              <div className="user-library-game__actions-container">
-                <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>
-            )}
-            <div
-              className="user-library-game__playtime"
-              data-tooltip-place="top"
-              data-tooltip-content={
-                game.hasManuallyUpdatedPlaytime
-                  ? t("manual_playtime_tooltip")
-                  : undefined
-              }
-              data-tooltip-id={game.objectId}
-            >
-              {game.hasManuallyUpdatedPlaytime ? (
-                <AlertFillIcon
-                  size={11}
-                  className="user-library-game__manual-playtime"
-                />
-              ) : (
-                <ClockIcon size={11} />
-              )}
-              <span className="user-library-game__playtime-long">
-                {formatPlayTime(game.playTimeInSeconds)}
-              </span>
-              <span className="user-library-game__playtime-short">
-                {formatPlayTime(game.playTimeInSeconds, true)}
-              </span>
+        <div className="user-library-game__overlay">
+          {isMe && (
+            <div className="user-library-game__actions-container">
+              <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>
+          )}
+          <div
+            className="user-library-game__playtime"
+            data-tooltip-place="top"
+            data-tooltip-content={
+              game.hasManuallyUpdatedPlaytime
+                ? t("manual_playtime_tooltip")
+                : undefined
+            }
+            data-tooltip-id={game.objectId}
+          >
+            {game.hasManuallyUpdatedPlaytime ? (
+              <AlertFillIcon
+                size={11}
+                className="user-library-game__manual-playtime"
+              />
+            ) : (
+              <ClockIcon size={11} />
+            )}
+            <span className="user-library-game__playtime-long">
+              {formatPlayTime(game.playTimeInSeconds)}
+            </span>
+            <span className="user-library-game__playtime-short">
+              {formatPlayTime(game.playTimeInSeconds, true)}
+            </span>
+          </div>
 
-            {userProfile?.hasActiveSubscription &&
-              game.achievementCount > 0 && (
-                <div className="user-library-game__stats">
-                  <div className="user-library-game__stats-header">
-                    <div className="user-library-game__stats-content">
-                      <div
-                        className="user-library-game__stats-item"
-                        style={{
-                          transform: `translateY(${-100 * (statIndex % getStatsItemCount())}%)`,
-                        }}
-                      >
-                        <TrophyIcon size={13} />
-                        <span>
-                          {game.unlockedAchievementCount} /{" "}
-                          {game.achievementCount}
-                        </span>
-                      </div>
-
-                      {game.achievementsPointsEarnedSum > 0 && (
-                        <div
-                          className="user-library-game__stats-item"
-                          style={{
-                            transform: `translateY(${-100 * (statIndex % getStatsItemCount())}%)`,
-                          }}
-                        >
-                          <HydraIcon width={16} height={16} />
-                          {formatAchievementPoints(
-                            game.achievementsPointsEarnedSum
-                          )}
-                        </div>
-                      )}
-                    </div>
-
+          {userProfile?.hasActiveSubscription && game.achievementCount > 0 && (
+            <div className="user-library-game__stats">
+              <div className="user-library-game__stats-header">
+                <div className="user-library-game__stats-content">
+                  <div
+                    className="user-library-game__stats-item"
+                    style={{
+                      transform: `translateY(${-100 * (statIndex % getStatsItemCount())}%)`,
+                    }}
+                  >
+                    <TrophyIcon size={13} />
                     <span>
-                      {formatDownloadProgress(
-                        game.unlockedAchievementCount / game.achievementCount,
-                        1
-                      )}
+                      {game.unlockedAchievementCount} / {game.achievementCount}
                     </span>
                   </div>
 
-                  <progress
-                    max={1}
-                    value={
-                      game.unlockedAchievementCount / game.achievementCount
-                    }
-                    className="user-library-game__achievements-progress"
-                  />
+                  {game.achievementsPointsEarnedSum > 0 && (
+                    <div
+                      className="user-library-game__stats-item"
+                      style={{
+                        transform: `translateY(${-100 * (statIndex % getStatsItemCount())}%)`,
+                      }}
+                    >
+                      <HydraIcon width={16} height={16} />
+                      {formatAchievementPoints(
+                        game.achievementsPointsEarnedSum
+                      )}
+                    </div>
+                  )}
                 </div>
-              )}
-          </div>
 
-          {imageError || !game.coverImageUrl ? (
-            <div className="user-library-game__cover-placeholder">
-              <ImageIcon size={48} />
+                <span>
+                  {formatDownloadProgress(
+                    game.unlockedAchievementCount / game.achievementCount,
+                    1
+                  )}
+                </span>
+              </div>
+
+              <progress
+                max={1}
+                value={game.unlockedAchievementCount / game.achievementCount}
+                className="user-library-game__achievements-progress"
+              />
             </div>
-          ) : (
-            <img
-              src={game.coverImageUrl}
-              alt={game.title}
-              className="user-library-game__game-image"
-              onError={() => setImageError(true)}
-            />
           )}
+        </div>
+
+        {imageError || !game.coverImageUrl ? (
+          <div className="user-library-game__cover-placeholder">
+            <ImageIcon size={48} />
+          </div>
+        ) : (
+          <img
+            src={game.coverImageUrl}
+            alt={game.title}
+            className="user-library-game__game-image"
+            onError={() => setImageError(true)}
+          />
+        )}
       </button>
       <Tooltip
         id={game.objectId}