authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-18 22:58:28-08:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-02-18 23:54:48-08:00
log6356b3ca6dbf9389edab055dfa1d7b5ad454df0f
tree6525e20db9df8aa34cc29d99f4d00c15c152e094
parent978c8101395ee76cd507241ecec89f467adc4b04

Restore diff panel activity and worker pool wrapper

Co-authored-by: codex <codex@users.noreply.github.com>

1 files changed, 63 insertions(+), 2 deletions(-)

apps/web/src/routes/_chat.tsx+63-2
...@@ -1,17 +1,78 @@...@@ -1,17 +1,78 @@
1import { Outlet, createFileRoute } from "@tanstack/react-router";1import { Outlet, createFileRoute } from "@tanstack/react-router";
2import { Activity, Suspense, lazy, type ReactNode } from "react";
23
3import DiffPanel from "../components/DiffPanel";
4import Sidebar from "../components/Sidebar";4import Sidebar from "../components/Sidebar";
5import { useMediaQuery } from "../hooks/useMediaQuery";
5import { useStore } from "../store";6import { useStore } from "../store";
7import { Sheet, SheetPopup } from "../components/ui/sheet";
8
9const DiffPanel = lazy(() => import("../components/DiffPanel"));
10const DiffWorkerPoolProvider = lazy(() =>
11 import("../components/DiffPanel").then((module) => ({
12 default: module.DiffWorkerPoolProvider,
13 })),
14);
15const DIFF_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 1180px)";
16
17const DiffPanelWrapper = (props: { children: ReactNode; sheet: boolean }) => {
18 const { state, dispatch } = useStore();
19 if (props.sheet) {
20 return (
21 <Sheet
22 open={state.diffOpen}
23 onOpenChange={(open) => {
24 if (!open) {
25 dispatch({ type: "CLOSE_DIFF" });
26 }
27 }}
28 >
29 <SheetPopup
30 side="right"
31 showCloseButton={false}
32 keepMounted
33 className="w-[min(88vw,820px)] max-w-[820px] p-0"
34 >
35 {props.children}
36 </SheetPopup>
37 </Sheet>
38 );
39 }
40
41 return (
42 <aside className={state.diffOpen ? undefined : "hidden"} aria-hidden={!state.diffOpen}>
43 {props.children}
44 </aside>
45 );
46};
647
7function ChatRouteLayout() {48function ChatRouteLayout() {
8 const { state } = useStore();49 const { state } = useStore();
50 const shouldUseDiffSheet = useMediaQuery(DIFF_INLINE_LAYOUT_MEDIA_QUERY);
51
52 const diffLoadingFallback =
53 !state.diffOpen || shouldUseDiffSheet ? (
54 <div className="flex h-full min-h-0 items-center justify-center px-4 text-center text-xs text-muted-foreground/70">
55 Loading diff viewer...
56 </div>
57 ) : (
58 <aside className="flex h-full w-[560px] shrink-0 items-center justify-center border-l border-border bg-card px-4 text-center text-xs text-muted-foreground/70">
59 Loading diff viewer...
60 </aside>
61 );
962
10 return (63 return (
11 <div className="flex h-screen overflow-hidden bg-background text-foreground isolate">64 <div className="flex h-screen overflow-hidden bg-background text-foreground isolate">
12 <Sidebar />65 <Sidebar />
13 <Outlet />66 <Outlet />
14 {state.diffOpen && <DiffPanel />}67 <Activity mode={state.diffOpen ? "visible" : "hidden"}>
68 <DiffPanelWrapper sheet={shouldUseDiffSheet}>
69 <Suspense fallback={diffLoadingFallback}>
70 <DiffWorkerPoolProvider>
71 <DiffPanel mode={shouldUseDiffSheet ? "sheet" : "inline"} />
72 </DiffWorkerPoolProvider>
73 </Suspense>
74 </DiffPanelWrapper>
75 </Activity>
15 </div>76 </div>
16 );77 );
17}78}