feat: enhance repack availability status display with new UI elements and translations

src/locales/en/translation.json

@@ -372,6 +372,9 @@
     "audio": "Audio",
     "filter_by_source": "Filter by source",
     "no_repacks_found": "No sources found for this game",
+    "source_online": "Source is online",
+    "source_partial": "Some links are offline",
+    "source_offline": "Source is offline",
     "delete_review": "Delete review",
     "remove_review": "Remove Review",
     "delete_review_modal_title": "Are you sure you want to delete your review?",

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

@@ -42,12 +42,38 @@
     padding: calc(globals.$spacing-unit * 2);
   }
 
+  &__availability-orb {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-left: calc(globals.$spacing-unit * 1);
+    vertical-align: middle;
+
+    &--online {
+      background-color: #22c55e;
+      box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
+    }
+
+    &--partial {
+      background-color: #eab308;
+      box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
+    }
+
+    &--offline {
+      background-color: #ef4444;
+      opacity: 0.7;
+      box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
+    }
+  }
+
   &__repack-title {
     color: globals.$muted-color;
     word-break: break-word;
-    display: flex;
-    align-items: center;
-    gap: calc(globals.$spacing-unit * 1);
+  }
+
+  &__repack-title-text {
+    word-break: break-word;
   }
 
   &__repack-info {
@@ -61,8 +87,9 @@
     border-radius: 6px;
     font-size: 9px;
     text-align: center;
-    flex-shrink: 0;
     border: 1px solid rgba(34, 197, 94, 0.5);
+    margin-left: calc(globals.$spacing-unit * 1);
+    vertical-align: middle;
   }
 
   &__no-results {

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

@@ -6,6 +6,7 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
 } from "@primer/octicons-react";
+import { Tooltip } from "react-tooltip";
 
 import {
   Badge,
@@ -185,6 +186,20 @@ export function RepacksModal({
     );
   }, [repacks, hashesInDebrid]);
 
+  const getRepackAvailabilityStatus = (
+    repack: GameRepack
+  ): "online" | "partial" | "offline" => {
+    const unavailableSet = new Set(repack.unavailableUris ?? []);
+    const availableCount = repack.uris.filter(
+      (uri) => !unavailableSet.has(uri)
+    ).length;
+    const unavailableCount = repack.uris.length - availableCount;
+
+    if (unavailableCount === 0) return "online";
+    if (availableCount === 0) return "offline";
+    return "partial";
+  };
+
   useEffect(() => {
     const term = filterTerm.trim().toLowerCase();
 
@@ -363,6 +378,8 @@ export function RepacksModal({
             filteredRepacks.map((repack) => {
               const isLastDownloadedOption =
                 checkIfLastDownloadedOption(repack);
+              const availabilityStatus = getRepackAvailabilityStatus(repack);
+              const tooltipId = `availability-orb-${repack.id}`;
 
               return (
                 <Button
@@ -372,7 +389,15 @@ export function RepacksModal({
                   className="repacks-modal__repack-button"
                 >
                   <p className="repacks-modal__repack-title">
-                    {repack.title}
+                    <span className="repacks-modal__repack-title-text">
+                      {repack.title}
+                    </span>
+                    <span
+                      className={`repacks-modal__availability-orb repacks-modal__availability-orb--${availabilityStatus}`}
+                      data-tooltip-id={tooltipId}
+                      data-tooltip-content={t(`source_${availabilityStatus}`)}
+                    />
+                    <Tooltip id={tooltipId} />
                     {userPreferences?.enableNewDownloadOptionsBadges !==
                       false &&
                       isNewRepack(repack) && (