feat: refactor Sidebar into standalone reusable component (#5663)

🚀!

src/components/LayerUI.tsx

@@ -40,6 +40,9 @@ import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./Footer";
+import { hostSidebarCountersAtom, Sidebar } from "./Sidebar/Sidebar";
+import { jotaiScope } from "../jotai";
+import { useAtom } from "jotai";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -58,6 +61,7 @@ interface LayerUIProps {
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
   renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
+  renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
   focusContainer: () => void;
@@ -81,6 +85,7 @@ const LayerUI = ({
   renderTopRightUI,
   renderCustomFooter,
   renderCustomStats,
+  renderCustomSidebar,
   libraryReturnUrl,
   UIOptions,
   focusContainer,
@@ -249,7 +254,7 @@ const LayerUI = ({
     if (isDialogOpen) {
       return;
     }
-    setAppState({ isLibraryOpen: false });
+    setAppState({ openSidebar: null });
   }, [setAppState]);
 
   const deselectItems = useCallback(() => {
@@ -259,23 +264,24 @@ const LayerUI = ({
     });
   }, [setAppState]);
 
-  const libraryMenu = appState.isLibraryOpen ? (
-    <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState, true)}
-      onClose={closeLibrary}
-      onInsertLibraryItems={(libraryItems) => {
-        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
-      }}
-      onAddToLibrary={deselectItems}
-      setAppState={setAppState}
-      libraryReturnUrl={libraryReturnUrl}
-      focusContainer={focusContainer}
-      library={library}
-      files={files}
-      id={id}
-      appState={appState}
-    />
-  ) : null;
+  const libraryMenu =
+    appState.openSidebar === "library" ? (
+      <LibraryMenu
+        pendingElements={getSelectedElements(elements, appState, true)}
+        onClose={closeLibrary}
+        onInsertLibraryItems={(libraryItems) => {
+          onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+        }}
+        onAddToLibrary={deselectItems}
+        setAppState={setAppState}
+        libraryReturnUrl={libraryReturnUrl}
+        focusContainer={focusContainer}
+        library={library}
+        files={files}
+        id={id}
+        appState={appState}
+      />
+    ) : null;
 
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = showSelectedShapeActions(
@@ -330,6 +336,7 @@ const LayerUI = ({
                         appState={appState}
                         elements={elements}
                         isMobile={device.isMobile}
+                        device={device}
                       />
                       {heading}
                       <Stack.Row gap={1}>
@@ -374,6 +381,8 @@ const LayerUI = ({
     );
   };
 
+  const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
+
   return (
     <>
       {appState.isLoading && <LoadingMessage delay={250} />}
@@ -420,6 +429,8 @@ const LayerUI = ({
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
+          renderCustomSidebar={renderCustomSidebar}
+          device={device}
         />
       )}
 
@@ -434,8 +445,9 @@ const LayerUI = ({
                   !isTextElement(appState.editingElement)),
             })}
             style={
-              appState.isLibraryOpen &&
-              appState.isLibraryMenuDocked &&
+              ((appState.openSidebar === "library" &&
+                appState.isSidebarDocked) ||
+                hostSidebarCounters.docked) &&
               device.canDeviceFitSidebar
                 ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                 : {}
@@ -472,9 +484,26 @@ const LayerUI = ({
               </button>
             )}
           </div>
-          {appState.isLibraryOpen && (
-            <div className="layer-ui__sidebar">{libraryMenu}</div>
-          )}
+          {appState.openSidebar === "customSidebar" ? (
+            renderCustomSidebar?.()
+          ) : appState.openSidebar === "library" ? (
+            <Sidebar
+              __isInternal
+              // necessary to remount when switching between internal
+              // and custom (host app) sidebar, so that the `props.onClose`
+              // is colled correctly
+              key="library"
+              onDock={(docked) => {
+                trackEvent(
+                  "library",
+                  `toggleLibraryDock (${docked ? "dock" : "undock"})`,
+                  `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
+                );
+              }}
+            >
+              {libraryMenu}
+            </Sidebar>
+          ) : null}
         </>
       )}
     </>
@@ -494,8 +523,12 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const nextAppState = getNecessaryObj(next.appState);
 
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
+
   return (
     prev.renderCustomFooter === next.renderCustomFooter &&
+    prev.renderTopRightUI === next.renderTopRightUI &&
+    prev.renderCustomStats === next.renderCustomStats &&
+    prev.renderCustomSidebar === next.renderCustomSidebar &&
     prev.langCode === next.langCode &&
     prev.elements === next.elements &&
     prev.files === next.files &&