fix(suite): Move window dragging area to Main in suite-desktop

Author: jvaclavik

packages/suite-desktop-ui/src/Main.tsx

@@ -14,7 +14,7 @@ import TrezorConnect from '@trezor/connect';
 import { initStore } from 'src/reducers/store';
 import { preloadStore } from 'src/support/suite/preloadStore';
 import { Metadata } from 'src/components/suite/Metadata';
-import { Preloader, ToastContainer } from 'src/components/suite';
+import { Preloader, ToastContainer, TrafficLightDraggableWindowHeader } from 'src/components/suite';
 import { ConnectedIntlProvider } from 'src/support/suite/ConnectedIntlProvider';
 import Resize from 'src/support/suite/Resize';
 import Autodetect from 'src/support/suite/Autodetect';
@@ -45,6 +45,7 @@ const Main = () => {
         // Todo: Enable when issues are fixed (ReactTruncate & BumpFee)
         // <StrictMode>
         <HelmetProvider>
+            <TrafficLightDraggableWindowHeader />
             <ConnectedThemeProvider>
                 <RouterProvider history={history}>
                     <ModalContextProvider>

packages/suite/src/components/suite/Preloader/Preloader.tsx

@@ -31,7 +31,6 @@ import { WelcomeLayout } from '../layouts/WelcomeLayout/WelcomeLayout';
 import { DeviceCompromised } from '../SecurityCheck/DeviceCompromised';
 import { RouterAppWithParams } from '../../../constants/suite/routes';
 import { useReportDeviceCompromised } from '../SecurityCheck/useReportDeviceCompromised';
-import { TrafficLightDraggableWindowHeader } from '../TrafficLightOffset';
 
 const ROUTES_TO_SKIP_FIRMWARE_CHECK: RouterAppWithParams['app'][] = [
     'settings',
@@ -51,7 +50,9 @@ const getFullscreenApp = (route: AppState['router']['route']): FC | undefined =>
     }
 };
 
-const usePreloaderData = ({ children }: PropsWithChildren) => {
+// Preloader is a top level wrapper used in _app.tsx.
+// Decides which content should be displayed basing on route and prerequisites.
+export const Preloader = ({ children }: PropsWithChildren) => {
     const lifecycle = useSelector(state => state.suite.lifecycle);
     const isTransportInitialized = useSelector(selectIsTransportInitialized);
     const router = useSelector(state => state.router);
@@ -147,16 +148,3 @@ const usePreloaderData = ({ children }: PropsWithChildren) => {
     // everything is set.
     return <SuiteLayout>{children}</SuiteLayout>;
 };
-
-// Preloader is a top level wrapper used in _app.tsx.
-// Decides which content should be displayed basing on route and prerequisites.
-export const Preloader = (props: PropsWithChildren) => {
-    const renderedComponent = usePreloaderData(props);
-
-    return (
-        <>
-            <TrafficLightDraggableWindowHeader />
-            {renderedComponent}
-        </>
-    );
-};

packages/suite/src/components/suite/TrafficLightOffset.tsx

@@ -11,11 +11,7 @@ type Props = {
     isVisible?: boolean;
 };
 
-// See: https://github.com/electron/electron/issues/5678
-// Visible all the time in the app
-
 const FixForNotBeingAbleToDragWindow = styled.div`
-    background: rgba(255, 0, 0, 0.1);
     -webkit-app-region: drag;
     pointer-events: none;
     height: 64px;
@@ -32,6 +28,8 @@ const Container = styled.div<{ $offset: number }>`
     height: 100%;
 `;
 
+// See: https://github.com/electron/electron/issues/5678
+// Visible all the time in the app
 export const TrafficLightDraggableWindowHeader = ({ children, isVisible = true }: Props) => {
     const isMac = isMacOs();
     const isDesktopApp = isDesktop();

packages/suite/src/components/suite/index.tsx

@@ -47,6 +47,7 @@ import { QrCode } from './QrCode';
 import { CoinBalance } from './CoinBalance';
 import { DeviceAuthenticationExplainer } from './DeviceAuthenticationExplainer';
 import { Preloader } from './Preloader/Preloader';
+import { TrafficLightDraggableWindowHeader } from './TrafficLightOffset';
 import { PinMatrix } from './PinMatrix/PinMatrix';
 import { UdevDownload } from './UdevDownload';
 import { StakingFeature } from './StakingFeature';
@@ -100,6 +101,7 @@ export {
     CoinBalance,
     DeviceAuthenticationExplainer,
     Preloader,
+    TrafficLightDraggableWindowHeader,
     PinMatrix,
     UdevDownload,
     StakingFeature,