feat: push Topbar

2026-09-06 12:54:45 +02:00
parent 81a99b7173
commit ac23f98fcd
2 changed files with 486 additions and 0 deletions
@@ -0,0 +1,222 @@
+import { useEffect, useRef } from 'react';
+import { DSP, AppPage } from '../../types';
+import AnimatedLogo from '../../assets/icons/AnimatedLogo';
+import { PlusIcon } from '../../assets/icons/PlusIcon';
+import { CrownIcon } from '../../assets/icons/CrownIcon';
+import Led from '../Led/Led';
+import { CloseIcon } from '../../assets/icons/CloseIcon';
+
+import './Topbar.css';
+
+function getStep(count: number) {
+  if (count <= 4) return 4;
+  if (count <= 6) return 6;
+  if (count <= 8) return 8;
+  return 10;
+}
+
+function Tab({
+  dsp,
+  active,
+  dimmed,
+  step,
+  onSelect,
+  onRemove,
+  onConnect,
+  onDisconnect,
+}: {
+  dsp: DSP;
+  active: boolean;
+  dimmed: boolean;
+  step: number;
+  onSelect: () => void;
+  onRemove: () => void;
+  onConnect: (dsp: DSP) => void;
+  onDisconnect: (dsp: DSP) => void;
+}) {
+  const isConnected = dsp.status === 'connected';
+
+  const handleTabKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+
+  return (
+    <div
+      className={['tab', active && 'tab--active', dimmed && 'tab--dimmed']
+        .filter(Boolean)
+        .join(' ')}
+      data-step={step}
+      tabIndex={0}
+      role="tab"
+      aria-selected={active}
+      onClick={onSelect}
+      onKeyDown={handleTabKeyDown}
+    >
+      <button
+        type="button"
+        className="tab-led"
+        aria-label={isConnected ? `Disconnect ${dsp.name}` : `Connect ${dsp.name}`}
+        onClick={(e) => {
+          e.stopPropagation();
+
+          if (isConnected) {
+            onDisconnect(dsp);
+          } else {
+            onConnect(dsp);
+          }
+        }}
+      >
+        <Led status={dsp.status} />
+      </button>
+
+      <span className="tab-name" title={dsp.name}>
+        {dsp.name}
+      </span>
+
+      <button
+        type="button"
+        className="tab-close"
+        aria-label={`Remove ${dsp.name}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+function TopBar({
+  dsps,
+  selected,
+  page,
+  setPage,
+  setSelect,
+  onSelect,
+  onRemove,
+  onAddClick,
+  onConnect,
+  onDisconnect,
+}: {
+  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;
+  onConnect: (dsp: DSP) => void;
+  onDisconnect: (dsp: DSP) => void;
+}) {
+  const hasTabs = dsps.length > 0;
+  const tabstripRef = useRef<HTMLDivElement>(null);
+  const prevCount = useRef(dsps.length);
+  const step = getStep(dsps.length);
+
+  const updateFade = () => {
+    const el = tabstripRef.current;
+    if (!el) return;
+    const atStart = el.scrollLeft <= 1;
+    const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+    el.dataset.fadeStart = String(!atStart);
+    el.dataset.fadeEnd = String(!atEnd && el.scrollWidth > el.clientWidth);
+  };
+
+  useEffect(() => {
+    const el = tabstripRef.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        el.scrollLeft += e.deltaY;
+        e.preventDefault();
+      }
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, []);
+
+  useEffect(() => {
+    updateFade();
+    const el = tabstripRef.current;
+    el?.addEventListener('scroll', updateFade);
+    window.addEventListener('resize', updateFade);
+    return () => {
+      el?.removeEventListener('scroll', updateFade);
+      window.removeEventListener('resize', updateFade);
+    };
+  }, [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">
+      <button
+        className="logo-slot"
+        onClick={() => {
+          setSelect(null);
+          setPage('home');
+        }}
+        aria-label="Go to home"
+      >
+        <AnimatedLogo />
+      </button>
+
+      <div className="tabstrip" ref={tabstripRef}>
+        {dsps.map((dsp) => (
+          <Tab
+            key={dsp.id}
+            dsp={dsp}
+            step={step}
+            active={selected === dsp.id && !(page == 'add-dsp')}
+            dimmed={page === 'add-dsp'}
+            onSelect={() => onSelect(dsp.id)}
+            onRemove={() => onRemove(dsp)}
+            onConnect={onConnect}
+            onDisconnect={onDisconnect}
+          />
+        ))}
+      </div>
+
+      <div className="tabstrip-actions">
+        {hasTabs ? (
+          <button className="tab-add tab-action" aria-label="Add DSP" onClick={onAddClick}>
+            <PlusIcon className="icon-tab-add" />
+          </button>
+        ) : (
+          <button className="tab-add-empty tab-action" onClick={onAddClick}>
+            <PlusIcon className="icon-tab-add-empty" />
+            <span>Add DSP</span>
+          </button>
+        )}
+
+        <button
+          className="crown-action tab-action"
+          title="Credits & Support"
+          aria-label="Credits & Support"
+          onClick={() => {
+            setPage('credits');
+            setSelect(null);
+          }}
+        >
+          <CrownIcon className="icon-crown" />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+export default TopBar;