wip(share): more styling

1 files changed, 23 insertions, 7 deletions

diff --git a/packages/ui/src/components/message-nav.tsx b/packages/ui/src/components/message-nav.tsx
index 8475c3206..333ad3743 100644
--- a/packages/ui/src/components/message-nav.tsx
+++ b/packages/ui/src/components/message-nav.tsx
@@ -2,6 +2,8 @@ import { UserMessage } from "@opencode-ai/sdk"
 import { ComponentProps, createMemo, For, Match, Show, splitProps, Switch } from "solid-js"
 import { DiffChanges } from "./diff-changes"
 import { Spinner } from "./spinner"
+import { HoverCard } from "@kobalte/core/hover-card"
+import { Tooltip } from "@kobalte/core/tooltip"
 
 export function MessageNav(
   props: ComponentProps<"ul"> & {
@@ -17,7 +19,7 @@ export function MessageNav(
     return local.messages?.at(0)
   })
 
-  return (
+  const content = (
     <ul role="list" data-component="message-nav" data-size={local.size} {...others}>
       <For each={local.messages}>
         {(message) => {
@@ -28,13 +30,9 @@ export function MessageNav(
             <li data-slot="message-nav-item">
               <Switch>
                 <Match when={local.size === "compact"}>
-                  <button
-                    data-slot="message-nav-tick-button"
-                    data-active={message.id === local.current?.id || undefined}
-                    onClick={handleClick}
-                  >
+                  <div data-slot="message-nav-tick-button" data-active={message.id === local.current?.id || undefined}>
                     <div data-slot="message-nav-tick-line" />
-                  </button>
+                  </div>
                 </Match>
                 <Match when={local.size === "normal"}>
                   <button data-slot="message-nav-message-button" onClick={handleClick}>
@@ -63,4 +61,22 @@ export function MessageNav(
       </For>
     </ul>
   )
+
+  return (
+    <Switch>
+      <Match when={local.size === "compact"}>
+        <Tooltip openDelay={0} closeDelay={0} placement="top-start" gutter={-65} shift={-16} overlap>
+          <Tooltip.Trigger as="div">{content}</Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content data-slot="message-nav-tooltip">
+              <div data-slot="message-nav-tooltip-content">
+                <MessageNav {...props} size="normal" />
+              </div>
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip>
+      </Match>
+      <Match when={local.size === "normal"}>{content}</Match>
+    </Switch>
+  )
 }