{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "comment-07", "title": "Unread marker", "description": "A count of new comments above the first unread one, cleared with Mark as read", "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/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-07.tsx", "content": "'use client';\n\nimport { AnimatePresence, motion } 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';\nimport { AnimatedSize } from '@/registry/ndeko/ui/animated-size';\nimport { Button } from '@/registry/ndeko/ui/button';\n\nimport { commentWordOf, type CommentItem } from './_parts/comment-model';\nimport { CommentBlock } from './_parts/comment-parts';\nimport { heightPresenceOf, Swap } from './_parts/motion-parts';\n\nconst LAST_READ_AT = '2026-11-05T09:30:00';\n\nconst COMMENTS: CommentItem[] = [\n {\n id: 'u1',\n authorId: 'sana',\n at: '2026-11-05T08:55:00',\n body: 'I put the column picker behind a setting for now.',\n },\n {\n id: 'u2',\n authorId: 'leo',\n at: '2026-11-05T09:12:00',\n body: 'Thanks, I will turn it on for the billing team only.',\n },\n {\n id: 'u3',\n authorId: 'tomas',\n at: '2026-11-05T10:05:00',\n body: '@Amara Okafor the time zone fix is in review. Dates now follow the account setting.',\n },\n {\n id: 'u4',\n authorId: 'mei',\n at: '2026-11-05T10:40:00',\n body: 'The download button is in. It reads the range from the filter above the table.',\n },\n];\n\nfunction isAfter(at: string, reference: string) {\n return at.localeCompare(reference) > 0;\n}\n\nfunction readStateKeyOf(hasUnread: boolean) {\n if (hasUnread) {\n return 'unread';\n }\n return 'read';\n}\n\nfunction NewMarker({ count }: { count: number }) {\n const shouldReduceMotion = usePrefersReducedMotion();\n return (\n \n

\n \n {count} new\n \n \n since your last visit\n \n

\n \n );\n}\n\nfunction rowsOf(\n lastReadAt: string,\n firstUnreadId: string | undefined,\n unreadCount: number\n) {\n const rows: React.ReactNode[] = [];\n for (const comment of COMMENTS) {\n const isUnread = isAfter(comment.at, lastReadAt);\n if (comment.id === firstUnreadId) {\n rows.push();\n }\n rows.push(\n \n \n {isUnread && Unread}\n \n );\n }\n return rows;\n}\n\nexport default function Comment07() {\n const [lastReadAt, setLastReadAt] = useState(LAST_READ_AT);\n const unread = COMMENTS.filter((comment) => isAfter(comment.at, lastReadAt));\n const unreadCount = unread.length;\n const hasUnread = unreadCount > 0;\n const firstUnreadId = unread[0]?.id;\n const latest = COMMENTS[COMMENTS.length - 1];\n\n return (\n
\n
\n

\n Comments{' '}\n \n {COMMENTS.length}\n \n

\n \n \n {hasUnread && (\n setLastReadAt(latest.at)}\n >\n Mark {unreadCount} {commentWordOf(unreadCount)} as read\n \n )}\n {!hasUnread && (\n \n All caught up\n \n )}\n \n \n
\n
    \n \n {rowsOf(lastReadAt, firstUnreadId, unreadCount)}\n \n
\n
\n );\n}\n", "type": "registry:component", "target": "components/comment/comment-07.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" }