@wakastellar/ui 3.2.0 → 3.3.0

package/src/components/waka-doc-version/WakaDocVersion.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocVersion } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDocVersion> = {
+  title: 'Components/Documentation/WakaDocVersion',
+  component: WakaDocVersion,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Version selector dropdown with status badges (latest, stable, beta, rc, deprecated).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocVersion>
+
+const versions = [
+  { id: 'v4.0.0', label: 'v4.0.0', status: 'latest' as const },
+  { id: 'v3.1.0', label: 'v3.1.0', status: 'stable' as const },
+  { id: 'v3.0.0', label: 'v3.0.0' },
+  { id: 'v2.5.0', label: 'v2.5.0', status: 'deprecated' as const },
+  { id: 'v5.0.0-beta', label: 'v5.0.0-beta', status: 'beta' as const },
+]
+
+export const Default: Story = {
+  render: () => {
+    const [current, setCurrent] = React.useState('v4.0.0')
+    return (
+      <WakaDocVersion
+        versions={versions}
+        current={current}
+        onVersionChange={setCurrent}
+      />
+    )
+  },
+}

package/src/components/waka-doc-version/index.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Badge } from "../badge"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select"
+import { Tag } from "lucide-react"
+
+export type VersionStatus = "latest" | "stable" | "beta" | "deprecated" | "rc"
+
+export interface DocVersion {
+  id: string
+  label: string
+  status?: VersionStatus
+}
+
+export interface WakaDocVersionProps {
+  versions: DocVersion[]
+  current: string
+  onVersionChange: (versionId: string) => void
+  className?: string
+}
+
+const STATUS_CONFIG: Record<VersionStatus, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  latest: { label: "Latest", variant: "default" },
+  stable: { label: "Stable", variant: "secondary" },
+  beta: { label: "Beta", variant: "outline" },
+  rc: { label: "RC", variant: "outline" },
+  deprecated: { label: "Deprecated", variant: "destructive" },
+}
+
+export function WakaDocVersion({ versions, current, onVersionChange, className }: WakaDocVersionProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Tag className="h-4 w-4 text-muted-foreground" />
+      <Select value={current} onValueChange={onVersionChange}>
+        <SelectTrigger className="h-8 w-auto min-w-[120px] text-xs">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {versions.map((v) => (
+            <SelectItem key={v.id} value={v.id}>
+              <span className="flex items-center gap-2">
+                {v.label}
+                {v.status && (
+                  <Badge variant={STATUS_CONFIG[v.status].variant} className="text-[10px] px-1.5 py-0">
+                    {STATUS_CONFIG[v.status].label}
+                  </Badge>
+                )}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}

package/src/components/waka-document-flyover/index.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card"
+
+export interface DocumentFlyoverProps {
+  name: string
+  extension: string
+  sizeKb: number
+  lastModified: string
+  author: string
+  onClick: () => void
+}
+
+function DocumentFlyover({ name, extension, sizeKb, lastModified, author, onClick }: DocumentFlyoverProps) {
+  return (
+    <HoverCard openDelay={200}>
+      <HoverCardTrigger asChild>
+        <button
+          onClick={onClick}
+          className="inline-flex items-center justify-center h-7 w-7 rounded-md bg-muted hover:bg-accent transition-colors"
+          aria-label={`Document: ${name}`}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        </button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-56 p-3 text-xs" side="top">
+        <p className="font-medium truncate">{name}.{extension}</p>
+        <p className="text-muted-foreground">{sizeKb} Ko — {lastModified}</p>
+        <p className="text-muted-foreground">par {author}</p>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+export { DocumentFlyover }

package/src/components/waka-document-preview-popup/index.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog"
+
+export interface DocumentVersion {
+  id: string
+  label: string
+  date: string
+}
+
+export interface PreviewDocument {
+  name: string
+  mimeType: string
+  content?: string
+  previewUrl?: string
+  sizeBytes: number
+  uploadedBy: string
+  uploadedAt: string
+}
+
+export interface DocumentPreviewPopupProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  document: PreviewDocument
+  versions?: DocumentVersion[]
+  selectedVersion?: string
+  onVersionChange?: (versionId: string) => void
+  onDownload: (versionId?: string) => void
+}
+
+const TEXT_TYPES = ["text/", "application/json", "application/xml", "application/javascript"]
+const IMAGE_TYPES = ["image/"]
+
+function isTextual(mimeType: string): boolean {
+  return TEXT_TYPES.some((t) => mimeType.startsWith(t)) || mimeType.includes("markdown")
+}
+
+function isImage(mimeType: string): boolean {
+  return IMAGE_TYPES.some((t) => mimeType.startsWith(t))
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} o`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} Ko`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+}
+
+function DocumentPreviewPopup({
+  open, onOpenChange, document: doc, versions, selectedVersion, onVersionChange, onDownload,
+}: DocumentPreviewPopupProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-4xl max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <div className="flex items-center justify-between gap-4">
+            <DialogTitle className="truncate">{doc.name}</DialogTitle>
+            <div className="flex items-center gap-2 shrink-0">
+              {versions && versions.length > 1 && (
+                <select
+                  value={selectedVersion ?? versions[0]?.id}
+                  onChange={(e) => onVersionChange?.(e.target.value)}
+                  className="rounded-md border bg-background px-2 py-1 text-xs"
+                >
+                  {versions.map((v) => (
+                    <option key={v.id} value={v.id}>{v.label} — {v.date}</option>
+                  ))}
+                </select>
+              )}
+              <button
+                onClick={() => onDownload(selectedVersion)}
+                className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+              >
+                Telecharger
+              </button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto rounded-lg border bg-muted/30 p-4 min-h-[300px]">
+          {isTextual(doc.mimeType) && doc.content ? (
+            <pre className="whitespace-pre-wrap text-sm font-mono leading-relaxed">{doc.content}</pre>
+          ) : isImage(doc.mimeType) && doc.previewUrl ? (
+            <img src={doc.previewUrl} alt={doc.name} className="max-w-full h-auto mx-auto rounded" />
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground py-12">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              <p className="text-sm font-medium">Previsualisation non disponible</p>
+              <p className="text-xs">{doc.mimeType} — {formatSize(doc.sizeBytes)}</p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-muted-foreground border-t pt-2">
+          <span>{formatSize(doc.sizeBytes)}</span>
+          <span>Uploade par {doc.uploadedBy} le {doc.uploadedAt}</span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { DocumentPreviewPopup, formatSize }

package/src/components/waka-hour-balance-badge/index.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+export interface HourBalanceBadgeProps {
+  remainingMinutes: number
+  totalMinutes: number
+  className?: string
+}
+
+function formatMinutes(minutes: number): string {
+  const abs = Math.abs(minutes)
+  const h = Math.floor(abs / 60)
+  const m = abs % 60
+  const sign = minutes < 0 ? "-" : ""
+  return m > 0 ? `${sign}${h}h${m.toString().padStart(2, "0")}` : `${sign}${h}h`
+}
+
+function getColorClass(remainingMinutes: number): string {
+  if (remainingMinutes > 600) return "text-green-600 dark:text-green-400"
+  if (remainingMinutes > 300) return "text-orange-500 dark:text-orange-400"
+  return "text-red-600 dark:text-red-400 font-bold"
+}
+
+function HourBalanceBadge({ remainingMinutes, totalMinutes, className }: HourBalanceBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-0.5 text-sm tabular-nums",
+        getColorClass(remainingMinutes),
+        className,
+      )}
+      aria-label={`${formatMinutes(remainingMinutes)} restantes sur ${formatMinutes(totalMinutes)} total`}
+    >
+      <span>{formatMinutes(remainingMinutes)}</span>
+      <span className="text-muted-foreground font-normal">/</span>
+      <span className="text-muted-foreground font-normal">{formatMinutes(totalMinutes)}</span>
+    </span>
+  )
+}
+
+export { HourBalanceBadge, formatMinutes }

package/src/components/waka-hour-consumption-table/index.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { formatMinutes } from "../waka-hour-balance-badge"
+
+export interface HourConsumption {
+  date: string
+  consultant: string
+  reason: string
+  stepName?: string
+  minutes: number
+}
+
+export interface HourConsumptionTableProps {
+  consumptions: HourConsumption[]
+  page: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+function HourConsumptionTable({ consumptions, page, totalPages, onPageChange }: HourConsumptionTableProps) {
+  return (
+    <div className="space-y-2">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b text-xs text-muted-foreground">
+            <th className="text-left p-2">Date</th>
+            <th className="text-left p-2">Consultant</th>
+            <th className="text-left p-2">Motif</th>
+            <th className="text-left p-2">Etape</th>
+            <th className="text-right p-2">Duree</th>
+          </tr>
+        </thead>
+        <tbody>
+          {consumptions.map((c, i) => (
+            <tr key={i} className="border-b hover:bg-muted/30">
+              <td className="p-2 text-xs">{c.date}</td>
+              <td className="p-2">{c.consultant}</td>
+              <td className="p-2 truncate max-w-[200px]">{c.reason}</td>
+              <td className="p-2 text-xs text-muted-foreground">{c.stepName ?? "—"}</td>
+              <td className="p-2 text-right tabular-nums font-medium">{formatMinutes(c.minutes)}</td>
+            </tr>
+          ))}
+          {consumptions.length === 0 && (
+            <tr><td colSpan={5} className="p-4 text-center text-muted-foreground">Aucune consommation</td></tr>
+          )}
+        </tbody>
+      </table>
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <button
+            onClick={() => onPageChange(page - 1)}
+            disabled={page <= 1}
+            className="rounded border px-2 py-1 text-xs disabled:opacity-50 hover:bg-accent"
+          >
+            Precedent
+          </button>
+          <span className="text-xs text-muted-foreground">{page}/{totalPages}</span>
+          <button
+            onClick={() => onPageChange(page + 1)}
+            disabled={page >= totalPages}
+            className="rounded border px-2 py-1 text-xs disabled:opacity-50 hover:bg-accent"
+          >
+            Suivant
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { HourConsumptionTable }

package/src/components/waka-hour-pack-dialog/index.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../dialog"
+
+export interface HourPackDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmit: (hours: number, comment: string) => void
+  isLoading?: boolean
+}
+
+function HourPackDialog({ open, onOpenChange, onSubmit, isLoading }: HourPackDialogProps) {
+  const [hours, setHours] = React.useState(25)
+  const [comment, setComment] = React.useState("")
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (hours < 1 || comment.trim().length < 10) return
+    onSubmit(hours, comment.trim())
+    setHours(25)
+    setComment("")
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Ajouter un pack d'heures</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="text-sm font-medium">Nombre d'heures</label>
+            <input
+              type="number"
+              min={1}
+              value={hours}
+              onChange={(e) => setHours(Math.max(1, parseInt(e.target.value) || 1))}
+              className="mt-1 w-full rounded-md border bg-background px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium">Commentaire (obligatoire, min 10 chars)</label>
+            <textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Ex: Commande initiale Biped du 30 mars 2026"
+              className="mt-1 w-full min-h-[80px] rounded-md border bg-background px-3 py-2 text-sm resize-none"
+            />
+            {comment.length > 0 && comment.length < 10 && (
+              <p className="text-xs text-red-500 mt-1">{10 - comment.length} caracteres restants</p>
+            )}
+          </div>
+          <DialogFooter>
+            <button type="button" onClick={() => onOpenChange(false)} className="rounded-md border px-4 py-2 text-sm hover:bg-accent">
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={hours < 1 || comment.trim().length < 10 || isLoading}
+              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            >
+              Ajouter
+            </button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { HourPackDialog }

package/src/components/waka-project-stats-header/index.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { HourBalanceBadge, formatMinutes } from "../waka-hour-balance-badge"
+
+export interface ProjectStatsHeaderProps {
+  stats: {
+    ppMinutes: number
+    wakaMinutes: number
+    billableMinutes: number
+    billableTotalMinutes: number
+    breakdown?: { role: string; minutes: number }[]
+  }
+  onExpand?: (category: "pp" | "waka" | "billable") => void
+}
+
+function StatPill({
+  label, value, colorClass, onClick,
+}: {
+  label: string; value: React.ReactNode; colorClass: string; onClick?: () => void
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+        "hover:bg-accent",
+        colorClass,
+      )}
+    >
+      <span>{label}</span>
+      <span className="font-bold tabular-nums">{value}</span>
+    </button>
+  )
+}
+
+function ProjectStatsHeader({ stats, onExpand }: ProjectStatsHeaderProps) {
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <StatPill
+        label="PP"
+        value={formatMinutes(stats.ppMinutes)}
+        colorClass="border-emerald-200 text-emerald-700 dark:text-emerald-400"
+        onClick={() => onExpand?.("pp")}
+      />
+      <StatPill
+        label="Waka"
+        value={formatMinutes(stats.wakaMinutes)}
+        colorClass="border-blue-200 text-blue-700 dark:text-blue-400"
+        onClick={() => onExpand?.("waka")}
+      />
+      <StatPill
+        label="Facturables"
+        value={
+          <HourBalanceBadge
+            remainingMinutes={stats.billableTotalMinutes - stats.billableMinutes}
+            totalMinutes={stats.billableTotalMinutes}
+            className="text-xs"
+          />
+        }
+        colorClass="border-amber-200"
+        onClick={() => onExpand?.("billable")}
+      />
+    </div>
+  )
+}
+
+export { ProjectStatsHeader }

package/src/components/waka-step-comment-bubble/index.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card"
+
+export interface RecentComment {
+  author: string
+  content: string
+  date: string
+}
+
+export interface StepCommentBubbleProps {
+  count: number
+  recentComments?: RecentComment[]
+  onClick: () => void
+  className?: string
+}
+
+function StepCommentBubble({ count, recentComments, onClick, className }: StepCommentBubbleProps) {
+  const hasComments = count > 0
+
+  const button = (
+    <button
+      onClick={onClick}
+      className={cn(
+        "relative inline-flex items-center justify-center h-8 w-8 rounded-full transition-colors",
+        hasComments
+          ? "bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400"
+          : "bg-muted text-muted-foreground hover:bg-accent",
+        className,
+      )}
+      aria-label={`${count} commentaire${count !== 1 ? "s" : ""}`}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
+      {hasComments && (
+        <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold text-white">
+          {count > 9 ? "9+" : count}
+        </span>
+      )}
+    </button>
+  )
+
+  if (!recentComments?.length) return button
+
+  return (
+    <HoverCard openDelay={200}>
+      <HoverCardTrigger asChild>{button}</HoverCardTrigger>
+      <HoverCardContent className="w-72 p-3" side="top">
+        <div className="space-y-2">
+          {recentComments.slice(0, 3).map((c, i) => (
+            <div key={i} className="text-xs">
+              <div className="flex justify-between text-muted-foreground">
+                <span className="font-medium">{c.author}</span>
+                <span>{c.date}</span>
+              </div>
+              <p className="line-clamp-2 mt-0.5">{c.content}</p>
+            </div>
+          ))}
+          {count > 3 && (
+            <p className="text-xs text-muted-foreground text-center">
+              +{count - 3} autre{count - 3 > 1 ? "s" : ""}
+            </p>
+          )}
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+export { StepCommentBubble }

package/src/components/waka-step-comment-panel/index.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../sheet"
+import { ActorBadge } from "../waka-actor-badge"
+
+export interface StepComment {
+  id: string
+  authorName: string
+  authorRole: string
+  content: string
+  createdAt: string
+  isEdited: boolean
+}
+
+export interface StepCommentPanelProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  comments: StepComment[]
+  onAdd: (content: string) => void
+  onEdit?: (id: string, content: string) => void
+  onDelete?: (id: string) => void
+  canEditDelete?: boolean
+  isLoading?: boolean
+}
+
+function StepCommentPanel({
+  open, onOpenChange, comments, onAdd, onEdit, onDelete, canEditDelete, isLoading,
+}: StepCommentPanelProps) {
+  const [draft, setDraft] = React.useState("")
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!draft.trim()) return
+    onAdd(draft.trim())
+    setDraft("")
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="flex flex-col w-full sm:max-w-md">
+        <SheetHeader>
+          <SheetTitle>Commentaires ({comments.length})</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-3 py-4">
+          {comments.length === 0 && (
+            <p className="text-sm text-muted-foreground text-center py-8">Aucun commentaire</p>
+          )}
+          {comments.map((c) => (
+            <div key={c.id} className="rounded-lg border p-3 space-y-1.5">
+              <div className="flex items-center justify-between">
+                <ActorBadge role={c.authorRole} name={c.authorName} />
+                <span className="text-xs text-muted-foreground">{c.createdAt}</span>
+              </div>
+              <p className="text-sm whitespace-pre-wrap">{c.content}</p>
+              <div className="flex items-center gap-2">
+                {c.isEdited && <span className="text-xs text-muted-foreground italic">(modifie)</span>}
+                {canEditDelete && onEdit && (
+                  <button
+                    className="text-xs text-blue-600 hover:underline"
+                    onClick={() => {
+                      const newContent = prompt("Modifier le commentaire:", c.content)
+                      if (newContent && newContent !== c.content) onEdit(c.id, newContent)
+                    }}
+                  >
+                    Modifier
+                  </button>
+                )}
+                {canEditDelete && onDelete && (
+                  <button
+                    className="text-xs text-red-600 hover:underline"
+                    onClick={() => {
+                      if (confirm("Supprimer ce commentaire ?")) onDelete(c.id)
+                    }}
+                  >
+                    Supprimer
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <form onSubmit={handleSubmit} className="border-t pt-3 flex gap-2">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder="Ajouter un commentaire..."
+            className="flex-1 min-h-[60px] rounded-md border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+            disabled={isLoading}
+          />
+          <button
+            type="submit"
+            disabled={!draft.trim() || isLoading}
+            className="self-end rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+          >
+            Envoyer
+          </button>
+        </form>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { StepCommentPanel }