@beyondwork/docx-react-component 1.0.30 → 1.0.32

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -62,6 +62,11 @@ import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
 import { TwLayoutPanel } from "./chrome/tw-layout-panel";
 import { TwPageRuler } from "./chrome/tw-page-ruler";
+import {
+  getInitialReviewRailOpen,
+  isNarrowChromeViewport,
+  resolveResponsiveChromeState,
+} from "./chrome/responsive-chrome";
 import { ChromePresetToolbar } from "./chrome/chrome-preset-toolbar";
 import {
   resolveChromePreset,
@@ -258,7 +263,15 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     chromeOptions,
     chromeVisibility: props.chromeVisibility,
   });
-  const showReviewRail = chromeVisibility.reviewRail && (caps?.reviewRailVisible ?? true);
+  const reviewRailAvailable = chromeVisibility.reviewRail && (caps?.reviewRailVisible ?? true);
+  const [viewportWidth, setViewportWidth] = useState<number | undefined>(() => readViewportWidth());
+  const [reviewRailOpen, setReviewRailOpen] = useState(() =>
+    getInitialReviewRailOpen({
+      viewportWidth: readViewportWidth(),
+      reviewRailAvailable,
+    }),
+  );
+  const responsiveChromeSignatureRef = useRef<string | null>(null);
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
   const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
@@ -318,6 +331,15 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     snapshot.readOnly ||
     snapshot.activeStory.kind !== "main" ||
     effectiveSelectionMode !== "edit";
+  const responsiveChrome = useMemo(
+    () =>
+      resolveResponsiveChromeState({
+        viewportWidth,
+        reviewRailAvailable,
+        reviewRailOpen,
+      }),
+    [reviewRailAvailable, reviewRailOpen, viewportWidth],
+  );
   const toolbarInteractionPolicy: ToolbarInteractionPolicy | undefined = caps
     ? {
         mode: effectiveSelectionMode,
@@ -341,6 +363,37 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     }
   }, [isPageWorkspace, snapshot.activeStory.kind]);
 
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const updateViewportWidth = () => {
+      setViewportWidth(readViewportWidth());
+    };
+
+    updateViewportWidth();
+    window.addEventListener("resize", updateViewportWidth);
+    return () => {
+      window.removeEventListener("resize", updateViewportWidth);
+    };
+  }, []);
+
+  useEffect(() => {
+    const responsiveSignature = `${reviewRailAvailable ? "1" : "0"}:${isNarrowChromeViewport(viewportWidth) ? "n" : "d"}`;
+    if (responsiveChromeSignatureRef.current === responsiveSignature) {
+      return;
+    }
+
+    responsiveChromeSignatureRef.current = responsiveSignature;
+    setReviewRailOpen(
+      getInitialReviewRailOpen({
+        viewportWidth,
+        reviewRailAvailable,
+      }),
+    );
+  }, [reviewRailAvailable, viewportWidth]);
+
   const dismissSelectionToolbar = useCallback(() => {
     props.onDismissSelectionToolbar?.();
   }, [props.onDismissSelectionToolbar]);
@@ -353,6 +406,25 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     [dismissSelectionToolbar],
   );
 
+  useEffect(() => {
+    if (!responsiveChrome.showDrawerReviewRail || typeof window === "undefined") {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+
+      setReviewRailOpen(false);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [responsiveChrome.showDrawerReviewRail]);
+
   return (
     <Tooltip.Provider delayDuration={400}>
       <div className="flex h-full flex-col bg-canvas text-primary">
@@ -366,12 +438,15 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               blockedReasons={blockedReasons}
               showDiagnosticsChrome={chromeVisibility.alerts}
               interactionPolicy={toolbarInteractionPolicy}
+              compactMode={responsiveChrome.isNarrow}
               workspaceMode={props.workspaceMode}
               zoomLevel={props.zoomLevel}
               formattingState={props.formattingState}
               activeListContext={props.activeListContext}
               styleCatalog={props.styleCatalog}
               showTrackedChanges={props.showTrackedChanges}
+              showSidebarToggle={responsiveChrome.showSidebarToggle}
+              isSidebarOpen={reviewRailOpen}
               onUndo={runWithSelectionToolbarDismiss(props.onUndo)}
               onRedo={runWithSelectionToolbarDismiss(props.onRedo)}
               onSetParagraphStyle={props.onSetParagraphStyle
@@ -444,6 +519,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 dismissSelectionToolbar();
                 props.onWorkspaceModeChange(value);
               }}
+              onToggleSidebar={() => {
+                dismissSelectionToolbar();
+                setReviewRailOpen((open) => !open);
+              }}
               onZoomChange={props.onZoomChange
                 ? (level) => {
                   dismissSelectionToolbar();
@@ -483,7 +562,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           workflowBlockedReasons={blockedReasons}
         /> : null}
 
-        <div className="flex flex-1 min-h-0">
+        <div className="relative flex flex-1 min-h-0">
           {/* Collapsible document navigator — page mode only */}
           {isPageWorkspace && chromeVisibility.pageChrome ? (
             <aside
@@ -889,8 +968,8 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             ) : null}
           </div>
 
-          {/* Review rail — hidden in editing mode unless toggled */}
-          {showReviewRail ? <TwReviewRail
+          {/* Review rail — docked on desktop, drawer-backed on narrow layouts */}
+          {responsiveChrome.showDockedReviewRail ? <TwReviewRail
             activeTab={props.activeRailTab}
             currentUserId={props.currentUserId}
             comments={snapshot.comments}
@@ -917,12 +996,60 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             onAcceptAllChanges={props.onAcceptAllChanges}
             onRejectAllChanges={props.onRejectAllChanges}
           /> : null}
+
+          {responsiveChrome.showDrawerReviewRail ? (
+            <div
+              className="pointer-events-none absolute inset-0 z-30 flex justify-end"
+              data-testid="review-rail-drawer"
+            >
+              <button
+                type="button"
+                aria-label="Close sidebar overlay"
+                className="pointer-events-auto absolute inset-0 border-0 bg-[color:rgba(21,26,23,0.08)] dark:bg-[color:rgba(0,0,0,0.32)]"
+                onClick={() => setReviewRailOpen(false)}
+              />
+              <div className="pointer-events-auto relative h-full">
+                <TwReviewRail
+                  variant="drawer"
+                  activeTab={props.activeRailTab}
+                  currentUserId={props.currentUserId}
+                  comments={snapshot.comments}
+                  trackedChanges={snapshot.trackedChanges}
+                  compatibility={snapshot.compatibility}
+                  warnings={snapshot.warnings}
+                  markupDisplay={markupDisplay}
+                  contextAnalytics={
+                    chromeVisibility.contextAnalytics
+                      ? props.currentScopeContextAnalytics
+                      : null
+                  }
+                  activeCommentId={props.activeCommentId}
+                  activeRevisionId={props.activeRevisionId}
+                  onActiveTabChange={props.onActiveRailTabChange}
+                  onOpenComment={props.onOpenComment}
+                  onResolveComment={props.onResolveComment}
+                  onReopenComment={props.onReopenComment}
+                  onAddReply={props.onAddReply}
+                  onEditBody={props.onEditBody}
+                  onOpenRevision={props.onOpenRevision}
+                  onAcceptRevision={props.onAcceptRevision}
+                  onRejectRevision={props.onRejectRevision}
+                  onAcceptAllChanges={props.onAcceptAllChanges}
+                  onRejectAllChanges={props.onRejectAllChanges}
+                />
+              </div>
+            </div>
+          ) : null}
         </div>
       </div>
     </Tooltip.Provider>
   );
 }
 
+function readViewportWidth(): number | undefined {
+  return typeof window === "undefined" ? undefined : window.innerWidth;
+}
+
 function shouldHidePageBorderForSelection(
   selection: EditorViewStateSnapshot["selection"],
 ): boolean {