Calendar: drop the per-event colour picker, which categories replaced

A category carries a colour. Offering a separate colour picker beside it
made two ways to say the same thing, and they could disagree: an explicit
colour wins over the category's in `eventColor`, so an event could be
filed under Work and drawn in the Travel colour with nothing on the menu
explaining why.

Categories are the one that carries meaning, so the swatch grid goes and
picking a category is how an event gets a colour.

Clearing an explicit colour stays, and only appears when there is one to
clear. An event that already has one - set before this, or by another
client, or by CalDAV - would otherwise ignore its category for ever with
no way to fix it from here. Same reasoning as leaving "Stop sharing" on a
folder whose share nobody can see: the escape hatch is worth most exactly
when the thing it undoes is invisible.

Nothing reads differently for events without an explicit colour, and
`CALENDAR_COLORS` is untouched - categories, labels and mailboxes all
still pick from it.

web/src/views/calendar/CalendarContextMenu.tsx

@@ -4,7 +4,6 @@ import type { CalendarEvent } from "@/jmap/types";
 import { useCalendar, isRecurring, isOccurrence, type EventInstance, type EventScope } from "@/store/calendar";
 import { useSettings } from "@/store/settings";
 import { formatDayMonth } from "@/lib/datetime";
-import { CALENDAR_COLORS } from "@/ui/misc";
 import { MenuItem, MenuSep, MenuTitle, Popover, type Anchor } from "@/ui/popover";
 import { confirmDialog } from "@/ui/dialog";
 import { toast } from "@/ui/toast";
@@ -77,7 +76,7 @@ export function CalendarContextMenu({ ctx, onClose, onOpen, onEdit, onCreate }:
       toast.error((err as Error).message);
     }
   };
-  const setColor = (color: string | null) => void patch({ color }, color ? "Colour updated" : "Colour reset");
+  const setColor = (color: string | null) => void patch({ color }, color ? "Colour updated" : "Custom colour removed");
   const setCategory = (cat: { name: string; color: string } | null) => {
     const categoriesPatch = cat ? { [cat.name]: true } : null;
     void patch({ categories: categoriesPatch, color: cat ? cat.color : null }, cat ? `Categorised as ${cat.name}` : "Category cleared");
@@ -122,14 +121,17 @@ export function CalendarContextMenu({ ctx, onClose, onOpen, onEdit, onCreate }:
           ))}
           <MenuItem icon={<X size={16} />} label="No category" disabled={!currentCat} onClick={() => { onClose(); setCategory(null); }} />
           <MenuItem icon={<Tag size={16} />} label="Manage categories…" onClick={() => { onClose(); navigate("/settings/calendar"); }} />
-          <MenuSep />
+          {/*
-          <MenuTitle><span className="row gap-4"><Palette size={12} /> Colour</span></MenuTitle>
+            A colour is what a category already carries, so a second way to set
-          <div className="color-grid" style={{ gridTemplateColumns: "repeat(6, 26px)", padding: "4px 10px 8px" }}>
+            one just made two things that could disagree. Picking a category is
-            {CALENDAR_COLORS.map((c) => (
+            now the only way to colour an event here.
-              <button key={c} type="button" style={{ background: c, width: 26, height: 26, outline: ev.color?.toLowerCase() === c ? "2px solid var(--fg)" : undefined, outlineOffset: 1 }} aria-label={c} onClick={() => { onClose(); setColor(c); }} />
+
-            ))}
+            Clearing one stays, though, and only when there is one to clear: an
-          </div>
+            event that already has an explicit colour — set before this, or by
-          {ev.color && <MenuItem icon={<X size={16} />} label="Use calendar colour" onClick={() => { onClose(); setColor(null); }} />}
+            another client — would otherwise ignore its category for ever with
+            nothing on the menu to say why.
+          */}
+          {ev.color && <MenuItem icon={<Palette size={16} />} label="Clear custom colour" onClick={() => { onClose(); setColor(null); }} />}
           <MenuSep />
           <MenuItem danger icon={<Trash2 size={16} />} label="Delete" onClick={() => void del()} />
         </>