hammer/hammer-queue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode support, markdown descriptions, inline editing on TaskPage

Browse Source 
- Full dark mode across TaskPage (header, cards, sidebar, forms)
- Task descriptions rendered as markdown (ReactMarkdown + remark-gfm)
- Inline description editing with markdown preview
- Inline title editing (click to edit)
- Theme system (useTheme hook with light/dark/system toggle)
- Dark mode classes across remaining components
This commit is contained in:
Hammer
2026-01-29 10:33:38 +00:00
parent ef35e508c4
commit f4c60bf6aa
13 changed files with 599 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/App.tsx
View File

@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { DashboardLayout } from "./components/DashboardLayout";
import { LoginPage } from "./components/LoginPage";
import { ToastProvider } from "./components/Toast";
import { ThemeProvider } from "./hooks/useTheme";
import { useSession } from "./lib/auth-client";
// Lazy-loaded pages for code splitting
@@ -50,20 +51,26 @@ function App() {
if (session.isPending) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
<div className="text-gray-400">Loading...</div>
</div>
);
}
if (!session.data) {
return <LoginPage onSuccess={() => window.location.reload()} />;
return (
<ThemeProvider>
<LoginPage onSuccess={() => window.location.reload()} />
</ThemeProvider>
);
}
return (
<ThemeProvider>
<ToastProvider>
<AuthenticatedApp />
</ToastProvider>
</ThemeProvider>
);
}

18
frontend/src/components/DashboardLayout.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from "react";
import { NavLink, Outlet } from "react-router-dom";
import { useCurrentUser } from "../hooks/useCurrentUser";
import { useTheme } from "../hooks/useTheme";
import { signOut } from "../lib/auth-client";
const navItems = [
@@ -13,8 +14,16 @@ const navItems = [
export function DashboardLayout() {
const { user, isAdmin } = useCurrentUser();
const { theme, setTheme } = useTheme();
const [sidebarOpen, setSidebarOpen] = useState(false);
const cycleTheme = () => {
const next = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
setTheme(next);
};
const themeIcon = theme === "light" ? "☀️" : theme === "dark" ? "🌙" : "💻";
const themeLabel = theme === "light" ? "Light" : theme === "dark" ? "Dark" : "System";
const handleLogout = async () => {
await signOut();
window.location.reload();
@@ -23,7 +32,7 @@ export function DashboardLayout() {
const closeSidebar = () => setSidebarOpen(false);
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex">
{/* Mobile header */}
<header className="md:hidden fixed top-0 left-0 right-0 z-40 bg-gray-900 text-white flex items-center h-14 px-4 shadow-lg">
<button
@@ -138,6 +147,13 @@ export function DashboardLayout() {
)}
</div>
</div>
<button
onClick={cycleTheme}
className="w-full text-xs text-gray-500 hover:text-gray-300 px-3 py-1.5 rounded-lg hover:bg-gray-800 transition text-left flex items-center gap-2 mb-1"
title={`Theme: ${themeLabel}`}
>
<span>{themeIcon}</span> {themeLabel}
</button>
<button
onClick={handleLogout}
className="w-full text-xs text-gray-500 hover:text-red-400 px-3 py-1.5 rounded-lg hover:bg-gray-800 transition text-left"

64
frontend/src/components/KanbanBoard.tsx
View File

@@ -17,45 +17,45 @@ const COLUMNS: KanbanColumn[] = [
status: "active",
label: "Active",
icon: "⚡",
color: "text-amber-700",
bgColor: "bg-amber-50",
borderColor: "border-amber-200",
dropColor: "bg-amber-100",
color: "text-amber-700 dark:text-amber-400",
bgColor: "bg-amber-50 dark:bg-amber-900/10",
borderColor: "border-amber-200 dark:border-amber-800",
dropColor: "bg-amber-100 dark:bg-amber-900/20",
},
{
status: "queued",
label: "Queued",
icon: "📋",
color: "text-blue-700",
bgColor: "bg-blue-50",
borderColor: "border-blue-200",
dropColor: "bg-blue-100",
color: "text-blue-700 dark:text-blue-400",
bgColor: "bg-blue-50 dark:bg-blue-900/10",
borderColor: "border-blue-200 dark:border-blue-800",
dropColor: "bg-blue-100 dark:bg-blue-900/20",
},
{
status: "blocked",
label: "Blocked",
icon: "🚫",
color: "text-red-700",
bgColor: "bg-red-50",
borderColor: "border-red-200",
dropColor: "bg-red-100",
color: "text-red-700 dark:text-red-400",
bgColor: "bg-red-50 dark:bg-red-900/10",
borderColor: "border-red-200 dark:border-red-800",
dropColor: "bg-red-100 dark:bg-red-900/20",
},
{
status: "completed",
label: "Done",
icon: "✅",
color: "text-green-700",
bgColor: "bg-green-50",
borderColor: "border-green-200",
dropColor: "bg-green-100",
color: "text-green-700 dark:text-green-400",
bgColor: "bg-green-50 dark:bg-green-900/10",
borderColor: "border-green-200 dark:border-green-800",
dropColor: "bg-green-100 dark:bg-green-900/20",
},
];
const PRIORITY_COLORS: Record<string, string> = {
critical: "bg-red-100 text-red-700 border-red-200",
high: "bg-orange-100 text-orange-700 border-orange-200",
medium: "bg-blue-100 text-blue-700 border-blue-200",
low: "bg-gray-100 text-gray-500 border-gray-200",
critical: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800",
high: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-800",
medium: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
low: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700",
};
interface KanbanCardProps {
@@ -81,16 +81,15 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
}}
onDragEnd={onDragEnd}
onClick={onClick}
className={`bg-white rounded-lg border border-gray-200 p-3 cursor-grab active:cursor-grabbing shadow-sm hover:shadow-md transition-all ${
className={`bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-3 cursor-grab active:cursor-grabbing shadow-sm hover:shadow-md transition-all ${
isDragging ? "opacity-40 scale-95" : "opacity-100"
}`}
>
{/* Header: number + priority */}
<div className="flex items-center justify-between mb-1.5">
<Link
to={`/task/HQ-${task.taskNumber}`}
onClick={(e) => e.stopPropagation()}
className="text-xs font-bold font-mono text-gray-500 hover:text-amber-600 transition"
className="text-xs font-bold font-mono text-gray-500 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 transition"
>
HQ-{task.taskNumber}
</Link>
@@ -99,20 +98,18 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
</span>
</div>
{/* Title */}
<h4 className="text-sm font-medium text-gray-900 leading-snug mb-1.5 line-clamp-2">
<h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-snug mb-1.5 line-clamp-2">
{task.title}
</h4>
{/* Meta: project, assignee, subtasks, due */}
<div className="flex flex-wrap gap-1.5 items-center">
{projectName && (
<span className="text-[10px] text-sky-600 bg-sky-50 px-1.5 py-0.5 rounded-full">
<span className="text-[10px] text-sky-600 dark:text-sky-400 bg-sky-50 dark:bg-sky-900/30 px-1.5 py-0.5 rounded-full">
📁 {projectName}
</span>
)}
{task.assigneeName && (
<span className="text-[10px] text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded-full">
<span className="text-[10px] text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/30 px-1.5 py-0.5 rounded-full">
👤 {task.assigneeName}
</span>
)}
@@ -124,7 +121,7 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
const label = isOverdue ? "overdue" : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`;
return (
<span className={`text-[10px] px-1.5 py-0.5 rounded-full ${
isOverdue ? "bg-red-100 text-red-600" : diffDays <= 2 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"
isOverdue ? "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400" : diffDays <= 2 ? "bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400" : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
}`}>
📅 {label}
</span>
@@ -132,16 +129,15 @@ function KanbanCard({ task, projectName, onDragStart, onDragEnd, isDragging, onC
})()}
</div>
{/* Subtask progress */}
{subtasksTotal > 0 && (
<div className="mt-2 flex items-center gap-2">
<div className="flex-1 bg-gray-100 rounded-full h-1">
<div className="flex-1 bg-gray-100 dark:bg-gray-800 rounded-full h-1">
<div
className="bg-green-500 h-1 rounded-full transition-all"
style={{ width: `${(subtasksDone / subtasksTotal) * 100}%` }}
/>
</div>
<span className="text-[10px] text-gray-400">{subtasksDone}/{subtasksTotal}</span>
<span className="text-[10px] text-gray-400 dark:text-gray-500">{subtasksDone}/{subtasksTotal}</span>
</div>
)}
</div>
@@ -202,7 +198,6 @@ function KanbanColumnView({
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
{/* Column header */}
<div className={`px-3 py-2.5 border-b ${column.borderColor} flex items-center justify-between`}>
<div className="flex items-center gap-1.5">
<span className="text-sm">{column.icon}</span>
@@ -213,10 +208,9 @@ function KanbanColumnView({
</span>
</div>
{/* Cards */}
<div className="flex-1 p-2 space-y-2 overflow-y-auto max-h-[calc(100vh-16rem)]">
{tasks.length === 0 ? (
<div className="text-xs text-gray-400 text-center py-6 italic">
<div className="text-xs text-gray-400 dark:text-gray-500 text-center py-6 italic">
{dragOver ? "Drop here" : "No tasks"}
</div>
) : (

20
frontend/src/components/LoginPage.tsx
View File

@@ -30,23 +30,23 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
};
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
<div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
<div className="w-full max-w-sm">
<div className="text-center mb-8">
<span className="text-5xl">🔨</span>
<h1 className="text-2xl font-bold text-gray-900 mt-3">Hammer Queue</h1>
<p className="text-sm text-gray-500 mt-1">Sign in to access the dashboard</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-3">Hammer Queue</h1>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Sign in to access the dashboard</p>
</div>
<form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-lg border border-gray-200 p-6 space-y-4">
<form onSubmit={handleSubmit} className="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-6 space-y-4">
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 text-sm">
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg p-3 text-sm">
{error}
</div>
)}
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Email
</label>
<input
@@ -56,13 +56,13 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
onChange={(e) => setEmail(e.target.value)}
required
autoFocus
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
className="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 focus:border-transparent placeholder:text-gray-400 dark:placeholder:text-gray-500"
placeholder="you@example.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Password
</label>
<input
@@ -71,7 +71,7 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
className="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 focus:border-transparent placeholder:text-gray-400 dark:placeholder:text-gray-500"
placeholder="••••••••"
/>
</div>
@@ -85,7 +85,7 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
</button>
</form>
<p className="text-center text-xs text-gray-400 mt-6">
<p className="text-center text-xs text-gray-400 dark:text-gray-500 mt-6">
Invite-only access · Contact admin for an account
</p>
</div>

54
frontend/src/components/TaskCard.tsx
View File

@@ -8,12 +8,12 @@ const priorityColors: Record<TaskPriority, string> = {
};
const sourceColors: Record<string, string> = {
donovan: "bg-purple-100 text-purple-800",
david: "bg-green-100 text-green-800",
hammer: "bg-yellow-100 text-yellow-800",
heartbeat: "bg-pink-100 text-pink-800",
cron: "bg-indigo-100 text-indigo-800",
other: "bg-gray-100 text-gray-800",
donovan: "bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300",
david: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300",
hammer: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300",
heartbeat: "bg-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-300",
cron: "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300",
other: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300",
};
const statusActions: Record<TaskStatus, { label: string; next: TaskStatus }[]> = {
@@ -76,8 +76,8 @@ export function TaskCard({
onClick={onClick}
className={`rounded-xl border p-3 sm:p-4 transition-all cursor-pointer group ${
isActive
? "border-amber-300 bg-gradient-to-r from-amber-50 to-orange-50 shadow-lg shadow-amber-100/50 hover:shadow-xl hover:shadow-amber-200/50"
: "border-gray-200 bg-white shadow-sm hover:shadow-md hover:border-gray-300"
? "border-amber-300 dark:border-amber-700 bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 shadow-lg shadow-amber-100/50 dark:shadow-amber-900/20 hover:shadow-xl hover:shadow-amber-200/50 dark:hover:shadow-amber-900/30"
: "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600"
}`}
>
{/* Top row: title + expand chevron */}
@@ -90,14 +90,14 @@ export function TaskCard({
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
</span>
)}
<h3 className={`font-semibold text-sm sm:text-base leading-snug ${isActive ? "text-amber-900" : "text-gray-900"}`} style={{ wordBreak: "break-word" }}>
<h3 className={`font-semibold text-sm sm:text-base leading-snug ${isActive ? "text-amber-900 dark:text-amber-200" : "text-gray-900 dark:text-gray-100"}`} style={{ wordBreak: "break-word" }}>
{task.title}
</h3>
</div>
<div className="flex items-center gap-1.5 sm:gap-2 mb-1.5 flex-wrap">
<span
className="text-[10px] sm:text-xs px-1.5 py-0.5 rounded font-mono font-bold bg-amber-100 text-amber-700 cursor-pointer hover:bg-amber-200 transition"
className="text-[10px] sm:text-xs px-1.5 py-0.5 rounded font-mono font-bold bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 cursor-pointer hover:bg-amber-200 dark:hover:bg-amber-900/50 transition"
title={`Click to copy: ${displayId}`}
onClick={(e) => {
e.stopPropagation();
@@ -112,30 +112,28 @@ export function TaskCard({
<span className={`text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium ${sourceColors[task.source] || sourceColors.other}`}>
{task.source}
</span>
{/* Project badge */}
{projectName && (
<span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-sky-100 text-sky-700">
<span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-400">
📁 {projectName}
</span>
)}
{/* Assignee badge */}
{task.assigneeName && (
<span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-emerald-100 text-emerald-700">
<span className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400">
👤 {task.assigneeName}
</span>
)}
<span className="text-[10px] sm:text-xs text-gray-400">
<span className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500">
{timeAgo(task.createdAt)}
</span>
{noteCount > 0 && (
<span className="text-[10px] sm:text-xs text-gray-400 flex items-center gap-0.5">
<span className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500 flex items-center gap-0.5">
💬 {noteCount}
</span>
)}
</div>
{task.description && (
<p className="text-xs sm:text-sm text-gray-500 line-clamp-1">{task.description}</p>
<p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400 line-clamp-1">{task.description}</p>
)}
{/* Due date and subtask badges */}
@@ -148,7 +146,7 @@ export function TaskCard({
const isDueSoon = diffDays <= 2 && !isOverdue;
return (
<span className={`text-[10px] sm:text-xs px-1.5 py-0.5 rounded-full font-medium inline-flex items-center gap-0.5 ${
isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-500"
isOverdue ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" : isDueSoon ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400" : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
}`}>
📅 {isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`}
</span>
@@ -159,8 +157,8 @@ export function TaskCard({
const total = task.subtasks.length;
const pct = Math.round((done / total) * 100);
return (
<span className="text-[10px] sm:text-xs text-gray-400 inline-flex items-center gap-1.5">
<span className="inline-block w-12 h-1 bg-gray-200 rounded-full overflow-hidden">
<span className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500 inline-flex items-center gap-1.5">
<span className="inline-block w-12 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<span className={`block h-full rounded-full ${pct === 100 ? "bg-green-500" : "bg-amber-400"}`} style={{ width: `${pct}%` }} />
</span>
{done}/{total}
@@ -170,23 +168,22 @@ export function TaskCard({
</div>
</div>
{/* Expand chevron - always visible */}
<div className="shrink-0 mt-1 text-gray-300 group-hover:text-gray-500 transition">
{/* Expand chevron */}
<div className="shrink-0 mt-1 text-gray-300 dark:text-gray-600 group-hover:text-gray-500 dark:group-hover:text-gray-400 transition">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
{/* Action buttons row - hidden on mobile, shown on sm+ */}
<div className="hidden sm:flex items-center gap-1 mt-2 pt-2 border-t border-gray-100" onClick={(e) => e.stopPropagation()}>
{/* Reorder buttons for queued tasks */}
{/* Action buttons row */}
<div className="hidden sm:flex items-center gap-1 mt-2 pt-2 border-t border-gray-100 dark:border-gray-800" onClick={(e) => e.stopPropagation()}>
{task.status === "queued" && (
<div className="flex gap-1 mr-1">
<button
onClick={onMoveUp}
disabled={isFirst}
className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition"
title="Move up"
>
↑
@@ -194,7 +191,7 @@ export function TaskCard({
<button
onClick={onMoveDown}
disabled={isLast}
className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition"
title="Move down"
>
↓
@@ -202,12 +199,11 @@ export function TaskCard({
</div>
)}
{/* Quick status actions */}
{actions.slice(0, 2).map((action) => (
<button
key={action.next}
onClick={() => onStatusChange(task.id, action.next)}
className="text-xs px-2.5 py-1.5 rounded-lg border border-gray-200 hover:bg-gray-50 whitespace-nowrap text-gray-600 hover:text-gray-800 transition font-medium"
className="text-xs px-2.5 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 whitespace-nowrap text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition font-medium"
>
{action.label}
</button>

244
frontend/src/components/TaskDetailPanel.tsx
View File

@@ -18,11 +18,11 @@ const priorityIcons: Record<TaskPriority, string> = {
};
const statusColors: Record<TaskStatus, string> = {
active: "bg-amber-100 text-amber-800 border-amber-300",
queued: "bg-blue-100 text-blue-800 border-blue-300",
blocked: "bg-red-100 text-red-800 border-red-300",
completed: "bg-green-100 text-green-800 border-green-300",
cancelled: "bg-gray-100 text-gray-600 border-gray-300",
active: "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border-amber-300 dark:border-amber-700",
queued: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700",
blocked: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700",
completed: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700",
cancelled: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-700",
};
const statusIcons: Record<TaskStatus, string> = {
@@ -34,33 +34,33 @@ const statusIcons: Record<TaskStatus, string> = {
};
const sourceColors: Record<string, string> = {
donovan: "bg-purple-100 text-purple-800",
david: "bg-green-100 text-green-800",
hammer: "bg-yellow-100 text-yellow-800",
heartbeat: "bg-pink-100 text-pink-800",
cron: "bg-indigo-100 text-indigo-800",
other: "bg-gray-100 text-gray-800",
donovan: "bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300",
david: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300",
hammer: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300",
heartbeat: "bg-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-300",
cron: "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300",
other: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300",
};
const statusActions: Record<TaskStatus, { label: string; next: TaskStatus; color: string }[]> = {
active: [
{ label: "⏸ Pause", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
{ label: "✅ Complete", next: "completed", color: "bg-green-50 text-green-700 border-green-200 hover:bg-green-100" },
{ label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100" },
{ label: "⏸ Pause", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-900/30" },
{ label: "✅ Complete", next: "completed", color: "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900/30" },
{ label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" },
],
queued: [
{ label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
{ label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100" },
{ label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800 hover:bg-amber-100 dark:hover:bg-amber-900/30" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-900/30" },
{ label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" },
],
blocked: [
{ label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
{ label: "📋 Queue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
{ label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100" },
{ label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800 hover:bg-amber-100 dark:hover:bg-amber-900/30" },
{ label: "📋 Queue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" },
{ label: "❌ Cancel", next: "cancelled", color: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" },
],
completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" }],
cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30" }],
};
const allPriorities: TaskPriority[] = ["critical", "high", "medium", "low"];
@@ -119,7 +119,7 @@ function ElapsedTimer({ since }: { since: string }) {
}, [since]);
return (
<span className="font-mono text-amber-700 font-semibold">{elapsed}</span>
<span className="font-mono text-amber-700 dark:text-amber-400 font-semibold">{elapsed}</span>
);
}
@@ -149,11 +149,11 @@ function EditableText({
return (
<div
onClick={() => setEditing(true)}
className={`cursor-pointer rounded-md px-2 py-1 -mx-2 -my-1 hover:bg-gray-100 transition group ${className}`}
className={`cursor-pointer rounded-md px-2 py-1 -mx-2 -my-1 hover:bg-gray-100 dark:hover:bg-gray-800 transition group ${className}`}
title="Click to edit"
>
{value || <span className="text-gray-400 italic">{placeholder}</span>}
<span className="text-gray-300 opacity-0 group-hover:opacity-100 ml-1 text-xs">✏️</span>
{value || <span className="text-gray-400 dark:text-gray-500 italic">{placeholder}</span>}
<span className="text-gray-300 dark:text-gray-600 opacity-0 group-hover:opacity-100 ml-1 text-xs">✏️</span>
</div>
);
}
@@ -166,7 +166,7 @@ function EditableText({
onChange={(e) => onChange(e.target.value)}
onBlur={stopEditing}
onKeyDown={(e) => { if (e.key === "Escape") stopEditing(); }}
className={`w-full rounded-md border border-blue-300 bg-white px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 resize-y min-h-[60px] ${className}`}
className={`w-full rounded-md border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 resize-y min-h-[60px] ${className}`}
rows={3}
/>
);
@@ -182,7 +182,7 @@ function EditableText({
if (e.key === "Enter") stopEditing();
if (e.key === "Escape") stopEditing();
}}
className={`w-full rounded-md border border-blue-300 bg-white px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 ${className}`}
className={`w-full rounded-md border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1 -mx-2 -my-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 ${className}`}
/>
);
}
@@ -199,30 +199,30 @@ function CopyableId({ id, taskNumber }: { id: string; taskNumber?: number }) {
};
return (
<div className="px-4 sm:px-6 py-3 border-t border-gray-100 bg-gray-50 flex items-center gap-2">
<div className="px-4 sm:px-6 py-3 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 flex items-center gap-2">
{displayId && (
<>
<span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">{displayId}</span>
<span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded font-mono">{displayId}</span>
<button
onClick={() => handleCopy(displayId, "ref")}
className={`text-xs px-2 py-0.5 rounded-md border transition font-medium shrink-0 ${
copied === "ref"
? "bg-green-50 text-green-600 border-green-200"
: "bg-white text-gray-500 border-gray-200 hover:bg-gray-100"
? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800"
: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700"
}`}
>
{copied === "ref" ? "✓" : "📋"}
</button>
<span className="text-gray-300 hidden sm:inline">|</span>
<span className="text-gray-300 dark:text-gray-600 hidden sm:inline">|</span>
</>
)}
<code className="text-[10px] sm:text-xs text-gray-400 font-mono flex-1 truncate select-all hidden sm:block">{id}</code>
<code className="text-[10px] sm:text-xs text-gray-400 dark:text-gray-500 font-mono flex-1 truncate select-all hidden sm:block">{id}</code>
<button
onClick={() => handleCopy(id, "uuid")}
className={`text-xs px-2.5 py-1 rounded-md border transition font-medium shrink-0 ${
copied === "uuid"
? "bg-green-50 text-green-600 border-green-200"
: "bg-white text-gray-500 border-gray-200 hover:bg-gray-100 hover:text-gray-700"
? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800"
: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
}`}
title="Copy UUID"
>
@@ -251,7 +251,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
const [deleting, setDeleting] = useState(false);
const { toast } = useToast();
// Draft state for editable fields
const [draftTitle, setDraftTitle] = useState(task.title);
const [draftDescription, setDraftDescription] = useState(task.description || "");
const [draftPriority, setDraftPriority] = useState(task.priority);
@@ -263,12 +262,10 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
const [newSubtaskTitle, setNewSubtaskTitle] = useState("");
const [addingSubtask, setAddingSubtask] = useState(false);
// Fetch projects for the selector
useEffect(() => {
fetchProjects().then(setProjects).catch(() => {});
}, []);
// Keyboard shortcut: Escape to close
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" && !showDeleteConfirm) onClose();
@@ -277,7 +274,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
return () => window.removeEventListener("keydown", handleKeyDown);
}, [onClose, showDeleteConfirm]);
// Reset drafts when task changes
useEffect(() => {
setDraftTitle(task.title);
setDraftDescription(task.description || "");
@@ -288,7 +284,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
setDraftAssigneeName(task.assigneeName || "");
}, [task.id, task.title, task.description, task.priority, task.source, task.projectId, task.dueDate, task.assigneeName]);
// Detect if any field has been modified
const currentDueDate = task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 16) : "";
const isDirty =
draftTitle !== task.title ||
@@ -349,7 +344,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
}
};
// Legacy single-field save available if needed
const _handleFieldSave = async (field: string, value: string) => {
if (!hasToken) return;
setSaving(true);
@@ -362,26 +356,23 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
setSaving(false);
}
};
void _handleFieldSave; // suppress unused warning
void _handleFieldSave;
return (
<>
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-40 transition-opacity"
onClick={onClose}
/>
{/* Panel */}
<div className="fixed inset-0 sm:inset-y-0 sm:left-auto sm:right-0 w-full sm:max-w-lg bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
<div className="fixed inset-0 sm:inset-y-0 sm:left-auto sm:right-0 w-full sm:max-w-lg bg-white dark:bg-gray-900 shadow-2xl z-50 flex flex-col animate-slide-in-right">
{/* Header */}
<div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-gray-50 border-gray-200"}`}>
<div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800" : "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"}`}>
<div className="flex items-start justify-between gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
{/* Back button on mobile */}
<button
onClick={onClose}
className="sm:hidden flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-2 -ml-1 px-1 py-0.5 rounded transition"
className="sm:hidden flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-2 -ml-1 px-1 py-0.5 rounded transition"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
@@ -396,29 +387,28 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</span>
)}
{task.taskNumber && (
<span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">
<span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded font-mono">
HQ-{task.taskNumber}
</span>
)}
<span className={`text-xs px-2.5 py-1 rounded-full font-semibold border ${statusColors[task.status]}`}>
{statusIcons[task.status]} {task.status.toUpperCase()}
</span>
{saving && <span className="text-xs text-blue-500 animate-pulse">Saving...</span>}
{saving && <span className="text-xs text-blue-500 dark:text-blue-400 animate-pulse">Saving...</span>}
</div>
{hasToken ? (
<EditableText
value={draftTitle}
onChange={setDraftTitle}
className="text-base sm:text-lg font-bold text-gray-900 leading-snug"
className="text-base sm:text-lg font-bold text-gray-900 dark:text-gray-100 leading-snug"
/>
) : (
<h2 className="text-base sm:text-lg font-bold text-gray-900 leading-snug">{task.title}</h2>
<h2 className="text-base sm:text-lg font-bold text-gray-900 dark:text-gray-100 leading-snug">{task.title}</h2>
)}
</div>
{/* Close X button - hidden on mobile (use Back instead) */}
<button
onClick={onClose}
className="hidden sm:block p-2 -mr-2 -mt-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition"
className="hidden sm:block p-2 -mr-2 -mt-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition"
title="Close"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -431,10 +421,10 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{/* Content */}
<div className="flex-1 overflow-y-auto">
{/* Priority & Source */}
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Priority</h3>
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Priority</h3>
{hasToken ? (
<div className="flex flex-wrap gap-1.5">
{allPriorities.map((p) => (
@@ -444,7 +434,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
className={`text-xs px-2.5 py-1 rounded-full font-medium transition ${
p === draftPriority
? priorityColors[p]
: "bg-gray-100 text-gray-500 hover:bg-gray-200"
: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
}`}
>
{priorityIcons[p]} {p}
@@ -458,7 +448,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
)}
</div>
<div>
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Source</h3>
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Source</h3>
{hasToken ? (
<div className="flex flex-wrap gap-1.5">
{allSources.map((s) => (
@@ -468,7 +458,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
className={`text-xs px-2.5 py-1 rounded-full font-medium transition ${
s === draftSource
? sourceColors[s] || sourceColors.other
: "bg-gray-100 text-gray-500 hover:bg-gray-200"
: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
}`}
>
{s}
@@ -486,13 +476,13 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{/* Project */}
{(hasToken || task.projectId) && (
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Project</h3>
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Project</h3>
{hasToken ? (
<select
value={draftProjectId}
onChange={(e) => setDraftProjectId(e.target.value)}
className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white w-full max-w-xs"
className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full max-w-xs"
>
<option value="">No project</option>
{projects.map((p) => (
@@ -500,7 +490,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
))}
</select>
) : (
<span className="text-sm text-gray-700">
<span className="text-sm text-gray-700 dark:text-gray-300">
{projects.find((p) => p.id === task.projectId)?.name || task.projectId || "None"}
</span>
)}
@@ -508,8 +498,8 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
)}
{/* Assignee */}
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Assignee</h3>
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Assignee</h3>
{hasToken ? (
<div className="flex items-center gap-2">
<div className="flex gap-1.5 flex-wrap">
@@ -520,7 +510,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
className={`text-xs px-2.5 py-1.5 rounded-lg font-medium transition border ${
draftAssigneeName === name
? "bg-emerald-500 text-white border-emerald-500"
: "bg-white text-gray-600 border-gray-200 hover:border-gray-300 hover:bg-gray-50"
: "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
}`}
>
👤 {name}
@@ -528,39 +518,39 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
))}
</div>
{draftAssigneeName && !["Hammer", "Donovan", "David"].includes(draftAssigneeName) && (
<span className="text-xs px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full font-medium">
<span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full font-medium">
👤 {draftAssigneeName}
</span>
)}
</div>
) : (
<span className="text-sm text-gray-700">
<span className="text-sm text-gray-700 dark:text-gray-300">
{task.assigneeName ? (
<span className="text-xs px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full font-medium">
<span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full font-medium">
👤 {task.assigneeName}
</span>
) : (
<span className="text-gray-400 italic">Unassigned</span>
<span className="text-gray-400 dark:text-gray-500 italic">Unassigned</span>
)}
</span>
)}
</div>
{/* Due Date */}
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Due Date</h3>
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Due Date</h3>
{hasToken ? (
<div className="flex items-center gap-2">
<input
type="datetime-local"
value={draftDueDate}
onChange={(e) => setDraftDueDate(e.target.value)}
className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>
{draftDueDate && (
<button
onClick={() => setDraftDueDate("")}
className="text-xs text-gray-400 hover:text-red-500 transition"
className="text-xs text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition"
title="Clear due date"
>
✕
@@ -575,7 +565,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
const isDueSoon = diffDays <= 2 && !isOverdue;
return (
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-600"
isOverdue ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" : isDueSoon ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
}`}>
{isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "Due today" : diffDays === 1 ? "Due tomorrow" : `${diffDays}d left`}
</span>
@@ -583,53 +573,53 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
})()}
</div>
) : (
<span className="text-sm text-gray-700">
{task.dueDate ? new Date(task.dueDate).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }) : <span className="text-gray-400 italic">No due date</span>}
<span className="text-sm text-gray-700 dark:text-gray-300">
{task.dueDate ? new Date(task.dueDate).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }) : <span className="text-gray-400 dark:text-gray-500 italic">No due date</span>}
</span>
)}
</div>
{/* Description */}
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Description</h3>
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Description</h3>
{hasToken ? (
<EditableText
value={draftDescription}
onChange={setDraftDescription}
multiline
className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap"
className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap"
placeholder="Add a description..."
/>
) : (
<p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
{task.description || <span className="text-gray-400 italic">No description</span>}
<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
{task.description || <span className="text-gray-400 dark:text-gray-500 italic">No description</span>}
</p>
)}
</div>
{/* Time Info */}
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Timeline</h3>
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Timeline</h3>
<div className="space-y-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
<span className="text-gray-500">Created</span>
<span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.createdAt)} <span className="text-gray-400 text-xs">({timeAgo(task.createdAt)})</span></span>
<span className="text-gray-500 dark:text-gray-400">Created</span>
<span className="text-gray-700 dark:text-gray-300 font-medium text-xs sm:text-sm">{formatDate(task.createdAt)} <span className="text-gray-400 dark:text-gray-500 text-xs">({timeAgo(task.createdAt)})</span></span>
</div>
{task.updatedAt !== task.createdAt && (
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
<span className="text-gray-500">Updated</span>
<span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.updatedAt)} <span className="text-gray-400 text-xs">({timeAgo(task.updatedAt)})</span></span>
<span className="text-gray-500 dark:text-gray-400">Updated</span>
<span className="text-gray-700 dark:text-gray-300 font-medium text-xs sm:text-sm">{formatDate(task.updatedAt)} <span className="text-gray-400 dark:text-gray-500 text-xs">({timeAgo(task.updatedAt)})</span></span>
</div>
)}
{task.completedAt && (
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
<span className="text-gray-500">Completed</span>
<span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.completedAt)}</span>
<span className="text-gray-500 dark:text-gray-400">Completed</span>
<span className="text-gray-700 dark:text-gray-300 font-medium text-xs sm:text-sm">{formatDate(task.completedAt)}</span>
</div>
)}
{isActive && (
<div className="flex items-center justify-between text-sm mt-1 pt-2 border-t border-amber-100">
<span className="text-amber-600 font-medium">⏱ Running for</span>
<div className="flex items-center justify-between text-sm mt-1 pt-2 border-t border-amber-100 dark:border-amber-900/30">
<span className="text-amber-600 dark:text-amber-400 font-medium">⏱ Running for</span>
<ElapsedTimer since={task.updatedAt} />
</div>
)}
@@ -637,19 +627,18 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</div>
{/* Subtasks */}
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
<div className="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
Subtasks {task.subtasks?.length > 0 && (
<span className="text-gray-300 ml-1">
<span className="text-gray-300 dark:text-gray-600 ml-1">
({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})
</span>
)}
</h3>
{/* Subtask progress bar */}
{task.subtasks?.length > 0 && (
<div className="mb-3">
<div className="w-full bg-gray-200 rounded-full h-1.5">
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
<div
className="bg-green-500 h-1.5 rounded-full transition-all duration-300"
style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }}
@@ -658,7 +647,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</div>
)}
{/* Subtask list */}
{task.subtasks?.length > 0 && (
<div className="space-y-1 mb-3">
{task.subtasks.map((subtask) => (
@@ -675,7 +663,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition ${
subtask.completed
? "bg-green-500 border-green-500 text-white"
: "border-gray-300 hover:border-amber-400"
: "border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500"
}`}
>
{subtask.completed && (
@@ -684,7 +672,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</svg>
)}
</button>
<span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
<span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`}>
{subtask.title}
</span>
{hasToken && (
@@ -697,7 +685,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
console.error("Failed to delete subtask:", e);
}
}}
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-400 transition p-0.5"
className="opacity-0 group-hover:opacity-100 text-gray-300 dark:text-gray-600 hover:text-red-400 dark:hover:text-red-400 transition p-0.5"
title="Remove subtask"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -710,7 +698,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</div>
)}
{/* Add subtask input */}
{hasToken && (
<div className="flex gap-2">
<input
@@ -718,7 +705,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
value={newSubtaskTitle}
onChange={(e) => setNewSubtaskTitle(e.target.value)}
placeholder="Add a subtask..."
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
className="flex-1 text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
onKeyDown={async (e) => {
if (e.key === "Enter" && newSubtaskTitle.trim()) {
setAddingSubtask(true);
@@ -760,13 +747,12 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{/* Progress Notes */}
<div className="px-4 sm:px-6 py-4">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
Progress Notes {task.progressNotes?.length > 0 && (
<span className="text-gray-300 ml-1">({task.progressNotes.length})</span>
<span className="text-gray-300 dark:text-gray-600 ml-1">({task.progressNotes.length})</span>
)}
</h3>
{/* Add note input */}
{hasToken && (
<div className="mb-4">
<div className="flex gap-2">
@@ -775,7 +761,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
onChange={(e) => setNoteText(e.target.value)}
placeholder="Add a progress note..."
rows={2}
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 resize-y min-h-[40px] max-h-32"
className="flex-1 text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 resize-y min-h-[40px] max-h-32 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
onKeyDown={(e) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
@@ -810,12 +796,12 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{addingNote ? "..." : "Add"}
</button>
</div>
<p className="text-[10px] text-gray-400 mt-1">⌘+Enter to submit</p>
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-1">⌘+Enter to submit</p>
</div>
)}
{!task.progressNotes || task.progressNotes.length === 0 ? (
<div className="text-sm text-gray-400 italic py-4 text-center border-2 border-dashed border-gray-100 rounded-lg">
<div className="text-sm text-gray-400 dark:text-gray-500 italic py-4 text-center border-2 border-dashed border-gray-100 dark:border-gray-800 rounded-lg">
No progress notes yet
</div>
) : (
@@ -825,24 +811,21 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
.reverse()
.map((note, i) => (
<div key={i} className="relative pl-6 pb-4 last:pb-0 group">
{/* Timeline line */}
{i < task.progressNotes.length - 1 && (
<div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 group-last:hidden" />
<div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last:hidden" />
)}
{/* Timeline dot */}
<div className={`absolute left-0 top-1 w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center ${
i === 0 && isActive
? "border-amber-400 bg-amber-50"
: "border-gray-300 bg-white"
? "border-amber-400 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/30"
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900"
}`}>
<div className={`w-2 h-2 rounded-full ${
i === 0 && isActive ? "bg-amber-500" : "bg-gray-300"
i === 0 && isActive ? "bg-amber-500" : "bg-gray-300 dark:bg-gray-600"
}`} />
</div>
{/* Content */}
<div>
<p className="text-sm text-gray-700 leading-relaxed">{note.note}</p>
<p className="text-xs text-gray-400 mt-0.5">{formatTimestamp(note.timestamp)} · {timeAgo(note.timestamp)}</p>
<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{note.note}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{formatTimestamp(note.timestamp)} · {timeAgo(note.timestamp)}</p>
</div>
</div>
))}
@@ -853,20 +836,20 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{/* Save / Cancel Bar */}
{hasToken && isDirty && (
<div className="px-4 sm:px-6 py-3 border-t border-blue-200 bg-blue-50 flex items-center justify-between animate-slide-up">
<span className="text-sm text-blue-700 font-medium">Unsaved changes</span>
<div className="px-4 sm:px-6 py-3 border-t border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 flex items-center justify-between animate-slide-up">
<span className="text-sm text-blue-700 dark:text-blue-300 font-medium">Unsaved changes</span>
<div className="flex gap-2">
<button
onClick={handleCancel}
disabled={saving}
className="text-sm px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50 transition disabled:opacity-50"
className="text-sm px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition disabled:opacity-50"
>
Cancel
</button>
<button
onClick={handleSave}
disabled={saving}
className="text-sm px-4 py-2 rounded-lg border border-blue-400 bg-blue-600 text-white font-medium hover:bg-blue-700 transition disabled:opacity-50"
className="text-sm px-4 py-2 rounded-lg border border-blue-400 dark:border-blue-600 bg-blue-600 text-white font-medium hover:bg-blue-700 transition disabled:opacity-50"
>
{saving ? "Saving..." : "Save"}
</button>
@@ -876,8 +859,8 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{/* Actions Footer */}
{hasToken && actions.length > 0 && (
<div className="px-4 sm:px-6 py-4 border-t border-gray-200 bg-gray-50">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Actions</h3>
<div className="px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Actions</h3>
<div className="flex flex-wrap gap-2 items-center">
{actions.map((action) => (
<button
@@ -895,14 +878,14 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
{!showDeleteConfirm ? (
<button
onClick={() => setShowDeleteConfirm(true)}
className="text-xs text-gray-400 hover:text-red-500 px-2 py-1.5 rounded transition"
className="text-xs text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 px-2 py-1.5 rounded transition"
title="Delete task"
>
🗑 Delete
</button>
) : (
<div className="flex items-center gap-2 bg-red-50 border border-red-200 rounded-lg px-3 py-2 animate-slide-up">
<span className="text-xs text-red-700">Delete this task?</span>
<div className="flex items-center gap-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg px-3 py-2 animate-slide-up">
<span className="text-xs text-red-700 dark:text-red-400">Delete this task?</span>
<button
onClick={handleDelete}
disabled={deleting}
@@ -912,7 +895,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</button>
<button
onClick={() => setShowDeleteConfirm(false)}
className="text-xs px-2 py-1 text-gray-500 hover:text-gray-700 transition"
className="text-xs px-2 py-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition"
>
Cancel
</button>
@@ -922,7 +905,6 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
</div>
)}
{/* Task ID - click to copy */}
<CopyableId id={task.id} taskNumber={task.taskNumber} />
</div>
</>

66
frontend/src/hooks/useTheme.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
type Theme = "light" | "dark" | "system";
interface ThemeContextType {
theme: Theme;
resolved: "light" | "dark";
setTheme: (t: Theme) => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: "system",
resolved: "light",
setTheme: () => {},
});
function getSystemTheme(): "light" | "dark" {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function resolveTheme(theme: Theme): "light" | "dark" {
return theme === "system" ? getSystemTheme() : theme;
}
export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setThemeState] = useState<Theme>(() => {
const stored = localStorage.getItem("hammer-theme");
return (stored === "light" || stored === "dark" || stored === "system") ? stored : "system";
});
const [resolved, setResolved] = useState<"light" | "dark">(() => resolveTheme(theme));
const setTheme = (t: Theme) => {
setThemeState(t);
localStorage.setItem("hammer-theme", t);
};
// Apply class to <html>
useEffect(() => {
const r = resolveTheme(theme);
setResolved(r);
document.documentElement.classList.toggle("dark", r === "dark");
}, [theme]);
// Listen for system theme changes
useEffect(() => {
if (theme !== "system") return;
const mq = window.matchMedia("(prefers-color-scheme: dark)");
const handler = () => {
const r = resolveTheme("system");
setResolved(r);
document.documentElement.classList.toggle("dark", r === "dark");
};
mq.addEventListener("change", handler);
return () => mq.removeEventListener("change", handler);
}, [theme]);
return (
<ThemeContext.Provider value={{ theme, resolved, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
return useContext(ThemeContext);
}

2
frontend/src/index.css
View File

@@ -1,5 +1,7 @@
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@keyframes slide-in-right {
from {
transform: translateX(100%);

32
frontend/src/pages/ActivityPage.tsx
View File

@@ -50,7 +50,6 @@ export function ActivityPage() {
return items;
}, [tasks]);
// Group by day
const groupedActivity = useMemo(() => {
const filtered =
filter === "all"
@@ -77,7 +76,7 @@ export function ActivityPage() {
if (loading && tasks.length === 0) {
return (
<div className="min-h-screen flex items-center justify-center text-gray-400">
<div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
Loading activity...
</div>
);
@@ -85,18 +84,18 @@ export function ActivityPage() {
return (
<div className="min-h-screen">
<header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
<div className="max-w-3xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
<div>
<h1 className="text-xl font-bold text-gray-900">📝 Activity Log</h1>
<p className="text-sm text-gray-400">
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">📝 Activity Log</h1>
<p className="text-sm text-gray-400 dark:text-gray-500">
{allActivity.length} updates across {tasks.length} tasks
</p>
</div>
<select
value={filter}
onChange={(e) => setFilter(e.target.value)}
className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200"
className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<option value="all">All Tasks</option>
<option value="active">Active</option>
@@ -109,25 +108,24 @@ export function ActivityPage() {
<div className="max-w-3xl mx-auto px-4 sm:px-6 py-6">
{groupedActivity.length === 0 ? (
<div className="text-center text-gray-400 py-12">No activity found</div>
<div className="text-center text-gray-400 dark:text-gray-500 py-12">No activity found</div>
) : (
<div className="space-y-8">
{groupedActivity.map((group) => (
<div key={group.date}>
<div className="sticky top-28 md:top-14 z-10 bg-gray-50/95 backdrop-blur-sm py-2 mb-3">
<h2 className="text-sm font-semibold text-gray-500">{group.date}</h2>
<div className="sticky top-28 md:top-14 z-10 bg-gray-50/95 dark:bg-gray-950/95 backdrop-blur-sm py-2 mb-3">
<h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400">{group.date}</h2>
</div>
<div className="space-y-1">
{group.items.map((item, i) => (
<div
key={`${item.task.id}-${i}`}
className="flex gap-3 py-3 px-3 rounded-lg hover:bg-white transition group"
className="flex gap-3 py-3 px-3 rounded-lg hover:bg-white dark:hover:bg-gray-900 transition group"
>
{/* Timeline dot */}
<div className="flex flex-col items-center pt-1.5">
<div className="w-2.5 h-2.5 rounded-full bg-amber-400 shrink-0" />
{i < group.items.length - 1 && (
<div className="w-px flex-1 bg-gray-200 mt-1" />
<div className="w-px flex-1 bg-gray-200 dark:bg-gray-700 mt-1" />
)}
</div>
@@ -135,21 +133,21 @@ export function ActivityPage() {
<div className="flex items-center gap-2 mb-1 flex-wrap">
<Link
to={`/task/HQ-${item.task.taskNumber}`}
className="text-xs font-bold text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded font-mono hover:bg-amber-100 transition"
className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded font-mono hover:bg-amber-100 dark:hover:bg-amber-900/50 transition"
>
HQ-{item.task.taskNumber}
</Link>
<span className="text-[10px] text-gray-400">
<span className="text-[10px] text-gray-400 dark:text-gray-500">
{formatDate(item.note.timestamp)}
</span>
<span className="text-[10px] text-gray-300">
<span className="text-[10px] text-gray-300 dark:text-gray-600">
({timeAgo(item.note.timestamp)})
</span>
</div>
<p className="text-sm text-gray-700 leading-relaxed">
<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
{item.note.note}
</p>
<p className="text-xs text-gray-400 mt-1 truncate">
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1 truncate">
{item.task.title}
</p>
</div>

56
frontend/src/pages/ChatPage.tsx
View File

@@ -70,9 +70,9 @@ function ThreadList({
const localSessionKeys = new Set(threads.map(t => t.sessionKey));
return (
<div className="w-full sm:w-64 bg-white border-r border-gray-200 flex flex-col h-full">
<div className="p-3 border-b border-gray-100 flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-600">Threads</h3>
<div className="w-full sm:w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-full">
<div className="p-3 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400">Threads</h3>
<div className="flex items-center gap-2">
<button
onClick={onCreate}
@@ -96,24 +96,24 @@ function ThreadList({
<div className="flex-1 overflow-y-auto">
{/* Local threads */}
{threads.length === 0 && !showGatewaySessions ? (
<div className="p-4 text-sm text-gray-400 text-center">
<div className="p-4 text-sm text-gray-400 dark:text-gray-500 text-center">
No threads yet
</div>
) : (
threads.map((thread) => (
<div
key={thread.sessionKey}
className={`group relative w-full text-left px-3 py-3 border-b border-gray-50 transition cursor-pointer ${
className={`group relative w-full text-left px-3 py-3 border-b border-gray-50 dark:border-gray-800 transition cursor-pointer ${
activeThread === thread.sessionKey
? "bg-amber-50 border-l-2 border-l-amber-500"
: "hover:bg-gray-50"
? "bg-amber-50 dark:bg-amber-900/20 border-l-2 border-l-amber-500"
: "hover:bg-gray-50 dark:hover:bg-gray-800"
}`}
onClick={() => onSelect(thread.sessionKey)}
>
{editingKey === thread.sessionKey ? (
<input
autoFocus
className="text-sm font-medium text-gray-800 w-full bg-white border border-amber-300 rounded px-1 py-0.5 outline-none"
className="text-sm font-medium text-gray-800 dark:text-gray-200 w-full bg-white dark:bg-gray-800 border border-amber-300 dark:border-amber-700 rounded px-1 py-0.5 outline-none"
value={editName}
onChange={(e) => setEditName(e.target.value)}
onBlur={commitRename}
@@ -125,7 +125,7 @@ function ThreadList({
/>
) : (
<div
className="text-sm font-medium text-gray-800 truncate pr-6"
className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate pr-6"
onDoubleClick={(e) => {
e.stopPropagation();
startRename(thread.sessionKey, thread.name);
@@ -158,13 +158,13 @@ function ThreadList({
)}
{/* Gateway sessions browser */}
<div className="border-t border-gray-200">
<div className="border-t border-gray-200 dark:border-gray-800">
<button
onClick={() => {
onToggleGatewaySessions?.();
if (!showGatewaySessions) onBrowseSessions?.();
}}
className="w-full px-3 py-2.5 text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition flex items-center justify-between"
className="w-full px-3 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition flex items-center justify-between"
>
<span>🔌 Gateway Sessions</span>
<svg
@@ -177,23 +177,23 @@ function ThreadList({
</svg>
</button>
{showGatewaySessions && (
<div className="bg-gray-50">
<div className="bg-gray-50 dark:bg-gray-800/50">
{loadingGatewaySessions ? (
<div className="px-3 py-3 text-xs text-gray-400 text-center">Loading sessions...</div>
<div className="px-3 py-3 text-xs text-gray-400 dark:text-gray-500 text-center">Loading sessions...</div>
) : !gatewaySessions || gatewaySessions.length === 0 ? (
<div className="px-3 py-3 text-xs text-gray-400 text-center">No sessions found</div>
<div className="px-3 py-3 text-xs text-gray-400 dark:text-gray-500 text-center">No sessions found</div>
) : (
gatewaySessions.filter(s => !localSessionKeys.has(s.sessionKey)).map((session) => (
<div
key={session.sessionKey}
className="px-3 py-2.5 border-b border-gray-100 hover:bg-gray-100 cursor-pointer transition"
className="px-3 py-2.5 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition"
onClick={() => onSelect(session.sessionKey)}
>
<div className="flex items-center gap-1.5">
<span className="text-xs">
{session.channel === "telegram" ? "📱" : session.kind === "cron" ? "⏰" : "💬"}
</span>
<span className="text-xs font-medium text-gray-700 truncate">
<span className="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">
{session.sessionKey}
</span>
</div>
@@ -233,7 +233,7 @@ function MessageBubble({ msg }: { msg: ChatMessage }) {
if (isSystem) {
return (
<div className="text-center my-2">
<span className="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">
<span className="text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
{msg.content}
</span>
</div>
@@ -255,7 +255,7 @@ function MessageBubble({ msg }: { msg: ChatMessage }) {
className={`max-w-[75vw] sm:max-w-[60vw] rounded-2xl px-4 py-2.5 ${
isUser
? "bg-blue-500 text-white rounded-br-md"
: "bg-gray-100 text-gray-800 rounded-bl-md"
: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-bl-md"
}`}
>
{isUser ? (
@@ -284,7 +284,7 @@ function ThinkingIndicator() {
<div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center text-sm mr-2 shrink-0 mt-1">
🔨
</div>
<div className="bg-gray-100 rounded-2xl rounded-bl-md px-4 py-3">
<div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-3">
<div className="flex gap-1.5">
<span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
<span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
@@ -352,9 +352,9 @@ function ChatArea({
{/* Messages */}
<div className="flex-1 overflow-y-auto px-6 py-4">
{loading ? (
<div className="text-center text-gray-400 py-12">Loading messages...</div>
<div className="text-center text-gray-400 dark:text-gray-500 py-12">Loading messages...</div>
) : messages.length === 0 ? (
<div className="text-center text-gray-400 py-12">
<div className="text-center text-gray-400 dark:text-gray-500 py-12">
<span className="text-4xl block mb-3">🔨</span>
<p className="text-sm">Send a message to start chatting with Hammer</p>
</div>
@@ -373,7 +373,7 @@ function ChatArea({
</div>
{/* Input */}
<div className="border-t border-gray-200 bg-white px-4 py-3">
<div className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3">
{connectionState === "disconnected" && (
<div className="text-xs text-red-500 mb-2 flex items-center gap-1">
<span className="w-2 h-2 bg-red-500 rounded-full" />
@@ -395,7 +395,7 @@ function ChatArea({
placeholder={connected ? "Type a message..." : "Connecting..."}
disabled={!connected}
rows={1}
className="flex-1 resize-none rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 disabled:opacity-50 max-h-32"
className="flex-1 resize-none rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 disabled:opacity-50 max-h-32 placeholder:text-gray-400 dark:placeholder:text-gray-500"
style={{ minHeight: "42px" }}
/>
{streaming ? (
@@ -653,19 +653,19 @@ export function ChatPage() {
return (
<div className="h-[calc(100vh-3.5rem)] md:h-screen flex flex-col">
{/* Page Header */}
<header className="bg-white border-b border-gray-200 sticky top-0 z-30">
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-30">
<div className="px-4 sm:px-6 py-3 flex items-center justify-between">
<div className="flex items-center gap-3">
<button
onClick={() => setShowThreads(!showThreads)}
className="sm:hidden p-1 rounded hover:bg-gray-100 transition"
className="sm:hidden p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition"
aria-label="Toggle threads"
>
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</button>
<h1 className="text-lg font-bold text-gray-900">Chat</h1>
<h1 className="text-lg font-bold text-gray-900 dark:text-gray-100">Chat</h1>
</div>
<div className="flex items-center gap-2">
<span
@@ -732,7 +732,7 @@ export function ChatPage() {
connectionState={connectionState}
/>
) : (
<div className="flex-1 flex items-center justify-center text-gray-400 p-4 text-center">
<div className="flex-1 flex items-center justify-center text-gray-400 dark:text-gray-500 p-4 text-center">
<div>
<span className="text-3xl block mb-2">💬</span>
<p>Select or create a thread</p>

95
frontend/src/pages/DashboardPage.tsx
View File

@@ -28,7 +28,6 @@ function timeAgo(dateStr: string): string {
}
function RecentActivity({ tasks }: { tasks: Task[] }) {
// Gather all progress notes with task context, sorted by timestamp desc
const recentNotes = useMemo(() => {
const notes: { task: Task; note: ProgressNote }[] = [];
for (const task of tasks) {
@@ -44,7 +43,7 @@ function RecentActivity({ tasks }: { tasks: Task[] }) {
if (recentNotes.length === 0) {
return (
<div className="text-sm text-gray-400 italic py-6 text-center">
<div className="text-sm text-gray-400 dark:text-gray-500 italic py-6 text-center">
No recent activity
</div>
);
@@ -54,18 +53,18 @@ function RecentActivity({ tasks }: { tasks: Task[] }) {
<div className="space-y-3">
{recentNotes.map((item, i) => (
<div key={i} className="flex gap-3">
<div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-sm shrink-0 mt-0.5">
<div className="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-sm shrink-0 mt-0.5">
🔨
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-0.5">
<span className="text-xs font-bold text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded font-mono">
<span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded font-mono">
HQ-{item.task.taskNumber}
</span>
<span className="text-xs text-gray-400">{timeAgo(item.note.timestamp)}</span>
<span className="text-xs text-gray-400 dark:text-gray-500">{timeAgo(item.note.timestamp)}</span>
</div>
<p className="text-sm text-gray-700 line-clamp-2">{item.note.note}</p>
<p className="text-xs text-gray-400 mt-0.5 truncate">{item.task.title}</p>
<p className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">{item.note.note}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5 truncate">{item.task.title}</p>
</div>
</div>
))}
@@ -108,7 +107,7 @@ export function DashboardPage() {
if (loading && tasks.length === 0) {
return (
<div className="min-h-screen flex items-center justify-center text-gray-400">
<div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
Loading dashboard...
</div>
);
@@ -116,53 +115,53 @@ export function DashboardPage() {
return (
<div className="min-h-screen">
<header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
<div className="max-w-5xl mx-auto px-4 sm:px-6 py-4">
<h1 className="text-xl font-bold text-gray-900">🔨 Dashboard</h1>
<p className="text-sm text-gray-400">Overview of Hammer's work</p>
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">🔨 Dashboard</h1>
<p className="text-sm text-gray-400 dark:text-gray-500">Overview of Hammer's work</p>
</div>
</header>
<div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 space-y-6">
{/* Stats Grid */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
<StatCard label="Active" value={stats.active} icon="⚡" color="bg-amber-50 border-amber-200 text-amber-800" />
<StatCard label="Queued" value={stats.queued} icon="📋" color="bg-blue-50 border-blue-200 text-blue-800" />
<StatCard label="Blocked" value={stats.blocked} icon="🚫" color="bg-red-50 border-red-200 text-red-800" />
<StatCard label="Completed" value={stats.completed} icon="✅" color="bg-green-50 border-green-200 text-green-800" />
<StatCard label="Active" value={stats.active} icon="⚡" color="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-300" />
<StatCard label="Queued" value={stats.queued} icon="📋" color="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300" />
<StatCard label="Blocked" value={stats.blocked} icon="🚫" color="bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300" />
<StatCard label="Completed" value={stats.completed} icon="✅" color="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300" />
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Currently Working On */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm">
<div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
<h2 className="font-semibold text-gray-900">⚡ Currently Working On</h2>
<Link to="/queue" className="text-xs text-amber-600 hover:text-amber-700 font-medium">
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
<div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
<h2 className="font-semibold text-gray-900 dark:text-gray-100">⚡ Currently Working On</h2>
<Link to="/queue" className="text-xs text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 font-medium">
View Queue →
</Link>
</div>
<div className="p-5">
{activeTasks.length === 0 ? (
<div className="text-sm text-gray-400 italic py-4 text-center">
<div className="text-sm text-gray-400 dark:text-gray-500 italic py-4 text-center">
Hammer is idle — no active tasks
</div>
) : (
<div className="space-y-3">
{activeTasks.map((task) => (
<Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="block">
<div className="rounded-lg border border-amber-200 bg-amber-50 p-3 hover:bg-amber-100 transition">
<div className="flex items-center gap-2 mb-1">
<div className="rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3 hover:bg-amber-100 dark:hover:bg-amber-900/30 transition">
<div className="flex items-center gap-2 mb-1 flex-wrap">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
</span>
<span className="text-xs font-bold text-amber-700 font-mono">HQ-{task.taskNumber}</span>
<span className="text-xs text-amber-600 capitalize px-1.5 py-0.5 bg-amber-200/50 rounded-full">{task.priority}</span>
<span className="text-xs font-bold text-amber-700 dark:text-amber-400 font-mono">HQ-{task.taskNumber}</span>
<span className="text-xs text-amber-600 dark:text-amber-400 capitalize px-1.5 py-0.5 bg-amber-200/50 dark:bg-amber-800/50 rounded-full">{task.priority}</span>
{task.projectId && projectMap[task.projectId] && (
<span className="text-xs text-sky-600 px-1.5 py-0.5 bg-sky-100 rounded-full">📁 {projectMap[task.projectId]}</span>
<span className="text-xs text-sky-600 dark:text-sky-400 px-1.5 py-0.5 bg-sky-100 dark:bg-sky-900/30 rounded-full">📁 {projectMap[task.projectId]}</span>
)}
{task.assigneeName && (
<span className="text-xs text-emerald-600 px-1.5 py-0.5 bg-emerald-100 rounded-full">👤 {task.assigneeName}</span>
<span className="text-xs text-emerald-600 dark:text-emerald-400 px-1.5 py-0.5 bg-emerald-100 dark:bg-emerald-900/30 rounded-full">👤 {task.assigneeName}</span>
)}
{task.dueDate && (() => {
const due = new Date(task.dueDate);
@@ -170,23 +169,23 @@ export function DashboardPage() {
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
const isOverdue = diffMs < 0;
return isOverdue || diffDays <= 2 ? (
<span className={`text-xs px-1.5 py-0.5 rounded-full ${isOverdue ? "bg-red-200 text-red-700" : "bg-amber-200 text-amber-700"}`}>
<span className={`text-xs px-1.5 py-0.5 rounded-full ${isOverdue ? "bg-red-200 dark:bg-red-900/30 text-red-700 dark:text-red-400" : "bg-amber-200 dark:bg-amber-800/50 text-amber-700 dark:text-amber-400"}`}>
📅 {isOverdue ? "overdue" : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`}
</span>
) : null;
})()}
</div>
<h3 className="font-medium text-sm text-amber-900">{task.title}</h3>
<h3 className="font-medium text-sm text-amber-900 dark:text-amber-200">{task.title}</h3>
{task.subtasks?.length > 0 && (
<div className="mt-1.5 flex items-center gap-2">
<div className="flex-1 bg-amber-200/50 rounded-full h-1">
<div className="flex-1 bg-amber-200/50 dark:bg-amber-800/30 rounded-full h-1">
<div className="bg-green-500 h-1 rounded-full" style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }} />
</div>
<span className="text-xs text-amber-600">{task.subtasks.filter(s => s.completed).length}/{task.subtasks.length}</span>
<span className="text-xs text-amber-600 dark:text-amber-400">{task.subtasks.filter(s => s.completed).length}/{task.subtasks.length}</span>
</div>
)}
{task.progressNotes?.length > 0 && (
<p className="text-xs text-amber-700 mt-1 line-clamp-2 opacity-70">
<p className="text-xs text-amber-700 dark:text-amber-400 mt-1 line-clamp-2 opacity-70">
Latest: {task.progressNotes[task.progressNotes.length - 1].note}
</p>
)}
@@ -198,16 +197,16 @@ export function DashboardPage() {
{/* Up Next */}
{upNext.length > 0 && (
<div className="mt-4 pt-4 border-t border-gray-100">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Up Next</h3>
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Up Next</h3>
<div className="space-y-2">
{upNext.map((task, i) => (
<Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="flex items-center gap-2 text-sm group hover:bg-gray-50 rounded-lg px-1 -mx-1 py-0.5 transition">
<span className="text-gray-300 text-xs w-4 text-right">{i + 1}.</span>
<span className="text-xs font-mono text-gray-400">HQ-{task.taskNumber}</span>
<span className="text-gray-700 truncate group-hover:text-amber-700 transition">{task.title}</span>
<Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="flex items-center gap-2 text-sm group hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg px-1 -mx-1 py-0.5 transition">
<span className="text-gray-300 dark:text-gray-600 text-xs w-4 text-right">{i + 1}.</span>
<span className="text-xs font-mono text-gray-400 dark:text-gray-500">HQ-{task.taskNumber}</span>
<span className="text-gray-700 dark:text-gray-300 truncate group-hover:text-amber-700 dark:group-hover:text-amber-400 transition">{task.title}</span>
{task.priority === "high" || task.priority === "critical" ? (
<span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0 ${task.priority === "critical" ? "bg-red-100 text-red-600" : "bg-orange-100 text-orange-600"}`}>
<span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0 ${task.priority === "critical" ? "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400" : "bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400"}`}>
{task.priority}
</span>
) : null}
@@ -220,9 +219,9 @@ export function DashboardPage() {
</div>
{/* Recent Activity */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm">
<div className="px-5 py-4 border-b border-gray-100">
<h2 className="font-semibold text-gray-900">📝 Recent Activity</h2>
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
<div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800">
<h2 className="font-semibold text-gray-900 dark:text-gray-100">📝 Recent Activity</h2>
</div>
<div className="p-5">
<RecentActivity tasks={tasks} />
@@ -232,21 +231,21 @@ export function DashboardPage() {
{/* Recently Completed */}
{recentlyCompleted.length > 0 && (
<div className="bg-white rounded-xl border border-gray-200 shadow-sm">
<div className="px-5 py-4 border-b border-gray-100">
<h2 className="font-semibold text-gray-900">✅ Recently Completed</h2>
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
<div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800">
<h2 className="font-semibold text-gray-900 dark:text-gray-100">✅ Recently Completed</h2>
</div>
<div className="p-5">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
{recentlyCompleted.map((task) => (
<Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="rounded-lg border border-green-200 bg-green-50 p-3 hover:bg-green-100 transition block">
<Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 p-3 hover:bg-green-100 dark:hover:bg-green-900/30 transition block">
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-bold text-green-700 font-mono">HQ-{task.taskNumber}</span>
<span className="text-xs font-bold text-green-700 dark:text-green-400 font-mono">HQ-{task.taskNumber}</span>
{task.completedAt && (
<span className="text-xs text-green-600">{timeAgo(task.completedAt)}</span>
<span className="text-xs text-green-600 dark:text-green-500">{timeAgo(task.completedAt)}</span>
)}
</div>
<h3 className="font-medium text-sm text-green-900">{task.title}</h3>
<h3 className="font-medium text-sm text-green-900 dark:text-green-200">{task.title}</h3>
</Link>
))}
</div>

38
frontend/src/pages/QueuePage.tsx
View File

@@ -141,12 +141,12 @@ export function QueuePage() {
return (
<div className="min-h-screen">
{/* Page Header */}
<header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
<div className="flex items-center justify-between mb-3">
<div>
<h1 className="text-lg sm:text-xl font-bold text-gray-900">Task Queue</h1>
<p className="text-xs sm:text-sm text-gray-400">
<h1 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">Task Queue</h1>
<p className="text-xs sm:text-sm text-gray-400 dark:text-gray-500">
Manage what Hammer is working on
{filteredTasks.length !== tasks.length && (
<span className="ml-1 text-amber-500">· {filteredTasks.length} of {tasks.length} shown</span>
@@ -155,10 +155,10 @@ export function QueuePage() {
</div>
<div className="flex items-center gap-2">
{/* View toggle */}
<div className="hidden sm:flex items-center bg-gray-100 rounded-lg p-0.5">
<div className="hidden sm:flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
<button
onClick={() => setViewMode("list")}
className={`p-1.5 rounded-md transition ${viewMode === "list" ? "bg-white shadow-sm text-amber-600" : "text-gray-400 hover:text-gray-600"}`}
className={`p-1.5 rounded-md transition ${viewMode === "list" ? "bg-white dark:bg-gray-700 shadow-sm text-amber-600 dark:text-amber-400" : "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"}`}
title="List view"
aria-label="List view"
>
@@ -168,7 +168,7 @@ export function QueuePage() {
</button>
<button
onClick={() => setViewMode("board")}
className={`p-1.5 rounded-md transition ${viewMode === "board" ? "bg-white shadow-sm text-amber-600" : "text-gray-400 hover:text-gray-600"}`}
className={`p-1.5 rounded-md transition ${viewMode === "board" ? "bg-white dark:bg-gray-700 shadow-sm text-amber-600 dark:text-amber-400" : "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"}`}
title="Board view"
aria-label="Board view"
>
@@ -188,7 +188,7 @@ export function QueuePage() {
</div>
<div className="flex gap-2 items-center">
<div className="flex-1 relative">
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
@@ -196,7 +196,7 @@ export function QueuePage() {
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search tasks..."
className="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
className="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 placeholder:text-gray-400 dark:placeholder:text-gray-500"
/>
{search && (
<button
@@ -212,7 +212,7 @@ export function QueuePage() {
<select
value={filterPriority}
onChange={(e) => setFilterPriority(e.target.value)}
className="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<option value="">All priorities</option>
<option value="critical">🔴 Critical</option>
@@ -224,7 +224,7 @@ export function QueuePage() {
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<option value="">All statuses</option>
<option value="active">⚡ Active</option>
@@ -265,10 +265,10 @@ export function QueuePage() {
) : (
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-4 sm:py-6 space-y-5 sm:space-y-6">
{loading && (
<div className="text-center text-gray-400 py-12">Loading tasks...</div>
<div className="text-center text-gray-400 dark:text-gray-500 py-12">Loading tasks...</div>
)}
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 text-sm">
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg p-3 text-sm">
{error}
</div>
)}
@@ -276,11 +276,11 @@ export function QueuePage() {
{/* Active Task */}
{showSection("active") && (
<section>
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
<h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
⚡ Currently Working On
</h2>
{activeTasks.length === 0 ? (
<div className="border-2 border-dashed border-gray-200 rounded-lg p-8 text-center text-gray-400">
<div className="border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-8 text-center text-gray-400 dark:text-gray-500">
No active task — Hammer is idle
</div>
) : (
@@ -303,7 +303,7 @@ export function QueuePage() {
{/* Blocked */}
{showSection("blocked") && blockedTasks.length > 0 && (
<section>
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
<h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
🚫 Blocked ({blockedTasks.length})
</h2>
<div className="space-y-2">
@@ -323,11 +323,11 @@ export function QueuePage() {
{/* Queue */}
{showSection("queued") && (
<section>
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
<h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
📋 Queue ({queuedTasks.length})
</h2>
{queuedTasks.length === 0 ? (
<div className="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center text-gray-400">
<div className="border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-6 text-center text-gray-400 dark:text-gray-500">
Queue is empty
</div>
) : (
@@ -355,7 +355,7 @@ export function QueuePage() {
<section>
{filterStatus ? (
<>
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
<h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
{filterStatus === "completed" ? "✅" : "❌"} {filterStatus.charAt(0).toUpperCase() + filterStatus.slice(1)} ({completedTasks.length})
</h2>
<div className="space-y-2 opacity-60">
@@ -374,7 +374,7 @@ export function QueuePage() {
<>
<button
onClick={() => setShowCompleted(!showCompleted)}
className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3 flex items-center gap-1 hover:text-gray-700"
className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3 flex items-center gap-1 hover:text-gray-700 dark:hover:text-gray-300"
>
{showCompleted ? "▾" : "▸"} Completed / Cancelled ({completedTasks.length})
</button>

289
frontend/src/pages/TaskPage.tsx
View File

@@ -1,5 +1,7 @@
import { useState, useEffect, useCallback } from "react";
import { useParams, Link, useNavigate } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Task, TaskStatus, Project } from "../lib/types";
import { updateTask, fetchProjects, addProgressNote, addSubtask, toggleSubtask, deleteSubtask, deleteTask } from "../lib/api";
import { useToast } from "../components/Toast";
@@ -12,11 +14,11 @@ const priorityColors: Record<string, string> = {
};
const statusColors: Record<string, string> = {
active: "bg-amber-100 text-amber-800 border-amber-300",
queued: "bg-blue-100 text-blue-800 border-blue-300",
blocked: "bg-red-100 text-red-800 border-red-300",
completed: "bg-green-100 text-green-800 border-green-300",
cancelled: "bg-gray-100 text-gray-600 border-gray-300",
active: "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border-amber-300 dark:border-amber-700",
queued: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700",
blocked: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700",
completed: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700",
cancelled: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600",
};
const statusIcons: Record<string, string> = {
@@ -29,20 +31,20 @@ const statusIcons: Record<string, string> = {
const statusActions: Record<string, { label: string; next: TaskStatus; color: string }[]> = {
active: [
{ label: "⏸ Pause", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
{ label: "✅ Complete", next: "completed", color: "bg-green-50 text-green-700 border-green-200 hover:bg-green-100" },
{ label: "⏸ Pause", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/40" },
{ label: "✅ Complete", next: "completed", color: "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-200 dark:border-green-700 hover:bg-green-100 dark:hover:bg-green-900/40" },
],
queued: [
{ label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
{ label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900/40" },
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border-red-200 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/40" },
],
blocked: [
{ label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
{ label: "📋 Queue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
{ label: "▶ Activate", next: "active", color: "bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900/40" },
{ label: "📋 Queue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" },
],
completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" }],
cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/40" }],
};
function formatDate(dateStr: string): string {
@@ -63,6 +65,9 @@ function timeAgo(dateStr: string): string {
return `${days}d ago`;
}
// Markdown prose classes for descriptions and notes
const proseClasses = "prose prose-sm prose-gray dark:prose-invert max-w-none [&_pre]:bg-gray-800 dark:[&_pre]:bg-gray-900 [&_pre]:text-gray-100 [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs [&_code]:bg-gray-200 dark:[&_code]:bg-gray-700 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_p]:mb-2 [&_p:last-child]:mb-0 [&_ul]:mb-2 [&_ol]:mb-2 [&_li]:mb-0.5 [&_h1]:text-base [&_h2]:text-sm [&_h3]:text-sm [&_a]:text-amber-600 dark:[&_a]:text-amber-400 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 dark:[&_blockquote]:border-gray-600 [&_blockquote]:pl-3 [&_blockquote]:text-gray-500 dark:[&_blockquote]:text-gray-400";
export function TaskPage() {
const { taskRef } = useParams<{ taskRef: string }>();
const [task, setTask] = useState<Task | null>(null);
@@ -76,6 +81,14 @@ export function TaskPage() {
const [saving, setSaving] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [deleting, setDeleting] = useState(false);
// Description editing
const [editingDescription, setEditingDescription] = useState(false);
const [descriptionDraft, setDescriptionDraft] = useState("");
const [savingDescription, setSavingDescription] = useState(false);
// Title editing
const [editingTitle, setEditingTitle] = useState(false);
const [titleDraft, setTitleDraft] = useState("");
const [savingTitle, setSavingTitle] = useState(false);
const { toast } = useToast();
const navigate = useNavigate();
@@ -120,6 +133,38 @@ export function TaskPage() {
}
};
const handleSaveDescription = async () => {
if (!task) return;
setSavingDescription(true);
try {
await updateTask(task.id, { description: descriptionDraft });
fetchTask();
setEditingDescription(false);
toast("Description updated", "success");
} catch (e) {
console.error("Failed to save description:", e);
toast("Failed to save description", "error");
} finally {
setSavingDescription(false);
}
};
const handleSaveTitle = async () => {
if (!task || !titleDraft.trim()) return;
setSavingTitle(true);
try {
await updateTask(task.id, { title: titleDraft.trim() });
fetchTask();
setEditingTitle(false);
toast("Title updated", "success");
} catch (e) {
console.error("Failed to save title:", e);
toast("Failed to save title", "error");
} finally {
setSavingTitle(false);
}
};
const handleDelete = async () => {
if (!task) return;
setDeleting(true);
@@ -138,7 +183,7 @@ export function TaskPage() {
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center text-gray-400">
<div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
Loading task...
</div>
);
@@ -149,8 +194,8 @@ export function TaskPage() {
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<span className="text-4xl block mb-3">😕</span>
<p className="text-gray-500 mb-4">{error || "Task not found"}</p>
<Link to="/queue" className="text-amber-600 hover:text-amber-700 font-medium text-sm">
<p className="text-gray-500 dark:text-gray-400 mb-4">{error || "Task not found"}</p>
<Link to="/queue" className="text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 font-medium text-sm">
← Back to Queue
</Link>
</div>
@@ -168,14 +213,18 @@ export function TaskPage() {
return (
<div className="min-h-screen">
{/* Header */}
<header className={`sticky top-14 md:top-0 z-30 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-white border-gray-200"}`}>
<header className={`sticky top-14 md:top-0 z-30 border-b ${
isActive
? "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800"
: "bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800"
}`}>
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-4">
<div className="flex items-center gap-2 mb-2">
<Link to="/queue" className="text-sm text-gray-400 hover:text-gray-600 transition">
<Link to="/queue" className="text-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition">
← Queue
</Link>
<span className="text-gray-300">/</span>
<span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">
<span className="text-gray-300 dark:text-gray-600">/</span>
<span className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded font-mono">
HQ-{task.taskNumber}
</span>
</div>
@@ -195,15 +244,51 @@ export function TaskPage() {
{task.priority}
</span>
{project && (
<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
<span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">
📁 {project.name}
</span>
)}
</div>
<h1 className="text-xl font-bold text-gray-900">{task.title}</h1>
{editingTitle ? (
<div className="flex items-center gap-2">
<input
autoFocus
value={titleDraft}
onChange={(e) => setTitleDraft(e.target.value)}
className="text-xl font-bold text-gray-900 dark:text-gray-100 bg-transparent border-b-2 border-amber-400 dark:border-amber-500 outline-none flex-1 py-0.5"
onKeyDown={(e) => {
if (e.key === "Enter") handleSaveTitle();
if (e.key === "Escape") setEditingTitle(false);
}}
disabled={savingTitle}
/>
<button
onClick={handleSaveTitle}
disabled={savingTitle || !titleDraft.trim()}
className="text-xs px-2.5 py-1 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50"
>
{savingTitle ? "..." : "Save"}
</button>
<button
onClick={() => setEditingTitle(false)}
className="text-xs px-2.5 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition"
>
Cancel
</button>
</div>
) : (
<h1
className="text-xl font-bold text-gray-900 dark:text-gray-100 cursor-pointer hover:text-amber-700 dark:hover:text-amber-400 transition group"
onClick={() => { setTitleDraft(task.title); setEditingTitle(true); }}
title="Click to edit title"
>
{task.title}
<span className="opacity-0 group-hover:opacity-100 text-gray-400 dark:text-gray-500 text-sm ml-2 transition">✏️</span>
</h1>
)}
</div>
{/* Status Actions */}
<div className="flex gap-2 shrink-0">
<div className="flex gap-2 shrink-0 flex-wrap justify-end">
{actions.map((action) => (
<button
key={action.next}
@@ -226,9 +311,13 @@ export function TaskPage() {
const isDueSoon = diffDays <= 2 && !isOverdue;
return (
<div className="mt-2 flex items-center gap-2">
<span className="text-xs text-gray-500">📅 Due:</span>
<span className="text-xs text-gray-500 dark:text-gray-400">📅 Due:</span>
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-600"
isOverdue
? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
: isDueSoon
? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400"
: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
}`}>
{formatDate(task.dueDate)} ({isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d left`})
</span>
@@ -243,30 +332,80 @@ export function TaskPage() {
{/* Main content */}
<div className="lg:col-span-2 space-y-6">
{/* Description */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Description</h2>
<p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
{task.description || <span className="text-gray-400 italic">No description</span>}
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5">
<div className="flex items-center justify-between mb-3">
<h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Description</h2>
{!editingDescription && (
<button
onClick={() => { setDescriptionDraft(task.description || ""); setEditingDescription(true); }}
className="text-xs text-gray-400 dark:text-gray-500 hover:text-amber-600 dark:hover:text-amber-400 transition font-medium"
>
✏️ Edit
</button>
)}
</div>
{editingDescription ? (
<div className="space-y-3">
<textarea
autoFocus
value={descriptionDraft}
onChange={(e) => setDescriptionDraft(e.target.value)}
rows={8}
className="w-full text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 resize-y min-h-[120px] font-mono placeholder:text-gray-400 dark:placeholder:text-gray-500"
placeholder="Describe the task... (Markdown supported)"
/>
<div className="flex items-center justify-between">
<span className="text-[10px] text-gray-400 dark:text-gray-500">Markdown supported</span>
<div className="flex gap-2">
<button
onClick={() => setEditingDescription(false)}
className="text-xs px-3 py-1.5 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition"
>
Cancel
</button>
<button
onClick={handleSaveDescription}
disabled={savingDescription}
className="text-xs px-3 py-1.5 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50"
>
{savingDescription ? "Saving..." : "Save"}
</button>
</div>
</div>
</div>
) : task.description ? (
<div className={`text-sm leading-relaxed ${proseClasses}`}>
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{task.description}
</ReactMarkdown>
</div>
) : (
<p
className="text-sm text-gray-400 dark:text-gray-500 italic cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition py-4 text-center border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg"
onClick={() => { setDescriptionDraft(""); setEditingDescription(true); }}
>
No description — click to add one
</p>
)}
</div>
{/* Subtasks */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5">
<div className="flex items-center justify-between mb-3">
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
<h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
Subtasks {task.subtasks?.length > 0 && (
<span className="text-gray-300 ml-1">({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})</span>
<span className="text-gray-300 dark:text-gray-600 ml-1">({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})</span>
)}
</h2>
{task.subtasks?.length > 0 && (
<span className="text-xs text-gray-400">{subtaskProgress}%</span>
<span className="text-xs text-gray-400 dark:text-gray-500">{subtaskProgress}%</span>
)}
</div>
{/* Progress bar */}
{task.subtasks?.length > 0 && (
<div className="mb-4">
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-green-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${subtaskProgress}%` }}
@@ -279,7 +418,7 @@ export function TaskPage() {
{task.subtasks?.length > 0 && (
<div className="space-y-1 mb-4">
{task.subtasks.map((subtask) => (
<div key={subtask.id} className="flex items-center gap-3 group py-1.5 px-2 rounded-lg hover:bg-gray-50 transition">
<div key={subtask.id} className="flex items-center gap-3 group py-1.5 px-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
<button
onClick={async () => {
try {
@@ -292,7 +431,7 @@ export function TaskPage() {
className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition ${
subtask.completed
? "bg-green-500 border-green-500 text-white"
: "border-gray-300 hover:border-amber-400"
: "border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500"
}`}
>
{subtask.completed && (
@@ -301,7 +440,7 @@ export function TaskPage() {
</svg>
)}
</button>
<span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
<span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`}>
{subtask.title}
</span>
<button
@@ -313,7 +452,7 @@ export function TaskPage() {
console.error("Failed to delete subtask:", e);
}
}}
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-400 transition p-0.5"
className="opacity-0 group-hover:opacity-100 text-gray-300 dark:text-gray-600 hover:text-red-400 dark:hover:text-red-400 transition p-0.5"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -331,7 +470,7 @@ export function TaskPage() {
value={newSubtaskTitle}
onChange={(e) => setNewSubtaskTitle(e.target.value)}
placeholder="Add a subtask..."
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
className="flex-1 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 placeholder:text-gray-400 dark:placeholder:text-gray-500"
onKeyDown={async (e) => {
if (e.key === "Enter" && newSubtaskTitle.trim()) {
setAddingSubtask(true);
@@ -371,10 +510,10 @@ export function TaskPage() {
</div>
{/* Progress Notes */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-5">
<h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
Progress Notes {task.progressNotes?.length > 0 && (
<span className="text-gray-300 ml-1">({task.progressNotes.length})</span>
<span className="text-gray-300 dark:text-gray-600 ml-1">({task.progressNotes.length})</span>
)}
</h2>
@@ -386,7 +525,7 @@ export function TaskPage() {
onChange={(e) => setNoteText(e.target.value)}
placeholder="Add a progress note..."
rows={2}
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 resize-y min-h-[40px] max-h-32"
className="flex-1 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 focus:border-amber-300 dark:focus:border-amber-700 resize-y min-h-[40px] max-h-32 placeholder:text-gray-400 dark:placeholder:text-gray-500"
onKeyDown={(e) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
@@ -415,12 +554,12 @@ export function TaskPage() {
{addingNote ? "..." : "Add"}
</button>
</div>
<p className="text-[10px] text-gray-400 mt-1">⌘+Enter to submit</p>
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-1">⌘+Enter to submit</p>
</div>
{/* Notes list */}
{!task.progressNotes || task.progressNotes.length === 0 ? (
<div className="text-sm text-gray-400 italic py-6 text-center border-2 border-dashed border-gray-100 rounded-lg">
<div className="text-sm text-gray-400 dark:text-gray-500 italic py-6 text-center border-2 border-dashed border-gray-100 dark:border-gray-800 rounded-lg">
No progress notes yet
</div>
) : (
@@ -431,16 +570,18 @@ export function TaskPage() {
.map((note, i) => (
<div key={i} className="relative pl-6 pb-4 last:pb-0 group">
{i < task.progressNotes.length - 1 && (
<div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 group-last:hidden" />
<div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last:hidden" />
)}
<div className={`absolute left-0 top-1 w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center ${
i === 0 && isActive ? "border-amber-400 bg-amber-50" : "border-gray-300 bg-white"
i === 0 && isActive
? "border-amber-400 dark:border-amber-500 bg-amber-50 dark:bg-amber-900/30"
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900"
}`}>
<div className={`w-2 h-2 rounded-full ${i === 0 && isActive ? "bg-amber-500" : "bg-gray-300"}`} />
<div className={`w-2 h-2 rounded-full ${i === 0 && isActive ? "bg-amber-500" : "bg-gray-300 dark:bg-gray-600"}`} />
</div>
<div>
<p className="text-sm text-gray-700 leading-relaxed">{note.note}</p>
<p className="text-xs text-gray-400 mt-0.5">{formatDate(note.timestamp)} · {timeAgo(note.timestamp)}</p>
<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{note.note}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{formatDate(note.timestamp)} · {timeAgo(note.timestamp)}</p>
</div>
</div>
))}
@@ -452,49 +593,49 @@ export function TaskPage() {
{/* Sidebar */}
<div className="space-y-4">
{/* Meta */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Details</h3>
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-4">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Details</h3>
<div className="space-y-3 text-sm">
<div className="flex justify-between">
<span className="text-gray-500">Source</span>
<span className="text-gray-700 font-medium capitalize">{task.source}</span>
<span className="text-gray-500 dark:text-gray-400">Source</span>
<span className="text-gray-700 dark:text-gray-300 font-medium capitalize">{task.source}</span>
</div>
{task.assigneeName && (
<div className="flex justify-between">
<span className="text-gray-500">Assignee</span>
<span className="text-gray-700 font-medium">{task.assigneeName}</span>
<span className="text-gray-500 dark:text-gray-400">Assignee</span>
<span className="text-gray-700 dark:text-gray-300 font-medium">{task.assigneeName}</span>
</div>
)}
{project && (
<div className="flex justify-between">
<span className="text-gray-500">Project</span>
<span className="text-gray-700 font-medium">{project.name}</span>
<span className="text-gray-500 dark:text-gray-400">Project</span>
<span className="text-gray-700 dark:text-gray-300 font-medium">{project.name}</span>
</div>
)}
<div className="flex justify-between">
<span className="text-gray-500">Created</span>
<span className="text-gray-700 text-xs">{timeAgo(task.createdAt)}</span>
<span className="text-gray-500 dark:text-gray-400">Created</span>
<span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.createdAt)}</span>
</div>
{task.updatedAt !== task.createdAt && (
<div className="flex justify-between">
<span className="text-gray-500">Updated</span>
<span className="text-gray-700 text-xs">{timeAgo(task.updatedAt)}</span>
<span className="text-gray-500 dark:text-gray-400">Updated</span>
<span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.updatedAt)}</span>
</div>
)}
{task.completedAt && (
<div className="flex justify-between">
<span className="text-gray-500">Completed</span>
<span className="text-gray-700 text-xs">{timeAgo(task.completedAt)}</span>
<span className="text-gray-500 dark:text-gray-400">Completed</span>
<span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.completedAt)}</span>
</div>
)}
</div>
</div>
{/* Quick link */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Share</h3>
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-4">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Share</h3>
<div className="flex items-center gap-2">
<code className="text-xs text-gray-500 font-mono bg-gray-50 px-2 py-1 rounded flex-1 truncate">
<code className="text-xs text-gray-500 dark:text-gray-400 font-mono bg-gray-50 dark:bg-gray-800 px-2 py-1 rounded flex-1 truncate">
/task/HQ-{task.taskNumber}
</code>
<button
@@ -503,7 +644,7 @@ export function TaskPage() {
navigator.clipboard.writeText(url);
toast("Link copied", "info");
}}
className="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200 transition"
className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition"
>
📋
</button>
@@ -511,18 +652,18 @@ export function TaskPage() {
</div>
{/* Danger zone */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Danger Zone</h3>
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm p-4">
<h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Danger Zone</h3>
{!showDeleteConfirm ? (
<button
onClick={() => setShowDeleteConfirm(true)}
className="w-full text-sm text-red-600 hover:text-red-700 border border-red-200 rounded-lg px-3 py-2 hover:bg-red-50 transition font-medium"
className="w-full text-sm text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 border border-red-200 dark:border-red-800 rounded-lg px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 transition font-medium"
>
🗑 Delete Task
</button>
) : (
<div className="space-y-2 animate-slide-up">
<p className="text-xs text-red-700">This cannot be undone. Are you sure?</p>
<p className="text-xs text-red-700 dark:text-red-400">This cannot be undone. Are you sure?</p>
<div className="flex gap-2">
<button
onClick={handleDelete}
@@ -533,7 +674,7 @@ export function TaskPage() {
</button>
<button
onClick={() => setShowDeleteConfirm(false)}
className="flex-1 text-sm px-3 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition"
className="flex-1 text-sm px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
>
Cancel
</button>