c246ceaf21
- Removed broken LaunchSwarmDialog (formula-based) from TopBar/LeftPanel - All Rocket buttons (TopBar, LeftPanel, DAG nodes, social cards) now open AssignmentPanel (archetype-based) which actually works - Every Rocket clears taskId first so assignMode && !taskId condition passes - Conversation button priority: taskId always shows conversation, not assign panel - Added TelemetryStrip: minimized right sidebar with status dots when non-telemetry panel (conversation/assignment) is active - Live feed has minimize button → restores last taskId or assignMode - DAG nodes: Signal icon → restores telemetry feed - Social button on DAG nodes: single router.push to avoid race (setView + setTaskId) - Fixed social card message button: opens right panel with drawer:closed (no popup) Co-Authored-By: Oz <oz-agent@warp.dev>
556 lines
31 KiB
TypeScript
556 lines
31 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { ArrowLeft, ArrowUpRight, Clock3, Link2, MessageCircle, TriangleAlert, X } from "lucide-react"
|
|
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
import { Separator } from "@/components/ui/separator"
|
|
|
|
type TaskStatus = "open" | "in_progress" | "blocked" | "deferred" | "closed"
|
|
|
|
type Task = {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
status: TaskStatus
|
|
priority: 0 | 1 | 2 | 3 | 4
|
|
issueType: string
|
|
assignee: string
|
|
owner: string
|
|
labels: string[]
|
|
blockedReason: string
|
|
updatedAgo: string
|
|
dependencyCount: number
|
|
blockedByCount: number
|
|
commentCount: number
|
|
unread: boolean
|
|
}
|
|
|
|
type Epic = {
|
|
id: string
|
|
name: string
|
|
progress: number
|
|
openCount: number
|
|
tasks: Task[]
|
|
}
|
|
|
|
const palette = {
|
|
primary: "#F2A62F",
|
|
secondary: "#00D1A8",
|
|
accent: "#0FC5AE",
|
|
eggplant: "#4A2F63",
|
|
bg: "#2D2E3C",
|
|
surface: "#333341",
|
|
border: "#4A4D5C",
|
|
text: "#EDEBE5",
|
|
textSecondary: "#B8B7B1",
|
|
mutedBg: "#2F2F3E",
|
|
success: "#0FC5AE",
|
|
warning: "#D28A2C",
|
|
error: "#D64545",
|
|
info: "#00D1A8",
|
|
atmosphereWarm: "#5A4632",
|
|
atmosphereCool: "#23484D",
|
|
}
|
|
|
|
const initialEpics: Epic[] = [
|
|
{
|
|
id: "bb-ui2",
|
|
name: "Unified UX - Earthy Dark Shell",
|
|
progress: 69,
|
|
openCount: 11,
|
|
tasks: [
|
|
{ id: "bb-atf", title: "Agent swarm-view-integrator", description: "Integrate swarm view into social workroom shell.", status: "open", priority: 1, issueType: "task", assignee: "sarah.lee", owner: "swarm-team", labels: ["social", "swarm"], blockedReason: "", updatedAgo: "8m", dependencyCount: 1, blockedByCount: 0, commentCount: 3, unread: true },
|
|
{ id: "bb-z6s", title: "Agent social-view-integrator", description: "Wire social stream cards and panel routing.", status: "in_progress", priority: 0, issueType: "feature", assignee: "alex.chen", owner: "social-team", labels: ["social", "ui"], blockedReason: "", updatedAgo: "14m", dependencyCount: 2, blockedByCount: 0, commentCount: 7, unread: true },
|
|
{ id: "bb-nuy", title: "Agent swarm-card-builder", description: "Build consistent swarm card visuals and metadata.", status: "blocked", priority: 0, issueType: "bug", assignee: "alex.chen", owner: "swarm-team", labels: ["swarm", "cards"], blockedReason: "Waiting on dependency bb-ui2.0", updatedAgo: "35m", dependencyCount: 3, blockedByCount: 1, commentCount: 5, unread: true },
|
|
{ id: "bb-3ha", title: "Agent sessions-integrator", description: "Session metrics panel integrated and verified.", status: "closed", priority: 2, issueType: "chore", assignee: "alex.chen", owner: "sessions-team", labels: ["sessions"], blockedReason: "", updatedAgo: "2h", dependencyCount: 0, blockedByCount: 0, commentCount: 4, unread: false },
|
|
],
|
|
},
|
|
{
|
|
id: "bb-xhm",
|
|
name: "Timeline and Activity Feed",
|
|
progress: 80,
|
|
openCount: 5,
|
|
tasks: [
|
|
{ id: "bb-3dv", title: "Agent rightpanel-builder", description: "Implement right rail card stack and compact activity.", status: "open", priority: 2, issueType: "task", assignee: "alex.chen", owner: "layout-team", labels: ["layout", "right-panel"], blockedReason: "", updatedAgo: "11m", dependencyCount: 1, blockedByCount: 0, commentCount: 1, unread: true },
|
|
{ id: "bb-dwz", title: "Agent leftpanel-builder", description: "Epic->task navigation with search and metadata icons.", status: "in_progress", priority: 1, issueType: "feature", assignee: "sarah.lee", owner: "layout-team", labels: ["layout", "left-panel"], blockedReason: "", updatedAgo: "19m", dependencyCount: 0, blockedByCount: 0, commentCount: 6, unread: true },
|
|
{ id: "bb-5am", title: "Agent topbar-builder", description: "Topbar controls and filter sync.", status: "blocked", priority: 1, issueType: "bug", assignee: "agent-007", owner: "layout-team", labels: ["topbar"], blockedReason: "Navigation contract mismatch", updatedAgo: "41m", dependencyCount: 2, blockedByCount: 1, commentCount: 2, unread: false },
|
|
{ id: "bb-z2l", title: "Agent mobile-nav-builder", description: "Mobile drawer flow for three-pane shell.", status: "deferred", priority: 1, issueType: "task", assignee: "sarah.lee", owner: "mobile-team", labels: ["mobile", "navigation"], blockedReason: "", updatedAgo: "52m", dependencyCount: 0, blockedByCount: 0, commentCount: 2, unread: false },
|
|
],
|
|
},
|
|
]
|
|
|
|
function statusClasses(status: TaskStatus) {
|
|
if (status === "in_progress") return "border-l-[3px] border-l-[#0FC5AE] bg-[linear-gradient(145deg,#333341,#2F2F3E)]"
|
|
if (status === "blocked") return "border-l-[3px] border-l-[#D64545] bg-[linear-gradient(145deg,#333341,#302B31)]"
|
|
if (status === "deferred") return "border-l-[3px] border-l-[#D28A2C] bg-[linear-gradient(145deg,#333341,#342F29)]"
|
|
if (status === "closed") return "border-l-[3px] border-l-[#6D6F7B] bg-[linear-gradient(145deg,#333341,#2F3039)]"
|
|
return "border-l-[3px] border-l-[#00D1A8] bg-[linear-gradient(145deg,#333341,#2D313D)]"
|
|
}
|
|
|
|
function statusBadge(status: TaskStatus) {
|
|
if (status === "in_progress") return "bg-[#0FC5AE] text-[#0E2220]"
|
|
if (status === "blocked") return "bg-[#D64545] text-white"
|
|
if (status === "deferred") return "bg-[#D28A2C] text-[#24190C]"
|
|
if (status === "closed") return "bg-[#5A5D6A] text-[#D4D6DE]"
|
|
return "bg-[#00D1A8] text-[#07221C]"
|
|
}
|
|
|
|
const panelClass = "rounded-2xl border shadow-[0_16px_40px_rgba(0,0,0,0.28)] backdrop-blur-[2px]"
|
|
const subPanelClass = "rounded-xl border"
|
|
|
|
function updateQuery(searchParams: URLSearchParams, updates: Record<string, string | null>) {
|
|
const next = new URLSearchParams(searchParams.toString())
|
|
for (const [key, value] of Object.entries(updates)) {
|
|
if (!value) next.delete(key)
|
|
else next.set(key, value)
|
|
}
|
|
const qs = next.toString()
|
|
return qs ? `?${qs}` : "?"
|
|
}
|
|
|
|
export default function MockupPage() {
|
|
const searchParams = useSearchParams()
|
|
const router = useRouter()
|
|
|
|
const [epics, setEpics] = useState(initialEpics)
|
|
const [query, setQuery] = useState("")
|
|
const [leftMode, setLeftMode] = useState<"epics" | "tasks">("epics")
|
|
|
|
const urlEpic = searchParams.get("epic")
|
|
const urlTask = searchParams.get("task")
|
|
const urlThread = searchParams.get("thread") === "open"
|
|
|
|
const initialEpic = epics.find((epic) => epic.id === urlEpic) ?? epics[0]
|
|
const [selectedEpicId, setSelectedEpicId] = useState(initialEpic.id)
|
|
const [selectedTaskId, setSelectedTaskId] = useState(urlTask ?? initialEpic.tasks[0].id)
|
|
const [threadOpen, setThreadOpen] = useState(urlThread)
|
|
const [threadEditMode, setThreadEditMode] = useState(false)
|
|
|
|
const [draftTitle, setDraftTitle] = useState("")
|
|
const [draftDescription, setDraftDescription] = useState("")
|
|
const [draftStatus, setDraftStatus] = useState<TaskStatus>("open")
|
|
const [draftPriority, setDraftPriority] = useState<0 | 1 | 2 | 3 | 4>(2)
|
|
const [draftIssueType, setDraftIssueType] = useState("")
|
|
const [draftAssignee, setDraftAssignee] = useState("")
|
|
const [draftOwner, setDraftOwner] = useState("")
|
|
const [draftLabels, setDraftLabels] = useState("")
|
|
const [draftBlockedReason, setDraftBlockedReason] = useState("")
|
|
const [savePulse, setSavePulse] = useState(false)
|
|
|
|
const closeThread = useCallback(() => {
|
|
setThreadOpen(false)
|
|
setThreadEditMode(false)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const next = updateQuery(searchParams, {
|
|
epic: selectedEpicId,
|
|
task: selectedTaskId,
|
|
thread: threadOpen ? "open" : null,
|
|
})
|
|
router.replace(next, { scroll: false })
|
|
}, [router, searchParams, selectedEpicId, selectedTaskId, threadOpen])
|
|
|
|
useEffect(() => {
|
|
if (!threadOpen) {
|
|
return
|
|
}
|
|
const onKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
closeThread()
|
|
}
|
|
}
|
|
window.addEventListener("keydown", onKeyDown)
|
|
return () => window.removeEventListener("keydown", onKeyDown)
|
|
}, [threadOpen, closeThread])
|
|
|
|
const selectedEpic = epics.find((epic) => epic.id === selectedEpicId) ?? epics[0]
|
|
const filteredTasks = useMemo(() => {
|
|
const q = query.trim().toLowerCase()
|
|
return selectedEpic.tasks.filter((task) => `${task.id} ${task.title}`.toLowerCase().includes(q))
|
|
}, [query, selectedEpic.tasks])
|
|
const selectedTask = filteredTasks.find((task) => task.id === selectedTaskId) ?? filteredTasks[0]
|
|
|
|
useEffect(() => {
|
|
if (!selectedTask) return
|
|
setDraftTitle(selectedTask.title)
|
|
setDraftDescription(selectedTask.description)
|
|
setDraftStatus(selectedTask.status)
|
|
setDraftPriority(selectedTask.priority)
|
|
setDraftIssueType(selectedTask.issueType)
|
|
setDraftAssignee(selectedTask.assignee)
|
|
setDraftOwner(selectedTask.owner)
|
|
setDraftLabels(selectedTask.labels.join(", "))
|
|
setDraftBlockedReason(selectedTask.blockedReason)
|
|
setThreadEditMode(false)
|
|
}, [selectedTask, selectedTask?.id])
|
|
|
|
const saveTaskChanges = () => {
|
|
if (!selectedTask) return
|
|
const nextLabels = draftLabels
|
|
.split(",")
|
|
.map((part) => part.trim())
|
|
.filter(Boolean)
|
|
setEpics((current) =>
|
|
current.map((epic) =>
|
|
epic.id !== selectedEpicId
|
|
? epic
|
|
: {
|
|
...epic,
|
|
tasks: epic.tasks.map((task) =>
|
|
task.id !== selectedTask.id
|
|
? task
|
|
: {
|
|
...task,
|
|
title: draftTitle,
|
|
description: draftDescription,
|
|
status: draftStatus,
|
|
priority: draftPriority,
|
|
issueType: draftIssueType,
|
|
assignee: draftAssignee,
|
|
owner: draftOwner,
|
|
labels: nextLabels,
|
|
blockedReason: draftBlockedReason,
|
|
updatedAgo: "now",
|
|
blockedByCount: draftStatus === "blocked" ? Math.max(task.blockedByCount, 1) : 0,
|
|
}
|
|
),
|
|
}
|
|
)
|
|
)
|
|
setSavePulse(true)
|
|
setTimeout(() => setSavePulse(false), 900)
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen" style={{ backgroundColor: palette.bg, color: palette.text }}>
|
|
<div
|
|
className="min-h-screen"
|
|
style={{
|
|
backgroundImage:
|
|
`radial-gradient(circle at 12% 16%, rgba(90,70,50,0.55), transparent 34%), radial-gradient(circle at 88% 82%, rgba(35,72,77,0.50), transparent 32%)`,
|
|
}}
|
|
>
|
|
<div className="mx-auto max-w-[1500px] px-4 py-6 md:px-8 md:py-8">
|
|
<header className="mb-6 flex flex-wrap items-end justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-4xl font-semibold tracking-tight leading-[1.02] md:text-5xl">Social Workroom</h1>
|
|
<p className="mt-2 text-sm" style={{ color: palette.textSecondary }}>Task-first center. Epic drill-in. Live awareness rail.</p>
|
|
</div>
|
|
<Badge className="rounded-full px-3 py-1 text-xs text-white" style={{ backgroundColor: palette.eggplant }}>mockup route</Badge>
|
|
</header>
|
|
|
|
<section className="grid gap-4 lg:grid-cols-[24%_52%_24%]">
|
|
<Card className={panelClass} style={{ backgroundColor: palette.surface, borderColor: palette.border }}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
{leftMode === "tasks" ? (
|
|
<Button variant="ghost" className="h-8 px-2" onClick={() => setLeftMode("epics")}>
|
|
<ArrowLeft className="mr-2 h-4 w-4" /> Back to epics
|
|
</Button>
|
|
) : (
|
|
<CardTitle className="text-lg">Epics</CardTitle>
|
|
)}
|
|
<Badge className="rounded-full" style={{ backgroundColor: palette.mutedBg, color: palette.textSecondary }}>{selectedEpic.openCount} open</Badge>
|
|
</div>
|
|
<CardDescription style={{ color: palette.textSecondary }}>Select an epic, then choose a task.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<Input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder={leftMode === "epics" ? "Search epics" : "Search tasks"}
|
|
className="mb-3"
|
|
style={{ backgroundColor: palette.mutedBg, borderColor: palette.border }}
|
|
/>
|
|
<ScrollArea className="h-[520px] pr-2">
|
|
<div className="space-y-2">
|
|
{leftMode === "epics"
|
|
? epics
|
|
.filter((epic) => epic.name.toLowerCase().includes(query.toLowerCase()))
|
|
.map((epic) => (
|
|
<button
|
|
key={epic.id}
|
|
type="button"
|
|
className={`${subPanelClass} w-full p-3 text-left transition duration-200 hover:-translate-y-[1px] hover:shadow-[0_10px_24px_rgba(0,0,0,0.35)]`}
|
|
style={{ backgroundColor: palette.surface, borderColor: palette.border }}
|
|
onClick={() => {
|
|
setSelectedEpicId(epic.id)
|
|
setSelectedTaskId(epic.tasks[0]?.id ?? "")
|
|
setLeftMode("tasks")
|
|
closeThread()
|
|
}}
|
|
>
|
|
<p className="text-sm font-semibold">{epic.name}</p>
|
|
<p className="mt-1 text-xs" style={{ color: palette.textSecondary }}>{epic.id}</p>
|
|
</button>
|
|
))
|
|
: filteredTasks.map((task) => (
|
|
<button
|
|
key={task.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedTaskId(task.id)
|
|
closeThread()
|
|
}}
|
|
className={`${subPanelClass} w-full p-3 text-left transition duration-200 ${selectedTask?.id === task.id
|
|
? "shadow-[0_12px_26px_rgba(0,0,0,0.4)]"
|
|
: "hover:-translate-y-[1px] hover:shadow-[0_10px_22px_rgba(0,0,0,0.33)]"
|
|
}`}
|
|
style={{
|
|
backgroundColor: selectedTask?.id === task.id ? palette.mutedBg : palette.surface,
|
|
borderColor: selectedTask?.id === task.id ? palette.primary : palette.border,
|
|
}}
|
|
>
|
|
<p className="text-sm font-semibold">{task.id}</p>
|
|
<p className="mt-1 line-clamp-1 text-xs" style={{ color: palette.textSecondary }}>{task.title}</p>
|
|
<div className="mt-2 flex items-center gap-3 text-[11px]" style={{ color: palette.textSecondary }}>
|
|
<span className="inline-flex items-center gap-1"><Clock3 className="h-3 w-3" />{task.updatedAgo}</span>
|
|
<span className="inline-flex items-center gap-1"><Link2 className="h-3 w-3" />{task.dependencyCount}</span>
|
|
<span className="inline-flex items-center gap-1"><MessageCircle className="h-3 w-3" />{task.commentCount}</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className={panelClass} style={{ backgroundColor: palette.surface, borderColor: palette.border }}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-lg">{selectedEpic.name}</CardTitle>
|
|
<CardDescription style={{ color: palette.textSecondary }}>Task cards + thread context</CardDescription>
|
|
</div>
|
|
<Button className="h-8 rounded-full px-4 text-white" style={{ backgroundColor: palette.primary }}>New update</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ScrollArea className="h-[430px] pr-2">
|
|
<div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
|
|
{filteredTasks.map((task) => (
|
|
<button
|
|
key={task.id}
|
|
type="button"
|
|
onClick={() => setSelectedTaskId(task.id)}
|
|
className={`rounded-xl border p-4 text-left transition duration-200 hover:-translate-y-[1px] hover:shadow-[0_14px_28px_rgba(0,0,0,0.35)] ${statusClasses(task.status)}`}
|
|
style={{ borderColor: selectedTask?.id === task.id ? palette.primary : palette.border }}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-semibold" style={{ color: palette.eggplant }}>{task.id}</span>
|
|
<Badge className={`rounded-full px-2 py-0.5 text-[11px] ${statusBadge(task.status)}`}>{task.status.replace("_", " ")}</Badge>
|
|
</div>
|
|
<p className="mt-3 text-[1.7rem] font-semibold leading-[1.15]">{task.title}</p>
|
|
<p className="mt-2 line-clamp-2 text-sm" style={{ color: palette.textSecondary }}>{task.description}</p>
|
|
<div className="mt-4 flex items-center gap-3 text-xs" style={{ color: palette.textSecondary }}>
|
|
<span className="inline-flex items-center gap-1"><Clock3 className="h-3.5 w-3.5" />{task.updatedAgo}</span>
|
|
<span className="inline-flex items-center gap-1"><Link2 className="h-3.5 w-3.5" />{task.dependencyCount}</span>
|
|
<span className="inline-flex items-center gap-1"><MessageCircle className="h-3.5 w-3.5" />{task.commentCount}</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
<Separator className="my-4" />
|
|
<div className={`${subPanelClass} p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]`} style={{ borderColor: palette.border, backgroundColor: palette.mutedBg }}>
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<p className="text-sm font-semibold">Conversation: {selectedTask?.id}</p>
|
|
<Button variant="ghost" className="h-7 px-2" style={{ color: palette.secondary }} onClick={() => setThreadOpen(true)}>
|
|
Open thread <ArrowUpRight className="ml-1 h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="rounded-lg border px-3 py-2 text-sm" style={{ borderColor: "#5A5D6A", backgroundColor: "#2A2B37" }}>
|
|
<span className="font-semibold" style={{ color: palette.success }}>alex.chen</span>
|
|
<span className="mx-1 text-xs" style={{ color: "#8F92A3" }}>2m</span>
|
|
<span style={{ color: palette.textSecondary }}>Need confirmation that detail strip stays sticky while card grid scrolls.</span>
|
|
</div>
|
|
<div className="rounded-lg border px-3 py-2 text-sm" style={{ borderColor: "#5A5D6A", backgroundColor: "#2A2B37" }}>
|
|
<span className="font-semibold" style={{ color: palette.secondary }}>sarah.lee</span>
|
|
<span className="mx-1 text-xs" style={{ color: "#8F92A3" }}>1m</span>
|
|
<span style={{ color: palette.textSecondary }}>Approved if right rail remains visible at 1280px breakpoint.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className={panelClass} style={{ backgroundColor: palette.surface, borderColor: palette.border }}>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg">Live Context</CardTitle>
|
|
<CardDescription style={{ color: palette.textSecondary }}>Persistent awareness while working tasks.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 pt-0">
|
|
<div className={`${subPanelClass} p-3 shadow-[0_8px_20px_rgba(0,0,0,0.25)]`} style={{ borderColor: palette.border, backgroundColor: palette.mutedBg }}>
|
|
<p className="mb-2 text-sm font-semibold">Live Agents</p>
|
|
<div className="space-y-1 text-sm">
|
|
<p className="flex items-center justify-between"><span>swarm-view-integrator</span><span style={{ color: palette.success }}>online</span></p>
|
|
<p className="flex items-center justify-between"><span>social-view-integrator</span><span style={{ color: palette.warning }}>away</span></p>
|
|
<p className="flex items-center justify-between"><span>graph-integrator</span><span style={{ color: palette.info }}>busy</span></p>
|
|
</div>
|
|
</div>
|
|
<div className={`${subPanelClass} p-3 shadow-[0_8px_20px_rgba(0,0,0,0.25)]`} style={{ borderColor: palette.border, backgroundColor: palette.mutedBg }}>
|
|
<p className="mb-2 text-sm font-semibold">Recent Activity</p>
|
|
<div className="space-y-1 text-xs" style={{ color: palette.textSecondary }}>
|
|
<p>5m · bb-z6s moved to in progress</p>
|
|
<p>11m · bb-atf received 2 comments</p>
|
|
<p>18m · bb-3ha marked closed</p>
|
|
<p>33m · bb-nuy dependency changed</p>
|
|
</div>
|
|
</div>
|
|
<div className={`${subPanelClass} p-3 shadow-[0_8px_20px_rgba(0,0,0,0.22)]`} style={{ borderColor: "#6A4E2F", backgroundColor: "#3A332B" }}>
|
|
<p className="mb-2 text-sm font-semibold">Attention</p>
|
|
<p className="flex items-center gap-2 text-sm" style={{ color: "#F2C684" }}><TriangleAlert className="h-4 w-4" /> 2 blocked tasks in selected epic</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{threadOpen ? (
|
|
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/35 p-2 md:items-center md:p-4" onClick={closeThread}>
|
|
<div
|
|
className={`${panelClass} w-full max-w-[980px] p-4 md:p-5`}
|
|
style={{
|
|
borderColor: "#5B5E71",
|
|
background: "linear-gradient(180deg,#323342,#2A2B38)",
|
|
color: palette.text,
|
|
}}
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div>
|
|
<p className="text-lg font-semibold">Thread · {selectedTask?.id}</p>
|
|
<p className="text-xs" style={{ color: palette.textSecondary }}>Bead summary and inline edit mode</p>
|
|
</div>
|
|
<Button variant="ghost" className="h-8 w-8 p-0 hover:bg-white/10" aria-label="Close thread" onClick={closeThread}><X className="h-4 w-4" /></Button>
|
|
</div>
|
|
<div className="mt-3 rounded-xl border p-4" style={{ borderColor: "#55586A", backgroundColor: "#2A2B37" }}>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<p className="text-sm font-semibold">{threadEditMode ? "Edit task" : "Task summary"}</p>
|
|
<Badge className="rounded-full px-2 py-0.5 text-[11px]" style={{ backgroundColor: savePulse ? palette.success : "#3C3E4E", color: savePulse ? "#0E2220" : "#B8B7B1" }}>
|
|
{savePulse ? "saved" : "ready"}
|
|
</Badge>
|
|
</div>
|
|
{!threadEditMode ? (
|
|
<div className="space-y-3 text-sm">
|
|
<div className="rounded-lg border p-3" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>
|
|
<p className="text-xs mb-1" style={{ color: "#A4A7B7" }}>{selectedTask?.id}</p>
|
|
<p className="font-semibold text-base text-[#ECEBE5]">{selectedTask?.title}</p>
|
|
<p className="mt-1" style={{ color: palette.textSecondary }}>{selectedTask?.description}</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="rounded-lg border p-2" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>Status: {selectedTask?.status}</div>
|
|
<div className="rounded-lg border p-2" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>Priority: P{selectedTask?.priority}</div>
|
|
<div className="rounded-lg border p-2" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>Assignee: {selectedTask?.assignee || "-"}</div>
|
|
<div className="rounded-lg border p-2" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>Owner: {selectedTask?.owner || "-"}</div>
|
|
<div className="rounded-lg border p-2 col-span-2" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>
|
|
Labels: {selectedTask?.labels.join(", ") || "-"}
|
|
</div>
|
|
<div className="rounded-lg border p-2 col-span-2" style={{ borderColor: "#585B6D", backgroundColor: "#323342" }}>
|
|
Blocked reason: {selectedTask?.blockedReason || "None"}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<Button className="rounded-full px-4 text-[#24190C]" style={{ backgroundColor: palette.primary }} onClick={() => setThreadEditMode(true)}>
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
<div>
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Title</p>
|
|
<Input value={draftTitle} onChange={(event) => setDraftTitle(event.target.value)} style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text }} />
|
|
</div>
|
|
<div>
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Assignee</p>
|
|
<Input value={draftAssignee} onChange={(event) => setDraftAssignee(event.target.value)} style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text }} />
|
|
</div>
|
|
<div className="md:col-span-2">
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Description</p>
|
|
<Input value={draftDescription} onChange={(event) => setDraftDescription(event.target.value)} style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text }} />
|
|
</div>
|
|
<div>
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Issue type</p>
|
|
<Input value={draftIssueType} onChange={(event) => setDraftIssueType(event.target.value)} style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text }} />
|
|
</div>
|
|
<div>
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Owner</p>
|
|
<Input value={draftOwner} disabled style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text, opacity: 0.7 }} />
|
|
</div>
|
|
<div className="md:col-span-2">
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Labels (comma separated)</p>
|
|
<Input value={draftLabels} onChange={(event) => setDraftLabels(event.target.value)} style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text }} />
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Status</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{(["open", "in_progress", "blocked", "deferred", "closed"] as TaskStatus[]).map((status) => (
|
|
<button
|
|
key={status}
|
|
type="button"
|
|
className={`rounded-full border px-2 py-1 text-xs ${draftStatus === status ? statusBadge(status) : ""}`}
|
|
style={{
|
|
borderColor: draftStatus === status ? "transparent" : palette.border,
|
|
backgroundColor: draftStatus === status ? undefined : "#323342",
|
|
color: draftStatus === status ? undefined : palette.textSecondary,
|
|
}}
|
|
onClick={() => setDraftStatus(status)}
|
|
>
|
|
{status.replace("_", " ")}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Priority</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{([0, 1, 2, 3, 4] as const).map((priority) => (
|
|
<button
|
|
key={priority}
|
|
type="button"
|
|
onClick={() => setDraftPriority(priority)}
|
|
className="rounded-full border px-2 py-1 text-xs"
|
|
style={{
|
|
borderColor: draftPriority === priority ? palette.eggplant : palette.border,
|
|
backgroundColor: draftPriority === priority ? "#F4EAFE" : palette.surface,
|
|
color: draftPriority === priority ? palette.eggplant : palette.textSecondary,
|
|
}}
|
|
>
|
|
P{priority}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<p className="mb-1 text-xs" style={{ color: palette.textSecondary }}>Blocked reason</p>
|
|
<Input value={draftBlockedReason} onChange={(event) => setDraftBlockedReason(event.target.value)} style={{ backgroundColor: "#323342", borderColor: "#585B6D", color: palette.text }} />
|
|
</div>
|
|
<div className="mt-4 flex justify-end gap-2">
|
|
<Button variant="outline" className="rounded-full px-4 border-[#585B6D] bg-[#323342] text-[#B8B7B1] hover:bg-[#3A3B49]" onClick={() => setThreadEditMode(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button className="rounded-full px-4 text-[#24190C]" style={{ backgroundColor: palette.primary }} onClick={() => { saveTaskChanges(); setThreadEditMode(false) }}>
|
|
Save changes
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</main>
|
|
)
|
|
}
|