ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-04-14 12:44:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): review panel transition

Browse Source
This commit is contained in:
Adam
2026-03-07 13:27:40 -06:00
parent a52d640c8c
commit a32b76dee0
1 changed files with 6 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/app/src/pages/session/session-side-panel.tsx
View File

@@ -55,11 +55,6 @@ export function SessionSidePanel(props: {
if (reviewOpen()) return `calc(100% - ${layout.session.width()}px)` if (reviewOpen()) return `calc(100% - ${layout.session.width()}px)`
return `${layout.fileTree.width()}px` return `${layout.fileTree.width()}px`
}) })
const reviewWidth = createMemo(() => {
if (!reviewOpen()) return "0px"
if (!fileOpen()) return "100%"
return `calc(100% - ${layout.fileTree.width()}px)`
})
const treeWidth = createMemo(() => (fileOpen() ? `${layout.fileTree.width()}px` : "0px")) const treeWidth = createMemo(() => (fileOpen() ? `${layout.fileTree.width()}px` : "0px"))
const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined)) const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
@@ -231,9 +226,8 @@ export function SessionSidePanel(props: {
inert={!open()} inert={!open()}
class="relative min-w-0 h-full flex shrink-0 overflow-hidden bg-background-base" class="relative min-w-0 h-full flex shrink-0 overflow-hidden bg-background-base"
classList={{ classList={{
"opacity-100": open(), "pointer-events-none": !open(),
"opacity-0 pointer-events-none": !open(), "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
"transition-[width,opacity] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
!props.size.active(), !props.size.active(),
}} }}
style={{ width: panelWidth() }} style={{ width: panelWidth() }}
@@ -242,14 +236,10 @@ export function SessionSidePanel(props: {
<div <div
aria-hidden={!reviewOpen()} aria-hidden={!reviewOpen()}
inert={!reviewOpen()} inert={!reviewOpen()}
class="relative min-w-0 h-full shrink-0 overflow-hidden bg-background-base" class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
classList={{ classList={{
"opacity-100": reviewOpen(), "pointer-events-none": !reviewOpen(),
"opacity-0 pointer-events-none": !reviewOpen(),
"transition-[width,opacity] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
!props.size.active(),
}} }}
style={{ width: reviewWidth() }}
> >
<div class="size-full min-w-0 h-full bg-background-base"> <div class="size-full min-w-0 h-full bg-background-base">
<DragDropProvider <DragDropProvider
@@ -385,9 +375,8 @@ export function SessionSidePanel(props: {
inert={!fileOpen()} inert={!fileOpen()}
class="relative min-w-0 h-full shrink-0 overflow-hidden" class="relative min-w-0 h-full shrink-0 overflow-hidden"
classList={{ classList={{
"opacity-100": fileOpen(), "pointer-events-none": !fileOpen(),
"opacity-0 pointer-events-none": !fileOpen(), "transition-[width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
"transition-[width,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
!props.size.active(), !props.size.active(),
}} }}
style={{ width: treeWidth() }} style={{ width: treeWidth() }}