diff --git a/src/components/database/fullcalendar/event/EventDisplay.tsx b/src/components/database/fullcalendar/event/EventDisplay.tsx index e0515ff1e..b15d342cf 100644 --- a/src/components/database/fullcalendar/event/EventDisplay.tsx +++ b/src/components/database/fullcalendar/event/EventDisplay.tsx @@ -1,4 +1,8 @@ import { EventApi, EventContentArg } from '@fullcalendar/core'; +import { useMemo } from 'react'; + +import { useFieldsSelector, isAIFieldType } from '@/application/database-yjs'; +import { useAIEnabled } from '@/components/app/app.hooks'; import { MonthAllDayEvent, @@ -26,6 +30,14 @@ export function EventDisplay({ className, }: EventDisplayProps) { const rowId = event.extendedProps?.rowId; + const fields = useFieldsSelector(); + const aiEnabled = useAIEnabled(); + + const showFields = useMemo(() => { + return fields.filter( + (field) => !field.isPrimary && (aiEnabled || !isAIFieldType(field.fieldType)) + ); + }, [fields, aiEnabled]); if (!rowId) return null; @@ -54,6 +66,7 @@ export function EventDisplay({ showLeftIndicator={showLeftIndicator} className={className} rowId={rowId} + showFields={showFields} /> ); diff --git a/src/components/database/fullcalendar/event/components/EventPropertiesList.tsx b/src/components/database/fullcalendar/event/components/EventPropertiesList.tsx new file mode 100644 index 000000000..e65dc91e7 --- /dev/null +++ b/src/components/database/fullcalendar/event/components/EventPropertiesList.tsx @@ -0,0 +1,26 @@ +import { Column } from '@/application/database-yjs'; +import CardField from '@/components/database/components/field/CardField'; + +interface EventPropertiesListProps { + rowId: string; + showFields?: Column[]; +} + +export function EventPropertiesList({ rowId, showFields }: EventPropertiesListProps) { + if (!showFields || showFields.length === 0) return null; + + // Cap to first 5 fields to prevent dense calendar views from becoming too tall/noisy + const displayedFields = showFields.slice(0, 5); + + return ( +
+ {displayedFields.map((field) => ( + + ))} +
+ ); +} diff --git a/src/components/database/fullcalendar/event/components/MonthAllDayEvent.tsx b/src/components/database/fullcalendar/event/components/MonthAllDayEvent.tsx index e786d5537..0dd1cc1ba 100644 --- a/src/components/database/fullcalendar/event/components/MonthAllDayEvent.tsx +++ b/src/components/database/fullcalendar/event/components/MonthAllDayEvent.tsx @@ -2,6 +2,8 @@ import { EventApi, EventContentArg } from '@fullcalendar/core'; import { useCallback } from 'react'; import { cn } from '@/lib/utils'; +import { Column } from '@/application/database-yjs'; +import { EventPropertiesList } from './EventPropertiesList'; import { EventIconButton } from './EventIconButton'; @@ -12,6 +14,7 @@ interface MonthAllDayEventProps { showLeftIndicator?: boolean; className?: string; rowId: string; + showFields?: Column[]; } export function MonthAllDayEvent({ @@ -21,6 +24,7 @@ export function MonthAllDayEvent({ showLeftIndicator = true, className, rowId, + showFields, }: MonthAllDayEventProps) { const isEventStart = eventInfo.isStart; const isEventEnd = eventInfo.isEnd; @@ -113,8 +117,9 @@ export function MonthAllDayEvent({
- {getDisplayContent()} + {getDisplayContent()}
+
diff --git a/src/components/database/fullcalendar/event/components/MonthMultiDayTimedEvent.tsx b/src/components/database/fullcalendar/event/components/MonthMultiDayTimedEvent.tsx index 212310f8e..1e6148ee1 100644 --- a/src/components/database/fullcalendar/event/components/MonthMultiDayTimedEvent.tsx +++ b/src/components/database/fullcalendar/event/components/MonthMultiDayTimedEvent.tsx @@ -4,6 +4,8 @@ import { useCallback } from 'react'; import { useTimeFormat } from '@/components/database/fullcalendar/hooks'; import { cn } from '@/lib/utils'; +import { Column } from '@/application/database-yjs'; +import { EventPropertiesList } from './EventPropertiesList'; import { EventIconButton } from './EventIconButton'; @@ -14,6 +16,7 @@ interface MonthMultiDayTimedEventProps { showLeftIndicator?: boolean; className?: string; rowId: string; + showFields?: Column[]; } export function MonthMultiDayTimedEvent({ @@ -23,6 +26,7 @@ export function MonthMultiDayTimedEvent({ showLeftIndicator = true, className, rowId, + showFields, }: MonthMultiDayTimedEventProps) { const { formatTimeDisplay } = useTimeFormat(); const isEventStart = eventInfo.isStart; @@ -122,8 +126,9 @@ export function MonthMultiDayTimedEvent({ )} - {getDisplayContent()} + {getDisplayContent()} + diff --git a/src/components/database/fullcalendar/event/components/MonthTimedEvent.tsx b/src/components/database/fullcalendar/event/components/MonthTimedEvent.tsx index fa602fb75..52cbb282b 100644 --- a/src/components/database/fullcalendar/event/components/MonthTimedEvent.tsx +++ b/src/components/database/fullcalendar/event/components/MonthTimedEvent.tsx @@ -3,6 +3,8 @@ import dayjs from 'dayjs'; import { useTimeFormat } from '@/components/database/fullcalendar/hooks'; import { cn } from '@/lib/utils'; +import { Column } from '@/application/database-yjs'; +import { EventPropertiesList } from './EventPropertiesList'; import { EventIconButton } from './EventIconButton'; @@ -13,9 +15,10 @@ interface MonthTimedEventProps { showLeftIndicator?: boolean; className?: string; rowId: string; + showFields?: Column[]; } -export function MonthTimedEvent({ event, onClick, showLeftIndicator = true, className, rowId }: MonthTimedEventProps) { +export function MonthTimedEvent({ event, onClick, showLeftIndicator = true, className, rowId, showFields }: MonthTimedEventProps) { const { formatTimeDisplay } = useTimeFormat(); const handleClick = () => { onClick?.(event); @@ -48,9 +51,10 @@ export function MonthTimedEvent({ event, onClick, showLeftIndicator = true, clas )}
- {event.title || 'Untitled'} + {event.title || 'Untitled'}
+ diff --git a/src/components/database/fullcalendar/event/components/WeekAllDayEvent.tsx b/src/components/database/fullcalendar/event/components/WeekAllDayEvent.tsx index 2b11b94af..f9bb51551 100644 --- a/src/components/database/fullcalendar/event/components/WeekAllDayEvent.tsx +++ b/src/components/database/fullcalendar/event/components/WeekAllDayEvent.tsx @@ -2,6 +2,8 @@ import { EventApi, EventContentArg } from '@fullcalendar/core'; import { useCallback, useMemo } from 'react'; import { cn } from '@/lib/utils'; +import { Column } from '@/application/database-yjs'; +import { EventPropertiesList } from './EventPropertiesList'; import { EventIconButton } from './EventIconButton'; @@ -12,6 +14,7 @@ interface WeekAllDayEventProps { showLeftIndicator?: boolean; className?: string; rowId: string; + showFields?: Column[]; } export function WeekAllDayEvent({ @@ -21,6 +24,7 @@ export function WeekAllDayEvent({ showLeftIndicator = true, className, rowId, + showFields, }: WeekAllDayEventProps) { const isEventStart = eventInfo.isStart; const isEventEnd = eventInfo.isEnd; @@ -85,7 +89,7 @@ export function WeekAllDayEvent({ return (
- {getDisplayContent()} + {getDisplayContent()}
); }, [getDisplayContent, rowId]); @@ -121,6 +125,7 @@ export function WeekAllDayEvent({ {showLeftIndicator && !hideLine &&
}
{renderAllDayEvent} +
diff --git a/src/components/database/fullcalendar/event/components/WeekTimedEvent.tsx b/src/components/database/fullcalendar/event/components/WeekTimedEvent.tsx index d1e188cbb..a1d416808 100644 --- a/src/components/database/fullcalendar/event/components/WeekTimedEvent.tsx +++ b/src/components/database/fullcalendar/event/components/WeekTimedEvent.tsx @@ -4,6 +4,8 @@ import { useCallback, useMemo } from 'react'; import { useTimeFormat } from '@/components/database/fullcalendar/hooks'; import { cn } from '@/lib/utils'; +import { Column } from '@/application/database-yjs'; +import { EventPropertiesList } from './EventPropertiesList'; import { EventIconButton } from './EventIconButton'; @@ -14,9 +16,10 @@ interface WeekTimedEventProps { showLeftIndicator?: boolean; className?: string; rowId: string; + showFields?: Column[]; } -export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId }: WeekTimedEventProps) { +export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId, showFields }: WeekTimedEventProps) { const { formatTimeDisplay } = useTimeFormat(); const isEventStart = eventInfo.isStart; const isEventEnd = eventInfo.isEnd; @@ -94,7 +97,7 @@ export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId }: : undefined } > - {getDisplayContent()} + {getDisplayContent()} {moreThanHalfHour ? '' : ','} @@ -107,9 +110,10 @@ export function WeekTimedEvent({ event, eventInfo, onClick, className, rowId }: )} + ); - }, [event.end, event.start, rowId, getDisplayContent, isEventStart, formatTimeDisplay, isRange]); + }, [event.end, event.start, rowId, getDisplayContent, isEventStart, formatTimeDisplay, isRange, showFields]); const isShortEvent = event.end && dayjs(event.end).diff(dayjs(event.start), 'minute') < 30; const isCompactLayout = !event.end || isShortEvent; diff --git a/src/components/database/fullcalendar/event/components/index.ts b/src/components/database/fullcalendar/event/components/index.ts index eb7c80082..9c1aaaaa0 100644 --- a/src/components/database/fullcalendar/event/components/index.ts +++ b/src/components/database/fullcalendar/event/components/index.ts @@ -3,4 +3,5 @@ export { MonthTimedEvent } from './MonthTimedEvent'; export { MonthMultiDayTimedEvent } from './MonthMultiDayTimedEvent'; export { WeekAllDayEvent } from './WeekAllDayEvent'; export { WeekTimedEvent } from './WeekTimedEvent'; -export { EventIconButton } from './EventIconButton'; \ No newline at end of file +export { EventIconButton } from './EventIconButton'; +export { EventPropertiesList } from './EventPropertiesList'; \ No newline at end of file diff --git a/src/components/editor/components/leaf/Leaf.tsx b/src/components/editor/components/leaf/Leaf.tsx index 3ffb02137..ac07cb34d 100644 --- a/src/components/editor/components/leaf/Leaf.tsx +++ b/src/components/editor/components/leaf/Leaf.tsx @@ -62,7 +62,7 @@ export function Leaf({ attributes, children, leaf, text }: RenderLeafProps) { if (leaf.code && !(leaf.formula || leaf.mention || leaf.reference)) { newChildren = ( - + {newChildren} ); diff --git a/tsconfig.json b/tsconfig.json index 7e79824f4..028eff918 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,6 +27,7 @@ "jest" ], "typeRoots": [ + "./node_modules/@types", "./node_modules/@fullcalendar" ], "baseUrl": ".",