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

feat: add set gain

Browse Source
This commit is contained in:
LucasDLTG
2026-07-22 18:17:36 +02:00
parent c2b67d8bb2
commit 9e3f3803a6
41 changed files with 3863 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 100,
"tabWidth": 2
}

1033
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
package.json
View File

@ -7,20 +7,25 @@
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"preview": "vite preview", "preview": "vite preview",
"tauri": "tauri" "tauri": "tauri",
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\"",
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx}\""
}, },
"dependencies": { "dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@tauri-apps/api": "^2", "@tauri-apps/api": "^2",
"@tauri-apps/plugin-opener": "^2" "@tauri-apps/plugin-opener": "^2",
"react": "^19.2.8",
"react-dom": "^19.2.8"
}, },
"devDependencies": { "devDependencies": {
"@tauri-apps/cli": "^2",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6", "@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0", "@vitejs/plugin-react": "^4.6.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.6",
"prettier": "^3.9.6",
"typescript": "~5.8.3", "typescript": "~5.8.3",
"vite": "^7.0.4", "vite": "^7.0.4"
"@tauri-apps/cli": "^2"
} }
} }

2
src-tauri/Cargo.lock generated
View File

@ -796,6 +796,8 @@ dependencies = [
name = "dsp_thomann" name = "dsp_thomann"
version = "0.1.0" version = "0.1.0"
dependencies = [ dependencies = [
"serde",
"serde_json",
"strum", "strum",
"strum_macros", "strum_macros",
"thiserror 2.0.19", "thiserror 2.0.19",

2
src-tauri/Cargo.toml
View File

@ -22,4 +22,4 @@ tauri = { version = "2", features = [] }
tauri-plugin-opener = "2" tauri-plugin-opener = "2"
serde = { version = "1", features = ["derive"] } serde = { version = "1", features = ["derive"] }
serde_json = "1" serde_json = "1"
dsp_thomann = { path = "../../dsp_thomann" } dsp_thomann = { path = "../../dsp_thomann", features = ["serialization"] }

167
src-tauri/src/commands.rs
View File

@ -1,14 +1,58 @@
use tauri::State; use tauri::State;
use crate::state::AppState; use crate::state::{AppState, DSPDevice};
use dsp_thomann::dsp408::DSP408; use dsp_thomann::dsp408::DSP408;
use std::{net::IpAddr, str::FromStr}; use std::{net::IpAddr, str::FromStr};
use std::sync::{Arc, Mutex};
#[tauri::command] impl AppState {
pub fn device_count( pub fn with_device_mut<F, R>(
state: State<AppState> &self,
) -> usize { id: u64,
let devices = state.devices.lock().unwrap(); f: F,
devices.len() ) -> Result<R, String>
where
F: FnOnce(&mut DSPDevice) -> Result<R, String>,
{
let device = {
let devices = self
.devices
.lock()
.map_err(|e| e.to_string())?;
devices
.get(&id)
.cloned()
.ok_or_else(|| "DSP not found".to_string())?
};
let mut device = device
.lock()
.map_err(|e| e.to_string())?;
f(&mut device)
}
pub fn remove_device(
&self,
id: u64,
) -> Result<(), String> {
let device = {
let mut devices = self.devices
.lock()
.map_err(|e| e.to_string())?;
devices
.remove(&id)
.ok_or_else(|| format!("DSP {} not found", id))?
};
// Drop happens here.
// DSPDevice owns DSP408.
drop(device);
Ok(())
}
} }
#[tauri::command] #[tauri::command]
@ -17,19 +61,114 @@ pub fn create_dsp408(
ip: String, ip: String,
port: u16, port: u16,
device_id: u8, device_id: u8,
) -> Result<usize, String> { ) -> Result<u64, String> {
let ip = IpAddr::from_str(&ip)
.map_err(|e| e.to_string())?;
let dsp = DSP408::new(ip, port, device_id)
.map_err(|e| e.to_string())?;
let mut next_id = state
.next_id
.lock()
.map_err(|e| e.to_string())?;
let id = *next_id;
*next_id += 1;
let device = DSPDevice {
dsp,
};
let mut devices = state let mut devices = state
.devices .devices
.lock() .lock()
.map_err(|e| e.to_string())?; .map_err(|e| e.to_string())?;
let ip = IpAddr::from_str(&ip).map_err(|e| e.to_string())?; devices.insert(
id,
Arc::new(Mutex::new(device)),
);
let dsp = DSP408::new(ip, port, device_id) Ok(id)
.map_err(|e| e.to_string())?; }
devices.push(dsp); #[tauri::command]
pub async fn remove_dsp408(
state: State<'_, AppState>,
id: u64,
) -> Result<(), String> {
Ok(devices.len()) state.with_device_mut(id, |device| {
}
if device.dsp.connected() {
device.dsp
.disconnect()
.map_err(|e| e.to_string())?;
}
Ok(())
})?;
state.remove_device(id)?;
Ok(())
}
#[tauri::command]
pub async fn connect_dsp408(
state: State<'_, AppState>,
id: u64,
) -> Result<(), String> {
state.with_device_mut(id, |device| {
device.dsp
.connect()
.map_err(|e| e.to_string())
})
}
#[tauri::command]
pub async fn disconnect_dsp408(
state: State<'_, AppState>,
id: u64,
) -> Result<(), String> {
state.with_device_mut(id, |device| {
device.dsp
.disconnect()
.map_err(|e| e.to_string())
})
}
#[tauri::command]
pub async fn get_dsp_state(
state: State<'_, AppState>,
id: u64,
) -> Result<dsp_thomann::dsp408::types::DSPState, String> {
state.with_device_mut(id, |device| {
let dsp_state = device.dsp
.state()
.map_err(|e| e.to_string())?;
Ok(dsp_state.clone())
})
}
#[tauri::command]
pub async fn set_channel_gain(
state: State<'_, AppState>,
id: u64,
channel: dsp_thomann::dsp408::types::Channel,
db: f32,
) -> Result<bool, String> {
state.with_device_mut(id, |device| {
let r = device.dsp
.set_channel_gain(channel, db)
.map_err(|e| e.to_string())?;
Ok(r)
})
}

13
src-tauri/src/lib.rs
View File

@ -3,21 +3,18 @@ mod commands;
use state::AppState; use state::AppState;
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
#[cfg_attr(mobile, tauri::mobile_entry_point)] #[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() { pub fn run() {
tauri::Builder::default() tauri::Builder::default()
.plugin(tauri_plugin_opener::init()) .plugin(tauri_plugin_opener::init())
.manage(AppState::new()) .manage(AppState::new())
.invoke_handler(tauri::generate_handler![ .invoke_handler(tauri::generate_handler![
greet,
commands::device_count,
commands::create_dsp408, commands::create_dsp408,
commands::connect_dsp408,
commands::remove_dsp408,
commands::disconnect_dsp408,
commands::get_dsp_state,
commands::set_channel_gain,
] ]
) )
.run(tauri::generate_context!()) .run(tauri::generate_context!())

13
src-tauri/src/state.rs
View File

@ -1,14 +1,21 @@
use std::sync::Mutex; use std::sync::{Mutex, Arc};
use std::collections::HashMap;
use dsp_thomann::dsp408::DSP408; use dsp_thomann::dsp408::DSP408;
pub struct DSPDevice {
pub dsp: DSP408,
}
pub struct AppState { pub struct AppState {
pub devices: Mutex<Vec<DSP408>>, pub devices: Mutex<HashMap<u64, Arc<Mutex<DSPDevice>>>>,
pub next_id: Mutex<u64>,
} }
impl AppState { impl AppState {
pub fn new() -> Self { pub fn new() -> Self {
Self { Self {
devices: Mutex::new(Vec::new()), devices: Mutex::new(HashMap::new()),
next_id: Mutex::new(1),
} }
} }
} }

479
src/App.css
View File

@ -1,479 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
:root {
--bg-void: #0d0f12;
--bg-panel: #16191d;
--bg-raised: #1e2227;
--border-hairline: #2a2f36;
--text-primary: #e8eaed;
--text-muted: #8b92a0;
--accent-brand: #5b8def;
--accent-live: #3ecf8e;
--accent-down: #ff5c5c;
--accent-connecting: #f5a623;
--font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
* {
box-sizing: border-box;
}
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
background: var(--bg-void);
color: var(--text-primary);
font-family: var(--font-ui);
}
.mono {
font-family: var(--font-mono);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* ---------- Top bar ---------- */
.topbar {
display: flex;
align-items: center;
gap: 20px;
padding: 0 16px;
height: 48px;
background: var(--bg-void);
border-bottom: 1px solid var(--border-hairline);
-webkit-app-region: drag;
}
.logo-slot {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
aspect-ratio: 1 / 1;
width: auto;
flex-shrink: 0;
overflow: hidden;
-webkit-app-region: no-drag;
}
.logo-slot > * {
width: 100%;
height: 100%;
}
.tabstrip {
display: flex;
align-items: flex-end;
gap: 2px;
height: 48px;
overflow-x: auto;
overflow-y: hidden;
-webkit-app-region: no-drag;
scrollbar-width: thin;
scrollbar-color: var(--border-hairline) transparent;
}
.tabstrip::-webkit-scrollbar {
height: 6px;
}
.tabstrip::-webkit-scrollbar-track {
background: transparent;
}
.tabstrip::-webkit-scrollbar-thumb {
background: var(--border-hairline);
border-radius: 6px;
}
.tabstrip::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
.tab {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
margin-top: 8px;
padding: 0 12px;
border: 1px solid transparent;
border-bottom: none;
border-radius: 8px 8px 0 0;
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
width: 160px;
flex: 0 0 auto;
}
.tab:hover {
background: var(--bg-raised);
color: var(--text-primary);
}
.tab--active {
background: var(--bg-panel);
border-color: var(--border-hairline);
color: var(--text-primary);
}
.tab--dimmed {
opacity: 0.55;
}
.tab-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-close {
margin-left: 2px;
font-size: 15px;
line-height: 1;
color: var(--text-muted);
border-radius: 4px;
padding: 2px 4px;
}
.tab-close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
/* Quiet icon button — used once at least one tab exists */
.tab-add {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
align-self: flex-end;
margin-bottom: 5px; /* (tab height 36 - button height 26) / 2 */
margin-left: 6px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s ease, color 0.12s ease;
}
.tab-add:hover {
background: var(--bg-raised);
color: var(--text-primary);
}
.tab-add:active {
background: var(--border-hairline);
}
/* Clearer CTA — used when the bar has nothing else to anchor to */
.tab-add-empty {
display: flex;
align-items: center;
gap: 6px;
height: 30px;
align-self: flex-end;
margin-bottom: 3px; /* (tab height 36 - CTA height 30) / 2 */
padding: 0 12px 0 10px;
border: 1px dashed var(--border-hairline);
border-radius: 999px;
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tab-add-empty:hover {
background: var(--bg-raised);
border-color: var(--accent-brand);
border-style: solid;
color: var(--text-primary);
}
/* ---------- LED status dot ---------- */
.led {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--accent-down);
}
.led--connected {
background: var(--accent-live);
box-shadow: 0 0 6px 1px var(--accent-live);
}
.led--connecting {
background: var(--accent-connecting);
box-shadow: 0 0 6px 1px var(--accent-connecting);
animation: pulse 1s ease-in-out infinite;
}
.led--disconnected {
background: var(--accent-down);
box-shadow: 0 0 4px 0px var(--accent-down);
}
.led--lg {
width: 12px;
height: 12px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ---------- Stage / main area ---------- */
.stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
background: var(--bg-panel);
overflow-y: auto;
}
.card {
width: 100%;
max-width: 480px;
background: var(--bg-raised);
border: 1px solid var(--border-hairline);
border-radius: 12px;
padding: 28px;
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
color: var(--text-muted);
text-align: center;
}
.empty-mark {
font-size: 28px;
color: var(--border-hairline);
}
.empty p {
margin: 0;
font-size: 14px;
}
/* ---------- DSP panel ---------- */
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.panel-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.panel-type {
margin-top: 4px;
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.03em;
}
.status-block {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.status-label {
font-size: 12px;
font-weight: 500;
}
.status-label--connected { color: var(--accent-live); }
.status-label--connecting { color: var(--accent-connecting); }
.status-label--disconnected { color: var(--text-muted); }
.specs {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 24px;
padding: 16px;
background: var(--bg-panel);
border: 1px solid var(--border-hairline);
border-radius: 8px;
}
.spec {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.spec dt {
color: var(--text-muted);
}
.spec dd {
margin: 0;
color: var(--text-primary);
}
.panel-actions {
display: flex;
justify-content: flex-end;
}
/* ---------- Form ---------- */
.form-header {
margin-bottom: 20px;
}
.form-hint {
margin: 6px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
flex: 1;
}
.field--grow {
flex: 2;
}
.field--narrow {
flex: 1;
}
.field-row {
display: flex;
gap: 12px;
}
.field label {
font-size: 12px;
color: var(--text-muted);
}
.field input,
.field select {
height: 36px;
padding: 0 10px;
background: var(--bg-panel);
border: 1px solid var(--border-hairline);
border-radius: 6px;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 13px;
outline: none;
transition: border-color 0.12s ease;
}
.field input.mono {
font-family: var(--font-mono);
}
.field input:focus,
.field select:focus {
border-color: var(--accent-brand);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
}
/* ---------- Buttons ---------- */
.btn {
height: 36px;
padding: 0 16px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-primary {
background: var(--accent-brand);
color: #0d0f12;
}
.btn-primary:hover:not(:disabled) {
background: #6f9bf2;
}
.btn-outline {
background: transparent;
border-color: var(--accent-down);
color: var(--accent-down);
}
.btn-outline:hover {
background: rgba(255, 92, 92, 0.1);
}
.btn-ghost {
background: transparent;
border-color: var(--border-hairline);
color: var(--text-muted);
}
.btn-ghost:hover {
color: var(--text-primary);
border-color: var(--text-muted);
}

103
src/App.tsx
View File

@ -1,103 +0,0 @@
import { invoke } from "@tauri-apps/api/core";
import { useState } from "react";
import "./App.css";
import { DSP, DSPStatus } from "./types";
import TopBar from "./components/TopBar";
import DSPPanel from "./components/Dsppanel";
import AddDSPForm from "./components/Adddspform";
function App() {
const [dsps, setDsps] = useState<DSP[]>([]);
const [selected, setSelected] = useState<string | null>(null);
const [showAdd, setShowAdd] = useState(false);
async function addDSP(dsp: Omit<DSP, "status">) {
try {
const count = await invoke<number>("create_dsp408", {
ip: dsp.ip,
port: dsp.port,
deviceId: Number(dsp.deviceId),
});
console.log("DSP count:", count);
const newDsp: DSP = {
...dsp,
status: "disconnected",
};
setDsps(prev => [...prev, newDsp]);
setSelected(newDsp.id);
setShowAdd(false);
} catch (err) {
console.error("Failed to create DSP:", err);
// TODO: Show an error dialog/toast
}
}
function removeDSP(id: string) {
setDsps(prev => {
const next = prev.filter(d => d.id !== id);
if (selected === id) {
setSelected(next.length ? next[0].id : null);
}
return next;
});
}
function setStatus(id: string, status: DSPStatus) {
setDsps(prev => prev.map(d => (d.id === id ? { ...d, status } : d)));
}
function connect(dsp: DSP) {
setStatus(dsp.id, "connecting");
window.setTimeout(() => {
setStatus(dsp.id, "connected");
}, 900);
}
function disconnect(dsp: DSP) {
setStatus(dsp.id, "disconnected");
}
const activeDsp = dsps.find(d => d.id === selected) ?? null;
return (
<div className="app">
<TopBar
dsps={dsps}
selected={selected}
showAdd={showAdd}
onSelect={id => {
setSelected(id);
setShowAdd(false);
}}
onRemove={removeDSP}
onAddClick={() => setShowAdd(true)}
/>
<main className="stage">
{showAdd ? (
<AddDSPForm onCancel={() => setShowAdd(false)} onAdd={addDSP} />
) : activeDsp ? (
<DSPPanel
dsp={activeDsp}
onConnect={() => connect(activeDsp)}
onDisconnect={() => disconnect(activeDsp)}
/>
) : (
<div className="empty">
<div className="empty-mark">◇</div>
<p>No output selected.</p>
<button className="btn btn-primary" onClick={() => setShowAdd(true)}>
Add a DSP
</button>
</div>
)}
</main>
</div>
);
}
export default App;

72
src/components/AnimatedLogo.tsx → src/assets/icons/AnimatedLogo.tsx
View File

@ -1,59 +1,59 @@
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react';
// degrees per second // degrees per second
const DONUT_BASE_SPEED = 360 / 8 const DONUT_BASE_SPEED = 360 / 8;
const DONUT_HOVER_SPEED = 360 / 2 const DONUT_HOVER_SPEED = 360 / 2;
const INNER_BASE_SPEED = 360 / 12 const INNER_BASE_SPEED = 360 / 12;
const INNER_HOVER_SPEED = 360 / 3 const INNER_HOVER_SPEED = 360 / 3;
const AnimatedLogo = ({ size = 45, className = '' }) => { const AnimatedLogo = ({ size = 45, className = '' }) => {
const [isHovered, setIsHovered] = useState(false) const [isHovered, setIsHovered] = useState(false);
const isHoveredRef = useRef(false) const isHoveredRef = useRef(false);
const donutGroupRef = useRef<SVGGElement | null>(null) const donutGroupRef = useRef<SVGGElement | null>(null);
const innerGroupRef = useRef<SVGGElement | null>(null) const innerGroupRef = useRef<SVGGElement | null>(null);
const angleRef = useRef({ donut: 0, inner: 0 }) const angleRef = useRef({ donut: 0, inner: 0 });
const lastTimeRef = useRef<number | null>(null) const lastTimeRef = useRef<number | null>(null);
const rafIdRef = useRef<number | null>(null) const rafIdRef = useRef<number | null>(null);
useEffect(() => { useEffect(() => {
isHoveredRef.current = isHovered isHoveredRef.current = isHovered;
}, [isHovered]) }, [isHovered]);
useEffect(() => { useEffect(() => {
const tick = (time: number) => { const tick = (time: number) => {
if (lastTimeRef.current == null) lastTimeRef.current = time if (lastTimeRef.current == null) lastTimeRef.current = time;
const dt = (time - lastTimeRef.current) / 1000 const dt = (time - lastTimeRef.current) / 1000;
lastTimeRef.current = time lastTimeRef.current = time;
const donutSpeed = isHoveredRef.current ? DONUT_HOVER_SPEED : DONUT_BASE_SPEED const donutSpeed = isHoveredRef.current ? DONUT_HOVER_SPEED : DONUT_BASE_SPEED;
const innerSpeed = isHoveredRef.current ? INNER_HOVER_SPEED : INNER_BASE_SPEED const innerSpeed = isHoveredRef.current ? INNER_HOVER_SPEED : INNER_BASE_SPEED;
// Accumulate angle continuously -- speed can change instantly // Accumulate angle continuously -- speed can change instantly
// without ever resetting the current rotation. // without ever resetting the current rotation.
angleRef.current.donut = (angleRef.current.donut + donutSpeed * dt) % 360 angleRef.current.donut = (angleRef.current.donut + donutSpeed * dt) % 360;
angleRef.current.inner = (angleRef.current.inner + innerSpeed * dt) % 360 angleRef.current.inner = (angleRef.current.inner + innerSpeed * dt) % 360;
if (donutGroupRef.current) { if (donutGroupRef.current) {
donutGroupRef.current.setAttribute( donutGroupRef.current.setAttribute(
'transform', 'transform',
`rotate(${angleRef.current.donut} 100 100)` `rotate(${angleRef.current.donut} 100 100)`
) );
} }
if (innerGroupRef.current) { if (innerGroupRef.current) {
innerGroupRef.current.setAttribute( innerGroupRef.current.setAttribute(
'transform', 'transform',
`rotate(${angleRef.current.inner} 100 100)` `rotate(${angleRef.current.inner} 100 100)`
) );
} }
rafIdRef.current = requestAnimationFrame(tick) rafIdRef.current = requestAnimationFrame(tick);
} };
rafIdRef.current = requestAnimationFrame(tick) rafIdRef.current = requestAnimationFrame(tick);
return () => { return () => {
if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current) if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
} };
}, []) }, []);
return ( return (
<div <div
@ -150,13 +150,7 @@ const AnimatedLogo = ({ size = 45, className = '' }) => {
<stop offset="100%" stopColor="rgba(0,0,0,0.5)" /> <stop offset="100%" stopColor="rgba(0,0,0,0.5)" />
</radialGradient> </radialGradient>
<linearGradient <linearGradient id="shadowGradient" x1="20%" y1="20%" x2="80%" y2="80%">
id="shadowGradient"
x1="20%"
y1="20%"
x2="80%"
y2="80%"
>
<stop offset="0%" stopColor="#0f1d42" /> <stop offset="0%" stopColor="#0f1d42" />
<stop offset="25%" stopColor="#1f2a5d" /> <stop offset="25%" stopColor="#1f2a5d" />
<stop offset="45%" stopColor="#332f78" /> <stop offset="45%" stopColor="#332f78" />
@ -203,7 +197,7 @@ const AnimatedLogo = ({ size = 45, className = '' }) => {
</g> </g>
</svg> </svg>
</div> </div>
) );
} };
export default AnimatedLogo export default AnimatedLogo;

33
src/assets/icons/AudioIcons.tsx Normal file
View File

@ -0,0 +1,33 @@
export function InfoIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M12 11V16M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21ZM12.0498 8V8.1L11.9502 8.1002V8H12.0498Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
export function SlidersIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<circle cx="16" cy="13" r="3" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
<circle cx="6" cy="22" r="3" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
<circle cx="26" cy="16" r="3" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
<path
d="M6 29V25M6 16V3M16 7V3M26 10V3M16 29V16M26 29V19"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

13
src/assets/icons/ChevronLeftIcon.tsx Normal file
View File

@ -0,0 +1,13 @@
export function ChevronLeftIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M9 2.5L4.5 7L9 11.5"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

7
src/assets/icons/CloseIcon.tsx Normal file
View File

@ -0,0 +1,7 @@
export function CloseIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 20 20" fill="currentColor" {...props}>
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
);
}

14
src/assets/icons/CrownIcon.tsx Normal file
View File

@ -0,0 +1,14 @@
export function CrownIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M3 7L6.5 10L9 5L12 10L15 5L17.5 10L21 7L19 18H5L3 7Z"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M5 18H19" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
</svg>
);
}

12
src/assets/icons/PlusIcon.tsx Normal file
View File

@ -0,0 +1,12 @@
export function PlusIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M8 2.5V13.5M2.5 8H13.5"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
/>
</svg>
);
}

49
src/components/DSPTabs.tsx
View File

@ -1,49 +0,0 @@
import { DSP } from "../types";
type Props = {
dsps: DSP[];
selected: string | null;
showAdd: boolean;
onSelect(id: string): void;
onRemove(id: string): void;
onAdd(): void;
};
export default function DSPTabs({
dsps,
onSelect,
onRemove,
onAdd,
}: Props) {
return (
<div className="tabstrip">
{dsps.map(dsp => (
<button
key={dsp.id}
className="tab"
onClick={() => onSelect(dsp.id)}
>
<span className={"led led--" + dsp.status}/>
{dsp.name}
<span
onClick={(e)=>{
e.stopPropagation();
onRemove(dsp.id);
}}
>
×
</span>
</button>
))}
<button className="tab-add" onClick={onAdd}>
+
</button>
</div>
);
}

31
src/components/Notifications.tsx Normal file
View File

@ -0,0 +1,31 @@
import type { Notification } from '../types/types';
type Props = {
notifications: Notification[];
onRemove: (id: number) => void;
};
export default function Notifications({ notifications, onRemove }: Props) {
return (
<div className="notifications">
{notifications.map((n) => (
<div
key={n.id}
className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
>
<span className="notification-message" title={n.message}>
{n.message}
</span>
<button
className="tab-close notification-close"
onClick={() => onRemove(n.id)}
aria-label="Dismiss notification"
>
×
</button>
</div>
))}
</div>
);
}

68
src/components/Topbar.tsx
View File

@ -1,68 +0,0 @@
import { DSP } from "../types";
import Tab from "./Tab";
import AnimatedLogo from "./AnimatedLogo"; // adjust path to wherever yours lives
function TopBar({
dsps,
selected,
showAdd,
onSelect,
onRemove,
onAddClick,
}: {
dsps: DSP[];
selected: string | null;
showAdd: boolean;
onSelect: (id: string) => void;
onRemove: (id: string) => void;
onAddClick: () => void;
}) {
const hasTabs = dsps.length > 0;
return (
<header className="topbar">
<div className="logo-slot">
<AnimatedLogo />
</div>
<div className="tabstrip">
{dsps.map(dsp => (
<Tab
key={dsp.id}
dsp={dsp}
active={selected === dsp.id && !showAdd}
dimmed={showAdd}
onSelect={() => onSelect(dsp.id)}
onRemove={() => onRemove(dsp.id)}
/>
))}
{hasTabs ? (
<button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
<PlusIcon />
</button>
) : (
<button className="tab-add-empty" onClick={onAddClick}>
<PlusIcon />
<span>Add DSP</span>
</button>
)}
</div>
</header>
);
}
function PlusIcon() {
return (
<svg viewBox="0 0 16 16" width="14" height="14" fill="none">
<path
d="M8 2.5V13.5M2.5 8H13.5"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
/>
</svg>
);
}
export default TopBar;

71
src/components/Adddspform.tsx → src/components/app/AddDspPage.tsx
View File

@ -1,26 +1,29 @@
import { useState } from "react"; import { useState } from 'react';
import { DSP, DSP_TYPES } from "../types"; import { DSP, DSP_TYPES } from '../../types/types';
function AddDSPForm({ function AddDSPForm({
onCancel, onCancel,
onAdd, onAdd,
}: { }: {
onCancel: () => void; onCancel: () => void;
onAdd: (d: Omit<DSP, "status">) => void; onAdd: (d: Omit<DSP, 'status' | 'id'>) => void;
}) { }) {
const [form, setForm] = useState({ const [form, setForm] = useState({
name: "", name: '',
type: DSP_TYPES[0].name, type: DSP_TYPES[0].name,
ip: "192.168.1.100", ip: '192.168.1.100',
port: DSP_TYPES[0].defaultPort, port: DSP_TYPES[0].defaultPort,
deviceId: "", deviceId: '1',
}); });
const canSubmit = form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId; const canSubmit =
form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId.length > 0;
function submit() { function submit() {
if (!canSubmit) return; if (!canSubmit) return;
onAdd({ id: crypto.randomUUID(), ...form }); onAdd({
...form,
});
} }
return ( return (
@ -36,7 +39,7 @@ function AddDSPForm({
id="f-name" id="f-name"
placeholder="Main Room DSP" placeholder="Main Room DSP"
value={form.name} value={form.name}
onChange={e => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
/> />
</div> </div>
@ -46,41 +49,37 @@ function AddDSPForm({
<select <select
id="f-type" id="f-type"
value={form.type} value={form.type}
onChange={e => { onChange={(e) => {
const selected = DSP_TYPES.find( const selected = DSP_TYPES.find((d) => d.name === e.target.value);
d => d.name === e.target.value
);
setForm({ setForm({
...form, ...form,
type: e.target.value, type: e.target.value,
port: selected?.defaultPort ?? form.port, port: selected?.defaultPort ?? form.port,
}); });
}} }}
> >
{DSP_TYPES.map(dsp => ( {DSP_TYPES.map((dsp) => (
<option key={dsp.name} value={dsp.name}> <option key={dsp.name} value={dsp.name}>
{dsp.name} {dsp.name}
</option> </option>
))} ))}
</select> </select>
</div> </div>
<div className="field"> <div className="field">
<label htmlFor="f-deviceid">Device ID</label> <label htmlFor="f-deviceid">Device ID</label>
<input <input
id="f-deviceid" id="f-deviceid"
className="mono" className="mono"
type="number" type="number"
min={1} min={1}
max={255} max={255}
step={1} step={1}
placeholder="1" placeholder="1"
value={form.deviceId} value={form.deviceId}
onChange={e => onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
setForm({ ...form, deviceId: e.target.value }) />
}
/>
</div> </div>
</div> </div>
@ -91,7 +90,7 @@ function AddDSPForm({
id="f-ip" id="f-ip"
className="mono" className="mono"
value={form.ip} value={form.ip}
onChange={e => setForm({ ...form, ip: e.target.value })} onChange={(e) => setForm({ ...form, ip: e.target.value })}
/> />
</div> </div>
@ -102,7 +101,7 @@ function AddDSPForm({
className="mono" className="mono"
type="number" type="number"
value={form.port} value={form.port}
onChange={e => setForm({ ...form, port: Number(e.target.value) })} onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
/> />
</div> </div>
</div> </div>
@ -119,4 +118,4 @@ function AddDSPForm({
); );
} }
export default AddDSPForm; export default AddDSPForm;

174
src/components/app/App.tsx Normal file
View File

@ -0,0 +1,174 @@
import { invoke } from '@tauri-apps/api/core';
import { useState } from 'react';
import '../../styles/App.css';
import { DSP, DSPStatus, AppPage } from '../../types/types';
import TopBar from '../topbar/Topbar';
import DSPPage from '../dsp408/DspPage';
import AddDSPForm from './AddDspPage';
import { useNotifications } from '../../hooks/useNotifications';
import Notifications from '../Notifications';
import { DSPState } from '../../types/dsp408State';
import CreditsPage from './CreditsPage';
import HomePage from './HomePage';
function App() {
const [dsps, setDsps] = useState<DSP[]>([]);
const [selected, setSelected] = useState<number | null>(null);
const [page, setPage] = useState<AppPage>('home');
const { notifications, notify, removeNotification } = useNotifications();
async function addDSP(dsp: Omit<DSP, 'id' | 'status'>) {
try {
const id = await invoke<number>('create_dsp408', {
ip: dsp.ip,
port: dsp.port,
deviceId: Number(dsp.deviceId),
});
const newDsp: DSP = {
id,
...dsp,
status: 'disconnected',
};
setDsps((prev) => [...prev, newDsp]);
setSelected(id);
setPage('view-dsp');
notify('Added successfully', 'success', dsp.name);
} catch (err) {
notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
}
}
async function removeDSP(dsp: DSP) {
try {
let id = dsp.id;
await invoke('remove_dsp408', {
id,
});
setDsps((prev) => {
const next = prev.filter((d) => d.id !== id);
if (selected === id) {
setSelected(next.length ? next[0].id : null);
}
return next;
});
notify('Removed successfully', 'success', dsp?.name);
} catch (err) {
notify(`Remove failed: ${String(err)}`, 'error', dsp?.name);
}
}
async function connectDSP(dsp: DSP) {
setStatus(dsp.id, 'connecting');
try {
await invoke('connect_dsp408', {
id: dsp.id,
});
console.log('Connected');
setStatus(dsp.id, 'connected');
const state = await getDSPState(dsp);
console.log(state);
notify('Connected', 'success', dsp.name);
} catch (err) {
notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
setStatus(dsp.id, 'disconnected');
}
}
async function disconnectDSP(dsp: DSP) {
try {
await invoke('disconnect_dsp408', {
id: dsp.id,
});
setStatus(dsp.id, 'disconnected');
notify('Disconnected', 'success', dsp.name);
} catch (err) {
notify(`Disconnect failed: ${String(err)}`, 'error', dsp.name);
}
}
async function getDSPState(dsp: DSP) {
try {
const state = await invoke<DSPState>('get_dsp_state', {
id: dsp.id,
});
return state;
} catch (err) {
notify(`Failed to get state: ${String(err)}`, 'error', dsp.name);
return null;
}
}
function setStatus(id: number, status: DSPStatus) {
setDsps((prev) => prev.map((d) => (d.id === id ? { ...d, status } : d)));
}
const activeDsp = dsps.find((d) => d.id === selected) ?? null;
const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
return (
<div className="app">
<Notifications notifications={notifications} onRemove={removeNotification} />
<TopBar
dsps={dsps}
selected={selected}
page={page}
setPage={setPage}
setSelect={setSelected}
onSelect={(id) => {
setSelected(id);
setPage('view-dsp');
}}
onRemove={removeDSP}
onAddClick={() => {
setPage('add-dsp');
}}
/>
<main className="stage">
{page === 'credits' ? (
<CreditsPage />
) : page === 'add-dsp' ? (
<AddDSPForm onCancel={() => setPage('home')} onAdd={addDSP} />
) : activeDsp ? (
<DSPPage
dsp={activeDsp}
onConnect={() => connectDSP(activeDsp)}
onDisconnect={() => disconnectDSP(activeDsp)}
notify={notify}
/>
) : (
<HomePage
onAddDSP={() => setPage('add-dsp')}
dspCount={dsps.length}
connectedCount={connectedDspCount}
/>
)}
</main>
</div>
);
}
export default App;

35
src/components/app/CreditsPage.tsx Normal file
View File

@ -0,0 +1,35 @@
function CreditsPage() {
return (
<div className="card panel">
<div className="panel-header">
<div>
<h1 className="panel-title">Credits</h1>
<div className="panel-type">Thank you to everyone supporting the project</div>
</div>
</div>
<dl className="specs">
<div className="spec">
<dt>Developer</dt>
<dd>Your Name</dd>
</div>
<div className="spec">
<dt>Design</dt>
<dd>Open Source Community</dd>
</div>
<div className="spec">
<dt>Libraries</dt>
<dd className="mono">React · Tauri · TypeScript</dd>
</div>
</dl>
<div className="panel-actions">
<button className="btn btn-primary">Support the project</button>
</div>
</div>
);
}
export default CreditsPage;

37
src/components/app/HomePage.tsx Normal file
View File

@ -0,0 +1,37 @@
function HomePage({
dspCount,
connectedCount,
onAddDSP,
}: {
dspCount: number;
connectedCount: number;
onAddDSP: () => void;
}) {
return (
<div className="card panel">
<dl className="specs">
<div className="spec">
<dt>Connected</dt>
<dd>
{connectedCount} DSP{connectedCount !== 1 ? 's' : ''}
</dd>
</div>
<div className="spec">
<dt>Devices</dt>
<dd>
{dspCount} DSP{dspCount !== 1 ? 's' : ''} configured
</dd>
</div>
</dl>
<div className="panel-actions">
<button className="btn btn-primary" onClick={onAddDSP}>
Add a DSP
</button>
</div>
</div>
);
}
export default HomePage;

32
src/components/Dsppanel.tsx → src/components/dsp408/ConnectionPanel.tsx
View File

@ -1,6 +1,6 @@
import { DSP } from "../types"; import { DSP } from '../../types/types';
function DSPPanel({ function ConnectionPanel({
dsp, dsp,
onConnect, onConnect,
onDisconnect, onDisconnect,
@ -10,11 +10,11 @@ function DSPPanel({
onDisconnect: () => void; onDisconnect: () => void;
}) { }) {
const statusLabel = const statusLabel =
dsp.status === "connected" dsp.status === 'connected'
? "Connected" ? 'Connected'
: dsp.status === "connecting" : dsp.status === 'connecting'
? "Connecting…" ? 'Connecting…'
: "Disconnected"; : 'Disconnected';
return ( return (
<div className="card panel"> <div className="card panel">
@ -25,10 +25,8 @@ function DSPPanel({
</div> </div>
<div className="status-block"> <div className="status-block">
<span className={"led led--lg led--" + dsp.status} /> <span className={`led led--lg led--${dsp.status}`} />
<span className={"status-label status-label--" + dsp.status}> <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
{statusLabel}
</span>
</div> </div>
</div> </div>
@ -37,18 +35,20 @@ function DSPPanel({
<dt>IP address</dt> <dt>IP address</dt>
<dd className="mono">{dsp.ip}</dd> <dd className="mono">{dsp.ip}</dd>
</div> </div>
<div className="spec"> <div className="spec">
<dt>Port</dt> <dt>Port</dt>
<dd className="mono">{dsp.port}</dd> <dd className="mono">{dsp.port}</dd>
</div> </div>
<div className="spec"> <div className="spec">
<dt>Device ID</dt> <dt>Device ID</dt>
<dd className="mono">{dsp.deviceId || "—"}</dd> <dd className="mono">{dsp.deviceId || '—'}</dd>
</div> </div>
</dl> </dl>
<div className="panel-actions"> <div className="panel-actions">
{dsp.status === "connected" ? ( {dsp.status === 'connected' ? (
<button className="btn btn-outline" onClick={onDisconnect}> <button className="btn btn-outline" onClick={onDisconnect}>
Disconnect Disconnect
</button> </button>
@ -56,9 +56,9 @@ function DSPPanel({
<button <button
className="btn btn-primary" className="btn btn-primary"
onClick={onConnect} onClick={onConnect}
disabled={dsp.status === "connecting"} disabled={dsp.status === 'connecting'}
> >
{dsp.status === "connecting" ? "Connecting…" : "Connect"} {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
</button> </button>
)} )}
</div> </div>
@ -66,4 +66,4 @@ function DSPPanel({
); );
} }
export default DSPPanel; export default ConnectionPanel;

62
src/components/dsp408/DspPage.tsx Normal file
View File

@ -0,0 +1,62 @@
import { useState } from 'react';
import { DSP } from '../../types/types';
import Sidebar from './Sidebar/Sidebar';
import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
import ConnectionPanel from './ConnectionPanel';
import GainPanel from './GainPanel';
import { NotificationType } from '../../types/types';
function DSPPage({
dsp,
onConnect,
onDisconnect,
notify,
}: {
dsp: DSP;
onConnect: () => void;
onDisconnect: () => void;
notify: (message: string, type?: NotificationType, dspName?: string) => void;
}) {
const [activeSidebar, setActiveSidebar] = useState('overview');
const sidebarItems = [
{
id: 'overview',
label: 'Overview',
icon: <InfoIcon />,
},
{
id: 'gain',
label: 'Gain',
icon: <SlidersIcon />,
},
];
const renderTab = () => {
switch (activeSidebar) {
case 'overview':
return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
case 'gain':
return <GainPanel dsp={dsp} notify={notify} />;
default:
return null;
}
};
return (
<div className="dsp-layout">
<Sidebar
items={sidebarItems}
activeId={activeSidebar}
onSelect={setActiveSidebar}
appName={dsp.name}
/>
<div className="dsp-content">{renderTab()}</div>
</div>
);
}
export default DSPPage;

56
src/components/dsp408/GainPanel.tsx Normal file
View File

@ -0,0 +1,56 @@
import VerticalStack from './VerticalStack/VerticalStack';
import VerticalSlider from './Slider.tsx/VerticalSlider';
import { invoke } from '@tauri-apps/api/core';
import { InputChannel, Channel } from '../../types/dsp408State';
import { DSP } from '../../types/types';
import { NotificationType } from '../../types/types';
function GainPanel({
dsp,
notify,
}: {
dsp: DSP;
notify: (message: string, type?: NotificationType, dspName?: string) => void;
}) {
const setGain = async (value: number) => {
const channel: Channel = {
Input: InputChannel.InA,
};
try {
const success = await invoke<boolean>('set_channel_gain', {
id: dsp.id,
channel,
db: value,
});
if (success) {
notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
} else {
notify('Failed to set input gain', 'error', dsp.name);
}
} catch (err) {
notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
}
};
return (
<VerticalStack title="In A" titleFontSize={18}>
<VerticalSlider
min={-60}
max={12}
step={1}
switchStepValue={-10}
switchStep={0.1}
unit=" dB"
onChange={setGain}
/>
<button className="btn btn-ghost">Reset</button>
<button className="btn btn-primary">Apply</button>
</VerticalStack>
);
}
export default GainPanel;

268
src/components/dsp408/Sidebar/Sidebar.css Normal file
View File

@ -0,0 +1,268 @@
/* ---------- Label ---------- */
.sidebar-label {
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition:
opacity var(--dur-fast) var(--ease-standard),
max-width var(--dur-base) var(--ease-standard);
}
.sidebar-rail--expanded .sidebar-label {
opacity: 1;
max-width: 200px;
}
/* ---------- Icon ---------- */
.sidebar-icon {
width: var(--sidebar-icon-size, 20px);
height: var(--sidebar-icon-size, 20px);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.sidebar-icon svg {
width: 100%;
height: 100%;
display: block;
stroke: currentColor;
fill: none;
}
/* ---------- Item ---------- */
.sidebar-item {
width: var(--sidebar-item-size);
height: var(--sidebar-item-size);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border: var(--border-width) solid transparent;
border-radius: var(--radius-lg);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition:
width var(--dur-base) var(--ease-standard),
background var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.sidebar-rail--expanded .sidebar-item {
width: calc(100% - var(--space-4));
gap: var(--sidebar-item-gap);
justify-content: flex-start;
padding-left: var(--sidebar-item-padding);
}
/* ---------- Item States ---------- */
.sidebar-item:hover {
background: var(--bg-raised);
color: var(--text-primary);
}
.sidebar-item--active {
border-color: var(--accent-brand);
color: var(--text-primary);
}
/* ---------- Sidebar ---------- */
.sidebar-rail {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
width: var(--sidebar-width-collapsed);
display: flex;
flex-direction: column;
background: var(--bg-void);
border-right: var(--border-width) solid var(--border-hairline);
z-index: 30;
overflow: visible;
transition:
width var(--dur-base) var(--ease-standard);
}
.sidebar-rail--expanded {
width: var(--sidebar-width-expanded);
}
/* ---------- App name ---------- */
.sidebar-app-name {
position: absolute;
top: var(--space-3);
left: var(--space-4);
height: var(--sidebar-toggle-size);
display: flex;
align-items: center;
font-size: var(--font-size-sm, 13px);
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-standard);
z-index: 31;
}
.sidebar-rail--expanded .sidebar-app-name {
opacity: 1;
pointer-events: auto;
transition-delay: var(--dur-fast);
}
/* ---------- Scroll ---------- */
.sidebar-scroll {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: calc(var(--sidebar-toggle-size) + var(--space-3) * 2) 0 var(--space-3);
overflow-y: auto;
}
.sidebar-rail--expanded .sidebar-scroll {
align-items: stretch;
}
/* ---------- Toggle ---------- */
.sidebar-toggle {
position: absolute;
top: var(--space-3);
left: calc((var(--sidebar-width-collapsed) - var(--sidebar-toggle-size)) / 2);
width: var(--sidebar-toggle-size);
height: var(--sidebar-toggle-size);
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-pill);
background: var(--bg-void);
color: var(--text-muted);
cursor: pointer;
padding: 0;
box-shadow: none;
transition:
left var(--dur-base) var(--ease-standard),
background var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
z-index: 32;
}
.sidebar-rail--expanded .sidebar-toggle {
left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
}
.sidebar-toggle:hover {
background: var(--bg-raised);
color: var(--text-primary);
border-color: var(--accent-brand);
}
.sidebar-toggle:active {
transform: scale(.92);
}
.sidebar-rail--expanded .sidebar-toggle:active {
transform: scale(.92);
}
.sidebar-toggle-icon {
width: 14px;
height: 14px;
transition:
transform var(--dur-base) var(--ease-standard);
}
.sidebar-rail--expanded .sidebar-toggle-icon {
transform: rotate(180deg);
}
/* ---------- Content ---------- */
.stage--with-sidebar {
margin-left: var(--sidebar-width-collapsed);
transition:
margin-left var(--dur-base) var(--ease-standard);
}

54
src/components/dsp408/Sidebar/Sidebar.tsx Normal file
View File

@ -0,0 +1,54 @@
import { useState } from 'react';
import './Sidebar.css';
import { ChevronLeftIcon } from '../../../assets/icons/ChevronLeftIcon';
export type SidebarItem = {
id: string;
label: string;
icon: React.ReactNode;
};
export default function Sidebar({
items,
activeId,
onSelect,
appName,
}: {
items: SidebarItem[];
activeId: string | null;
onSelect: (id: string) => void;
appName: string;
}) {
const [expanded, setExpanded] = useState(false);
return (
<nav className={`sidebar-rail ${expanded ? 'sidebar-rail--expanded' : ''}`}>
<span className="sidebar-app-name">{appName}</span>
<button
className="sidebar-toggle"
onClick={() => setExpanded((prev) => !prev)}
aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
aria-expanded={expanded}
>
<ChevronLeftIcon className="sidebar-toggle-icon" />
</button>
<div className="sidebar-scroll">
{items.map((item) => (
<button
key={item.id}
onClick={() => onSelect(item.id)}
title={item.label}
aria-label={item.label}
aria-current={activeId === item.id ? 'page' : undefined}
className={`sidebar-item ${activeId === item.id ? 'sidebar-item--active' : ''}`}
>
<span className="sidebar-icon">{item.icon}</span>
<span className="sidebar-label">{item.label}</span>
</button>
))}
</div>
</nav>
);
}

164
src/components/dsp408/Slider.tsx/VerticalSlider.css Normal file
View File

@ -0,0 +1,164 @@
.gauge-container {
display: flex;
flex-direction: column;
align-items: center;
width: 4.375rem;
padding-top: var(--space-3);
margin: var(--space-3);
box-sizing: border-box;
container-type: inline-size;
}
.gauge-track {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 13.125rem;
}
.slider {
position: relative;
width: 34.3%;
height: 100%;
cursor: pointer;
touch-action: none;
}
.track {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 2.86cqw;
height: 100%;
background: var(--border-hairline);
border-radius: var(--radius-sm);
}
.thumb {
position: absolute;
left: 50%;
width: 75%;
aspect-ratio: 1;
transform: translate(-50%, 50%);
border-radius: 50%;
background: var(--bg-panel);
border: var(--border-width-active) solid var(--accent-brand);
box-sizing: border-box;
box-shadow: var(--shadow-sm);
transition:
transform var(--transition-fast) var(--ease-standard),
box-shadow var(--transition-fast) var(--ease-standard);
}
.ticks {
position: absolute;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.ticks span {
width: 14.3cqw;
height: 2.86cqw;
background: var(--border-hairline);
border-radius: var(--radius-sm);
}
.left {
left: 11.4%;
}
.right {
right: 11.4%;
}
.value {
margin-top: var(--space-2);
width: 100%;
box-sizing: border-box;
padding: var(--space-2);
border-radius: var(--radius-md);
color: var(--accent-brand);
font-size: var(--value-font-size, 16px);
font-family: var(--font-ui);
box-shadow: var(--shadow-sm);
display: flex;
justify-content: center;
align-items: center;
gap: 0.25em;
overflow: hidden;
white-space: nowrap;
}
.value input,
.value-unit {
font-size: inherit;
line-height: 1;
font-family: inherit;
color: inherit;
}
.value input {
height: 1.4em;
box-sizing: border-box;
text-align: center;
flex: 0 1 auto;
background: transparent;
border: 1px solid var(--border-hairline);
border-radius: var(--radius-sm);
appearance: none;
}

264
src/components/dsp408/Slider.tsx/VerticalSlider.tsx Normal file
View File

@ -0,0 +1,264 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import './VerticalSlider.css';
type VerticalSliderProps = {
min: number;
max: number;
step: number;
switchStepValue?: number;
switchStep?: number;
value?: number;
onChange?: (value: number) => void;
unit?: string;
className?: string;
style?: React.CSSProperties;
};
function getDecimals(n: number) {
const s = n.toString();
const i = s.indexOf('.');
return i === -1 ? 0 : s.length - i - 1;
}
// Measures whatever box the consumer actually rendered — no more
// assuming the gauge is always 70px wide.
function useElementSize<T extends HTMLElement>() {
const ref = useRef<T>(null);
const [size, setSize] = useState({ width: 0, height: 0 });
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new ResizeObserver((entries) => {
const { width, height } = entries[0].contentRect;
setSize({ width, height });
});
observer.observe(el);
const rect = el.getBoundingClientRect();
setSize({ width: rect.width, height: rect.height });
return () => observer.disconnect();
}, []);
return [ref, size] as const;
}
export default function VerticalSlider({
min,
max,
step,
switchStepValue,
switchStep,
value: controlledValue,
onChange,
unit = '',
className,
style,
}: VerticalSliderProps) {
const [internalValue, setInternalValue] = useState(min);
const value = controlledValue ?? internalValue;
const [editingText, setEditingText] = useState<string | null>(null);
const inputRef = useRef<HTMLInputElement>(null);
const [containerRef, containerSize] = useElementSize<HTMLDivElement>();
const sliderRef = useRef<HTMLDivElement>(null);
const isDragging = useRef(false);
const lastValue = useRef(value);
const keyboardValue = useRef<number | null>(null);
const currentStep =
switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
? switchStep
: step;
const decimals = useMemo(
() => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
[step, switchStep]
);
const charWidth = useMemo(
() => Math.max(min.toFixed(decimals).length, max.toFixed(decimals).length) + 1,
[min, max, decimals]
);
// Same formula as before, just driven by a real measurement
// instead of a hardcoded container width.
const fontSize = useMemo(() => {
if (!containerSize.width) return 18;
const chars = charWidth + unit.length + 1;
const available = containerSize.width * 0.9;
return Math.max(12, Math.min(22, available / chars));
}, [containerSize.width, charWidth, unit.length]);
function normalizeValue(input: number) {
const clamped = Math.min(max, Math.max(min, input));
const snapped = Math.round(clamped / currentStep) * currentStep;
return Number(snapped.toFixed(6));
}
function updateValue(v: number) {
const next = normalizeValue(v);
if (controlledValue === undefined) {
setInternalValue(next);
}
lastValue.current = next;
}
function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
if (
e.key !== 'ArrowUp' &&
e.key !== 'ArrowDown' &&
e.key !== 'ArrowLeft' &&
e.key !== 'ArrowRight'
) {
return;
}
e.preventDefault();
let next = value;
if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
next += currentStep;
}
if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
next -= currentStep;
}
updateValue(next);
keyboardValue.current = normalizeValue(next);
}
function handleKeyUp(_e: React.KeyboardEvent<HTMLDivElement>) {
if (keyboardValue.current !== null) {
onChange?.(keyboardValue.current);
keyboardValue.current = null;
}
}
function valueFromPointer(clientY: number) {
if (!sliderRef.current) return;
const rect = sliderRef.current.getBoundingClientRect();
const trackHeight = rect.height; // measured, not a constant
let offset = clientY - rect.top;
offset = Math.max(0, Math.min(trackHeight, offset));
const percent = 1 - offset / trackHeight;
const raw = min + percent * (max - min);
updateValue(raw);
}
function startDrag(e: React.PointerEvent<HTMLDivElement>) {
isDragging.current = true;
valueFromPointer(e.clientY);
const move = (ev: PointerEvent) => {
valueFromPointer(ev.clientY);
};
const up = () => {
isDragging.current = false;
onChange?.(lastValue.current);
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerup', up);
};
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
}
function commitEditing() {
if (editingText !== null && editingText !== '' && editingText !== '-') {
const parsed = Number(editingText);
if (!Number.isNaN(parsed)) updateValue(parsed);
}
setEditingText(null);
}
const percent = (value - min) / (max - min);
return (
<div
className={['gauge-container', className].filter(Boolean).join(' ')}
style={style}
ref={containerRef}
>
<div className="gauge-track">
<div className="ticks left">
{Array.from({ length: 15 }).map((_, i) => (
<span key={i} />
))}
</div>
<div
className="slider"
ref={sliderRef}
tabIndex={0}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onPointerDown={startDrag}
>
<div className="track" />
<div className="thumb" style={{ bottom: `${percent * 100}%` }} />
</div>
<div className="ticks right">
{Array.from({ length: 15 }).map((_, i) => (
<span key={i} />
))}
</div>
</div>
<div
className="value"
style={{ '--value-font-size': `${fontSize}px` } as React.CSSProperties}
>
<input
ref={inputRef}
type="text"
inputMode="decimal"
value={editingText ?? value.toFixed(decimals)}
style={{
width: `${charWidth}ch`,
}}
onFocus={() => setEditingText(value.toFixed(decimals))}
onChange={(e) => setEditingText(e.target.value)}
onBlur={commitEditing}
onKeyDown={(e) => {
if (e.key === 'Enter') {
inputRef.current?.blur();
}
if (e.key === 'Escape') {
setEditingText(null);
inputRef.current?.blur();
}
}}
/>
<span className="value-unit">{unit}</span>
</div>
</div>
);
}

91
src/components/dsp408/VerticalStack/VerticalStack.css Normal file
View File

@ -0,0 +1,91 @@
.vertical-stack {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
box-sizing: border-box;
overflow: hidden;
}
/* header */
.vertical-stack__title {
flex: 0 0 auto;
padding: var(--space-2);
text-align: center;
font-family: var(--font-ui);
font-weight: 600;
color: var(--text-primary);
border-bottom: 1px solid var(--border-hairline);
line-height: 1.2;
}
/* area containing components */
.vertical-stack__content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* each component slot */
.vertical-stack__item {
flex: 1;
min-height: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/*
The child keeps its natural dimensions.
Only horizontal scaling happens.
*/
.vertical-stack__scale {
display: flex;
justify-content: center;
align-items: center;
transform-origin: center;
}

85
src/components/dsp408/VerticalStack/VerticalStack.tsx Normal file
View File

@ -0,0 +1,85 @@
import React, { useLayoutEffect, useRef, useState } from 'react';
import './VerticalStack.css';
type VerticalStackProps = {
title: string;
titleFontSize?: number;
children: React.ReactNode;
};
export default function VerticalStack({ title, titleFontSize = 16, children }: VerticalStackProps) {
const containerRef = useRef<HTMLDivElement>(null);
const itemRefs = useRef<HTMLDivElement[]>([]);
const [scales, setScales] = useState<number[]>([]);
useLayoutEffect(() => {
function updateScale() {
if (!containerRef.current) {
return;
}
const availableWidth = containerRef.current.clientWidth;
const newScales = itemRefs.current.map((item) => {
const child = item.firstElementChild as HTMLElement;
if (!child) {
return 1;
}
const width = child.scrollWidth;
return Math.min(1, availableWidth / width);
});
setScales(newScales);
}
updateScale();
const observer = new ResizeObserver(updateScale);
if (containerRef.current) {
observer.observe(containerRef.current);
}
return () => observer.disconnect();
}, [children]);
return (
<div className="vertical-stack" ref={containerRef}>
<div
className="vertical-stack__title"
style={{
fontSize: titleFontSize,
}}
>
{title}
</div>
<div className="vertical-stack__content">
{React.Children.map(children, (child, index) => (
<div
className="vertical-stack__item"
ref={(el) => {
if (el) {
itemRefs.current[index] = el;
}
}}
>
<div
className="vertical-stack__scale"
style={{
transform: `scaleX(${scales[index] ?? 1})`,
}}
>
{child}
</div>
</div>
))}
</div>
</div>
);
}

20
src/components/Tab.tsx → src/components/topbar/Tab.tsx
View File

@ -1,4 +1,4 @@
import { DSP } from "../types"; import { DSP } from '../../types/types';
function Tab({ function Tab({
dsp, dsp,
@ -15,28 +15,26 @@ function Tab({
}) { }) {
return ( return (
<button <button
className={ className={'tab' + (active ? ' tab--active' : '') + (dimmed ? ' tab--dimmed' : '')}
"tab" +
(active ? " tab--active" : "") +
(dimmed ? " tab--dimmed" : "")
}
onClick={onSelect} onClick={onSelect}
> >
<span className={"led led--" + dsp.status} /> <span className={'led led--' + dsp.status} />
<span className="tab-name">{dsp.name || "Untitled"}</span> <span className="tab-name" title={dsp.name}>
{dsp.name}
</span>
<span <span
className="tab-close" className="tab-close"
role="button" role="button"
aria-label={`Remove ${dsp.name}`} aria-label={`Remove ${dsp.name}`}
onClick={e => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onRemove(); onRemove();
}} }}
> >
× x
</span> </span>
</button> </button>
); );
} }
export default Tab; export default Tab;

95
src/components/topbar/Topbar.tsx Normal file
View File

@ -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;

42
src/hooks/useNotifications.tsx Normal file
View File

@ -0,0 +1,42 @@
import { useState, useCallback } from 'react';
import { NotificationType, Notification } from '../types/types';
export function useNotifications() {
const [notifications, setNotifications] = useState<Notification[]>([]);
const notify = useCallback(
(message: string, type: NotificationType = 'error', dspName?: string) => {
const id = Date.now();
const fullMessage = dspName ? `${dspName}: ${message}` : message;
setNotifications((prev) => [
...prev,
{
id,
message: fullMessage,
type,
},
]);
setTimeout(() => {
setNotifications((prev) => prev.filter((n) => n.id !== id));
}, 5000);
},
[]
);
const removeNotification = useCallback((id: number) => {
setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
setTimeout(() => {
setNotifications((prev) => prev.filter((n) => n.id !== id));
}, 250);
}, []);
return {
notifications,
notify,
removeNotification,
};
}

10
src/main.tsx
View File

@ -1,9 +1,9 @@
import React from "react"; import React from 'react';
import ReactDOM from "react-dom/client"; import ReactDOM from 'react-dom/client';
import App from "./App"; import App from './components/app/App';
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>
); );

725
src/styles/App.css Normal file
View File

@ -0,0 +1,725 @@
@import "./variables.css";
* {
box-sizing: border-box;
user-select: none;
}
input,
select,
textarea,
[contenteditable="true"] {
user-select: text;
}
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
background: var(--bg-void);
color: var(--text-primary);
font-family: var(--font-ui);
}
.mono {
font-family: var(--font-mono);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
button:focus-visible,
*:focus-visible {
outline: none;
box-shadow: inset 0 0 0 1px var(--accent-brand);
}
/* ---------- Top bar ---------- */
.topbar {
display: flex;
align-items: center;
gap: var(--space-5);
padding: 0 var(--space-4);
height: 48px;
background: var(--bg-void);
border-bottom: 1px solid var(--border-hairline);
-webkit-app-region: drag;
}
.logo-slot {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
aspect-ratio: 1 / 1;
width: auto;
flex-shrink: 0;
overflow: hidden;
-webkit-app-region: no-drag;
}
.logo-slot > * {
width: 100%;
height: 100%;
}
.tabstrip {
display: flex;
align-items: center;
gap: 2px;
height: 48px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-app-region: no-drag;
scrollbar-width: thin;
scrollbar-color: var(--border-hairline) transparent;
scroll-behavior: smooth;
scroll-padding-inline: var(--space-3);
}
.crown-action {
color: #facc15;
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.tabstrip::-webkit-scrollbar {
height: 5px;
}
.tabstrip::-webkit-scrollbar-track {
background: transparent;
}
.tabstrip::-webkit-scrollbar-thumb {
background: var(--border-hairline);
border-radius: var(--radius-pill);
}
.tabstrip::-webkit-scrollbar-thumb:hover {
background: var(--accent-brand);
}
.tab {
display: flex;
align-items: center;
gap: var(--space-2);
height: 34px;
padding: 0 var(--space-3);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 13px;
cursor: pointer;
transition: background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
width: 160px;
flex: 0 0 auto;
}
.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);
color: var(--text-primary);
}
.tab--active:hover {
background: var(--bg-panel);
border-color: var(--accent-brand);
}
.tab--dimmed {
opacity: 0.55;
}
.tab-name {
overflow: hidden;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
line-height: 1;
display: flex;
align-items: center;
height: 100%;
mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
}
.tab-close {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-left: auto;
width: 18px;
height: 18px;
padding: 0;
font-size: 15px;
line-height: 1;
color: var(--text-muted);
border-radius: 4px;
transition: background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.tab-close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
/* Quiet icon button — used once at least one tab exists */
.tab-add {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-left: 6px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
/* Lives outside .tabstrip so it never scrolls out of view */
.tabstrip-actions {
display: flex;
align-items: center;
flex-shrink: 0;
-webkit-app-region: no-drag;
}
.tab-add:hover {
background: var(--bg-raised);
color: var(--text-primary);
}
.tab-add:active {
background: var(--border-hairline);
}
/* Clearer CTA — used when the bar has nothing else to anchor to */
.tab-add-empty {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
gap: 6px;
height: 30px;
padding: 0 var(--space-3) 0 10px;
border: 1px dashed var(--border-hairline);
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.tab-add-empty svg,
.tab-add svg {
display: block;
flex-shrink: 0;
}
.tab-add-empty:hover {
background: var(--bg-raised);
border-color: var(--accent-brand);
border-style: solid;
color: var(--text-primary);
}
/* ---------- LED status dot ---------- */
.led {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--accent-down);
transition: background var(--dur-base) var(--ease-standard);
}
.led--connected {
background: var(--accent-live);
box-shadow: 0 0 6px 1px var(--accent-live);
}
.led--connecting {
background: var(--accent-connecting);
box-shadow: 0 0 6px 1px var(--accent-connecting);
animation: pulse 1s var(--ease-standard) infinite;
}
.led--disconnected {
background: var(--accent-down);
box-shadow: 0 0 4px 0px var(--accent-down);
}
.led--lg {
width: 12px;
height: 12px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ---------- Stage / main area ---------- */
.stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px var(--space-6);
background: var(--bg-panel);
overflow-y: auto;
}
.card {
width: 100%;
max-width: 480px;
background: var(--bg-raised);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-lg);
padding: 28px;
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
color: var(--text-muted);
text-align: center;
}
.empty-mark {
font-size: 28px;
color: var(--border-hairline);
}
.empty p {
margin: 0;
font-size: 14px;
}
/* ---------- DSP panel ---------- */
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.panel-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.panel-type {
margin-top: var(--space-1);
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.03em;
}
.status-block {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.status-label {
font-size: 12px;
font-weight: 500;
transition: color var(--dur-base) var(--ease-standard);
}
.status-label--connected { color: var(--accent-live); }
.status-label--connecting { color: var(--accent-connecting); }
.status-label--disconnected { color: var(--text-muted); }
.specs {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0 0 var(--space-6);
padding: var(--space-4);
background: var(--bg-panel);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
}
.spec {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.spec dt {
color: var(--text-muted);
}
.spec dd {
margin: 0;
color: var(--text-primary);
}
.panel-actions {
display: flex;
justify-content: flex-end;
}
/* ---------- Form ---------- */
.form-header {
margin-bottom: var(--space-5);
}
.form-hint {
margin: 6px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--space-4);
flex: 1;
}
.field--grow {
flex: 2;
}
.field--narrow {
flex: 1;
}
.field-row {
display: flex;
gap: var(--space-3);
}
.field label {
font-size: 12px;
color: var(--text-muted);
}
.field input,
.field select {
height: 36px;
padding: 0 10px;
background: var(--bg-panel);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 13px;
outline: none;
transition: border-color var(--dur-base) var(--ease-standard);
}
.field input.mono {
font-family: var(--font-mono);
}
.field input:focus,
.field select:focus {
border-color: var(--accent-brand);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: var(--space-2);
}
/* ---------- Buttons ---------- */
.btn {
height: 36px;
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
opacity var(--dur-base) var(--ease-standard);
}
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-primary {
background: var(--accent-brand);
color: #0d0f12;
}
.btn-primary:hover:not(:disabled) {
background: #6f9bf2;
}
.btn-outline {
background: transparent;
border-color: var(--accent-down);
color: var(--accent-down);
}
.btn-outline:hover {
background: rgba(255, 92, 92, 0.1);
}
.btn-ghost {
background: transparent;
border-color: var(--border-hairline);
color: var(--text-muted);
}
.btn-ghost:hover {
color: var(--text-primary);
border-color: var(--text-muted);
}
/* ---------- Notifications ---------- */
.notifications {
position: fixed;
right: var(--space-5);
bottom: var(--space-5);
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 320px;
pointer-events: none;
}
.notification {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 10px var(--space-3);
border-radius: var(--radius-md);
font-size: 14px;
box-shadow: var(--shadow-md);
animation: notification-in var(--dur-slow) var(--ease-out) forwards;
pointer-events: auto;
}
.notification-out {
animation: notification-out var(--dur-slow) var(--ease-in) forwards;
}
.notification-close {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: transparent;
border-radius: 4px;
font-size: 15px;
line-height: 1;
color: inherit;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard);
}
.notification-close:hover {
background: rgba(255, 255, 255, 0.15);
}
.notification.error {
background: #b42318;
color: white;
}
.notification.success {
background: #15803d;
color: white;
}
.notification.warning {
background: #ca8a04;
color: white;
}
.notification-message {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes notification-in {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes notification-out {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(50px);
opacity: 0;
}
}
/* ---------- DSP detail: side rail + content ---------- */
.dsp-detail {
display: flex;
align-items: flex-start;
gap: var(--space-5);
width: 100%;
max-width: 720px;
}
.dsp-subnav {
display: flex;
flex-direction: column;
gap: 2px;
flex: 0 0 168px;
padding: var(--space-2);
background: var(--bg-panel);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
}
.dsp-subnav-item {
display: flex;
align-items: center;
height: 34px;
padding: 0 var(--space-3);
border: none;
border-left: 2px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.dsp-subnav-item:hover {
background: var(--bg-raised);
color: var(--text-primary);
}
.dsp-subnav-item--active {
background: var(--bg-raised);
border-left-color: var(--accent-brand);
color: var(--text-primary);
font-weight: 500;
}
.dsp-subnav-content {
flex: 1 1 auto;
min-width: 0;
}
/* Let the panel card fill the available width next to the rail,
instead of capping out at 480px like it does standalone in .stage */
.dsp-subnav-content .card {
max-width: none;
width: 100%;
}
/* ---------- Add to your :root ---------- */
:root {
--header-height: 48px; /* matches .topbar's existing height */
--sidebar-width: 48px; /* matches the old icon rail's w-12 */
}
/* ---------- Layout wrapper below the topbar ---------- */
/* .app is already: display:flex; flex-direction:column; height:100vh;
this row just needs to fill the remaining space */
.main-layout {
flex: 1;
display: flex;
min-height: 0; /* lets .stage's own overflow-y:auto do the scrolling */
}

64
src/styles/variables.css Normal file
View File

@ -0,0 +1,64 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
:root {
--header-height: 48px; /* matches .topbar's existing height */
--sidebar-width-collapsed: 56px;
--sidebar-width-expanded: 180px;
/* ---------- Color ---------- */
--bg-void: #0d0f12;
--bg-panel: #16191d;
--bg-raised: #1e2227;
--border-hairline: #2a2f36;
--text-primary: #e8eaed;
--text-muted: #8b92a0;
--accent-brand: #5b8def;
--accent-live: #3ecf8e;
--accent-down: #ff5c5c;
--accent-connecting: #f5a623;
/* ---------- Type ---------- */
--font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
/* ---------- Motion ---------- */
--dur-fast: 100ms;
--dur-base: 180ms;
--dur-slow: 300ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
/* ---------- Spacing scale ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
/* ---------- Radius ---------- */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* ---------- Shadow ---------- */
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
/* ---------- Border ---------- */
--border-width: 1px;
--border-width-active: 2px;
/* ---------- Animation ---------- */
--transition-fast: 120ms;
--transition-base: 180ms;
/* ---------- Component sizes ---------- */
--sidebar-item-size: 32px;
--sidebar-item-gap: 10px;
--sidebar-item-padding: 8px;
--sidebar-toggle-size: 24px;
}

22
src/types.ts
View File

@ -1,22 +0,0 @@
export type DSPStatus = "connected" | "connecting" | "disconnected";
export type DSP = {
id: string;
name: string;
type: string;
ip: string;
port: number;
deviceId: string;
status: DSPStatus;
};
export const DSP_TYPES = [
{
name: "DSP408",
defaultPort: 9761,
},
{
name: "DSP204",
defaultPort: 94,
},
];

193
src/types/dsp408State.ts Normal file
View File

@ -0,0 +1,193 @@
export enum DelayUnit {
Millisecond = 'Millisecond',
Meter = 'Meter',
Feet = 'Feet',
}
export enum InputChannel {
InA = 'InA',
InB = 'InB',
InC = 'InC',
InD = 'InD',
}
export enum OutputChannel {
Out1 = 'Out1',
Out2 = 'Out2',
Out3 = 'Out3',
Out4 = 'Out4',
Out5 = 'Out5',
Out6 = 'Out6',
Out7 = 'Out7',
Out8 = 'Out8',
}
export type Channel = { Input: InputChannel } | { Output: OutputChannel };
export enum Ratio {
Ratio1_1 = 'Ratio1_1',
Ratio1_1_1 = 'Ratio1_1_1',
Ratio1_1_3 = 'Ratio1_1_3',
Ratio1_1_5 = 'Ratio1_1_5',
Ratio1_1_7 = 'Ratio1_1_7',
Ratio1_2 = 'Ratio1_2',
Ratio1_2_5 = 'Ratio1_2_5',
Ratio1_3 = 'Ratio1_3',
Ratio1_3_5 = 'Ratio1_3_5',
Ratio1_4 = 'Ratio1_4',
Ratio1_5 = 'Ratio1_5',
Ratio1_6 = 'Ratio1_6',
Ratio1_8 = 'Ratio1_8',
Ratio1_10 = 'Ratio1_10',
Ratio1_20 = 'Ratio1_20',
Limit = 'Limit',
}
export enum CrossoverFilter {
Bypass = 'Bypass',
Bw6 = 'Bw6',
Bw12 = 'Bw12',
Bw18 = 'Bw18',
Bw24 = 'Bw24',
Bw30 = 'Bw30',
Bw36 = 'Bw36',
Bw42 = 'Bw42',
Bw48 = 'Bw48',
Lk12 = 'Lk12',
Lk24 = 'Lk24',
Lk36 = 'Lk36',
Lk48 = 'Lk48',
}
export enum PEQFilter {
Peak = 'Peak',
LowShelf = 'LowShelf',
HighShelf = 'HighShelf',
Lp6Db = 'Lp6Db',
Lp12Db = 'Lp12Db',
Hp6Db = 'Hp6Db',
Hp12Db = 'Hp12Db',
AllPass1 = 'AllPass1',
AllPass2 = 'AllPass2',
}
// ---------------- STATE ----------------
export type Gate = {
attack: number;
release: number;
hold: number;
threshold: number;
};
export type Compressor = {
threshold: number;
ratio: Ratio;
attack: number;
release: number;
knee: number;
};
export type Limiter = {
threshold: number;
attack: number;
release: number;
};
export type GraphicEQ = {
gains: number[];
bypass: boolean;
};
export type PEQ = {
gain: number;
frequency: number;
q: number;
filter_type: PEQFilter;
bypass: boolean;
};
export type Crossover = {
frequency: number;
slope: CrossoverFilter;
};
export type CrossoverFilters = {
high_pass: Crossover;
low_pass: Crossover;
};
export type MatrixRoutes = {
connected: InputChannel[];
gains: number[];
};
export type PEQChain = {
bands: PEQ[];
bypass: boolean;
};
export type PresetBank = {
current_index: number;
names: string[];
modified: boolean[];
};
export type DeviceFlags = {
is_locked: boolean;
};
export type InputSource = {
type: string;
frequency: string;
};
export type InputChannelState = {
name: string;
gain: number;
phase_inverted: boolean;
delay: number;
gate: Gate;
geq: GraphicEQ;
peq_chain: PEQChain;
crossover: CrossoverFilters;
linked_channels: Channel[];
mute: boolean;
};
export type OutputChannelState = {
name: string;
matrix_routes: MatrixRoutes;
crossover: CrossoverFilters;
peq_chain: PEQChain;
compressor: Compressor;
limiter: Limiter;
gain: number;
phase_inverted: boolean;
delay: number;
linked_channels: Channel[];
mute: boolean;
};
export type DSPConfigState = {
input_states: Record<InputChannel, InputChannelState>;
output_states: Record<OutputChannel, OutputChannelState>;
input_source: InputSource;
delay_unit: DelayUnit;
};
export type DSPState = {
name: string;
flags: DeviceFlags;
presets: PresetBank;
current_config: DSPConfigState;
};

33
src/types/types.ts Normal file
View File

@ -0,0 +1,33 @@
export type DSPStatus = 'connected' | 'connecting' | 'disconnected';
export type DSP = {
id: number;
name: string;
type: string;
ip: string;
port: number;
deviceId: string;
status: DSPStatus;
};
export const DSP_TYPES = [
{
name: 'DSP408',
defaultPort: 9761,
},
{
name: 'DSP204',
defaultPort: 94,
},
];
export type NotificationType = 'success' | 'error' | 'warning';
export type Notification = {
id: number;
message: string;
type: NotificationType;
removing?: boolean;
};
export type AppPage = 'home' | 'add-dsp' | 'view-dsp' | 'credits';