feat(frontend): Add Sprint 4 new fields to Story Detail page sidebar

Add three new cards to Story Detail sidebar to display Sprint 4 Story 3 fields:
- Story Points card with Target icon
- Tags card with Tag badges
- Acceptance Criteria card with CheckCircle2 icons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/tasks/task-card.tsx

@@ -1,29 +1,21 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Task, WorkItemStatus } from '@/types/project';
-import { useChangeTaskStatus, useUpdateTask, useDeleteTask } from '@/lib/hooks/use-tasks';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { useState } from "react";
+import { Task, WorkItemStatus } from "@/types/project";
+import { useChangeTaskStatus, useUpdateTask, useDeleteTask } from "@/lib/hooks/use-tasks";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  MoreHorizontal,
-  Pencil,
-  Trash2,
-  Clock,
-  User,
-  CheckCircle2,
-  Circle
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { TaskEditDialog } from './task-edit-dialog';
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Pencil, Trash2, Clock, User, CheckCircle2, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { TaskEditDialog } from "./task-edit-dialog";
 
 interface TaskCardProps {
   task: Task;
@@ -31,17 +23,18 @@ interface TaskCardProps {
 }
 
 const priorityColors = {
-  Critical: 'bg-red-500 text-white',
-  High: 'bg-orange-500 text-white',
-  Medium: 'bg-yellow-500 text-white',
-  Low: 'bg-blue-500 text-white',
+  Critical: "bg-red-500 text-white",
+  High: "bg-orange-500 text-white",
+  Medium: "bg-yellow-500 text-white",
+  Low: "bg-blue-500 text-white",
 };
 
 const statusColors = {
-  Todo: 'text-gray-500',
-  InProgress: 'text-blue-500',
-  Done: 'text-green-500',
-  Blocked: 'text-red-500',
+  Backlog: "text-slate-500",
+  Todo: "text-gray-500",
+  InProgress: "text-blue-500",
+  Done: "text-green-500",
+  Blocked: "text-red-500",
 };
 
 export function TaskCard({ task, storyId }: TaskCardProps) {
@@ -51,15 +44,15 @@ export function TaskCard({ task, storyId }: TaskCardProps) {
   const updateTask = useUpdateTask();
   const deleteTask = useDeleteTask();
 
-  const isDone = task.status === 'Done';
+  const isDone = task.status === "Done";
 
   const handleCheckboxChange = (checked: boolean) => {
-    const newStatus: WorkItemStatus = checked ? 'Done' : 'Todo';
+    const newStatus: WorkItemStatus = checked ? "Done" : "Todo";
     changeStatus.mutate({ id: task.id, status: newStatus });
   };
 
   const handleDelete = () => {
-    if (confirm('Are you sure you want to delete this task?')) {
+    if (confirm("Are you sure you want to delete this task?")) {
       deleteTask.mutate(task.id);
     }
   };
@@ -67,7 +60,7 @@ export function TaskCard({ task, storyId }: TaskCardProps) {
   return (
     <Card
       className={cn(
-        "transition-all duration-200 hover:shadow-md cursor-pointer",
+        "cursor-pointer transition-all duration-200 hover:shadow-md",
         isDone && "opacity-60"
       )}
       onClick={() => setIsExpanded(!isExpanded)}
@@ -85,51 +78,44 @@ export function TaskCard({ task, storyId }: TaskCardProps) {
           </div>
 
           {/* Task Content */}
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-2">
-              <h4 className={cn(
-                "font-medium text-sm",
-                isDone && "line-through text-muted-foreground"
-              )}>
+          <div className="min-w-0 flex-1">
+            <div className="mb-2 flex items-center gap-2">
+              <h4
+                className={cn(
+                  "text-sm font-medium",
+                  isDone && "text-muted-foreground line-through"
+                )}
+              >
                 {task.title}
               </h4>
-              <Badge
-                variant="secondary"
-                className={cn("text-xs", priorityColors[task.priority])}
-              >
+              <Badge variant="secondary" className={cn("text-xs", priorityColors[task.priority])}>
                 {task.priority}
               </Badge>
             </div>
 
             {/* Metadata */}
-            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <div className="text-muted-foreground flex items-center gap-4 text-xs">
               {task.estimatedHours && (
                 <div className="flex items-center gap-1">
-                  <Clock className="w-3 h-3" />
+                  <Clock className="h-3 w-3" />
                   <span>{task.estimatedHours}h</span>
                 </div>
               )}
               {task.assigneeId && (
                 <div className="flex items-center gap-1">
-                  <User className="w-3 h-3" />
+                  <User className="h-3 w-3" />
                   <span>Assigned</span>
                 </div>
               )}
               <div className={cn("flex items-center gap-1", statusColors[task.status])}>
-                {isDone ? (
-                  <CheckCircle2 className="w-3 h-3" />
-                ) : (
-                  <Circle className="w-3 h-3" />
-                )}
+                {isDone ? <CheckCircle2 className="h-3 w-3" /> : <Circle className="h-3 w-3" />}
                 <span>{task.status}</span>
               </div>
             </div>
 
             {/* Description (expanded) */}
             {isExpanded && task.description && (
-              <div className="mt-3 text-sm text-muted-foreground">
-                {task.description}
-              </div>
+              <div className="text-muted-foreground mt-3 text-sm">{task.description}</div>
             )}
           </div>
 
@@ -137,24 +123,17 @@ export function TaskCard({ task, storyId }: TaskCardProps) {
           <div onClick={(e) => e.stopPropagation()}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 w-8 p-0"
-                >
-                  <MoreHorizontal className="w-4 h-4" />
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <MoreHorizontal className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuItem onClick={() => setIsEditDialogOpen(true)}>
-                  <Pencil className="w-4 h-4 mr-2" />
+                  <Pencil className="mr-2 h-4 w-4" />
                   Edit
                 </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={handleDelete}
-                  className="text-destructive"
-                >
-                  <Trash2 className="w-4 h-4 mr-2" />
+                <DropdownMenuItem onClick={handleDelete} className="text-destructive">
+                  <Trash2 className="mr-2 h-4 w-4" />
                   Delete
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -164,11 +143,7 @@ export function TaskCard({ task, storyId }: TaskCardProps) {
       </CardHeader>
 
       {/* Edit Dialog */}
-      <TaskEditDialog
-        task={task}
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-      />
+      <TaskEditDialog task={task} open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen} />
     </Card>
   );
 }