viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use theme CSS variables in BlockedTriageModal

Browse source
This commit is contained in:
zenchantlive 2026-03-01 21:29:02 -08:00
parent c8c91736b8
commit 79f4bacb5c
1 changed files with 27 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/shared/blocked-triage-modal.tsx
View file

@ -10,6 +10,7 @@ import {
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { deriveBlockedIds, buildBlockedByTree, type BlockedTreeNode } from '../../lib/kanban'; import { deriveBlockedIds, buildBlockedByTree, type BlockedTreeNode } from '../../lib/kanban';
import { useArchetypePicker } from '../../hooks/use-archetype-picker'; import { useArchetypePicker } from '../../hooks/use-archetype-picker';
import { useArchetypes } from '../../hooks/use-archetypes';
import type { BeadIssue } from '../../lib/types'; import type { BeadIssue } from '../../lib/types';
import { Blocks, ChevronRight, UserPlus } from 'lucide-react'; import { Blocks, ChevronRight, UserPlus } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@ -27,6 +28,7 @@ export function BlockedTriageModal({
issues, issues,
projectRoot, projectRoot,
}: BlockedTriageModalProps) { }: BlockedTriageModalProps) {
const { archetypes } = useArchetypes(projectRoot);
const blockedIdsSet = useMemo(() => deriveBlockedIds(issues), [issues]); const blockedIdsSet = useMemo(() => deriveBlockedIds(issues), [issues]);
const blockedTasks = useMemo(() => { const blockedTasks = useMemo(() => {
@ -54,13 +56,13 @@ export function BlockedTriageModal({
return ( return (
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}> <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col"> <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col bg-[var(--surface-elevated)] border-[var(--border-strong)]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2 text-[var(--text-primary)]">
<Blocks className="w-5 h-5 text-amber-500" /> <Blocks className="w-5 h-5 text-[var(--accent-warning)]" />
Blocked Tasks Triage Blocked Tasks Triage
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription className="text-[var(--text-secondary)]">
{blockedTasks.length} blocked task{blockedTasks.length !== 1 ? 's' : ''} require attention. {blockedTasks.length} blocked task{blockedTasks.length !== 1 ? 's' : ''} require attention.
Click on a row to see the blocker chain and assign an archetype. Click on a row to see the blocker chain and assign an archetype.
</DialogDescription> </DialogDescription>
@ -68,7 +70,7 @@ export function BlockedTriageModal({
<div className="flex-1 overflow-y-auto space-y-2 pr-2"> <div className="flex-1 overflow-y-auto space-y-2 pr-2">
{blockedTasks.length === 0 ? ( {blockedTasks.length === 0 ? (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-[var(--text-tertiary)]">
No blocked tasks found. No blocked tasks found.
</div> </div>
) : ( ) : (
@ -79,34 +81,34 @@ export function BlockedTriageModal({
return ( return (
<div <div
key={issue.id} key={issue.id}
className="border rounded-lg bg-card overflow-hidden" className="border rounded-lg bg-[var(--surface-card)] border-[var(--border-subtle)] overflow-hidden"
> >
<button <button
onClick={() => toggleRow(issue.id)} onClick={() => toggleRow(issue.id)}
className="w-full flex items-center gap-3 p-3 text-left hover:bg-accent transition-colors" className="w-full flex items-center gap-3 p-3 text-left hover:bg-[var(--surface-hover)] transition-colors"
> >
<ChevronRight <ChevronRight
className={cn( className={cn(
'w-4 h-4 text-muted-foreground transition-transform', 'w-4 h-4 text-[var(--text-tertiary)] transition-transform',
isExpanded && 'rotate-90' isExpanded && 'rotate-90'
)} )}
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="font-medium text-foreground truncate"> <p className="font-medium text-[var(--text-primary)] truncate">
{issue.title} {issue.title}
</p> </p>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-[var(--text-tertiary)]">
{issue.id} {issue.id}
</p> </p>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{issue.status === 'blocked' && ( {issue.status === 'blocked' && (
<span className="text-xs px-2 py-0.5 rounded bg-amber-500/20 text-amber-500"> <span className="text-xs px-2 py-0.5 rounded bg-[var(--status-blocked)] text-[var(--text-inverse)]">
explicit explicit
</span> </span>
)} )}
{blockedIdsSet.has(issue.id) && issue.status !== 'blocked' && ( {blockedIdsSet.has(issue.id) && issue.status !== 'blocked' && (
<span className="text-xs px-2 py-0.5 rounded bg-orange-500/20 text-orange-500"> <span className="text-xs px-2 py-0.5 rounded bg-[var(--accent-warning)]/20 text-[var(--accent-warning)]">
derived derived
</span> </span>
)} )}
@ -114,32 +116,32 @@ export function BlockedTriageModal({
</button> </button>
{isExpanded && ( {isExpanded && (
<div className="border-t p-3 bg-muted/30"> <div className="border-t border-[var(--border-subtle)] p-3 bg-[var(--surface-tertiary)]/50">
{blockerChain.nodes.length > 0 ? ( {blockerChain.nodes.length > 0 ? (
<div className="mb-3"> <div className="mb-3">
<p className="text-xs font-medium text-muted-foreground mb-2"> <p className="text-xs font-medium text-[var(--text-tertiary)] mb-2">
Blocked by: Blocked by:
</p> </p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{blockerChain.nodes.map((node: BlockedTreeNode) => ( {blockerChain.nodes.map((node: BlockedTreeNode) => (
<span <span
key={node.id} key={node.id}
className="inline-flex items-center text-xs px-2 py-1 rounded bg-background border" className="inline-flex items-center text-xs px-2 py-1 rounded bg-[var(--surface-elevated)] border border-[var(--border-subtle)]"
style={{ marginLeft: `${node.level * 12}px` }} style={{ marginLeft: `${node.level * 12}px` }}
> >
<span className="w-1.5 h-1.5 rounded-full bg-red-400 mr-1.5" /> <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent-danger)] mr-1.5" />
{node.title} {node.title}
</span> </span>
))} ))}
{blockerChain.total > blockerChain.nodes.length && ( {blockerChain.total > blockerChain.nodes.length && (
<span className="text-xs text-muted-foreground py-1"> <span className="text-xs text-[var(--text-tertiary)] py-1">
+{blockerChain.total - blockerChain.nodes.length} more +{blockerChain.total - blockerChain.nodes.length} more
</span> </span>
)} )}
</div> </div>
</div> </div>
) : ( ) : (
<p className="text-xs text-muted-foreground mb-3"> <p className="text-xs text-[var(--text-tertiary)] mb-3">
No blocker chain found. No blocker chain found.
</p> </p>
)} )}
@ -150,28 +152,29 @@ export function BlockedTriageModal({
onChange={(e) => onChange={(e) =>
archetypePicker.setSelectedArchetype(e.target.value || null) archetypePicker.setSelectedArchetype(e.target.value || null)
} }
className="flex-1 text-sm px-3 py-1.5 rounded border bg-background" className="flex-1 text-sm px-3 py-1.5 rounded border bg-[var(--surface-input)] border-[var(--border-default)] text-[var(--text-primary)]"
> >
<option value="">Select archetype...</option> <option value="">Select archetype...</option>
<option value="arch-1">arch-1</option> {archetypes.map((a) => (
<option value="arch-2">arch-2</option> <option key={a.id} value={a.id}>{a.name}</option>
))}
</select> </select>
<button <button
onClick={() => handleAssign(issue.id)} onClick={() => handleAssign(issue.id)}
disabled={!archetypePicker.selectedArchetype || archetypePicker.isAssigning} disabled={!archetypePicker.selectedArchetype || archetypePicker.isAssigning}
className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed" className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-[var(--accent-info)] text-[var(--text-inverse)] text-sm font-medium hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed"
> >
<UserPlus className="w-3.5 h-3.5" /> <UserPlus className="w-3.5 h-3.5" />
{archetypePicker.isAssigning ? 'Assigning...' : 'Assign'} {archetypePicker.isAssigning ? 'Assigning...' : 'Assign'}
</button> </button>
</div> </div>
{archetypePicker.assignError && ( {archetypePicker.assignError && (
<p className="text-xs text-red-500 mt-2"> <p className="text-xs text-[var(--accent-danger)] mt-2">
{archetypePicker.assignError} {archetypePicker.assignError}
</p> </p>
)} )}
{archetypePicker.assignSuccess && ( {archetypePicker.assignSuccess && (
<p className="text-xs text-green-500 mt-2"> <p className="text-xs text-[var(--accent-success)] mt-2">
Assigned successfully! Assigned successfully!
</p> </p>
)} )}