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

Reviewed-on: http://gitea.lan:3000/robbond/pleskSaas/pulls/26

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,11 +450,32 @@ export function DashboardControls({
       </div>
 
       <div className="grid gap-4 lg:grid-cols-2">
-        <form
+        <div className="rounded-xl border border-slate-200 bg-white p-4">
-          onSubmit={onCreateInstance}
+          <div className="flex items-center justify-between gap-3">
-          className="space-y-3 rounded-xl border border-slate-200 bg-white p-4"
+            <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"
               >
-          <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
+                {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={instanceName}
@@ -489,6 +544,8 @@ export function DashboardControls({
                 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>