mirror of
https://github.com/NanmiCoder/cc-haha
synced 2026-07-17 13:13:35 +08:00
fix(desktop): restore workspace panel shrinking (#940)
Tested: cd desktop && bun run test -- src/pages/ActiveSession.test.tsx --run Tested: cd desktop && bun run test -- src/stores/workspacePanelStore.test.ts --run Tested: git diff --check Not-tested: bun run check:desktop remains blocked by an unrelated MessageList timestamp assertion and existing TabBar unhandled rejections. Confidence: high Scope-risk: narrow
This commit is contained in:
parent
c324aee51d
commit
c4157a7e90
@ -1441,6 +1441,34 @@ describe('ActiveSession task polling', () => {
|
||||
})
|
||||
|
||||
expect(useWorkspacePanelStore.getState().width).toBe(WORKSPACE_PANEL_DEFAULT_WIDTH + 32)
|
||||
|
||||
vi.spyOn(workbenchPanel, 'getBoundingClientRect').mockReturnValue({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 558,
|
||||
height: 720,
|
||||
top: 0,
|
||||
right: 558,
|
||||
bottom: 720,
|
||||
left: 0,
|
||||
toJSON: () => ({}),
|
||||
})
|
||||
|
||||
act(() => {
|
||||
const pointerDown = createEvent.pointerDown(resizeHandle)
|
||||
Object.defineProperty(pointerDown, 'button', { value: 0 })
|
||||
Object.defineProperty(pointerDown, 'clientX', { value: 100 })
|
||||
fireEvent(resizeHandle, pointerDown)
|
||||
})
|
||||
|
||||
act(() => {
|
||||
const pointerMove = new Event('pointermove')
|
||||
Object.defineProperty(pointerMove, 'clientX', { value: 132 })
|
||||
window.dispatchEvent(pointerMove)
|
||||
window.dispatchEvent(new Event('pointerup'))
|
||||
})
|
||||
|
||||
expect(useWorkspacePanelStore.getState().width).toBe(526)
|
||||
})
|
||||
|
||||
it('does not render the workspace panel when closed or for member sessions', () => {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import type { RefObject } from 'react'
|
||||
import { Target } from 'lucide-react'
|
||||
import {
|
||||
SCHEDULED_TAB_ID,
|
||||
@ -127,7 +128,14 @@ function ActiveGoalStrip({
|
||||
)
|
||||
}
|
||||
|
||||
function WorkspaceResizeHandle() {
|
||||
function getRenderedWorkspacePanelWidth(panelRef: RefObject<HTMLElement>, fallbackWidth: number) {
|
||||
const renderedWidth = panelRef.current?.getBoundingClientRect().width ?? 0
|
||||
return Number.isFinite(renderedWidth) && renderedWidth > 0
|
||||
? renderedWidth
|
||||
: fallbackWidth
|
||||
}
|
||||
|
||||
function WorkspaceResizeHandle({ panelRef }: { panelRef: RefObject<HTMLElement> }) {
|
||||
const t = useTranslation()
|
||||
const width = useWorkspacePanelStore((state) => state.width)
|
||||
const setWidth = useWorkspacePanelStore((state) => state.setWidth)
|
||||
@ -177,16 +185,17 @@ function WorkspaceResizeHandle() {
|
||||
onPointerDown={(event) => {
|
||||
if (event.button !== 0) return
|
||||
event.preventDefault()
|
||||
setDragState({ startX: event.clientX, startWidth: width })
|
||||
setDragState({ startX: event.clientX, startWidth: getRenderedWorkspacePanelWidth(panelRef, width) })
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const renderedWidth = getRenderedWorkspacePanelWidth(panelRef, width)
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault()
|
||||
setWidth(width + WORKSPACE_RESIZE_STEP)
|
||||
setWidth(renderedWidth + WORKSPACE_RESIZE_STEP)
|
||||
}
|
||||
if (event.key === 'ArrowRight') {
|
||||
event.preventDefault()
|
||||
setWidth(width - WORKSPACE_RESIZE_STEP)
|
||||
setWidth(renderedWidth - WORKSPACE_RESIZE_STEP)
|
||||
}
|
||||
}}
|
||||
className="group relative z-10 flex w-2 shrink-0 cursor-col-resize items-stretch justify-center bg-[var(--color-surface)] outline-none focus-visible:bg-[var(--color-surface-container)]"
|
||||
@ -278,6 +287,7 @@ function TerminalResizeHandle() {
|
||||
|
||||
export function ActiveSession() {
|
||||
const isMobileLayout = useMobileViewport() && !isDesktopRuntime()
|
||||
const workbenchPanelRef = useRef<HTMLElement>(null)
|
||||
const activeTabId = useTabStore((s) => s.activeTabId)
|
||||
const [dismissedBackgroundTaskKeysBySession, setDismissedBackgroundTaskKeysBySession] = useState<Record<string, Set<string>>>({})
|
||||
const activeTabType = useTabStore((s) => s.tabs.find((tab) => tab.sessionId === s.activeTabId)?.type ?? null)
|
||||
@ -640,8 +650,9 @@ export function ActiveSession() {
|
||||
|
||||
{showWorkbench ? (
|
||||
<>
|
||||
<WorkspaceResizeHandle />
|
||||
<WorkspaceResizeHandle panelRef={workbenchPanelRef} />
|
||||
<aside
|
||||
ref={workbenchPanelRef}
|
||||
data-testid="workbench-panel"
|
||||
className="flex h-full shrink-0 flex-col border-l border-[var(--color-border)] bg-[var(--color-surface)]"
|
||||
style={{ width: rightPanelWidth, maxWidth: '62%', minWidth: 'min(420px, 54%)' }}
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
} from '../api/sessions'
|
||||
|
||||
export const WORKSPACE_PANEL_DEFAULT_WIDTH = 860
|
||||
export const WORKSPACE_PANEL_MIN_WIDTH = 640
|
||||
export const WORKSPACE_PANEL_MIN_WIDTH = 420
|
||||
export const WORKSPACE_PANEL_MAX_WIDTH = 1120
|
||||
|
||||
export type WorkspacePanelView = 'changed' | 'all'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user