fix(electron): optimize find in page in electron (2) (#9901)

1. find in page should have higher z-index than other modals
2. fix focused texts are not automatically being used as the default input value for searching

packages/frontend/core/src/desktop/pages/root/find-in-page/find-in-page-popup.css.ts

@@ -46,7 +46,7 @@ export const contentContainer = style({
   justifyContent: 'space-between',
   border: `0.5px solid ${cssVar('borderColor')}`,
   padding: '8px 12px 8px 8px',
-  zIndex: cssVar('zIndexModal'),
+  zIndex: `calc(${cssVar('zIndexModal')} + 1)`,
   willChange: 'transform, opacity',
   selectors: {
     '&[data-state=entered], &[data-state=entering]': {

packages/frontend/core/src/desktop/pages/root/find-in-page/find-in-page-popup.tsx

@@ -19,7 +19,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 
 import * as styles from './find-in-page-popup.css';
 
@@ -93,13 +93,14 @@ export const FindInPagePopup = () => {
   const [scrollLeft, setScrollLeft] = useState(0);
   const [composing, setComposing] = useState(false);
 
-  const [{ status }, toggle] = useTransition({
+  const [{ status }, toggle] = useTransitionState({
     timeout: animationTimeout,
   });
 
   useEffect(() => {
     toggle(visible);
-  }, [visible]);
+    setValue(findInPage.searchText$.value || '');
+  }, [findInPage.searchText$.value, toggle, visible]);
 
   const handleValueChange = useCallback(
     (value: string) => {
@@ -203,14 +204,10 @@ export const FindInPagePopup = () => {
           data-state={status}
           sideOffset={5}
           side="left"
-          onFocusOutside={e => {
+          onInteractOutside={e => {
             // do not close the popup when focus outside (like focus in the editor)
             e.preventDefault();
           }}
-          onPointerDownOutside={e => {
-            // do not close the popup when clicking outside (like clicking at the sidebar)
-            e.preventDefault();
-          }}
         >
           <div
             className={clsx(styles.inputContainer, {