Refactor: Extract EventRow shared types and styles to EventRowBase (#19480)

## Summary
This PR refactors the EventRow component structure by extracting shared
types and styled components into a dedicated base file, improving code
organization and reducing duplication.

## Key Changes
- Created new `EventRowBase.tsx` file to centralize shared EventRow
utilities
- Moved `EventRowDynamicComponentProps` interface from
`EventRowDynamicComponent.tsx` to `EventRowBase.tsx`
- Moved styled components `StyledEventRowItemColumn` and
`StyledEventRowItemAction` from `EventRowDynamicComponent.tsx` to
`EventRowBase.tsx`
- Updated all imports across 6 files to reference the new `EventRowBase`
module instead of `EventRowDynamicComponent`
- Simplified `EventRowDynamicComponent.tsx` to re-export types and
styles from `EventRowBase` for backward compatibility

## Files Updated
- `EventRowDynamicComponent.tsx` - Simplified to import and re-export
from EventRowBase
- `EventRowActivity.tsx` - Updated import path
- `EventRowCalendarEvent.tsx` - Updated import path
- `EventRowMainObject.tsx` - Updated import path
- `EventRowMainObjectUpdated.tsx` - Updated import path
- `EventRowMessage.tsx` - Updated import path

## Benefits
- Better separation of concerns with shared base utilities in a
dedicated module
- Reduced circular dependency risks
- Clearer module structure for future EventRow-related components
- Maintains backward compatibility through re-exports

https://claude.ai/code/session_011EyhBJ56RGuZHxBVWwzEQy

---------

Co-authored-by: Claude <noreply@anthropic.com>

packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx

@@ -1,11 +1,8 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 
-import {
-  type EventRowDynamicComponentProps,
-  StyledEventRowItemAction,
-  StyledEventRowItemColumn,
-} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { type EventRowDynamicComponentProps } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent.types';
+import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { isTimelineActivityWithLinkedRecord } from '@/activities/timeline-activities/types/TimelineActivity';
 import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
 import { type CoreObjectNameSingular } from 'twenty-shared/types';
@@ -102,10 +99,10 @@ export const EventRowActivity = ({
     <StyledEventRow>
       <StyledRowContainer>
         <StyledRow>
-          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-          <StyledEventRowItemAction>
+          <EventRowItem>{authorFullName}</EventRowItem>
+          <EventRowItem variant="action">
             {t`${eventAction} a related ${eventObject}`}
-          </StyledEventRowItemAction>
+          </EventRowItem>
           <StyledLinkedActivity
             onClick={() =>
               openRecordInSidePanel({

packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventRowCalendarEvent.tsx

@@ -5,11 +5,8 @@ import { useState } from 'react';
 import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent';
 import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
 import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
-import {
-  type EventRowDynamicComponentProps,
-  StyledEventRowItemAction,
-  StyledEventRowItemColumn,
-} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { type EventRowDynamicComponentProps } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent.types';
+import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { isTimelineActivityWithLinkedRecord } from '@/activities/timeline-activities/types/TimelineActivity';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
@@ -43,10 +40,10 @@ export const EventRowCalendarEvent = ({
   return (
     <StyledEventRowCalendarEventContainer>
       <StyledRowContainer>
-        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-        <StyledEventRowItemAction>
+        <EventRowItem>{authorFullName}</EventRowItem>
+        <EventRowItem variant="action">
           {t`linked a calendar event with ${labelIdentifierValue}`}
-        </StyledEventRowItemAction>
+        </EventRowItem>
         <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
       </StyledRowContainer>
       {isTimelineActivityWithLinkedRecord(event) && (

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx

@@ -1,38 +1,9 @@
-import { styled } from '@linaria/react';
-
 import { EventRowActivity } from '@/activities/timeline-activities/rows/activity/components/EventRowActivity';
 import { EventRowCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventRowCalendarEvent';
+import { type EventRowDynamicComponentProps } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent.types';
 import { EventRowMainObject } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObject';
 import { EventRowMessage } from '@/activities/timeline-activities/rows/message/components/EventRowMessage';
-import { type TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-export interface EventRowDynamicComponentProps {
-  labelIdentifierValue: string;
-  event: TimelineActivity;
-  mainObjectMetadataItem: EnrichedObjectMetadataItem;
-  linkedObjectMetadataItem: EnrichedObjectMetadataItem | null;
-  authorFullName: string;
-  createdAt?: string;
-}
-
-export const StyledEventRowItemColumn = styled.div`
-  align-items: center;
-  color: ${themeCssVariables.font.color.primary};
-  display: flex;
-  flex-direction: row;
-  gap: ${themeCssVariables.spacing[1]};
-`;
-
-export const StyledEventRowItemAction = styled.div`
-  align-items: center;
-  color: ${themeCssVariables.font.color.secondary};
-  display: flex;
-  flex-direction: row;
-  gap: ${themeCssVariables.spacing[1]};
-`;
 
 export const EventRowDynamicComponent = ({
   labelIdentifierValue,

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.types.ts

@@ -0,0 +1,11 @@
+import { type TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
+import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+
+export type EventRowDynamicComponentProps = {
+  labelIdentifierValue: string;
+  event: TimelineActivity;
+  mainObjectMetadataItem: EnrichedObjectMetadataItem;
+  linkedObjectMetadataItem: EnrichedObjectMetadataItem | null;
+  authorFullName: string;
+  createdAt?: string;
+};

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowItem.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
+
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+type EventRowItemProps = {
+  children: ReactNode;
+  variant?: 'column' | 'action';
+};
+
+const StyledColumn = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  gap: ${themeCssVariables.spacing[1]};
+`;
+
+const StyledAction = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.secondary};
+  display: flex;
+  flex-direction: row;
+  gap: ${themeCssVariables.spacing[1]};
+`;
+
+export const EventRowItem = ({
+  children,
+  variant = 'column',
+}: EventRowItemProps) => {
+  if (variant === 'action') {
+    return <StyledAction>{children}</StyledAction>;
+  }
+
+  return <StyledColumn>{children}</StyledColumn>;
+};

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx

@@ -1,8 +1,5 @@
-import {
-  type EventRowDynamicComponentProps,
-  StyledEventRowItemAction,
-  StyledEventRowItemColumn,
-} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { type EventRowDynamicComponentProps } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent.types';
+import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
@@ -54,15 +51,9 @@ export const EventRowMainObject = ({
         <StyledMainContainer>
           <StyledRowContainer>
             <StyledRow>
-              <StyledEventRowItemColumn>
-                {labelIdentifierValue}
-              </StyledEventRowItemColumn>
-              <StyledEventRowItemAction>
-                {t`was created by`}
-              </StyledEventRowItemAction>
-              <StyledEventRowItemColumn>
-                {authorFullName}
-              </StyledEventRowItemColumn>
+              <EventRowItem>{labelIdentifierValue}</EventRowItem>
+              <EventRowItem variant="action">{t`was created by`}</EventRowItem>
+              <EventRowItem>{authorFullName}</EventRowItem>
             </StyledRow>
             <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
           </StyledRowContainer>
@@ -85,15 +76,9 @@ export const EventRowMainObject = ({
         <StyledMainContainer>
           <StyledRowContainer>
             <StyledRow>
-              <StyledEventRowItemColumn>
-                {labelIdentifierValue}
-              </StyledEventRowItemColumn>
-              <StyledEventRowItemAction>
-                {t`was deleted by`}
-              </StyledEventRowItemAction>
-              <StyledEventRowItemColumn>
-                {authorFullName}
-              </StyledEventRowItemColumn>
+              <EventRowItem>{labelIdentifierValue}</EventRowItem>
+              <EventRowItem variant="action">{t`was deleted by`}</EventRowItem>
+              <EventRowItem>{authorFullName}</EventRowItem>
             </StyledRow>
             <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
           </StyledRowContainer>
@@ -105,15 +90,9 @@ export const EventRowMainObject = ({
         <StyledMainContainer>
           <StyledRowContainer>
             <StyledRow>
-              <StyledEventRowItemColumn>
-                {labelIdentifierValue}
-              </StyledEventRowItemColumn>
-              <StyledEventRowItemAction>
-                {t`was restored by`}
-              </StyledEventRowItemAction>
-              <StyledEventRowItemColumn>
-                {authorFullName}
-              </StyledEventRowItemColumn>
+              <EventRowItem>{labelIdentifierValue}</EventRowItem>
+              <EventRowItem variant="action">{t`was restored by`}</EventRowItem>
+              <EventRowItem>{authorFullName}</EventRowItem>
             </StyledRow>
             <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
           </StyledRowContainer>

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
 import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
-import { StyledEventRowItemColumn } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffContainer';
 import { type TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@@ -79,7 +79,7 @@ export const EventRowMainObjectUpdated = ({
     <StyledEventRowMainObjectUpdatedContainer>
       <StyledRowContainer>
         <StyledRow>
-          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+          <EventRowItem>{authorFullName}</EventRowItem>
           {t`updated`}
           {diffEntries.length === 1 && (
             <EventFieldDiffContainer

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventRowMessage.tsx

@@ -4,11 +4,8 @@ import { useState } from 'react';
 
 import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
 import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
-import {
-  type EventRowDynamicComponentProps,
-  StyledEventRowItemAction,
-  StyledEventRowItemColumn,
-} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { type EventRowDynamicComponentProps } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent.types';
+import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';
 import { isTimelineActivityWithLinkedRecord } from '@/activities/timeline-activities/types/TimelineActivity';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -42,13 +39,9 @@ export const EventRowMessage = ({
   return (
     <StyledEventRowMessageContainer>
       <StyledRowContainer>
-        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-        <StyledEventRowItemAction>
-          {t`linked an email with`}
-        </StyledEventRowItemAction>
-        <StyledEventRowItemColumn>
-          {labelIdentifierValue}
-        </StyledEventRowItemColumn>
+        <EventRowItem>{authorFullName}</EventRowItem>
+        <EventRowItem variant="action">{t`linked an email with`}</EventRowItem>
+        <EventRowItem>{labelIdentifierValue}</EventRowItem>
         <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
       </StyledRowContainer>
       <EventCard isOpen={isOpen}>