feat(settings): label provider order with account modes

src/renderer/App.tsx

@@ -975,16 +975,27 @@ const KNOWN_HOSTERS: { id: string; label: string }[] = [
   { id: "isra", label: "Isra.cloud" }
 ];
 
+export function buildProviderOrderEntry(provider: DebridProvider, settings: RendererSettings): {
+  id: DebridProvider;
+  label: string;
+  icon: string;
+} {
+  const legacyMegaService = settings.megaDebridPreferApi ? "megadebrid-api" : "megadebrid-web";
+  const service = provider === "megadebrid" ? legacyMegaService : provider as AccountService;
+  const kind = getConfiguredAccountKind(settings, service);
+  const option = kind ? ACCOUNT_OPTIONS.find((entry) => entry.kind === kind) : null;
+  const modeLabel = option?.modeLabel || (provider === "megadebrid" ? (settings.megaDebridPreferApi ? "API" : "Web-Login") : "");
+  const serviceLabel = option?.serviceLabel || providerLabels[provider];
+  return {
+    id: provider,
+    label: modeLabel ? `${serviceLabel} (${modeLabel})` : serviceLabel,
+    icon: ACCOUNT_SERVICE_ICONS[option?.service || service]
+  };
+}
+
 function providerLabelWithMode(provider: DebridProvider, settings: RendererSettings): string {
-  const base = providerLabels[provider];
-  if (provider === "megadebrid" || provider === "megadebrid-api" || provider === "megadebrid-web") {
-    return base;
-  }
-  const kind = getConfiguredAccountKind(settings, provider as AccountService);
-  if (!kind) return base;
-  const opt = ACCOUNT_OPTIONS.find((o) => o.kind === kind);
-  return opt?.modeLabel ? `${base} (${opt.modeLabel})` : base;
-}
+  return buildProviderOrderEntry(provider, settings).label;
+}
 
 function formatAllDebridSourceLabel(source: AllDebridHostInfo["source"]): string {
   return source === "web" ? "Web-Login" : "API-Key";
@@ -5586,7 +5597,7 @@ export function App(): ReactElement {
     statusSort: accountStatusSort,
     runtime: accountRuntimeModel,
     rules: {
-      providerOrder: activeProviderOrder.map((provider) => providerLabelWithMode(provider, settingsDraft)),
+      providerOrder: activeProviderOrder.map((provider) => buildProviderOrderEntry(provider, settingsDraft)),
       routing: routingEntries.map(([hosterId, provider]) => `${KNOWN_HOSTERS.find((hoster) => hoster.id === hosterId)?.label || hosterId} → ${providerLabelWithMode(provider, settingsDraft)}`),
       autoFallback: settingsDraft.autoProviderFallback,
       rememberCredentials: settingsDraft.rememberToken,

src/renderer/views/settings/AccountWorkspace.tsx

@@ -81,7 +81,7 @@ function getAccountPanelNavigationIndex(currentIndex: number, key: string): numb
 }
 
 export interface AccountRulesViewModel {
-  providerOrder: readonly string[];
+  providerOrder: readonly { id: string; label: string; icon: string }[];
   routing: readonly string[];
   autoFallback: boolean;
   rememberCredentials?: boolean;
@@ -505,21 +505,24 @@ function AccountRules({ model, actions }: AccountWorkspaceProps): ReactElement {
           <span className="settings-rule-empty">Keine Provider konfiguriert.</span>
         ) : (
           <ol className="settings-provider-order">
-            {model.rules.providerOrder.map((provider, index) => (
-              <li
-                draggable={Boolean(actions.onProviderDragStart)}
-                key={`${provider}-${index}`}
+            {model.rules.providerOrder.map((provider, index) => (
+              <li
+                draggable={Boolean(actions.onProviderDragStart)}
+                key={provider.id}
                 onDragEnd={actions.onProviderDragEnd}
                 onDragOver={(event) => actions.onProviderDragOver?.(event, index)}
                 onDragStart={(event) => actions.onProviderDragStart?.(event, index)}
                 onDrop={(event) => actions.onProviderDrop?.(event, index)}
-              >
-                <span>{provider}</span>
-                {actions.onMoveProvider ? (
-                  <span className="settings-provider-order-actions">
-                    <button aria-label={`${provider} nach oben`} disabled={index === 0} onClick={() => actions.onMoveProvider?.(index, -1)} type="button">↑</button>
-                    <button aria-label={`${provider} nach unten`} disabled={index === model.rules.providerOrder.length - 1} onClick={() => actions.onMoveProvider?.(index, 1)} type="button">↓</button>
-                  </span>
+              >
+                <span className="settings-provider-order-provider">
+                  <img alt="" aria-hidden="true" draggable={false} height="20" src={provider.icon} width="20" />
+                  <span>{provider.label}</span>
+                </span>
+                {actions.onMoveProvider ? (
+                  <span className="settings-provider-order-actions">
+                    <button aria-label={`${provider.label} nach oben`} disabled={index === 0} onClick={() => actions.onMoveProvider?.(index, -1)} type="button">↑</button>
+                    <button aria-label={`${provider.label} nach unten`} disabled={index === model.rules.providerOrder.length - 1} onClick={() => actions.onMoveProvider?.(index, 1)} type="button">↓</button>
+                  </span>
                 ) : null}
               </li>
             ))}

src/renderer/views/settings/settings.css

@@ -1067,6 +1067,19 @@
   gap: 4px;
 }
 
+.settings-provider-order-provider {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 9px;
+  color: var(--ui-text);
+}
+
+.settings-provider-order-provider img {
+  flex: 0 0 auto;
+  object-fit: contain;
+}
+
 .settings-provider-order-actions button {
   width: 30px;
   height: 28px;