File size: 2,871 Bytes
abcf568 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import { useRef } from 'react'
import { useI18n } from '../../i18n'
import { StudioPermissionModeModal } from '../commands/ui/StudioPermissionModeModal'
import { StudioSessionHistoryModal } from '../commands/ui/StudioSessionHistoryModal'
import type { StudioCommandPanelHandle } from '../components/StudioCommandPanel'
import { PlotStudioDragOverlay } from './components/PlotStudioDragOverlay'
import { PlotStudioExitConfirmModal } from './components/PlotStudioExitConfirmModal'
import { PlotStudioShellHeader } from './components/PlotStudioShellHeader'
import { PlotStudioWorkspace } from './PlotStudioWorkspace'
import { usePlotStudioDragOverlay } from './hooks/use-plot-studio-drag-overlay'
import { usePlotStudioShell } from './hooks/use-plot-studio-shell'
import type { PlotStudioShellProps } from './types'
export function PlotStudioShell({ onExit, isExiting }: PlotStudioShellProps) {
const { t } = useI18n()
const commandPanelRef = useRef<StudioCommandPanelHandle | null>(null)
const shell = usePlotStudioShell()
const dragOverlay = usePlotStudioDragOverlay({ commandPanelRef })
return (
<>
<div
{...dragOverlay.shellDragBindings}
className={`studio-shell-root relative isolate flex min-h-screen flex-col overflow-y-auto bg-[#fafaf8] px-6 pb-2 pt-7 text-accent antialiased dark:bg-bg-primary dark:text-text-primary sm:px-8 sm:pb-3 sm:pt-8 md:h-screen md:overflow-hidden md:px-10 md:pb-4 md:pt-10 lg:px-12 lg:pb-5 lg:pt-12 ${
isExiting ? 'animate-studio-exit' : 'animate-studio-entrance'
}`}
>
{dragOverlay.isDraggingImages && <PlotStudioDragOverlay />}
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_rgba(66,66,66,0.045),_transparent_52%),radial-gradient(circle_at_bottom_right,_rgba(66,66,66,0.04),_transparent_36%)] dark:bg-[radial-gradient(circle_at_top,_rgba(138,138,138,0.08),_transparent_42%),radial-gradient(circle_at_bottom_right,_rgba(138,138,138,0.05),_transparent_32%)]"
/>
<PlotStudioShellHeader
directory={shell.studio.session?.directory}
onExitClick={() => shell.setConfirmExitOpen(true)}
/>
<PlotStudioWorkspace
commandPanelRef={commandPanelRef}
shell={shell}
onExit={onExit}
interruptPlaceholder={shell.interruptHintActive ? t('studio.interruptPlaceholder') : undefined}
/>
</div>
<StudioPermissionModeModal {...shell.studio.permissionModeModal} />
<StudioSessionHistoryModal {...shell.studio.historyModal} />
<PlotStudioExitConfirmModal
isOpen={shell.confirmExitOpen}
onClose={() => shell.setConfirmExitOpen(false)}
onConfirm={() => {
shell.setConfirmExitOpen(false)
onExit()
}}
/>
</>
)
}
|