feat: implement calendar management features including create, update, and delete functionalities

components/calendar/calendar-sidebar-panel.tsx

@@ -1,21 +1,49 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { useTranslations } from "next-intl";
+import { Globe } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
+import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
+import { useCalendarStore } from "@/stores/calendar-store";
 
 interface CalendarSidebarPanelProps {
   calendars: Calendar[];
   selectedCalendarIds: string[];
   onToggleVisibility: (id: string) => void;
+  onColorChange?: (calendarId: string, color: string) => void;
 }
 
 export function CalendarSidebarPanel({
   calendars,
   selectedCalendarIds,
   onToggleVisibility,
+  onColorChange,
 }: CalendarSidebarPanelProps) {
   const t = useTranslations("calendar");
+  const isSubscriptionCalendar = useCalendarStore((s) => s.isSubscriptionCalendar);
+
+  const [colorPickerId, setColorPickerId] = useState<string | null>(null);
+  const colorPickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!colorPickerId) return;
+    const handleClick = (e: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(e.target as Node)) {
+        setColorPickerId(null);
+      }
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setColorPickerId(null);
+    };
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [colorPickerId]);
 
   if (calendars.length === 0) return null;
 
@@ -30,25 +58,53 @@ export function CalendarSidebarPanel({
           const color = cal.color || "#3b82f6";
 
           return (
-            <button
-              key={cal.id}
-              onClick={() => onToggleVisibility(cal.id)}
-              className={cn(
-                "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
-                "hover:bg-muted"
-              )}
-            >
-              <span
+            <div key={cal.id} className="relative">
+              <button
+                onClick={() => onToggleVisibility(cal.id)}
+                onContextMenu={(e) => {
+                  if (onColorChange) {
+                    e.preventDefault();
+                    setColorPickerId(colorPickerId === cal.id ? null : cal.id);
+                  }
+                }}
                 className={cn(
-                  "w-3 h-3 rounded-sm border-2 flex-shrink-0 transition-colors",
-                  isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
+                  "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
+                  "hover:bg-muted"
                 )}
-                style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
-              />
-              <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
-                {cal.name}
-              </span>
-            </button>
+              >
+                <span
+                  className={cn(
+                    "w-3 h-3 rounded-sm border-2 flex-shrink-0 transition-colors",
+                    isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
+                  )}
+                  style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
+                />
+                <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
+                  {cal.name}
+                </span>
+                {isSubscriptionCalendar(cal.id) && (
+                  <Globe className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                )}
+              </button>
+
+              {/* Color picker popover on right-click */}
+              {colorPickerId === cal.id && onColorChange && (
+                <div
+                  ref={colorPickerRef}
+                  className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-3 w-56"
+                >
+                  <p className="text-xs font-medium text-muted-foreground mb-2">{t("management.change_color")}</p>
+                  <CalendarColorPicker
+                    value={color}
+                    onChange={(c) => {
+                      onColorChange(cal.id, c);
+                      setColorPickerId(null);
+                    }}
+                    allowCustom
+                  />
+                </div>
+              )}
+            </div>
           );
         })}
       </div>