feat: implement colour picker

apps/client/src/common/components/view-params-editor/InlineColourPicker.module.scss

@@ -0,0 +1,27 @@
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+// attempt to match with ontimeTextInputs
+.input {
+  color: $gray-200;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background-color: $gray-1200;
+  padding: 0 1rem;
+  font-size: 1rem;
+  height: 2.5rem;
+  outline: none;
+
+  &:hover {
+    background-color: $gray-1100;
+  }
+
+  &:focus {
+    background-color: $gray-1000;
+    color: $gray-50;
+    border: 1px solid $blue-500;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import PopoverPicker from '../input/popover-picker/PopoverPicker';
+
+import style from './InlineColourPicker.module.scss';
+
+interface InlineColourPickerProps {
+  name: string;
+  value: string;
+}
+
+const ensureHex = (value: string) => {
+  if (!value.startsWith('#')) {
+    return `#${value}`;
+  }
+  return value;
+};
+
+export default function InlineColourPicker(props: InlineColourPickerProps) {
+  const { name, value } = props;
+  const [colour, setColour] = useState(() => ensureHex(value));
+
+  const debouncedChange = (value: string) => {
+    setColour(value);
+  };
+
+  return (
+    <div className={style.inline}>
+      <PopoverPicker color={colour} onChange={debouncedChange} />
+      <input type='hidden' name={name} value={colour} />
+    </div>
+  );
+}

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

@@ -16,6 +16,7 @@ import {
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
+import InlineColourPicker from './InlineColourPicker';
 import { ParamField } from './types';
 
 interface EditFormInputProps {
@@ -23,8 +24,8 @@ interface EditFormInputProps {
 }
 
 export default function ParamInput(props: EditFormInputProps) {
-  const [searchParams] = useSearchParams();
   const { paramField } = props;
+  const [searchParams] = useSearchParams();
   const { id, type, defaultValue } = paramField;
 
   if (type === 'persist') {
@@ -84,12 +85,7 @@ 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>
-    );
+    return <InlineColourPicker name={id} value={currentvalue} />;
   }
 
   const defaultStringValue = searchParams.get(id) ?? defaultValue;

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

@@ -50,10 +50,13 @@ 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) {
+    if (typeof value === 'string' && value.length) {
       // we dont know which values contain colours
       // unfortunately this means we run all the strings through the sanitation
-      newSearchParams.set(id, sanitiseColour(value));
+      const valueWithoutHash = sanitiseColour(value);
+      if (defaultValues[id] !== valueWithoutHash) {
+        newSearchParams.set(id, valueWithoutHash);
+      }
     }
   });
   return newSearchParams;