Feature: per-viewer colors for shared calendars (#345)

app/(main)/[locale]/calendar/page.tsx

@@ -60,6 +60,7 @@ import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { CreateCalendarModal } from "@/components/calendar/create-calendar-modal";
 import { getUserParticipantId } from "@/lib/calendar-participants";
 import { generateBirthdayEvents, createBirthdayCalendar, BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
+import { sharedCalendarColorKey, pickUnusedCalendarColor } from "@/lib/shared-calendar-colors";
 import { debug } from "@/lib/debug";
 import { consumePendingWebcal, hasPendingWebcal, subscribeToPendingWebcal } from "@/lib/protocol-handlers/session";
 import type { ParsedWebcal } from "@/lib/protocol-handlers/webcal";
@@ -97,6 +98,9 @@ export default function CalendarPage() {
     refreshAllSubscriptions, icalSubscriptions,
   } = useCalendarStore();
   const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview, showBirthdayCalendar, birthdayCalendarColor, updateSetting } = useSettingsStore();
+  const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
+  const setSharedCalendarColor = useSettingsStore((s) => s.setSharedCalendarColor);
+  const removeSharedCalendarColor = useSettingsStore((s) => s.removeSharedCalendarColor);
   const taskStore = useTaskStore();
   const fetchTasksFn = useTaskStore(state => state.fetchTasks);
   const { identities } = useIdentityStore();
@@ -1030,10 +1034,47 @@ export default function CalendarPage() {
     try { return t('birthday_calendar'); } catch { return 'Birthdays'; }
   })();
 
+  // Apply each shared calendar's local color override (per-viewer recolor,
+  // #345). The override replaces the calendar's color and wins over per-event
+  // colors via the `colorIsLocalOverride` flag (see getEventColor). Personal
+  // calendars are passed through untouched.
+  const displayCalendars = useMemo(() => {
+    return calendars.map((cal) => {
+      if (!cal.isShared) return cal;
+      const override = sharedCalendarColors[sharedCalendarColorKey(cal)];
+      if (!override) return cal;
+      return { ...cal, color: override, colorIsLocalOverride: true };
+    });
+  }, [calendars, sharedCalendarColors]);
+
+  // Auto-assign a random, not-yet-used palette color to any freshly shared
+  // calendar so multiple shared calendars don't collide on one color. Runs
+  // once per calendar (guarded by the presence of an existing key), and the
+  // user can still overwrite it from the sidebar.
+  useEffect(() => {
+    const shared = calendars.filter((c) => c.isShared);
+    const missing = shared.filter((c) => !sharedCalendarColors[sharedCalendarColorKey(c)]);
+    if (missing.length === 0) return;
+    // Seed "used" with personal calendar colors plus already-assigned shared
+    // overrides so the picks stay distinct from what's already on screen.
+    const used = new Set<string>();
+    for (const c of calendars) {
+      if (!c.isShared && c.color) used.add(c.color.toLowerCase());
+    }
+    for (const color of Object.values(sharedCalendarColors)) {
+      if (color) used.add(color.toLowerCase());
+    }
+    for (const cal of missing) {
+      const color = pickUnusedCalendarColor(used);
+      used.add(color.toLowerCase());
+      setSharedCalendarColor(sharedCalendarColorKey(cal), color);
+    }
+  }, [calendars, sharedCalendarColors, setSharedCalendarColor]);
+
   const allCalendars = useMemo(() => {
-    if (!showBirthdayCalendar) return calendars;
+    if (!showBirthdayCalendar) return displayCalendars;
-    return [...calendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)];
+    return [...displayCalendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)];
-  }, [calendars, showBirthdayCalendar, birthdayCalendarName, birthdayCalendarColor]);
+  }, [displayCalendars, showBirthdayCalendar, birthdayCalendarName, birthdayCalendarColor]);
 
   const visibleEvents = useMemo(() => {
     const filtered = events.filter((e) => {
@@ -1219,7 +1260,7 @@ export default function CalendarPage() {
               />
               <TaskListView
                 tasks={taskStore.tasks}
-                calendars={calendars}
+                calendars={displayCalendars}
                 selectedCalendarIds={selectedCalendarIds}
                 filter={taskStore.filter}
                 showCompleted={taskStore.showCompleted}
@@ -1317,8 +1358,21 @@ export default function CalendarPage() {
                   updateSetting('birthdayCalendarColor', color);
                   return;
                 }
+                // Shared calendars: recolor locally only (the viewer usually
+                // can't write the owner's calendar, and it'd recolor it for
+                // everyone). Personal calendars write through to the server.
+                const cal = allCalendars.find((c) => c.id === calendarId);
+                if (cal?.isShared) {
+                  setSharedCalendarColor(sharedCalendarColorKey(cal), color);
+                  return;
+                }
                 updateCalendar(client, calendarId, { color });
               } : undefined}
+              onResetColor={(cal) => {
+                // Drop the local override; the auto-assign effect picks a
+                // fresh unused color (so it never reverts to a collision).
+                removeSharedCalendarColor(sharedCalendarColorKey(cal));
+              }}
               onShareCalendar={client ? (cal) => setSharingCalendarId(cal.id) : undefined}
               onCreateEvent={(cal: Calendar) => {
                 setDefaultCalendarIdForCreate(cal.id);
@@ -1389,7 +1443,7 @@ export default function CalendarPage() {
           onSubscribe={() => setShowSubscriptionModal(true)}
           isMobile={isMobile}
           onNavigateBack={isMobile && mobileReturnToMonth && normalizedViewMode === "day" ? navigateBackToMonth : undefined}
-          calendars={calendars}
+          calendars={displayCalendars}
           selectedCalendarIds={selectedCalendarIds}
           onToggleVisibility={toggleCalendarVisibility}
           enableCalendarTasks={enableCalendarTasks}
@@ -1419,7 +1473,7 @@ export default function CalendarPage() {
               <EventModal
                 key={editEvent?.id ?? 'new'}
                 event={editEvent}
-                calendars={calendars}
+                calendars={displayCalendars}
                 defaultDate={defaultModalDate}
                 defaultEndDate={defaultModalEndDate}
                 defaultAllDay={defaultModalAllDay}
@@ -1442,7 +1496,7 @@ export default function CalendarPage() {
               <TaskModal
                 key={editTask?.id ?? 'new-task'}
                 task={editTask}
-                calendars={calendars}
+                calendars={displayCalendars}
                 onSave={handleSaveTask}
                 onDelete={handleDeleteTask}
                 onClose={() => { setShowTaskModal(false); setEditTask(null); }}
@@ -1529,7 +1583,7 @@ export default function CalendarPage() {
       {detailEvent && detailAnchorRect && (
         <EventDetailPopover
           event={detailEvent}
-          calendar={calendars.find(c => detailEvent.calendarIds[c.id])}
+          calendar={displayCalendars.find(c => detailEvent.calendarIds[c.id])}
           anchorRect={detailAnchorRect}
           onEdit={handleEditFromDetail}
           onDelete={handleDeleteFromDetail}
@@ -1549,7 +1603,7 @@ export default function CalendarPage() {
         <EventModal
           key={editEvent?.id ?? 'new'}
           event={editEvent}
-          calendars={calendars}
+          calendars={displayCalendars}
           defaultDate={defaultModalDate}
           defaultEndDate={defaultModalEndDate}
           defaultAllDay={defaultModalAllDay}
@@ -1566,7 +1620,7 @@ export default function CalendarPage() {
 
       {showImportModal && client && (
         <ICalImportModal
-          calendars={calendars}
+          calendars={displayCalendars}
           client={client}
           initialUrl={pendingSubscription?.url}
           onClose={() => {

components/calendar/calendar-sidebar-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { ChevronDown, ChevronRight, Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake, User, Users, Plus, Eraser, Palette } from "lucide-react";
+import { ChevronDown, ChevronRight, Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake, User, Users, Plus, Eraser, Palette, Shuffle } from "lucide-react";
 import { cn, formatDateTime } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
@@ -11,6 +11,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { useTaskStore } from "@/stores/task-store";
 import { useAccountStore } from "@/stores/account-store";
 import { BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
+import { sharedCalendarColorKey } from "@/lib/shared-calendar-colors";
 import { toast } from "@/stores/toast-store";
 import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
 import { useContextMenu } from "@/hooks/use-context-menu";
@@ -50,6 +51,7 @@ interface CalendarSidebarPanelProps {
   selectedCalendarIds: string[];
   onToggleVisibility: (id: string) => void;
   onColorChange?: (calendarId: string, color: string) => void;
+  onResetColor?: (calendar: Calendar) => void;
   onShareCalendar?: (calendar: Calendar) => void;
   onCreateEvent?: (calendar: Calendar) => void;
   onClearCalendar?: (calendar: Calendar) => void;
@@ -71,6 +73,7 @@ export function CalendarSidebarPanel({
   selectedCalendarIds,
   onToggleVisibility,
   onColorChange,
+  onResetColor,
   onShareCalendar,
   onCreateEvent,
   onClearCalendar,
@@ -94,6 +97,7 @@ export function CalendarSidebarPanel({
   const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
   const removeICalSubscription = useCalendarStore((s) => s.removeICalSubscription);
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
   const enableCalendarTasks = useSettingsStore((s) => s.enableCalendarTasks);
   const tasks = useTaskStore((s) => s.tasks);
   const setViewMode = useCalendarStore((s) => s.setViewMode);
@@ -303,9 +307,11 @@ export function CalendarSidebarPanel({
     const canCreate = onCreateEvent && !isBirthday && cal.myRights?.mayWriteOwn !== false;
     const canShare = onShareCalendar && cal.myRights?.mayShare && !cal.isShared;
     const canChangeColor = !!onColorChange;
+    const hasColorOverride = !!cal.isShared && !!sharedCalendarColors[sharedCalendarColorKey(cal)];
+    const canResetColor = !!onResetColor && hasColorOverride;
     const canClear = onClearCalendar && !isBirthday && cal.myRights?.mayDelete !== false;
     const canDelete = onDeleteCalendar && !isBirthday && !cal.isDefault && !cal.isShared;
-    const showSeparator = (canCreate || canShare || canChangeColor) && (canClear || canDelete);
+    const showSeparator = (canCreate || canShare || canChangeColor || canResetColor) && (canClear || canDelete);
     const color = cal.color || "#3b82f6";
 
     return (
@@ -335,6 +341,13 @@ export function CalendarSidebarPanel({
             </div>
           </ContextMenuSubMenu>
         )}
+        {canResetColor && (
+          <ContextMenuItem
+            icon={Shuffle}
+            label={tMgmt('random_color')}
+            onClick={() => { closeContextMenu(); onResetColor!(cal); }}
+          />
+        )}
         {showSeparator && <ContextMenuSeparator />}
         {canClear && (
           <ContextMenuItem

components/calendar/event-card.tsx

@@ -34,6 +34,11 @@ function sanitizeColor(color: string | null | undefined, fallback = "#3b82f6"):
 }
 
 function getEventColor(event: CalendarEvent, calendar?: Calendar): string {
+  // A local color override on a shared calendar wins over per-event colors,
+  // so the whole shared calendar paints uniformly in the viewer's chosen hue.
+  if (calendar?.colorIsLocalOverride && calendar.color) {
+    return sanitizeColor(calendar.color);
+  }
   return sanitizeColor(event.color, sanitizeColor(calendar?.color));
 }
 

components/settings/calendar-management-settings.tsx

@@ -15,25 +15,7 @@ import { ICalImportModal } from '@/components/calendar/ical-import-modal';
 import { ICalSubscriptionModal } from '@/components/calendar/ical-subscription-modal';
 import { useSettingsStore } from '@/stores/settings-store';
 import { apiFetch } from '@/lib/browser-navigation';
-
+import { CALENDAR_COLORS, sharedCalendarColorKey } from '@/lib/shared-calendar-colors';
-const CALENDAR_COLORS = [
-  "#3b82f6", // blue
-  "#ef4444", // red
-  "#22c55e", // green
-  "#f59e0b", // amber
-  "#8b5cf6", // violet
-  "#ec4899", // pink
-  "#14b8a6", // teal
-  "#f97316", // orange
-  "#06b6d4", // cyan
-  "#84cc16", // lime
-  "#6366f1", // indigo
-  "#a855f7", // purple
-  "#e11d48", // rose
-  "#0ea5e9", // sky
-  "#10b981", // emerald
-  "#d946ef", // fuchsia
-];
 
 function CalendarColorPicker({
   value,
@@ -182,6 +164,8 @@ export function CalendarManagementSettings() {
   const tImport = useTranslations('calendar.import');
   const tSub = useTranslations('calendar.subscription');
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
+  const setSharedCalendarColor = useSettingsStore((s) => s.setSharedCalendarColor);
   const colorPickerRef = useRef<HTMLDivElement>(null);
 
   // Load calendars if not yet loaded
@@ -329,6 +313,15 @@ export function CalendarManagementSettings() {
 
   const handleColorChange = async (calendarId: string, color: string) => {
     if (!client) return;
+    // Shared calendars: recolor locally only - the viewer usually can't write
+    // the owner's calendar and it'd recolor it for everyone (see #345).
+    const cal = calendars.find((c) => c.id === calendarId);
+    if (cal?.isShared) {
+      setSharedCalendarColor(sharedCalendarColorKey(cal), color);
+      toast.success(t('color_updated'));
+      setColorPickerId(null);
+      return;
+    }
     try {
       await updateCalendar(client, calendarId, { color });
       toast.success(t('color_updated'));
@@ -396,7 +389,7 @@ export function CalendarManagementSettings() {
     <SettingsSection title={t('title')} description={t('description')}>
       <div className="space-y-2">
         {calendars.filter(cal => !isSubscriptionCalendar(cal.id)).map((cal) => {
-          const color = cal.color || '#3b82f6';
+          const color = (cal.isShared && sharedCalendarColors[sharedCalendarColorKey(cal)]) || cal.color || '#3b82f6';
 
           if (editingId === cal.id) {
             return (

lib/__tests__/shared-calendar-colors.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest';
+import type { Calendar } from '@/lib/jmap/types';
+import {
+  CALENDAR_COLORS,
+  sharedCalendarColorKey,
+  pickUnusedCalendarColor,
+} from '../shared-calendar-colors';
+
+function makeCal(overrides: Partial<Calendar>): Calendar {
+  return {
+    id: 'cal-1',
+    name: 'Cal',
+    description: null,
+    color: null,
+    sortOrder: 0,
+    isSubscribed: true,
+    isVisible: true,
+    isDefault: false,
+    includeInAvailability: 'all',
+    defaultAlertsWithTime: null,
+    defaultAlertsWithoutTime: null,
+    timeZone: null,
+    shareWith: null,
+    myRights: {} as Calendar['myRights'],
+    ...overrides,
+  };
+}
+
+describe('sharedCalendarColorKey', () => {
+  it('is built from local account, JMAP account, and the original id', () => {
+    const cal = makeCal({
+      id: 'acct-9:cal-7',
+      originalId: 'cal-7',
+      accountId: 'acct-9',
+      localAccountId: 'slot-2',
+    });
+    expect(sharedCalendarColorKey(cal)).toBe('slot-2|acct-9|cal-7');
+  });
+
+  it('is stable regardless of the Pro-shell id prefix', () => {
+    // Same underlying calendar, shown once under the active account (bare id)
+    // and once cross-account (prefixed id) - both must map to one key.
+    const active = makeCal({ id: 'acct-9:cal-7', originalId: 'cal-7', accountId: 'acct-9', localAccountId: 'slot-2' });
+    const prefixed = makeCal({ id: 'slot-2::acct-9:cal-7', originalId: 'cal-7', accountId: 'acct-9', localAccountId: 'slot-2' });
+    expect(sharedCalendarColorKey(active)).toBe(sharedCalendarColorKey(prefixed));
+  });
+
+  it('falls back to the id when originalId is absent', () => {
+    const cal = makeCal({ id: 'cal-7', accountId: 'acct-9' });
+    expect(sharedCalendarColorKey(cal)).toBe('|acct-9|cal-7');
+  });
+});
+
+describe('pickUnusedCalendarColor', () => {
+  it('returns a palette color not present in usedColors', () => {
+    const used = CALENDAR_COLORS.slice(0, CALENDAR_COLORS.length - 1);
+    const picked = pickUnusedCalendarColor(used);
+    expect(picked).toBe(CALENDAR_COLORS[CALENDAR_COLORS.length - 1]);
+  });
+
+  it('ignores case when comparing used colors', () => {
+    const used = CALENDAR_COLORS.slice(0, -1).map((c) => c.toUpperCase());
+    expect(pickUnusedCalendarColor(used)).toBe(CALENDAR_COLORS[CALENDAR_COLORS.length - 1]);
+  });
+
+  it('still returns a palette color once every color is taken', () => {
+    expect(CALENDAR_COLORS).toContain(pickUnusedCalendarColor(CALENDAR_COLORS));
+  });
+
+  it('always returns a valid palette color for a small used set', () => {
+    for (let i = 0; i < 50; i++) {
+      const picked = pickUnusedCalendarColor(['#3b82f6']);
+      expect(CALENDAR_COLORS).toContain(picked);
+      expect(picked).not.toBe('#3b82f6');
+    }
+  });
+});

lib/jmap/types.ts

@@ -488,6 +488,10 @@ export interface Calendar {
   // can route mutations to the right client. Distinct from `accountId`
   // which is the JMAP server's own account UUID.
   localAccountId?: string;
+  // Set when `color` has been replaced by the viewer's local override for a
+  // shared calendar (see lib/shared-calendar-colors). When true, the override
+  // wins over per-event colors so the whole shared calendar paints uniformly.
+  colorIsLocalOverride?: boolean;
 }
 
 export interface CalendarRights {

lib/shared-calendar-colors.ts

@@ -0,0 +1,55 @@
+import type { Calendar } from '@/lib/jmap/types';
+
+/**
+ * Palette of calendar colors offered in the color picker. Defined here (rather
+ * than in the settings UI component) so non-React modules can reuse it without
+ * pulling in component code. The settings color picker re-exports this.
+ */
+export const CALENDAR_COLORS = [
+  "#3b82f6", // blue
+  "#ef4444", // red
+  "#22c55e", // green
+  "#f59e0b", // amber
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#14b8a6", // teal
+  "#f97316", // orange
+  "#06b6d4", // cyan
+  "#84cc16", // lime
+  "#6366f1", // indigo
+  "#a855f7", // purple
+  "#e11d48", // rose
+  "#0ea5e9", // sky
+  "#10b981", // emerald
+  "#d946ef", // fuchsia
+];
+
+/**
+ * Stable key for a shared calendar's local color override. Independent of the
+ * Pro-shell id prefix (which changes with the active account), so the override
+ * survives shell-mode and account switches. Built from the owning JMAP account
+ * + the calendar's original server id.
+ */
+export function sharedCalendarColorKey(
+  cal: Pick<Calendar, 'id' | 'originalId' | 'accountId' | 'localAccountId'>,
+): string {
+  const localAccount = cal.localAccountId ?? '';
+  const account = cal.accountId ?? '';
+  const id = cal.originalId ?? cal.id;
+  return `${localAccount}|${account}|${id}`;
+}
+
+/**
+ * Pick a random palette color not present in `usedColors`. Once every palette
+ * entry is taken, fall back to a random palette color (collisions are
+ * unavoidable past CALENDAR_COLORS.length calendars).
+ */
+export function pickUnusedCalendarColor(usedColors: Iterable<string>): string {
+  const used = new Set<string>();
+  for (const c of usedColors) {
+    if (c) used.add(c.toLowerCase());
+  }
+  const available = CALENDAR_COLORS.filter((c) => !used.has(c.toLowerCase()));
+  const pool = available.length > 0 ? available : CALENDAR_COLORS;
+  return pool[Math.floor(Math.random() * pool.length)];
+}

locales/cs/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Název kalendáře",
       "color": "Barva",
       "change_color": "Změnit barvu",
+      "random_color": "Nová náhodná barva",
       "add_calendar": "Přidat kalendář",
       "edit": "Upravit",
       "delete": "Odstranit",

locales/da/common.json

@@ -2656,6 +2656,7 @@
       "name_placeholder": "Kalendernavn",
       "color": "Farve",
       "change_color": "Skift farve",
+      "random_color": "Ny tilfældig farve",
       "add_calendar": "Tilføj kalender",
       "edit": "Redigér",
       "delete": "Slet",

locales/de/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Kalendername",
       "color": "Farbe",
       "change_color": "Farbe ändern",
+      "random_color": "Neue zufällige Farbe",
       "add_calendar": "Kalender hinzufügen",
       "edit": "Bearbeiten",
       "delete": "Löschen",

locales/en/common.json

@@ -2657,6 +2657,7 @@
       "name_placeholder": "Calendar name",
       "color": "Color",
       "change_color": "Change color",
+      "random_color": "New random color",
       "add_calendar": "Add calendar",
       "edit": "Edit",
       "delete": "Delete",

locales/es/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Nombre del calendario",
       "color": "Color",
       "change_color": "Cambiar color",
+      "random_color": "Nuevo color aleatorio",
       "add_calendar": "Añadir calendario",
       "edit": "Editar",
       "delete": "Eliminar",

locales/fr/common.json

@@ -2656,6 +2656,7 @@
       "name_placeholder": "Nom du calendrier",
       "color": "Couleur",
       "change_color": "Changer la couleur",
+      "random_color": "Nouvelle couleur aléatoire",
       "add_calendar": "Ajouter un calendrier",
       "edit": "Modifier",
       "delete": "Supprimer",

locales/it/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Nome del calendario",
       "color": "Colore",
       "change_color": "Cambia colore",
+      "random_color": "Nuovo colore casuale",
       "add_calendar": "Aggiungi calendario",
       "edit": "Modifica",
       "delete": "Elimina",

locales/ja/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "カレンダー名",
       "color": "色",
       "change_color": "色を変更",
+      "random_color": "新しいランダムな色",
       "add_calendar": "カレンダーを追加",
       "edit": "編集",
       "delete": "削除",

locales/ko/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "캘린더 이름",
       "color": "색상",
       "change_color": "색상 변경",
+      "random_color": "새 무작위 색상",
       "add_calendar": "캘린더 추가",
       "edit": "수정",
       "delete": "삭제",

locales/lv/common.json

@@ -2641,6 +2641,7 @@
       "name_placeholder": "Kalendāra nosaukums",
       "color": "Krāsa",
       "change_color": "Mainīt krāsu",
+      "random_color": "Jauna nejauša krāsa",
       "add_calendar": "Pievienot kalendāru",
       "edit": "Rediģēt",
       "delete": "Dzēst",

locales/nl/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Agendanaam",
       "color": "Kleur",
       "change_color": "Kleur wijzigen",
+      "random_color": "Nieuwe willekeurige kleur",
       "add_calendar": "Agenda toevoegen",
       "edit": "Bewerken",
       "delete": "Verwijderen",

locales/pl/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Nazwa kalendarza",
       "color": "Kolor",
       "change_color": "Zmień kolor",
+      "random_color": "Nowy losowy kolor",
       "add_calendar": "Dodaj kalendarz",
       "edit": "Edytuj",
       "delete": "Usuń",

locales/pt/common.json

@@ -2656,6 +2656,7 @@
       "name_placeholder": "Nome do calendário",
       "color": "Cor",
       "change_color": "Alterar cor",
+      "random_color": "Nova cor aleatória",
       "add_calendar": "Adicionar calendário",
       "edit": "Editar",
       "delete": "Excluir",

locales/ru/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Название календаря",
       "color": "Цвет",
       "change_color": "Изменить цвет",
+      "random_color": "Новый случайный цвет",
       "add_calendar": "Добавить календарь",
       "edit": "Редактировать",
       "delete": "Удалить",

locales/tr/common.json

@@ -2656,6 +2656,7 @@
       "name_placeholder": "Takvim adı",
       "color": "Renk",
       "change_color": "Rengi değiştir",
+      "random_color": "Yeni rastgele renk",
       "add_calendar": "Takvim ekle",
       "edit": "Düzenle",
       "delete": "Sil",

locales/uk/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "Назва календаря",
       "color": "колір",
       "change_color": "Змінити колір",
+      "random_color": "Новий випадковий колір",
       "add_calendar": "Додати календар",
       "edit": "Редагувати",
       "delete": "Видалити",

locales/zh/common.json

@@ -2642,6 +2642,7 @@
       "name_placeholder": "日历名称",
       "color": "颜色",
       "change_color": "更改颜色",
+      "random_color": "随机新颜色",
       "add_calendar": "添加日历",
       "edit": "编辑",
       "delete": "删除",

stores/settings-store.ts

@@ -183,6 +183,11 @@ interface SettingsState {
   showBirthdayCalendar: boolean;
   birthdayCalendarColor: string;
 
+  // Per-viewer color overrides for shared calendars, keyed by
+  // sharedCalendarColorKey(). Lets each recipient recolor calendars shared
+  // with them without changing the owner's color (see #345).
+  sharedCalendarColors: Record<string, string>;
+
   // Contacts Display
   groupContactsByLetter: boolean;
 
@@ -274,6 +279,10 @@ interface SettingsState {
   setFolderIcon: (mailboxId: string, icon: string) => void;
   removeFolderIcon: (mailboxId: string) => void;
 
+  // Shared-calendar color overrides
+  setSharedCalendarColor: (key: string, color: string) => void;
+  removeSharedCalendarColor: (key: string) => void;
+
   // Trusted senders
   addTrustedSender: (email: string) => void;
   removeTrustedSender: (email: string) => void;
@@ -360,6 +369,8 @@ const DEFAULT_SETTINGS = {
   showBirthdayCalendar: false,
   birthdayCalendarColor: '#eab308',
 
+  sharedCalendarColors: {} as Record<string, string>,
+
   // Contacts Display
   groupContactsByLetter: true,
 
@@ -546,6 +557,7 @@ export const useSettingsStore = create<SettingsState>()(
           showTasksOnCalendar: state.showTasksOnCalendar,
           showBirthdayCalendar: state.showBirthdayCalendar,
           birthdayCalendarColor: state.birthdayCalendarColor,
+          sharedCalendarColors: state.sharedCalendarColors,
           groupContactsByLetter: state.groupContactsByLetter,
           expandedFilterView: state.expandedFilterView,
           showTimeInMonthView: state.showTimeInMonthView,
@@ -642,6 +654,16 @@ export const useSettingsStore = create<SettingsState>()(
         set({ folderIcons: rest });
       },
 
+      // Shared-calendar color override methods
+      setSharedCalendarColor: (key: string, color: string) => {
+        set({ sharedCalendarColors: { ...get().sharedCalendarColors, [key]: color } });
+      },
+
+      removeSharedCalendarColor: (key: string) => {
+        const { [key]: _, ...rest } = get().sharedCalendarColors;
+        set({ sharedCalendarColors: rest });
+      },
+
       // Trusted senders methods
       addTrustedSender: (email: string) => {
         const normalizedEmail = email.toLowerCase().trim();