Split codebase (#455)

apps/yaak-client/components/WebsocketRequestLayout.tsx

@@ -0,0 +1,49 @@
+import type { WebsocketRequest } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+
+import { SplitLayout } from "@yaakapp-internal/ui";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { WebsocketRequestPane } from "./WebsocketRequestPane";
+import { WebsocketResponsePane } from "./WebsocketResponsePane";
+
+interface Props {
+  activeRequest: WebsocketRequest;
+  style: CSSProperties;
+}
+
+export function WebsocketRequestLayout({ activeRequest, style }: Props) {
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const wsId = activeWorkspace?.id ?? "n/a";
+  return (
+    <SplitLayout
+      storageKey={`websocket_layout::${wsId}`}
+      className="p-3 gap-1.5"
+      layout={workspaceLayout}
+      style={style}
+      firstSlot={({ orientation, style }) => (
+        <WebsocketRequestPane
+          style={style}
+          activeRequest={activeRequest}
+          fullHeight={orientation === "horizontal"}
+        />
+      )}
+      secondSlot={({ style }) => (
+        <div
+          style={style}
+          className={classNames(
+            "x-theme-responsePane",
+            "max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1",
+            "bg-surface rounded-md border border-border-subtle",
+            "shadow relative",
+          )}
+        >
+          <WebsocketResponsePane activeRequest={activeRequest} />
+        </div>
+      )}
+    />
+  );
+}