feat: small transitions, spacing, polishing

packages/ui/src/components/button.css

@@ -9,6 +9,7 @@
   user-select: none;
   cursor: default;
   outline: none;
+  padding: 4px 8px;
   white-space: nowrap;
   transition-property: background-color, border-color, color, box-shadow;
   transition-duration: 200ms;
@@ -105,19 +106,15 @@
   }
 
   &[data-size="small"] {
-    height: 22px;
-    padding: 0 8px;
+    padding: 2px 10px;
     &[data-icon] {
       padding: 0 12px 0 4px;
     }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
     gap: 4px;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 166.667% */
@@ -166,3 +163,39 @@
     outline: none;
   }
 }
+
+[data-slot="cycle-text"] {
+  display: inline-flex;
+  perspective: 400px;
+  overflow: hidden;
+
+  [data-slot="char"] {
+    display: inline-block;
+    transform-style: preserve-3d;
+    transform-origin: 50% 100%;
+    transform: rotateX(0deg);
+    opacity: 1;
+    transition:
+      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: calc(var(--i, 0) * 40ms);
+
+    /* Entry animation using @starting-style */
+    @starting-style {
+      transform: rotateX(90deg);
+      opacity: 0;
+    }
+  }
+
+  /* Exit animation when animating */
+  &[data-animating="true"] [data-slot="char"] {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+
+  /* Preserve spaces */
+  [data-slot="space"] {
+    display: inline-block;
+    width: 0.25em;
+  }
+}

packages/ui/src/components/message-nav.css

@@ -2,13 +2,14 @@
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
+  gap: 12px;
   align-items: flex-start;
-  padding-left: 0;
+  padding: 0;
   list-style: none;
 
   &[data-size="normal"] {
     width: 240px;
-    gap: 4px;
+    gap: 8px;
   }
 
   &[data-size="compact"] {
@@ -36,6 +37,7 @@
   border: none;
   background: none;
   padding: 0;
+  margin: 0;
 
   &[data-active] [data-slot="message-nav-tick-line"] {
     background-color: var(--icon-strong-base);
@@ -54,7 +56,8 @@
 
 [data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
   width: 100%;
-  background-color: var(--icon-strong-base);
+  color: var(--text-strong);
+  box-sizing: border-box;
 }
 
 [data-slot="message-nav-message-button"] {
@@ -62,33 +65,38 @@
   align-items: center;
   align-self: stretch;
   width: 100%;
+  color: inherit;
   column-gap: 12px;
   cursor: default;
   border: none;
   background: none;
-  padding: 4px 12px;
+  padding: 0;
   border-radius: var(--radius-sm);
 }
 
 [data-slot="message-nav-title-preview"] {
   font-size: 14px; /* text-14-regular */
-  color: var(--text-weak);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
   text-align: left;
 
+  &:not(:hover) {
+    color: var(--text-weak);
+  }
+
+  &:hover,
   &[data-active] {
     color: var(--text-strong);
   }
 }
 
 [data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
-  background-color: var(--surface-base);
+  color: var(--text-strong);
 }
 [data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
-  background-color: var(--surface-base-active);
+  color: var(--text-base);
 }
 
 [data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
@@ -101,7 +109,7 @@
 
 [data-slot="message-nav-tooltip-content"] {
   display: flex;
-  padding: 4px 4px 6px 4px;
+  padding: 4px;
   justify-content: center;
   align-items: center;
   border-radius: var(--radius-md);

packages/ui/src/components/message-nav.tsx

@@ -2,6 +2,7 @@ import { UserMessage } from "@opencode-ai/sdk/v2"
 import { ComponentProps, For, Match, Show, splitProps, Switch } from "solid-js"
 import { DiffChanges } from "./diff-changes"
 import { Tooltip } from "@kobalte/core/tooltip"
+import { ScrollReveal } from "./scroll-reveal"
 
 export function MessageNav(
   props: ComponentProps<"ul"> & {
@@ -43,14 +44,16 @@ export function MessageNav(
                 </Match>
                 <Match when={local.size === "normal"}>
                   <button data-slot="message-nav-message-button" onClick={handleClick} onKeyDown={handleKeyPress}>
-                    <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                    <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" class="-ml-1" />
                     <div
                       data-slot="message-nav-title-preview"
                       data-active={message.id === local.current?.id || undefined}
                     >
-                      <Show when={local.getLabel?.(message) ?? message.summary?.title} fallback="New message">
-                        {local.getLabel?.(message) ?? message.summary?.title}
-                      </Show>
+                      <ScrollReveal fadeEndSize={12}>
+                        <Show when={local.getLabel?.(message) ?? message.summary?.title} fallback="New message">
+                          {local.getLabel?.(message) ?? message.summary?.title}
+                        </Show>
+                      </ScrollReveal>
                     </div>
                   </button>
                 </Match>

packages/ui/src/components/scroll-fade.css

@@ -3,6 +3,8 @@
   overscroll-behavior: contain;
   scrollbar-width: none;
   box-sizing: border-box;
+  color: inherit;
+  font: inherit;
   -ms-overflow-style: none;
   
   &::-webkit-scrollbar {

packages/ui/src/components/scroll-reveal.tsx

@@ -127,7 +127,7 @@ export function ScrollReveal(props: ScrollRevealProps) {
         local.ref?.(el)
       }}
       fadeStartSize={8}
-      fadeEndSize={16}
+      fadeEndSize={8}
       direction="horizontal"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

packages/ui/src/components/select.css

@@ -1,6 +1,9 @@
 [data-component="select"] {
   [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
+    display: flex;
+    padding: 4px 8px !important;
+    align-items: center;
+    justify-content: space-between;
     box-shadow: none;
     transition: background-color 200ms cubic-bezier(0.25, 0, 0.5, 1);