{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ios-conversation-list", "title": "iOS conversation list", "description": "The Messages list screen: large title, rows with avatars and previews, search pill, and compose button.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/group-avatar.json", "https://imessage.swerdlow.dev/r/ios-composer.json", "https://imessage.swerdlow.dev/r/ios-nav-bar.json" ], "files": [ { "path": "registry/imessage/ios-conversation-list.tsx", "content": "\"use client\";\n\nimport { useState, type ComponentProps, type CSSProperties, type PointerEvent as ReactPointerEvent } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { IosLargeTitle } from \"@/components/message-ui/ios-nav-bar\";\nimport { IosMicIcon } from \"@/components/message-ui/ios-composer\";\nimport { GroupAvatar, groupAvatarMetrics, type GroupParticipant } from \"@/components/message-ui/group-avatar\";\n\n/**\n * iOS 26 Messages list screen, measured from `references/ios/captures/list-light.png` and\n * `list-dark.png` (402×874). Large title 34pt bold at x 16 (baseline 152); rows 86.67 tall from\n * y 168: avatar Ø45 at x 26 (top +20) with 21pt semibold initials, name 17pt semibold at x 83 with\n * its cap height centered 22.33 below the row top, time 15pt secondary whose ink right edge sits at\n * x 364.0 (native formats it with a narrow no-break space, \"1:48 AM\"), chevron 7×12 at x 378.33,\n * preview 15pt secondary on a 20pt line (up to two lines), 1pt separator from x 83 to 386 at the\n * row bottom. Rows are placed with transforms so their third-point pitch is not snapped to whole pixels. Floating bottom bar: glass search pill x 28–314, y 798–846 (magnifier, \"Search\"\n * 17pt medium, mic) and a Ø48 glass compose button centered (350, 822). Glass shadows are painted\n * on a layer beneath both surfaces.\n *\n * Both bottom-bar surfaces are plain circular capsules: fitting the pill's left cap to\n * |u|^n + |v|^n = 1 over r 24 gives n = 2.045 (rmse 0.058 pt) and the compose circle n = 2.015, so\n * neither uses a continuous corner. Magnifier: ring outer diameter 13.49 centered (54.75, 820.22),\n * stroke 1.73; handle a 45deg stroke 2.47 wide ending at (63.17, 828.77). Its SVG box is placed on\n * a whole pixel (top 14) because Chrome snaps an SVG layer's origin down to the nearest CSS pixel,\n * so the ring and handle carry the sub-pixel offsets instead. Compose glyph: a rounded square\n * whose outer box is exactly 19x19 at (340, 813.33), stroke 1.83, outer corner radius 4.05;\n * pencil a 45deg stroke 2.10 wide. Avatar gradient endpoints are a least-squares fit down the\n * avatar's center column.\n *\n * Neither capture shows these, so they are not measured against pixels: a preview long enough to\n * wrap to two lines, a name or preview long enough to truncate, an unread row, and a row with a\n * finger on it. The last two are read out of ChatKit instead; see `UNREAD` and the note above\n * `--ios-list-highlight`.\n *\n * Nor the glass fill's alpha. Both captures have the last row ending 400pt above the bottom bar, so\n * every point of both surfaces sits over the flat page: sampling their glass-only interiors (the pill\n * left of the magnifier, its mid span, right of the mic, and the compose circle either side of its\n * glyph) gives 255 in light and 25 in dark in the capture and in our render alike, mean signed error\n * 0.00 per channel on all five. That pins the light fill to white at any alpha and the dark fill only\n * to alpha × colour = 25. The 90% is carried over from the nav bar, where the same is true; see the\n * note there. It decides how much of a row scrolled under the bar shows through, which nothing here\n * measures.\n */\nexport type IosConversation = {\n id: string;\n name: string;\n initials?: string;\n /** Contact photo, cropped to the existing circular avatar. */\n photo?: string;\n preview: string;\n time: string;\n unread?: boolean;\n /**\n * The people in a group conversation. Two or more draws `group-avatar.tsx`'s Snowglobe stack on\n * the framework's `conversationListContactImageDiameter` (45 on the phone) instead of the monogram\n * circle; one, or none, keeps the monogram, because native skips `SnowglobeUIView` entirely for a\n * single contact and a lone face must not get a plate.\n */\n members?: readonly GroupParticipant[];\n};\n\nexport type IosConversationListProps = Omit, \"onSelect\"> & {\n conversations: IosConversation[];\n onSelect?: (conversation: IosConversation) => void;\n onCompose?: () => void;\n onSearch?: () => void;\n title?: string;\n /** Space reserved above the title for the status bar. */\n topInset?: number;\n /**\n * The row drawn as though a finger were on it. Controlled; leave it out and the list follows the\n * real pointer, which is what a product wants. It exists so a scenario can hold the highlight\n * still for a screenshot — the state itself is a live pointer's, and a seeked frame has no pointer\n * in it. `null` forces no row, the same as a lifted finger.\n */\n pressedId?: string | null;\n};\n\nconst font = \"-apple-system, BlinkMacSystemFont, sans-serif\";\nconst ROW = 86.6667;\n/**\n * The name is laid out on its ink, not on a line box: `top: 14` with `lineHeight: 1` puts its cap\n * line where the capture's is (ours 183.33 device-pt against the capture's 183.67, one device pixel\n * at 3x). A 17 px line box around a 17 px font is smaller than the font's own ascent + descent\n * though - SF Pro Text asks for about 20.3 - so `truncate`'s `overflow: hidden` was cutting the flat\n * bottom off every descender, which is what the row reads as when the name is crowded by the\n * preview under it. The clip box has to grow without the text moving, so the bleed is added as\n * padding and taken back off `top`: `overflow: hidden` clips at the padding box, padding-block does\n * not touch a left/right-anchored element's width, and the content box stays at 14. 3 covers SF's\n * descender (0.156 em = 2.65 at 17) and its accent room with a little to spare; the row is 86.67\n * tall so nothing else is near enough to collide.\n */\nconst NAME_BLEED = 3;\n/**\n * The unread dot, read out of ChatKit 26.5 rather than a capture: neither list capture contains an\n * unread row, so nothing here is measured against pixels. `-[CKUIBehaviorPhone unreadIndicatorImageViewSize]`\n * is {11, 11}, and `_calculateIndicatorFrameForSize:trailing:displayScale:insets:` puts it at\n * (`conversationListCellLeftMargin` 26 - 11) / 2 horizontally and centred on the row vertically.\n * `shouldUnreadIndicatorChangeOnSelection` is NO on iOS, so unlike macOS the dot never turns white.\n */\nconst UNREAD = 11;\nconst UNREAD_LEFT = 7.5;\n\n/**\n * The touch highlight: what a row fills with while a finger is on it.\n *\n * **No capture holds one** — scanning the row gutter (device column 30) down the whole list of both\n * `list-light.png` and `list-dark.png` returns one flat run, #ffffff for 1900 px and #000000 for\n * 1920 px, so neither capture has a pressed row in it. The colour is read out of ChatKit 26.5\n * instead, and two independent readings agree on it:\n *\n * - `-[CKUITheme conversationListSelectedCellColor]` (the phone theme; there is no `CKUIThemePhone`,\n * the base class *is* it) resolves to **#dcdcdc opaque light / #464646 opaque dark**. The same\n * selector is `#0088ff / #0091ff` on `CKUIThemePad` — iPadOS's persistent blue list selection —\n * and **null** on `CKUIThemeMac`, which is why the Mac's own row fill comes from a capture and not\n * from here. `-[CKUITheme detailsSelectedCellColor]` is the same #dcdcdc / #464646 pair, and a\n * details row has no persistent selection at all, so on the phone this colour is a *tap*\n * highlight, not a selection.\n * - `+[UIBackgroundConfiguration listPlainCellConfiguration]` resolved for a `selected`\n * `UICellConfigurationState` returns the same #dcdcdc / #464646 at both idiom 0 and idiom 5. So\n * the value is UIKit's own plain-list fill and ChatKit is restating it, not overriding it.\n *\n * `CKConversationListCell` is a **`UITableViewCell`** (not a collection-view cell), and its\n * `selectionStyle` is `Default`. A `UITableViewCell` shows its `selectedBackgroundView` for\n * `highlighted` as well as `selected`, which on a phone — where a row is never left selected — is\n * only ever the moment a finger is down. Hence: on at touch-down, off at lift, no fade.\n *\n * The labels do **not** change. `-[CKUIBehaviorPhone useSelectedAppearanceForConversationCellState:\n * traitCollection:]` returns YES for `selected` and **NO for `highlighted` alone** (probed over all\n * four state combinations in both appearances), so nothing in the row goes white under the finger —\n * and the unread dot stays blue for the separate reason already noted above\n * (`shouldUnreadIndicatorChangeOnSelection` is NO on the phone).\n *\n * **UNMEASURED: the separators.** `UITableView` hides the separator at a highlighted row's own\n * bottom edge and the one above it, so the fill reads as one unbroken band; that is the same rule\n * `macos-sidebar.tsx` already records for its selected row. No capture holds it here, because no\n * capture holds a pressed row at all.\n *\n * The two values live in `--ios-list-highlight` in `vars` below.\n */\nconst vars =\n \"[--ios-list-bg:#ffffff] [--ios-list-label:#000000] [--ios-list-secondary:#8a8a8e] [--ios-list-chevron:#c5c5c7] [--ios-list-separator:#e8e8e8] \" +\n \"[--ios-list-glass:rgba(255,255,255,0.9)] [--ios-list-rim:none] [--ios-list-shadow:0_6px_36px_4px_rgba(0,0,0,0.065)] [--ios-list-shadow-round:0_5px_20px_6px_rgba(0,0,0,0.055)] [--ios-list-glyph:#1a1919] [--ios-list-field:#8a8a8e] \" +\n // `--ios-list-highlight` is `conversationListSelectedCellColor` above; the literals stay spelled out\n // here because Tailwind reads these class names out of the source text and cannot see through a\n // template hole.\n \"[--ios-list-avatar-top:#a9c2e1] [--ios-list-avatar-bottom:#747fb9] [--ios-list-unread:#0088ff] [--ios-list-highlight:#dcdcdc] \" +\n \"dark:[--ios-list-bg:#000000] dark:[--ios-list-label:#ffffff] dark:[--ios-list-secondary:#8d8d93] dark:[--ios-list-chevron:#464649] dark:[--ios-list-separator:#2a2a2c] dark:[--ios-list-unread:#0091ff] \" +\n \"dark:[--ios-list-glass:rgba(28,28,28,0.9)] dark:[--ios-list-rim:inset_0_0_0_1px_rgba(255,255,255,0.09)] dark:[--ios-list-shadow:none] dark:[--ios-list-shadow-round:none] dark:[--ios-list-glyph:#f4f3f4] dark:[--ios-list-field:#97979d] \" +\n \"dark:[--ios-list-avatar-top:#575368] dark:[--ios-list-avatar-bottom:#302649] dark:[--ios-list-highlight:#464646]\";\n\n/** `clip` stops the shadow at the midpoint of the 12pt gap toward a neighboring glass element, so the two shadows read as one (they never add up on the device). */\nfunction GlassLayers({ round = false, clip }: { round?: boolean; clip?: \"left\" | \"right\" }) {\n return (\n <>\n \n \n \n );\n}\n\nfunction initialsOf(name: string): string {\n return name.trim().split(/\\s+/).slice(0, 2).map(part => part[0] ?? \"\").join(\"\").toUpperCase();\n}\n\nexport type IosConversationRowProps = Omit, \"onSelect\"> & {\n conversation: IosConversation;\n onSelect?: (conversation: IosConversation) => void;\n pressed?: boolean;\n separator?: boolean;\n};\n\n/** One native-sized row, also usable in a custom list. Inherits the surrounding light/dark theme. */\nexport function IosConversationRow({ conversation, onSelect, pressed, separator = true, className, style,\n onClick, onPointerDown, onPointerUp, onPointerCancel, onPointerLeave, ...props }: IosConversationRowProps) {\n const [held, setHeld] = useState(false);\n const highlighted = pressed ?? held;\n const letters = conversation.initials ?? initialsOf(conversation.name);\n return (\n \n );\n}\n\nexport function IosConversationList({ conversations, onSelect, onCompose, onSearch, title = \"Messages\", topInset = 54, pressedId, className, style, ...props }: IosConversationListProps) {\n /**\n * The row a finger is on. One id rather than a boolean per row so a second pointer cannot leave a\n * stale highlight behind, and so the row above the pressed one can drop its separator.\n */\n const [pressed, setPressed] = useState(null);\n const holding = pressedId !== undefined ? pressedId : pressed;\n const pressedIndex = holding === null ? -1 : conversations.findIndex(item => item.id === holding);\n const release = () => setPressed(current => (current === null ? current : null));\n /**\n * Touch-down lights the row; lift, a cancel and leaving the row all put it out. A drag that turns\n * into a scroll arrives as `pointercancel` — the browser fires it the moment the gesture is taken\n * over for panning — which is `UITableView`'s own rule: a touch that becomes a scroll never\n * highlights. `onScroll` on the scroller is the belt to that brace, for a scroll started by the\n * wheel or the keyboard while a pointer happens to be down.\n *\n * `event.button === 0` keeps a right click from lighting the row. Touch reports button 0.\n *\n * Nothing here focuses anything: a programmatic `focus()` while a touch is still held matches\n * `:focus-visible` in both engines and would paint a ring iOS does not have (see `tapback-bar.tsx`\n * and `audio-recorder.tsx`, which have to work around exactly that). The button keeps its\n * `focus-visible` ring for the keyboard, where it belongs.\n */\n const press = (event: ReactPointerEvent, id: string) => {\n if (event.button === 0) setPressed(id);\n };\n return (\n
\n
\n {title}\n
    \n {conversations.map((conversation, index) => {\n const held = index === pressedIndex;\n // The pressed row's own separator and the one above it go with the fill, so the highlight\n // is one unbroken band. See the note on `--ios-list-highlight`.\n const separated = !held && index !== pressedIndex - 1;\n return (\n
  • \n press(event, conversation.id)} onPointerUp={release} onPointerCancel={release} onPointerLeave={release} />\n
    • \n );\n })}\n
\n
\n
\n \n \n
\n
\n );\n}\n", "type": "registry:ui", "target": "components/message-ui/ios-conversation-list.tsx" } ], "type": "registry:ui" }