@tuturuuu/ui 0.1.0 → 0.3.1

package/src/components/ui/tu-do/boards/boardId/menus/task-scheduling-utils.ts

@@ -0,0 +1,109 @@
+import type { CalendarHoursType } from '@tuturuuu/types/primitives/Task';
+
+export function taskDurationHoursToMinutes(durationHours: number | null) {
+  if (!durationHours || durationHours <= 0) return 0;
+  return Math.round(durationHours * 60);
+}
+
+export function taskDurationMinutesToHours(durationMinutes: number) {
+  if (durationMinutes <= 0) return null;
+  return Number((durationMinutes / 60).toFixed(2));
+}
+
+export function formatTaskDurationLabel(durationHours: number | null) {
+  const totalMinutes = taskDurationHoursToMinutes(durationHours);
+  if (totalMinutes <= 0) return null;
+
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  if (hours === 0) return `${minutes}m`;
+  if (minutes === 0) return `${hours}h`;
+  return `${hours}h ${minutes}m`;
+}
+
+export interface TaskSchedulingBadgeTitleLabels {
+  autoSchedule: string;
+  estimatedDuration: string;
+  meetingHours: string;
+  personalHours: string;
+  splittable: string;
+  workHours: string;
+}
+
+export function getTaskSchedulingHourTypeLabel(
+  calendarHours: CalendarHoursType | null | undefined,
+  labels: Pick<
+    TaskSchedulingBadgeTitleLabels,
+    'meetingHours' | 'personalHours' | 'workHours'
+  >
+) {
+  switch (calendarHours) {
+    case 'work_hours':
+      return labels.workHours;
+    case 'meeting_hours':
+      return labels.meetingHours;
+    case 'personal_hours':
+      return labels.personalHours;
+    default:
+      return null;
+  }
+}
+
+function formatSplitMinutesRangeLabel(
+  minSplitDurationMinutes: number | null | undefined,
+  maxSplitDurationMinutes: number | null | undefined
+) {
+  if (!minSplitDurationMinutes || !maxSplitDurationMinutes) {
+    return null;
+  }
+
+  const minLabel = formatTaskDurationLabel(minSplitDurationMinutes / 60);
+  const maxLabel = formatTaskDurationLabel(maxSplitDurationMinutes / 60);
+  if (!minLabel || !maxLabel) return null;
+
+  return `${minLabel}-${maxLabel}`;
+}
+
+export function formatTaskSchedulingBadgeTitle({
+  autoSchedule,
+  calendarHours,
+  durationLabel,
+  isSplittable,
+  labels,
+  maxSplitDurationMinutes,
+  minSplitDurationMinutes,
+}: {
+  autoSchedule?: boolean | null;
+  calendarHours?: CalendarHoursType | null;
+  durationLabel: string;
+  isSplittable?: boolean | null;
+  labels: TaskSchedulingBadgeTitleLabels;
+  maxSplitDurationMinutes?: number | null;
+  minSplitDurationMinutes?: number | null;
+}) {
+  const titleParts = [`${labels.estimatedDuration}: ${durationLabel}`];
+  const hourTypeLabel = getTaskSchedulingHourTypeLabel(calendarHours, labels);
+
+  if (hourTypeLabel) {
+    titleParts.push(hourTypeLabel);
+  }
+
+  if (isSplittable) {
+    const splitRangeLabel = formatSplitMinutesRangeLabel(
+      minSplitDurationMinutes,
+      maxSplitDurationMinutes
+    );
+    titleParts.push(
+      splitRangeLabel
+        ? `${labels.splittable}: ${splitRangeLabel}`
+        : labels.splittable
+    );
+  }
+
+  if (autoSchedule) {
+    titleParts.push(labels.autoSchedule);
+  }
+
+  return titleParts.join(' | ');
+}

package/src/components/ui/tu-do/boards/boardId/task-board-server-page.tsx

@@ -2,6 +2,7 @@ import { BoardClient } from '@tuturuuu/ui/tu-do/shared/board-client';
 import { getCurrentUser } from '@tuturuuu/utils/user-helper';
 import { getWorkspace } from '@tuturuuu/utils/workspace-helper';
 import { notFound, redirect } from 'next/navigation';
+import type { ReactNode } from 'react';
 
 interface Props {
   params: Promise<{
@@ -10,6 +11,7 @@ interface Props {
   }>;
   /** Route prefix for tasks URLs. Defaults to '/tasks' (web app). Set to '' for satellite apps. */
   routePrefix?: string;
+  idleBottomIsland?: ReactNode;
 }
 
 /**
@@ -18,6 +20,7 @@ interface Props {
  * Used by both apps/web and apps/tasks.
  */
 export default async function TaskBoardServerPage({
+  idleBottomIsland,
   params,
   routePrefix = '/tasks',
 }: Props) {
@@ -36,6 +39,7 @@ export default async function TaskBoardServerPage({
       workspaceTier={(workspace as any)?.tier ?? null}
       currentUserId={user.id}
       routePrefix={routePrefix}
+      idleBottomIsland={idleBottomIsland}
     />
   );
 }

package/src/components/ui/tu-do/boards/boardId/task-card/TaskCardCheckbox.tsx

@@ -5,8 +5,11 @@ import { Checkbox } from '@tuturuuu/ui/checkbox';
 import { cn } from '@tuturuuu/utils/format';
 import { isTaskBoardResolvedStatus } from '@tuturuuu/utils/task-list-status';
 import { type MouseEvent, memo } from 'react';
-import { getListColorClasses } from '../../../utils/taskColorUtils';
 import { isOverdue } from '../../../utils/taskDateUtils';
+import {
+  getTaskCardCheckboxToneClasses,
+  TASK_CARD_OVERDUE_CHECKBOX_TONE_CLASSES,
+} from './task-card-checkbox-style';
 
 interface TaskCardCheckboxProps {
   task: Task;
@@ -31,11 +34,11 @@ export const TaskCardCheckbox = memo(function TaskCardCheckbox({
         'h-4 w-4 flex-none transition-all duration-200',
         'data-[state=checked]:border-dynamic-green/70 data-[state=checked]:bg-dynamic-green/70',
         'hover:scale-110 hover:border-primary/50',
-        getListColorClasses(taskList?.color as SupportedColor),
+        getTaskCardCheckboxToneClasses(taskList?.color as SupportedColor),
         taskIsOverdue &&
           !task.closed_at &&
           !isInResolvedList &&
-          'border-dynamic-red/70 bg-dynamic-red/10 ring-1 ring-dynamic-red/20'
+          TASK_CARD_OVERDUE_CHECKBOX_TONE_CLASSES
       )}
       disabled={isLoading}
       onCheckedChange={onToggle}

package/src/components/ui/tu-do/boards/boardId/task-card/TaskCardDates.tsx

@@ -3,13 +3,18 @@ import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { Badge } from '@tuturuuu/ui/badge';
 import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
+import { useUserBooleanConfig } from '@tuturuuu/ui/hooks/use-user-config';
 import { cn } from '@tuturuuu/utils/format';
-import { isTaskBoardResolvedStatus } from '@tuturuuu/utils/task-list-status';
 import { getTimeFormatPattern } from '@tuturuuu/utils/time-helper';
 import { format } from 'date-fns';
 import { enUS, vi } from 'date-fns/locale';
 import { useLocale, useTranslations } from 'next-intl';
 import { memo } from 'react';
+import {
+  shouldShowTaskDueDate,
+  shouldShowTaskStartDate,
+  TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID,
+} from '../../../shared/task-due-date-visibility';
 import {
   formatSmartDate,
   isFutureDate,
@@ -29,25 +34,37 @@ export const TaskCardDates = memo(function TaskCardDates({
   const locale = useLocale();
   const dateLocale = locale === 'vi' ? vi : enUS;
   const { timeFormat } = useCalendarPreferences();
+  const { value: showReviewDueDates } = useUserBooleanConfig(
+    TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID,
+    false
+  );
   const timePattern = getTimeFormatPattern(timeFormat);
   const startDate = task.start_date ? new Date(task.start_date) : null;
   const endDate = task.end_date ? new Date(task.end_date) : null;
   const taskIsOverdue = isOverdue(endDate);
-
-  // Hide dates when the list itself represents resolved work.
-  if (isTaskBoardResolvedStatus(taskList?.status)) {
-    return null;
-  }
+  const shouldRenderStartDate = shouldShowTaskStartDate({
+    completedAt: task.completed_at,
+    closedAt: task.closed_at,
+    listStatus: taskList?.status,
+    startDate: task.start_date,
+  });
+  const shouldRenderDueDate = shouldShowTaskDueDate({
+    completedAt: task.completed_at,
+    closedAt: task.closed_at,
+    dueDate: task.end_date,
+    listStatus: taskList?.status,
+    showReviewDueDates,
+  });
 
   // Don't render if no dates
-  if (!startDate && !endDate) {
+  if (!shouldRenderStartDate && !shouldRenderDueDate) {
     return null;
   }
 
   return (
     <div className="mb-1 space-y-0.5 text-[10px] leading-snug">
       {/* Show start only if in the future (hide historical start for visual simplicity) */}
-      {startDate && isFutureDate(startDate) && (
+      {shouldRenderStartDate && startDate && isFutureDate(startDate) && (
         <div className="flex items-center gap-1 text-muted-foreground">
           <Clock className="h-2.5 w-2.5 shrink-0" />
           <span className="truncate">
@@ -65,7 +82,7 @@ export const TaskCardDates = memo(function TaskCardDates({
           </span>
         </div>
       )}
-      {endDate && (
+      {shouldRenderDueDate && endDate && (
         <div
           className={cn(
             'flex items-center gap-1',

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-checkbox-style.ts

@@ -0,0 +1,39 @@
+import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
+import { cn } from '@tuturuuu/utils/format';
+import { getListColorClasses } from '../../../utils/taskColorUtils';
+
+const CHECKED_LIST_TONE_CLASSES: Record<SupportedColor, string> = {
+  BLUE: 'data-[state=checked]:border-dynamic-blue/70 data-[state=checked]:bg-dynamic-blue/20 data-[state=checked]:text-dynamic-blue',
+  CYAN: 'data-[state=checked]:border-dynamic-cyan/70 data-[state=checked]:bg-dynamic-cyan/20 data-[state=checked]:text-dynamic-cyan',
+  GRAY: 'data-[state=checked]:border-dynamic-gray/70 data-[state=checked]:bg-dynamic-gray/20 data-[state=checked]:text-foreground',
+  GREEN:
+    'data-[state=checked]:border-dynamic-green/70 data-[state=checked]:bg-dynamic-green/20 data-[state=checked]:text-dynamic-green',
+  INDIGO:
+    'data-[state=checked]:border-dynamic-indigo/70 data-[state=checked]:bg-dynamic-indigo/20 data-[state=checked]:text-dynamic-indigo',
+  ORANGE:
+    'data-[state=checked]:border-dynamic-orange/70 data-[state=checked]:bg-dynamic-orange/20 data-[state=checked]:text-dynamic-orange',
+  PINK: 'data-[state=checked]:border-dynamic-pink/70 data-[state=checked]:bg-dynamic-pink/20 data-[state=checked]:text-dynamic-pink',
+  PURPLE:
+    'data-[state=checked]:border-dynamic-purple/70 data-[state=checked]:bg-dynamic-purple/20 data-[state=checked]:text-dynamic-purple',
+  RED: 'data-[state=checked]:border-dynamic-red/70 data-[state=checked]:bg-dynamic-red/20 data-[state=checked]:text-dynamic-red',
+  YELLOW:
+    'data-[state=checked]:border-dynamic-yellow/70 data-[state=checked]:bg-dynamic-yellow/20 data-[state=checked]:text-dynamic-yellow',
+};
+
+export const TASK_CARD_OVERDUE_CHECKBOX_TONE_CLASSES =
+  'border-dynamic-red/70 bg-dynamic-red/10 ring-1 ring-dynamic-red/20 data-[state=checked]:border-dynamic-red/70 data-[state=checked]:bg-dynamic-red/20 data-[state=checked]:text-dynamic-red';
+
+export function getTaskCardCheckboxToneClasses(color?: SupportedColor | null) {
+  return getListColorClasses(color ?? 'GRAY');
+}
+
+export function getTaskCardSelectionCheckboxToneClasses(
+  color?: SupportedColor | null
+) {
+  const resolvedColor = color ?? 'GRAY';
+
+  return cn(
+    getTaskCardCheckboxToneClasses(resolvedColor),
+    CHECKED_LIST_TONE_CLASSES[resolvedColor]
+  );
+}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-comparator.test.ts

@@ -58,4 +58,47 @@ describe('areTaskCardPropsEqual', () => {
       )
     ).toBe(false);
   });
+
+  it('rerenders when personal scheduling duration changes', () => {
+    expect(
+      areTaskCardPropsEqual(
+        taskCardProps({ task: { ...task, total_duration: null } }),
+        taskCardProps({ task: { ...task, total_duration: 1.5 } })
+      )
+    ).toBe(false);
+  });
+
+  it('rerenders a selected card when the bulk selection grows', () => {
+    expect(
+      areTaskCardPropsEqual(
+        taskCardProps({
+          isMultiSelectMode: true,
+          isSelected: true,
+          selectedTasks: new Set(['task-1']),
+        }),
+        taskCardProps({
+          isMultiSelectMode: true,
+          isSelected: true,
+          selectedTasks: new Set(['task-1', 'task-2']),
+        })
+      )
+    ).toBe(false);
+  });
+
+  it('rerenders a selected card when the bulk selection changes with the same size', () => {
+    expect(
+      areTaskCardPropsEqual(
+        taskCardProps({
+          isMultiSelectMode: true,
+          isSelected: true,
+          selectedTasks: new Set(['task-1', 'task-2']),
+        }),
+        taskCardProps({
+          isMultiSelectMode: true,
+          isSelected: true,
+          selectedTasks: new Set(['task-1', 'task-3']),
+        })
+      )
+    ).toBe(false);
+  });
 });

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-comparator.ts

@@ -1,5 +1,25 @@
 import type { TaskCardProps } from './task-card';
 
+function areSelectedTaskSetsEqual(
+  previousSelectedTasks?: Set<string>,
+  nextSelectedTasks?: Set<string>
+) {
+  if (previousSelectedTasks === nextSelectedTasks) return true;
+  if (!previousSelectedTasks || !nextSelectedTasks) {
+    return (
+      (previousSelectedTasks?.size ?? 0) === (nextSelectedTasks?.size ?? 0)
+    );
+  }
+
+  if (previousSelectedTasks.size !== nextSelectedTasks.size) return false;
+
+  for (const taskId of previousSelectedTasks) {
+    if (!nextSelectedTasks.has(taskId)) return false;
+  }
+
+  return true;
+}
+
 export function areTaskCardPropsEqual(
   prev: TaskCardProps,
   next: TaskCardProps
@@ -7,6 +27,13 @@ export function areTaskCardPropsEqual(
   if (prev.isOverlay !== next.isOverlay) return false;
   if (prev.isSelected !== next.isSelected) return false;
   if (prev.isMultiSelectMode !== next.isMultiSelectMode) return false;
+  if (
+    (prev.isSelected || next.isSelected) &&
+    (prev.isMultiSelectMode || next.isMultiSelectMode) &&
+    !areSelectedTaskSetsEqual(prev.selectedTasks, next.selectedTasks)
+  ) {
+    return false;
+  }
   if (prev.boardId !== next.boardId) return false;
   if (prev.workspaceId !== next.workspaceId) return false;
   if (prev.dragDisabled !== next.dragDisabled) return false;
@@ -42,6 +69,12 @@ export function areTaskCardPropsEqual(
     'start_date',
     'completed_at',
     'estimation_points',
+    'total_duration',
+    'is_splittable',
+    'min_split_duration_minutes',
+    'max_split_duration_minutes',
+    'calendar_hours',
+    'auto_schedule',
     'relationship_summary',
     'list_id',
   ];

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-completion-checkbox-visibility.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { shouldRenderTaskCardCompletionCheckbox } from './task-card-completion-checkbox-visibility';
+
+describe('shouldRenderTaskCardCompletionCheckbox', () => {
+  it('renders the done checkbox in normal task mode', () => {
+    expect(
+      shouldRenderTaskCardCompletionCheckbox({
+        isMultiSelectMode: false,
+        taskListStatus: 'active',
+      })
+    ).toBe(true);
+  });
+
+  it('hides the done checkbox in multi-select mode', () => {
+    expect(
+      shouldRenderTaskCardCompletionCheckbox({
+        isMultiSelectMode: true,
+        taskListStatus: 'active',
+      })
+    ).toBe(false);
+  });
+
+  it('keeps document-list completion checkboxes hidden', () => {
+    expect(
+      shouldRenderTaskCardCompletionCheckbox({
+        isMultiSelectMode: false,
+        taskListStatus: 'documents',
+      })
+    ).toBe(false);
+  });
+});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-completion-checkbox-visibility.ts

@@ -0,0 +1,9 @@
+export function shouldRenderTaskCardCompletionCheckbox({
+  isMultiSelectMode,
+  taskListStatus,
+}: {
+  isMultiSelectMode: boolean;
+  taskListStatus?: string | null;
+}) {
+  return taskListStatus !== 'documents' && !isMultiSelectMode;
+}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-identifier-row.test.tsx

@@ -0,0 +1,124 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { getTaskCardSelectionCheckboxToneClasses } from './task-card-checkbox-style';
+import { TaskCardIdentifierRow } from './task-card-identifier-row';
+
+describe('TaskCardIdentifierRow', () => {
+  it('renders the selection checkbox before the external source and task identifier', () => {
+    const onSelect = vi.fn();
+
+    render(
+      <TaskCardIdentifierRow
+        externalSourceLabel="Upskii"
+        externalSourceTitle="Upskii / Roadmap / Review"
+        isMultiSelectMode
+        isPersonalExternalTask
+        isSelected={false}
+        onSelect={onSelect}
+        selectTaskLabel="Select Draft response"
+        selectionCheckboxClassName={getTaskCardSelectionCheckboxToneClasses(
+          'BLUE'
+        )}
+        taskListStatus="active"
+        ticketBadgeClassName="text-dynamic-blue"
+        ticketIdentifier="OH-167"
+        ticketTitle="Task OH-167"
+      />
+    );
+
+    const source = screen.getByTestId('task-card-external-source');
+    const checkbox = screen.getByTestId('task-card-selection-checkbox');
+    const ticket = screen.getByTestId('task-card-ticket-identifier');
+
+    expect(checkbox.compareDocumentPosition(source)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(source.compareDocumentPosition(ticket)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(checkbox).toHaveClass('border-dynamic-blue/70');
+    expect(checkbox).toHaveClass('bg-dynamic-blue/5');
+    expect(checkbox.className).toContain(
+      'data-[state=checked]:border-dynamic-blue/70'
+    );
+    expect(checkbox).not.toHaveClass('absolute');
+    expect(checkbox).not.toHaveClass('bg-background/80');
+
+    fireEvent.click(checkbox);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the selection checkbox before an internal task identifier', () => {
+    render(
+      <TaskCardIdentifierRow
+        externalSourceLabel="Source"
+        isMultiSelectMode
+        isPersonalExternalTask={false}
+        isSelected={false}
+        selectTaskLabel="Select task"
+        selectionCheckboxClassName={getTaskCardSelectionCheckboxToneClasses(
+          'GREEN'
+        )}
+        taskListStatus="active"
+        ticketIdentifier="OH-174"
+        ticketTitle="Task OH-174"
+      />
+    );
+
+    const checkbox = screen.getByTestId('task-card-selection-checkbox');
+    const ticket = screen.getByTestId('task-card-ticket-identifier');
+
+    expect(checkbox.compareDocumentPosition(ticket)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(screen.queryByTestId('task-card-external-source')).toBeNull();
+  });
+
+  it('keeps the selection checkbox first when document lists omit the identifier', () => {
+    render(
+      <TaskCardIdentifierRow
+        externalSourceLabel="Exocorpse"
+        externalSourceTitle="Exocorpse / Web"
+        isMultiSelectMode
+        isPersonalExternalTask
+        isSelected={false}
+        selectTaskLabel="Select task"
+        selectionCheckboxClassName={getTaskCardSelectionCheckboxToneClasses(
+          'PURPLE'
+        )}
+        taskListStatus="documents"
+        ticketIdentifier="WEB-54"
+        ticketTitle="Task WEB-54"
+      />
+    );
+
+    const checkbox = screen.getByTestId('task-card-selection-checkbox');
+    const source = screen.getByTestId('task-card-external-source');
+
+    expect(checkbox.compareDocumentPosition(source)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(screen.queryByTestId('task-card-ticket-identifier')).toBeNull();
+  });
+
+  it('omits the selector outside multi-select mode', () => {
+    render(
+      <TaskCardIdentifierRow
+        externalSourceLabel="Source"
+        isMultiSelectMode={false}
+        isPersonalExternalTask={false}
+        isSelected={false}
+        selectTaskLabel="Select task"
+        taskListStatus="active"
+        ticketIdentifier="OH-174"
+        ticketTitle="Task OH-174"
+      />
+    );
+
+    expect(screen.queryByTestId('task-card-selection-checkbox')).toBeNull();
+    expect(screen.getByTestId('task-card-ticket-identifier')).toHaveTextContent(
+      'OH-174'
+    );
+  });
+});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-identifier-row.tsx

@@ -0,0 +1,88 @@
+import { ExternalLink } from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import { cn } from '@tuturuuu/utils/format';
+import type { MouseEvent } from 'react';
+
+interface TaskCardIdentifierRowProps {
+  externalSourceLabel: string;
+  externalSourceTitle?: string;
+  isMultiSelectMode: boolean;
+  isPersonalExternalTask: boolean;
+  isSelected: boolean;
+  onSelect?: (event: MouseEvent<HTMLButtonElement>) => void;
+  selectTaskLabel: string;
+  selectionCheckboxClassName?: string;
+  taskListStatus?: string | null;
+  ticketBadgeClassName?: string;
+  ticketIdentifier: string | null;
+  ticketTitle: string;
+}
+
+export function TaskCardIdentifierRow({
+  externalSourceLabel,
+  externalSourceTitle,
+  isMultiSelectMode,
+  isPersonalExternalTask,
+  isSelected,
+  onSelect,
+  selectTaskLabel,
+  selectionCheckboxClassName,
+  taskListStatus,
+  ticketBadgeClassName,
+  ticketIdentifier,
+  ticketTitle,
+}: TaskCardIdentifierRowProps) {
+  return (
+    <div
+      className={cn(
+        'mb-1 flex min-w-0 flex-wrap items-center gap-1',
+        isPersonalExternalTask && 'gap-x-1.5'
+      )}
+    >
+      {isMultiSelectMode && (
+        <Checkbox
+          checked={isSelected}
+          aria-label={selectTaskLabel}
+          data-testid="task-card-selection-checkbox"
+          className={cn(
+            'h-4 w-4 shrink-0 border-2 shadow-sm transition-all duration-200 hover:scale-110 hover:border-primary/50',
+            selectionCheckboxClassName
+          )}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onSelect?.(event);
+          }}
+        />
+      )}
+      {isPersonalExternalTask && (
+        <Badge
+          variant="secondary"
+          className="h-5 min-w-0 max-w-[70%] gap-1 border border-dynamic-cyan/30 bg-dynamic-cyan/10 px-1.5 text-[10px] text-dynamic-cyan"
+          title={externalSourceTitle}
+          data-testid="task-card-external-source"
+        >
+          <ExternalLink className="h-2.5 w-2.5 shrink-0" />
+          <span className="truncate">{externalSourceLabel}</span>
+        </Badge>
+      )}
+      {taskListStatus !== 'documents' && ticketIdentifier && (
+        <Badge
+          variant="outline"
+          className={cn(
+            'w-fit px-1 py-0 font-mono text-[10px]',
+            ticketBadgeClassName
+          )}
+          title={ticketTitle}
+          data-testid="task-card-ticket-identifier"
+        >
+          {ticketIdentifier}
+        </Badge>
+      )}
+    </div>
+  );
+}