refactor: param type colour

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -81,6 +81,17 @@ export default function ParamInput(props: EditFormInputProps) {
     );
   }
 
+  if (type === 'colour') {
+    const currentvalue = `#${searchParams.get(id) ?? defaultValue}`;
+
+    return (
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <Input type='color' variant='ontime-filled' name={id} defaultValue={currentvalue} />
+        <span>{`Current colour: ${currentvalue.toUpperCase()}`}</span>
+      </div>
+    );
+  }
+
   const defaultStringValue = searchParams.get(id) ?? defaultValue;
   const { prefix, placeholder } = paramField;
 

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -19,6 +19,16 @@ import style from './ViewParamsEditor.module.scss';
 
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 
+/**
+ * Utility remove the # character from a hex string
+ */
+function sanitiseColour(colour: string) {
+  if (colour.startsWith('#')) {
+    return colour.substring(1);
+  }
+  return colour;
+}
+
 /**
  * Makes a new URLSearchParams object from the given params object
  */
@@ -41,7 +51,9 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOp
   // compare which values are different from the default values
   Object.entries(paramsObj).forEach(([id, value]) => {
     if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
-      newSearchParams.set(id, value);
+      // we dont know which values contain colours
+      // unfortunately this means we run all the strings through the sanitation
+      newSearchParams.set(id, sanitiseColour(value));
     }
   });
   return newSearchParams;

apps/client/src/common/components/view-params-editor/types.ts

@@ -23,10 +23,11 @@ type MultiOptionsField = {
 type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
+type ColourField = { type: 'colour'; defaultValue: string; placeholder?: string };
 type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
 
 export type ParamField = BaseField &
-  (StringField | BooleanField | NumberField | OptionsField | MultiOptionsField | PersistedField);
+  (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);
 export type ViewOption = ParamSection | ParamField;
 
 /**