chore: cleanup

Author: adamdotdevin

packages/ui/src/components/animated-number.tsx

@@ -1,4 +1,5 @@
-import { For, Index, createEffect, createMemo, createSignal, on } from "solid-js"
+import { For, Index, createEffect, createMemo, on } from "solid-js"
+import { createStore } from "solid-js/store"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
 const DURATION = 600
@@ -14,8 +15,12 @@ function spin(from: number, to: number, direction: 1 | -1) {
 }
 
 function Digit(props: { value: number; direction: 1 | -1 }) {
-  const [step, setStep] = createSignal(props.value + 10)
-  const [animating, setAnimating] = createSignal(false)
+  const [state, setState] = createStore({
+    step: props.value + 10,
+    animating: false,
+  })
+  const step = () => state.step
+  const animating = () => state.animating
   let last = props.value
 
   createEffect(
@@ -25,13 +30,13 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
         const delta = spin(last, next, props.direction)
         last = next
         if (!delta) {
-          setAnimating(false)
-          setStep(next + 10)
+          setState("animating", false)
+          setState("step", next + 10)
           return
         }
 
-        setAnimating(true)
-        setStep((value) => value + delta)
+        setState("animating", true)
+        setState("step", (value) => value + delta)
       },
       { defer: true },
     ),
@@ -43,8 +48,8 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
         data-slot="animated-number-strip"
         data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
-          setAnimating(false)
-          setStep((value) => normalize(value) + 10)
+          setState("animating", false)
+          setState("step", (value) => normalize(value) + 10)
         }}
         style={{
           "--animated-number-offset": `${step()}`,
@@ -63,8 +68,12 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
     return Math.max(0, Math.round(props.value))
   })
 
-  const [value, setValue] = createSignal(target())
-  const [direction, setDirection] = createSignal<1 | -1>(1)
+  const [state, setState] = createStore({
+    value: target(),
+    direction: 1 as 1 | -1,
+  })
+  const value = () => state.value
+  const direction = () => state.direction
 
   createEffect(
     on(
@@ -73,8 +82,8 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
         const current = value()
         if (next === current) return
 
-        setDirection(next > current ? 1 : -1)
-        setValue(next)
+        setState("direction", next > current ? 1 : -1)
+        setState("value", next)
       },
       { defer: true },
     ),

packages/ui/src/components/basic-tool.tsx

@@ -1,5 +1,6 @@
-import { createEffect, createSignal, For, Match, on, onCleanup, Show, Switch, type JSX } from "solid-js"
+import { createEffect, For, Match, on, onCleanup, Show, Switch, type JSX } from "solid-js"
 import { animate, type AnimationPlaybackControls } from "motion"
+import { createStore } from "solid-js/store"
 import { Collapsible } from "./collapsible"
 import type { IconProps } from "./icon"
 import { TextShimmer } from "./text-shimmer"
@@ -37,8 +38,12 @@ export interface BasicToolProps {
 const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
 
 export function BasicTool(props: BasicToolProps) {
-  const [open, setOpen] = createSignal(props.defaultOpen ?? false)
-  const [ready, setReady] = createSignal(open())
+  const [state, setState] = createStore({
+    open: props.defaultOpen ?? false,
+    ready: props.defaultOpen ?? false,
+  })
+  const open = () => state.open
+  const ready = () => state.ready
   const pending = () => props.status === "pending" || props.status === "running"
 
   let frame: number | undefined
@@ -52,7 +57,7 @@ export function BasicTool(props: BasicToolProps) {
   onCleanup(cancel)
 
   createEffect(() => {
-    if (props.forceOpen) setOpen(true)
+    if (props.forceOpen) setState("open", true)
   })
 
   createEffect(
@@ -62,15 +67,15 @@ export function BasicTool(props: BasicToolProps) {
         if (!props.defer) return
         if (!value) {
           cancel()
-          setReady(false)
+          setState("ready", false)
           return
         }
 
         cancel()
         frame = requestAnimationFrame(() => {
           frame = undefined
           if (!open()) return
-          setReady(true)
+          setState("ready", true)
         })
       },
       { defer: true },
@@ -112,7 +117,7 @@ export function BasicTool(props: BasicToolProps) {
   const handleOpenChange = (value: boolean) => {
     if (pending()) return
     if (props.locked && !value) return
-    setOpen(value)
+    setState("open", value)
   }
 
   return (

packages/ui/src/components/line-comment-annotations.tsx

@@ -1,5 +1,6 @@
 import { type DiffLineAnnotation, type SelectedLineRange } from "@pierre/diffs"
 import { createEffect, createMemo, createSignal, onCleanup, Show, type Accessor, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
 import { render as renderSolid } from "solid-js/web"
 import { createHoverCommentUtility } from "../pierre/comment-hover"
 import { cloneSelectedLineRange, formatSelectedLineLabel, lineInSelectedRange } from "../pierre/selection-bridge"
@@ -200,8 +201,14 @@ export function createLineCommentAnnotationRenderer<T>(props: {
 }
 
 export function createLineCommentState<T>(props: LineCommentStateProps<T>) {
-  const [draft, setDraft] = createSignal("")
-  const [editing, setEditing] = createSignal<T | null>(null)
+  const [state, setState] = createStore({
+    draft: "",
+    editing: null as T | null,
+  })
+  const draft = () => state.draft
+  const setDraft = (value: string) => setState("draft", value)
+  const editing = () => state.editing
+  const setEditing = (value: T | null) => setState("editing", typeof value === "function" ? () => value : value)
 
   const toRange = (range: SelectedLineRange | null) => (range ? cloneSelectedLineRange(range) : null)
   const setSelected = (range: SelectedLineRange | null) => {
@@ -261,7 +268,7 @@ export function createLineCommentState<T>(props: LineCommentStateProps<T>) {
     closeComment()
     setSelected(range)
     props.setCommenting(null)
-    setEditing(() => id)
+    setEditing(id)
     setDraft(value)
   }
 

packages/ui/src/components/list.tsx

@@ -1,5 +1,5 @@
 import { type FilteredListProps, useFilteredList } from "@opencode-ai/ui/hooks"
-import { createEffect, createSignal, For, onCleanup, type JSX, on, Show } from "solid-js"
+import { createEffect, For, onCleanup, type JSX, on, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useI18n } from "../context/i18n"
 import { Icon, type IconProps } from "./icon"
@@ -56,12 +56,16 @@ export interface ListRef {
 
 export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void }) {
   const i18n = useI18n()
-  const [scrollRef, setScrollRef] = createSignal<HTMLDivElement | undefined>(undefined)
-  const [internalFilter, setInternalFilter] = createSignal("")
   let inputRef: HTMLInputElement | HTMLTextAreaElement | undefined
   const [store, setStore] = createStore({
     mouseActive: false,
+    scrollRef: undefined as HTMLDivElement | undefined,
+    internalFilter: "",
   })
+  const scrollRef = () => store.scrollRef
+  const setScrollRef = (el: HTMLDivElement | undefined) => setStore("scrollRef", el)
+  const internalFilter = () => store.internalFilter
+  const setInternalFilter = (value: string) => setStore("internalFilter", value)
 
   const scrollIntoView = (container: HTMLDivElement, node: HTMLElement, block: "center" | "nearest") => {
     const containerRect = container.getBoundingClientRect()
@@ -208,18 +212,20 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
   }
 
   function GroupHeader(groupProps: { group: { category: string; items: T[] } }): JSX.Element {
-    const [stuck, setStuck] = createSignal(false)
-    const [header, setHeader] = createSignal<HTMLDivElement | undefined>(undefined)
+    const [state, setState] = createStore({
+      stuck: false,
+      header: undefined as HTMLDivElement | undefined,
+    })
 
     createEffect(() => {
       const scroll = scrollRef()
-      const node = header()
+      const node = state.header
       if (!scroll || !node) return
 
       const handler = () => {
         const rect = node.getBoundingClientRect()
         const scrollRect = scroll.getBoundingClientRect()
-        setStuck(rect.top <= scrollRect.top + 1 && scroll.scrollTop > 0)
+        setState("stuck", rect.top <= scrollRect.top + 1 && scroll.scrollTop > 0)
       }
 
       scroll.addEventListener("scroll", handler, { passive: true })
@@ -228,7 +234,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
     })
 
     return (
-      <div data-slot="list-header" data-stuck={stuck()} ref={setHeader}>
+      <div data-slot="list-header" data-stuck={state.stuck} ref={(el) => setState("header", el)}>
         {props.groupHeader?.(groupProps.group) ?? groupProps.group.category}
       </div>
     )

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

@@ -12,6 +12,7 @@ import {
   Index,
   type JSX,
 } from "solid-js"
+import { createStore } from "solid-js/store"
 import stripAnsi from "strip-ansi"
 import { Dynamic } from "solid-js/web"
 import {
@@ -885,8 +886,12 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
   const data = useData()
   const dialog = useDialog()
   const i18n = useI18n()
-  const [copied, setCopied] = createSignal(false)
-  const [busy, setBusy] = createSignal<"fork" | "revert" | undefined>()
+  const [state, setState] = createStore({
+    copied: false,
+    busy: undefined as "fork" | "revert" | undefined,
+  })
+  const copied = () => state.copied
+  const busy = () => state.busy
 
   const textPart = createMemo(
     () => props.parts?.find((p) => p.type === "text" && !(p as TextPart).synthetic) as TextPart | undefined,
@@ -946,14 +951,14 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
     const content = text()
     if (!content) return
     await navigator.clipboard.writeText(content)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    setState("copied", true)
+    setTimeout(() => setState("copied", false), 2000)
   }
 
   const run = (kind: "fork" | "revert") => {
     const act = kind === "fork" ? props.actions?.fork : props.actions?.revert
     if (!act || busy()) return
-    setBusy(kind)
+    setState("busy", kind)
     void Promise.resolve()
       .then(() =>
         act({
@@ -962,7 +967,7 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
         }),
       )
       .finally(() => {
-        if (busy() === kind) setBusy(undefined)
+        if (busy() === kind) setState("busy", undefined)
       })
   }
 

packages/ui/src/components/popover.tsx

@@ -5,11 +5,11 @@ import {
   ParentProps,
   Show,
   createEffect,
-  createSignal,
   onCleanup,
   splitProps,
   ValidComponent,
 } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useI18n } from "../context/i18n"
 import { IconButton } from "./icon-button"
 
@@ -46,39 +46,40 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
     "modal",
   ])
 
-  const [contentRef, setContentRef] = createSignal<HTMLElement | undefined>(undefined)
-  const [triggerRef, setTriggerRef] = createSignal<HTMLElement | undefined>(undefined)
-  const [dismiss, setDismiss] = createSignal<"escape" | "outside" | null>(null)
-
-  const [uncontrolledOpen, setUncontrolledOpen] = createSignal<boolean>(local.defaultOpen ?? false)
+  const [state, setState] = createStore({
+    contentRef: undefined as HTMLElement | undefined,
+    triggerRef: undefined as HTMLElement | undefined,
+    dismiss: null as "escape" | "outside" | null,
+    uncontrolledOpen: local.defaultOpen ?? false,
+  })
 
   const controlled = () => local.open !== undefined
   const opened = () => {
     if (controlled()) return local.open ?? false
-    return uncontrolledOpen()
+    return state.uncontrolledOpen
   }
 
   const onOpenChange = (next: boolean) => {
-    if (next) setDismiss(null)
+    if (next) setState("dismiss", null)
     if (local.onOpenChange) local.onOpenChange(next)
     if (controlled()) return
-    setUncontrolledOpen(next)
+    setState("uncontrolledOpen", next)
   }
 
   createEffect(() => {
     if (!opened()) return
 
     const inside = (node: Node | null | undefined) => {
       if (!node) return false
-      const content = contentRef()
+      const content = state.contentRef
       if (content && content.contains(node)) return true
-      const trigger = triggerRef()
+      const trigger = state.triggerRef
       if (trigger && trigger.contains(node)) return true
       return false
     }
 
     const close = (reason: "escape" | "outside") => {
-      setDismiss(reason)
+      setState("dismiss", reason)
       onOpenChange(false)
     }
 
@@ -116,16 +117,16 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
 
   const content = () => (
     <Kobalte.Content
-      ref={(el: HTMLElement | undefined) => setContentRef(el)}
+      ref={(el: HTMLElement | undefined) => setState("contentRef", el)}
       data-component="popover-content"
       classList={{
         ...(local.classList ?? {}),
         [local.class ?? ""]: !!local.class,
       }}
       style={local.style}
       onCloseAutoFocus={(event: Event) => {
-        if (dismiss() === "outside") event.preventDefault()
-        setDismiss(null)
+        if (state.dismiss === "outside") event.preventDefault()
+        setState("dismiss", null)
       }}
     >
       {/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
@@ -151,7 +152,7 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
   return (
     <Kobalte gutter={4} {...rest} open={opened()} onOpenChange={onOpenChange} modal={local.modal ?? false}>
       <Kobalte.Trigger
-        ref={(el: HTMLElement) => setTriggerRef(el)}
+        ref={(el: HTMLElement) => setState("triggerRef", el)}
         as={local.triggerAs ?? "div"}
         data-slot="popover-trigger"
         {...(local.triggerProps as any)}