refactor: reuse common ui dialogs and message for mobile and LayerUI (#5611)

* refactor: Move common UI dialogs to component

* refactor

* fix

src/components/LayerUI.tsx

@@ -381,7 +381,7 @@ const LayerUI = ({
     );
   };
 
-  const dialogs = (
+  return (
     <>
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
@@ -409,82 +409,77 @@ const LayerUI = ({
           }
         />
       )}
-    </>
-  );
-
-  return device.isMobile ? (
-    <>
-      {dialogs}
-      <MobileMenu
-        appState={appState}
-        elements={elements}
-        actionManager={actionManager}
-        libraryMenu={libraryMenu}
-        renderJSONExportDialog={renderJSONExportDialog}
-        renderImageExportDialog={renderImageExportDialog}
-        setAppState={setAppState}
-        onCollabButtonClick={onCollabButtonClick}
-        onLockToggle={() => onLockToggle()}
-        onPenModeToggle={onPenModeToggle}
-        canvas={canvas}
-        isCollaborating={isCollaborating}
-        renderCustomFooter={renderCustomFooter}
-        showThemeBtn={showThemeBtn}
-        onImageAction={onImageAction}
-        renderTopRightUI={renderTopRightUI}
-        renderCustomStats={renderCustomStats}
-      />
-    </>
-  ) : (
-    <>
-      <div
-        className={clsx("layer-ui__wrapper", {
-          "disable-pointerEvents":
-            appState.draggingElement ||
-            appState.resizingElement ||
-            (appState.editingElement &&
-              !isTextElement(appState.editingElement)),
-        })}
-        style={
-          appState.isLibraryOpen &&
-          appState.isLibraryMenuDocked &&
-          device.canDeviceFitSidebar
-            ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
-            : {}
-        }
-      >
-        {dialogs}
-        {renderFixedSideContainer()}
-        <Footer
+      {device.isMobile && (
+        <MobileMenu
           appState={appState}
+          elements={elements}
           actionManager={actionManager}
+          libraryMenu={libraryMenu}
+          renderJSONExportDialog={renderJSONExportDialog}
+          renderImageExportDialog={renderImageExportDialog}
+          setAppState={setAppState}
+          onCollabButtonClick={onCollabButtonClick}
+          onLockToggle={() => onLockToggle()}
+          onPenModeToggle={onPenModeToggle}
+          canvas={canvas}
+          isCollaborating={isCollaborating}
           renderCustomFooter={renderCustomFooter}
-          showExitZenModeBtn={showExitZenModeBtn}
+          showThemeBtn={showThemeBtn}
+          onImageAction={onImageAction}
+          renderTopRightUI={renderTopRightUI}
+          renderCustomStats={renderCustomStats}
         />
-        {appState.showStats && (
-          <Stats
+      )}
+
+      {!device.isMobile && (
+        <div
+          className={clsx("layer-ui__wrapper", {
+            "disable-pointerEvents":
+              appState.draggingElement ||
+              appState.resizingElement ||
+              (appState.editingElement &&
+                !isTextElement(appState.editingElement)),
+          })}
+          style={
+            appState.isLibraryOpen &&
+            appState.isLibraryMenuDocked &&
+            device.canDeviceFitSidebar
+              ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
+              : {}
+          }
+        >
+          {renderFixedSideContainer()}
+          <Footer
             appState={appState}
-            setAppState={setAppState}
-            elements={elements}
-            onClose={() => {
-              actionManager.executeAction(actionToggleStats);
-            }}
-            renderCustomStats={renderCustomStats}
+            actionManager={actionManager}
+            renderCustomFooter={renderCustomFooter}
+            showExitZenModeBtn={showExitZenModeBtn}
           />
-        )}
-        {appState.scrolledOutside && (
-          <button
-            className="scroll-back-to-content"
-            onClick={() => {
-              setAppState({
-                ...calculateScrollCenter(elements, appState, canvas),
-              });
-            }}
-          >
-            {t("buttons.scrollBackToContent")}
-          </button>
-        )}
-      </div>
+          {appState.showStats && (
+            <Stats
+              appState={appState}
+              setAppState={setAppState}
+              elements={elements}
+              onClose={() => {
+                actionManager.executeAction(actionToggleStats);
+              }}
+              renderCustomStats={renderCustomStats}
+            />
+          )}
+          {appState.scrolledOutside && (
+            <button
+              className="scroll-back-to-content"
+              onClick={() => {
+                setAppState({
+                  ...calculateScrollCenter(elements, appState, canvas),
+                });
+              }}
+            >
+              {t("buttons.scrollBackToContent")}
+            </button>
+          )}
+        </div>
+      )}
       {appState.isLibraryOpen && (
         <div className="layer-ui__sidebar">{libraryMenu}</div>
       )}