commit

frontend(experimental)/newchat/lib/room-theme.ts

@@ -42,9 +42,10 @@ export function getRoomColor(roomId: number | null | undefined) {
 // ---------- Event coloring by type / status / RSVP ----------
 //
 // Confirmed and busy events each pick a color from a small themed pool,
-// deterministically by room so the same room always looks the same.
-// Private, proposed, declined and cancelled get one fixed look each so
-// they're recognizable at a glance regardless of room.
+// deterministically by event id — so color varies event-to-event rather
+// than clustering by room, but a given event still looks the same on
+// every render/refresh. Private, proposed, declined and cancelled get
+// one fixed look each so they're recognizable at a glance.
 
 export interface EventStyle {
   bg: string
@@ -73,9 +74,9 @@ const BUSY_PALETTE = [
 
 function pickFromPalette(
   palette: { bg: string; ring: string }[],
-  roomId: number | null | undefined,
+  seed: number | null | undefined,
 ) {
-  const id = typeof roomId === "number" && Number.isFinite(roomId) ? roomId : 0
+  const id = typeof seed === "number" && Number.isFinite(seed) ? seed : 0
   const idx = ((id % palette.length) + palette.length) % palette.length
   return palette[idx]
 }
@@ -98,17 +99,17 @@ export const STRIPE_STYLE: CSSProperties = {
 }
 
 export function getEventStyle(
-  event: Pick<CalendarEvent, "type" | "status" | "room_id">,
+  event: Pick<CalendarEvent, "id" | "type" | "status" | "room_id">,
   myResponse: SignupStatus | undefined,
 ): EventStyle {
   if (event.type === "private") return PRIVATE_STYLE
-  if (event.type === "busy") return pickFromPalette(BUSY_PALETTE, event.room_id)
+  if (event.type === "busy") return pickFromPalette(BUSY_PALETTE, event.id)
 
   // Proposal-type events: colored by where they stand.
   if (event.status === "cancelled") return CANCELLED_STYLE
   if (myResponse === "declined") return DECLINED_STYLE
   if (event.status === "proposed" || event.status === "draft") return PROPOSED_STYLE
 
-  // Confirmed proposal: pick from the confirmed palette, by room.
-  return pickFromPalette(CONFIRMED_PALETTE, event.room_id)
+  // Confirmed proposal: pick from the confirmed palette, per event.
+  return pickFromPalette(CONFIRMED_PALETTE, event.id)
 }