summaryrefslogtreecommitdiffhomepage
path: root/packages/app/src/pages/session/composer
diff options
context:
space:
mode:
Diffstat (limited to 'packages/app/src/pages/session/composer')
-rw-r--r--packages/app/src/pages/session/composer/session-composer-region.tsx65
-rw-r--r--packages/app/src/pages/session/composer/session-todo-dock.tsx62
2 files changed, 27 insertions, 100 deletions
diff --git a/packages/app/src/pages/session/composer/session-composer-region.tsx b/packages/app/src/pages/session/composer/session-composer-region.tsx
index 08746b51a..964bf18dd 100644
--- a/packages/app/src/pages/session/composer/session-composer-region.tsx
+++ b/packages/app/src/pages/session/composer/session-composer-region.tsx
@@ -1,11 +1,10 @@
import { Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useParams } from "@solidjs/router"
import { useSpring } from "@opencode-ai/ui/motion-spring"
import { PromptInput } from "@/components/prompt-input"
import { useLanguage } from "@/context/language"
import { usePrompt } from "@/context/prompt"
import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
+import { useSessionKey } from "@/pages/session/session-layout"
import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
import { SessionQuestionDock } from "@/pages/session/composer/session-question-dock"
import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
@@ -27,29 +26,11 @@ export function SessionComposerRegion(props: {
onRestore: (id: string) => void
}
setPromptDockRef: (el: HTMLDivElement) => void
- visualDuration?: number
- bounce?: number
- dockOpenVisualDuration?: number
- dockOpenBounce?: number
- dockCloseVisualDuration?: number
- dockCloseBounce?: number
- drawerExpandVisualDuration?: number
- drawerExpandBounce?: number
- drawerCollapseVisualDuration?: number
- drawerCollapseBounce?: number
- subtitleDuration?: number
- subtitleTravel?: number
- subtitleEdge?: number
- countDuration?: number
- countMask?: number
- countMaskHeight?: number
- countWidthDuration?: number
}) {
- const params = useParams()
const prompt = usePrompt()
const language = useLanguage()
+ const { sessionKey } = useSessionKey()
- const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
const handoffPrompt = createMemo(() => getSessionHandoff(sessionKey())?.prompt)
const previewPrompt = () =>
@@ -69,9 +50,7 @@ export function SessionComposerRegion(props: {
setSessionHandoff(sessionKey(), { prompt: previewPrompt() })
})
- const [gate, setGate] = createStore({
- ready: false,
- })
+ const [ready, setReady] = createSignal(false)
let timer: number | undefined
let frame: number | undefined
@@ -88,17 +67,17 @@ export function SessionComposerRegion(props: {
createEffect(() => {
sessionKey()
- const ready = props.ready
+ const active = props.ready
const delay = 140
clear()
- setGate("ready", false)
- if (!ready) return
+ setReady(false)
+ if (!active) return
frame = requestAnimationFrame(() => {
frame = undefined
timer = window.setTimeout(() => {
- setGate("ready", true)
+ setReady(true)
timer = undefined
}, delay)
})
@@ -106,22 +85,11 @@ export function SessionComposerRegion(props: {
onCleanup(clear)
- const open = createMemo(() => gate.ready && props.state.dock() && !props.state.closing())
- const config = createMemo(() =>
- open()
- ? {
- visualDuration: props.dockOpenVisualDuration ?? props.visualDuration ?? 0.3,
- bounce: props.dockOpenBounce ?? props.bounce ?? 0,
- }
- : {
- visualDuration: props.dockCloseVisualDuration ?? props.visualDuration ?? 0.3,
- bounce: props.dockCloseBounce ?? props.bounce ?? 0,
- },
- )
- const progress = useSpring(() => (open() ? 1 : 0), config)
+ const open = createMemo(() => ready() && props.state.dock() && !props.state.closing())
+ const progress = useSpring(() => (open() ? 1 : 0), { visualDuration: 0.3, bounce: 0 })
const value = createMemo(() => Math.max(0, Math.min(1, progress())))
const [height, setHeight] = createSignal(320)
- const dock = createMemo(() => (gate.ready && props.state.dock()) || value() > 0.001)
+ const dock = createMemo(() => (ready() && props.state.dock()) || value() > 0.001)
const rolled = createMemo(() => (props.revert?.items.length ? props.revert : undefined))
const lift = createMemo(() => (rolled() ? 18 : 36 * value()))
const full = createMemo(() => Math.max(78, height()))
@@ -213,19 +181,6 @@ export function SessionComposerRegion(props: {
collapseLabel={language.t("session.todo.collapse")}
expandLabel={language.t("session.todo.expand")}
dockProgress={value()}
- visualDuration={props.visualDuration}
- bounce={props.bounce}
- expandVisualDuration={props.drawerExpandVisualDuration}
- expandBounce={props.drawerExpandBounce}
- collapseVisualDuration={props.drawerCollapseVisualDuration}
- collapseBounce={props.drawerCollapseBounce}
- subtitleDuration={props.subtitleDuration}
- subtitleTravel={props.subtitleTravel}
- subtitleEdge={props.subtitleEdge}
- countDuration={props.countDuration}
- countMask={props.countMask}
- countMaskHeight={props.countMaskHeight}
- countWidthDuration={props.countWidthDuration}
/>
</div>
</div>
diff --git a/packages/app/src/pages/session/composer/session-todo-dock.tsx b/packages/app/src/pages/session/composer/session-todo-dock.tsx
index 04aeb6317..baea51593 100644
--- a/packages/app/src/pages/session/composer/session-todo-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-todo-dock.tsx
@@ -7,7 +7,6 @@ import { useSpring } from "@opencode-ai/ui/motion-spring"
import { TextReveal } from "@opencode-ai/ui/text-reveal"
import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough"
import { Index, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
-import { createStore } from "solid-js/store"
function dot(status: Todo["status"]) {
if (status !== "in_progress") return undefined
@@ -39,26 +38,10 @@ export function SessionTodoDock(props: {
title: string
collapseLabel: string
expandLabel: string
- dockProgress?: number
- visualDuration?: number
- bounce?: number
- expandVisualDuration?: number
- expandBounce?: number
- collapseVisualDuration?: number
- collapseBounce?: number
- subtitleDuration?: number
- subtitleTravel?: number
- subtitleEdge?: number
- countDuration?: number
- countMask?: number
- countMaskHeight?: number
- countWidthDuration?: number
+ dockProgress: number
}) {
- const [store, setStore] = createStore({
- collapsed: false,
- })
-
- const toggle = () => setStore("collapsed", (value) => !value)
+ const [collapsed, setCollapsed] = createSignal(false)
+ const toggle = () => setCollapsed((value) => !value)
const total = createMemo(() => props.todos.length)
const done = createMemo(() => props.todos.filter((todo) => todo.status === "completed").length)
@@ -73,19 +56,8 @@ export function SessionTodoDock(props: {
)
const preview = createMemo(() => active()?.content ?? "")
- const config = createMemo(() =>
- store.collapsed
- ? {
- visualDuration: props.collapseVisualDuration ?? props.visualDuration ?? 0.3,
- bounce: props.collapseBounce ?? props.bounce ?? 0,
- }
- : {
- visualDuration: props.expandVisualDuration ?? props.visualDuration ?? 0.3,
- bounce: props.expandBounce ?? props.bounce ?? 0,
- },
- )
- const collapse = useSpring(() => (store.collapsed ? 1 : 0), config)
- const dock = createMemo(() => Math.max(0, Math.min(1, props.dockProgress ?? 1)))
+ const collapse = useSpring(() => (collapsed() ? 1 : 0), { visualDuration: 0.3, bounce: 0 })
+ const dock = createMemo(() => Math.max(0, Math.min(1, props.dockProgress)))
const shut = createMemo(() => 1 - dock())
const value = createMemo(() => Math.max(0, Math.min(1, collapse())))
const hide = createMemo(() => Math.max(value(), shut()))
@@ -133,10 +105,10 @@ export function SessionTodoDock(props: {
class="text-14-regular text-text-strong cursor-default inline-flex items-baseline shrink-0 whitespace-nowrap overflow-visible"
aria-label={label()}
style={{
- "--tool-motion-odometer-ms": `${props.countDuration ?? 600}ms`,
- "--tool-motion-mask": `${props.countMask ?? 18}%`,
- "--tool-motion-mask-height": `${props.countMaskHeight ?? 0}px`,
- "--tool-motion-spring-ms": `${props.countWidthDuration ?? 560}ms`,
+ "--tool-motion-odometer-ms": "600ms",
+ "--tool-motion-mask": "18%",
+ "--tool-motion-mask-height": "0px",
+ "--tool-motion-spring-ms": "560ms",
opacity: `${Math.max(0, Math.min(1, 1 - shut()))}`,
}}
>
@@ -155,10 +127,10 @@ export function SessionTodoDock(props: {
>
<TextReveal
class="text-14-regular text-text-base cursor-default"
- text={store.collapsed ? preview() : undefined}
- duration={props.subtitleDuration ?? 600}
- travel={props.subtitleTravel ?? 25}
- edge={props.subtitleEdge ?? 17}
+ text={collapsed() ? preview() : undefined}
+ duration={600}
+ travel={25}
+ edge={17}
spring="cubic-bezier(0.34, 1, 0.64, 1)"
springSoft="cubic-bezier(0.34, 1, 0.64, 1)"
growOnly
@@ -168,7 +140,7 @@ export function SessionTodoDock(props: {
<div class="ml-auto">
<IconButton
data-action="session-todo-toggle-button"
- data-collapsed={store.collapsed ? "true" : "false"}
+ data-collapsed={collapsed() ? "true" : "false"}
icon="chevron-down"
size="normal"
variant="ghost"
@@ -181,14 +153,14 @@ export function SessionTodoDock(props: {
event.stopPropagation()
toggle()
}}
- aria-label={store.collapsed ? props.expandLabel : props.collapseLabel}
+ aria-label={collapsed() ? props.expandLabel : props.collapseLabel}
/>
</div>
</div>
<div
data-slot="session-todo-list"
- aria-hidden={store.collapsed || off()}
+ aria-hidden={collapsed() || off()}
classList={{
"pointer-events-none": hide() > 0.1,
}}
@@ -197,7 +169,7 @@ export function SessionTodoDock(props: {
opacity: `${Math.max(0, Math.min(1, 1 - hide()))}`,
}}
>
- <TodoList todos={props.todos} open={!store.collapsed} />
+ <TodoList todos={props.todos} open={!collapsed()} />
</div>
</div>
</DockTray>
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-14 11:51:44 +0000