chore: cleanup (#17284)

This commit is contained in:
Adam
2026-03-13 06:27:58 -05:00
committed by GitHub
parent 46ba9c8170
commit 270cb0b8b4
23 changed files with 516 additions and 357 deletions

View File

@@ -1,5 +1,6 @@
// @ts-nocheck
import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
import { createEffect, createMemo, onCleanup } from "solid-js"
import { createStore } from "solid-js/store"
import type { Todo } from "@opencode-ai/sdk/v2"
import { useGlobalSync } from "@/context/global-sync"
import { SessionComposerRegion, createSessionComposerState } from "@/pages/session/composer"
@@ -129,24 +130,44 @@ const css = `
export const Playground = {
render: () => {
const global = useGlobalSync()
const [open, setOpen] = createSignal(true)
const [step, setStep] = createSignal(1)
const [dockOpenDuration, setDockOpenDuration] = createSignal(0.3)
const [dockOpenBounce, setDockOpenBounce] = createSignal(0)
const [dockCloseDuration, setDockCloseDuration] = createSignal(0.3)
const [dockCloseBounce, setDockCloseBounce] = createSignal(0)
const [drawerExpandDuration, setDrawerExpandDuration] = createSignal(0.3)
const [drawerExpandBounce, setDrawerExpandBounce] = createSignal(0)
const [drawerCollapseDuration, setDrawerCollapseDuration] = createSignal(0.3)
const [drawerCollapseBounce, setDrawerCollapseBounce] = createSignal(0)
const [subtitleDuration, setSubtitleDuration] = createSignal(600)
const [subtitleAuto, setSubtitleAuto] = createSignal(true)
const [subtitleTravel, setSubtitleTravel] = createSignal(25)
const [subtitleEdge, setSubtitleEdge] = createSignal(17)
const [countDuration, setCountDuration] = createSignal(600)
const [countMask, setCountMask] = createSignal(18)
const [countMaskHeight, setCountMaskHeight] = createSignal(0)
const [countWidthDuration, setCountWidthDuration] = createSignal(560)
const [cfg, setCfg] = createStore({
open: true,
step: 1,
dockOpenDuration: 0.3,
dockOpenBounce: 0,
dockCloseDuration: 0.3,
dockCloseBounce: 0,
drawerExpandDuration: 0.3,
drawerExpandBounce: 0,
drawerCollapseDuration: 0.3,
drawerCollapseBounce: 0,
subtitleDuration: 600,
subtitleAuto: true,
subtitleTravel: 25,
subtitleEdge: 17,
countDuration: 600,
countMask: 18,
countMaskHeight: 0,
countWidthDuration: 560,
})
const open = () => cfg.open
const step = () => cfg.step
const dockOpenDuration = () => cfg.dockOpenDuration
const dockOpenBounce = () => cfg.dockOpenBounce
const dockCloseDuration = () => cfg.dockCloseDuration
const dockCloseBounce = () => cfg.dockCloseBounce
const drawerExpandDuration = () => cfg.drawerExpandDuration
const drawerExpandBounce = () => cfg.drawerExpandBounce
const drawerCollapseDuration = () => cfg.drawerCollapseDuration
const drawerCollapseBounce = () => cfg.drawerCollapseBounce
const subtitleDuration = () => cfg.subtitleDuration
const subtitleAuto = () => cfg.subtitleAuto
const subtitleTravel = () => cfg.subtitleTravel
const subtitleEdge = () => cfg.subtitleEdge
const countDuration = () => cfg.countDuration
const countMask = () => cfg.countMask
const countMaskHeight = () => cfg.countMaskHeight
const countWidthDuration = () => cfg.countWidthDuration
const state = createSessionComposerState({ closeMs: () => Math.round(dockCloseDuration() * 1000) })
let frame
let composerRef
@@ -187,7 +208,7 @@ export const Playground = {
const openDock = () => {
clear()
setOpen(true)
setCfg("open", true)
frame = requestAnimationFrame(() => {
pin()
frame = undefined
@@ -196,7 +217,7 @@ export const Playground = {
const closeDock = () => {
clear()
setOpen(false)
setCfg("open", false)
}
const dockOpen = () => open()
@@ -223,7 +244,7 @@ export const Playground = {
}
const cycle = () => {
setStep((value) => (value + 1) % 4)
setCfg("step", (value) => (value + 1) % 4)
}
onCleanup(clear)
@@ -289,7 +310,7 @@ export const Playground = {
Cycle progress ({step()}/3 done)
</button>
{[0, 1, 2, 3].map((value) => (
<button onClick={() => setStep(value)} style={btn(step() === value)}>
<button onClick={() => setCfg("step", value)} style={btn(step() === value)}>
{value} done
</button>
))}
@@ -307,7 +328,7 @@ export const Playground = {
max="1"
step="0.01"
value={dockOpenDuration()}
onInput={(event) => setDockOpenDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("dockOpenDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -324,7 +345,7 @@ export const Playground = {
max="1"
step="0.01"
value={dockOpenBounce()}
onInput={(event) => setDockOpenBounce(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("dockOpenBounce", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -345,7 +366,7 @@ export const Playground = {
max="1"
step="0.01"
value={dockCloseDuration()}
onInput={(event) => setDockCloseDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("dockCloseDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -362,7 +383,7 @@ export const Playground = {
max="1"
step="0.01"
value={dockCloseBounce()}
onInput={(event) => setDockCloseBounce(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("dockCloseBounce", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -383,7 +404,7 @@ export const Playground = {
max="1"
step="0.01"
value={drawerExpandDuration()}
onInput={(event) => setDrawerExpandDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("drawerExpandDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -400,7 +421,7 @@ export const Playground = {
max="1"
step="0.01"
value={drawerExpandBounce()}
onInput={(event) => setDrawerExpandBounce(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("drawerExpandBounce", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -421,7 +442,7 @@ export const Playground = {
max="1"
step="0.01"
value={drawerCollapseDuration()}
onInput={(event) => setDrawerCollapseDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("drawerCollapseDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -438,7 +459,7 @@ export const Playground = {
max="1"
step="0.01"
value={drawerCollapseBounce()}
onInput={(event) => setDrawerCollapseBounce(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("drawerCollapseBounce", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -459,7 +480,7 @@ export const Playground = {
max="1400"
step="10"
value={subtitleDuration()}
onInput={(event) => setSubtitleDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("subtitleDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -473,7 +494,7 @@ export const Playground = {
<input
type="checkbox"
checked={subtitleAuto()}
onInput={(event) => setSubtitleAuto(event.currentTarget.checked)}
onInput={(event) => setCfg("subtitleAuto", event.currentTarget.checked)}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
{subtitleAuto() ? "on" : "off"}
@@ -489,7 +510,7 @@ export const Playground = {
max="40"
step="1"
value={subtitleTravel()}
onInput={(event) => setSubtitleTravel(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("subtitleTravel", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{subtitleTravel()}px</span>
@@ -504,7 +525,7 @@ export const Playground = {
max="40"
step="1"
value={subtitleEdge()}
onInput={(event) => setSubtitleEdge(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("subtitleEdge", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{subtitleEdge()}%</span>
@@ -523,7 +544,7 @@ export const Playground = {
max="1400"
step="10"
value={countDuration()}
onInput={(event) => setCountDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("countDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
@@ -540,7 +561,7 @@ export const Playground = {
max="40"
step="1"
value={countMask()}
onInput={(event) => setCountMask(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("countMask", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{countMask()}%</span>
@@ -555,7 +576,7 @@ export const Playground = {
max="14"
step="1"
value={countMaskHeight()}
onInput={(event) => setCountMaskHeight(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("countMaskHeight", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{countMaskHeight()}px</span>
@@ -570,7 +591,7 @@ export const Playground = {
max="1200"
step="10"
value={countWidthDuration()}
onInput={(event) => setCountWidthDuration(event.currentTarget.valueAsNumber)}
onInput={(event) => setCfg("countWidthDuration", event.currentTarget.valueAsNumber)}
style={{ flex: 1 }}
/>
<span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>