refactor: folders/files to group dsp logic

2026-08-11 23:17:47 +02:00
parent d91bcaa20f
commit 34fad6f905
35 changed files with 194 additions and 337 deletions
@@ -0,0 +1,82 @@
+import { DSP } from '../../../../types';
+import Button from '../../../../components/Button/Button';
+import Card from '../../../../components/Card/Card';
+import Led from '../../../../components/Led/Led';
+
+import './ConnectionSection.css';
+
+function ConnectionPanel({
+  dsp,
+  onConnect,
+  onDisconnect,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+}) {
+  const statusLabel =
+    dsp.status === 'connected'
+      ? 'Connected'
+      : dsp.status === 'connecting'
+        ? 'Connecting…'
+        : 'Disconnected';
+
+  return (
+    <div className="connection-section">
+      <Card className="connection-panel">
+        <div className="connection-panel__header">
+          <div className="connection-panel__header-text">
+            <h1 className="connection-panel__title" title={dsp.name}>
+              {dsp.name}
+            </h1>
+
+            <div className="connection-panel__type">{dsp.type}</div>
+          </div>
+
+          <div className="connection-panel__status">
+            <span className="connection-panel__led">
+              <Led status={dsp.status} />
+            </span>
+
+            <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
+          </div>
+        </div>
+
+        <dl className="connection-panel__specs">
+          <div className="connection-panel__spec">
+            <dt>IP address</dt>
+            <dd className="connection-panel__mono" title={dsp.ip}>
+              {dsp.ip}
+            </dd>
+          </div>
+
+          <div className="connection-panel__spec">
+            <dt>Port</dt>
+            <dd className="connection-panel__mono">{dsp.port}</dd>
+          </div>
+
+          <div className="connection-panel__spec">
+            <dt>Device ID</dt>
+            <dd className="connection-panel__mono" title={String(dsp.deviceId) || undefined}>
+              {dsp.deviceId || '—'}
+            </dd>
+          </div>
+        </dl>
+
+        <div className="connection-panel__actions">
+          {dsp.status === 'connected' ? (
+            <Button variant="outline" onClick={onDisconnect}>
+              Disconnect
+            </Button>
+          ) : (
+            <Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
+              {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
+            </Button>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default ConnectionPanel;