revert(app): "STUPID SEXY TIMELINE (#16420)" (#16745)

packages/ui/src/components/tool-status-title.tsx

@@ -1,8 +1,17 @@
 import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from "solid-js"
-import { useReducedMotion } from "../hooks/use-reduced-motion"
-import { animate, type AnimationPlaybackControls, GROW_SPRING } from "./motion"
 import { TextShimmer } from "./text-shimmer"
-import { commonPrefix } from "./text-utils"
+
+function common(active: string, done: string) {
+  const a = Array.from(active)
+  const b = Array.from(done)
+  let i = 0
+  while (i < a.length && i < b.length && a[i] === b[i]) i++
+  return {
+    prefix: a.slice(0, i).join(""),
+    active: a.slice(i).join(""),
+    done: b.slice(i).join(""),
+  }
+}
 
 function contentWidth(el: HTMLSpanElement | undefined) {
   if (!el) return 0
@@ -18,58 +27,25 @@ export function ToolStatusTitle(props: {
   class?: string
   split?: boolean
 }) {
-  const reduce = useReducedMotion()
-  const split = createMemo(() => commonPrefix(props.activeText, props.doneText))
+  const split = createMemo(() => common(props.activeText, props.doneText))
   const suffix = createMemo(
-    () =>
-      (props.split ?? true) && split().prefix.length >= 2 && split().aSuffix.length > 0 && split().bSuffix.length > 0,
+    () => (props.split ?? true) && split().prefix.length >= 2 && split().active.length > 0 && split().done.length > 0,
   )
   const prefixLen = createMemo(() => Array.from(split().prefix).length)
-  const activeTail = createMemo(() => (suffix() ? split().aSuffix : props.activeText))
-  const doneTail = createMemo(() => (suffix() ? split().bSuffix : props.doneText))
+  const activeTail = createMemo(() => (suffix() ? split().active : props.activeText))
+  const doneTail = createMemo(() => (suffix() ? split().done : props.doneText))
 
+  const [width, setWidth] = createSignal("auto")
   const [ready, setReady] = createSignal(false)
   let activeRef: HTMLSpanElement | undefined
   let doneRef: HTMLSpanElement | undefined
-  let swapRef: HTMLSpanElement | undefined
-  let tailRef: HTMLSpanElement | undefined
   let frame: number | undefined
   let readyFrame: number | undefined
-  let widthAnim: AnimationPlaybackControls | undefined
-
-  const node = () => (suffix() ? tailRef : swapRef)
-
-  const setNodeWidth = (width: string) => {
-    if (swapRef) swapRef.style.width = width
-    if (tailRef) tailRef.style.width = width
-  }
 
   const measure = () => {
     const target = props.active ? activeRef : doneRef
-    const next = contentWidth(target)
-    if (next <= 0) return
-
-    const ref = node()
-    if (!ref || !ready() || reduce()) {
-      widthAnim?.stop()
-      setNodeWidth(`${next}px`)
-      return
-    }
-
-    const prev = Math.max(0, Math.ceil(ref.getBoundingClientRect().width))
-    if (Math.abs(next - prev) < 1) {
-      ref.style.width = `${next}px`
-      return
-    }
-
-    ref.style.width = `${prev}px`
-    widthAnim?.stop()
-    widthAnim = animate(ref, { width: `${next}px` }, GROW_SPRING)
-    widthAnim.finished.then(() => {
-      const el = node()
-      if (!el) return
-      el.style.width = `${next}px`
-    })
+    const px = contentWidth(target)
+    if (px > 0) setWidth(`${px}px`)
   }
 
   const schedule = () => {
@@ -114,7 +90,6 @@ export function ToolStatusTitle(props: {
   onCleanup(() => {
     if (frame !== undefined) cancelAnimationFrame(frame)
     if (readyFrame !== undefined) cancelAnimationFrame(readyFrame)
-    widthAnim?.stop()
   })
 
   return (
@@ -129,7 +104,7 @@ export function ToolStatusTitle(props: {
       <Show
         when={suffix()}
         fallback={
-          <span data-slot="tool-status-swap" ref={swapRef}>
+          <span data-slot="tool-status-swap" style={{ width: width() }}>
             <span data-slot="tool-status-active" ref={activeRef}>
               <TextShimmer text={activeTail()} active={props.active} offset={0} />
             </span>
@@ -143,7 +118,7 @@ export function ToolStatusTitle(props: {
           <span data-slot="tool-status-prefix">
             <TextShimmer text={split().prefix} active={props.active} offset={0} />
           </span>
-          <span data-slot="tool-status-tail" ref={tailRef}>
+          <span data-slot="tool-status-tail" style={{ width: width() }}>
             <span data-slot="tool-status-active" ref={activeRef}>
               <TextShimmer text={activeTail()} active={props.active} offset={prefixLen()} />
             </span>