improvement(scheduled-tasks): extract shared CalendarDayCell for the weekday picker

Pull the calendar's day pill into one CalendarDayCell component (the
single source of the day-pill chrome: primary fill when selected, the
border ring on today, fixed 30px square or full-width). The calendar grid
and the weekly "Repeat on" toggles now both render it, so the call sites
are props-only (no re-derived chipVariants classes) and the two surfaces
stay visually identical by construction.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-modal/recurrence-section.tsx

@@ -3,13 +3,12 @@
 import { useRef } from 'react'
 import { format } from 'date-fns'
 import {
+  CalendarDayCell,
   ChipDatePicker,
   ChipModalField,
   ChipModalSeparator,
-  chipVariants,
   Switch,
 } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
 import type {
   MonthlyMode,
   Recurrence,
@@ -226,28 +225,24 @@ export function RecurrenceSection({ recurrence, onChange, launchDate }: Recurren
 
             {recurrence.frequency === 'weekly' && (
               <ChipModalField type='custom' title='Repeat on'>
-                {/* A one-row extract of the calendar: seven equal day cells that
-                    reuse its exact day-cell grammar (`primary` fill when on, bare
-                    `--text-body` when off) so the weekday toggles read as a sibling
-                    of the date picker rather than a separate segmented bar. */}
+                {/* A one-row extract of the calendar: seven equal day cells built
+                    from the same {@link CalendarDayCell} the date picker uses, so
+                    the weekday toggles read as a sibling of the calendar rather than
+                    a separate segmented bar. */}
                 <div className='grid grid-cols-7 gap-1'>
                   {WEEKDAYS.map((weekday) => {
                     const selected = selectedWeekdays.includes(weekday.value)
                     return (
-                      <button
+                      <CalendarDayCell
                         key={weekday.value}
-                        type='button'
+                        selected={selected}
+                        fullWidth
                         aria-pressed={selected}
                         aria-label={weekday.name}
                         onClick={() => handleWeekdayToggle(weekday.value)}
-                        className={cn(
-                          chipVariants({ variant: selected ? 'primary' : undefined, flush: true }),
-                          'h-[30px] w-full justify-center p-0',
-                          !selected && 'text-[var(--text-body)]'
-                        )}
                       >
                         {weekday.short}
-                      </button>
+                      </CalendarDayCell>
                     )
                   })}
                 </div>

apps/sim/components/emcn/components/calendar/calendar-day-cell.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
+import { chipVariants } from '@/components/emcn/components/chip/chip'
+import { cn } from '@/lib/core/utils/cn'
+
+export interface CalendarDayCellProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** Strong `primary` fill — the selected calendar day or an active weekday toggle. */
+  selected?: boolean
+  /** The `border` shadow-ring marking today. Ignored while `selected`. */
+  today?: boolean
+  /**
+   * Fills the container width (the weekday-toggle row) instead of the fixed
+   * 30px square used by the calendar's month grid.
+   */
+  fullWidth?: boolean
+  children: ReactNode
+}
+
+/**
+ * The single day pill shared by the {@link Calendar} month grid and any
+ * chip-aligned day toggle (e.g. the scheduled-task weekly "Repeat on" row).
+ * Built from `chipVariants` so the chrome — height, radius, centered glyph,
+ * `primary` selected fill, `border` today ring — lives in one place and the
+ * row of weekday toggles reads as a sibling of the date picker rather than a
+ * separate control.
+ *
+ * @example
+ * <CalendarDayCell selected={isSelected} today={isToday} onClick={pick}>{day}</CalendarDayCell>
+ *
+ * @example
+ * // Weekday toggle: fill the column, drive selection with `aria-pressed`.
+ * <CalendarDayCell selected={on} fullWidth aria-pressed={on} aria-label='Monday' onClick={toggle}>M</CalendarDayCell>
+ */
+export const CalendarDayCell = forwardRef<HTMLButtonElement, CalendarDayCellProps>(
+  function CalendarDayCell(
+    { selected = false, today = false, fullWidth = false, className, children, type, ...props },
+    ref
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type ?? 'button'}
+        className={cn(
+          chipVariants({
+            variant: selected ? 'primary' : today ? 'border' : undefined,
+            flush: true,
+          }),
+          'justify-center p-0',
+          fullWidth ? 'h-[30px] w-full' : 'size-[30px]',
+          !selected && 'text-[var(--text-body)]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  }
+)

apps/sim/components/emcn/components/calendar/calendar.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { CalendarDayCell } from '@/components/emcn/components/calendar/calendar-day-cell'
 import { Chip, chipVariants } from '@/components/emcn/components/chip/chip'
 import { chipContentLabelClass } from '@/components/emcn/components/chip/chip-chrome'
 import { cn } from '@/lib/core/utils/cn'
@@ -172,20 +173,9 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
 
           return (
             <div key={day} className='flex h-[34px] items-center justify-center'>
-              <button
-                type='button'
-                onClick={() => selectDay(day)}
-                className={cn(
-                  chipVariants({
-                    variant: isSelected ? 'primary' : isToday ? 'border' : undefined,
-                    flush: true,
-                  }),
-                  'size-[30px] justify-center p-0',
-                  !isSelected && 'text-[var(--text-body)]'
-                )}
-              >
+              <CalendarDayCell selected={isSelected} today={isToday} onClick={() => selectDay(day)}>
                 {day}
-              </button>
+              </CalendarDayCell>
             </div>
           )
         })}

apps/sim/components/emcn/components/index.ts

@@ -3,6 +3,10 @@ export { Badge } from './badge/badge'
 export { Banner } from './banner/banner'
 export { Button, buttonVariants } from './button/button'
 export { ButtonGroup, ButtonGroupItem } from './button-group/button-group'
+export {
+  CalendarDayCell,
+  type CalendarDayCellProps,
+} from './calendar/calendar-day-cell'
 export { Checkbox } from './checkbox/checkbox'
 export { Chip, ChipLink, chipVariants } from './chip/chip'
 export { ChipChevronDown } from './chip/chip-chevron'