fix(desktop): perf stuff

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

@@ -1,4 +1,4 @@
-import { children, For, Match, Show, Switch, type JSX } from "solid-js"
+import { For, Match, Show, Switch, type JSX } from "solid-js"
 import { Collapsible } from "./collapsible"
 import { Icon, IconProps } from "./icon"
 
@@ -27,7 +27,6 @@ export interface BasicToolProps {
 }
 
 export function BasicTool(props: BasicToolProps) {
-  const resolved = children(() => props.children)
   return (
     <Collapsible defaultOpen={props.defaultOpen}>
       <Collapsible.Trigger>
@@ -81,13 +80,13 @@ export function BasicTool(props: BasicToolProps) {
               </Switch>
             </div>
           </div>
-          <Show when={resolved() && !props.hideDetails}>
+          <Show when={props.children && !props.hideDetails}>
             <Collapsible.Arrow />
           </Show>
         </div>
       </Collapsible.Trigger>
-      <Show when={resolved() && !props.hideDetails}>
-        <Collapsible.Content>{resolved()}</Collapsible.Content>
+      <Show when={props.children && !props.hideDetails}>
+        <Collapsible.Content>{props.children}</Collapsible.Content>
       </Show>
     </Collapsible>
   )

packages/ui/src/components/checkbox.tsx

@@ -1,5 +1,5 @@
 import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
-import { children, Show, splitProps } from "solid-js"
+import { Show, splitProps } from "solid-js"
 import type { ComponentProps, JSX, ParentProps } from "solid-js"
 
 export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
@@ -10,7 +10,6 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte
 
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
-  const resolved = children(() => local.children)
   return (
     <Kobalte {...others} data-component="checkbox">
       <Kobalte.Input data-slot="checkbox-checkbox-input" />
@@ -29,9 +28,9 @@ export function Checkbox(props: CheckboxProps) {
         </Kobalte.Indicator>
       </Kobalte.Control>
       <div data-slot="checkbox-checkbox-content">
-        <Show when={resolved()}>
+        <Show when={props.children}>
           <Kobalte.Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
-            {resolved()}
+            {props.children}
           </Kobalte.Label>
         </Show>
         <Show when={local.description}>

packages/ui/src/components/code.css

@@ -1,3 +1,4 @@
 [data-component="code"] {
+  content-visibility: auto;
   overflow: hidden;
 }

packages/ui/src/components/diff.css

@@ -1,5 +1,5 @@
 [data-component="diff"] {
-  contain: content;
+  content-visibility: auto;
 
   [data-slot="diff-hunk-separator-line-number"] {
     position: sticky;

packages/ui/src/components/switch.tsx

@@ -1,5 +1,5 @@
 import { Switch as Kobalte } from "@kobalte/core/switch"
-import { children, Show, splitProps } from "solid-js"
+import { Show, splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
@@ -9,13 +9,12 @@ export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>>
 
 export function Switch(props: SwitchProps) {
   const [local, others] = splitProps(props, ["children", "class", "hideLabel", "description"])
-  const resolved = children(() => local.children)
   return (
     <Kobalte {...others} data-component="switch">
       <Kobalte.Input data-slot="switch-input" />
-      <Show when={resolved()}>
+      <Show when={local.children}>
         <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
-          {resolved()}
+          {local.children}
         </Kobalte.Label>
       </Show>
       <Show when={local.description}>