Refactor sidebar layout to isolate renders (#278)

Author: 0xroylee

packages/web/src/components/web-shell/operator-chat-sidebar-render-utils.ts

@@ -0,0 +1,13 @@
+import type { OperatorChatSidebarProps } from "./types/operator-chat-sidebar.types";
+
+export function areOperatorChatSidebarPropsEqual(
+	previous: OperatorChatSidebarProps,
+	next: OperatorChatSidebarProps,
+): boolean {
+	return (
+		previous.activeSessionId === next.activeSessionId &&
+		previous.isMobileOpen === next.isMobileOpen &&
+		previous.onCloseMobileSidebar === next.onCloseMobileSidebar &&
+		previous.onSearch === next.onSearch
+	);
+}

packages/web/src/components/web-shell/operator-chat-sidebar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { type ReactElement, useState } from "react";
+import { type ReactElement, memo, useState } from "react";
 import { toast } from "sonner";
 
 import { ChatRoomSidebar } from "@/components/chat-room/chat-room-sidebar";
@@ -15,19 +15,17 @@ import { useCurrentWorkspaceQuery } from "@/lib/api/queries";
 import { useWorkspaceProjectsQuery } from "@/lib/api/realtime-queries";
 import { useRealtimeStore } from "@/lib/realtime";
 
+import { areOperatorChatSidebarPropsEqual } from "./operator-chat-sidebar-render-utils";
+import type { OperatorChatSidebarProps } from "./types/operator-chat-sidebar.types";
+
 const NO_REFETCH = { refetchIntervalMs: false } as const;
 
-export function OperatorChatSidebar({
+function OperatorChatSidebarView({
 	activeSessionId,
 	isMobileOpen,
 	onCloseMobileSidebar,
 	onSearch,
-}: {
-	activeSessionId: string;
-	isMobileOpen: boolean;
-	onCloseMobileSidebar: () => void;
-	onSearch: () => void;
-}): ReactElement {
+}: OperatorChatSidebarProps): ReactElement {
 	const [isSessionSidebarCollapsed, setIsSessionSidebarCollapsed] =
 		useState(false);
 	const router = useRouter();
@@ -114,3 +112,10 @@ export function OperatorChatSidebar({
 		</>
 	);
 }
+
+export const OperatorChatSidebar = memo(
+	OperatorChatSidebarView,
+	areOperatorChatSidebarPropsEqual,
+);
+
+OperatorChatSidebar.displayName = "OperatorChatSidebar";

packages/web/src/components/web-shell/types/operator-chat-sidebar.types.ts

@@ -0,0 +1,6 @@
+export interface OperatorChatSidebarProps {
+	activeSessionId: string;
+	isMobileOpen: boolean;
+	onCloseMobileSidebar: () => void;
+	onSearch: () => void;
+}

packages/web/src/components/web-shell/types/web-operator-layout.types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+
+export interface WebOperatorLayoutProps {
+	children: ReactNode;
+	mobileSidebarTrigger: ReactNode;
+	overlays: ReactNode;
+	sidebar: ReactNode;
+}

packages/web/src/components/web-shell/web-operator-layout.tsx

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+
+import type { WebOperatorLayoutProps } from "./types/web-operator-layout.types";
+
+export function WebOperatorLayout({
+	children,
+	mobileSidebarTrigger,
+	overlays,
+	sidebar,
+}: WebOperatorLayoutProps): ReactElement {
+	return (
+		<main className="relative grid h-[100dvh] max-h-[100dvh] min-w-0 grid-rows-[minmax(0,1fr)] overflow-x-clip bg-background md:grid-cols-[auto_minmax(0,1fr)]">
+			{sidebar}
+			{mobileSidebarTrigger}
+			<div className="min-h-0 min-w-0">{children}</div>
+			{overlays}
+		</main>
+	);
+}

packages/web/src/components/web-shell/web-operator-shell.tsx

@@ -28,6 +28,7 @@ import type {
 	CommandDraftRequest,
 	OperatorIssueActionsContextValue,
 } from "./types/operator-issue-actions.types";
+import { WebOperatorLayout } from "./web-operator-layout";
 import { hrefForNavKey, navItems } from "./web-shell.constants";
 
 function getActiveNavKey(pathname: string): SidebarNavKey {
@@ -126,44 +127,51 @@ export function WebOperatorShell({
 	);
 
 	return (
-		<main className="relative grid h-[100dvh] max-h-[100dvh] min-w-0 grid-rows-[minmax(0,1fr)] overflow-x-clip bg-background md:grid-cols-[auto_minmax(0,1fr)]">
-			<OperatorChatSidebar
-				activeSessionId={activeSessionId}
-				isMobileOpen={isChatSidebarMobileOpen}
-				onCloseMobileSidebar={closeChatSidebar}
-				onSearch={openSearch}
-			/>
-			{!isChatSurface ? (
-				<Button
-					aria-label="Open chat sidebar"
-					className="absolute left-4 top-4 z-20 cursor-pointer md:hidden"
-					onClick={openChatSidebar}
-					size="icon"
-					type="button"
-					variant="ghost"
-				>
-					<PanelLeft size={17} />
-				</Button>
-			) : null}
+		<WebOperatorLayout
+			mobileSidebarTrigger={
+				!isChatSurface ? (
+					<Button
+						aria-label="Open chat sidebar"
+						className="absolute left-4 top-4 z-20 cursor-pointer md:hidden"
+						onClick={openChatSidebar}
+						size="icon"
+						type="button"
+						variant="ghost"
+					>
+						<PanelLeft size={17} />
+					</Button>
+				) : null
+			}
+			overlays={
+				<CommandSearchDialog
+					activeKey={activeNavKey}
+					boardError={searchTasksQuery.error}
+					commandHistory={commandHistoryQuery.data}
+					commandHistoryError={commandHistoryQuery.error}
+					isBoardLoading={searchTasksQuery.isLoading}
+					isCommandHistoryLoading={commandHistoryQuery.isLoading}
+					isOpen={isSearchOpen}
+					navItems={navItems}
+					onClose={() => setIsSearchOpen(false)}
+					onNavigate={navigateToSection}
+					onNewIssue={createIssue}
+					onOpenIssue={openIssue}
+					onSelectCommand={selectChatCommandDraft}
+					tasks={searchTasksQuery.data}
+				/>
+			}
+			sidebar={
+				<OperatorChatSidebar
+					activeSessionId={activeSessionId}
+					isMobileOpen={isChatSidebarMobileOpen}
+					onCloseMobileSidebar={closeChatSidebar}
+					onSearch={openSearch}
+				/>
+			}
+		>
 			<OperatorIssueActionsProvider value={issueActionsValue}>
-				<div className="min-h-0 min-w-0">{children}</div>
+				{children}
 			</OperatorIssueActionsProvider>
-			<CommandSearchDialog
-				activeKey={activeNavKey}
-				boardError={searchTasksQuery.error}
-				commandHistory={commandHistoryQuery.data}
-				commandHistoryError={commandHistoryQuery.error}
-				isBoardLoading={searchTasksQuery.isLoading}
-				isCommandHistoryLoading={commandHistoryQuery.isLoading}
-				isOpen={isSearchOpen}
-				navItems={navItems}
-				onClose={() => setIsSearchOpen(false)}
-				onNavigate={navigateToSection}
-				onNewIssue={createIssue}
-				onOpenIssue={openIssue}
-				onSelectCommand={selectChatCommandDraft}
-				tasks={searchTasksQuery.data}
-			/>
-		</main>
+		</WebOperatorLayout>
 	);
 }

packages/web/tests/operator-chat-sidebar-render-utils.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "bun:test";
+
+import { areOperatorChatSidebarPropsEqual } from "../src/components/web-shell/operator-chat-sidebar-render-utils";
+import type { OperatorChatSidebarProps } from "../src/components/web-shell/types/operator-chat-sidebar.types";
+
+describe("operator chat sidebar render utilities", () => {
+	it("treats ordinary page navigation props as equal", () => {
+		const onCloseMobileSidebar = (): void => {};
+		const onSearch = (): void => {};
+		const previous = buildProps({ onCloseMobileSidebar, onSearch });
+		const next = buildProps({ onCloseMobileSidebar, onSearch });
+
+		expect(areOperatorChatSidebarPropsEqual(previous, next)).toBe(true);
+	});
+
+	it("rerenders when the active chat session changes", () => {
+		const previous = buildProps({ activeSessionId: "session-1" });
+		const next = buildProps({ activeSessionId: "session-2" });
+
+		expect(areOperatorChatSidebarPropsEqual(previous, next)).toBe(false);
+	});
+});
+
+function buildProps(
+	overrides: Partial<OperatorChatSidebarProps> = {},
+): OperatorChatSidebarProps {
+	return {
+		activeSessionId: "",
+		isMobileOpen: false,
+		onCloseMobileSidebar: (): void => {},
+		onSearch: (): void => {},
+		...overrides,
+	};
+}