mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-14 13:49:18 +02:00
b9bd54d6d5
Archived agents are hidden from all assignee pickers, subscriber lists, and filter panels so users only see active agents in selection dropdowns. The agents management page shows archive/unarchive actions and visual indicators for archived agents.
607 lines
22 KiB
TypeScript
607 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
Check,
|
|
ChevronDown,
|
|
CircleDot,
|
|
Columns3,
|
|
Filter,
|
|
List,
|
|
SignalHigh,
|
|
SlidersHorizontal,
|
|
User,
|
|
UserMinus,
|
|
UserPen,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuSubContent,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
} from "@/components/ui/popover";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import {
|
|
ALL_STATUSES,
|
|
STATUS_CONFIG,
|
|
PRIORITY_ORDER,
|
|
PRIORITY_CONFIG,
|
|
} from "@/features/issues/config";
|
|
import { StatusIcon, PriorityIcon } from "@/features/issues/components";
|
|
import { useWorkspaceStore } from "@/features/workspace";
|
|
import { ActorAvatar } from "@/components/common/actor-avatar";
|
|
import {
|
|
useIssueViewStore,
|
|
SORT_OPTIONS,
|
|
CARD_PROPERTY_OPTIONS,
|
|
type ActorFilterValue,
|
|
} from "@/features/issues/stores/view-store";
|
|
import {
|
|
useIssuesScopeStore,
|
|
type IssuesScope,
|
|
} from "@/features/issues/stores/issues-scope-store";
|
|
import { filterIssues } from "@/features/issues/utils/filter";
|
|
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
|
import type { Issue } from "@/shared/types";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// HoverCheck — shadcn official pattern (PR #6862)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const FILTER_ITEM_CLASS =
|
|
"group/fitem pr-1.5! [&>[data-slot=dropdown-menu-checkbox-item-indicator]]:hidden";
|
|
|
|
function HoverCheck({ checked }: { checked: boolean }) {
|
|
return (
|
|
<div
|
|
className="border-input data-[selected=true]:border-primary data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground pointer-events-none size-4 shrink-0 rounded-[4px] border transition-all select-none *:[svg]:opacity-0 data-[selected=true]:*:[svg]:opacity-100 opacity-0 group-hover/fitem:opacity-100 group-focus/fitem:opacity-100 data-[selected=true]:opacity-100"
|
|
data-selected={checked}
|
|
>
|
|
<Check className="size-3.5 text-current" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function getActiveFilterCount(state: {
|
|
statusFilters: string[];
|
|
priorityFilters: string[];
|
|
assigneeFilters: ActorFilterValue[];
|
|
includeNoAssignee: boolean;
|
|
creatorFilters: ActorFilterValue[];
|
|
}) {
|
|
let count = 0;
|
|
if (state.statusFilters.length > 0) count++;
|
|
if (state.priorityFilters.length > 0) count++;
|
|
if (state.assigneeFilters.length > 0 || state.includeNoAssignee) count++;
|
|
if (state.creatorFilters.length > 0) count++;
|
|
return count;
|
|
}
|
|
|
|
function useIssueCounts(allIssues: Issue[]) {
|
|
return useMemo(() => {
|
|
const status = new Map<string, number>();
|
|
const priority = new Map<string, number>();
|
|
const assignee = new Map<string, number>();
|
|
const creator = new Map<string, number>();
|
|
let noAssignee = 0;
|
|
|
|
for (const issue of allIssues) {
|
|
status.set(issue.status, (status.get(issue.status) ?? 0) + 1);
|
|
priority.set(issue.priority, (priority.get(issue.priority) ?? 0) + 1);
|
|
|
|
if (!issue.assignee_id) {
|
|
noAssignee++;
|
|
} else {
|
|
const aKey = `${issue.assignee_type}:${issue.assignee_id}`;
|
|
assignee.set(aKey, (assignee.get(aKey) ?? 0) + 1);
|
|
}
|
|
|
|
const cKey = `${issue.creator_type}:${issue.creator_id}`;
|
|
creator.set(cKey, (creator.get(cKey) ?? 0) + 1);
|
|
}
|
|
|
|
return { status, priority, assignee, creator, noAssignee };
|
|
}, [allIssues]);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Scope config
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const SCOPES: { value: IssuesScope; label: string; description: string }[] = [
|
|
{ value: "all", label: "All", description: "All issues in this workspace" },
|
|
{ value: "members", label: "Members", description: "Issues assigned to team members" },
|
|
{ value: "agents", label: "Agents", description: "Issues assigned to AI agents" },
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Actor sub-menu content (shared between Assignee and Creator)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function ActorSubContent({
|
|
counts,
|
|
selected,
|
|
onToggle,
|
|
showNoAssignee,
|
|
includeNoAssignee,
|
|
onToggleNoAssignee,
|
|
noAssigneeCount,
|
|
}: {
|
|
counts: Map<string, number>;
|
|
selected: ActorFilterValue[];
|
|
onToggle: (value: ActorFilterValue) => void;
|
|
showNoAssignee?: boolean;
|
|
includeNoAssignee?: boolean;
|
|
onToggleNoAssignee?: () => void;
|
|
noAssigneeCount?: number;
|
|
}) {
|
|
const [search, setSearch] = useState("");
|
|
const members = useWorkspaceStore((s) => s.members);
|
|
const agents = useWorkspaceStore((s) => s.agents);
|
|
const query = search.toLowerCase();
|
|
const filteredMembers = members.filter((m) =>
|
|
m.name.toLowerCase().includes(query),
|
|
);
|
|
const filteredAgents = agents.filter((a) =>
|
|
!a.archived_at && a.name.toLowerCase().includes(query),
|
|
);
|
|
|
|
const isSelected = (type: "member" | "agent", id: string) =>
|
|
selected.some((f) => f.type === type && f.id === id);
|
|
|
|
return (
|
|
<>
|
|
<div className="px-2 py-1.5 border-b border-foreground/5">
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Filter..."
|
|
className="w-full bg-transparent text-sm placeholder:text-muted-foreground outline-none"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-h-64 overflow-y-auto p-1">
|
|
{showNoAssignee &&
|
|
(!query || "no assignee".includes(query) || "unassigned".includes(query)) && (
|
|
<DropdownMenuCheckboxItem
|
|
checked={includeNoAssignee ?? false}
|
|
onCheckedChange={() => onToggleNoAssignee?.()}
|
|
className={FILTER_ITEM_CLASS}
|
|
>
|
|
<HoverCheck checked={includeNoAssignee ?? false} />
|
|
<UserMinus className="size-3.5 text-muted-foreground" />
|
|
No assignee
|
|
{(noAssigneeCount ?? 0) > 0 && (
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{noAssigneeCount}
|
|
</span>
|
|
)}
|
|
</DropdownMenuCheckboxItem>
|
|
)}
|
|
|
|
{filteredMembers.length > 0 && (
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Members</DropdownMenuLabel>
|
|
{filteredMembers.map((m) => {
|
|
const checked = isSelected("member", m.user_id);
|
|
const count = counts.get(`member:${m.user_id}`) ?? 0;
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={m.user_id}
|
|
checked={checked}
|
|
onCheckedChange={() =>
|
|
onToggle({ type: "member", id: m.user_id })
|
|
}
|
|
className={FILTER_ITEM_CLASS}
|
|
>
|
|
<HoverCheck checked={checked} />
|
|
<ActorAvatar actorType="member" actorId={m.user_id} size={18} />
|
|
<span className="truncate">{m.name}</span>
|
|
{count > 0 && (
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{count}
|
|
</span>
|
|
)}
|
|
</DropdownMenuCheckboxItem>
|
|
);
|
|
})}
|
|
</DropdownMenuGroup>
|
|
)}
|
|
|
|
{filteredAgents.length > 0 && (
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Agents</DropdownMenuLabel>
|
|
{filteredAgents.map((a) => {
|
|
const checked = isSelected("agent", a.id);
|
|
const count = counts.get(`agent:${a.id}`) ?? 0;
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={a.id}
|
|
checked={checked}
|
|
onCheckedChange={() =>
|
|
onToggle({ type: "agent", id: a.id })
|
|
}
|
|
className={FILTER_ITEM_CLASS}
|
|
>
|
|
<HoverCheck checked={checked} />
|
|
<ActorAvatar actorType="agent" actorId={a.id} size={18} />
|
|
<span className="truncate">{a.name}</span>
|
|
{count > 0 && (
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{count}
|
|
</span>
|
|
)}
|
|
</DropdownMenuCheckboxItem>
|
|
);
|
|
})}
|
|
</DropdownMenuGroup>
|
|
)}
|
|
|
|
{filteredMembers.length === 0 && filteredAgents.length === 0 && search && (
|
|
<div className="px-2 py-3 text-center text-sm text-muted-foreground">
|
|
No results
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// IssuesHeader
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function IssuesHeader({ scopedIssues }: { scopedIssues: Issue[] }) {
|
|
const scope = useIssuesScopeStore((s) => s.scope);
|
|
const setScope = useIssuesScopeStore((s) => s.setScope);
|
|
|
|
const viewMode = useIssueViewStore((s) => s.viewMode);
|
|
const statusFilters = useIssueViewStore((s) => s.statusFilters);
|
|
const priorityFilters = useIssueViewStore((s) => s.priorityFilters);
|
|
const assigneeFilters = useIssueViewStore((s) => s.assigneeFilters);
|
|
const includeNoAssignee = useIssueViewStore((s) => s.includeNoAssignee);
|
|
const creatorFilters = useIssueViewStore((s) => s.creatorFilters);
|
|
const sortBy = useIssueViewStore((s) => s.sortBy);
|
|
const sortDirection = useIssueViewStore((s) => s.sortDirection);
|
|
const cardProperties = useIssueViewStore((s) => s.cardProperties);
|
|
const act = useIssueViewStore.getState();
|
|
|
|
const counts = useIssueCounts(scopedIssues);
|
|
|
|
const hasActiveFilters =
|
|
getActiveFilterCount({
|
|
statusFilters,
|
|
priorityFilters,
|
|
assigneeFilters,
|
|
includeNoAssignee,
|
|
creatorFilters,
|
|
}) > 0;
|
|
|
|
const sortLabel =
|
|
SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? "Manual";
|
|
|
|
return (
|
|
<div className="flex h-12 shrink-0 items-center justify-between px-4">
|
|
{/* Left: scope buttons */}
|
|
<div className="flex items-center gap-1">
|
|
{SCOPES.map((s) => (
|
|
<Tooltip key={s.value}>
|
|
<TooltipTrigger
|
|
render={
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className={
|
|
scope === s.value
|
|
? "bg-accent text-accent-foreground hover:bg-accent/80"
|
|
: "text-muted-foreground"
|
|
}
|
|
onClick={() => setScope(s.value)}
|
|
>
|
|
{s.label}
|
|
</Button>
|
|
}
|
|
/>
|
|
<TooltipContent side="bottom">{s.description}</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right: filter + display + view toggle */}
|
|
<div className="flex items-center gap-1">
|
|
{/* Filter */}
|
|
<DropdownMenu>
|
|
<Tooltip>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<TooltipTrigger
|
|
render={
|
|
<Button variant="outline" size="icon-sm" className="relative text-muted-foreground">
|
|
<Filter className="size-4" />
|
|
{hasActiveFilters && (
|
|
<span className="absolute top-0 right-0 size-1.5 rounded-full bg-brand" />
|
|
)}
|
|
</Button>
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
<TooltipContent side="bottom">Filter</TooltipContent>
|
|
</Tooltip>
|
|
<DropdownMenuContent align="end" className="w-auto">
|
|
{/* Status */}
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<CircleDot className="size-3.5" />
|
|
<span className="flex-1">Status</span>
|
|
{statusFilters.length > 0 && (
|
|
<span className="text-xs text-primary font-medium">
|
|
{statusFilters.length}
|
|
</span>
|
|
)}
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="w-auto min-w-48">
|
|
{ALL_STATUSES.map((s) => {
|
|
const checked = statusFilters.includes(s);
|
|
const count = counts.status.get(s) ?? 0;
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={s}
|
|
checked={checked}
|
|
onCheckedChange={() => act.toggleStatusFilter(s)}
|
|
className={FILTER_ITEM_CLASS}
|
|
>
|
|
<HoverCheck checked={checked} />
|
|
<StatusIcon status={s} className="h-3.5 w-3.5" />
|
|
{STATUS_CONFIG[s].label}
|
|
{count > 0 && (
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{count} {count === 1 ? "issue" : "issues"}
|
|
</span>
|
|
)}
|
|
</DropdownMenuCheckboxItem>
|
|
);
|
|
})}
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
|
|
{/* Priority */}
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<SignalHigh className="size-3.5" />
|
|
<span className="flex-1">Priority</span>
|
|
{priorityFilters.length > 0 && (
|
|
<span className="text-xs text-primary font-medium">
|
|
{priorityFilters.length}
|
|
</span>
|
|
)}
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="w-auto min-w-44">
|
|
{PRIORITY_ORDER.map((p) => {
|
|
const checked = priorityFilters.includes(p);
|
|
const count = counts.priority.get(p) ?? 0;
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={p}
|
|
checked={checked}
|
|
onCheckedChange={() => act.togglePriorityFilter(p)}
|
|
className={FILTER_ITEM_CLASS}
|
|
>
|
|
<HoverCheck checked={checked} />
|
|
<PriorityIcon priority={p} />
|
|
{PRIORITY_CONFIG[p].label}
|
|
{count > 0 && (
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{count} {count === 1 ? "issue" : "issues"}
|
|
</span>
|
|
)}
|
|
</DropdownMenuCheckboxItem>
|
|
);
|
|
})}
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
|
|
{/* Assignee */}
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<User className="size-3.5" />
|
|
<span className="flex-1">Assignee</span>
|
|
{(assigneeFilters.length > 0 || includeNoAssignee) && (
|
|
<span className="text-xs text-primary font-medium">
|
|
{assigneeFilters.length + (includeNoAssignee ? 1 : 0)}
|
|
</span>
|
|
)}
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="w-auto min-w-52 p-0">
|
|
<ActorSubContent
|
|
counts={counts.assignee}
|
|
selected={assigneeFilters}
|
|
onToggle={act.toggleAssigneeFilter}
|
|
showNoAssignee
|
|
includeNoAssignee={includeNoAssignee}
|
|
onToggleNoAssignee={act.toggleNoAssignee}
|
|
noAssigneeCount={counts.noAssignee}
|
|
/>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
|
|
{/* Creator */}
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<UserPen className="size-3.5" />
|
|
<span className="flex-1">Creator</span>
|
|
{creatorFilters.length > 0 && (
|
|
<span className="text-xs text-primary font-medium">
|
|
{creatorFilters.length}
|
|
</span>
|
|
)}
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="w-auto min-w-52 p-0">
|
|
<ActorSubContent
|
|
counts={counts.creator}
|
|
selected={creatorFilters}
|
|
onToggle={act.toggleCreatorFilter}
|
|
/>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
|
|
{/* Reset */}
|
|
{hasActiveFilters && (
|
|
<>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={act.clearFilters}>
|
|
Reset all filters
|
|
</DropdownMenuItem>
|
|
</>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Display settings */}
|
|
<Popover>
|
|
<Tooltip>
|
|
<PopoverTrigger
|
|
render={
|
|
<TooltipTrigger
|
|
render={
|
|
<Button variant="outline" size="icon-sm" className="text-muted-foreground">
|
|
<SlidersHorizontal className="size-4" />
|
|
</Button>
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
<TooltipContent side="bottom">Display settings</TooltipContent>
|
|
</Tooltip>
|
|
<PopoverContent align="end" className="w-64 p-0">
|
|
<div className="border-b px-3 py-2.5">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Ordering
|
|
</span>
|
|
<div className="mt-2 flex items-center gap-1.5">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 justify-between text-xs"
|
|
>
|
|
{sortLabel}
|
|
<ChevronDown className="size-3 text-muted-foreground" />
|
|
</Button>
|
|
}
|
|
/>
|
|
<DropdownMenuContent align="start" className="w-auto">
|
|
{SORT_OPTIONS.map((opt) => (
|
|
<DropdownMenuItem
|
|
key={opt.value}
|
|
onClick={() => act.setSortBy(opt.value)}
|
|
>
|
|
{opt.label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<Button
|
|
variant="outline"
|
|
size="icon-sm"
|
|
onClick={() =>
|
|
act.setSortDirection(sortDirection === "asc" ? "desc" : "asc")
|
|
}
|
|
title={sortDirection === "asc" ? "Ascending" : "Descending"}
|
|
>
|
|
{sortDirection === "asc" ? (
|
|
<ArrowUp className="size-3.5" />
|
|
) : (
|
|
<ArrowDown className="size-3.5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-3 py-2.5">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Card properties
|
|
</span>
|
|
<div className="mt-2 space-y-2">
|
|
{CARD_PROPERTY_OPTIONS.map((opt) => (
|
|
<label
|
|
key={opt.key}
|
|
className="flex cursor-pointer items-center justify-between"
|
|
>
|
|
<span className="text-sm">{opt.label}</span>
|
|
<Switch
|
|
size="sm"
|
|
checked={cardProperties[opt.key]}
|
|
onCheckedChange={() => act.toggleCardProperty(opt.key)}
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
{/* View toggle */}
|
|
<DropdownMenu>
|
|
<Tooltip>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<TooltipTrigger
|
|
render={
|
|
<Button variant="outline" size="icon-sm" className="text-muted-foreground">
|
|
{viewMode === "board" ? (
|
|
<Columns3 className="size-4" />
|
|
) : (
|
|
<List className="size-4" />
|
|
)}
|
|
</Button>
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
<TooltipContent side="bottom">
|
|
{viewMode === "board" ? "Board view" : "List view"}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<DropdownMenuContent align="end" className="w-auto">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>View</DropdownMenuLabel>
|
|
<DropdownMenuItem onClick={() => act.setViewMode("board")}>
|
|
<Columns3 />
|
|
Board
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => act.setViewMode("list")}>
|
|
<List />
|
|
List
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|