feat(ui): collapse connect instance panel when instances exist

components/dashboard/dashboard-controls.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { ChangeEvent } from "react";
 import type { FormEvent } from "react";
 import { formatDateTime } from "@/lib/dates";
@@ -167,6 +167,7 @@ export function DashboardControls({
   autoSyncByInstance,
   healthEventsByInstance,
 }: Props) {
+  const hasInstances = instances.length > 0;
   const autoSyncFrequencyOptions = [15, 30, 60, 180, 360, 1440];
   const [instanceName, setInstanceName] = useState("");
   const [baseUrl, setBaseUrl] = useState("");
@@ -182,6 +183,39 @@ export function DashboardControls({
   const [domainStatus, setDomainStatus] = useState("all");
   const [message, setMessage] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [isConnectPanelOpen, setIsConnectPanelOpen] = useState(!hasInstances);
+
+  useEffect(() => {
+    if (!hasInstances) {
+      setIsConnectPanelOpen(true);
+      return;
+    }
+
+    const savedState = window.localStorage.getItem(
+      "dashboard_connect_panel_open",
+    );
+
+    if (savedState === "true") {
+      setIsConnectPanelOpen(true);
+      return;
+    }
+
+    if (savedState === "false") {
+      setIsConnectPanelOpen(false);
+      return;
+    }
+
+    setIsConnectPanelOpen(false);
+  }, [hasInstances]);
+
+  useEffect(() => {
+    if (!hasInstances) return;
+
+    window.localStorage.setItem(
+      "dashboard_connect_panel_open",
+      isConnectPanelOpen ? "true" : "false",
+    );
+  }, [hasInstances, isConnectPanelOpen]);
 
   const healthCounts = instances.reduce(
     (acc, instance) => {
@@ -416,79 +450,102 @@ export function DashboardControls({
       </div>
 
       <div className="grid gap-4 lg:grid-cols-2">
-        <form
-          onSubmit={onCreateInstance}
-          className="space-y-3 rounded-xl border border-slate-200 bg-white p-4"
-        >
-          <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
-          <input
-            required
-            value={instanceName}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setInstanceName(e.target.value)
-            }
-            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-            placeholder="Instance name"
-          />
-          <input
-            required
-            value={baseUrl}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setBaseUrl(e.target.value)
-            }
-            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-            placeholder="https://plesk.example.com"
-          />
-          <select
-            value={authType}
-            onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-              setAuthType(e.target.value as "api_key" | "basic")
-            }
-            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-          >
-            <option value="api_key">API Key</option>
-            <option value="basic">Basic</option>
-          </select>
-          {authType === "api_key" ? (
-            <input
-              required
-              value={apiKey}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                setApiKey(e.target.value)
-              }
-              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-              placeholder="Plesk API key"
-            />
-          ) : (
-            <div className="grid gap-2 sm:grid-cols-2">
+        <div className="rounded-xl border border-slate-200 bg-white p-4">
+          <div className="flex items-center justify-between gap-3">
+            <h2 className="text-lg font-semibold">
+              {hasInstances
+                ? "Connect another Plesk instance"
+                : "Connect Plesk Instance"}
+            </h2>
+            {hasInstances ? (
+              <button
+                type="button"
+                onClick={() => setIsConnectPanelOpen((open) => !open)}
+                className="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700"
+              >
+                {isConnectPanelOpen ? "Hide" : "Add instance"}
+              </button>
+            ) : null}
+          </div>
+
+          {!isConnectPanelOpen && hasInstances ? (
+            <p className="mt-2 text-sm text-slate-500">
+              Add another server when needed.
+            </p>
+          ) : null}
+
+          {isConnectPanelOpen ? (
+            <form onSubmit={onCreateInstance} className="mt-3 space-y-3">
               <input
                 required
-                value={username}
+                value={instanceName}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  setUsername(e.target.value)
+                  setInstanceName(e.target.value)
                 }
                 className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-                placeholder="Plesk username"
+                placeholder="Instance name"
               />
               <input
                 required
-                type="password"
-                value={password}
+                value={baseUrl}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  setPassword(e.target.value)
+                  setBaseUrl(e.target.value)
                 }
                 className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-                placeholder="Plesk password"
+                placeholder="https://plesk.example.com"
               />
-            </div>
-          )}
-          <button
-            disabled={loading}
-            className="rounded bg-brand-600 px-3 py-2 text-sm text-white"
-          >
-            Save & Validate
-          </button>
-        </form>
+              <select
+                value={authType}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                  setAuthType(e.target.value as "api_key" | "basic")
+                }
+                className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+              >
+                <option value="api_key">API Key</option>
+                <option value="basic">Basic</option>
+              </select>
+              {authType === "api_key" ? (
+                <input
+                  required
+                  value={apiKey}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    setApiKey(e.target.value)
+                  }
+                  className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+                  placeholder="Plesk API key"
+                />
+              ) : (
+                <div className="grid gap-2 sm:grid-cols-2">
+                  <input
+                    required
+                    value={username}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                      setUsername(e.target.value)
+                    }
+                    className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+                    placeholder="Plesk username"
+                  />
+                  <input
+                    required
+                    type="password"
+                    value={password}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                      setPassword(e.target.value)
+                    }
+                    className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+                    placeholder="Plesk password"
+                  />
+                </div>
+              )}
+              <button
+                disabled={loading}
+                className="rounded bg-brand-600 px-3 py-2 text-sm text-white"
+              >
+                Save & Validate
+              </button>
+            </form>
+          ) : null}
+        </div>
 
         <div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
           <h2 className="text-lg font-semibold">Plesk Instances</h2>