adding "unkown" color to swatch

apps/client/src/common/components/input/colour-input/Swatch.tsx

@@ -25,5 +25,11 @@ export default function Swatch(props: SwatchProps) {
       </div>
     );
   }
+
+  if (color === 'unkown') {
+    <div className={`${classes} ${style.center}`} onClick={handleClick}>
+      ?
+    </div>;
+  }
   return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={handleClick} />;
 }

apps/client/src/common/components/input/colour-input/SwatchSelect.tsx

@@ -8,10 +8,12 @@ interface ColourInputProps {
   value: string;
   name: 'colour';
   handleChange: (newValue: 'colour', name: string) => void;
+  isMultiple?: boolean;
 }
 
 const colours = [
   '',
+  'unkown',
   '#FFCC78', // $orange-400
   '#FFAB33', // $orange-600
   '#77C785', // $green-400
@@ -27,7 +29,7 @@ const colours = [
 ];
 
 export default function SwatchSelect(props: ColourInputProps) {
-  const { value, name, handleChange } = props;
+  const { value, name, handleChange, isMultiple } = props;
 
   const setColour = useCallback(
     (newValue: string) => {
@@ -40,9 +42,15 @@ export default function SwatchSelect(props: ColourInputProps) {
 
   return (
     <div className={style.list}>
-      {colours.map((colour) => (
-        <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
-      ))}
+      {colours
+        .filter((colour) => {
+          // Only include unkown if it is multiple
+          if (!isMultiple && colour === 'unkown') return false;
+          return true;
+        })
+        .map((colour) => (
+          <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
+        ))}
     </div>
   );
 }

apps/client/src/features/rundown/event-editor/EventEditor.tsx

@@ -65,6 +65,7 @@ export default function EventEditor({ event, handleSubmit, isMultiple }: EventEd
           note={event.note}
           colour={event.colour}
           handleSubmit={handleSubmit}
+          isMultiple={isMultiple}
         />
         <div className={style.column}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

apps/client/src/features/rundown/event-editor/EventEditorWrapper.tsx

@@ -15,7 +15,7 @@ import useRundown from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
 
 import style from './EventEditor.module.scss';
-import EventEditorTest from './EventEditor';
+import EventEditor from './EventEditor';
 
 export type EventEditorSubmitActions = keyof OntimeEvent;
 
@@ -27,7 +27,6 @@ export default function EventEditorWrapper() {
   const { order, rundown } = data;
   const { updateEvent } = useEventAction();
   const [_searchParams] = useSearchParams();
-  console.log({ selectedEvents, order }, 'size: ', selectedEvents.size);
 
   const [event, setEvent] = useState<OntimeEvent | null>(null);
 
@@ -132,9 +131,9 @@ export default function EventEditorWrapper() {
   return (
     <div className={style.eventEditor} data-testid='editor-container'>
       {selectedEvents.size <= 1 ? (
-        <EventEditorTest event={event} handleSubmit={handleSingleSubmit} isMultiple={false} />
+        <EventEditor event={event} handleSubmit={handleSingleSubmit} isMultiple={false} />
       ) : (
-        <EventEditorTest event={getMultipleEvent()} handleSubmit={handleMultipleSubmits} isMultiple={true} />
+        <EventEditor event={getMultipleEvent()} handleSubmit={handleMultipleSubmits} isMultiple={true} />
       )}
     </div>
   );

apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx

@@ -17,10 +17,11 @@ interface EventEditorTitlesProps {
   note: string;
   colour: string;
   handleSubmit: (field: EditorUpdateFields, value: string) => void;
+  isMultiple?: boolean;
 }
 
 const EventEditorTitles = (props: EventEditorTitlesProps) => {
-  const { eventId, cue, title, note, colour, handleSubmit } = props;
+  const { eventId, cue, title, note, colour, handleSubmit, isMultiple } = props;
 
   const cueSubmitHandler = (_field: string, newValue: string) => {
     handleSubmit('cue', sanitiseCue(newValue));
@@ -46,7 +47,7 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {
       </div>
       <div>
         <label className={style.inputLabel}>Colour</label>
-        <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
+        <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} isMultiple={isMultiple} />
       </div>
       <EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
       <EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />