fix: adding color as library

package.json

@@ -41,6 +41,7 @@
     "better-sqlite3": "^9.5.0",
     "check-disk-space": "^3.4.0",
     "classnames": "^2.5.1",
+    "color": "^4.2.3",
     "color.js": "^1.2.0",
     "date-fns": "^3.6.0",
     "easydl": "^1.1.1",
@@ -51,7 +52,6 @@
     "jsdom": "^24.0.0",
     "lodash-es": "^4.17.21",
     "lottie-react": "^2.4.0",
-    "node-unrar-js": "^2.0.2",
     "parse-torrent": "^11.0.16",
     "ps-list": "^8.1.1",
     "react-i18next": "^14.1.0",

src/renderer/src/components/text-field/text-field.tsx

@@ -8,7 +8,7 @@ export interface TextFieldProps
     HTMLInputElement
   > {
   theme?: NonNullable<RecipeVariants<typeof styles.textField>>["theme"];
-  label?: string;
+  label?: string | React.ReactNode;
   textFieldProps?: React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLDivElement>,
     HTMLDivElement

src/renderer/src/pages/downloads/downloads.css.ts

@@ -2,12 +2,18 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
+export const downloadTitleWrapper = style({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: `${SPACING_UNIT}px`,
+  gap: `${SPACING_UNIT}px`,
+});
+
 export const downloadTitle = style({
   fontWeight: "bold",
   cursor: "pointer",
   color: vars.color.bodyText,
   textAlign: "left",
-  marginBottom: `${SPACING_UNIT}px`,
   fontSize: "16px",
   display: "block",
   ":hover": {
@@ -15,6 +21,16 @@ export const downloadTitle = style({
   },
 });
 
+export const downloaderName = style({
+  color: "#c0c1c7",
+  fontSize: "10px",
+  padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT}px`,
+  border: "solid 1px #c0c1c7",
+  borderRadius: "4px",
+  display: "flex",
+  alignItems: "center",
+});
+
 export const downloads = style({
   width: "100%",
   gap: `${SPACING_UNIT * 2}px`,

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

@@ -65,6 +65,11 @@ export function Downloads() {
     return game.repack?.fileSize ?? "N/A";
   };
 
+  const downloaderName = {
+    [Downloader.Http]: t("real_debrid"),
+    [Downloader.Torrent]: t("torrent"),
+  };
+
   const getGameInfo = (game: Game) => {
     const isGameDownloading = gameDownloading?.id === game?.id;
     const finalDownloadSize = getFinalDownloadSize(game);
@@ -251,15 +256,21 @@ export function Downloads() {
               />
               <div className={styles.downloadRightContent}>
                 <div className={styles.downloadDetails}>
-                  <button
+                  <div className={styles.downloadTitleWrapper}>
-                    type="button"
+                    <button
-                    className={styles.downloadTitle}
+                      type="button"
-                    onClick={() =>
+                      className={styles.downloadTitle}
-                      navigate(`/game/${game.shop}/${game.objectID}`)
+                      onClick={() =>
-                    }
+                        navigate(`/game/${game.shop}/${game.objectID}`)
-                  >
+                      }
-                    {game.title}
+                    >
-                  </button>
+                      {game.title}
+                    </button>
+
+                    <small className={styles.downloaderName}>
+                      {downloaderName[game?.downloader]}
+                    </small>
+                  </div>
 
                   {getGameInfo(game)}
                 </div>

src/renderer/src/pages/game-details/installation-guides/constants.ts

@@ -1,3 +1,4 @@
 export const DONT_SHOW_ONLINE_FIX_INSTRUCTIONS_KEY =
   "dontShowOnlineFixInstructions";
+
 export const DONT_SHOW_DODI_INSTRUCTIONS_KEY = "dontShowDodiInstructions";