| 4 | import { Tooltip } from "@kobalte/core/tooltip" |
| 5 | |
| 6 | export function MessageNav( |
| 7 | props: ComponentProps<"ul"> & { |
| 8 | messages: UserMessage[] |
| 9 | current?: UserMessage |
| 10 | size: "normal" | "compact" |
| 11 | onMessageSelect: (message: UserMessage) => void |
| 12 | }, |
| 13 | ) { |
| 14 | const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect"]) |
| 15 | |
| 16 | const content = () => ( |
| 17 | <ul role="list" data-component="message-nav" data-size={local.size} {...others}> |
| 18 | <For each={local.messages}> |
| 19 | {(message) => { |
| 20 | const handleClick = () => local.onMessageSelect(message) |
| 21 | |
| 22 | return ( |
| 23 | <li data-slot="message-nav-item"> |
| 24 | <Switch> |
| 25 | <Match when={local.size === "compact"}> |
| 26 | <div data-slot="message-nav-tick-button" data-active={message.id === local.current?.id || undefined}> |
| 27 | <div data-slot="message-nav-tick-line" /> |
| 28 | </div> |
| 29 | </Match> |
| 30 | <Match when={local.size === "normal"}> |
| 31 | <button data-slot="message-nav-message-button" onClick={handleClick}> |
| 32 | <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" /> |
| 33 | <div |
| 34 | data-slot="message-nav-title-preview" |
| 35 | data-active={message.id === local.current?.id || undefined} |
| 36 | > |
| 37 | <Show when={message.summary?.title} fallback="New message"> |
| 38 | {message.summary?.title} |
| 39 | </Show> |
| 40 | </div> |
| 41 | </button> |
| 42 | </Match> |
| 43 | </Switch> |
| 44 | </li> |
| 45 | ) |
| 46 | }} |
| 47 | </For> |
| 48 | </ul> |
| 49 | ) |
| 50 | |
| 51 | return ( |
| 52 | <Switch> |
| 53 | <Match when={local.size === "compact"}> |
| 54 | <Tooltip openDelay={0} closeDelay={300} placement="right-start" gutter={-40} shift={-10} overlap> |
| 55 | <Tooltip.Trigger as="div">{content()}</Tooltip.Trigger> |
| 56 | <Tooltip.Portal> |
| 57 | <Tooltip.Content data-slot="message-nav-tooltip"> |
| 58 | <div data-slot="message-nav-tooltip-content"> |
| 59 | <MessageNav {...props} size="normal" class="" /> |
| 60 | </div> |
| 61 | </Tooltip.Content> |
| 62 | </Tooltip.Portal> |
| 63 | </Tooltip> |