feature: accurately refelct switch state in the render

src/main/ipc/initialize-device-config-ipc.ts

@@ -32,7 +32,6 @@ ipcMain.on(
     const driver = getDriver(driverName || deviceName) || Anonymous;
     const conf = configFromDriver(deviceName, siblingIdx, driver);
 
-    DeviceRegistry.register(conf.id, conf);
     HardwarePortService.onConfigChange({ action: 'add', changed: [conf] });
     VirtualPortService.onConfigChange({ action: 'add', changed: [conf] });
 

src/main/ipc/initialize-input-config-ipc.ts

@@ -8,7 +8,6 @@ import { getQualifiedInputId } from '@shared/util';
 import { PluginManifest } from '@shared/plugin-core/plugin-manifest';
 import { BaseInputPlugin } from '@shared/plugin-core/base-input-plugin';
 import { importInputSubcomponent } from '@plugins/plugin-loader';
-import { MonoInputConfig } from '@shared/hardware-config/input-config/mono-input-config';
 
 import { INPUT_CONFIG } from './ipc-channels';
 import { WindowProvider } from '../window-provider';
@@ -25,8 +24,7 @@ ipcMain.on(
     const onClick = async (m: PluginManifest) => {
       const input = InputRegistry.get(qualifiedInputId);
 
-      if (!(input instanceof MonoInputConfig))
-        throw new Error(`Adding plugin to ${input} is not defined`);
+      if (!input) throw new Error(`Adding plugin to ${input} is not defined`);
 
       const inputDriver = input.driver;
       const Plugin = await importInputSubcomponent(m.title, 'plugin');
@@ -52,12 +50,13 @@ ipcMain.on(
   (_e: IpcMainEvent, pluginId: string, qualifiedInputId: string) => {
     const inputConfig = InputRegistry.get(qualifiedInputId);
 
-    if (inputConfig instanceof MonoInputConfig) {
-      inputConfig.plugins = inputConfig.plugins.filter((p) => p !== pluginId);
+    if (!inputConfig)
+      throw new Error(`no such config for id ${qualifiedInputId}`);
 
-      PluginRegistry.deregister(pluginId);
-      MainWindow.upsertInputConfig(inputConfig.toDTO());
-    }
+    inputConfig.plugins = inputConfig.plugins.filter((p) => p !== pluginId);
+
+    PluginRegistry.deregister(pluginId);
+    MainWindow.upsertInputConfig(inputConfig.toDTO());
   }
 );
 

src/main/port-service/index.ts

@@ -237,7 +237,6 @@ export class HardwarePortServiceSingleton {
 
         if (message) remoteTransport.send(message);
 
-        console.log(config.id, inputId);
         MainWindow.sendRemoteMessage(config.id, inputId, msg);
       });
     }

src/renderer/components/DevicePanel/DeviceLayout/InputGridLayout.tsx

@@ -6,7 +6,7 @@ type PropTypes = {
   grid: InputGridDriver;
   deviceWidth: number;
   deviceHeight: number;
-  onClick: (e: React.MouseEvent, ids: string[]) => void;
+  onClick: (e: React.MouseEvent, id: string) => void;
 };
 
 const InputGridLayout = (props: PropTypes) => {

src/renderer/components/DevicePanel/DeviceLayout/InputLayout/InteractiveInputLayout/SwitchLayout.tsx

@@ -15,7 +15,6 @@ export function SwitchLayout(props: PropTypes) {
 
   const { steps } = driver;
   const recentMessages = useAppSelector(selectRecentRemoteMessagesById(id, 1));
-  console.log(recentMessages);
 
   const step = useMemo(() => {
     if (!recentMessages.length) return driver.initialStep;

src/renderer/components/DevicePanel/DeviceLayout/InputLayout/index.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 
-import { selectSelectedInputs } from '@features/selected-inputs/selected-inputs-slice';
+import { selectSelectedInput } from '@features/selected-input/selected-input-slice';
 import { inputIdFromDriver, getQualifiedInputId } from '@shared/util';
 import { selectSelectedDevice } from '@selectors/selected-device-selector';
 import { BaseInputDriver } from '@shared/driver-types/input-drivers/base-input-driver';
@@ -13,24 +13,24 @@ type InputLayoutPropTypes = {
   driver: BaseInputDriver;
   width: string;
   height: string;
-  onClick: (e: React.MouseEvent, ids: string[]) => void;
+  onClick: (e: React.MouseEvent, id: string) => void;
 };
 
 export default function InputLayout(props: InputLayoutPropTypes) {
   const { driver, width, height, onClick } = props;
   const selectedDevice = useSelector(selectSelectedDevice);
-  const selectedInputs = useSelector(selectSelectedInputs);
+  const selectedInput = useSelector(selectSelectedInput);
 
   let Element;
   if (driver.interactive) {
     const inputId = inputIdFromDriver(driver as InteractiveInputDriver);
     const qualifiedInputId = getQualifiedInputId(selectedDevice!.id, inputId);
-    const focus = selectedInputs.includes(qualifiedInputId);
+    const focus = selectedInput === qualifiedInputId;
 
     Element = (
       <div
         className={`input-wrapper ${focus ? 'focus' : ''}`}
-        onClick={(e: React.MouseEvent) => onClick(e, [qualifiedInputId])}
+        onClick={(e: React.MouseEvent) => onClick(e, qualifiedInputId)}
         role="presentation"
         style={{
           width,

src/renderer/components/DevicePanel/DeviceLayout/index.tsx

@@ -5,7 +5,7 @@ import InputGridLayout from './InputGridLayout';
 
 type PropTypes = {
   driver: DeviceDriver;
-  onClick: (e: React.MouseEvent, ids: string[]) => void;
+  onClick: (e: React.MouseEvent, id: string) => void;
 };
 
 export default function DeviceLayout(props: PropTypes) {

src/renderer/components/DevicePanel/DeviceLayoutWrapper.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { useAppDispatch } from '@hooks/use-app-dispatch';
 import { DeviceDriver } from '@shared/driver-types/device-driver';
-import { setSelectedInputs } from '@features/selected-inputs/selected-inputs-slice';
+import { setSelectedInput } from '@features/selected-input/selected-input-slice';
 
 import DeviceLayout from './DeviceLayout';
 import WarningIcon from '../WarningIcon';
@@ -23,8 +23,8 @@ export default function DeviceLayoutWrapper(
 
   // on input click (or ctrl+click) update selectedInputs
   const onInputSelect = useCallback(
-    (_event: React.MouseEvent, ids: string[]) => {
-      dispatch(setSelectedInputs(ids));
+    (_event: React.MouseEvent, id: string) => {
+      dispatch(setSelectedInput(id));
     },
     [dispatch]
   );

src/renderer/components/InputConfigDrawer/InputConfigPanel/InputDefaultsSubpanel/index.tsx

@@ -1,22 +1,19 @@
-import { MonoInputDTO } from '@shared/hardware-config/input-config/mono-input-dto';
-import { MonoInputAggregate } from '../mono-input-aggregate';
+import { InputDTO } from '@shared/hardware-config/input-config/base-input-config';
 
 type PropTypes = {
-  inputs: MonoInputDTO[];
+  input: InputDTO;
 };
 
 export default function InputDefaultsSubpanel(props: PropTypes) {
-  const { inputs } = props;
-
-  const group = new MonoInputAggregate(inputs);
+  const { input } = props;
 
   return (
     <div className="subpanel input-defaults-subpanel">
       <h1>Default MIDI Settings</h1>
-      <p>Output Response: {group.outputResponse}</p>
-      <p>Event Type: {group.statusString}</p>
-      <p>Channel: {group.channel}</p>
-      <p>Number: {group.number}</p>
+      <p>Output Response: {input.defaults.response}</p>
+      <p>Event Type: {input.defaults.statusString}</p>
+      <p>Channel: {input.defaults.channel}</p>
+      <p>Number: {input.defaults.number}</p>
     </div>
   );
 }

src/renderer/components/InputConfigDrawer/InputConfigPanel/InputDetailsSubpanel.tsx

@@ -1,49 +1,38 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import { InputDTO } from '@shared/hardware-config/input-config/base-input-config';
 
 import ControlledInput from '../../ControlledInput';
 import SectionHeader from '../../SectionHeader';
 
 type PropTypes = {
-  configs: InputDTO[];
+  input: InputDTO;
 };
 
 const { InputConfigService } = window;
 
 export default function InputDetailsSubpanel(props: PropTypes) {
-  const { configs } = props;
+  const { input } = props;
 
-  const name = useMemo(() => {
-    return configs.length > 1
-      ? `${configs.length} Inputs Selected`
-      : `Input: ${configs[0].nickname || configs[0].id}`;
-  }, [configs]);
-
-  const nickname = useMemo(() => {
-    return configs.length > 1 ? '' : configs[0].nickname;
-  }, [configs]);
+  const name = `Input: ${input.nickname || input.id}`;
+  const { nickname } = input;
 
   const onChange = useCallback(
     (n: string) => {
       const newConf = {
-        ...configs[0],
+        ...input,
         nickname: n,
       };
       InputConfigService.updateInputs([newConf]);
     },
-    [configs]
+    [input]
   );
 
   return (
     <div className="details-panel input-details-panel">
       <div>
         <SectionHeader title="INPUT SETTINGS" size="large" />
-        <div
-          className={`subpanel nickname-subpanel ${
-            configs.length !== 1 ? 'deactivated' : ''
-          }`}
-        >
+        <div className="subpanel nickname-subpanel">
           <div className="nickname-display">
             <h1>{name}</h1>
           </div>

src/renderer/components/InputConfigDrawer/InputConfigPanel/MonoInputConfigSubpanel/index.tsx

@@ -1,24 +1,22 @@
 import { useCallback } from 'react';
 
-import { MonoInputDTO } from '@shared/hardware-config/input-config/mono-input-dto';
 import { importInputSubcomponent } from '@plugins/plugin-loader';
 import { getQualifiedInputId } from '@shared/util';
+import { InputDTO } from '@shared/hardware-config/input-config/base-input-config';
 
 import PluginSubpanel from 'renderer/components/PluginSubpanel';
 
 import InputDefaultsSubpanel from '../InputDefaultsSubpanel';
 
 type PropTypes = {
-  inputs: MonoInputDTO[];
+  input: InputDTO;
   deviceId: string;
 };
 
 const { InputConfigService } = window;
 
 export default function MonoInputConfigPanel(props: PropTypes) {
-  const { inputs, deviceId } = props;
-
-  const input = inputs[0];
+  const { input, deviceId } = props;
 
   const showPluginMenu = useCallback(
     (x: number, y: number) => {
@@ -43,12 +41,12 @@ export default function MonoInputConfigPanel(props: PropTypes) {
 
   return (
     <div>
-      <InputDefaultsSubpanel inputs={inputs} />
+      <InputDefaultsSubpanel input={input} />
       <PluginSubpanel
         plugins={input.plugins}
         removePlugin={removePlugin}
         showPluginMenu={showPluginMenu}
-        showAddPlugin={inputs.length === 1}
+        showAddPlugin={true}
         deviceId={deviceId}
         importPlugin={(title) => importInputSubcomponent(title, 'gui')}
       />