feat: added new badge to repacks-modal, set up badge clearing

src/renderer/src/declaration.d.ts

@@ -142,6 +142,10 @@ declare global {
       shop: GameShop,
       objectId: string
     ) => Promise<void>;
+    clearNewDownloadOptions: (
+      shop: GameShop,
+      objectId: string
+    ) => Promise<void>;
     toggleGamePin: (
       shop: GameShop,
       objectId: string,

src/renderer/src/pages/game-details/modals/repacks-modal.scss

@@ -55,15 +55,15 @@
   }
 
   &__new-badge {
-    background-color: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.7);
-    padding: 4px 8px;
+    background-color: rgba(34, 197, 94, 0.15);
+    color: rgb(187, 247, 208);
+    padding: 2px 6px;
     border-radius: 6px;
-    font-size: 12px;
+    font-size: 10px;
     font-weight: 600;
-    min-width: 24px;
     text-align: center;
     flex-shrink: 0;
+    border: 1px solid rgba(34, 197, 94, 0.5);
   }
 
   &__no-results {

src/renderer/src/pages/game-details/modals/repacks-modal.tsx

@@ -21,7 +21,8 @@ import { DownloadSettingsModal } from "./download-settings-modal";
 import { gameDetailsContext } from "@renderer/context";
 import { Downloader } from "@shared";
 import { orderBy } from "lodash-es";
-import { useDate, useFeature } from "@renderer/hooks";
+import { useDate, useFeature, useAppDispatch } from "@renderer/hooks";
+import { clearNewDownloadOptions } from "@renderer/features";
 import "./repacks-modal.scss";
 
 export interface RepacksModalProps {
@@ -56,6 +57,9 @@ export function RepacksModal({
     null
   );
   const [isLoadingTimestamp, setIsLoadingTimestamp] = useState(true);
+  const [viewedRepackIds, setViewedRepackIds] = useState<Set<string>>(
+    new Set()
+  );
 
   const { game, repacks } = useContext(gameDetailsContext);
 
@@ -63,14 +67,15 @@ export function RepacksModal({
 
   const { formatDate } = useDate();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
 
   const getHashFromMagnet = (magnet: string) => {
     if (!magnet || typeof magnet !== "string") {
       return null;
     }
 
-    const hashRegex = /xt=urn:btih:([a-f0-9]+)/i;
-    const match = hashRegex.exec(magnet);
+    const hashRegex = /xt=urn:btih:([a-zA-Z0-9]+)/i;
+    const match = magnet.match(hashRegex);
 
     return match ? match[1].toLowerCase() : null;
   };
@@ -115,6 +120,21 @@ export function RepacksModal({
     }
   }, [visible, repacks]);
 
+  useEffect(() => {
+    if (
+      visible &&
+      game?.newDownloadOptionsCount &&
+      game.newDownloadOptionsCount > 0
+    ) {
+      // Clear the badge in the database
+      globalThis.electron.clearNewDownloadOptions(game.shop, game.objectId);
+
+      // Clear the badge in Redux store
+      const gameId = `${game.shop}:${game.objectId}`;
+      dispatch(clearNewDownloadOptions({ gameId }));
+    }
+  }, [visible, game, dispatch]);
+
   const sortedRepacks = useMemo(() => {
     return orderBy(
       repacks,
@@ -157,6 +177,8 @@ export function RepacksModal({
   const handleRepackClick = (repack: GameRepack) => {
     setRepack(repack);
     setShowSelectFolderModal(true);
+    // Mark this repack as viewed to hide the "NEW" badge
+    setViewedRepackIds((prev) => new Set(prev).add(repack.id));
   };
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -180,6 +202,9 @@ export function RepacksModal({
     // Don't show badge while loading timestamp
     if (isLoadingTimestamp) return false;
 
+    // Don't show badge if user has already clicked this repack in current session
+    if (viewedRepackIds.has(repack.id)) return false;
+
     if (!lastCheckTimestamp || !repack.createdAt) {
       return false;
     }