client/note color picker menu item: add support to operate with note IDs as well

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

@@ -10,6 +10,10 @@
     background: transparent;
 }
 
+.color-picker-menu-item > .color-cell.disabled-color-cell {
+    cursor: not-allowed;
+}
+
 .color-picker-menu-item > .color-cell.selected {
     outline: 2px solid royalblue;
 }

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

@@ -1,37 +1,59 @@
 import "./ColorPickerMenuItem.css";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import attributes from "../../services/attributes";
 import FNote from "../../entities/fnote";
+import froca from "../../services/froca";
 
 const COLORS = ["blue", "green", "cyan", "red", "magenta", "brown", "yellow", ""];
 
 export interface ColorPickerMenuItemProps {
-    note: FNote | null;
+    /** The target Note instance or its ID string. */
+    note: FNote | string | null;
 }
 
 export default function ColorPickerMenuItem(props: ColorPickerMenuItemProps) {
-    const {note} = props;
+    if (!props.note) return null;
-    if (!note) return null;
 
-    const [currentColor, setCurrentColor] = useState(note.getLabel("color")?.value ?? "");
+    const [note, setNote] = useState<FNote | null>(null);
+    const [currentColor, setCurrentColor] = useState<string | null>(null);
+
+
+    useEffect(() => {
+        const retrieveNote = async (noteId: string) => {
+            const result = await froca.getNote(noteId, true);
+            if (result) {
+                setNote(result);
+                setCurrentColor(result.getLabel("color")?.value ?? "");
+            }
+        }
+
+        if (typeof props.note === "string") {
+            retrieveNote(props.note); // Get the note from the given ID string
+        } else {
+            setNote(props.note);
+        }
+    }, []);
 
     const onColorCellClicked = (color: string) => {
+        if (note) {
             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)}
+                       isDisabled={(note !== null)}
                        onClick={() => onColorCellClicked(color)} />
         ))}
     </div>
 }
 
-function ColorCell(props: {color: string, isSelected: boolean, onClick?: () => void}) {
+function ColorCell(props: {color: string, isSelected: boolean, isDisabled?: boolean, onClick?: () => void}) {
-    return <div class={`color-cell ${props.isSelected ? "selected" : ""}`}
+    return <div class={`color-cell ${props.isSelected ? "selected" : ""} ${props.isDisabled ? "disabled-color-cell" : ""}`}
                 style={`background-color: ${props.color}`}
                 onClick={props.onClick}>
     </div>;