Use shared modals and combine selected-day actions

src/components/design-system/CalendarHeatmap.tsx

@@ -24,6 +24,7 @@ export function CalendarHeatmap({
   onSelectDate,
   historyLabel,
   legend,
+  selectedDayAction,
 }: {
   days: CalendarDay[];
   unit: string;
@@ -35,6 +36,7 @@ export function CalendarHeatmap({
   onSelectDate?: (date: string) => void;
   historyLabel?: string;
   legend?: ReactNode;
+  selectedDayAction?: (date: string) => ReactNode;
 }) {
   const [months, setMonths] = useState<MonthView | "custom">(12);
   const [customRange, setCustomRange] = useState<{ from: string; to: string } | null>(null);
@@ -281,8 +283,8 @@ export function CalendarHeatmap({
           </p>
         </details>
       </div>
-      <div id={inspectorId} className="ds-date-inspector" aria-live="polite">
-        <div className="ds-date-inspector-heading">
+      <div id={inspectorId} className="ds-date-inspector">
+        <div className="ds-date-inspector-heading" aria-live="polite">
           <CalendarDays size={22} aria-hidden="true" />
           <div>
             <span className="ds-eyebrow">SELECTED DAY</span>
@@ -297,6 +299,7 @@ export function CalendarHeatmap({
             <span className="ds-date-inspector-status">{describeDay(selected, unit)}</span>
           </div>
         </div>
+        {selectedDayAction && <div className="ds-action-row ds-date-inspector-actions">{selectedDayAction(selected.date)}</div>}
       </div>
     </div>
   );