fix(agenda): fix tablet agenda view

lib/ui/components/AgendaCard.tsx

@@ -86,10 +86,7 @@ export const AgendaCard = ({
   const { colors, dark, palettes, shapes, spacing, fontSizes } = useTheme();
 
   const isTablet = useMemo(() => isTabletHelper(), []);
-  const showsIcon = useMemo(
-    () => iconColor && (icon || isTablet),
-    [icon, iconColor, isTablet],
-  );
+  const showsIcon = useMemo(() => iconColor && icon, [icon, iconColor]);
 
   const secondaryIfLecture = useMemo(
     () =>
@@ -136,7 +133,6 @@ export const AgendaCard = ({
         <Col
           gap={isCompact ? 0.5 : 2}
           style={
-            !isTablet &&
             isCompact && { height: '100%', justifyContent: 'space-between' }
           }
         >
@@ -157,15 +153,24 @@ export const AgendaCard = ({
 
           <Stack
             {...(isCompact
-              ? { direction: 'column', flexGrow: 1 }
+              ? {
+                  direction: !isTablet ? 'column' : 'row',
+                  flexGrow: 1,
+                  gap: isTablet ? 2 : undefined,
+                }
               : { align: 'center', gap: 2 })}
           >
             {showsIcon && <AgendaIcon icon={icon} color={iconColor!} />}
             <Text
               style={[
                 styles.title,
-                isCompact ? styles.titleCompact : undefined,
+                isCompact
+                  ? isTablet
+                    ? styles.titleCompactTablet
+                    : styles.titleCompact
+                  : undefined,
               ]}
+              numberOfLines={isCompact ? (isTablet ? 2 : 3) : undefined}
             >
               {title}
             </Text>
@@ -223,10 +228,6 @@ const createStyles = ({
   dark,
 }: Theme) =>
   StyleSheet.create({
-    titleContainer: {
-      flex: 1,
-      alignItems: 'center',
-    },
     title: {
       flex: 1,
       fontWeight: fontWeights.semibold,
@@ -237,8 +238,9 @@ const createStyles = ({
       fontSize: fontSizes.xs,
       lineHeight: fontSizes.xs * 1.3,
     },
-    titleWithIcon: {
-      marginLeft: spacing[1.5],
+    titleCompactTablet: {
+      fontSize: fontSizes.sm,
+      lineHeight: fontSizes.xs * 1.3,
     },
     touchable: {
       paddingHorizontal: spacing[5],

lib/ui/components/calendar/CalendarBody.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   Platform,
   SafeAreaView,
@@ -12,7 +12,7 @@ import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
 import { Theme } from '@lib/ui/types/Theme';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 
-import { DateTime, Interval } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { useNow } from '../../hooks/calendar/useNow';
 import { usePanResponder } from '../../hooks/calendar/usePanResponder';
@@ -25,8 +25,8 @@ import {
 } from '../../types/Calendar';
 import {
   HOURS,
-  getMaxOverlappingEventsCount,
   getRelativeTopInDay,
+  getStyledEvents,
   isToday,
 } from '../../utils/calendar';
 import { CalendarEvent } from './CalendarEvent';
@@ -90,6 +90,12 @@ export const CalendarBody = <T extends ICalendarEventBase>({
 
   const styles = useStylesheet(createStyles);
 
+  const styledEvents = useMemo(() => getStyledEvents(events), [events]);
+  const styledAllDayEvents = useMemo(
+    () => getStyledEvents(allDayEvents),
+    [allDayEvents],
+  );
+
   useEffect(() => {
     let timeout: NodeJS.Timeout;
     if (scrollView.current && scrollOffsetMinutes && Platform.OS !== 'ios') {
@@ -123,27 +129,14 @@ export const CalendarBody = <T extends ICalendarEventBase>({
   );
 
   const _renderMappedEvent = useCallback(
-    (event: T, index: number, dailyEvents: T[]) => {
-      const eventTime = Interval.fromDateTimes(event.start, event.end);
-      const overlappingEvents = dailyEvents.filter(e =>
-        eventTime.overlaps(Interval.fromDateTimes(e.start, e.end)),
-      );
-      const overlappingEventsCount = getMaxOverlappingEventsCount(
-        event,
-        overlappingEvents,
-      );
-      let eventIndex = overlappingEvents.indexOf(event);
-      if (eventIndex === -1) eventIndex = 0;
-
+    (event: T, index: number, _: T[]) => {
       return (
         <CalendarEvent
           key={`${index}${event.start}${event.title}${event.end}`}
           event={event}
           onPressEvent={onPressEvent}
           eventCellStyle={eventCellStyle}
           showTime={showTime}
-          eventCount={overlappingEventsCount}
-          eventOrder={eventIndex}
           overlapOffset={overlapOffset}
           renderEvent={renderEvent}
           ampm={ampm}
@@ -237,7 +230,7 @@ export const CalendarBody = <T extends ICalendarEventBase>({
                       isLastDate && { borderRightWidth: 0 },
                     ]}
                   >
-                    {allDayEvents
+                    {styledAllDayEvents
                       .filter(({ end }) => end.hasSame(date, 'day'))
                       .map(_renderMappedEvent)}
                   </View>
@@ -256,7 +249,7 @@ export const CalendarBody = <T extends ICalendarEventBase>({
                   />
                 ))}
 
-                {events
+                {styledEvents
                   .filter(
                     ({ end, start }) =>
                       start.hasSame(date, 'day') && end.hasSame(date, 'day'),

lib/ui/components/calendar/CalendarEvent.tsx

@@ -8,19 +8,14 @@ import {
   EventRenderer,
   ICalendarEventBase,
 } from '../../types/Calendar';
-import {
-  getRelativeTopInDay,
-  getStyleForOverlappingEvent,
-} from '../../utils/calendar';
+import { getRelativeTopInDay } from '../../utils/calendar';
 import { DefaultCalendarEventRenderer } from './DefaultCalendarEventRenderer';
 
 interface CalendarEventProps<T extends ICalendarEventBase> {
   event: T;
   onPressEvent?: (event: T) => void;
   eventCellStyle?: EventCellStyle<T>;
   showTime: boolean;
-  eventCount?: number;
-  eventOrder?: number;
   overlapOffset?: number;
   renderEvent?: EventRenderer<T>;
   ampm: boolean;
@@ -34,8 +29,6 @@ export const CalendarEvent = <T extends ICalendarEventBase>({
   onPressEvent,
   eventCellStyle,
   showTime,
-  eventCount = 1,
-  eventOrder = 0,
   renderEvent,
   ampm,
   hours,
@@ -76,10 +69,10 @@ export const CalendarEvent = <T extends ICalendarEventBase>({
     onPressEvent,
     injectedStyles: [
       getEventCellPositionStyle(event.start, event.end),
-      getStyleForOverlappingEvent(eventOrder, eventCount),
+      { start: `${event.left!}%`, end: `${event.width! + event.left!}%` },
       {
         position: 'absolute',
-        width: `${100 / eventCount}%`,
+        width: `${event.width!}%`,
       },
     ],
   });

lib/ui/types/Calendar.ts

@@ -12,6 +12,8 @@ export interface ICalendarEventBase {
   children?: ReactElement | null;
   hideHours?: boolean;
   hours?: number[];
+  width?: number;
+  left?: number;
 }
 
 export type CalendarTouchableOpacityProps = {