From c60cb6c329dd52a6b8a3f80eda9000d528398228 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Mon, 24 Nov 2025 14:52:32 -0600
Subject: wip(share): more styling

---
 packages/ui/src/components/message-nav.tsx |  7 +++----
 packages/ui/src/components/tabs.tsx        | 18 ++++++++++++++++--
 2 files changed, 19 insertions(+), 6 deletions(-)

(limited to 'packages/ui/src/components')

diff --git a/packages/ui/src/components/message-nav.tsx b/packages/ui/src/components/message-nav.tsx
index 333ad3743..9d56ce1a6 100644
--- a/packages/ui/src/components/message-nav.tsx
+++ b/packages/ui/src/components/message-nav.tsx
@@ -2,7 +2,6 @@ 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(
@@ -19,7 +18,7 @@ export function MessageNav(
     return local.messages?.at(0)
   })
 
-  const content = (
+  const content = () => (
     <ul role="list" data-component="message-nav" data-size={local.size} {...others}>
       <For each={local.messages}>
         {(message) => {
@@ -66,7 +65,7 @@ export function MessageNav(
     <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.Trigger as="div">{content()}</Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content data-slot="message-nav-tooltip">
               <div data-slot="message-nav-tooltip-content">
@@ -76,7 +75,7 @@ export function MessageNav(
           </Tooltip.Portal>
         </Tooltip>
       </Match>
-      <Match when={local.size === "normal"}>{content}</Match>
+      <Match when={local.size === "normal"}>{content()}</Match>
     </Switch>
   )
 }
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index e3363bdd5..68acd88d4 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -5,6 +5,9 @@ import type { ComponentProps, ParentProps } from "solid-js"
 export interface TabsProps extends ComponentProps<typeof Kobalte> {}
 export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
 export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  classes?: {
+    button?: string
+  }
   hideCloseButton?: boolean
   closeButton?: JSX.Element
 }
@@ -39,7 +42,14 @@ function TabsList(props: TabsListProps) {
 }
 
 function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "closeButton", "hideCloseButton"])
+  const [split, rest] = splitProps(props, [
+    "class",
+    "classList",
+    "classes",
+    "children",
+    "closeButton",
+    "hideCloseButton",
+  ])
   return (
     <div
       data-slot="tabs-tabs-trigger-wrapper"
@@ -48,7 +58,11 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Kobalte.Trigger {...rest} data-slot="tabs-tabs-trigger" class="group/tab">
+      <Kobalte.Trigger
+        {...rest}
+        data-slot="tabs-tabs-trigger"
+        classList={{ "group/tab": true, [split.classes?.button ?? ""]: split.classes?.button }}
+      >
         {split.children}
       </Kobalte.Trigger>
       <Show when={split.closeButton}>
-- 
cgit v1.2.3