feat: responsive connection section

2026-07-24 22:25:50 +02:00
parent 62d3b22fea
commit a157b5f198
10 changed files with 245 additions and 183 deletions
--- a/src/styles/App.css
+++ b/src/styles/App.css
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,7 +1,7 @@
 import { invoke } from '@tauri-apps/api/core';

 import { useState } from 'react';
-import './styles/App.css';
+import './App.css';
 import { DSP, DSPStatus, AppPage } from './types/types';
 import TopBar from './components/Topbar/Topbar';
 import DSPPage from './pages/DspPage/DspPage';
--- a/src/components/Led/Led.tsx
+++ b/src/components/Led/Led.tsx
@ -5,10 +5,12 @@ type LedProps = {
  className?: string;
 };

-export function Led({ status = 'disconnected', className = '' }: LedProps) {
+function Led({ status = 'disconnected', className = '' }: LedProps) {
  return (
    <span className={['led', className].filter(Boolean).join(' ')}>
      <span className={`led-dot led-dot--${status}`} />
    </span>
  );
 }
+
+export default Led;
--- a/src/components/dsp408/ConnectionSection/ConnectionSection.css
+++ b/src/components/dsp408/ConnectionSection/ConnectionSection.css
@ -1,64 +1,107 @@
-/* .connection-panel-frame {
-  width: 33.333%;
-  height: 33.333%;
-  box-sizing: border-box;
-}
-
-.panel {
+.connection-section {
  width: 100%;
  height: 100%;
+
  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
+  justify-content: center;
+  align-items: center;
 }

-.panel-type {
+.connection-panel {
+  width: 340px;
+  display: flex;
+  flex-direction: column;
+}
+
+.connection-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.connection-panel__header-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.connection-panel__title {
+  margin: 0;
+
+  font-size: var(--font-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.connection-panel__type {
  margin-top: var(--space-1);
-  font-size: 12px;
+
+  font-size: var(--font-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
 }

-.panel-header {
+.connection-panel__specs {
+  margin: var(--space-5) 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.connection-panel__spec {
  display: flex;
-  align-items: flex-start;
  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
+  align-items: center;
+  gap: var(--space-3);
 }

-.panel-header-text {
-  min-width: 0;
-  flex: 1 1 auto;
+.connection-panel__spec dt {
+  color: var(--text-muted);
+  font-size: var(--font-sm);
 }

-.panel-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.connection-panel__spec dd {
  margin: 0;
-  font-size: 18px;
-  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
 }

-.mono {
+.connection-panel__mono {
+  font-family: var(--font-mono);
+
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

-.specs {
+.connection-panel__actions {
+  margin-top: auto;
+
+  display: flex;
+  justify-content: flex-end;
+}
+
+.connection-panel__status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+
  flex-shrink: 0;
 }

-.connection-section {
-  position: absolute;
-  inset: 0;
+.connection-panel__led {
+  height: 14px;
+  aspect-ratio: 1 / 1;

  display: flex;
-  justify-content: center;
  align-items: center;
-} */
+  justify-content: center;
+
+  flex: 0 0 auto;
+}
--- a/src/components/dsp408/ConnectionSection/ConnectionSection.tsx
+++ b/src/components/dsp408/ConnectionSection/ConnectionSection.tsx
@ -1,14 +1,10 @@
-// ConnectionPanel.tsx
 import { DSP } from '../../../types/types';
 import Button from '../../Button/Button';
+import Card from '../../Card/Card';
+import Led from '../../Led/Led';
+
 import './ConnectionSection.css';

-const DESIGN_WIDTH = 340;
-const DESIGN_HEIGHT = 280;
-
-const BTN_W = 100;
-const BTN_H = 40;
-
 function ConnectionPanel({
  dsp,
  onConnect,
@ -27,47 +23,47 @@ function ConnectionPanel({

  return (
    <div className="connection-section">
-      <div
-        className="connection-panel-frame"
-        style={{ '--panel-w': DESIGN_WIDTH, '--panel-h': DESIGN_HEIGHT } as React.CSSProperties}
-      >
-        <div className="card panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
-          <div className="panel-header">
-            <div className="panel-header-text">
-              <h1 className="panel-title" title={dsp.name}>
+      <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="panel-type">{dsp.type}</div>
+
+            <div className="connection-panel__type">{dsp.type}</div>
          </div>

-            <div className="status-block">
-              <span className={`led led--lg led--${dsp.status}`} />
+          <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="specs">
-            <div className="spec">
+        <dl className="connection-panel__specs">
+          <div className="connection-panel__spec">
            <dt>IP address</dt>
-              <dd className="mono" title={dsp.ip}>
+            <dd className="connection-panel__mono" title={dsp.ip}>
              {dsp.ip}
            </dd>
          </div>

-            <div className="spec">
+          <div className="connection-panel__spec">
            <dt>Port</dt>
-              <dd className="mono">{dsp.port}</dd>
+            <dd className="connection-panel__mono">{dsp.port}</dd>
          </div>

-            <div className="spec">
+          <div className="connection-panel__spec">
            <dt>Device ID</dt>
-              <dd className="mono" title={dsp.deviceId || undefined}>
+            <dd className="connection-panel__mono" title={dsp.deviceId || undefined}>
              {dsp.deviceId || '—'}
            </dd>
          </div>
        </dl>

-          <div className="panel-actions">
+        <div className="connection-panel__actions">
          {dsp.status === 'connected' ? (
            <Button variant="outline" onClick={onDisconnect}>
              Disconnect
@ -78,8 +74,7 @@ function ConnectionPanel({
            </Button>
          )}
        </div>
-        </div>
-      </div>
+      </Card>
    </div>
  );
 }
--- a/src/components/dsp408/GainSection/GainSection.tsx
+++ b/src/components/dsp408/GainSection/GainSection.tsx
@ -1,4 +1,4 @@
-import VerticalSlider from '../../Slider/VerticalSlider';
+import VerticalSlider from '../Slider/VerticalSlider';
 import { invoke } from '@tauri-apps/api/core';
 import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
 import { DSP } from '../../../types/types';
@ -93,7 +93,6 @@ function GainPanel({

  return (
    <div className="gain-panel-frame">
-      <AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
      <div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
        <div className="gain-panel__title">{title}</div>

@ -119,7 +118,6 @@ function GainPanel({
          {inverted ? 'Inverted' : 'Invert'}
        </Button>
      </div>
-      </AutoScale>
    </div>
  );
 }
--- a/src/components/dsp408/Slider/VerticalSlider.css
+++ b/src/components/dsp408/Slider/VerticalSlider.css
@ -1,9 +1,19 @@
-.gauge-container {
-  width: 70px;
-  height: 260px;
+.gauge-viewport {
+  container-type: inline-size;
+  container-name: gauge;

-  padding-top: 20px;
-  padding-bottom: 10px;
+  width: 100%;
+  aspect-ratio: 70 / 260;
+
+  box-sizing: border-box;
+}
+
+.gauge-container {
+  width: 100%;
+  height: 100%;
+
+  padding-top: 28.571cqw; /* 20px */
+  padding-bottom: 14.286cqw; /* 10px */

  display: flex;
  flex-direction: column;
@ -17,21 +27,23 @@
 .gauge-track {
  position: relative;

-  width: 70px;
-  height: 210px;
+  width: 100%;
+  height: 300cqw; /* 210px */

  display: flex;

  justify-content: center;
  align-items: center;

-  margin-bottom: 8px;
+  margin-bottom: 11.429cqw; /* 8px */
+
+  box-sizing: border-box;
 }

 .slider {
  position: relative;

-  width: 24px;
+  width: 34.286cqw; /* 24px */
  height: 100%;

  cursor: pointer;
@ -48,7 +60,7 @@

  transform: translateX(-50%);

-  width: 2px;
+  width: 2.857cqw; /* 2px */

  height: 100%;

@ -62,7 +74,7 @@

  left: 50%;

-  width: 18px;
+  width: 25.714cqw; /* 18px */

  aspect-ratio: 1;

@ -94,9 +106,9 @@
 }

 .ticks span {
-  width: 10px;
+  width: 14.286cqw; /* 10px */

-  height: 2px;
+  height: 2.857cqw; /* 2px */

  background: var(--border-hairline);

@ -104,22 +116,22 @@
 }

 .left {
-  left: 8px;
+  left: 11.429cqw; /* 8px */
 }

 .right {
-  right: 8px;
+  right: 11.429cqw; /* 8px */
 }

 .value {
  width: 100%;

-  margin-top: 4px;
+  margin-top: 5.714cqw; /* 4px */

-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 4px;
-  padding-left: 4px;
+  padding-top: 2.857cqw; /* 2px */
+  padding-bottom: 2.857cqw; /* 2px */
+  padding-right: 5.714cqw; /* 4px */
+  padding-left: 5.714cqw; /* 4px */

  box-sizing: border-box;

@ -134,7 +146,7 @@

  color: var(--accent-brand);

-  font-size: 16px;
+  font-size: 22.857cqw;

  font-family: var(--font-ui);

--- a/src/components/dsp408/Slider/VerticalSlider.tsx
+++ b/src/components/dsp408/Slider/VerticalSlider.tsx
@ -2,7 +2,10 @@ import { useMemo, useRef, useState, useEffect } from 'react';

 import './VerticalSlider.css';

-// Design size 260*70
+// Design size 260*70 (height*width) — kept as the reference ratio.
+// All CSS dimensions are expressed in container-query width units (cqw)
+// relative to this DESIGN_WIDTH, so the whole component scales together
+// and preserves this aspect ratio at any rendered size.

 const DESIGN_WIDTH = 70;

@ -79,6 +82,9 @@ export default function VerticalSlider({
    return Math.max(minStr.length, maxStr.length) + unit.length;
  }, [min, max, decimals, unit]);

+  // Computed in "design pixels" (i.e. assuming the component is rendered at
+  // DESIGN_WIDTH px wide), then converted below to cqw so it scales with
+  // the actual rendered size instead of staying a fixed pixel value.
  const valueFontSize = useMemo(() => {
    const availableWidth = DESIGN_WIDTH - 8;
    const AVG_CHAR_WIDTH_RATIO = 0.6;
@ -86,6 +92,10 @@ export default function VerticalSlider({
    return Math.min(16, Math.max(8, sizeByWidth));
  }, [maxChars]);

+  // Convert the "design px" font size into cqw units relative to the
+  // component's own width, so it scales proportionally with everything else.
+  const valueFontSizeCqw = useMemo(() => (valueFontSize / DESIGN_WIDTH) * 100, [valueFontSize]);
+
  function normalizeValue(input: number) {
    const clamped = Math.min(max, Math.max(min, input));
    const snapped = Math.round(clamped / currentStep) * currentStep;
@ -192,7 +202,8 @@ export default function VerticalSlider({
  const percent = (value - min) / (max - min);

  return (
-    <div className={['gauge-container', className].filter(Boolean).join(' ')} style={style}>
+    <div className={['gauge-viewport', className].filter(Boolean).join(' ')} style={style}>
+      <div className="gauge-container">
        <div className="gauge-track">
          <div className="ticks left">
            {Array.from({ length: 15 }).map((_, i) => (
@ -222,7 +233,7 @@ export default function VerticalSlider({
          </div>
        </div>

-      <div className="value" style={{ fontSize: `${valueFontSize}px` }}>
+        <div className="value" style={{ fontSize: `${valueFontSizeCqw}cqw` }}>
          <input
            ref={inputRef}
            type="text"
@ -243,5 +254,6 @@ export default function VerticalSlider({
          <span className="value-unit">{unit}</span>
        </div>
      </div>
+    </div>
  );
 }
--- a/src/components/topbar/Topbar.tsx
+++ b/src/components/topbar/Topbar.tsx
@ -3,7 +3,7 @@ import { DSP, AppPage } from '../../types/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 Led from '../Led/Led';
 import { CloseIcon } from '../../assets/icons/CloseIcon';

 import './Topbar.css';
--- a/src/styles/variables.css
+++ b/src/styles/variables.css