@mostrom/app-shell 0.1.0

package/src/components/section-drawer/deal-drawer-content.tsx

@@ -0,0 +1,891 @@
+import * as React from "react";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  CalendarDays,
+  User,
+  X,
+  FileText,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+} from "@/components/ui/avatar";
+import { Badge } from "@/components/reui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { AssigneeSelector, type Assignee } from "@/components/ui/assignee-selector";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DealClient {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface DealOwner {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface DealProject {
+  id: string;
+  name: string;
+  color: string;
+  section?: string;
+}
+
+export interface DealSubtask {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+export interface DealAttachment {
+  id: string;
+  name: string;
+  type: string;
+  size?: number;
+}
+
+export interface DealDrawerContentProps {
+  // ============ Default Fields ============
+  /** Assignee */
+  assignee?: Assignee | null;
+  /** Available assignees for selection */
+  availableAssignees?: Assignee[];
+  /** Due date */
+  dueDate?: string | Date | null;
+  /** Priority */
+  priority?: "High" | "Medium" | "Low" | null;
+  /** Description */
+  description?: string;
+  /** Subtasks */
+  subtasks?: DealSubtask[];
+  /** Attachments */
+  attachments?: DealAttachment[];
+
+  // ============ Deals Section (Client + Stage) ============
+  /** Client this deal is with */
+  client?: DealClient | null;
+  /** Available clients for selection */
+  availableClients?: DealClient[];
+  /** Current deal stage */
+  dealStage?: string | null;
+  /** Available stages for the deal pipeline */
+  availableStages?: string[];
+
+  // ============ Deals-Specific Fields ============
+  /** Deal value */
+  value?: number | null;
+  /** Currency code (default: USD) */
+  currency?: string;
+  /** Expected close date (deals-specific) */
+  expectedClose?: string | Date | null;
+
+  // ============ Callbacks ============
+  onAssigneeChange?: (assignee: Assignee | null) => void;
+  onDueDateChange?: (date: Date | null) => void;
+  onPriorityChange?: (priority: "High" | "Medium" | "Low" | null) => void;
+  onDescriptionChange?: (description: string) => void;
+  onClientChange?: (client: DealClient | null) => void;
+  onDealStageChange?: (stage: string | null) => void;
+  onValueChange?: (value: number | null) => void;
+  onExpectedCloseChange?: (date: Date | null) => void;
+  onAddSubtask?: () => void;
+  onToggleSubtask?: (subtaskId: string, completed: boolean) => void;
+  onSubtaskTitleChange?: (subtaskId: string, title: string) => void;
+  onAddAttachment?: () => void;
+  /** Callback when add deal association (+) button is clicked in Deals header */
+  onAddDealAssociation?: () => void;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+function formatCurrency(value: number, currency: string = "USD"): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function parseDate(date: string | Date | null | undefined): Date | undefined {
+  if (!date) return undefined;
+  if (date instanceof Date) return date;
+  if (typeof date === "string") {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      const [year, month, day] = date.split("-").map(Number);
+      return new Date(year, month - 1, day);
+    }
+    return new Date(date);
+  }
+  return undefined;
+}
+
+function formatDate(date: string | Date | null | undefined): { text: string; isOverdue: boolean } {
+  if (!date) return { text: "No date", isOverdue: false };
+
+  const d = parseDate(date);
+  if (!d) return { text: "No date", isOverdue: false };
+
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  const dateOnly = new Date(d);
+  dateOnly.setHours(0, 0, 0, 0);
+  const isOverdue = dateOnly < now;
+
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (dateOnly.toDateString() === yesterday.toDateString()) {
+    return { text: "Yesterday", isOverdue: true };
+  }
+
+  if (dateOnly.toDateString() === now.toDateString()) {
+    return { text: "Today", isOverdue: false };
+  }
+
+  const tomorrow = new Date(now);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  if (dateOnly.toDateString() === tomorrow.toDateString()) {
+    return { text: "Tomorrow", isOverdue: false };
+  }
+
+  return {
+    text: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    isOverdue,
+  };
+}
+
+function getPriorityVariant(priority: string | null | undefined): "warning-light" | "destructive-light" | "success-light" | "outline" {
+  switch (priority) {
+    case "High":
+      return "destructive-light";
+    case "Medium":
+      return "warning-light";
+    case "Low":
+      return "success-light";
+    default:
+      return "outline";
+  }
+}
+
+// ============================================================================
+// DealDrawerContent Component
+// ============================================================================
+
+export function DealDrawerContent({
+  // Default fields
+  assignee,
+  availableAssignees = [],
+  dueDate,
+  priority,
+  description,
+  subtasks = [],
+  attachments = [],
+  // Deals section (Client + Stage)
+  client,
+  availableClients = [],
+  dealStage,
+  availableStages = ["New opportunities", "Active opportunities", "Late stage", "Closed won", "Closed lost"],
+  // Deals-specific
+  value,
+  currency = "USD",
+  expectedClose,
+  // Callbacks
+  onAssigneeChange,
+  onDueDateChange,
+  onPriorityChange,
+  onDescriptionChange,
+  onClientChange,
+  onDealStageChange,
+  onValueChange,
+  onExpectedCloseChange,
+  onAddSubtask,
+  onToggleSubtask,
+  onSubtaskTitleChange,
+  onAddAttachment,
+  onAddDealAssociation,
+}: DealDrawerContentProps) {
+  // State for client selector popover
+  const [clientSelectorOpen, setClientSelectorOpen] = React.useState(false);
+
+  // Local state
+  const [localPriority, setLocalPriority] = React.useState(priority);
+  const [isEditingValue, setIsEditingValue] = React.useState(false);
+  const [editedValue, setEditedValue] = React.useState(value?.toString() ?? "");
+  const [isEditingDescription, setIsEditingDescription] = React.useState(false);
+  const [editedDescription, setEditedDescription] = React.useState(description ?? "");
+  const [editingSubtaskId, setEditingSubtaskId] = React.useState<string | null>(null);
+  const [editedSubtaskTitle, setEditedSubtaskTitle] = React.useState("");
+
+  // Dialog/Popover states
+  const [assigneeSelectorOpen, setAssigneeSelectorOpen] = React.useState(false);
+  const [dueDatePopoverOpen, setDueDatePopoverOpen] = React.useState(false);
+  const [expectedClosePopoverOpen, setExpectedClosePopoverOpen] = React.useState(false);
+  const [dealStageSelectOpen, setDealStageSelectOpen] = React.useState(false);
+  const [prioritySelectOpen, setPrioritySelectOpen] = React.useState(false);
+
+  // Section collapse state
+  const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(new Set());
+
+  // Refs
+  const valueInputRef = React.useRef<HTMLInputElement>(null);
+  const descriptionRef = React.useRef<HTMLTextAreaElement>(null);
+  const subtaskTitleInputRef = React.useRef<HTMLInputElement>(null);
+  const subtaskSaveHandledRef = React.useRef(false);
+
+  // Sync effects
+  React.useEffect(() => {
+    setLocalPriority(priority);
+  }, [priority]);
+
+  React.useEffect(() => {
+    setEditedValue(value?.toString() ?? "");
+  }, [value]);
+
+  React.useEffect(() => {
+    setEditedDescription(description ?? "");
+  }, [description]);
+
+  React.useEffect(() => {
+    if (isEditingValue && valueInputRef.current) {
+      valueInputRef.current.focus();
+      valueInputRef.current.select();
+    }
+  }, [isEditingValue]);
+
+  React.useEffect(() => {
+    if (isEditingDescription && descriptionRef.current) {
+      descriptionRef.current.focus();
+    }
+  }, [isEditingDescription]);
+
+  React.useEffect(() => {
+    if (editingSubtaskId && subtaskTitleInputRef.current) {
+      subtaskTitleInputRef.current.focus();
+      subtaskTitleInputRef.current.select();
+    }
+  }, [editingSubtaskId]);
+
+  // Handlers
+  const toggleSection = (sectionId: string) => {
+    setCollapsedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(sectionId)) {
+        next.delete(sectionId);
+      } else {
+        next.add(sectionId);
+      }
+      return next;
+    });
+  };
+
+  const handlePriorityChange = (val: string) => {
+    const newPriority = val === "none" ? null : (val as "High" | "Medium" | "Low");
+    setLocalPriority(newPriority);
+    onPriorityChange?.(newPriority);
+  };
+
+  const handleValueClick = () => {
+    if (onValueChange) {
+      setIsEditingValue(true);
+    }
+  };
+
+  const handleValueBlur = () => {
+    setIsEditingValue(false);
+    const numValue = parseFloat(editedValue.replace(/[^0-9.-]/g, ""));
+    if (!isNaN(numValue) && numValue !== value) {
+      onValueChange?.(numValue);
+    }
+  };
+
+  const handleValueKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleValueBlur();
+    } else if (e.key === "Escape") {
+      setIsEditingValue(false);
+      setEditedValue(value?.toString() ?? "");
+    }
+  };
+
+  const handleDescriptionClick = () => {
+    if (onDescriptionChange) {
+      setIsEditingDescription(true);
+    }
+  };
+
+  const handleDescriptionBlur = () => {
+    setIsEditingDescription(false);
+    if (editedDescription !== (description ?? "")) {
+      onDescriptionChange?.(editedDescription);
+    }
+  };
+
+  const handleClearDueDate = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDueDateChange?.(null);
+  };
+
+  const handleClearExpectedClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onExpectedCloseChange?.(null);
+  };
+
+  const handleSubtaskTitleDoubleClick = (event: React.MouseEvent, subtask: DealSubtask) => {
+    event.stopPropagation();
+    if (!onSubtaskTitleChange) return;
+    setEditingSubtaskId(subtask.id);
+    setEditedSubtaskTitle(subtask.title);
+  };
+
+  const handleSubtaskTitleSave = () => {
+    if (!editingSubtaskId) return;
+    const currentSubtask = subtasks.find((subtask) => subtask.id === editingSubtaskId);
+    const nextTitle = editedSubtaskTitle.trim();
+    if (currentSubtask && nextTitle && nextTitle !== currentSubtask.title) {
+      onSubtaskTitleChange?.(editingSubtaskId, nextTitle);
+    }
+    setEditingSubtaskId(null);
+    setEditedSubtaskTitle("");
+  };
+
+  const handleSubtaskTitleCancel = () => {
+    setEditingSubtaskId(null);
+    setEditedSubtaskTitle("");
+  };
+
+  // Computed values
+  const formattedDueDate = formatDate(dueDate);
+  const formattedExpectedClose = formatDate(expectedClose);
+  const currentPriority = localPriority ?? priority;
+  const dealStageOptions = React.useMemo(() => {
+    if (!dealStage || availableStages.includes(dealStage)) return availableStages;
+    return [dealStage, ...availableStages];
+  }, [availableStages, dealStage]);
+  const selectedDueDate = parseDate(dueDate);
+  const selectedExpectedClose = parseDate(expectedClose);
+  const completedSubtasks = subtasks.filter((s) => s.completed).length;
+
+  return (
+    <>
+      {/* Metadata */}
+      <div className="section-drawer-metadata">
+        {/* Assignee (Default) - uses popover mode */}
+        <AssigneeSelector
+          open={assigneeSelectorOpen}
+          onOpenChange={setAssigneeSelectorOpen}
+          assignees={availableAssignees}
+          selectedId={assignee?.id}
+          onSelect={(selected) => {
+            onAssigneeChange?.(selected);
+          }}
+          mode="popover"
+          align="start"
+        >
+          <div
+            className={`section-drawer-metadata-row ${onAssigneeChange ? "clickable" : ""}`}
+          >
+            <span className="section-drawer-metadata-label">Assignee</span>
+            <div className="section-drawer-metadata-value">
+              {assignee ? (
+                <div className="section-drawer-assignee">
+                  <Avatar size="sm">
+                    {assignee.avatar ? (
+                      <AvatarImage src={assignee.avatar} alt={assignee.name} />
+                    ) : null}
+                    <AvatarFallback>{getInitials(assignee.name)}</AvatarFallback>
+                  </Avatar>
+                  <span>{assignee.name}</span>
+                </div>
+              ) : (
+                <div className="section-drawer-no-assignee">
+                  <div className="section-drawer-empty-avatar">
+                    <User className="size-3" />
+                  </div>
+                  <span className="text-muted-foreground">No assignee</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </AssigneeSelector>
+
+        {/* Due Date (Default) */}
+        <Popover open={dueDatePopoverOpen} onOpenChange={setDueDatePopoverOpen}>
+          <PopoverTrigger asChild>
+            <div className="section-drawer-metadata-row clickable">
+              <span className="section-drawer-metadata-label">Due date</span>
+              <div className="section-drawer-metadata-value">
+                <div className={`section-drawer-due-date ${formattedDueDate.isOverdue ? "overdue" : ""}`}>
+                  <CalendarDays className="size-4" />
+                  <span>{formattedDueDate.text}</span>
+                  {dueDate && (
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      className="section-drawer-clear-btn"
+                      onClick={handleClearDueDate}
+                    >
+                      <X className="size-3" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={selectedDueDate}
+              onSelect={(date) => {
+                onDueDateChange?.(date ?? null);
+                setDueDatePopoverOpen(false);
+              }}
+              initialFocus
+            />
+            {dueDate && (
+              <div className="border-t p-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full text-muted-foreground"
+                  onClick={() => {
+                    onDueDateChange?.(null);
+                    setDueDatePopoverOpen(false);
+                  }}
+                >
+                  Clear date
+                </Button>
+              </div>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* Deals Section (Client + Deal Stage) */}
+      <div className="section-drawer-projects-section">
+        <div className="section-drawer-projects-header">
+          <span className="section-drawer-projects-label">
+            Deals
+            <Badge variant="outline" size="sm" className="ml-2">
+              {client ? 1 : 0}
+            </Badge>
+          </span>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="icon-xs" onClick={onAddDealAssociation}>
+              <Plus className="size-3" />
+            </Button>
+          </div>
+        </div>
+        {/* Client selector row - separate from Deal Stage to avoid click conflicts */}
+        <Popover open={clientSelectorOpen} onOpenChange={setClientSelectorOpen}>
+          <PopoverTrigger asChild>
+            <div className="section-drawer-metadata-row clickable">
+              <span className="section-drawer-metadata-label">Client</span>
+              <div className="section-drawer-metadata-value">
+                <div className="section-drawer-project-item">
+                  {client ? (
+                    <>
+                      <Avatar size="xs">
+                        {client.avatar ? (
+                          <AvatarImage src={client.avatar} alt={client.name} />
+                        ) : null}
+                        <AvatarFallback className="text-xs">{getInitials(client.name)}</AvatarFallback>
+                      </Avatar>
+                      <span className="section-drawer-project-name">{client.name}</span>
+                    </>
+                  ) : (
+                    <span className="text-muted-foreground">Select client</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className="w-64 p-2" align="start">
+            <div className="space-y-1">
+              {availableClients.length > 0 ? (
+                availableClients.map((c) => (
+                  <div
+                    key={c.id}
+                    className="flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-accent"
+                    onClick={() => {
+                      onClientChange?.(c);
+                      setClientSelectorOpen(false);
+                    }}
+                  >
+                    <Avatar size="xs">
+                      {c.avatar ? (
+                        <AvatarImage src={c.avatar} alt={c.name} />
+                      ) : null}
+                      <AvatarFallback className="text-xs">{getInitials(c.name)}</AvatarFallback>
+                    </Avatar>
+                    <span className="text-sm">{c.name}</span>
+                    {client?.id === c.id && <Check className="size-4 ml-auto" />}
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground px-2 py-1">No clients available</p>
+              )}
+              {client && (
+                <>
+                  <Separator className="my-1" />
+                  <div
+                    className="flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-accent text-muted-foreground"
+                    onClick={() => {
+                      onClientChange?.(null);
+                      setClientSelectorOpen(false);
+                    }}
+                  >
+                    <X className="size-4" />
+                    <span className="text-sm">Clear client</span>
+                  </div>
+                </>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+        {/* Deal Stage row - separate from Client to avoid click conflicts */}
+        <div
+          className={`section-drawer-metadata-row ${onDealStageChange ? "clickable" : ""}`}
+          onClick={() => {
+            if (onDealStageChange) {
+              setDealStageSelectOpen(true);
+            }
+          }}
+        >
+          <span className="section-drawer-metadata-label">Deal stage</span>
+          <div className="section-drawer-metadata-value">
+            <Select
+              open={dealStageSelectOpen}
+              onOpenChange={setDealStageSelectOpen}
+              value={dealStage ?? "none"}
+              onValueChange={(val) => onDealStageChange?.(val === "none" ? null : val)}
+              disabled={!onDealStageChange}
+            >
+              <SelectTrigger
+                className="w-auto border-0 bg-transparent h-auto p-0 shadow-none focus:ring-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <SelectValue>
+                  {dealStage ? (
+                    <span>{dealStage}</span>
+                  ) : (
+                    <span className="text-muted-foreground">No stage</span>
+                  )}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent className="z-[11020]" position="popper" align="start">
+                <SelectItem value="none">No stage</SelectItem>
+                {dealStageOptions.map((s) => (
+                  <SelectItem key={s} value={s}>{s}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        {/* Priority inside Deals section */}
+        <div
+          className={`section-drawer-priority-row ${onPriorityChange ? "clickable" : ""}`}
+          onClick={() => {
+            if (onPriorityChange) {
+              setPrioritySelectOpen(true);
+            }
+          }}
+        >
+          <span className="section-drawer-priority-label">Priority</span>
+          <div className="section-drawer-priority-value">
+            <Select
+              open={prioritySelectOpen}
+              onOpenChange={setPrioritySelectOpen}
+              value={currentPriority ?? "none"}
+              onValueChange={handlePriorityChange}
+              disabled={!onPriorityChange}
+            >
+              <SelectTrigger
+                className="w-auto border-0 bg-transparent h-auto p-0 shadow-none focus:ring-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <SelectValue>
+                  {currentPriority ? (
+                    <Badge variant={getPriorityVariant(currentPriority)} size="sm">
+                      {currentPriority}
+                    </Badge>
+                  ) : (
+                    <span className="text-muted-foreground">—</span>
+                  )}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent className="z-[11020]" position="popper" align="start">
+                <SelectItem value="none">No priority</SelectItem>
+                <SelectItem value="High">
+                  <Badge variant="destructive-light" size="sm">High</Badge>
+                </SelectItem>
+                <SelectItem value="Medium">
+                  <Badge variant="warning-light" size="sm">Medium</Badge>
+                </SelectItem>
+                <SelectItem value="Low">
+                  <Badge variant="success-light" size="sm">Low</Badge>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Value and Expected Close (Deals-specific) */}
+      <div className="section-drawer-metadata">
+        {/* Value (Deals-specific) */}
+        {(value !== undefined || onValueChange) && (
+          <div
+            className={`section-drawer-metadata-row ${onValueChange ? "clickable" : ""}`}
+            onClick={handleValueClick}
+          >
+            <span className="section-drawer-metadata-label">Value</span>
+            <div className="section-drawer-metadata-value">
+              {isEditingValue ? (
+                <input
+                  ref={valueInputRef}
+                  type="text"
+                  value={editedValue}
+                  onChange={(e) => setEditedValue(e.target.value)}
+                  onBlur={handleValueBlur}
+                  onKeyDown={handleValueKeyDown}
+                  className="section-drawer-value-input"
+                  placeholder="Enter value"
+                />
+              ) : (
+                <span>{value ? formatCurrency(value, currency) : "—"}</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Expected Close (Deals-specific) - matches Due Date structure exactly */}
+        {(expectedClose !== undefined || onExpectedCloseChange) && (
+          <Popover open={expectedClosePopoverOpen} onOpenChange={setExpectedClosePopoverOpen}>
+            <PopoverTrigger asChild>
+              <div className="section-drawer-metadata-row clickable">
+                <span className="section-drawer-metadata-label">Expected close</span>
+                <div className="section-drawer-metadata-value">
+                  <div className={`section-drawer-due-date ${formattedExpectedClose.isOverdue ? "overdue" : ""}`}>
+                    <CalendarDays className="size-4" />
+                    <span>{formattedExpectedClose.text}</span>
+                    {expectedClose && (
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        className="section-drawer-clear-btn"
+                        onClick={handleClearExpectedClose}
+                      >
+                        <X className="size-3" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={selectedExpectedClose}
+                onSelect={(date) => {
+                  onExpectedCloseChange?.(date ?? null);
+                  setExpectedClosePopoverOpen(false);
+                }}
+                initialFocus
+              />
+              {expectedClose && (
+                <div className="border-t p-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full text-muted-foreground"
+                    onClick={() => {
+                      onExpectedCloseChange?.(null);
+                      setExpectedClosePopoverOpen(false);
+                    }}
+                  >
+                    Clear date
+                  </Button>
+                </div>
+              )}
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* Description (Default) */}
+      <div className="section-drawer-section">
+        <h3 className="section-drawer-section-title">Description</h3>
+        {isEditingDescription ? (
+          <Textarea
+            ref={descriptionRef}
+            value={editedDescription}
+            onChange={(e) => setEditedDescription(e.target.value)}
+            onBlur={handleDescriptionBlur}
+            className="section-drawer-description-textarea"
+            placeholder="What is this task about?"
+          />
+        ) : (
+          <p
+            className="section-drawer-description-placeholder"
+            onClick={handleDescriptionClick}
+            style={{ cursor: onDescriptionChange ? "pointer" : "default" }}
+          >
+            {description || "What is this task about?"}
+          </p>
+        )}
+      </div>
+
+      {/* Subtasks (Default) */}
+      <div className="section-drawer-section" data-testid="subtasks-section">
+        <div className="section-drawer-section-header">
+          <h3
+            className="section-drawer-section-title collapsible"
+            onClick={() => toggleSection("subtasks")}
+          >
+            {collapsedSections.has("subtasks") ? (
+              <ChevronRight className="size-4 section-drawer-section-chevron collapsed" />
+            ) : (
+              <ChevronDown className="size-4 section-drawer-section-chevron" />
+            )}
+            Subtasks
+            <Badge variant="outline" size="sm" className="ml-2">
+              {completedSubtasks}/{subtasks.length}
+            </Badge>
+          </h3>
+          {onAddSubtask && (
+            <Button variant="ghost" size="icon-xs" onClick={onAddSubtask}>
+              <Plus className="size-3" />
+            </Button>
+          )}
+        </div>
+        {!collapsedSections.has("subtasks") && subtasks.length > 0 && (
+          <div className="section-drawer-subtask-list">
+            {subtasks.map((subtask) => {
+              const isEditingSubtask = editingSubtaskId === subtask.id;
+              return (
+                <div
+                  key={subtask.id}
+                  className={`section-drawer-subtask-item ${subtask.completed ? "completed" : ""}`}
+                >
+                  <div
+                    className={`section-drawer-subtask-checkbox ${subtask.completed ? "checked" : ""}`}
+                    onClick={() => onToggleSubtask?.(subtask.id, !subtask.completed)}
+                  >
+                    {subtask.completed && <Check className="size-3" />}
+                  </div>
+                  {isEditingSubtask ? (
+                    <input
+                      ref={subtaskTitleInputRef}
+                      type="text"
+                      value={editedSubtaskTitle}
+                      onChange={(event) => setEditedSubtaskTitle(event.target.value)}
+                      onBlur={() => {
+                        if (subtaskSaveHandledRef.current) {
+                          subtaskSaveHandledRef.current = false;
+                          return;
+                        }
+                        handleSubtaskTitleSave();
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          subtaskSaveHandledRef.current = true;
+                          handleSubtaskTitleSave();
+                        } else if (event.key === "Escape") {
+                          subtaskSaveHandledRef.current = true;
+                          handleSubtaskTitleCancel();
+                        }
+                      }}
+                      className="section-drawer-subtask-title-input"
+                      onClick={(event) => event.stopPropagation()}
+                    />
+                  ) : (
+                    <span
+                      className="section-drawer-subtask-title"
+                      onClick={(event) => event.stopPropagation()}
+                      onDoubleClick={(event) => handleSubtaskTitleDoubleClick(event, subtask)}
+                    >
+                      {subtask.title}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Attachments (Default) */}
+      <div className="section-drawer-section">
+        <div className="section-drawer-section-header">
+          <h3
+            className="section-drawer-section-title collapsible"
+            onClick={() => toggleSection("attachments")}
+          >
+            {collapsedSections.has("attachments") ? (
+              <ChevronRight className="size-4 section-drawer-section-chevron collapsed" />
+            ) : (
+              <ChevronDown className="size-4 section-drawer-section-chevron" />
+            )}
+            Attachments
+            <Badge variant="outline" size="sm" className="ml-2">
+              {attachments.length}
+            </Badge>
+          </h3>
+          {onAddAttachment && (
+            <Button variant="ghost" size="icon-xs" onClick={onAddAttachment}>
+              <Plus className="size-3" />
+            </Button>
+          )}
+        </div>
+        {!collapsedSections.has("attachments") && attachments.length > 0 && (
+          <div className="section-drawer-attachment-list">
+            {attachments.map((attachment) => (
+              <div key={attachment.id} className="section-drawer-attachment-item">
+                <FileText className="size-4" />
+                <span>{attachment.name}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}