feat: add set gain

src/components/topbar/Topbar.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import { DSP, AppPage } from '../../types/types';
+import Tab from './Tab';
+import AnimatedLogo from '../../assets/icons/AnimatedLogo';
+import { PlusIcon } from '../../assets/icons/PlusIcon';
+import { CrownIcon } from '../../assets/icons/CrownIcon';
+
+function TopBar({
+  dsps,
+  selected,
+  page,
+  setPage,
+  setSelect,
+  onSelect,
+  onRemove,
+  onAddClick,
+}: {
+  dsps: DSP[];
+  selected: number | null;
+  page: AppPage;
+  setPage: (page: AppPage) => void;
+  setSelect: (select: number | null) => void;
+  onSelect: (id: number) => void;
+  onRemove: (dsp: DSP) => void;
+  onAddClick: () => void;
+}) {
+  const hasTabs = dsps.length > 0;
+  const tabstripRef = useRef<HTMLDivElement>(null);
+  const prevCount = useRef(dsps.length);
+
+  useEffect(() => {
+    if (dsps.length > prevCount.current && tabstripRef.current) {
+      tabstripRef.current.scrollTo({
+        left: tabstripRef.current.scrollWidth,
+        behavior: 'smooth',
+      });
+    }
+    prevCount.current = dsps.length;
+  }, [dsps.length]);
+
+  return (
+    <header className="topbar">
+      <div
+        className="logo-slot"
+        onClick={() => {
+          setSelect(null);
+          setPage('home');
+        }}
+        aria-label="Go to home"
+      >
+        <AnimatedLogo />
+      </div>
+
+      <div className="tabstrip" ref={tabstripRef}>
+        {dsps.map((dsp) => (
+          <Tab
+            key={dsp.id}
+            dsp={dsp}
+            active={selected === dsp.id && !(page == 'add-dsp')}
+            dimmed={page === 'add-dsp'}
+            onSelect={() => onSelect(dsp.id)}
+            onRemove={() => onRemove(dsp)}
+          />
+        ))}
+      </div>
+
+      <div className="tabstrip-actions">
+        {hasTabs ? (
+          <button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
+            <PlusIcon width={14} height={14} />
+          </button>
+        ) : (
+          <button className="tab-add-empty" onClick={onAddClick}>
+            <PlusIcon width={14} height={14} />
+            <span>Add DSP</span>
+          </button>
+        )}
+      </div>
+
+      <button
+        className="crown-action"
+        title="Credits & Support"
+        aria-label="Credits & Support"
+        onClick={() => {
+          setPage('credits');
+          setSelect(null);
+        }}
+      >
+        <CrownIcon width={18} height={18} />
+      </button>
+    </header>
+  );
+}
+
+export default TopBar;