{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "comment-04", "title": "Edit in place", "description": "Your comment turns into its own field to edit, marks itself edited, and leaves an Undo line when deleted", "dependencies": [ "date-fns", "motion" ], "registryDependencies": [ "https://ui.ndekocode.dev/r/animated-size.json", "https://ui.ndekocode.dev/r/avatar.json", "https://ui.ndekocode.dev/r/button.json", "https://ui.ndekocode.dev/r/dropdown-menu.json", "https://ui.ndekocode.dev/r/icons.json", "https://ui.ndekocode.dev/r/textarea.json", "https://ui.ndekocode.dev/r/theme.json", "https://ui.ndekocode.dev/r/use-prefers-reduced-motion.json", "https://ui.ndekocode.dev/r/utils.json" ], "files": [ { "path": "registry/ndeko/components/comment/comment-04.tsx", "content": "'use client';\n\nimport { useRef, useState } from 'react';\n\nimport {\n EllipsisIcon,\n PencilIcon,\n TrashIcon,\n} from '@/registry/ndeko/lib/icons';\nimport { AnimatedSize } from '@/registry/ndeko/ui/animated-size';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/registry/ndeko/ui/dropdown-menu';\nimport { Textarea } from '@/registry/ndeko/ui/textarea';\n\nimport type { CommentItem } from './_parts/comment-model';\nimport { CommentBlock, CommentText, TEXT_ACTION } from './_parts/comment-parts';\nimport { Swap } from './_parts/motion-parts';\nimport { CURRENT_USER_ID } from './_parts/people';\nimport { NOW } from './_parts/time';\n\ntype Mode = 'reading' | 'editing' | 'deleted';\n\nconst CONTEXT: CommentItem = {\n id: 'e1',\n authorId: 'mei',\n at: '2026-11-05T09:48:00',\n body: 'Which date does the file name use, the start of the range or the day of the export?',\n};\n\nconst MINE: CommentItem = {\n id: 'e2',\n authorId: CURRENT_USER_ID,\n at: '2026-11-05T10:20:00',\n body: 'The day of the export, so two exports of the same range never overwrite each other.',\n};\n\nfunction isSaveKey(event: React.KeyboardEvent) {\n const isCommand = event.metaKey || event.ctrlKey;\n return isCommand && event.key === 'Enter';\n}\n\nfunction EditForm({\n initialBody,\n onSave,\n onCancel,\n}: {\n initialBody: string;\n onSave: (body: string) => void;\n onCancel: () => void;\n}) {\n const [draft, setDraft] = useState(initialBody);\n const trimmed = draft.trim();\n const hasText = trimmed.length > 0;\n const isChanged = trimmed !== initialBody;\n const canSave = hasText && isChanged;\n\n function save() {\n if (!canSave) {\n return;\n }\n onSave(trimmed);\n }\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault();\n save();\n }\n\n function handleKeyDown(event: React.KeyboardEvent) {\n if (isSaveKey(event)) {\n event.preventDefault();\n save();\n return;\n }\n if (event.key === 'Escape') {\n event.preventDefault();\n onCancel();\n }\n }\n\n function placeCaretAtEnd(event: React.FocusEvent) {\n const length = event.currentTarget.value.length;\n event.currentTarget.setSelectionRange(length, length);\n }\n\n return (\n
\n setDraft(event.target.value)}\n onKeyDown={handleKeyDown}\n onFocus={placeCaretAtEnd}\n aria-label='Edit your comment'\n className='min-h-16'\n />\n
\n \n Escape to cancel\n \n \n \n
\n \n );\n}\n\nfunction CommentActions({\n triggerRef,\n onEdit,\n onDelete,\n}: {\n triggerRef: React.RefObject;\n onEdit: () => void;\n onDelete: () => void;\n}) {\n return (\n \n \n }\n >\n \n \n \n \n \n Edit\n \n \n \n \n Delete\n \n \n \n );\n}\n\nfunction editedMarkOf(comment: CommentItem) {\n if (!comment.editedAt) {\n return 'original';\n }\n return 'edited';\n}\n\nexport default function Comment04() {\n const [comment, setComment] = useState(MINE);\n const [mode, setMode] = useState('reading');\n const actionsRef = useRef(null);\n const isEdited = Boolean(comment.editedAt);\n\n function backToReading() {\n setMode('reading');\n requestAnimationFrame(() => actionsRef.current?.focus());\n }\n\n function save(body: string) {\n setComment((current) => ({ ...current, body, editedAt: NOW }));\n backToReading();\n }\n\n return (\n
\n
    \n
  • \n \n
    • \n
  • \n \n {mode === 'deleted' && (\n
    \n

    \n You deleted your comment\n

    \n \n Undo\n \n
    \n )}\n {mode !== 'deleted' && (\n \n {isEdited && (edited)}\n \n }\n actions={\n setMode('editing')}\n onDelete={() => setMode('deleted')}\n />\n }\n >\n {mode === 'reading' && }\n {mode === 'editing' && (\n \n )}\n \n )}\n     \n
    • \n
\n
\n );\n}\n", "type": "registry:component", "target": "components/comment/comment-04.tsx" }, { "path": "registry/ndeko/components/comment/_parts/comment-model.ts", "content": "import { CURRENT_USER_ID, PEOPLE } from './people';\nimport { NOW } from './time';\n\nexport type CommentItem = {\n id: string;\n authorId: string;\n at: string;\n body: string;\n editedAt?: string;\n};\n\nexport type Segment = {\n text: string;\n isMention: boolean;\n};\n\nexport const MENTION_TRIGGER = '@';\n\nexport const MENTION_NAMES = PEOPLE.map((person) => person.name);\n\nfunction mentionTokensOf(names: string[]) {\n const tokens = names.map((name) => `${MENTION_TRIGGER}${name}`);\n return tokens.sort((first, second) => second.length - first.length);\n}\n\nfunction pushPlain(segments: Segment[], text: string) {\n if (text.length === 0) {\n return;\n }\n segments.push({ text, isMention: false });\n}\n\n/** Splits a comment into plain text and mentions of known people, written \"@First Last\". */\nexport function segmentsOf(text: string, names: string[] = MENTION_NAMES) {\n const tokens = mentionTokensOf(names);\n const segments: Segment[] = [];\n let plain = '';\n let index = 0;\n while (index < text.length) {\n const token = tokens.find((candidate) => text.startsWith(candidate, index));\n if (token) {\n pushPlain(segments, plain);\n segments.push({ text: token, isMention: true });\n plain = '';\n index += token.length;\n continue;\n }\n plain += text[index];\n index += 1;\n }\n pushPlain(segments, plain);\n return segments;\n}\n\nlet draftCount = 0;\n\n/** A comment the signed-in person just wrote, stamped with the previews' fixed now. */\nexport function draftCommentOf(body: string): CommentItem {\n draftCount += 1;\n return {\n id: `draft-${draftCount}`,\n authorId: CURRENT_USER_ID,\n at: NOW,\n body,\n };\n}\n\nexport function commentWordOf(count: number) {\n if (count === 1) {\n return 'comment';\n }\n return 'comments';\n}\n\nexport function replyWordOf(count: number) {\n if (count === 1) {\n return 'reply';\n }\n return 'replies';\n}\n", "type": "registry:component", "target": "components/comment/_parts/comment-model.ts" }, { "path": "registry/ndeko/components/comment/_parts/comment-parts.tsx", "content": "import { cn } from '@/registry/ndeko/lib/utils';\nimport { Avatar } from '@/registry/ndeko/ui/avatar';\n\nimport { segmentsOf, type CommentItem } from './comment-model';\nimport { actorNameOf, personOf, type Person } from './people';\nimport { relativeTimeOf } from './time';\n\nexport const MENTION_CHIP =\n 'rounded-[4px] bg-primary/10 px-0.5 font-medium text-primary-ink dark:bg-primary/20';\n\nexport const TEXT_ACTION =\n 'text-muted-foreground hover:text-foreground focus-visible:ring-ring/25 inline-flex h-6 cursor-pointer items-center gap-1 rounded-md text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]';\n\nexport function PersonAvatar({\n person,\n className,\n}: {\n person: Person;\n className?: string;\n}) {\n return (\n \n );\n}\n\n/** A comment's words, with each mention of a known person drawn as a tinted chip. */\nexport function CommentText({\n body,\n className,\n}: {\n body: string;\n className?: string;\n}) {\n const segments = segmentsOf(body);\n return (\n \n {segments.map((segment, index) => {\n const key = `${index}-${segment.text}`;\n if (segment.isMention) {\n return (\n \n {segment.text}\n \n );\n }\n return {segment.text};\n })}\n

\n );\n}\n\nexport function CommentMeta({\n comment,\n children,\n}: {\n comment: CommentItem;\n children?: React.ReactNode;\n}) {\n return (\n

\n \n {actorNameOf(comment.authorId)}\n \n \n \n {relativeTimeOf(comment.at)}\n \n {children}\n

\n );\n}\n\ntype CommentBlockProps = {\n comment: CommentItem;\n avatarClassName?: string;\n meta?: React.ReactNode;\n actions?: React.ReactNode;\n children?: React.ReactNode;\n className?: string;\n};\n\n/** Avatar, author and time, then the words aligned under the name. */\nexport function CommentBlock({\n comment,\n avatarClassName,\n meta,\n actions,\n children,\n className,\n}: CommentBlockProps) {\n return (\n
\n \n
\n
\n {meta}\n {actions}\n
\n {children}\n {!children && }\n
\n
\n );\n}\n", "type": "registry:component", "target": "components/comment/_parts/comment-parts.tsx" }, { "path": "registry/ndeko/components/comment/_parts/motion-parts.tsx", "content": "'use client';\n\nimport {\n AnimatePresence,\n motion,\n type MotionProps,\n type Transition,\n type Variants,\n} from 'motion/react';\nimport { useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nexport const EASE_OUT_STRONG: [number, number, number, number] = [\n 0.23, 1, 0.32, 1,\n];\n\nexport const ENTER: Transition = { duration: 0.2, ease: EASE_OUT_STRONG };\n\nexport const EXIT: Transition = { duration: 0.15, ease: EASE_OUT_STRONG };\n\nexport type PresenceProps = Pick<\n MotionProps,\n 'initial' | 'animate' | 'exit' | 'transition'\n>;\n\nconst HEIGHT_PRESENCE: PresenceProps = {\n initial: { height: 0, opacity: 0 },\n animate: { height: 'auto', opacity: 1 },\n exit: { height: 0, opacity: 0, transition: EXIT },\n transition: ENTER,\n};\n\nconst FADE_PRESENCE: PresenceProps = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0, transition: EXIT },\n transition: ENTER,\n};\n\n/** Rows that arrive or leave a list: their height opens and closes so the rows after them slide. */\nexport function heightPresenceOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return FADE_PRESENCE;\n }\n return HEIGHT_PRESENCE;\n}\n\nconst SWAP_TRANSITION: Transition = { duration: 0.15, ease: EASE_OUT_STRONG };\n\nconst SWAP_VARIANTS: Variants = {\n hidden: { opacity: 0, scale: 0.6, filter: 'blur(2px)' },\n shown: { opacity: 1, scale: 1, filter: 'blur(0px)' },\n};\n\nconst FADE_VARIANTS: Variants = {\n hidden: { opacity: 0 },\n shown: { opacity: 1 },\n};\n\nfunction swapVariantsOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return FADE_VARIANTS;\n }\n return SWAP_VARIANTS;\n}\n\ntype SwapProps = {\n swapKey: string;\n children: React.ReactNode;\n className?: string;\n};\n\n/** An icon or a short label that becomes another one in place. */\nexport function Swap({ swapKey, children, className }: SwapProps) {\n const shouldReduceMotion = usePrefersReducedMotion();\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nconst COUNT_SLIDE = 8;\n\nconst COUNT_TRANSITION: Transition = { duration: 0.18, ease: EASE_OUT_STRONG };\n\nconst COUNT_VARIANTS: Variants = {\n enter: (offset: number) => ({ y: offset, opacity: 0 }),\n center: { y: 0, opacity: 1 },\n leave: (offset: number) => ({ y: -offset, opacity: 0 }),\n};\n\nfunction directionOf(previous: number, next: number) {\n if (next < previous) {\n return -1;\n }\n return 1;\n}\n\nfunction offsetOf(direction: number, shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return 0;\n }\n return direction * COUNT_SLIDE;\n}\n\ntype RollingCountProps = {\n value: number;\n /** Writes the value, such as a duration; the digits still roll on the number. */\n format?: (value: number) => string;\n className?: string;\n};\n\nfunction plainNumber(value: number) {\n return String(value);\n}\n\n/** A figure the person just changed: the new digits slide in from the side of the change. */\nexport function RollingCount({\n value,\n format = plainNumber,\n className,\n}: RollingCountProps) {\n const shouldReduceMotion = usePrefersReducedMotion();\n const [previous, setPrevious] = useState(value);\n const [direction, setDirection] = useState(1);\n\n if (previous !== value) {\n setDirection(directionOf(previous, value));\n setPrevious(value);\n }\n\n const offset = offsetOf(direction, shouldReduceMotion);\n\n return (\n \n \n \n {format(value)}\n \n \n \n );\n}\n", "type": "registry:component", "target": "components/comment/_parts/motion-parts.tsx" }, { "path": "registry/ndeko/components/comment/_parts/people.ts", "content": "export type Person = {\n id: string;\n name: string;\n firstName: string;\n};\n\nexport const CURRENT_USER_ID = 'amara';\n\nexport const PEOPLE: Person[] = [\n {\n id: 'amara',\n name: 'Amara Okafor',\n firstName: 'Amara',\n },\n {\n id: 'leo',\n name: 'Léo Martin',\n firstName: 'Léo',\n },\n {\n id: 'sana',\n name: 'Sana Iqbal',\n firstName: 'Sana',\n },\n {\n id: 'tomas',\n name: 'Tomás Rivera',\n firstName: 'Tomás',\n },\n {\n id: 'mei',\n name: 'Mei Lin',\n firstName: 'Mei',\n },\n {\n id: 'jonah',\n name: 'Jonah Brandt',\n firstName: 'Jonah',\n },\n];\n\nexport function personOf(id: string) {\n const found = PEOPLE.find((person) => person.id === id);\n if (found) {\n return found;\n }\n return PEOPLE[0];\n}\n\nexport function isCurrentUser(id: string) {\n return id === CURRENT_USER_ID;\n}\n\nexport function actorNameOf(id: string) {\n if (isCurrentUser(id)) {\n return 'You';\n }\n return personOf(id).name;\n}\n\nexport function currentUser() {\n return personOf(CURRENT_USER_ID);\n}\n", "type": "registry:component", "target": "components/comment/_parts/people.ts" }, { "path": "registry/ndeko/components/comment/_parts/time.ts", "content": "import {\n differenceInCalendarDays,\n differenceInMinutes,\n format,\n parseISO,\n} from 'date-fns';\n\n/** The previews read every time against one fixed moment, so the server and the browser print the same labels. */\nexport const NOW = '2026-11-05T11:00:00';\n\nconst MINUTES_PER_HOUR = 60;\n\nfunction daysBeforeNow(iso: string) {\n return differenceInCalendarDays(parseISO(NOW), parseISO(iso));\n}\n\nexport function relativeTimeOf(iso: string) {\n const minutes = differenceInMinutes(parseISO(NOW), parseISO(iso));\n if (minutes < 1) {\n return 'Just now';\n }\n if (minutes < MINUTES_PER_HOUR) {\n return `${minutes}m ago`;\n }\n const days = daysBeforeNow(iso);\n if (days === 0) {\n const hours = Math.floor(minutes / MINUTES_PER_HOUR);\n return `${hours}h ago`;\n }\n if (days === 1) {\n return 'Yesterday';\n }\n return format(parseISO(iso), 'MMM d');\n}\n\nexport function exactTimeOf(iso: string) {\n return format(parseISO(iso), \"EEE, MMM d 'at' HH:mm\");\n}\n\nexport function clockOf(iso: string) {\n return format(parseISO(iso), 'HH:mm');\n}\n\nexport function dayKeyOf(iso: string) {\n return iso.slice(0, 10);\n}\n\nexport function dayLabelOf(iso: string) {\n const days = daysBeforeNow(iso);\n if (days === 0) {\n return 'Today';\n }\n if (days === 1) {\n return 'Yesterday';\n }\n return format(parseISO(iso), 'EEEE, MMM d');\n}\n\nexport function shortDateOf(iso: string) {\n return format(parseISO(iso), 'MMM d');\n}\n\nexport function durationLabelOf(minutes: number) {\n const hours = Math.floor(minutes / MINUTES_PER_HOUR);\n const rest = minutes % MINUTES_PER_HOUR;\n if (hours === 0) {\n return `${rest}m`;\n }\n if (rest === 0) {\n return `${hours}h`;\n }\n return `${hours}h ${rest}m`;\n}\n\nexport function countLabel(count: number, singular: string, plural: string) {\n if (count === 1) {\n return `${count} ${singular}`;\n }\n return `${count} ${plural}`;\n}\n", "type": "registry:component", "target": "components/comment/_parts/time.ts" } ], "categories": [ "components", "comment" ], "type": "registry:component" }