LucasDLTG/dsp-thomann-interface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive header

Browse Source
This commit is contained in:
LucasDLTG
2026-07-24 17:28:40 +02:00
parent 3d7c0d2332
commit e85616eacc
15 changed files with 324 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button/Button.css
+1 -1
View File
@@ -46,4 +46,4 @@
background: transparent;
border-color: var(--border-hairline);
color: var(--text-muted);
}
}
src/components/Button/Button.tsx
+1 -1
View File
@@ -34,4 +34,4 @@ export default function Button({
{children}
</button>
);
}
}
src/components/Card/Card.css
+16
View File
@@ -0,0 +1,16 @@
.card {
background: var(--bg-panel);
border: var(--border-width) solid var(--border-hairline);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-6);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: var(--font-size-sm);
display: flex;
flex-direction: column;
width: clamp(280px, 33.333%, 480px);
}
src/components/Card/Card.tsx
+12
View File
@@ -0,0 +1,12 @@
import './Card.css';
interface CardProps {
children: React.ReactNode;
className?: string;
}
function Card({ children, className = '' }: CardProps) {
return <div className={`card ${className}`}>{children}</div>;
}
export default Card;
src/components/Led/Led.css
+2 -1
View File
@@ -47,7 +47,8 @@
}
@keyframes pulse {
0%, 100% {
0%,
100% {
transform: scale(1);
opacity: 1;
}
src/components/Led/Led.tsx
+3 -6
View File
@@ -1,17 +1,14 @@
import "./Led.css"
import './Led.css';
type LedProps = {
status?: 'connected' | 'connecting' | 'disconnected';
className?: string;
};
export function Led({
status = 'disconnected',
className = '',
}: LedProps) {
export function Led({ status = 'disconnected', className = '' }: LedProps) {
return (
<span className={['led', className].filter(Boolean).join(' ')}>
<span className={`led-dot led-dot--${status}`} />
</span>
);
}
}
src/components/Sidebar/Sidebar.css
+1 -1
View File
@@ -94,7 +94,7 @@
.sidebar-rail {
position: fixed;
top: var(--header-height);
top: calc(var(--header-height));
left: 0;
bottom: 0;
src/components/dsp408/ConnectionSection/ConnectionSection.tsx
+44 -51
View File
@@ -31,61 +31,54 @@ function ConnectionPanel({
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}>
{dsp.name}
</h1>
<div className="panel-type">{dsp.type}</div>
</div>
<div className="status-block">
<span className={`led led--lg led--${dsp.status}`} />
<span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
</div>
<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}>
{dsp.name}
</h1>
<div className="panel-type">{dsp.type}</div>
</div>
<dl className="specs">
<div className="spec">
<dt>IP address</dt>
<dd className="mono" title={dsp.ip}>
{dsp.ip}
</dd>
</div>
<div className="spec">
<dt>Port</dt>
<dd className="mono">{dsp.port}</dd>
</div>
<div className="spec">
<dt>Device ID</dt>
<dd className="mono" title={dsp.deviceId || undefined}>
{dsp.deviceId || '—'}
</dd>
</div>
</dl>
<div className="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 className="status-block">
<span className={`led led--lg led--${dsp.status}`} />
<span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
</div>
</div>
<dl className="specs">
<div className="spec">
<dt>IP address</dt>
<dd className="mono" title={dsp.ip}>
{dsp.ip}
</dd>
</div>
<div className="spec">
<dt>Port</dt>
<dd className="mono">{dsp.port}</dd>
</div>
<div className="spec">
<dt>Device ID</dt>
<dd className="mono" title={dsp.deviceId || undefined}>
{dsp.deviceId || '—'}
</dd>
</div>
</dl>
<div className="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>
</div>
</div>
</div>
);
src/components/topbar/Topbar.css
+63 -64
View File
@@ -5,8 +5,9 @@
background: var(--bg-void);
border-bottom: 1px solid var(--border-hairline);
-webkit-app-region: drag;
padding-inline: var(--space-2);
gap: var(--space-2);
padding-inline: var(--space-3);
gap: var(--space-3);
box-sizing: border-box
}
.logo-slot {
@@ -34,13 +35,17 @@
overflow-y: hidden;
min-width: 0;
-webkit-app-region: no-drag;
border-left: 1px solid var(--border-hairline);
scrollbar-width: thin;
scrollbar-color: var(--border-hairline) transparent;
scroll-behavior: smooth;
scroll-padding-inline: var(--space-3);
scroll-snap-type: x proximity;
align-items: center;
gap: var(--space-2);
gap: var(--space-4);
padding-left: var(--space-4);
container-type: inline-size;
container-name: tabstrip;
@@ -49,28 +54,13 @@
mask-image: linear-gradient(to right, transparent, black 0);
}
.tabstrip::-webkit-scrollbar {
height: 4px;
}
.tabstrip::-webkit-scrollbar-thumb {
background: var(--border-hairline);
border-radius: var(--radius-pill);
}
.tabstrip-actions {
display: flex;
align-items: center;
justify-content: center;
height: var(--header-height);
flex: 0 0 auto;
gap: var(--space-2);
}
.icon-crown,
.icon-tab-add,
.icon-tab-add-empty {
aspect-ratio: 1/1;
height: 70%;
gap: var(--space-3);
}
.tab-action {
@@ -91,8 +81,15 @@
color: var(--text-primary);
}
.tab-add {
height: 70%;
border-radius: 50%;
color: var(--text-muted);
aspect-ratio: 1;
}
.crown-action {
height: 50%;
height: 70%;
aspect-ratio: 1;
border-radius: 50%;
color: #facc15;
@@ -103,28 +100,26 @@
color: #fde047;
}
.tab-add {
height: 50%;
border-radius: 50%;
color: var(--text-muted);
aspect-ratio: 1;
.icon-crown,
.icon-tab-add,
.icon-tab-add-empty {
aspect-ratio: 1/1;
height: 80%;
}
.tab-add-empty {
height: 50%;
height: 70%;
border-radius: var(--radius-pill);
border: var(--border-width-active) dashed var(--border-hairline);
color: var(--text-muted);
font-family: var(--font-ui);
font-size: var(--tab-add-empty-font);
font-weight: 500;
flex-shrink: 0;
gap: var(--space-1);
padding-inline: var(--space-1);
gap: var(--space-2);
padding-inline: var(--space-2);
}
.tab-add-empty:hover {
@@ -136,15 +131,14 @@
.tab {
display: flex;
align-items: center;
gap: var(--space-2);
gap: var(--space-3);
height: var(--tab-height);
padding: 0 var(--space-3);
border: var(--border-width) solid var(--border-hairline);
border: var(--border-width-active) solid transparent;
border-radius: var(--radius-lg);
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: var(--tab-font-size);
cursor: pointer;
box-sizing: border-box;
scroll-snap-align: start;
@@ -152,14 +146,17 @@
flex: 0 0 25%;
max-width: 25%;
min-width: calc(
(var(--space-3) * 2) +
(var(--tab-height) * 0.5) +
(var(--space-2) * 2) +
4ch +
var(--tab-close-size)
(var(--space-3) * 2) + (var(--tab-height) * 0.5) + (var(--space-2) * 2) + 4ch +
var(--tab-close-size)
);
}
.tab:hover {
background: var(--bg-raised);
color: var(--text-primary);
border-color: var(--accent-brand);
}
.tab span[title] {
overflow: hidden;
text-overflow: ellipsis;
@@ -168,7 +165,7 @@
}
.tab-led {
height: 50%;
height: 40%;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
@@ -182,13 +179,14 @@
}
.tab-close {
height: 50%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-left: auto;
width: var(--tab-close-size);
height: var(--tab-close-size);
padding: 0;
font-size: var(--tab-close-font);
line-height: 1;
@@ -196,12 +194,6 @@
border-radius: var(--radius-sm);
}
.tab:hover {
background: var(--bg-raised);
border-color: var(--text-muted);
color: var(--text-primary);
}
.tab--active {
background: var(--bg-panel);
border-color: var(--accent-brand);
@@ -217,16 +209,14 @@
color: var(--text-primary);
}
.tab-add:active {
background: var(--border-hairline);
}
.tabstrip::-webkit-scrollbar {
display: none;
}
.tabstrip[data-fade-start='true'] {
-webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), black);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 24px,
black calc(100% - 24px),
black
);
mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), black);
}
.tabstrip[data-fade-end='true'] {
@@ -234,18 +224,27 @@
mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
}
.tabstrip[data-fade-start='true'][data-fade-end='true'] {
-webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 24px,
black calc(100% - 24px),
transparent
);
mask-image: linear-gradient(
to right,
transparent,
black 24px,
black calc(100% - 24px),
transparent
);
}
.tab[data-step='6'],
.tab[data-step='8'],
.tab[data-step='10'] {
min-width: calc(
(var(--space-3) * 2) +
(var(--tab-height) * 0.5) +
(var(--space-2) * 2) +
4ch +
var(--tab-close-size)
(var(--space-3) * 2) + (var(--tab-height) * 0.5) + (var(--space-2) * 2) + 4ch +
var(--tab-close-size)
);
}
}
src/components/topbar/Topbar.tsx
+22 -16
View File
@@ -4,6 +4,7 @@ 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';
@@ -15,7 +16,12 @@ function getStep(count: number) {
}
function Tab({
dsp, active, dimmed, step, onSelect, onRemove,
dsp,
active,
dimmed,
step,
onSelect,
onRemove,
}: {
dsp: DSP;
active: boolean;
@@ -43,7 +49,7 @@ function Tab({
onRemove();
}}
>
x
<CloseIcon />
</span>
</button>
);
@@ -81,19 +87,19 @@ function TopBar({
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);
}, []);
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();
@@ -164,8 +170,8 @@ function TopBar({
setSelect(null);
}}
>
<CrownIcon className="icon-crown" />
</button>
<CrownIcon className="icon-crown" />
</button>
</div>
</header>
);