José Almeida
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { lazy, Suspense, useState } from "react";
|
|
import { useAppStore } from "@/components/state-provider";
|
|
import { useResponsiveBreakpoint } from "@/hooks/use-responsive-breakpoint";
|
|
|
|
const TaskPicker = lazy(() =>
|
|
import("./session-task-switcher-sheet").then((module) => ({
|
|
default: module.SessionTaskSwitcherSheet,
|
|
})),
|
|
);
|
|
|
|
/** Owns task dialogs above layout changes so rotating a phone preserves drafts. */
|
|
export function ResponsiveTaskPicker({
|
|
workspaceId,
|
|
workflowId,
|
|
}: {
|
|
workspaceId: string | null;
|
|
workflowId: string | null;
|
|
}) {
|
|
const { isMobile } = useResponsiveBreakpoint();
|
|
const open = useAppStore((state) => state.mobileSession.isTaskSwitcherOpen);
|
|
const setOpen = useAppStore((state) => state.setMobileSessionTaskSwitcherOpen);
|
|
const [requested, setRequested] = useState(false);
|
|
const [entry, setEntry] = useState({ open: false, opener: null as HTMLElement | null });
|
|
if (open && !requested) setRequested(true);
|
|
if (entry.open !== open) {
|
|
setEntry({
|
|
open,
|
|
opener:
|
|
open && document.activeElement instanceof HTMLElement
|
|
? document.activeElement
|
|
: entry.opener,
|
|
});
|
|
}
|
|
if (!requested && !open) return null;
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<TaskPicker
|
|
workspaceId={workspaceId}
|
|
workflowId={workflowId}
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
presentation={isMobile ? "drawer" : "sheet"}
|
|
onCloseAutoFocus={(event) => {
|
|
event.preventDefault();
|
|
if (entry.opener?.isConnected) entry.opener.focus({ preventScroll: true });
|
|
}}
|
|
/>
|
|
</Suspense>
|
|
);
|
|
}
|