home assistant lights and other tweaks

webui/src/components/GamepadMappingSettings.jsx

@@ -151,9 +151,13 @@ export default function GamepadMappingSettings() {
     }, {});
   }, []);
 
-  const getValueLabel = (action) => {
+  const getStored = (action) => {
     const [group, key] = action.path;
-    const stored = mapping?.[group]?.[key] ?? null;
+    return mapping?.[group]?.[key] ?? null;
+  };
+
+  const getValueLabel = (action) => {
+    const stored = getStored(action);
     return action.type === 'axis' ? formatAxis(stored) : formatButton(stored);
   };
 
@@ -161,6 +165,17 @@ export default function GamepadMappingSettings() {
     save((prev) => updatePath(prev, action.path, () => null));
   };
 
+  const handleInvert = (action) => {
+    const stored = getStored(action);
+    if (!stored) return;
+    save((prev) =>
+      updatePath(prev, action.path, (current) => ({
+        ...current,
+        invert: !current?.invert,
+      })),
+    );
+  };
+
   return (
     <section className="panel-section space-y-0.5 text-sm">
       <div className="flex items-center justify-between">
@@ -232,6 +247,20 @@ export default function GamepadMappingSettings() {
                     <p className="text-[0.65rem] text-slate-400">{getValueLabel(action)}</p>
                   </div>
                   <div className="flex items-center gap-0.5">
+                    {action.type === 'axis' && (
+                      <button
+                        type="button"
+                        disabled={!getStored(action)}
+                        onClick={() => handleInvert(action)}
+                        className={`${
+                          getStored(action)?.invert
+                            ? 'px-0.5 py-0.5 bg-amber-400 text-amber-900 hover:bg-amber-300'
+                            : 'button-dark'
+                        } text-[0.7rem] font-medium disabled:opacity-50 disabled:cursor-not-allowed`}
+                      >
+                        Invert
+                      </button>
+                    )}
                     <button type="button" onClick={() => handleClear(action)} className="button-dark text-[0.7rem]">
                       Clear
                     </button>