Merge pull request #16152 from overleaf/ii-ide-page-prototype-review-panel-mini

[web] React ide page mini review panel

GitOrigin-RevId: 4c4ee8095446a2f72371024b93a07dbd1dbd2a63

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

@@ -119,7 +119,8 @@ const formatComment = (
 
 function useReviewPanelState(): ReviewPanelStateReactIde {
   const { t } = useTranslation()
-  const { reviewPanelOpen, setReviewPanelOpen } = useLayoutContext()
+  const { reviewPanelOpen, setReviewPanelOpen, setMiniReviewPanelVisible } =
+    useLayoutContext()
   const { projectId } = useIdeReactContext()
   const project = useProjectContext()
   const user = useUserContext()
@@ -1149,6 +1150,24 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
   const [layoutSuspended, setLayoutSuspended] = useState(false)
   const [unsavedComment, setUnsavedComment] = useState('')
 
+  useEffect(() => {
+    if (!trackChangesVisible) {
+      setReviewPanelOpen(false)
+    }
+  }, [trackChangesVisible, setReviewPanelOpen])
+
+  const hasEntries = useMemo(() => {
+    const docEntries = getDocEntries(currentDocumentId)
+    const permEntriesCount = Object.keys(docEntries).filter(key => {
+      return !['add-comment', 'bulk-actions'].includes(key)
+    }).length
+    return permEntriesCount > 0 && trackChangesVisible
+  }, [currentDocumentId, getDocEntries, trackChangesVisible])
+
+  useEffect(() => {
+    setMiniReviewPanelVisible(!reviewPanelOpen && hasEntries)
+  }, [reviewPanelOpen, hasEntries, setMiniReviewPanelVisible])
+
   // listen for events from the CodeMirror 6 track changes extension
   useEffect(() => {
     const toggleTrackChangesFromKbdShortcut = () => {

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

@@ -9,6 +9,7 @@ export default function populateLayoutScope(store: ReactScopeValueStore) {
   store.persisted('ui.chatOpen', false, 'ui.chatOpen')
   store.persisted('ui.reviewPanelOpen', false, reviewPanelStorageKey)
   store.set('ui.leftMenuShown', false)
+  store.set('ui.miniReviewPanelVisible', false)
   store.set('ui.pdfLayout', 'sideBySide')
   store.set('ui.loadingStyleSheet', false)
 }

services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx

@@ -19,7 +19,7 @@ type ReviewPanelViewProps = {
 
 function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) {
   const { subView, loadingThreads } = useReviewPanelValueContext()
-  const { reviewPanelOpen } = useLayoutContext()
+  const { reviewPanelOpen, miniReviewPanelVisible } = useLayoutContext()
   const { isReactIde } = useIdeContext()
 
   const content = (
@@ -44,7 +44,7 @@ function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) {
           'rp-state-current-file-mini':
             subView === 'cur_file' && !reviewPanelOpen,
           'rp-state-overview': subView === 'overview',
-          // 'rp-size-mini': ui.miniReviewPanelVisible,
+          'rp-size-mini': miniReviewPanelVisible,
           'rp-size-expanded': reviewPanelOpen,
           // 'rp-layout-left': reviewPanel.layoutToLeft,
           'rp-loading-threads': loadingThreads,

services/web/frontend/js/shared/context/layout-context.tsx

@@ -33,6 +33,10 @@ type LayoutContextValue = {
   setReviewPanelOpen: Dispatch<
     SetStateAction<LayoutContextValue['reviewPanelOpen']>
   >
+  miniReviewPanelVisible: boolean
+  setMiniReviewPanelVisible: Dispatch<
+    SetStateAction<LayoutContextValue['miniReviewPanelVisible']>
+  >
   leftMenuShown: boolean
   setLeftMenuShown: Dispatch<
     SetStateAction<LayoutContextValue['leftMenuShown']>
@@ -93,6 +97,10 @@ export const LayoutProvider: FC = ({ children }) => {
   const [reviewPanelOpen, setReviewPanelOpen] =
     useScopeValue('ui.reviewPanelOpen')
 
+  // whether the review pane is collapsed
+  const [miniReviewPanelVisible, setMiniReviewPanelVisible] =
+    useScopeValue<boolean>('ui.miniReviewPanelVisible')
+
   // whether the menu pane is open
   const [leftMenuShown, setLeftMenuShown] =
     useScopeValue<boolean>('ui.leftMenuShown')
@@ -168,11 +176,13 @@ export const LayoutProvider: FC = ({ children }) => {
       pdfLayout,
       pdfPreviewOpen,
       reviewPanelOpen,
+      miniReviewPanelVisible,
       loadingStyleSheet,
       setChatIsOpen,
       setLeftMenuShown,
       setPdfLayout,
       setReviewPanelOpen,
+      setMiniReviewPanelVisible,
       setLoadingStyleSheet,
       setView,
       view,
@@ -188,11 +198,13 @@ export const LayoutProvider: FC = ({ children }) => {
       pdfLayout,
       pdfPreviewOpen,
       reviewPanelOpen,
+      miniReviewPanelVisible,
       loadingStyleSheet,
       setChatIsOpen,
       setLeftMenuShown,
       setPdfLayout,
       setReviewPanelOpen,
+      setMiniReviewPanelVisible,
       setLoadingStyleSheet,
       setView,
       view,