Merge pull request #16268 from overleaf/ii-ide-page-prototype-review-panel-layout-to-left

[web] Review panel popovers

GitOrigin-RevId: 4424abab97b197013063679bd8efcac001f458ad

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -7,6 +7,7 @@ import useSocketListener from '@/features/ide-react/hooks/use-socket-listener'
 import useAsync from '@/shared/hooks/use-async'
 import useAbortController from '@/shared/hooks/use-abort-controller'
 import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter'
+import useLayoutToLeft from '@/features/ide-react/context/review-panel/hooks/useLayoutToLeft'
 import { sendMB } from '../../../../../infrastructure/event-tracking'
 import {
   dispatchReviewPanelLayout as handleLayoutChange,
@@ -147,6 +148,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
   const { showGenericMessageModal } = useModalsContext()
   const addCommentEmitter = useScopeEventEmitter('comment:start_adding')
 
+  const layoutToLeft = useLayoutToLeft('.ide-react-editor-panel')
   const [subView, setSubView] =
     useState<ReviewPanel.Value<'subView'>>('cur_file')
   const [isOverviewLoading, setIsOverviewLoading] =
@@ -1523,6 +1525,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       formattedProjectMembers,
       layoutSuspended,
       unsavedComment,
+      layoutToLeft,
     }),
     [
       collapsed,
@@ -1550,6 +1553,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       formattedProjectMembers,
       layoutSuspended,
       unsavedComment,
+      layoutToLeft,
     ]
   )
 

services/web/frontend/js/features/ide-react/context/review-panel/hooks/useLayoutToLeft.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+
+function useLayoutToLeft(querySelector: string) {
+  const [layoutToLeft, setLayoutToLeft] = useState(false)
+
+  useEffect(() => {
+    if (!('ResizeObserver' in window)) return
+
+    const target = document.querySelector(querySelector)
+
+    if (!target) return
+
+    const handleResize = () => {
+      const docWidth = document.documentElement.clientWidth
+      const { right: rightEdge } = target.getBoundingClientRect()
+      setLayoutToLeft(docWidth - rightEdge < 225)
+    }
+
+    handleResize()
+
+    const observer = new ResizeObserver(handleResize)
+    observer.observe(target)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [querySelector])
+
+  return layoutToLeft
+}
+
+export default useLayoutToLeft

services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts

@@ -2,6 +2,5 @@ import { ReactScopeValueStore } from '@/features/ide-react/scope-value-store/rea
 
 export default function populateReviewPanelScope(store: ReactScopeValueStore) {
   store.set('users', {})
-  store.set('reviewPanel.layoutToLeft', false)
   store.set('addNewComment', () => {})
 }