refactor: clean up GlobalTaskList and enhance TaskDetailDialog
- Removed unnecessary border styling in `GlobalTaskList` for a cleaner layout. - Added logic in `ActivityTimeline` to identify and set team lead information based on member roles. - Improved `TaskDetailDialog` to display owner information with enhanced styling and avatar support, utilizing team colors for better visual distinction. - Streamlined dependency display in `TaskDetailDialog` for improved readability and user interaction.
This commit is contained in:
parent
1b6f7be767
commit
361828f21a
3 changed files with 164 additions and 128 deletions
|
|
@ -236,10 +236,7 @@ export const GlobalTaskList = ({
|
|||
</div>
|
||||
|
||||
{/* Grouping mode */}
|
||||
<div
|
||||
className="flex shrink-0 items-center gap-2 border-b px-2 py-1"
|
||||
style={{ borderColor: 'var(--color-border)' }}
|
||||
>
|
||||
<div className="flex shrink-0 items-center gap-2 px-2 py-1">
|
||||
<span className="shrink-0 text-[11px] text-text-muted">Group by:</span>
|
||||
<Select value={groupingMode} onValueChange={(v) => setGroupingMode(v as TaskGroupingMode)}>
|
||||
<SelectTrigger className="h-7 min-w-0 flex-1 border-[var(--color-border)] px-2 text-[11px]">
|
||||
|
|
|
|||
|
|
@ -111,6 +111,18 @@ export const ActivityTimeline = ({
|
|||
memberInfo.set(m.agentType, info);
|
||||
}
|
||||
}
|
||||
const leadMember = members.find(
|
||||
(m) => m.agentType === 'team-lead' || m.role?.toLowerCase().includes('lead')
|
||||
);
|
||||
if (leadMember) {
|
||||
const leadInfo = memberInfo.get(leadMember.name);
|
||||
if (leadInfo) {
|
||||
const teamLeadColor = leadInfo.color ?? getMemberColorByName('team-lead');
|
||||
const resolvedLeadInfo = { role: leadInfo.role, color: teamLeadColor };
|
||||
memberInfo.set('team-lead', resolvedLeadInfo);
|
||||
memberInfo.set(leadMember.name, resolvedLeadInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleMemberNameClick = (name: string): void => {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,10 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@renderer/components/ui/dialog';
|
||||
import { getTeamColorSet } from '@renderer/constants/teamColors';
|
||||
import { markAsRead } from '@renderer/services/commentReadStorage';
|
||||
import {
|
||||
agentAvatarUrl,
|
||||
KANBAN_COLUMN_DISPLAY,
|
||||
TASK_STATUS_LABELS,
|
||||
TASK_STATUS_STYLES,
|
||||
|
|
@ -98,6 +100,7 @@ export const TaskDetailDialog = ({
|
|||
t.id !== currentTask.id && Array.isArray(t.related) && t.related.includes(currentTask.id)
|
||||
)
|
||||
.map((t) => t.id);
|
||||
const ownerMember = currentTask.owner ? members.find((m) => m.name === currentTask.owner) : null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
||||
|
|
@ -121,12 +124,34 @@ export const TaskDetailDialog = ({
|
|||
|
||||
{/* Metadata */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-3">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{ownerMember ? (
|
||||
<div
|
||||
className="flex min-w-0 items-center gap-2 rounded-md px-2 py-1"
|
||||
style={{
|
||||
borderLeft: `3px solid ${getTeamColorSet(ownerMember.color ?? '').border}`,
|
||||
backgroundColor: getTeamColorSet(ownerMember.color ?? '').badge,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={agentAvatarUrl(ownerMember.name, 32)}
|
||||
alt={ownerMember.name}
|
||||
className="size-6 shrink-0 rounded-full bg-[var(--color-surface-raised)]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span className="min-w-0 truncate font-medium text-[var(--color-text)]">
|
||||
{ownerMember.name}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-[var(--color-text-muted)]">
|
||||
<User size={12} />
|
||||
<span className="text-[var(--color-text-secondary)]">
|
||||
{currentTask.owner ?? '\u2014'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{currentTask.createdBy ? (
|
||||
<div className="flex items-center gap-1.5 text-[var(--color-text-muted)]">
|
||||
<PenLine size={12} />
|
||||
|
|
@ -159,6 +184,7 @@ export const TaskDetailDialog = ({
|
|||
)}
|
||||
</CollapsibleTeamSection>
|
||||
|
||||
<div className="mb-3 space-y-2">
|
||||
{/* Dependencies */}
|
||||
{blockedByIds.length > 0 ? (
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
|
|
@ -279,6 +305,7 @@ export const TaskDetailDialog = ({
|
|||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Comments */}
|
||||
<CollapsibleTeamSection
|
||||
|
|
|
|||
Loading…
Reference in a new issue