wip(share): more styling

3 files changed, 68 insertions, 31 deletions

diff --git a/packages/ui/src/components/fonts.tsx b/packages/ui/src/components/fonts.tsx
index ff4fb7588..0b28e8f3c 100644
--- a/packages/ui/src/components/fonts.tsx
+++ b/packages/ui/src/components/fonts.tsx
@@ -1,6 +1,6 @@
 import { Style, Link } from "@solidjs/meta"
 import geist from "../assets/fonts/geist.woff2"
-import geistMono from "../assets/fonts/geist-mono.woff2"
+import tx02 from "../assets/fonts/tx-02.woff2"
 
 export const Fonts = () => {
   return (
@@ -22,14 +22,14 @@ export const Fonts = () => {
           line-gap-override: 1%;
         }
         @font-face {
-          font-family: "Geist Mono";
-          src: url("${geistMono}") format("woff2-variations");
+          font-family: "Berkeley Mono";
+          src: url("${tx02}") format("woff2-variations");
           font-display: swap;
           font-style: normal;
-          font-weight: 100 900;
+          font-weight: 400 700;
         }
         @font-face {
-          font-family: "Geist Mono Fallback";
+          font-family: "Berkeley Mono Fallback";
           src: local("Courier New");
           size-adjust: 100%;
           ascent-override: 97%;
@@ -38,7 +38,7 @@ export const Fonts = () => {
         }
       `}</Style>
       <Link rel="preload" href={geist} as="font" type="font/woff2" crossorigin="anonymous" />
-      <Link rel="preload" href={geistMono} as="font" type="font/woff2" crossorigin="anonymous" />
+      <Link rel="preload" href={tx02} as="font" type="font/woff2" crossorigin="anonymous" />
     </>
   )
 }
diff --git a/packages/ui/src/components/message-nav.css b/packages/ui/src/components/message-nav.css
index 6e9d96a26..57316fbde 100644
--- a/packages/ui/src/components/message-nav.css
+++ b/packages/ui/src/components/message-nav.css
@@ -1,6 +1,4 @@
 [data-component="message-nav"] {
-  /* margin-right: 32px; */
-  /* margin-top: 12px; */
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -9,15 +7,8 @@
   list-style: none;
 
   &[data-size="normal"] {
-    position: absolute;
-    right: 100%;
     width: 240px;
-    /* margin-top: 12px; */
-
-    @media (min-width: 80rem) {
-      gap: 8px;
-      /* margin-top: 4px; */
-    }
+    gap: 4px;
   }
 }
 
@@ -36,10 +27,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  height: 8px;
-  width: 32px;
-  /* margin-right: -12px; */
-  cursor: pointer;
+  height: 12px;
+  width: 24px;
   border: none;
   background: none;
   padding: 0;
@@ -52,7 +41,7 @@
 
 [data-slot="message-nav-tick-line"] {
   height: 1px;
-  width: 20px;
+  width: 16px;
   background-color: var(--icon-base);
   transition:
     width 0.2s,
@@ -69,11 +58,12 @@
   align-items: center;
   align-self: stretch;
   width: 100%;
-  column-gap: 8px;
+  column-gap: 12px;
   cursor: default;
   border: none;
   background: none;
-  padding: 0;
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
 }
 
 [data-slot="message-nav-title-preview"] {
@@ -90,6 +80,37 @@
   }
 }
 
-[data-slot="message-nav-item"]:hover [data-slot="message-nav-title-preview"] {
+[data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base);
+}
+[data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base-active);
+}
+
+[data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
   color: var(--text-base);
 }
+
+[data-slot="message-nav-tooltip"] {
+  z-index: 1000;
+}
+
+[data-slot="message-nav-tooltip-content"] {
+  display: flex;
+  padding: 4px 4px 6px 4px;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+
+  /* border/shadow-xs/base */
+  box-shadow:
+    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+  * {
+    margin: 0 !important;
+  }
+}
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>
+  )
 }