Add multi-download-client support and UI management

Implements support for configuring both qBittorrent and SABnzbd simultaneously, including migration from legacy config, protocol-aware routing, and protocol filtering. Adds new CRUD API routes for download clients, new UI management components, and updates setup and settings flows to use the new multi-client architecture. Updates documentation to describe the new structure and usage.
2026-06-03 12:50:09 +00:00 · 2026-01-29 09:21:33 -05:00
parent 3290ebbc9d
commit 2cda6decbe
26 changed files with 3452 additions and 924 deletions
@@ -0,0 +1,102 @@
+/**
+ * Component: Download Client Card
+ * Documentation: documentation/phase3/download-clients.md
+ */
+
+'use client';
+
+import React from 'react';
+
+interface DownloadClientCardProps {
+  client: {
+    id: string;
+    type: 'qbittorrent' | 'sabnzbd';
+    name: string;
+    url: string;
+    enabled: boolean;
+  };
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function DownloadClientCard({ client, onEdit, onDelete }: DownloadClientCardProps) {
+  const typeName = client.type === 'qbittorrent' ? 'qBittorrent' : 'SABnzbd';
+  const typeColor = client.type === 'qbittorrent' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300';
+
+  // Truncate URL for display
+  const displayUrl = client.url.length > 40 ? `${client.url.substring(0, 40)}...` : client.url;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-4 hover:shadow-lg transition-shadow">
+      <div className="flex items-start justify-between gap-3">
+        {/* Client Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-2">
+            <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 truncate">
+              {client.name}
+            </h3>
+            {!client.enabled && (
+              <span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                Disabled
+              </span>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className={`inline-block text-xs px-2 py-1 rounded font-medium ${typeColor} w-fit`}>
+              {typeName}
+            </span>
+            <p className="text-xs text-gray-500 dark:text-gray-400 truncate" title={client.url}>
+              {displayUrl}
+            </p>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {/* Edit Button */}
+          <button
+            onClick={onEdit}
+            className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors"
+            title="Edit client"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+              />
+            </svg>
+          </button>
+
+          {/* Delete Button */}
+          <button
+            onClick={onDelete}
+            className="p-2 text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
+            title="Delete client"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}