{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comment-thread-2",
  "title": "Side Panel",
  "description": "Side Panel for Comment Thread.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "card",
    "empty",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/intents/collaboration/comment-thread/comment-thread-2.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, MessageSquare } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyMedia,\n  EmptyTitle,\n} from '@/components/ui/empty'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\ntype Thread = {\n  id: string\n  name: string\n  avatar: string\n  anchor: string\n  text: string\n  count: number\n}\n\nconst THREADS: Thread[] = [\n  {\n    id: 't1',\n    name: 'Ada Lovelace',\n    avatar:\n      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop&crop=faces',\n    anchor: 'Executive summary',\n    text: 'Can we lead with the revenue number instead?',\n    count: 3,\n  },\n  {\n    id: 't2',\n    name: 'Alan Turing',\n    avatar:\n      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=128&h=128&fit=crop&crop=faces',\n    anchor: 'Roadmap, Q3',\n    text: 'This milestone slipped, should we move it?',\n    count: 1,\n  },\n  {\n    id: 't3',\n    name: 'Grace Hopper',\n    avatar:\n      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=128&h=128&fit=crop&crop=faces',\n    anchor: 'Pricing table',\n    text: 'Typo in the enterprise tier.',\n    count: 2,\n  },\n]\n\nexport function CommentThread2() {\n  const [filter, setFilter] = useState('open')\n  const [open, setOpen] = useState<Thread[]>(THREADS)\n  const [resolved, setResolved] = useState<Thread[]>([])\n\n  const resolve = (id: string) => {\n    const item = open.find((t) => t.id === id)\n    if (!item) return\n    setOpen((prev) => prev.filter((t) => t.id !== id))\n    setResolved((prev) => [...prev, item])\n  }\n\n  const list = filter === 'open' ? open : resolved\n\n  return (\n    <Card>\n      <CardHeader className=\"gap-3\">\n        <CardTitle className=\"flex items-center gap-2\">\n          <MessageSquare className=\"size-4\" />\n          Comments\n        </CardTitle>\n        <ToggleGroup\n          value={filter ? [filter] : []}\n          onValueChange={(v) => v[0] && setFilter(v[0])}\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"w-full\"\n        >\n          <ToggleGroupItem value=\"open\" className=\"flex-1\">\n            Open ({open.length})\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"resolved\" className=\"flex-1\">\n            Resolved ({resolved.length})\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-3\">\n        {list.length === 0 ? (\n          <Empty className=\"py-8\">\n            <EmptyMedia variant=\"icon\">\n              <Check className=\"size-5\" />\n            </EmptyMedia>\n            <EmptyTitle>Nothing here</EmptyTitle>\n            <EmptyDescription>\n              {filter === 'open'\n                ? 'Every thread is resolved.'\n                : 'No resolved threads yet.'}\n            </EmptyDescription>\n          </Empty>\n        ) : (\n          list.map((thread) => (\n            <div\n              key={thread.id}\n              className=\"hover:bg-muted/50 flex flex-col gap-2 rounded-lg border p-3\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <Avatar className=\"size-6\">\n                  <AvatarImage src={thread.avatar} alt={thread.name} />\n                  <AvatarFallback className=\"bg-muted text-[10px]\">\n                    {thread.name\n                      .split(' ')\n                      .map((n) => n[0])\n                      .join('')}\n                  </AvatarFallback>\n                </Avatar>\n                <span className=\"text-sm font-medium\">{thread.name}</span>\n                <span className=\"text-muted-foreground ml-auto text-xs\">\n                  {thread.count} replies\n                </span>\n              </div>\n              <span className=\"text-muted-foreground text-xs\">\n                on {thread.anchor}\n              </span>\n              <p className=\"text-sm\">{thread.text}</p>\n              {filter === 'open' && (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"self-end\"\n                  onClick={() => resolve(thread.id)}\n                >\n                  Mark as resolved\n                </Button>\n              )}\n            </div>\n          ))\n        )}\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/comment-thread/comment-thread-2.tsx"
    }
  ],
  "type": "registry:block"
}