feat: add support for VikingFile and display if link is available

src/renderer/src/constants.ts

@@ -14,6 +14,7 @@ export const DOWNLOADER_NAME = {
   [Downloader.FuckingFast]: "FuckingFast",
   [Downloader.TorBox]: "TorBox",
   [Downloader.Hydra]: "Nimbus",
+  [Downloader.VikingFile]: "VikingFile",
 };
 
 export const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;

src/renderer/src/pages/game-details/modals/download-settings-modal.scss

@@ -19,23 +19,67 @@
     color: globals.$body-color;
   }
 
-  &__downloaders {
-    display: grid;
-    gap: globals.$spacing-unit;
-    grid-template-columns: repeat(2, 1fr);
+  &__downloaders-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid globals.$border-color;
+    border-radius: 4px;
+    padding: calc(globals.$spacing-unit / 2);
+    background-color: globals.$dark-background-color;
   }
 
-  &__downloader-option {
-    position: relative;
+  &__downloader-item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2);
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-color: transparent;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+    color: globals.$body-color;
+    font-size: 14px;
+    text-align: left;
 
-    &:only-child {
-      grid-column: 1 / -1;
+    &:hover:not(&--disabled) {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &--selected {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
   }
 
-  &__downloader-icon {
-    position: absolute;
-    left: calc(globals.$spacing-unit * 2);
+  &__downloader-name {
+    flex: 1;
+  }
+
+  &__availability-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    &--available {
+      background-color: #22c55e;
+      box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
+    }
+
+    &--unavailable {
+      background-color: #ef4444;
+      box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
+    }
   }
 
   &__path-error {

src/renderer/src/pages/game-details/modals/download-settings-modal.tsx

@@ -7,8 +7,13 @@ import {
   Modal,
   TextField,
 } from "@renderer/components";
-import { CheckCircleFillIcon, DownloadIcon } from "@primer/octicons-react";
-import { Downloader, formatBytes, getDownloadersForUris } from "@shared";
+import { DownloadIcon } from "@primer/octicons-react";
+import {
+  Downloader,
+  formatBytes,
+  getDownloadersForUri,
+  getDownloadersForUris,
+} from "@shared";
 import type { GameRepack } from "@types";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import { useAppSelector, useFeature, useToast } from "@renderer/hooks";
@@ -82,6 +87,41 @@ export function DownloadSettingsModal({
     return getDownloadersForUris(repack?.uris ?? []);
   }, [repack?.uris]);
 
+  const downloadOptions = useMemo(() => {
+    if (!repack) return [];
+
+    const unavailableUrisSet = new Set(repack.unavailableUris ?? []);
+
+    const downloaderMap = new Map<
+      Downloader,
+      { hasAvailable: boolean; hasUnavailable: boolean }
+    >();
+
+    for (const uri of repack.uris) {
+      const uriDownloaders = getDownloadersForUri(uri);
+      if (uriDownloaders.length > 0) {
+        const downloader = uriDownloaders[0];
+        const isAvailable = !unavailableUrisSet.has(uri);
+
+        const existing = downloaderMap.get(downloader);
+        if (existing) {
+          existing.hasAvailable = existing.hasAvailable || isAvailable;
+          existing.hasUnavailable = existing.hasUnavailable || !isAvailable;
+        } else {
+          downloaderMap.set(downloader, {
+            hasAvailable: isAvailable,
+            hasUnavailable: !isAvailable,
+          });
+        }
+      }
+    }
+
+    return Array.from(downloaderMap.entries()).map(([downloader, status]) => ({
+      downloader,
+      isAvailable: status.hasAvailable,
+    }));
+  }, [repack]);
+
   const getDefaultDownloader = useCallback(
     (availableDownloaders: Downloader[]) => {
       if (availableDownloaders.length === 0) return null;
@@ -186,31 +226,47 @@ export function DownloadSettingsModal({
         <div className="download-settings-modal__downloads-path-field">
           <span>{t("downloader")}</span>
 
-          <div className="download-settings-modal__downloaders">
-            {downloaders.map((downloader) => {
-              const shouldDisableButton =
-                (downloader === Downloader.RealDebrid &&
+          <div className="download-settings-modal__downloaders-list">
+            {downloadOptions.map((option) => {
+              const isUnavailable = !option.isAvailable;
+              const shouldDisableOption =
+                isUnavailable ||
+                (option.downloader === Downloader.RealDebrid &&
                   !userPreferences?.realDebridApiToken) ||
-                (downloader === Downloader.TorBox &&
+                (option.downloader === Downloader.TorBox &&
                   !userPreferences?.torBoxApiToken) ||
-                (downloader === Downloader.Hydra &&
+                (option.downloader === Downloader.Hydra &&
                   !isFeatureEnabled(Feature.Nimbus));
 
+              const isSelected = selectedDownloader === option.downloader;
+
               return (
-                <Button
-                  key={downloader}
-                  className="download-settings-modal__downloader-option"
-                  theme={
-                    selectedDownloader === downloader ? "primary" : "outline"
-                  }
-                  disabled={shouldDisableButton}
-                  onClick={() => setSelectedDownloader(downloader)}
+                <button
+                  type="button"
+                  key={option.downloader}
+                  className={`download-settings-modal__downloader-item ${
+                    isSelected
+                      ? "download-settings-modal__downloader-item--selected"
+                      : ""
+                  } ${
+                    shouldDisableOption
+                      ? "download-settings-modal__downloader-item--disabled"
+                      : ""
+                  }`}
+                  disabled={shouldDisableOption}
+                  onClick={() => setSelectedDownloader(option.downloader)}
                 >
-                  {selectedDownloader === downloader && (
-                    <CheckCircleFillIcon className="download-settings-modal__downloader-icon" />
-                  )}
-                  {DOWNLOADER_NAME[downloader]}
-                </Button>
+                  <span className="download-settings-modal__downloader-name">
+                    {DOWNLOADER_NAME[option.downloader]}
+                  </span>
+                  <span
+                    className={`download-settings-modal__availability-indicator ${
+                      option.isAvailable
+                        ? "download-settings-modal__availability-indicator--available"
+                        : "download-settings-modal__availability-indicator--unavailable"
+                    }`}
+                  />
+                </button>
               );
             })}
           </div>