From c99595e78143478a1aa747cb0897cf666ab10cb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20Marussy?= <marussy@mit.bme.hu>
Date: Sat, 23 Nov 2024 22:06:16 +0100
Subject: [PATCH] refactor(frontend): smoother search panel resizing

Install the resize detector to the whole editor are so that the search panel
knows its weight as soon as it is installed.
---
 subprojects/frontend/src/editor/EditorPane.tsx        | 6 ++++--
 subprojects/frontend/src/editor/SearchPanelPortal.tsx | 4 +++-
 subprojects/frontend/src/editor/SearchToolbar.tsx     | 5 ++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 56f9144ec..15cf69e51 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -10,6 +10,7 @@ import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
 import { useRootStore } from '../RootStoreProvider';
 
@@ -38,9 +39,10 @@ function EditorLoading(): JSX.Element {
 
 export default observer(function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
+  const { width, ref } = useResizeDetector();
 
   return (
-    <Stack direction="column" height="100%" overflow="auto">
+    <Stack direction="column" height="100%" overflow="auto" ref={ref}>
       <Toolbar
         variant="dense"
         sx={{
@@ -62,7 +64,7 @@ export default observer(function EditorPane(): JSX.Element {
           <>
             <AnalysisErrorNotification editorStore={editorStore} />
             <ConnectionStatusNotification editorStore={editorStore} />
-            <SearchPanelPortal editorStore={editorStore} />
+            <SearchPanelPortal editorStore={editorStore} width={width} />
             <EditorArea editorStore={editorStore} />
           </>
         )}
diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
index b4b07c74d..0650bcd7b 100644
--- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx
+++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -12,8 +12,10 @@ import SearchToolbar from './SearchToolbar';
 
 export default observer(function SearchPanelPortal({
   editorStore: { searchPanel: searchPanelStore },
+  width,
 }: {
   editorStore: EditorStore;
+  width: number | undefined;
 }): JSX.Element | null {
   const { element: searchPanelContainer } = searchPanelStore;
 
@@ -22,7 +24,7 @@ export default observer(function SearchPanelPortal({
   }
   return (
     <Portal container={searchPanelContainer}>
-      <SearchToolbar searchPanelStore={searchPanelStore} />
+      <SearchToolbar searchPanelStore={searchPanelStore} width={width} />
     </Portal>
   );
 });
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 3ee01327c..340160175 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -20,7 +20,6 @@ import Toolbar from '@mui/material/Toolbar';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
 
 import Tooltip from '../Tooltip';
 
@@ -36,15 +35,16 @@ const DimLabel = styled(FormControlLabel)(({ theme }) => ({
 
 export default observer(function SearchToolbar({
   searchPanelStore,
+  width,
 }: {
   searchPanelStore: SearchPanelStore;
+  width: number | undefined;
 }): JSX.Element {
   const {
     id: panelId,
     query: { search, valid, caseSensitive, literal, regexp, replace },
     invalidRegexp,
   } = searchPanelStore;
-  const { width, ref } = useResizeDetector();
   const split = width !== undefined && width <= 1200;
   const [showRepalceState, setShowReplaceState] = useState(false);
 
@@ -68,7 +68,6 @@ export default observer(function SearchToolbar({
         alignItems: 'center',
         minHeight: 'auto',
       }}
-      ref={ref}
     >
       <Stack
         direction={split ? 'column' : 'row'}