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-quick-add.tsx

@@ -1,14 +1,20 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { useCreateTask } from '@/lib/hooks/use-tasks';
-import { CreateTaskDto, WorkItemPriority } from '@/types/project';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useCreateTask } from "@/lib/hooks/use-tasks";
+import { CreateTaskDto, WorkItemPriority } from "@/types/project";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Form,
   FormControl,
@@ -16,18 +22,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form';
-import { Card, CardContent } from '@/components/ui/card';
-import { Plus, X } from 'lucide-react';
+} from "@/components/ui/form";
+import { Card, CardContent } from "@/components/ui/card";
+import { Plus, X } from "lucide-react";
 
 interface TaskQuickAddProps {
   storyId: string;
 }
 
 const taskSchema = z.object({
-  title: z.string().min(1, 'Title is required').max(200, 'Title too long'),
-  priority: z.enum(['Critical', 'High', 'Medium', 'Low']),
-  estimatedHours: z.coerce.number().min(0).optional(),
+  title: z.string().min(1, "Title is required").max(200, "Title too long"),
+  priority: z.enum(["Critical", "High", "Medium", "Low"]),
+  estimatedHours: z.number().min(0).optional().or(z.literal("")),
 });
 
 type TaskFormData = z.infer<typeof taskSchema>;
@@ -39,8 +45,8 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
   const form = useForm<TaskFormData>({
     resolver: zodResolver(taskSchema),
     defaultValues: {
-      title: '',
-      priority: 'Medium',
+      title: "",
+      priority: "Medium",
       estimatedHours: undefined,
     },
   });
@@ -50,7 +56,7 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
       storyId,
       title: data.title,
       priority: data.priority as WorkItemPriority,
-      estimatedHours: data.estimatedHours,
+      estimatedHours: typeof data.estimatedHours === "number" ? data.estimatedHours : undefined,
     };
 
     createTask.mutate(taskData, {
@@ -68,13 +74,8 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
 
   if (!isOpen) {
     return (
-      <Button
-        onClick={() => setIsOpen(true)}
-        variant="outline"
-        className="w-full"
-        size="sm"
-      >
-        <Plus className="w-4 h-4 mr-2" />
+      <Button onClick={() => setIsOpen(true)} variant="outline" className="w-full" size="sm">
+        <Plus className="mr-2 h-4 w-4" />
         Add Task
       </Button>
     );
@@ -85,7 +86,7 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
       <CardContent className="pt-4">
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <div className="flex items-center justify-between mb-2">
+            <div className="mb-2 flex items-center justify-between">
               <h4 className="text-sm font-medium">Quick Add Task</h4>
               <Button
                 type="button"
@@ -94,7 +95,7 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
                 onClick={handleCancel}
                 className="h-6 w-6 p-0"
               >
-                <X className="w-4 h-4" />
+                <X className="h-4 w-4" />
               </Button>
             </div>
 
@@ -105,11 +106,7 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
                 <FormItem>
                   <FormLabel>Title *</FormLabel>
                   <FormControl>
-                    <Input
-                      placeholder="e.g., Implement login API"
-                      {...field}
-                      autoFocus
-                    />
+                    <Input placeholder="e.g., Implement login API" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -123,10 +120,7 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Priority</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue placeholder="Select priority" />
@@ -154,8 +148,11 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
                       <Input
                         type="number"
                         placeholder="8"
-                        {...field}
-                        value={field.value ?? ''}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          field.onChange(value === "" ? "" : parseFloat(value));
+                        }}
+                        value={field.value === undefined ? "" : field.value}
                       />
                     </FormControl>
                     <FormMessage />
@@ -165,20 +162,10 @@ export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
             </div>
 
             <div className="flex gap-2">
-              <Button
-                type="submit"
-                size="sm"
-                disabled={createTask.isPending}
-                className="flex-1"
-              >
-                {createTask.isPending ? 'Creating...' : 'Add Task'}
+              <Button type="submit" size="sm" disabled={createTask.isPending} className="flex-1">
+                {createTask.isPending ? "Creating..." : "Add Task"}
               </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={handleCancel}
-              >
+              <Button type="button" variant="outline" size="sm" onClick={handleCancel}>
                 Cancel
               </Button>
             </div>