Cleanup controller lighting panel code (#10)

* cleanup custom hook usage

* move rgb components into folder

* move controller components into folder

* more code cleanup

* extract rgb per games toggle

* refactor rgb settings into reusable component

src/components/IconRow.tsx

@@ -1,5 +1,5 @@
-import { PanelSectionRow, Field, Focusable } from 'decky-frontend-lib';
-import { FC, ReactNode } from 'react';
+import { PanelSectionRow, Focusable } from 'decky-frontend-lib';
+import { FC } from 'react';
 import { M1 } from '../svgs/M1';
 import { M2 } from '../svgs/M2';
 import { M3 } from '../svgs/M3';

src/components/RemapActionDropdown.tsx → src/components/controller/RemapActionDropdown.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
 import { DropdownItem } from 'decky-frontend-lib';
-import { RemapActions, RemappableButtons } from '../backend/constants';
-import { useRemapAction } from '../hooks/controller';
+import { RemapActions, RemappableButtons } from '../../backend/constants';
+import { useRemapAction } from '../../hooks/controller';
 
 type PropType = {
-  label: string;
   btn: RemappableButtons;
-  description?: string;
 };
 
-const RemapActionDropdown: FC<PropType> = ({ label, btn }) => {
+const RemapActionDropdown: FC<PropType> = ({ btn }) => {
   const { remapAction, setRemapAction } = useRemapAction(btn);
   const dropdownOptions = Object.values(RemapActions).map((action) => {
     return {

src/components/RemapButtons.tsx → src/components/controller/RemapButtons.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react';
-import { RemappableButtons } from '../backend/constants';
+import { RemappableButtons } from '../../backend/constants';
 import RemapActionDropdown from './RemapActionDropdown';
 import { PanelSection, PanelSectionRow, ToggleField } from 'decky-frontend-lib';
 import {
   useControllerPerGameEnabled,
   useControllerProfileDisplayName
-} from '../hooks/controller';
-import { IconMap, IconRow } from './IconRow';
+} from '../../hooks/controller';
+import { IconRow } from '../IconRow';
 
 const RemapButtons: FC = () => {
   const btns = Object.values(RemappableButtons);
@@ -33,7 +33,7 @@ const RemapButtons: FC = () => {
       {btns.map((btn, idx) => {
         return (
           <IconRow btn={btn}>
-            <RemapActionDropdown label={`${btn}`} btn={btn} key={idx} />
+            <RemapActionDropdown btn={btn} key={idx} />
           </IconRow>
         );
       })}

src/components/rgb/ControllerLightingPanel.tsx

@@ -0,0 +1,46 @@
+import { ToggleField, PanelSection, ServerAPI } from 'decky-frontend-lib';
+import { VFC } from 'react';
+import { useState } from 'react';
+import { useRgbProfileDisplayName } from '../../hooks/rgb';
+import { RgbPerGameProfilesToggle } from './RgbPerGameProfilesToggle';
+import { RgbSettings } from './RgbSettings';
+
+const DEFAULT_STATE = {
+  isTouchpad: true
+};
+
+const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
+  serverAPI
+}) => {
+  const displayName = useRgbProfileDisplayName();
+  const [isTouchpad, setIsTouchpad] = useState(DEFAULT_STATE.isTouchpad);
+
+  const TPadToggleChange = (value: boolean) => {
+    setIsTouchpad(value);
+    console.log(`Toggle value: ${value}`);
+    serverAPI!.callPluginMethod('set_touchpad', { enable: value });
+  };
+
+  let title =
+    displayName === 'Default'
+      ? 'Controller Lighting - Default'
+      : `Controller Lighting - ${displayName.substring(0, 10)}...`;
+
+  return (
+    <PanelSection title={title}>
+      <div>
+        <RgbPerGameProfilesToggle />
+        <RgbSettings controller="RIGHT" />
+        <RgbSettings controller="LEFT" />
+
+        <ToggleField
+          label="Touchpad"
+          checked={isTouchpad}
+          onChange={(value) => TPadToggleChange(value)}
+        ></ToggleField>
+      </div>
+    </PanelSection>
+  );
+};
+
+export default ControllerLightingPanel;

src/components/RgbModeSlider.tsx → src/components/rgb/RgbModeSlider.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { SliderField, NotchLabel } from 'decky-frontend-lib';
-import { ControllerType } from '../backend/constants';
-import { useRgbMode } from '../hooks/rgb';
+import { ControllerType } from '../../backend/constants';
+import { useRgbMode } from '../../hooks/rgb';
 
 enum Mode {
   SOLID = 0,