client/note color picker menu item: add initial implementation

apps/client/src/menus/custom-items/ColorPickerMenuItem.css

@@ -0,0 +1,15 @@
+.color-picker-menu-item {
+    display: flex;
+    gap: 10px;
+}
+
+.color-picker-menu-item > .color-cell {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    background: transparent;
+}
+
+.color-picker-menu-item > .color-cell.selected {
+    outline: 2px solid royalblue;
+}

apps/client/src/menus/custom-items/ColorPickerMenuItem.tsx

@@ -1,9 +1,38 @@
-import FNote from "../../entities/fnote"
+import "./ColorPickerMenuItem.css";
+import { useState } from "preact/hooks";
+import attributes from "../../services/attributes";
+import FNote from "../../entities/fnote";
+
+const COLORS = ["blue", "green", "cyan", "red", "magenta", "brown", "yellow", ""];
 
 export interface ColorPickerMenuItemProps {
     note: FNote | null;
 }
 
 export default function ColorPickerMenuItem(props: ColorPickerMenuItemProps) {
-    return <span>Color Picker</span>
+    const {note} = props;
+    if (!note) return null;
+
+    const [currentColor, setCurrentColor] = useState(note.getLabel("color")?.value ?? "");
+
+    const onColorCellClicked = (color: string) => {
+        attributes.setLabel(note.noteId, "color", color);
+        setCurrentColor(color);
+    }
+
+    return <div className="color-picker-menu-item">
+        {COLORS.map((color) => (
+            <ColorCell key={color}
+                       color={color}
+                       isSelected={(color === currentColor)}
+                       onClick={() => onColorCellClicked(color)} />
+        ))}
+    </div>
+}
+
+function ColorCell(props: {color: string, isSelected: boolean, onClick?: () => void}) {
+    return <div class={`color-cell ${props.isSelected ? "selected" : ""}`}
+                style={`background-color: ${props.color}`}
+                onClick={props.onClick}>
+    </div>;
 }