tidy up coalescing settings

Author: tariknz

src/frontend/components/Input/InputBar/InputBar.tsx

@@ -8,18 +8,27 @@ const INPUT_CONFIG = [
   { key: 'throttle', color: getColor('green') }
 ] as const;
 
-export interface InputTraceProps {
+export interface InputBarProps {
   brake?: number;
   throttle?: number;
   clutch?: number;
-  settings: {
+  settings?: {
     includeClutch: boolean;
     includeBrake: boolean;
     includeThrottle: boolean;
   };
 }
 
-export const InputBar = ({ brake, throttle, clutch, settings }: InputTraceProps) => {
+export const InputBar = ({
+  brake,
+  throttle,
+  clutch,
+  settings = {
+    includeClutch: true,
+    includeBrake: true,
+    includeThrottle: true,
+  },
+}: InputBarProps) => {
   const svgRef = useRef<SVGSVGElement>(null);
 
   useEffect(() => {

src/frontend/components/Input/InputContainer/InputContainer.tsx

@@ -27,10 +27,26 @@ export const InputContainer = ({
 }: InputProps) => {
   return (
     <div className="w-full h-full inline-flex gap-1 p-2 flex-row bg-slate-800/50">
-      {settings?.trace.enabled && <InputTrace input={{ brake, throttle }} settings={settings.trace} />}
-      {settings?.bar.enabled && <InputBar brake={brake} throttle={throttle} clutch={clutch} settings={settings.bar} />}
-      {settings?.gear.enabled && <InputGear gear={gear} speedMs={speed} unit={unit} settings={settings.gear} />}
-      {settings?.steer?.enabled && <InputSteer angleRad={steer} />}
+      {(settings?.trace?.enabled ?? true) && (
+        <InputTrace input={{ brake, throttle }} settings={settings?.trace} />
+      )}
+      {(settings?.bar?.enabled ?? true) && (
+        <InputBar
+          brake={brake}
+          throttle={throttle}
+          clutch={clutch}
+          settings={settings?.bar}
+        />
+      )}
+      {(settings?.gear?.enabled ?? true) && (
+        <InputGear
+          gear={gear}
+          speedMs={speed}
+          unit={unit}
+          settings={settings?.gear}
+        />
+      )}
+      {(settings?.steer?.enabled ?? true) && <InputSteer angleRad={steer} />}
     </div>
   );
 };

src/frontend/components/Input/InputGear/InputGear.tsx

@@ -2,13 +2,19 @@ export interface InputGearProps {
   gear?: number;
   speedMs?: number;
   unit?: number;
-  settings: {
+  settings?: {
     unit: 'mph' | 'km/h' | 'auto';
   };
 }
 
-export const InputGear = ({ gear, speedMs, unit, settings }: InputGearProps) => {
-  const isMetric = (unit === 1 && settings.unit === 'auto') || settings.unit === 'km/h';
+export const InputGear = ({
+  gear,
+  speedMs,
+  unit,
+  settings = { unit: 'auto' },
+}: InputGearProps) => {
+  const isMetric =
+    (unit === 1 && settings.unit === 'auto') || settings.unit === 'km/h';
   const speed = (speedMs ?? 0) * (isMetric ? 3.6 : 2.23694);
   const displayUnit = isMetric ? 'km/h' : 'mph';
   let gearText = '';

src/frontend/components/Input/InputTrace/InputTrace.tsx

@@ -1,22 +1,25 @@
 import * as d3 from 'd3';
 import { useEffect, useRef, useState } from 'react';
-import tailwindColors from 'tailwindcss/colors';
+import { getColor } from '@irdashies/utils/colors';
 
-const BRAKE_COLOR = tailwindColors.red['500'];
-const THROTTLE_COLOR = tailwindColors.green['500'];
+const BRAKE_COLOR = getColor('red');
+const THROTTLE_COLOR = getColor('green');
 
 export interface InputTraceProps {
   input: {
     brake?: number;
     throttle?: number;
   };
-  settings: {
+  settings?: {
     includeThrottle?: boolean;
     includeBrake?: boolean;
   };
 }
 
-export const InputTrace = ({ input, settings }: InputTraceProps) => {
+export const InputTrace = ({
+  input,
+  settings = { includeThrottle: true, includeBrake: true },
+}: InputTraceProps) => {
   const { includeThrottle, includeBrake } = settings;
   const svgRef = useRef<SVGSVGElement>(null);
   const { width, height } = { width: 400, height: 100 };