feat: add click on tab led for connect

src/App.tsx

@@ -45,6 +45,9 @@ function App() {
         onAddClick={() => {
           setPage('add-dsp');
         }}
+
+        onConnect={dsp408.connectDSP}
+        onDisconnect={dsp408.disconnectDSP}
       />
 
       <main className="stage">

src/components/topbar/Topbar.css

@@ -176,6 +176,8 @@
 
   min-height: 0;
   min-width: 0;
+
+  border-radius: var(--radius-sm);
 }
 
 .tab-close {

src/components/topbar/Topbar.tsx

@@ -22,6 +22,8 @@ function Tab({
   step,
   onSelect,
   onRemove,
+  onConnect,
+  onDisconnect,
 }: {
   dsp: DSP;
   active: boolean;
@@ -29,25 +31,71 @@ function Tab({
   step: number;
   onSelect: () => void;
   onRemove: () => void;
+  onConnect: (dsp: DSP) => void;
+  onDisconnect: (dsp: DSP) => void;
 }) {
+  const handleLedClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (dsp.status === 'connected') {
+      onDisconnect(dsp);
+    } else {
+      onConnect(dsp);
+    }
+  };
+
   return (
     <button
-      className={'tab' + (active ? ' tab--active' : '') + (dimmed ? ' tab--dimmed' : '')}
+      type="button"
+      className={
+        'tab' +
+        (active ? ' tab--active' : '') +
+        (dimmed ? ' tab--dimmed' : '')
+      }
       data-step={step}
       onClick={onSelect}
     >
-      <span className="tab-led">
+      <span
+        className="tab-led"
+        role="button"
+        tabIndex={0}
+        onClick={handleLedClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (dsp.status === 'connected') {
+              onDisconnect(dsp);
+            } else {
+              onConnect(dsp);
+            }
+          }
+        }}
+      >
         <Led status={dsp.status} />
       </span>
-      <span title={dsp.name}>{dsp.name}</span>
+
+      <span className="tab-name" title={dsp.name}>
+        {dsp.name}
+      </span>
+
       <span
         className="tab-close"
         role="button"
+        tabIndex={0}
         aria-label={`Remove ${dsp.name}`}
         onClick={(e) => {
           e.stopPropagation();
           onRemove();
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            onRemove();
+          }
+        }}
       >
         <CloseIcon />
       </span>
@@ -64,6 +112,8 @@ function TopBar({
   onSelect,
   onRemove,
   onAddClick,
+  onConnect,
+  onDisconnect,
 }: {
   dsps: DSP[];
   selected: number | null;
@@ -73,6 +123,8 @@ function TopBar({
   onSelect: (id: number) => void;
   onRemove: (dsp: DSP) => void;
   onAddClick: () => void;
+  onConnect: (dsp: DSP) => void;
+  onDisconnect: (dsp: DSP) => void;
 }) {
   const hasTabs = dsps.length > 0;
   const tabstripRef = useRef<HTMLDivElement>(null);
@@ -145,6 +197,8 @@ function TopBar({
             dimmed={page === 'add-dsp'}
             onSelect={() => onSelect(dsp.id)}
             onRemove={() => onRemove(dsp)}
+            onConnect={onConnect}
+            onDisconnect={onDisconnect}
           />
         ))}
       </div>