feat: add recall preset

src-tauri/src/commands.rs

@@ -233,3 +233,17 @@ pub async fn get_meter_levels(
             .map_err(|e| e.to_string())
     })
 }
+
+#[tauri::command]
+pub async fn set_current_preset_name(
+    state: State<'_, AppState>,
+    id: u64,
+    name: String,
+) -> Result<bool, String> {
+    state.with_device_mut(id, |device| {
+        device
+            .dsp
+            .set_current_preset_name(&name)
+            .map_err(|e| e.to_string())
+    })
+}

src-tauri/src/lib.rs

@@ -19,6 +19,7 @@ pub fn run() {
                 commands::set_channel_inverse_gain,
                 commands::recall_preset,
                 commands::get_meter_levels,
+                commands::set_current_preset_name,
             ]
         )
         .run(tauri::generate_context!())

src/App.tsx

@@ -18,6 +18,14 @@ function App() {
   const [selected, setSelected] = useState<number | null>(null);
   const [page, setPage] = useState<AppPage>('home');
   const { notifications, notify, removeNotification, hoverNotification } = useNotifications();
+  const activeDsp = dsps.find((d) => d.id === selected) ?? null;
+  const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
+
+  useDSPPolling(dsps, selected, setDsps);
+
+  function setStatus(id: number, status: DSPStatus) {
+    setDsps((prev) => prev.map((d) => (d.id === id ? { ...d, status } : d)));
+  }
 
   async function addDSP(dsp: Omit<DSP, 'id' | 'status' | 'state' | 'meters'>) {
     try {
@@ -100,14 +108,6 @@ function App() {
     }
   }
 
-  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;
-  useDSPPolling(dsps, selected, setDsps);
-
   return (
     <div className="app">
       <Notifications

src/components/LoadingOverlay/LoadingOverlay.css

@@ -0,0 +1,54 @@
+.loading-overlay {
+  z-index: 20;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+
+  background: rgba(0, 0, 0, 0.35);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+
+  transition:
+    opacity var(--dur-base) var(--ease-standard),
+    visibility 0s linear var(--dur-base);
+}
+
+.loading-overlay--active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity var(--dur-base) var(--ease-standard),
+    visibility 0s linear 0s;
+}
+
+.loading-overlay__spinner {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+
+  border: 3px solid var(--border-hairline);
+  border-top-color: var(--accent-brand);
+
+  animation: loading-overlay-spin 0.8s linear infinite;
+}
+
+.loading-overlay__label {
+  font-size: var(--font-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  letter-spacing: 0.02em;
+}
+
+@keyframes loading-overlay-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/LoadingOverlay/LoadingOverlay.tsx

@@ -0,0 +1,32 @@
+import './LoadingOverlay.css';
+
+function LoadingOverlay({
+  active,
+  label = 'Loading…',
+  overlayClassName = '',
+  children,
+}: {
+  active: boolean;
+  label?: string;
+  overlayClassName?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      {children}
+
+      <div
+        className={
+          `loading-overlay ${overlayClassName}` + (active ? ' loading-overlay--active' : '')
+        }
+        aria-live="polite"
+        aria-busy={active}
+      >
+        <div className="loading-overlay__spinner" />
+        <span className="loading-overlay__label">{label}</span>
+      </div>
+    </>
+  );
+}
+
+export default LoadingOverlay;

src/components/Sidebar/Sidebar.css

@@ -41,38 +41,6 @@
   padding-inline: var(--space-3);
 }
 
-.sidebar-app-name {
-  display: flex;
-  align-items: center;
-  aspect-ratio: 1;
-  height: calc(var(--header-height) * 0.7);
-
-  font-size: var(--font-md);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-
-  white-space: nowrap;
-  overflow: hidden;
-
-  flex: 0 1 auto;
-  min-width: 0;
-
-  opacity: 0;
-  max-width: 0;
-  pointer-events: none;
-
-  transition:
-    opacity var(--dur-fast) var(--ease-standard),
-    max-width var(--dur-base) var(--ease-standard);
-}
-
-.sidebar-rail--expanded .sidebar-app-name {
-  opacity: 1;
-  max-width: 200px;
-  pointer-events: auto;
-  transition-delay: var(--dur-fast);
-}
-
 .sidebar-toggle {
   display: flex;
   align-items: center;
@@ -113,6 +81,135 @@
   transform: rotate(180deg);
 }
 
+.sidebar-app-combobox {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+
+  opacity: 0;
+  max-width: 0;
+  pointer-events: none;
+
+  transition:
+    opacity var(--dur-fast) var(--ease-standard),
+    max-width var(--dur-base) var(--ease-standard);
+}
+
+.sidebar-rail--expanded .sidebar-app-combobox {
+  opacity: 1;
+  max-width: 200px;
+  pointer-events: auto;
+  transition-delay: var(--dur-fast);
+}
+
+.sidebar-app-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+
+  height: calc(var(--header-height) * 0.6);
+  padding: 0 var(--space-2);
+
+  background: var(--bg-panel);
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  font-size: var(--font-xs);
+  font-weight: var(--font-weight-semibold);
+
+  cursor: pointer;
+  transition: border-color var(--dur-base) var(--ease-standard);
+}
+
+.sidebar-app-trigger:hover,
+.sidebar-app-trigger--open {
+  border-color: var(--accent-brand);
+}
+
+.sidebar-app-trigger-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-app-trigger-caret {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform var(--dur-base) var(--ease-standard);
+}
+
+.sidebar-app-trigger--open .sidebar-app-trigger-caret {
+  transform: rotate(180deg);
+}
+
+.sidebar-app-input {
+  width: 100%;
+  height: calc(var(--header-height) * 0.6);
+  padding: 0 var(--space-2);
+
+  background: var(--bg-panel);
+  border: var(--border-width) solid var(--accent-brand);
+  border-radius: var(--radius-sm);
+
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  font-size: var(--font-xs);
+  font-weight: var(--font-weight-semibold);
+
+  outline: none;
+}
+
+.sidebar-app-listbox {
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  left: 0;
+  right: 0;
+  z-index: 40;
+
+  margin: 0;
+  padding: var(--space-1);
+  list-style: none;
+
+  background: var(--bg-panel);
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.sidebar-app-option {
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-xs);
+  color: var(--text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-app-option--highlight {
+  background: var(--bg-raised);
+}
+
+.sidebar-app-option--selected {
+  color: var(--accent-brand);
+  font-weight: var(--font-weight-semibold);
+}
+.sidebar-rail--expanded .sidebar-app-select {
+  opacity: 1;
+  max-width: 200px;
+  padding-inline: var(--space-2);
+  pointer-events: auto;
+  transition-delay: var(--dur-fast);
+}
+
 /* ---------- Scroll ---------- */
 
 .sidebar-scroll {
@@ -264,132 +361,3 @@
 .app-root--sidebar-expanded .stage--with-sidebar {
   margin-left: var(--sidebar-width-expanded);
 }
-
-.sidebar-app-combobox {
-  position: relative;
-  flex: 1 1 auto;
-  min-width: 0;
-
-  opacity: 0;
-  max-width: 0;
-  pointer-events: none;
-
-  transition:
-    opacity var(--dur-fast) var(--ease-standard),
-    max-width var(--dur-base) var(--ease-standard);
-}
-
-.sidebar-rail--expanded .sidebar-app-combobox {
-  opacity: 1;
-  max-width: 200px;
-  pointer-events: auto;
-  transition-delay: var(--dur-fast);
-}
-
-.sidebar-app-trigger {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-
-  height: calc(var(--header-height) * 0.6);
-  padding: 0 var(--space-2);
-
-  background: var(--bg-panel);
-  border: var(--border-width) solid var(--border-hairline);
-  border-radius: var(--radius-sm);
-
-  color: var(--text-primary);
-  font-family: var(--font-ui);
-  font-size: var(--font-xs);
-  font-weight: var(--font-weight-semibold);
-
-  cursor: pointer;
-  transition: border-color var(--dur-base) var(--ease-standard);
-}
-
-.sidebar-app-trigger:hover,
-.sidebar-app-trigger--open {
-  border-color: var(--accent-brand);
-}
-
-.sidebar-app-trigger-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sidebar-app-trigger-caret {
-  flex-shrink: 0;
-  color: var(--text-muted);
-  transition: transform var(--dur-base) var(--ease-standard);
-}
-
-.sidebar-app-trigger--open .sidebar-app-trigger-caret {
-  transform: rotate(180deg);
-}
-
-.sidebar-app-input {
-  width: 100%;
-  height: calc(var(--header-height) * 0.6);
-  padding: 0 var(--space-2);
-
-  background: var(--bg-panel);
-  border: var(--border-width) solid var(--accent-brand);
-  border-radius: var(--radius-sm);
-
-  color: var(--text-primary);
-  font-family: var(--font-ui);
-  font-size: var(--font-xs);
-  font-weight: var(--font-weight-semibold);
-
-  outline: none;
-}
-
-.sidebar-app-listbox {
-  position: absolute;
-  top: calc(100% + var(--space-1));
-  left: 0;
-  right: 0;
-  z-index: 40;
-
-  margin: 0;
-  padding: var(--space-1);
-  list-style: none;
-
-  background: var(--bg-panel);
-  border: var(--border-width) solid var(--border-hairline);
-  border-radius: var(--radius-sm);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.sidebar-app-option {
-  padding: var(--space-2);
-  border-radius: var(--radius-sm);
-  font-size: var(--font-xs);
-  color: var(--text-primary);
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sidebar-app-option--highlight {
-  background: var(--bg-raised);
-}
-
-.sidebar-app-option--selected {
-  color: var(--accent-brand);
-  font-weight: var(--font-weight-semibold);
-}
-.sidebar-rail--expanded .sidebar-app-select {
-  opacity: 1;
-  max-width: 200px;
-  padding-inline: var(--space-2);
-  pointer-events: auto;
-  transition-delay: var(--dur-fast);
-}

src/pages/DspPage/DspPage.css

@@ -2,12 +2,24 @@
   position: fixed;
   left: var(--sidebar-width-collapsed);
   right: 0;
-  top: 0;
   bottom: 0;
   transition: left var(--dur-base) var(--ease-standard);
-  top: var(--header-height, 0);
+  top: var(--header-height);
 }
 
 .app-root:has(.sidebar-rail--expanded) .dsp-content {
   left: var(--sidebar-width-expanded);
 }
+
+.dsp-loading-overlay {
+  position: fixed;
+  left: var(--sidebar-width-collapsed);
+  right: 0;
+  top: var(--header-height, 0);
+  bottom: 0;
+  transition: left var(--dur-base) var(--ease-standard);
+}
+
+.app-root:has(.sidebar-rail--expanded) .dsp-loading-overlay {
+  left: var(--sidebar-width-expanded);
+}

src/pages/DspPage/DspPage.tsx

@@ -8,6 +8,7 @@ import { NotificationType } from '../../types/types';
 import './DspPage.css';
 import GateSection from '../../components/dsp408/GateSection/GateSection';
 import { invoke } from '@tauri-apps/api/core';
+import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 
 function DSPPage({
   dsp,
@@ -22,7 +23,8 @@ function DSPPage({
 }) {
   const [activeSidebar, setActiveSidebar] = useState('overview');
   const [sidebarExpanded, setSidebarExpanded] = useState(false);
-
+  const [selectedPreset, setSelectedPreset] = useState(dsp.state?.presets.current_index ?? 0);
+  const [presetLoading, setPresetLoading] = useState(false);
   const sidebarItems = [
     {
       id: 'overview',
@@ -130,11 +132,18 @@ function DSPPage({
       icon: <KnobGainIcon />,
     },
   ];
-
+  const presets = dsp.state?.presets.names
-  const presets = dsp.state?.presets.names?.map((name, index) => ({
+    ? [
-    id: index === 0 ? 'f00' : `u${String(index).padStart(2, '0')}`,
+        {
+          id: 'f00',
+          name: 'Factory Preset',
+        },
+        ...dsp.state.presets.names.map((name, index) => ({
+          id: `u${String(index + 1).padStart(2, '0')}`,
           name,
-  })) ?? [
+        })),
+      ]
+    : [
         {
           id: 'f00',
           name: 'Factory Preset',
@@ -144,7 +153,6 @@ function DSPPage({
           name: 'Default Preset',
         })),
       ];
-  const selectedPreset = dsp.state?.presets.current_index ?? 0;
 
   const recallPreset = async (presetIndex: number) => {
     try {
@@ -166,6 +174,38 @@ function DSPPage({
     }
   };
 
+  const setCurrentPresetName = async (name: string) => {
+    try {
+      const success = await invoke<boolean>('set_current_preset_name', {
+        id: dsp.id,
+        name,
+      });
+
+      if (success) {
+        notify(`Preset renamed`, 'success', dsp.name);
+      } else {
+        notify('Failed to rename preset', 'error', dsp.name);
+      }
+
+      return success;
+    } catch (err) {
+      notify(`Preset rename failed: ${String(err)}`, 'error', dsp.name);
+      return false;
+    }
+  };
+
+  const onAppChange = async (id: string) => {
+    const presetIndex = presets.findIndex((preset) => preset.id === id);
+    if (presetIndex === -1) return;
+
+    setPresetLoading(true);
+    const success = await recallPreset(presetIndex);
+    if (success) {
+      setSelectedPreset(presetIndex);
+    }
+    setPresetLoading(false);
+  };
+
   const renderTab = () => {
     switch (activeSidebar) {
       case 'overview':
@@ -191,18 +231,19 @@ function DSPPage({
         appName={dsp.name}
         appOptions={presets}
         selectedAppId={presets[selectedPreset]?.id}
-        onAppChange={(id) => {
+        onAppChange={onAppChange}
-          const presetIndex = presets.findIndex((preset) => preset.id === id);
+        onAppRename={setCurrentPresetName}
-
-          if (presetIndex !== -1) {
-            recallPreset(presetIndex);
-          }
-        }}
         expanded={sidebarExpanded}
         onToggle={() => setSidebarExpanded((v) => !v)}
       />
 
+      <LoadingOverlay
+        active={presetLoading}
+        label="Recalling preset…"
+        overlayClassName="dsp-loading-overlay"
+      >
         <div className="dsp-content">{renderTab()}</div>
+      </LoadingOverlay>
     </div>
   );
 }