Merge pull request #1946 from hydralauncher/feat/download-option-availability

feat: enhance repack availability status display with orb displaying availability

src/locales/en/translation.json

@@ -382,6 +382,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

@@ -40,6 +40,34 @@
     gap: calc(globals.$spacing-unit * 1);
     color: globals.$body-color;
     padding: calc(globals.$spacing-unit * 2);
+    padding-right: calc(globals.$spacing-unit * 4);
+    position: relative;
+  }
+
+  &__availability-orb {
+    position: absolute;
+    top: calc(globals.$spacing-unit * 1.5);
+    right: calc(globals.$spacing-unit * 1.5);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    &--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 {

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
@@ -371,6 +388,13 @@ export function RepacksModal({
                   onClick={() => handleRepackClick(repack)}
                   className="repacks-modal__repack-button"
                 >
+                  <span
+                    className={`repacks-modal__availability-orb repacks-modal__availability-orb--${availabilityStatus}`}
+                    data-tooltip-id={tooltipId}
+                    data-tooltip-content={t(`source_${availabilityStatus}`)}
+                  />
+                  <Tooltip id={tooltipId} />
+
                   <p className="repacks-modal__repack-title">
                     {repack.title}
                     {userPreferences?.enableNewDownloadOptionsBadges !==