fix: use the standard icons, spinner and menu in Calendar: CopyPlus for Duplicate, Link for links, Share2, and a keyboard-ready view menu

components/calendar/__tests__/calendar-app.test.tsx

@@ -580,3 +580,14 @@ describe('CalendarApp in the demo', () => {
     }
   });
 });
+
+describe('CalendarApp view menu', () => {
+  it('opens as a menu the keyboard can use and switches the view', async () => {
+    renderApp();
+    fireEvent.click(screen.getByTestId('calendar-view-menu'), { detail: 0 });
+    const day = await screen.findByRole('menuitemradio', { name: /views\.day/ });
+    await waitFor(() => expect(document.activeElement?.getAttribute('role')).toBe('menuitemradio'));
+    fireEvent.click(day);
+    expect(useCalendarStore.getState().viewMode).toBe('day');
+  });
+});

components/calendar/calendar-app.tsx

@@ -20,6 +20,7 @@ import { toast } from "@/stores/toast-store";
 import { useIsDesktop, useIsMobile } from "@/hooks/use-media-query";
 import { useAccountPrincipalEmails } from "@/hooks/use-account-principal-emails";
 import { Button } from "@/components/ui/button";
+import { PaneSpinner, Spinner } from "@/components/ui/spinner";
 import { CalendarToolbar } from "@/components/calendar/calendar-toolbar";
 import { CalendarMonthView } from "@/components/calendar/calendar-month-view";
 import { CalendarWeekView } from "@/components/calendar/calendar-week-view";
@@ -1719,11 +1720,7 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
 
   const renderView = () => {
     if (isLoading && calendars.length === 0) {
-      return (
-        <div className="flex items-center justify-center flex-1 text-muted-foreground">
-          <p className="text-sm">{t("status.loading_calendars")}</p>
-        </div>
-      );
+      return <PaneSpinner label={t("status.loading_calendars")} className="flex-1" />;
     }
 
     const viewContent = (() => {
@@ -1867,7 +1864,7 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
         {viewContent}
         {isLoadingEvents && calendars.length > 0 && events.length === 0 && (
           <div className="absolute inset-0 bg-background/50 flex items-center justify-center pointer-events-none">
-            <div className="h-5 w-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+            <Spinner label={t("status.loading_events")} />
           </div>
         )}
       </div>

components/calendar/calendar-sidebar-panel.tsx

@@ -416,7 +416,7 @@ export function CalendarSidebarPanel({
         )}
         {canShare && (
           <ContextMenuItem
-            icon={Users}
+            icon={Share2}
             label={tMgmt('share')}
             onClick={() => { closeContextMenu(); onShareCalendar(cal); }}
           />

components/calendar/calendar-toolbar.tsx

@@ -101,8 +101,12 @@ export function CalendarToolbar({
   const menuViews: CalendarViewMode[] = enableCalendarTasks
     ? ["day", "week", "month", "agenda", "tasks"]
     : ["day", "week", "month", "agenda"];
-  const [showViewMenu, setShowViewMenu] = useState(false);
-  const viewMenuRef = useRef<HTMLDivElement>(null);
+  const {
+    contextMenu: viewMenu,
+    openContextMenuFrom: openViewMenuFrom,
+    closeContextMenu: closeViewMenu,
+    menuRef: viewMenuRef,
+  } = useContextMenu<true>();
   const [showCalendarDropdown, setShowCalendarDropdown] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -182,25 +186,6 @@ export function CalendarToolbar({
     </>
   ) : null;
 
-  useEffect(() => {
-    if (!showViewMenu) return;
-    function handleClickOutside(e: MouseEvent) {
-      if (viewMenuRef.current && !viewMenuRef.current.contains(e.target as Node)) {
-        setShowViewMenu(false);
-      }
-    }
-    function handleKey(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        setShowViewMenu(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleKey);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleKey);
-    };
-  }, [showViewMenu]);
 
 
 
@@ -429,42 +414,39 @@ export function CalendarToolbar({
 
       {moreButton}
 
-      <div className="relative ms-1" ref={viewMenuRef}>
+      <div className="relative ms-1">
         <Button
           variant="outline"
-          size="sm"
-          className="h-8 gap-1"
-          onClick={() => setShowViewMenu((v) => !v)}
+          size="xs"
+          className="gap-1"
+          onClick={(e) => openViewMenuFrom(e.currentTarget, true, "end")}
           aria-haspopup="menu"
-          aria-expanded={showViewMenu}
+          aria-expanded={viewMenu.isOpen}
           aria-label={t("toolbar.select_view", { view: currentViewLabel })}
           data-testid="calendar-view-menu"
         >
           {currentViewLabel}
           <ChevronDown className="w-3 h-3" />
         </Button>
-        {showViewMenu && (
-          <div
-            role="menu"
-            className="absolute top-full end-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-1 min-w-[180px]"
-          >
-            {menuViews.map((v) => (
-              <button
-                key={v}
-                role="menuitemradio"
-                aria-checked={v === viewMode}
-                onClick={() => { onViewModeChange(v); setShowViewMenu(false); }}
-                className={cn(
-                  "flex items-center justify-between gap-6 w-full px-3 py-2 rounded-md text-sm transition-colors",
-                  v === viewMode ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted text-foreground",
-                )}
-              >
-                <span>{t(`views.${v}`)}</span>
-                <kbd className="font-sans text-xs text-muted-foreground">{VIEW_SHORTCUTS[v]}</kbd>
-              </button>
-            ))}
-          </div>
-        )}
+        <ContextMenu ref={viewMenuRef} isOpen={viewMenu.isOpen} position={viewMenu.position} onClose={closeViewMenu}>
+          {menuViews.map((v) => (
+            <button
+              key={v}
+              type="button"
+              role="menuitemradio"
+              aria-checked={v === viewMode}
+              onClick={() => { closeViewMenu(); onViewModeChange(v); }}
+              className={cn(
+                "flex items-center justify-between gap-6 w-full px-3 py-2 rounded-md text-sm transition-colors outline-none focus-visible:bg-accent",
+                v === viewMode ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted text-foreground",
+              )}
+            >
+              <span>{t(`views.${v}`)}</span>
+              {/* The key, on devices with a keyboard (R8). */}
+              <kbd className="font-sans text-xs text-muted-foreground pointer-coarse:hidden">{VIEW_SHORTCUTS[v]}</kbd>
+            </button>
+          ))}
+        </ContextMenu>
       </div>
     </div>
   );

components/calendar/event-context-menu.tsx

@@ -8,11 +8,11 @@ import {
 } from "@/components/ui/context-menu";
 import {
   Pencil,
+  CopyPlus,
   Copy,
   Download,
-  ClipboardCopy,
+  Video,
   Link as LinkIcon,
-  CalendarArrowUp as CalendarLinkIcon,
   Trash2,
 } from "@/components/icons";
 import type { CalendarEvent } from "@/lib/jmap/types";
@@ -69,7 +69,7 @@ export function EventContextMenu({
   return (
     <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
       {editable && <ContextMenuItem icon={Pencil} label={t("events.edit")} onClick={handle(onEdit)} />}
-      <ContextMenuItem icon={Copy} label={t("events.duplicate")} onClick={handle(onDuplicate)} />
+      <ContextMenuItem icon={CopyPlus} label={t("events.duplicate")} onClick={handle(onDuplicate)} />
       <ContextMenuSeparator />
       <ContextMenuItem
         icon={Download}
@@ -77,13 +77,13 @@ export function EventContextMenu({
         onClick={handle(onExportICS)}
       />
       <ContextMenuItem
-        icon={ClipboardCopy}
+        icon={Copy}
         label={t("events.copy_title")}
         onClick={handle(onCopyTitle)}
       />
       {hasMeetingLink && onCopyMeetingLink && (
         <ContextMenuItem
-          icon={LinkIcon}
+          icon={Video}
           label={t("events.copy_link")}
           onClick={handle(onCopyMeetingLink)}
         />
@@ -91,7 +91,7 @@ export function EventContextMenu({
       {/* Permalink into Bulwark (#733) - distinct from the meeting URL above,
           which points at whatever conferencing tool the organiser used. */}
       <ContextMenuItem
-        icon={CalendarLinkIcon}
+        icon={LinkIcon}
         label={tDeepLink("copy_event")}
         onClick={handle(() => {
           void copyLink(buildCalendarPath({

components/calendar/event-detail-popover.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 import { LinkifiedText } from "@/components/ui/linkified-text";
 import {
   X, Clock, MapPin, Video, Users, Repeat, Bell, AlignLeft,
-  Pencil, Trash2, Copy, Send, Check, MoreVertical, Calendar as CalendarIcon,
+  Pencil, Trash2, Copy, CopyPlus, Send, Check, MoreVertical, Calendar as CalendarIcon,
 } from "@/components/icons";
 import { format, isSameDay } from "date-fns";
 import { cn } from "@/lib/utils";
@@ -383,7 +383,7 @@ export function EventDetailPopover({
           aria-label={onMore ? t("toolbar.more") : t("events.duplicate")}
           title={onMore ? t("toolbar.more") : t("events.duplicate")}
         >
-          {onMore ? <MoreVertical className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+          {onMore ? <MoreVertical className="w-4 h-4" /> : <CopyPlus className="w-4 h-4" />}
         </button>
         <button
           type="button"

components/calendar/event-modal.tsx

@@ -6,7 +6,7 @@ import { toast } from "@/stores/toast-store";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { LinkifiedText } from "@/components/ui/linkified-text";
-import { X, Trash2, Users, CalendarDays, Copy, Pencil, Clock, MapPin, Video, Repeat, Bell, AlignLeft, AlertTriangle, MoreVertical } from "@/components/icons";
+import { X, Trash2, Users, CalendarDays, CopyPlus, Pencil, Clock, MapPin, Video, Repeat, Bell, AlignLeft, AlertTriangle, MoreVertical } from "@/components/icons";
 import { IconButton } from "@/components/ui/icon-button";
 import { ParticipantStatusBadge, RsvpButtons } from "./rsvp-buttons";
 import { format, parseISO, addHours, isSameDay } from "date-fns";
@@ -1270,7 +1270,7 @@ export function EventModal({
             )}
             {onDuplicate && (
               <Button variant="ghost" size="sm" onClick={handleDuplicate} aria-label={t("events.duplicate")}>
-                <Copy className="w-4 h-4 me-1" />
+                <CopyPlus className="w-4 h-4 me-1" />
                 {t("events.duplicate")}
               </Button>
             )}
@@ -1621,7 +1621,7 @@ export function EventModal({
               aria-label={t("events.duplicate")}
               className="w-full"
             >
-              <Copy className="w-4 h-4 me-1" />
+              <CopyPlus className="w-4 h-4 me-1" />
               {t("events.duplicate")}
             </Button>
           )}