refactor: column settings / color picker

src/components/ColorPicker/ColorPicker.scss

@@ -30,7 +30,7 @@
       align-items: center;
 
       &:focus-within {
-        > .column__header-color-option {
+        > .color-picker__color-option {
           border: 3px solid var(--accent-color--100);
         }
       }
@@ -58,7 +58,7 @@
   }
 }
 
-.column__header-color-option {
+.color-picker__color-option {
   width: 24px;
   height: 24px;
   border-radius: $rounded--full;
@@ -78,7 +78,7 @@
 }
 
 [theme="dark"] {
-  .column__header-color-option {
+  .color-picker__color-option {
     border: 3px solid $navy--600;
 
     &--selected {

src/components/ColorPicker/ColorPicker.tsx

@@ -2,25 +2,20 @@ import {useEffect} from "react";
 import {uniqueId} from "underscore";
 import ReactFocusLock from "react-focus-lock";
 import {Color, getColorClassName, formatColorName} from "constants/colors";
-import {useAppDispatch} from "store";
-import {editColumn} from "store/features";
-import {Tooltip} from "../Tooltip";
+import {Tooltip} from "components/Tooltip";
+import "./ColorPicker.scss";
 
 type ColorPickerProps = {
-  id: string;
-  name: string;
-  visible: boolean;
-  index: number;
-  color: Color;
-  onClose?: () => void;
+  open: boolean;
   colors: Color[];
+  activeColor: Color;
+  selectColor: (color: Color) => void;
   closeColorPicker: () => void;
 };
 
 export const ColorPicker = (props: ColorPickerProps) => {
-  const dispatch = useAppDispatch();
-  const colorsWithoutSelectedColor = props.colors.filter((curColor) => curColor !== props.color);
-  const primColorAnchor = uniqueId(`color-picker-${props.color.toString()}`);
+  const colorsWithoutSelectedColor = props.colors.filter((curColor) => curColor !== props.activeColor);
+  const primColorAnchor = uniqueId(`color-picker-${props.activeColor.toString()}`);
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -34,59 +29,37 @@ export const ColorPicker = (props: ColorPickerProps) => {
     return () => document.removeEventListener("keydown", handleKeyPress, true);
   }, [props]);
 
+  if (!props.open) {
+    return <span className="color-picker__color-option color-picker__color-option--selected" />;
+  }
+
   return (
     <ReactFocusLock autoFocus={false} className="fix-focus-lock-placement">
       <ul className="color-picker">
-        <li className={`${getColorClassName(props.color)} color-picker__item`}>
+        <li className={`${getColorClassName(props.activeColor)} color-picker__item`}>
           <button
             id={primColorAnchor}
-            aria-label={formatColorName(props.color)}
-            title={formatColorName(props.color)}
-            onClick={() => {
-              props.onClose?.();
-              dispatch(
-                editColumn({
-                  id: props.id,
-                  column: {
-                    name: props.name,
-                    color: props.color,
-                    index: props.index,
-                    visible: props.visible,
-                  },
-                })
-              );
-            }}
+            aria-label={formatColorName(props.activeColor)}
+            title={formatColorName(props.activeColor)}
+            onClick={() => props.selectColor(props.activeColor)}
             className="color-picker__item-button"
           >
-            <div className="column__header-color-option column__header-color-option--selected" />
+            <div className="color-picker__color-option color-picker__color-option--selected" />
           </button>
-          <Tooltip anchorSelect={`#${primColorAnchor}`} content={formatColorName(props.color)} />
+          <Tooltip anchorSelect={`#${primColorAnchor}`} content={formatColorName(props.activeColor)} />
         </li>
-        {colorsWithoutSelectedColor.map((item) => {
-          const anchor = uniqueId(`color-picker-${item.toString()}`);
+        {colorsWithoutSelectedColor.map((color) => {
+          const anchor = uniqueId(`color-picker-${color.toString()}`);
           return (
-            <li className={`${getColorClassName(item)} color-picker__item`}>
+            <li className={`${getColorClassName(color)} color-picker__item`}>
               <button
                 id={anchor}
-                aria-label={formatColorName(item)}
-                title={formatColorName(item)}
-                onClick={() => {
-                  props.onClose?.();
-                  dispatch(
-                    editColumn({
-                      id: props.id,
-                      column: {
-                        name: props.name,
-                        color: item,
-                        index: props.index,
-                        visible: props.visible,
-                      },
-                    })
-                  );
-                }}
-                className={`${item.toString()} color-picker__item-button`}
+                aria-label={formatColorName(color)}
+                title={formatColorName(color)}
+                onClick={() => props.selectColor(color)}
+                className={`${color.toString()} color-picker__item-button`}
               >
-                <div className={`column__header-color-option column__header-color-option--${item.toString()}`} />
+                <div className={`color-picker__color-option color-picker__color-option--${color.toString()}`} />
               </button>
             </li>
           );

src/components/Column/Column.tsx

@@ -1,22 +1,22 @@
-import "./Column.scss";
-import {Color, getColorClassName} from "constants/colors";
-import {NoteInput} from "components/NoteInput";
+import {useTranslation} from "react-i18next";
+import _ from "underscore";
 import {useEffect, useRef, useState} from "react";
 import classNames from "classnames";
 import {Tooltip} from "react-tooltip";
 import {useAppDispatch, useAppSelector} from "store";
-import {Close, MarkAsDone, Hidden, ThreeDots} from "components/Icon";
-import _ from "underscore";
-import {useTranslation} from "react-i18next";
+import {createColumn, deleteColumnOptimistically, editColumn, editColumnOptimistically} from "store/features";
+import {Color, getColorClassName} from "constants/colors";
 import {hotkeyMap} from "constants/hotkeys";
+import {NoteInput} from "components/NoteInput";
 import {Droppable} from "components/DragAndDrop/Droppable";
-import {useStripeOffset} from "utils/hooks/useStripeOffset";
 import {EmojiSuggestions} from "components/EmojiSuggestions";
+import {ColumnSettings} from "components/Column/ColumnSettings";
+import {Close, MarkAsDone, Hidden, ThreeDots} from "components/Icon";
+import {Note} from "components/Note";
 import {useEmojiAutocomplete} from "utils/hooks/useEmojiAutocomplete";
+import {useStripeOffset} from "utils/hooks/useStripeOffset";
 import {useTextOverflow} from "utils/hooks/useTextOverflow";
-import {Note} from "../Note";
-import {ColumnSettings} from "./ColumnSettings";
-import {createColumn, deleteColumnOptimistically, editColumn, editColumnOptimistically} from "../../store/features";
+import "./Column.scss";
 
 const {SELECT_NOTE_INPUT_FIRST_KEY} = hotkeyMap;
 
@@ -249,17 +249,7 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
             )}
             {!openedColumnSettings && isModerator && renderColumnModifiers()}
             {openedColumnSettings && (
-              <ColumnSettings
-                id={id}
-                name={name}
-                color={color}
-                visible={visible}
-                index={index}
-                onClose={() => setOpenedColumnSettings(false)}
-                onNameEdit={() => setColumnNameMode("EDIT")}
-                setOpenColumnSet={setOpenedColumnSettings}
-                closeColumnSettings={() => setOpenedColumnSettings(false)}
-              />
+              <ColumnSettings column={{id, name, color, visible, index}} onClose={() => setOpenedColumnSettings(false)} onNameEdit={() => setColumnNameMode("EDIT")} />
             )}
           </div>
           <NoteInput

src/components/Column/ColumnSettings.tsx

@@ -1,34 +1,27 @@
-import {Dispatch, SetStateAction, useEffect, useState} from "react";
-import {Hidden, Visible, Edit, ArrowLeft, ArrowRight, Trash, Close} from "components/Icon";
-import {Color, getColorForIndex, COLOR_ORDER} from "constants/colors";
+import {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
-import "./ColumnSettings.scss";
-import "../ColorPicker/ColorPicker.scss";
 import {useAppDispatch, useAppSelector} from "store";
+import {Column, createColumnOptimistically, deleteColumn, editColumn, setShowHiddenColumns} from "store/features";
+import {Color, getColorForIndex, COLOR_ORDER} from "constants/colors";
+import {TEMPORARY_COLUMN_ID, TOAST_TIMER_SHORT} from "constants/misc";
 import {useOnBlur} from "utils/hooks/useOnBlur";
+import {Toast} from "utils/Toast";
+import {Hidden, Visible, Edit, ArrowLeft, ArrowRight, Trash, Close} from "components/Icon";
 import {MiniMenu, MiniMenuItem} from "components/MiniMenu/MiniMenu";
-import {createColumnOptimistically, deleteColumn, editColumn, setShowHiddenColumns} from "store/features";
-import {Toast} from "../../utils/Toast";
-import {TEMPORARY_COLUMN_ID, TOAST_TIMER_SHORT} from "../../constants/misc";
-import {ColorPicker} from "../ColorPicker/ColorPicker";
+import {ColorPicker} from "components/ColorPicker/ColorPicker";
+import "./ColumnSettings.scss";
 
 type ColumnSettingsProps = {
-  id: string;
-  name: string;
-  color: Color;
-  visible: boolean;
-  index: number;
-  onClose?: () => void;
-  onNameEdit?: () => void;
-  setOpenColumnSet?: Dispatch<SetStateAction<boolean>>;
-  closeColumnSettings: () => void;
+  column: Column;
+  onClose: () => void;
+  onNameEdit: () => void;
 };
 
 export const ColumnSettings = (props: ColumnSettingsProps) => {
   const {t} = useTranslation();
   const showHiddenColumns = useAppSelector((state) => state.participants?.self!.showHiddenColumns);
   const dispatch = useAppDispatch();
-  const columnSettingsRef = useOnBlur(props.onClose ?? (() => {}));
+  const columnSettingsRef = useOnBlur(props.onClose);
   const [openedColorPicker, setOpenedColorPicker] = useState(false);
 
   const handleAddColumn = (columnIndex: number) => {
@@ -43,90 +36,95 @@ export const ColumnSettings = (props: ColumnSettingsProps) => {
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
       if (e.key === "Escape" && !openedColorPicker) {
-        props.closeColumnSettings();
+        props.onClose();
       }
     };
 
     document.addEventListener("keydown", handleKeyPress, false); // trigger in bubble phase
     return () => document.removeEventListener("keydown", handleKeyPress, false);
   }, [openedColorPicker, props]);
 
-  const renderColorPicker = () =>
-    openedColorPicker ? (
-      <ColorPicker
-        id={props.id}
-        name={props.name}
-        visible={props.visible}
-        index={props.index}
-        color={props.color}
-        onClose={props.onClose}
-        colors={COLOR_ORDER}
-        closeColorPicker={() => setOpenedColorPicker(false)}
-      />
-    ) : (
-      <span className="column__header-color-option column__header-color-option--selected" />
+  const onSelectColor = (color: Color) => {
+    props.onClose();
+    dispatch(
+      editColumn({
+        id: props.column.id,
+        column: {
+          ...props.column,
+          color, // overwrite
+        },
+      })
     );
+  };
 
   const menuItems: MiniMenuItem[] = [
     {
       label: t("Column.deleteColumn"),
-      icon: <Trash />,
+      element: <Trash />,
       onClick: () => {
-        props.onClose?.();
-        dispatch(deleteColumn(props.id));
+        props.onClose();
+        dispatch(deleteColumn(props.column.id));
       },
     },
     {
       label: t("Column.color"),
-      icon: renderColorPicker(),
+      element: (
+        <ColorPicker
+          open={openedColorPicker}
+          colors={COLOR_ORDER}
+          activeColor={props.column.color}
+          selectColor={onSelectColor}
+          closeColorPicker={() => setOpenedColorPicker(false)}
+        />
+      ),
       onClick: () => setOpenedColorPicker((o) => !o),
     },
     {
       label: t("Column.addColumnLeft"),
-      icon: <ArrowLeft />,
+      element: <ArrowLeft />,
       onClick: () => {
-        props.onClose?.();
-        handleAddColumn(props.index);
+        props.onClose();
+        handleAddColumn(props.column.index);
       },
     },
     {
       label: t("Column.addColumnRight"),
-      icon: <ArrowRight />,
+      element: <ArrowRight />,
       onClick: () => {
-        props.onClose?.();
-        handleAddColumn(props.index + 1);
+        props.onClose();
+        handleAddColumn(props.column.index + 1);
       },
     },
     {
-      label: props.visible ? t("Column.hideColumn") : t("Column.showColumn"),
-      icon: props.visible ? <Hidden /> : <Visible />,
+      label: props.column.visible ? t("Column.hideColumn") : t("Column.showColumn"),
+      element: props.column.visible ? <Hidden /> : <Visible />,
       onClick: () => {
         props.onClose?.();
         dispatch(
           editColumn({
-            id: props.id,
+            id: props.column.id,
             column: {
-              name: props.name,
-              color: props.color,
-              index: props.index,
-              visible: !props.visible,
+              name: props.column.name,
+              color: props.column.color,
+              index: props.column.index,
+              visible: !props.column.visible,
             },
           })
         );
       },
     },
     {
       label: t("Column.editName"),
-      icon: <Edit />,
+      element: <Edit />,
       onClick: () => {
-        props.onNameEdit?.();
-        props.onClose?.();
+        props.onNameEdit();
+        props.onClose();
       },
     },
     {
       label: t("Column.resetName"),
-      icon: <Close />,
-      onClick: () => props.setOpenColumnSet?.((o) => !o),
+      element: <Close />,
+      onClick: props.onClose,
     },
   ];
 

src/components/MiniMenu/MiniMenu.tsx

@@ -5,7 +5,7 @@ import "./MiniMenu.scss";
 import ReactFocusLock from "react-focus-lock";
 
 export type MiniMenuItem = {
-  icon: ReactNode;
+  element: ReactNode; // an Icon in most cases, but can also be a complex element (e.g. ColorPicker)
   label: string;
   active?: boolean;
   onClick?: () => void;
@@ -31,7 +31,7 @@ export const MiniMenu = ({className, items}: MiniMenuProps) => (
             key={item.label}
             onClick={item?.onClick}
           >
-            {item.icon}
+            {item.element}
           </button>
         );
       })}