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)
 }