4cf330e8cc
- Added agent-teams-controller as a dependency and updated the bundling configuration to exclude it. - Refactored task management functions to utilize the new taskStore, improving code organization and maintainability. - Introduced new methods for handling task states, including soft deletion and restoration. - Enhanced kanban functionality with improved reviewer management and task column updates. - Updated tests to reflect changes in task creation and approval processes, ensuring robust coverage. - Improved task ID handling and display logic for better user experience across components.
119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
|
|
import { MemberBadge } from '@renderer/components/team/MemberBadge';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
|
|
import { useStore } from '@renderer/store';
|
|
import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
|
|
import { formatTaskDisplayLabel, taskMatchesRef } from '@shared/utils/taskIdentity';
|
|
|
|
import type { TeamTaskWithKanban } from '@shared/types';
|
|
|
|
/**
|
|
* Status/kanban-column display colors.
|
|
* Matches the kanban column palette from KanbanBoard.tsx.
|
|
*/
|
|
const STATUS_COLORS: Record<string, { text: string; bg: string }> = {
|
|
pending: { text: '#60a5fa', bg: 'rgba(59, 130, 246, 0.15)' }, // blue
|
|
todo: { text: '#60a5fa', bg: 'rgba(59, 130, 246, 0.15)' },
|
|
in_progress: { text: '#facc15', bg: 'rgba(234, 179, 8, 0.15)' }, // yellow
|
|
completed: { text: '#4ade80', bg: 'rgba(34, 197, 94, 0.15)' }, // green
|
|
done: { text: '#4ade80', bg: 'rgba(34, 197, 94, 0.15)' },
|
|
review: { text: '#a78bfa', bg: 'rgba(139, 92, 246, 0.15)' }, // purple
|
|
approved: { text: '#34d399', bg: 'rgba(34, 197, 94, 0.25)' }, // bright green
|
|
deleted: { text: '#f87171', bg: 'rgba(239, 68, 68, 0.15)' }, // red
|
|
};
|
|
|
|
function getEffectiveColumn(task: TeamTaskWithKanban): string {
|
|
if (task.kanbanColumn) return task.kanbanColumn;
|
|
if (task.status === 'pending') return 'todo';
|
|
if (task.status === 'completed') return 'done';
|
|
return task.status;
|
|
}
|
|
|
|
function getStatusLabel(column: string): string {
|
|
const labels: Record<string, string> = {
|
|
todo: 'To Do',
|
|
pending: 'To Do',
|
|
in_progress: 'In Progress',
|
|
done: 'Done',
|
|
completed: 'Done',
|
|
review: 'Review',
|
|
approved: 'Approved',
|
|
deleted: 'Deleted',
|
|
};
|
|
return labels[column] ?? column;
|
|
}
|
|
|
|
interface TaskTooltipProps {
|
|
/** Canonical task id or short display id reference. */
|
|
taskId: string;
|
|
/** Rendered trigger element. */
|
|
children: React.ReactElement;
|
|
/** Tooltip placement. */
|
|
side?: 'top' | 'bottom' | 'left' | 'right';
|
|
}
|
|
|
|
/**
|
|
* Tooltip that shows task summary on hover over any #taskId link.
|
|
* Reads task data from the current team in the store.
|
|
*/
|
|
export const TaskTooltip = ({
|
|
taskId,
|
|
children,
|
|
side = 'top',
|
|
}: TaskTooltipProps): React.JSX.Element => {
|
|
const tasks = useStore((s) => s.selectedTeamData?.tasks);
|
|
const members = useStore((s) => s.selectedTeamData?.members);
|
|
|
|
const task = useMemo(() => tasks?.find((t) => taskMatchesRef(t, taskId)), [tasks, taskId]);
|
|
|
|
const colorMap = useMemo(
|
|
() => (members ? buildMemberColorMap(members) : new Map<string, string>()),
|
|
[members]
|
|
);
|
|
|
|
// If task not found, render children without tooltip
|
|
if (!task) return children;
|
|
|
|
const column = getEffectiveColumn(task);
|
|
const statusColor = STATUS_COLORS[column] ?? STATUS_COLORS.pending;
|
|
const label = getStatusLabel(column);
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
|
<TooltipContent side={side} className="max-w-xs space-y-1.5 p-2.5">
|
|
{/* Subject */}
|
|
<div className="text-xs font-medium text-[var(--color-text)]">
|
|
<span className="text-[var(--color-text-muted)]">{formatTaskDisplayLabel(task)}</span>{' '}
|
|
{task.subject}
|
|
</div>
|
|
|
|
{/* Status badge */}
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="inline-block rounded px-1.5 py-0.5 text-[10px] font-medium"
|
|
style={{ color: statusColor.text, backgroundColor: statusColor.bg }}
|
|
>
|
|
{label}
|
|
</span>
|
|
|
|
{/* Owner */}
|
|
{task.owner ? (
|
|
<MemberBadge name={task.owner} color={colorMap.get(task.owner)} />
|
|
) : (
|
|
<span className="text-[10px] text-[var(--color-text-muted)]">Unassigned</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Description — full markdown with scroll */}
|
|
{task.description ? (
|
|
<div className="max-h-[200px] overflow-y-auto text-[10px]">
|
|
<MarkdownViewer content={task.description} maxHeight="max-h-none" bare />
|
|
</div>
|
|
) : null}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
};
|