Initial release v1.0.0

frontend/features/settings/components/sections/AIServicesSection.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { SettingsSection, SettingsRow, SettingsInput, SettingsToggle } from "../ui";
+import { SystemSettings } from "../../types";
+import { InlineStatus, StatusType } from "@/components/ui/InlineStatus";
+
+interface AIServicesSectionProps {
+    settings: SystemSettings;
+    onUpdate: (updates: Partial<SystemSettings>) => void;
+    onTest: (service: string) => Promise<{ success: boolean; version?: string; error?: string }>;
+    isTesting: boolean;
+}
+
+export function AIServicesSection({ settings, onUpdate, onTest, isTesting }: AIServicesSectionProps) {
+    const [testStatus, setTestStatus] = useState<StatusType>("idle");
+    const [testMessage, setTestMessage] = useState("");
+
+    const handleTest = async () => {
+        setTestStatus("loading");
+        setTestMessage("Testing...");
+        const result = await onTest("fanart");
+        if (result.success) {
+            setTestStatus("success");
+            setTestMessage("Connected");
+        } else {
+            setTestStatus("error");
+            setTestMessage(result.error || "Failed");
+        }
+    };
+
+    return (
+        <SettingsSection 
+            id="ai-services" 
+            title="Artwork Services"
+            description="Enhance your library with high-quality artwork"
+        >
+            {/* Fanart.tv */}
+            <SettingsRow 
+                label="Enable Fanart.tv"
+                description="Enhanced artist and album artwork"
+                htmlFor="fanart-enabled"
+            >
+                <SettingsToggle
+                    id="fanart-enabled"
+                    checked={settings.fanartEnabled}
+                    onChange={(checked) => onUpdate({ fanartEnabled: checked })}
+                />
+            </SettingsRow>
+
+            {settings.fanartEnabled && (
+                <>
+                    <SettingsRow label="API Key">
+                        <SettingsInput
+                            type="password"
+                            value={settings.fanartApiKey}
+                            onChange={(v) => onUpdate({ fanartApiKey: v })}
+                            placeholder="Enter Fanart.tv API key"
+                            className="w-64"
+                        />
+                    </SettingsRow>
+
+                    <div className="pt-2">
+                        <div className="inline-flex items-center gap-3">
+                            <button
+                                onClick={handleTest}
+                                disabled={isTesting || !settings.fanartApiKey}
+                                className="px-4 py-1.5 text-sm bg-[#333] text-white rounded-full
+                                    hover:bg-[#404040] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            >
+                                {testStatus === "loading" ? "Testing..." : "Test Connection"}
+                            </button>
+                            <InlineStatus 
+                                status={testStatus} 
+                                message={testMessage}
+                                onClear={() => setTestStatus("idle")}
+                            />
+                        </div>
+                    </div>
+                </>
+            )}
+        </SettingsSection>
+    );
+}