From 2d1fb1e711ae35fed713373abc20f5cc11ae483c Mon Sep 17 00:00:00 2001
From: benjaminleonard <benji@oxide.computer>
Date: Mon, 18 May 2026 15:49:08 +0100
Subject: [PATCH] Tab hover animation

---
 app/components/RouteTabs.tsx      | 35 +++++++++++-----------
 app/ui/lib/Tabs.tsx               |  7 +++--
 app/ui/styles/components/Tabs.css | 48 +++++++++++++++++++++++++++----
 3 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/app/components/RouteTabs.tsx b/app/components/RouteTabs.tsx
index 630b59103..739027104 100644
--- a/app/components/RouteTabs.tsx
+++ b/app/components/RouteTabs.tsx
@@ -16,26 +16,26 @@ const selectTab = (e: React.KeyboardEvent<HTMLDivElement>) => {
   // Don't intercept modified arrow keys (Cmd for browser back/forward, etc.)
   if (hasModifier(e)) return
 
-  const target = e.target as HTMLDivElement
-  if (e.key === KEYS.left) {
-    e.stopPropagation()
-    e.preventDefault()
+  const target = e.target as HTMLElement
+  const isArrow = e.key === KEYS.left || e.key === KEYS.right
+  if (!isArrow) return
 
-    const sibling = (target.previousSibling ??
-      target.parentElement!.lastChild!) as HTMLDivElement
-
-    sibling.focus()
-    sibling.click()
-  } else if (e.key === KEYS.right) {
-    e.stopPropagation()
-    e.preventDefault()
+  // Walk only role=tab siblings so non-tab children (e.g. the hover pill) are skipped
+  const tabs = Array.from(
+    target.parentElement!.querySelectorAll<HTMLElement>('[role="tab"]')
+  )
+  const i = tabs.indexOf(target)
+  if (i === -1) return
 
-    const sibling = (target.nextSibling ??
-      target.parentElement!.firstChild!) as HTMLDivElement
+  e.stopPropagation()
+  e.preventDefault()
 
-    sibling.focus()
-    sibling.click()
-  }
+  const next =
+    e.key === KEYS.left
+      ? tabs[(i - 1 + tabs.length) % tabs.length]
+      : tabs[(i + 1) % tabs.length]
+  next.focus()
+  next.click()
 }
 
 export interface RouteTabsProps {
@@ -66,6 +66,7 @@ export function RouteTabs({
         className={cn(sideTabs ? 'ox-side-tabs-list' : 'ox-tabs-list', tabListClassName)}
         onKeyDown={selectTab}
       >
+        {!sideTabs && <span className="ox-tab-pill" aria-hidden="true" />}
         {children}
       </div>
 
diff --git a/app/ui/lib/Tabs.tsx b/app/ui/lib/Tabs.tsx
index 12c48d9d0..f297fd93a 100644
--- a/app/ui/lib/Tabs.tsx
+++ b/app/ui/lib/Tabs.tsx
@@ -22,8 +22,11 @@ export const Tabs = {
       <div>{children}</div>
     </BaseTabs.Tab>
   ),
-  List: ({ className, ...props }: BaseTabs.List.Props) => (
-    <BaseTabs.List {...props} className={cn('ox-tabs-list', className)} />
+  List: ({ className, children, ...props }: BaseTabs.List.Props) => (
+    <BaseTabs.List {...props} className={cn('ox-tabs-list', className)}>
+      <span className="ox-tab-pill" aria-hidden="true" />
+      {children}
+    </BaseTabs.List>
   ),
   Content: ({ className, ...props }: BaseTabs.Panel.Props) => (
     <BaseTabs.Panel {...props} className={cn('ox-tabs-panel', className)} />
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index aa4428a1f..75a72d549 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -8,7 +8,7 @@
 
 /* Tab list container styles */
 .ox-tabs-list {
-  @apply mb-8 flex bg-transparent;
+  @apply relative mb-8 flex bg-transparent;
 }
 
 .ox-tabs-list:after {
@@ -16,6 +16,46 @@
   content: '';
 }
 
+/* Animated hover/focus pill — follows the active tab via CSS anchor positioning.
+   Falls back to a per-tab static bg in browsers without anchor support. */
+.ox-tab-pill {
+  position: absolute;
+  position-anchor: --hover-tab;
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  height: anchor-size(height);
+  @apply bg-hover rounded-md;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    /* On-screen morph between tabs → ease-in-out */
+    left 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
+    top 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
+    width 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
+    height 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
+    /* Color swap when sliding onto/off the active tab */ background-color 150ms ease,
+    /* Enter/exit fade → ease-out */ opacity 120ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ox-tab-pill {
+    transition: none;
+  }
+}
+
+.ox-tabs-list:has(.ox-tab:is(:hover, :focus-visible)) .ox-tab-pill {
+  opacity: 1;
+}
+
+.ox-tabs-list:has(.ox-tab[data-active]:is(:hover, :focus-visible)) .ox-tab-pill {
+  @apply bg-accent-hover;
+}
+
+.ox-tabs-list .ox-tab:is(:hover, :focus-visible) > * {
+  anchor-name: --hover-tab;
+}
+
 /* Panel styles */
 .ox-tabs-panel:focus-visible {
   @apply outline-accent-secondary outline-2 outline-offset-[1rem];
@@ -28,11 +68,7 @@
 
 .ox-tabs-list .ox-tab > * {
   @apply rounded-md bg-transparent px-1.5 py-1;
-}
-
-/* Hover states */
-.ox-tabs-list .ox-tab:hover > * {
-  @apply bg-hover;
+  position: relative; /* sit above the pill */
 }
 
 /* Active states */