fix: hide welcome screen on mobile once user interacts (#6185)

* fix: hide welcome screen on mobile once started drawing

* Add specs

src/components/LayerUI.tsx

@@ -409,6 +409,7 @@ const LayerUI = ({
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
+          renderWelcomeScreen={renderWelcomeScreen}
         />
       )}
 

src/components/MobileMenu.tsx

@@ -41,6 +41,7 @@ type MobileMenuProps = {
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
+  renderWelcomeScreen: boolean;
 };
 
 export const MobileMenu = ({
@@ -57,12 +58,13 @@ export const MobileMenu = ({
   renderCustomStats,
   renderSidebars,
   device,
+  renderWelcomeScreen,
 }: MobileMenuProps) => {
   const { welcomeScreenCenterTunnel, mainMenuTunnel } = useTunnels();
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        <welcomeScreenCenterTunnel.Out />
+        {renderWelcomeScreen && <welcomeScreenCenterTunnel.Out />}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">

src/tests/MobileMenu.test.tsx

@@ -0,0 +1,45 @@
+import ExcalidrawApp from "../excalidraw-app";
+import {
+  mockBoundingClientRect,
+  render,
+  restoreOriginalGetBoundingClientRect,
+} from "./test-utils";
+
+import { UI } from "./helpers/ui";
+
+describe("Test MobileMenu", () => {
+  const { h } = window;
+  const dimensions = { height: 400, width: 800 };
+
+  beforeEach(async () => {
+    await render(<ExcalidrawApp />);
+    //@ts-ignore
+    h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!);
+  });
+
+  beforeAll(() => {
+    mockBoundingClientRect(dimensions);
+  });
+
+  afterAll(() => {
+    restoreOriginalGetBoundingClientRect();
+  });
+
+  it("should set device correctly", () => {
+    expect(h.app.device).toMatchInlineSnapshot(`
+      Object {
+        "canDeviceFitSidebar": false,
+        "isMobile": true,
+        "isSmScreen": false,
+        "isTouchScreen": false,
+      }
+    `);
+  });
+
+  it("should initialize with welcome screen and hide once user interacts", async () => {
+    expect(document.querySelector(".welcome-screen-center")).toMatchSnapshot();
+
+    UI.clickTool("rectangle");
+    expect(document.querySelector(".welcome-screen-center")).toBeNull();
+  });
+});