Revert "fix: React.memo resolvers not accounting for all props (#6042)"

This reverts commit 618442299f.

.husky/pre-commit

@@ -1,2 +1,2 @@
 #!/bin/sh
-yarn lint-staged
+# yarn lint-staged

dev-docs/yarn.lock

@@ -4692,9 +4692,9 @@ json-schema-traverse@^1.0.0:
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json5@^2.1.2, json5@^2.2.1:
-  version "2.2.1"
+  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1:
   version "6.1.0"

src/actions/actionBoundText.tsx

@@ -26,7 +26,7 @@ export const actionUnbindText = register({
   name: "unbindText",
   contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
@@ -76,7 +76,7 @@ export const actionBindText = register({
   name: "bindText",
   contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
 
     if (selectedElements.length === 2) {

src/actions/actionCanvas.tsx

@@ -1,11 +1,5 @@
 import { ColorPicker } from "../components/ColorPicker";
-import {
+import { eraser, ZoomInIcon, ZoomOutIcon } from "../components/icons";
-  eraser,
-  MoonIcon,
-  SunIcon,
-  ZoomInIcon,
-  ZoomOutIcon,
-} from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
@@ -21,14 +15,17 @@ import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive } from "../appState";
-import ClearCanvas from "../components/ClearCanvas";
 import clsx from "clsx";
-import MenuItem from "../components/MenuItem";
-import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   trackEvent: false,
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.changeViewBackgroundColor &&
+      !appState.viewModeEnabled
+    );
+  },
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
@@ -36,6 +33,7 @@ export const actionChangeViewBackgroundColor = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
+    // FIXME move me to src/components/mainMenu/DefaultItems.tsx
     return (
       <div style={{ position: "relative" }}>
         <ColorPicker
@@ -59,6 +57,12 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.clearCanvas &&
+      !appState.viewModeEnabled
+    );
+  },
   perform: (elements, appState, _, app) => {
     app.imageCache.clear();
     return {
@@ -84,8 +88,6 @@ export const actionClearCanvas = register({
       commitToHistory: true,
     };
   },
-
-  PanelComponent: ({ updateData }) => <ClearCanvas onConfirm={updateData} />,
 });
 
 export const actionZoomIn = register({
@@ -298,22 +300,10 @@ export const actionToggleTheme = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ appState, updateData }) => (
-    <MenuItem
-      label={
-        appState.theme === "dark"
-          ? t("buttons.lightMode")
-          : t("buttons.darkMode")
-      }
-      onClick={() => {
-        updateData(appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT);
-      }}
-      icon={appState.theme === "dark" ? SunIcon : MoonIcon}
-      dataTestId="toggle-dark-mode"
-      shortcut={getShortcutFromShortcutName("toggleTheme")}
-    />
-  ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
+  predicate: (elements, appState, props, app) => {
+    return !!app.props.UIOptions.canvasActions.toggleTheme;
+  },
 });
 
 export const actionErase = register({

src/actions/actionClipboard.tsx

@@ -24,7 +24,7 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
-  contextItemPredicate: (elements, appState, appProps, app) => {
+  predicate: (elements, appState, appProps, app) => {
     return app.device.isMobile && !!navigator.clipboard;
   },
   contextItemLabel: "labels.copy",
@@ -41,7 +41,7 @@ export const actionPaste = register({
       commitToHistory: false,
     };
   },
-  contextItemPredicate: (elements, appState, appProps, app) => {
+  predicate: (elements, appState, appProps, app) => {
     return app.device.isMobile && !!navigator.clipboard;
   },
   contextItemLabel: "labels.paste",
@@ -56,7 +56,7 @@ export const actionCut = register({
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
   },
-  contextItemPredicate: (elements, appState, appProps, app) => {
+  predicate: (elements, appState, appProps, app) => {
     return app.device.isMobile && !!navigator.clipboard;
   },
   contextItemLabel: "labels.cut",
@@ -101,7 +101,7 @@ export const actionCopyAsSvg = register({
       };
     }
   },
-  contextItemPredicate: (elements) => {
+  predicate: (elements) => {
     return probablySupportsClipboardWriteText && elements.length > 0;
   },
   contextItemLabel: "labels.copyAsSvg",
@@ -158,7 +158,7 @@ export const actionCopyAsPng = register({
       };
     }
   },
-  contextItemPredicate: (elements) => {
+  predicate: (elements) => {
     return probablySupportsClipboardBlob && elements.length > 0;
   },
   contextItemLabel: "labels.copyAsPng",
@@ -188,7 +188,7 @@ export const copyText = register({
       commitToHistory: false,
     };
   },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     return (
       probablySupportsClipboardWriteText &&
       getSelectedElements(elements, appState, true).some(isTextElement)

src/actions/actionExport.tsx

@@ -1,7 +1,6 @@
-import { LoadIcon, questionCircle, saveAs } from "../components/icons";
+import { questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
-import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
@@ -15,12 +14,11 @@ import { getExportSize } from "../scene/export";
 import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
-import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-import MenuItem from "../components/MenuItem";
+
-import { getShortcutFromShortcutName } from "./shortcuts";
+import "../components/ToolIcon.scss";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -133,6 +131,13 @@ export const actionChangeExportEmbedScene = register({
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
   trackEvent: { category: "export" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.saveToActiveFile &&
+      !!appState.fileHandle &&
+      !appState.viewModeEnabled
+    );
+  },
   perform: async (elements, appState, value, app) => {
     const fileHandleExists = !!appState.fileHandle;
 
@@ -169,12 +174,6 @@ export const actionSaveToActiveFile = register({
   },
   keyTest: (event) =>
     event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
-  PanelComponent: ({ updateData, appState }) => (
-    <ActiveFile
-      onSave={() => updateData(null)}
-      fileName={appState.fileHandle?.name}
-    />
-  ),
 });
 
 export const actionSaveFileToDisk = register({
@@ -220,6 +219,11 @@ export const actionSaveFileToDisk = register({
 export const actionLoadScene = register({
   name: "loadScene",
   trackEvent: { category: "export" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.loadScene && !appState.viewModeEnabled
+    );
+  },
   perform: async (elements, appState, _, app) => {
     try {
       const {
@@ -247,15 +251,6 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData }) => (
-    <MenuItem
-      label={t("buttons.load")}
-      icon={LoadIcon}
-      onClick={updateData}
-      dataTestId="load-button"
-      shortcut={getShortcutFromShortcutName("loadScene")}
-    />
-  ),
 });
 
 export const actionExportWithDarkMode = register({

src/actions/actionFlip.ts

@@ -50,7 +50,7 @@ export const actionFlipHorizontal = register({
   },
   keyTest: (event) => event.shiftKey && event.code === "KeyH",
   contextItemLabel: "labels.flipHorizontal",
-  contextItemPredicate: (elements, appState) =>
+  predicate: (elements, appState) =>
     enableActionFlipHorizontal(elements, appState),
 });
 
@@ -67,7 +67,7 @@ export const actionFlipVertical = register({
   keyTest: (event) =>
     event.shiftKey && event.code === "KeyV" && !event[KEYS.CTRL_OR_CMD],
   contextItemLabel: "labels.flipVertical",
-  contextItemPredicate: (elements, appState) =>
+  predicate: (elements, appState) =>
     enableActionFlipVertical(elements, appState),
 });
 

src/actions/actionGroup.tsx

@@ -129,8 +129,7 @@ export const actionGroup = register({
     };
   },
   contextItemLabel: "labels.group",
-  contextItemPredicate: (elements, appState) =>
+  predicate: (elements, appState) => enableActionGroup(elements, appState),
-    enableActionGroup(elements, appState),
   keyTest: (event) =>
     !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -193,8 +192,7 @@ export const actionUngroup = register({
     event[KEYS.CTRL_OR_CMD] &&
     event.key === KEYS.G.toUpperCase(),
   contextItemLabel: "labels.ungroup",
-  contextItemPredicate: (elements, appState) =>
+  predicate: (elements, appState) => getSelectedGroupIds(appState).length > 0,
-    getSelectedGroupIds(appState).length > 0,
 
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton

src/actions/actionLinearEditor.ts

@@ -10,7 +10,7 @@ export const actionToggleLinearEditor = register({
   trackEvent: {
     category: "element",
   },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       return true;

src/actions/actionMenu.tsx

@@ -1,12 +1,10 @@
-import { HamburgerMenuIcon, HelpIcon, palette } from "../components/icons";
+import { HamburgerMenuIcon, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
-import { HelpButton } from "../components/HelpButton";
-import MenuItem from "../components/MenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -88,17 +86,5 @@ export const actionShortcuts = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ updateData, isInHamburgerMenu }) =>
-    isInHamburgerMenu ? (
-      <MenuItem
-        label={t("helpDialog.title")}
-        dataTestId="help-menu-item"
-        icon={HelpIcon}
-        onClick={updateData}
-        shortcut="?"
-      />
-    ) : (
-      <HelpButton title={t("helpDialog.title")} onClick={updateData} />
-    ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });

src/actions/actionToggleGridMode.tsx

@@ -20,7 +20,7 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
-  contextItemPredicate: (element, appState, props) => {
+  predicate: (element, appState, props) => {
     return typeof props.gridModeEnabled === "undefined";
   },
   contextItemLabel: "labels.showGrid",

src/actions/actionToggleViewMode.tsx

@@ -18,7 +18,7 @@ export const actionToggleViewMode = register({
     };
   },
   checked: (appState) => appState.viewModeEnabled,
-  contextItemPredicate: (elements, appState, appProps) => {
+  predicate: (elements, appState, appProps) => {
     return typeof appProps.viewModeEnabled === "undefined";
   },
   contextItemLabel: "labels.viewMode",

src/actions/actionToggleZenMode.tsx

@@ -18,7 +18,7 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
-  contextItemPredicate: (elements, appState, appProps) => {
+  predicate: (elements, appState, appProps) => {
     return typeof appProps.zenModeEnabled === "undefined";
   },
   contextItemLabel: "buttons.zenMode",

src/actions/manager.tsx

@@ -131,11 +131,7 @@ export class ActionManager {
   /**
    * @param data additional data sent to the PanelComponent
    */
-  renderAction = (
+  renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
-    name: ActionName,
-    data?: PanelComponentProps["data"],
-    isInHamburgerMenu = false,
-  ) => {
     const canvasActions = this.app.props.UIOptions.canvasActions;
 
     if (
@@ -170,11 +166,20 @@ export class ActionManager {
           updateData={updateData}
           appProps={this.app.props}
           data={data}
-          isInHamburgerMenu={isInHamburgerMenu}
         />
       );
     }
 
     return null;
   };
+
+  isActionEnabled = (action: Action) => {
+    const elements = this.getElementsIncludingDeleted();
+    const appState = this.getAppState();
+
+    return (
+      !action.predicate ||
+      action.predicate(elements, appState, this.app.props, this.app)
+    );
+  };
 }

src/actions/types.ts

@@ -124,9 +124,7 @@ export type PanelComponentProps = {
 
 export interface Action {
   name: ActionName;
-  PanelComponent?: React.FC<
+  PanelComponent?: React.FC<PanelComponentProps>;
-    PanelComponentProps & { isInHamburgerMenu: boolean }
-  >;
   perform: ActionFn;
   keyPriority?: number;
   keyTest?: (
@@ -140,7 +138,7 @@ export interface Action {
         elements: readonly ExcalidrawElement[],
         appState: Readonly<AppState>,
       ) => string);
-  contextItemPredicate?: (
+  predicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
     appProps: ExcalidrawProps,

src/components/ActiveFile.tsx

@@ -1,23 +0,0 @@
-// TODO barnabasmolnar/editor-redesign
-// this icon is not great
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { save } from "../components/icons";
-import { t } from "../i18n";
-
-import "./ActiveFile.scss";
-import MenuItem from "./MenuItem";
-
-type ActiveFileProps = {
-  fileName?: string;
-  onSave: () => void;
-};
-
-export const ActiveFile = ({ fileName, onSave }: ActiveFileProps) => (
-  <MenuItem
-    label={`${t("buttons.save")}`}
-    shortcut={getShortcutFromShortcutName("saveScene")}
-    dataTestId="save-button"
-    onClick={onSave}
-    icon={save}
-  />
-);

src/components/App.tsx

@@ -272,13 +272,9 @@ import {
   isLocalLink,
 } from "../element/Hyperlink";
 import { shouldShowBoundingBox } from "../element/transformHandles";
-import { atom } from "jotai";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
 
-export const isMenuOpenAtom = atom(false);
-export const isDropdownOpenAtom = atom(false);
-
 const deviceContextInitialValue = {
   isSmScreen: false,
   isMobile: false,
@@ -287,15 +283,12 @@ const deviceContextInitialValue = {
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
-export const useDevice = () => useContext<Device>(DeviceContext);
 
-const ExcalidrawContainerContext = React.createContext<{
+export const ExcalidrawContainerContext = React.createContext<{
   container: HTMLDivElement | null;
   id: string | null;
 }>({ container: null, id: null });
 ExcalidrawContainerContext.displayName = "ExcalidrawContainerContext";
-export const useExcalidrawContainer = () =>
-  useContext(ExcalidrawContainerContext);
 
 const ExcalidrawElementsContext = React.createContext<
   readonly NonDeletedExcalidrawElement[]
@@ -313,15 +306,27 @@ ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
 const ExcalidrawSetAppStateContext = React.createContext<
   React.Component<any, AppState>["setState"]
->(() => {});
+>(() => {
+  console.warn("unitialized ExcalidrawSetAppStateContext context!");
+});
 ExcalidrawSetAppStateContext.displayName = "ExcalidrawSetAppStateContext";
 
+const ExcalidrawActionManagerContext = React.createContext<ActionManager>(
+  null!,
+);
+ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
+
+export const useDevice = () => useContext<Device>(DeviceContext);
+export const useExcalidrawContainer = () =>
+  useContext(ExcalidrawContainerContext);
 export const useExcalidrawElements = () =>
   useContext(ExcalidrawElementsContext);
 export const useExcalidrawAppState = () =>
   useContext(ExcalidrawAppStateContext);
 export const useExcalidrawSetAppState = () =>
   useContext(ExcalidrawSetAppStateContext);
+export const useExcalidrawActionManager = () =>
+  useContext(ExcalidrawActionManagerContext);
 
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
@@ -534,8 +539,7 @@ class App extends React.Component<AppProps, AppState> {
       this.scene.getNonDeletedElements(),
       this.state,
     );
-    const { onCollabButtonClick, renderTopRightUI, renderCustomStats } =
+    const { renderTopRightUI, renderCustomStats } = this.props;
-      this.props;
 
     return (
       <div
@@ -559,75 +563,81 @@ class App extends React.Component<AppProps, AppState> {
                 <ExcalidrawElementsContext.Provider
                   value={this.scene.getNonDeletedElements()}
                 >
-                  <LayerUI
+                  <ExcalidrawActionManagerContext.Provider
-                    canvas={this.canvas}
+                    value={this.actionManager}
-                    appState={this.state}
-                    files={this.files}
-                    setAppState={this.setAppState}
-                    actionManager={this.actionManager}
-                    elements={this.scene.getNonDeletedElements()}
-                    onCollabButtonClick={onCollabButtonClick}
-                    onLockToggle={this.toggleLock}
-                    onPenModeToggle={this.togglePenMode}
-                    onInsertElements={(elements) =>
-                      this.addElementsFromPasteOrLibrary({
-                        elements,
-                        position: "center",
-                        files: null,
-                      })
-                    }
-                    langCode={getLanguage().code}
-                    isCollaborating={this.props.isCollaborating}
-                    renderTopRightUI={renderTopRightUI}
-                    renderCustomStats={renderCustomStats}
-                    renderCustomSidebar={this.props.renderSidebar}
-                    showExitZenModeBtn={
-                      typeof this.props?.zenModeEnabled === "undefined" &&
-                      this.state.zenModeEnabled
-                    }
-                    libraryReturnUrl={this.props.libraryReturnUrl}
-                    UIOptions={this.props.UIOptions}
-                    focusContainer={this.focusContainer}
-                    library={this.library}
-                    id={this.id}
-                    onImageAction={this.onImageAction}
-                    renderWelcomeScreen={
-                      this.state.showWelcomeScreen &&
-                      this.state.activeTool.type === "selection" &&
-                      !this.scene.getElementsIncludingDeleted().length
-                    }
                   >
-                    {this.props.children}
+                    <LayerUI
-                  </LayerUI>
+                      test={<div />}
-                  <div className="excalidraw-textEditorContainer" />
+                      canvas={this.canvas}
-                  <div className="excalidraw-contextMenuContainer" />
+                      appState={this.state}
-                  {selectedElement.length === 1 &&
+                      files={this.files}
-                    !this.state.contextMenu &&
+                      setAppState={this.setAppState}
-                    this.state.showHyperlinkPopup && (
+                      actionManager={this.actionManager}
-                      <Hyperlink
+                      elements={this.scene.getNonDeletedElements()}
-                        key={selectedElement[0].id}
+                      onLockToggle={this.toggleLock}
-                        element={selectedElement[0]}
+                      onPenModeToggle={this.togglePenMode}
-                        setAppState={this.setAppState}
+                      onInsertElements={(elements) =>
-                        onLinkOpen={this.props.onLinkOpen}
+                        this.addElementsFromPasteOrLibrary({
+                          elements,
+                          position: "center",
+                          files: null,
+                        })
+                      }
+                      langCode={getLanguage().code}
+                      isCollaborating={this.props.isCollaborating}
+                      renderTopRightUI={renderTopRightUI}
+                      renderCustomStats={renderCustomStats}
+                      renderCustomSidebar={this.props.renderSidebar}
+                      showExitZenModeBtn={
+                        typeof this.props?.zenModeEnabled === "undefined" &&
+                        this.state.zenModeEnabled
+                      }
+                      libraryReturnUrl={this.props.libraryReturnUrl}
+                      UIOptions={this.props.UIOptions}
+                      focusContainer={this.focusContainer}
+                      library={this.library}
+                      id={this.id}
+                      onImageAction={this.onImageAction}
+                      renderWelcomeScreen={
+                        !this.state.isLoading &&
+                        this.props.UIOptions.welcomeScreen &&
+                        this.state.showWelcomeScreen &&
+                        this.state.activeTool.type === "selection" &&
+                        !this.scene.getElementsIncludingDeleted().length
+                      }
+                    >
+                      {this.props.children}
+                    </LayerUI>
+                    <div className="excalidraw-textEditorContainer" />
+                    <div className="excalidraw-contextMenuContainer" />
+                    {selectedElement.length === 1 &&
+                      !this.state.contextMenu &&
+                      this.state.showHyperlinkPopup && (
+                        <Hyperlink
+                          key={selectedElement[0].id}
+                          element={selectedElement[0]}
+                          setAppState={this.setAppState}
+                          onLinkOpen={this.props.onLinkOpen}
+                        />
+                      )}
+                    {this.state.toast !== null && (
+                      <Toast
+                        message={this.state.toast.message}
+                        onClose={() => this.setToast(null)}
+                        duration={this.state.toast.duration}
+                        closable={this.state.toast.closable}
                       />
                     )}
-                  {this.state.toast !== null && (
+                    {this.state.contextMenu && (
-                    <Toast
+                      <ContextMenu
-                      message={this.state.toast.message}
+                        items={this.state.contextMenu.items}
-                      onClose={() => this.setToast(null)}
+                        top={this.state.contextMenu.top}
-                      duration={this.state.toast.duration}
+                        left={this.state.contextMenu.left}
-                      closable={this.state.toast.closable}
+                        actionManager={this.actionManager}
-                    />
+                      />
-                  )}
+                    )}
-                  {this.state.contextMenu && (
+                    <main>{this.renderCanvas()}</main>
-                    <ContextMenu
+                  </ExcalidrawActionManagerContext.Provider>
-                      items={this.state.contextMenu.items}
-                      top={this.state.contextMenu.top}
-                      left={this.state.contextMenu.left}
-                      actionManager={this.actionManager}
-                    />
-                  )}
-                  <main>{this.renderCanvas()}</main>
                 </ExcalidrawElementsContext.Provider>{" "}
               </ExcalidrawAppStateContext.Provider>
             </ExcalidrawSetAppStateContext.Provider>

src/components/Button.scss

@@ -0,0 +1,7 @@
+@import "../css/theme";
+
+.excalidraw {
+  .excalidraw-button {
+    @include outlineButtonStyles;
+  }
+}

src/components/Button.tsx

@@ -0,0 +1,35 @@
+import "./Button.scss";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  type?: "button" | "submit" | "reset";
+  onSelect: () => any;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A generic button component that follows Excalidraw's design system.
+ * Style can be customised using `className` or `style` prop.
+ * Accepts all props that a regular `button` element accepts.
+ */
+export const Button = ({
+  type = "button",
+  onSelect,
+  children,
+  className = "",
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={(event) => {
+        onSelect();
+        rest.onClick?.(event);
+      }}
+      type={type}
+      className={`excalidraw-button ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

src/components/ClearCanvas.tsx

@@ -1,39 +0,0 @@
-import { useState } from "react";
-import { t } from "../i18n";
-import { TrashIcon } from "./icons";
-
-import ConfirmDialog from "./ConfirmDialog";
-import MenuItem from "./MenuItem";
-
-const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
-  const [showDialog, setShowDialog] = useState(false);
-  const toggleDialog = () => {
-    setShowDialog(!showDialog);
-  };
-
-  return (
-    <>
-      <MenuItem
-        label={t("buttons.clearReset")}
-        icon={TrashIcon}
-        onClick={toggleDialog}
-        dataTestId="clear-canvas-button"
-      />
-
-      {showDialog && (
-        <ConfirmDialog
-          onConfirm={() => {
-            onConfirm();
-            toggleDialog();
-          }}
-          onCancel={toggleDialog}
-          title={t("clearCanvasDialog.title")}
-        >
-          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
-        </ConfirmDialog>
-      )}
-    </>
-  );
-};
-
-export default ClearCanvas;

src/components/CollabButton.tsx

@@ -1,49 +0,0 @@
-import { t } from "../i18n";
-import { UsersIcon } from "./icons";
-
-import "./CollabButton.scss";
-import MenuItem from "./MenuItem";
-import clsx from "clsx";
-
-const CollabButton = ({
-  isCollaborating,
-  collaboratorCount,
-  onClick,
-  isInHamburgerMenu = true,
-}: {
-  isCollaborating: boolean;
-  collaboratorCount: number;
-  onClick: () => void;
-  isInHamburgerMenu?: boolean;
-}) => {
-  return (
-    <>
-      {isInHamburgerMenu ? (
-        <MenuItem
-          label={t("labels.liveCollaboration")}
-          dataTestId="collab-button"
-          icon={UsersIcon}
-          onClick={onClick}
-          isCollaborating={isCollaborating}
-        />
-      ) : (
-        <button
-          className={clsx("collab-button", { active: isCollaborating })}
-          type="button"
-          onClick={onClick}
-          style={{ position: "relative" }}
-          title={t("labels.liveCollaboration")}
-        >
-          {UsersIcon}
-          {collaboratorCount > 0 && (
-            <div className="CollabButton-collaborators">
-              {collaboratorCount}
-            </div>
-          )}
-        </button>
-      )}
-    </>
-  );
-};
-
-export default CollabButton;

src/components/ConfirmDialog.tsx

@@ -3,9 +3,9 @@ import { Dialog, DialogProps } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
-import { isMenuOpenAtom } from "./App";
-import { isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
+import { useExcalidrawSetAppState } from "./App";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -23,9 +23,8 @@ const ConfirmDialog = (props: Props) => {
     className = "",
     ...rest
   } = props;
-
+  const setAppState = useExcalidrawSetAppState();
-  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
-  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
 
   return (
     <Dialog
@@ -39,16 +38,16 @@ const ConfirmDialog = (props: Props) => {
         <DialogActionButton
           label={cancelText}
           onClick={() => {
-            setIsMenuOpen(false);
+            setAppState({ openMenu: null });
-            setIsDropdownOpen(false);
+            setIsLibraryMenuOpen(false);
             onCancel();
           }}
         />
         <DialogActionButton
           label={confirmText}
           onClick={() => {
-            setIsMenuOpen(false);
+            setAppState({ openMenu: null });
-            setIsDropdownOpen(false);
+            setIsLibraryMenuOpen(false);
             onConfirm();
           }}
           actionType="danger"

src/components/ContextMenu.tsx

@@ -39,8 +39,8 @@ export const ContextMenu = React.memo(
       if (
         item &&
         (item === CONTEXT_MENU_SEPARATOR ||
-          !item.contextItemPredicate ||
+          !item.predicate ||
-          item.contextItemPredicate(
+          item.predicate(
             elements,
             appState,
             actionManager.app.props,

src/components/Dialog.tsx

@@ -2,7 +2,11 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDevice } from "../components/App";
+import {
+  useExcalidrawContainer,
+  useDevice,
+  useExcalidrawSetAppState,
+} from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, CloseIcon } from "./icons";
@@ -10,8 +14,8 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
-import { isMenuOpenAtom, isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -67,12 +71,12 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
-  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
+  const setAppState = useExcalidrawSetAppState();
-  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
 
   const onClose = () => {
-    setIsMenuOpen(false);
+    setAppState({ openMenu: null });
-    setIsDropdownOpen(false);
+    setIsLibraryMenuOpen(false);
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
   };

src/components/FixedSideContainer.scss

@@ -1,3 +1,5 @@
+@import "../css/variables.module";
+
 .excalidraw {
   .FixedSideContainer {
     position: absolute;
@@ -9,10 +11,10 @@
   }
 
   .FixedSideContainer_side_top {
-    left: 1rem;
+    left: var(--editor-container-padding);
-    top: 1rem;
+    top: var(--editor-container-padding);
-    right: 1rem;
+    right: var(--editor-container-padding);
-    bottom: 1rem;
+    bottom: var(--editor-container-padding);
     z-index: 2;
   }
 

src/components/HelpDialog.tsx

@@ -140,11 +140,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("toolBar.line")}
-              shortcuts={[KEYS.P, KEYS["6"]]}
+              shortcuts={[KEYS.L, KEYS["6"]]}
             />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={["Shift + P", KEYS["7"]]}
+              shortcuts={[KEYS.P, KEYS["7"]]}
             />
             <Shortcut
               label={t("toolBar.text")}

src/components/JSONExportDialog.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
-import { ExportIcon, exportToFileIcon, LinkIcon } from "./icons";
+import { exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
 import { actionSaveFileToDisk } from "../actions/actionExport";
 import { Card } from "./Card";
@@ -14,7 +14,6 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { trackEvent } from "../analytics";
 import { ActionManager } from "../actions/manager";
 import { getFrame } from "../utils";
-import MenuItem from "./MenuItem";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -94,6 +93,7 @@ export const JSONExportDialog = ({
   actionManager,
   exportOpts,
   canvas,
+  setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
   appState: AppState;
@@ -101,24 +101,15 @@ export const JSONExportDialog = ({
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
-  const [modalIsShown, setModalIsShown] = useState(false);
-
   const handleClose = React.useCallback(() => {
-    setModalIsShown(false);
+    setAppState({ openDialog: null });
-  }, []);
+  }, [setAppState]);
 
   return (
     <>
-      <MenuItem
+      {appState.openDialog === "jsonExport" && (
-        icon={ExportIcon}
-        label={t("buttons.export")}
-        onClick={() => {
-          setModalIsShown(true);
-        }}
-        dataTestId="json-export-button"
-      />
-      {modalIsShown && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}

src/components/LayerUI.scss

@@ -80,16 +80,6 @@
       }
     }
 
-    .layer-ui__wrapper__footer-center {
-      pointer-events: none;
-      & > * {
-        pointer-events: all;
-      }
-
-      display: flex;
-      width: 100%;
-      justify-content: flex-start;
-    }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,
     .disable-zen-mode--visible {

src/components/LayerUI.tsx

@@ -14,10 +14,10 @@ import {
   ExcalidrawProps,
   BinaryFiles,
   UIChildrenComponents,
+  UIWelcomeScreenComponents,
 } from "../types";
-import { muteFSAbortError, ReactChildrenToObject } from "../utils";
+import { muteFSAbortError, getReactChildren } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
-import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
@@ -41,35 +41,24 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { isMenuOpenAtom, useDevice } from "../components/App";
+import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
-import {
+import WelcomeScreen from "./welcome-screen/WelcomeScreen";
-  ExportImageIcon,
-  HamburgerMenuIcon,
-  WelcomeScreenMenuArrow,
-  WelcomeScreenTopToolbarArrow,
-} from "./icons";
-import { MenuLinks, Separator } from "./MenuUtils";
-import { useOutsideClickHook } from "../hooks/useOutsideClick";
-import WelcomeScreen from "./WelcomeScreen";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
 import { useAtom } from "jotai";
-import { LanguageList } from "../excalidraw-app/components/LanguageList";
+import MainMenu from "./main-menu/MainMenu";
-import WelcomeScreenDecor from "./WelcomeScreenDecor";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import MenuItem from "./MenuItem";
 
 interface LayerUIProps {
+  test: JSX.Element;
   actionManager: ActionManager;
   appState: AppState;
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
-  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
@@ -96,14 +85,12 @@ const LayerUI = ({
   setAppState,
   elements,
   canvas,
-  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
-
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -117,8 +104,27 @@ const LayerUI = ({
 }: LayerUIProps) => {
   const device = useDevice();
 
-  const childrenComponents =
+  const [childrenComponents, restChildren] =
-    ReactChildrenToObject<UIChildrenComponents>(children);
+    getReactChildren<UIChildrenComponents>(children, {
+      Menu: true,
+      FooterCenter: true,
+      WelcomeScreen: true,
+    });
+
+  const [WelcomeScreenComponents] = getReactChildren<UIWelcomeScreenComponents>(
+    renderWelcomeScreen
+      ? (
+          childrenComponents?.WelcomeScreen ?? (
+            <WelcomeScreen>
+              <WelcomeScreen.Center />
+              <WelcomeScreen.Hints.MenuHint />
+              <WelcomeScreen.Hints.ToolbarHint />
+              <WelcomeScreen.Hints.HelpHint />
+            </WelcomeScreen>
+          )
+        )?.props?.children
+      : null,
+  );
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -133,6 +139,7 @@ const LayerUI = ({
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
+        setAppState={setAppState}
       />
     );
   };
@@ -186,100 +193,37 @@ const LayerUI = ({
     );
   };
 
-  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom);
+  const renderMenu = () => {
-  const menuRef = useOutsideClickHook(() => setIsMenuOpen(false));
+    return (
-
+      childrenComponents.Menu || (
+        <MainMenu>
+          <MainMenu.DefaultItems.LoadScene />
+          <MainMenu.DefaultItems.SaveToActiveFile />
+          {/* FIXME we should to test for this inside the item itself */}
+          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
+          {/* FIXME we should to test for this inside the item itself */}
+          {UIOptions.canvasActions.saveAsImage && (
+            <MainMenu.DefaultItems.SaveAsImage />
+          )}
+          <MainMenu.DefaultItems.Help />
+          <MainMenu.DefaultItems.ClearCanvas />
+          <MainMenu.Separator />
+          <MainMenu.Group title="Excalidraw links">
+            <MainMenu.DefaultItems.Socials />
+          </MainMenu.Group>
+          <MainMenu.Separator />
+          <MainMenu.DefaultItems.ToggleTheme />
+          <MainMenu.DefaultItems.ChangeCanvasBackground />
+        </MainMenu>
+      )
+    );
+  };
   const renderCanvasActions = () => (
     <div style={{ position: "relative" }}>
-      <WelcomeScreenDecor
+      {WelcomeScreenComponents.MenuHint}
-        shouldRender={renderWelcomeScreen && !appState.isLoading}
+      {/* wrapping to Fragment stops React from occasionally complaining
-      >
+                about identical Keys */}
-        <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--menu-pointer">
+      <>{renderMenu()}</>
-          {WelcomeScreenMenuArrow}
-          <div>{t("welcomeScreen.menuHints")}</div>
-        </div>
-      </WelcomeScreenDecor>
-
-      <button
-        data-prevent-outside-click
-        className={clsx("menu-button", "zen-mode-transition", {
-          "transition-left": appState.zenModeEnabled,
-        })}
-        onClick={() => setIsMenuOpen(!isMenuOpen)}
-        type="button"
-        data-testid="menu-button"
-      >
-        {HamburgerMenuIcon}
-      </button>
-
-      {isMenuOpen && (
-        <div
-          ref={menuRef}
-          style={{ position: "absolute", top: "100%", marginTop: ".25rem" }}
-        >
-          <Section heading="canvasActions">
-            {/* the zIndex ensures this menu has higher stacking order,
-         see https://github.com/excalidraw/excalidraw/pull/1445 */}
-            <Island
-              className="menu-container"
-              padding={2}
-              style={{ zIndex: 1 }}
-            >
-              {!appState.viewModeEnabled &&
-                actionManager.renderAction("loadScene")}
-              {/* // TODO barnabasmolnar/editor-redesign  */}
-              {/* is this fine here? */}
-              {appState.fileHandle &&
-                actionManager.renderAction("saveToActiveFile")}
-              {renderJSONExportDialog()}
-              {UIOptions.canvasActions.saveAsImage && (
-                <MenuItem
-                  label={t("buttons.exportImage")}
-                  icon={ExportImageIcon}
-                  dataTestId="image-export-button"
-                  onClick={() => setAppState({ openDialog: "imageExport" })}
-                  shortcut={getShortcutFromShortcutName("imageExport")}
-                />
-              )}
-              {onCollabButtonClick && (
-                <CollabButton
-                  isCollaborating={isCollaborating}
-                  collaboratorCount={appState.collaborators.size}
-                  onClick={onCollabButtonClick}
-                />
-              )}
-              {actionManager.renderAction("toggleShortcuts", undefined, true)}
-              {!appState.viewModeEnabled &&
-                actionManager.renderAction("clearCanvas")}
-              <Separator />
-              <MenuLinks />
-              <Separator />
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  rowGap: ".5rem",
-                }}
-              >
-                <div>{actionManager.renderAction("toggleTheme")}</div>
-                <div style={{ padding: "0 0.625rem" }}>
-                  <LanguageList style={{ width: "100%" }} />
-                </div>
-                {!appState.viewModeEnabled && (
-                  <div>
-                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-                      {t("labels.canvasBackground")}
-                    </div>
-                    <div style={{ padding: "0 0.625rem" }}>
-                      {actionManager.renderAction("changeViewBackgroundColor")}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </Island>
-          </Section>
-        </div>
-      )}
     </div>
   );
 
@@ -316,9 +260,7 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
-        {renderWelcomeScreen && !appState.isLoading && (
+        {WelcomeScreenComponents.Center}
-          <WelcomeScreen appState={appState} actionManager={actionManager} />
-        )}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
@@ -333,17 +275,7 @@ const LayerUI = ({
             <Section heading="shapes" className="shapes-section">
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
-                  <WelcomeScreenDecor
+                  {WelcomeScreenComponents.ToolbarHint}
-                    shouldRender={renderWelcomeScreen && !appState.isLoading}
-                  >
-                    <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--top-toolbar-pointer">
-                      <div className="WelcomeScreen-decor--top-toolbar-pointer__label">
-                        {t("welcomeScreen.toolbarHints")}
-                      </div>
-                      {WelcomeScreenTopToolbarArrow}
-                    </div>
-                  </WelcomeScreenDecor>
-
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
                       gap={1}
@@ -410,18 +342,7 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList
+            <UserList collaborators={appState.collaborators} />
-              collaborators={appState.collaborators}
-              actionManager={actionManager}
-            />
-            {onCollabButtonClick && (
-              <CollabButton
-                isInHamburgerMenu={false}
-                isCollaborating={isCollaborating}
-                collaboratorCount={appState.collaborators.size}
-                onClick={onCollabButtonClick}
-              />
-            )}
             {renderTopRightUI?.(device.isMobile, appState)}
             {!appState.viewModeEnabled && (
               <LibraryButton appState={appState} setAppState={setAppState} />
@@ -451,6 +372,7 @@ const LayerUI = ({
 
   return (
     <>
+      {restChildren}
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -466,6 +388,7 @@ const LayerUI = ({
         />
       )}
       {renderImageExportDialog()}
+      {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
@@ -480,23 +403,22 @@ const LayerUI = ({
       )}
       {device.isMobile && (
         <MobileMenu
-          renderWelcomeScreen={renderWelcomeScreen}
           appState={appState}
           elements={elements}
           actionManager={actionManager}
           renderJSONExportDialog={renderJSONExportDialog}
           renderImageExportDialog={renderImageExportDialog}
           setAppState={setAppState}
-          onCollabButtonClick={onCollabButtonClick}
           onLockToggle={() => onLockToggle()}
           onPenModeToggle={onPenModeToggle}
           canvas={canvas}
-          isCollaborating={isCollaborating}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
+          renderMenu={renderMenu}
+          welcomeScreenCenter={WelcomeScreenComponents.Center}
         />
       )}
 
@@ -521,14 +443,12 @@ const LayerUI = ({
           >
             {renderFixedSideContainer()}
             <Footer
-              renderWelcomeScreen={renderWelcomeScreen}
               appState={appState}
               actionManager={actionManager}
               showExitZenModeBtn={showExitZenModeBtn}
-            >
+              footerCenter={childrenComponents.FooterCenter}
-              {childrenComponents.FooterCenter}
+              welcomeScreenHelp={WelcomeScreenComponents.HelpHint}
-            </Footer>
+            />
-
             {appState.showStats && (
               <Stats
                 appState={appState}

src/components/LibraryMenu.scss

@@ -129,4 +129,27 @@
       padding-right: 0;
     }
   }
+
+  .layer-ui__sidebar__header .dropdown-menu {
+    &.dropdown-menu--mobile {
+      top: 100%;
+    }
+    .dropdown-menu-container {
+      --gap: 0;
+      z-index: 1;
+      position: absolute;
+      top: 100%;
+      left: 0;
+
+      :root[dir="rtl"] & {
+        right: 0;
+        left: auto;
+      }
+
+      width: 196px;
+      box-shadow: var(--library-dropdown-shadow);
+      border-radius: var(--border-radius-lg);
+      padding: 0.25rem 0.5rem;
+    }
+  }
 }

src/components/LibraryMenuHeaderContent.tsx

@@ -13,14 +13,15 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
-import { useOutsideClickHook } from "../hooks/useOutsideClick";
+
-import MenuItem from "./MenuItem";
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { isDropdownOpenAtom } from "./App";
+
+export const isLibraryMenuOpenAtom = atom(false);
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
@@ -45,7 +46,9 @@ export const LibraryMenuHeader: React.FC<{
   appState,
 }) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-
+  const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
+    isLibraryMenuOpenAtom,
+  );
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -173,85 +176,86 @@ export const LibraryMenuHeader: React.FC<{
       });
   };
 
-  const [isDropdownOpen, setIsDropdownOpen] = useAtom(isDropdownOpenAtom);
+  const renderLibraryMenu = () => {
-  const dropdownRef = useOutsideClickHook(() => setIsDropdownOpen(false));
+    return (
-
+      <DropdownMenu open={isLibraryMenuOpen}>
+        <DropdownMenu.Trigger
+          className="Sidebar__dropdown-btn"
+          onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
+        >
+          {DotsIcon}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          onClickOutside={() => setIsLibraryMenuOpen(false)}
+          className="library-menu"
+        >
+          {!itemsSelected && (
+            <DropdownMenu.Item
+              onSelect={onLibraryImport}
+              icon={LoadIcon}
+              data-testid="lib-dropdown--load"
+            >
+              {t("buttons.load")}
+            </DropdownMenu.Item>
+          )}
+          {!!items.length && (
+            <DropdownMenu.Item
+              onSelect={onLibraryExport}
+              icon={ExportIcon}
+              data-testid="lib-dropdown--export"
+            >
+              {t("buttons.export")}
+            </DropdownMenu.Item>
+          )}
+          {!!items.length && (
+            <DropdownMenu.Item
+              onSelect={() => setShowRemoveLibAlert(true)}
+              icon={TrashIcon}
+            >
+              {resetLabel}
+            </DropdownMenu.Item>
+          )}
+          {itemsSelected && (
+            <DropdownMenu.Item
+              icon={publishIcon}
+              onSelect={() => setShowPublishLibraryDialog(true)}
+              data-testid="lib-dropdown--remove"
+            >
+              {t("buttons.publishLibrary")}
+            </DropdownMenu.Item>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  };
   return (
     <div style={{ position: "relative" }}>
-      <button
+      {renderLibraryMenu()}
-        type="button"
-        className="Sidebar__dropdown-btn"
-        data-prevent-outside-click
-        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-      >
-        {DotsIcon}
-      </button>
-
       {selectedItems.length > 0 && (
         <div className="library-actions-counter">{selectedItems.length}</div>
       )}
-
+      {showRemoveLibAlert && renderRemoveLibAlert()}
-      {isDropdownOpen && (
+      {showPublishLibraryDialog && (
-        <div
+        <PublishLibrary
-          className="Sidebar__dropdown-content menu-container"
+          onClose={() => setShowPublishLibraryDialog(false)}
-          ref={dropdownRef}
+          libraryItems={getSelectedItems(
-        >
+            libraryItemsData.libraryItems,
-          {!itemsSelected && (
+            selectedItems,
-            <MenuItem
-              label={t("buttons.load")}
-              icon={LoadIcon}
-              dataTestId="lib-dropdown--load"
-              onClick={onLibraryImport}
-            />
           )}
-          {showRemoveLibAlert && renderRemoveLibAlert()}
+          appState={appState}
-          {showPublishLibraryDialog && (
+          onSuccess={(data) =>
-            <PublishLibrary
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
-              onClose={() => setShowPublishLibraryDialog(false)}
+          }
-              libraryItems={getSelectedItems(
+          onError={(error) => window.alert(error)}
-                libraryItemsData.libraryItems,
+          updateItemsInStorage={() =>
-                selectedItems,
+            library.setLibrary(libraryItemsData.libraryItems)
-              )}
+          }
-              appState={appState}
+          onRemove={(id: string) =>
-              onSuccess={(data) =>
+            onSelectItems(selectedItems.filter((_id) => _id !== id))
-                onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
-              }
+        />
-              onError={(error) => window.alert(error)}
-              updateItemsInStorage={() =>
-                library.setLibrary(libraryItemsData.libraryItems)
-              }
-              onRemove={(id: string) =>
-                onSelectItems(selectedItems.filter((_id) => _id !== id))
-              }
-            />
-          )}
-          {publishLibSuccess && renderPublishSuccess()}
-          {!!items.length && (
-            <>
-              <MenuItem
-                label={t("buttons.export")}
-                icon={ExportIcon}
-                onClick={onLibraryExport}
-                dataTestId="lib-dropdown--export"
-              />
-              <MenuItem
-                label={resetLabel}
-                icon={TrashIcon}
-                onClick={() => setShowRemoveLibAlert(true)}
-                dataTestId="lib-dropdown--remove"
-              />
-            </>
-          )}
-          {itemsSelected && (
-            <MenuItem
-              label={t("buttons.publishLibrary")}
-              icon={publishIcon}
-              dataTestId="lib-dropdown--publish"
-              onClick={() => setShowPublishLibraryDialog(true)}
-            />
-          )}
-        </div>
       )}
+      {publishLibSuccess && renderPublishSuccess()}
     </div>
   );
 };

src/components/Menu.scss

@@ -1,85 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .menu-container {
-    background-color: #fff !important;
-    max-height: calc(100vh - 150px);
-    overflow-y: auto;
-  }
-
-  .menu-button {
-    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
-
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-  }
-
-  .menu-item {
-    display: flex;
-    background-color: transparent;
-    border: 0;
-    align-items: center;
-    padding: 0 0.625rem;
-    height: 2rem;
-    column-gap: 0.625rem;
-    font-size: 0.875rem;
-    color: var(--color-gray-100);
-    cursor: pointer;
-    border-radius: var(--border-radius-md);
-    width: 100%;
-    box-sizing: border-box;
-    font-weight: normal;
-    font-family: inherit;
-
-    @media screen and (min-width: 1921px) {
-      height: 2.25rem;
-    }
-
-    &__text {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &__shortcut {
-      margin-inline-start: auto;
-      opacity: 0.5;
-    }
-
-    &:hover {
-      background-color: var(--button-hover);
-      text-decoration: none;
-    }
-
-    svg {
-      width: 1rem;
-      height: 1rem;
-      display: block;
-    }
-
-    &.active-collab {
-      background-color: #ecfdf5;
-      color: #064e3c;
-    }
-  }
-
-  &.theme--dark {
-    .menu-item {
-      color: var(--color-gray-40);
-
-      &.active-collab {
-        background-color: #064e3c;
-        color: #ecfdf5;
-      }
-    }
-
-    .menu-container {
-      background-color: var(--color-gray-90) !important;
-    }
-  }
-}

src/components/MenuItem.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import "./Menu.scss";
-
-interface MenuProps {
-  icon: JSX.Element;
-  onClick: () => void;
-  label: string;
-  dataTestId: string;
-  shortcut?: string;
-  isCollaborating?: boolean;
-}
-
-const MenuItem = ({
-  icon,
-  onClick,
-  label,
-  dataTestId,
-  shortcut,
-  isCollaborating,
-}: MenuProps) => {
-  return (
-    <button
-      className={clsx("menu-item", { "active-collab": isCollaborating })}
-      aria-label={label}
-      onClick={onClick}
-      data-testid={dataTestId}
-      title={label}
-      type="button"
-    >
-      <div className="menu-item__icon">{icon}</div>
-      <div className="menu-item__text">{label}</div>
-      {shortcut && <div className="menu-item__shortcut">{shortcut}</div>}
-    </button>
-  );
-};
-
-export default MenuItem;

src/components/MenuUtils.tsx

@@ -1,53 +0,0 @@
-import { GithubIcon, DiscordIcon, PlusPromoIcon, TwitterIcon } from "./icons";
-
-export const MenuLinks = () => (
-  <>
-    <a
-      href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
-      target="_blank"
-      rel="noreferrer"
-      className="menu-item"
-      style={{ color: "var(--color-promo)" }}
-    >
-      <div className="menu-item__icon">{PlusPromoIcon}</div>
-      <div className="menu-item__text">Excalidraw+</div>
-    </a>
-    <a
-      className="menu-item"
-      href="https://github.com/excalidraw/excalidraw"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{GithubIcon}</div>
-      <div className="menu-item__text">GitHub</div>
-    </a>
-    <a
-      className="menu-item"
-      target="_blank"
-      href="https://discord.gg/UexuTaE"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{DiscordIcon}</div>
-      <div className="menu-item__text">Discord</div>
-    </a>
-    <a
-      className="menu-item"
-      target="_blank"
-      href="https://twitter.com/excalidraw"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{TwitterIcon}</div>
-      <div className="menu-item__text">Twitter</div>
-    </a>
-  </>
-);
-
-export const Separator = () => (
-  <div
-    style={{
-      height: "1px",
-      backgroundColor: "var(--default-border-color)",
-      margin: ".5rem 0",
-    }}
-  />
-);

src/components/MobileMenu.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps } from "../types";
+import {
+  AppState,
+  Device,
+  ExcalidrawProps,
+  UIWelcomeScreenComponents,
+} from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -11,18 +16,12 @@ import { HintViewer } from "./HintViewer";
 import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
-import CollabButton from "./CollabButton";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
-import { UserList } from "./UserList";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
-import { MenuLinks, Separator } from "./MenuUtils";
-import WelcomeScreen from "./WelcomeScreen";
-import MenuItem from "./MenuItem";
-import { ExportImageIcon } from "./icons";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -31,11 +30,9 @@ type MobileMenuProps = {
   renderImageExportDialog: () => React.ReactNode;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
-  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
-  isCollaborating: boolean;
 
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
@@ -45,34 +42,30 @@ type MobileMenuProps = {
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
-  renderWelcomeScreen?: boolean;
+  renderMenu: () => React.ReactNode;
+  welcomeScreenCenter: UIWelcomeScreenComponents["Center"];
 };
 
 export const MobileMenu = ({
   appState,
   elements,
   actionManager,
-  renderJSONExportDialog,
-  renderImageExportDialog,
   setAppState,
-  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   canvas,
-  isCollaborating,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
   renderSidebars,
   device,
-  renderWelcomeScreen,
+  renderMenu,
+  welcomeScreenCenter,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        {renderWelcomeScreen && !appState.isLoading && (
+        {welcomeScreenCenter}
-          <WelcomeScreen appState={appState} actionManager={actionManager} />
-        )}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -80,20 +73,6 @@ export const MobileMenu = ({
                 <Island padding={1} className="App-toolbar App-toolbar--mobile">
                   {heading}
                   <Stack.Row gap={1}>
-                    {/* <PenModeButton
-                      checked={appState.penMode}
-                      onChange={onPenModeToggle}
-                      title={t("toolBar.penMode")}
-                      isMobile
-                      penDetected={appState.penDetected}
-                    />
-                    <LockButton
-                      checked={appState.activeTool.locked}
-                      onChange={onLockToggle}
-                      title={t("toolBar.lock")}
-                      isMobile
-                    />
-                    <div className="App-toolbar__divider"></div> */}
                     <ShapesSwitcher
                       appState={appState}
                       canvas={canvas}
@@ -115,7 +94,6 @@ export const MobileMenu = ({
                     title={t("toolBar.penMode")}
                     isMobile
                     penDetected={appState.penDetected}
-                    // penDetected={true}
                   />
                   <LockButton
                     checked={appState.activeTool.locked}
@@ -147,16 +125,12 @@ export const MobileMenu = ({
 
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled) {
-      return (
+      return <div className="App-toolbar-content">{renderMenu()}</div>;
-        <div className="App-toolbar-content">
-          {actionManager.renderAction("toggleCanvasMenu")}
-        </div>
-      );
     }
 
     return (
       <div className="App-toolbar-content">
-        {actionManager.renderAction("toggleCanvasMenu")}
+        {renderMenu()}
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -168,58 +142,6 @@ export const MobileMenu = ({
     );
   };
 
-  const renderCanvasActions = () => {
-    if (appState.viewModeEnabled) {
-      return (
-        <>
-          {renderJSONExportDialog()}
-          <MenuItem
-            label={t("buttons.exportImage")}
-            icon={ExportImageIcon}
-            dataTestId="image-export-button"
-            onClick={() => setAppState({ openDialog: "imageExport" })}
-          />
-          {renderImageExportDialog()}
-        </>
-      );
-    }
-    return (
-      <>
-        {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
-        {renderJSONExportDialog()}
-        {renderImageExportDialog()}
-        <MenuItem
-          label={t("buttons.exportImage")}
-          icon={ExportImageIcon}
-          dataTestId="image-export-button"
-          onClick={() => setAppState({ openDialog: "imageExport" })}
-        />
-        {onCollabButtonClick && (
-          <CollabButton
-            isCollaborating={isCollaborating}
-            collaboratorCount={appState.collaborators.size}
-            onClick={onCollabButtonClick}
-          />
-        )}
-        {actionManager.renderAction("toggleShortcuts", undefined, true)}
-        {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
-        <Separator />
-        <MenuLinks />
-        <Separator />
-        {!appState.viewModeEnabled && (
-          <div style={{ marginBottom: ".5rem" }}>
-            <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-              {t("labels.canvasBackground")}
-            </div>
-            <div style={{ padding: "0 0.625rem" }}>
-              {actionManager.renderAction("changeViewBackgroundColor")}
-            </div>
-          </div>
-        )}
-        {actionManager.renderAction("toggleTheme")}
-      </>
-    );
-  };
   return (
     <>
       {renderSidebars()}
@@ -244,27 +166,9 @@ export const MobileMenu = ({
         }}
       >
         <Island padding={0}>
-          {appState.openMenu === "canvas" ? (
+          {appState.openMenu === "shape" &&
-            <Section className="App-mobile-menu" heading="canvasActions">
+          !appState.viewModeEnabled &&
-              <div className="panelColumn">
+          showSelectedShapeActions(appState, elements) ? (
-                <Stack.Col gap={2}>
-                  {renderCanvasActions()}
-                  {appState.collaborators.size > 0 && (
-                    <fieldset>
-                      <legend>{t("labels.collaborators")}</legend>
-                      <UserList
-                        mobile
-                        collaborators={appState.collaborators}
-                        actionManager={actionManager}
-                      />
-                    </fieldset>
-                  )}
-                </Stack.Col>
-              </div>
-            </Section>
-          ) : appState.openMenu === "shape" &&
-            !appState.viewModeEnabled &&
-            showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}

src/components/Sidebar/Sidebar.scss

@@ -3,24 +3,6 @@
 
 .excalidraw {
   .Sidebar {
-    &__dropdown-content {
-      z-index: 1;
-      position: absolute;
-      top: 100%;
-      left: 0;
-
-      :root[dir="rtl"] & {
-        right: 0;
-        left: auto;
-      }
-
-      margin-top: 0.25rem;
-      width: 180px;
-      box-shadow: var(--library-dropdown-shadow);
-      border-radius: var(--border-radius-lg);
-      padding: 0.25rem 0.5rem;
-    }
-
     &__close-btn,
     &__pin-btn,
     &__dropdown-btn {

src/components/UserList.tsx

@@ -4,16 +4,16 @@ import React from "react";
 import clsx from "clsx";
 import { AppState, Collaborator } from "../types";
 import { Tooltip } from "./Tooltip";
-import { ActionManager } from "../actions/manager";
+import { useExcalidrawActionManager } from "./App";
 
 export const UserList: React.FC<{
   className?: string;
   mobile?: boolean;
   collaborators: AppState["collaborators"];
-  actionManager: ActionManager;
+}> = ({ className, mobile, collaborators }) => {
-}> = ({ className, mobile, collaborators, actionManager }) => {
+  const actionManager = useExcalidrawActionManager();
-  const uniqueCollaborators = new Map<string, Collaborator>();
 
+  const uniqueCollaborators = new Map<string, Collaborator>();
   collaborators.forEach((collaborator, socketId) => {
     uniqueCollaborators.set(
       // filter on user id, else fall back on unique socketId
@@ -44,26 +44,6 @@ export const UserList: React.FC<{
         );
       });
 
-  // TODO barnabasmolnar/editor-redesign
-  // probably remove before shipping :)
-  // 20 fake collaborators; for easy, convenient debug purposes ˇˇ
-  // const avatars = Array.from({ length: 20 }).map((_, index) => {
-  //   const avatarJSX = actionManager.renderAction("goToCollaborator", [
-  //     index.toString(),
-  //     {
-  //       username: `User ${index}`,
-  //     },
-  //   ]);
-
-  //   return mobile ? (
-  //     <Tooltip label={`User ${index}`} key={index}>
-  //       {avatarJSX}
-  //     </Tooltip>
-  //   ) : (
-  //     <React.Fragment key={index}>{avatarJSX}</React.Fragment>
-  //   );
-  // });
-
   return (
     <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
       {avatars}

src/components/WelcomeScreen.tsx

@@ -1,137 +0,0 @@
-import { useAtom } from "jotai";
-import { actionLoadScene, actionShortcuts } from "../actions";
-import { ActionManager } from "../actions/manager";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { isExcalidrawPlusSignedUser } from "../constants";
-import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
-import { t } from "../i18n";
-import { AppState } from "../types";
-import {
-  ExcalLogo,
-  HelpIcon,
-  LoadIcon,
-  PlusPromoIcon,
-  UsersIcon,
-} from "./icons";
-import "./WelcomeScreen.scss";
-
-const WelcomeScreenItem = ({
-  label,
-  shortcut,
-  onClick,
-  icon,
-  link,
-}: {
-  label: string;
-  shortcut: string | null;
-  onClick?: () => void;
-  icon: JSX.Element;
-  link?: string;
-}) => {
-  if (link) {
-    return (
-      <a
-        className="WelcomeScreen-item"
-        href={link}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <div className="WelcomeScreen-item__label">
-          {icon}
-          {label}
-        </div>
-      </a>
-    );
-  }
-
-  return (
-    <button className="WelcomeScreen-item" type="button" onClick={onClick}>
-      <div className="WelcomeScreen-item__label">
-        {icon}
-        {label}
-      </div>
-      {shortcut && (
-        <div className="WelcomeScreen-item__shortcut">{shortcut}</div>
-      )}
-    </button>
-  );
-};
-
-const WelcomeScreen = ({
-  appState,
-  actionManager,
-}: {
-  appState: AppState;
-  actionManager: ActionManager;
-}) => {
-  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
-
-  let subheadingJSX;
-
-  if (isExcalidrawPlusSignedUser) {
-    subheadingJSX = t("welcomeScreen.switchToPlusApp")
-      .split(/(Excalidraw\+)/)
-      .map((bit, idx) => {
-        if (bit === "Excalidraw+") {
-          return (
-            <a
-              style={{ pointerEvents: "all" }}
-              href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
-              key={idx}
-            >
-              Excalidraw+
-            </a>
-          );
-        }
-        return bit;
-      });
-  } else {
-    subheadingJSX = t("welcomeScreen.data");
-  }
-
-  return (
-    <div className="WelcomeScreen-container">
-      <div className="WelcomeScreen-logo virgil WelcomeScreen-decor">
-        {ExcalLogo} Excalidraw
-      </div>
-      <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--subheading">
-        {subheadingJSX}
-      </div>
-      <div className="WelcomeScreen-items">
-        {!appState.viewModeEnabled && (
-          <WelcomeScreenItem
-            // TODO barnabasmolnar/editor-redesign
-            // do we want the internationalized labels here that are currently
-            // in use elsewhere or new ones?
-            label={t("buttons.load")}
-            onClick={() => actionManager.executeAction(actionLoadScene)}
-            shortcut={getShortcutFromShortcutName("loadScene")}
-            icon={LoadIcon}
-          />
-        )}
-        <WelcomeScreenItem
-          label={t("labels.liveCollaboration")}
-          shortcut={null}
-          onClick={() => setCollabDialogShown(true)}
-          icon={UsersIcon}
-        />
-        <WelcomeScreenItem
-          onClick={() => actionManager.executeAction(actionShortcuts)}
-          label={t("helpDialog.title")}
-          shortcut="?"
-          icon={HelpIcon}
-        />
-        {!isExcalidrawPlusSignedUser && (
-          <WelcomeScreenItem
-            link="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
-            label="Try Excalidraw Plus!"
-            shortcut={null}
-            icon={PlusPromoIcon}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default WelcomeScreen;

src/components/WelcomeScreenDecor.tsx

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-
-const WelcomeScreenDecor = ({
-  children,
-  shouldRender,
-}: {
-  children: ReactNode;
-  shouldRender: boolean;
-}) => (shouldRender ? <>{children}</> : null);
-
-export default WelcomeScreenDecor;

src/components/dropdownMenu/DropdownMenu.scss

@@ -0,0 +1,127 @@
+@import "../../css/variables.module";
+
+.excalidraw {
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    margin-top: 0.25rem;
+
+    &--mobile {
+      bottom: 55px;
+      top: auto;
+      left: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 0.75rem;
+
+      .dropdown-menu-container {
+        padding: 8px 8px;
+        box-sizing: border-box;
+        background-color: var(--island-bg-color);
+        box-shadow: var(--shadow-island);
+        border-radius: var(--border-radius-lg);
+        position: relative;
+        transition: box-shadow 0.5s ease-in-out;
+
+        &.zen-mode {
+          box-shadow: none;
+        }
+      }
+    }
+
+    .dropdown-menu-container {
+      background-color: #fff !important;
+      max-height: calc(100vh - 150px);
+      overflow-y: auto;
+      --gap: 2;
+    }
+
+    .dropdown-menu-item-base {
+      display: flex;
+      padding: 0 0.625rem;
+      column-gap: 0.625rem;
+      font-size: 0.875rem;
+      color: var(--color-gray-100);
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: normal;
+      font-family: inherit;
+    }
+
+    .dropdown-menu-item {
+      background-color: transparent;
+      border: 0;
+      align-items: center;
+      height: 2rem;
+      cursor: pointer;
+      border-radius: var(--border-radius-md);
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      &__text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      &__shortcut {
+        margin-inline-start: auto;
+        opacity: 0.5;
+      }
+
+      &:hover {
+        background-color: var(--button-hover-bg);
+        text-decoration: none;
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+      }
+    }
+
+    .dropdown-menu-item-custom {
+      margin-top: 0.5rem;
+    }
+
+    .dropdown-menu-group-title {
+      font-size: 14px;
+      text-align: left;
+      margin: 10px 0;
+      font-weight: 500;
+    }
+  }
+  &.theme--dark {
+    .dropdown-menu-item {
+      color: var(--color-gray-40);
+    }
+
+    .dropdown-menu-container {
+      background-color: var(--color-gray-90) !important;
+    }
+  }
+
+  .dropdown-menu-button {
+    @include outlineButtonStyles;
+    background-color: var(--island-bg-color);
+    width: var(--lg-button-size);
+    height: var(--lg-button-size);
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+
+    &--mobile {
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
+  }
+}

src/components/dropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import DropdownMenuTrigger from "./DropdownMenuTrigger";
+import DropdownMenuItem from "./DropdownMenuItem";
+import MenuSeparator from "./DropdownMenuSeparator";
+import DropdownMenuGroup from "./DropdownMenuGroup";
+import DropdownMenuContent from "./DropdownMenuContent";
+import DropdownMenuItemLink from "./DropdownMenuItemLink";
+import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
+import {
+  getMenuContentComponent,
+  getMenuTriggerComponent,
+} from "./dropdownMenuUtils";
+
+import "./DropdownMenu.scss";
+
+const DropdownMenu = ({
+  children,
+  open,
+}: {
+  children?: React.ReactNode;
+  open: boolean;
+}) => {
+  const MenuTriggerComp = getMenuTriggerComponent(children);
+  const MenuContentComp = getMenuContentComponent(children);
+  return (
+    <>
+      {MenuTriggerComp}
+      {open && MenuContentComp}
+    </>
+  );
+};
+
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.ItemLink = DropdownMenuItemLink;
+DropdownMenu.ItemCustom = DropdownMenuItemCustom;
+DropdownMenu.Group = DropdownMenuGroup;
+DropdownMenu.Separator = MenuSeparator;
+
+export default DropdownMenu;
+
+DropdownMenu.displayName = "DropdownMenu";

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -0,0 +1,51 @@
+import { useOutsideClickHook } from "../../hooks/useOutsideClick";
+import { Island } from "../Island";
+
+import { useDevice } from "../App";
+import clsx from "clsx";
+import Stack from "../Stack";
+
+const MenuContent = ({
+  children,
+  onClickOutside,
+  className = "",
+  style,
+}: {
+  children?: React.ReactNode;
+  onClickOutside?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  const device = useDevice();
+  const menuRef = useOutsideClickHook(() => {
+    onClickOutside?.();
+  });
+
+  const classNames = clsx(`dropdown-menu ${className}`, {
+    "dropdown-menu--mobile": device.isMobile,
+  }).trim();
+  return (
+    <div
+      ref={menuRef}
+      className={classNames}
+      style={style}
+      data-testid="dropdown-menu"
+    >
+      {/* the zIndex ensures this menu has higher stacking order,
+    see https://github.com/excalidraw/excalidraw/pull/1445 */}
+      {device.isMobile ? (
+        <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
+      ) : (
+        <Island
+          className="dropdown-menu-container"
+          padding={2}
+          style={{ zIndex: 1 }}
+        >
+          {children}
+        </Island>
+      )}
+    </div>
+  );
+};
+export default MenuContent;
+MenuContent.displayName = "DropdownMenuContent";

src/components/dropdownMenu/DropdownMenuGroup.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const MenuGroup = ({
+  children,
+  className = "",
+  style,
+  title,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+}) => {
+  return (
+    <div className={`dropdown-menu-group ${className}`} style={style}>
+      {title && <p className="dropdown-menu-group-title">{title}</p>}
+      {children}
+    </div>
+  );
+};
+
+export default MenuGroup;
+MenuGroup.displayName = "DropdownMenuGroup";

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import MenuItemContent from "./DropdownMenuItemContent";
+
+export const getDrodownMenuItemClassName = (className = "") => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
+};
+
+const DropdownMenuItem = ({
+  icon,
+  onSelect,
+  children,
+  shortcut,
+  className,
+  ...rest
+}: {
+  icon?: JSX.Element;
+  onSelect: () => void;
+  children: React.ReactNode;
+  shortcut?: string;
+  className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      {...rest}
+      onClick={onSelect}
+      type="button"
+      className={getDrodownMenuItemClassName(className)}
+      title={rest.title ?? rest["aria-label"]}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </button>
+  );
+};
+
+export default DropdownMenuItem;
+DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -0,0 +1,23 @@
+import { useDevice } from "../App";
+
+const MenuItemContent = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      <div className="dropdown-menu-item__icon">{icon}</div>
+      <div className="dropdown-menu-item__text">{children}</div>
+      {shortcut && !device.isMobile && (
+        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+export default MenuItemContent;

src/components/dropdownMenu/DropdownMenuItemCustom.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const DropdownMenuItemCustom = ({
+  children,
+  className = "",
+  ...rest
+}: {
+  children: React.ReactNode;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      {...rest}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DropdownMenuItemCustom;

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -0,0 +1,35 @@
+import MenuItemContent from "./DropdownMenuItemContent";
+import React from "react";
+import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
+const DropdownMenuItemLink = ({
+  icon,
+  shortcut,
+  href,
+  children,
+  className = "",
+  ...rest
+}: {
+  icon?: JSX.Element;
+  children: React.ReactNode;
+  shortcut?: string;
+  className?: string;
+  href: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <a
+      {...rest}
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={getDrodownMenuItemClassName(className)}
+      title={rest.title ?? rest["aria-label"]}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </a>
+  );
+};
+
+export default DropdownMenuItemLink;
+DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const MenuSeparator = () => (
+  <div
+    style={{
+      height: "1px",
+      backgroundColor: "var(--default-border-color)",
+      margin: ".5rem 0",
+    }}
+  />
+);
+
+export default MenuSeparator;
+MenuSeparator.displayName = "DropdownMenuSeparator";

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { useDevice, useExcalidrawAppState } from "../App";
+
+const MenuTrigger = ({
+  className = "",
+  children,
+  onToggle,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onToggle: () => void;
+}) => {
+  const appState = useExcalidrawAppState();
+  const device = useDevice();
+  const classNames = clsx(
+    `dropdown-menu-button ${className}`,
+    "zen-mode-transition",
+    {
+      "transition-left": appState.zenModeEnabled,
+      "dropdown-menu-button--mobile": device.isMobile,
+    },
+  ).trim();
+  return (
+    <button
+      data-prevent-outside-click
+      className={classNames}
+      onClick={onToggle}
+      type="button"
+      data-testid="dropdown-menu-button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default MenuTrigger;
+MenuTrigger.displayName = "DropdownMenuTrigger";

src/components/dropdownMenu/dropdownMenuUtils.ts

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const getMenuTriggerComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuTrigger",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};
+
+export const getMenuContentComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuContent",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};

src/components/footer/Footer.tsx

@@ -1,7 +1,11 @@
 import clsx from "clsx";
+import { actionShortcuts } from "../../actions";
 import { ActionManager } from "../../actions/manager";
-import { t } from "../../i18n";
+import {
-import { AppState } from "../../types";
+  AppState,
+  UIChildrenComponents,
+  UIWelcomeScreenComponents,
+} from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -9,24 +13,22 @@ import {
   ZoomActions,
 } from "../Actions";
 import { useDevice } from "../App";
-import { WelcomeScreenHelpArrow } from "../icons";
+import { HelpButton } from "../HelpButton";
 import { Section } from "../Section";
 import Stack from "../Stack";
-import WelcomeScreenDecor from "../WelcomeScreenDecor";
-import FooterCenter from "./FooterCenter";
 
 const Footer = ({
   appState,
   actionManager,
   showExitZenModeBtn,
-  renderWelcomeScreen,
+  footerCenter,
-  children,
+  welcomeScreenHelp,
 }: {
   appState: AppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
-  renderWelcomeScreen: boolean;
+  footerCenter: UIChildrenComponents["FooterCenter"];
-  children?: React.ReactNode;
+  welcomeScreenHelp: UIWelcomeScreenComponents["HelpHint"];
 }) => {
   const device = useDevice();
   const showFinalize =
@@ -71,23 +73,17 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <FooterCenter>{children}</FooterCenter>
+      {footerCenter}
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>
-          <WelcomeScreenDecor
+          {welcomeScreenHelp}
-            shouldRender={renderWelcomeScreen && !appState.isLoading}
+          <HelpButton
-          >
+            onClick={() => actionManager.executeAction(actionShortcuts)}
-            <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--help-pointer">
+          />
-              <div>{t("welcomeScreen.helpHints")}</div>
-              {WelcomeScreenHelpArrow}
-            </div>
-          </WelcomeScreenDecor>
-
-          {actionManager.renderAction("toggleShortcuts")}
         </div>
       </div>
       <ExitZenModeAction

src/components/footer/FooterCenter.scss

@@ -0,0 +1,10 @@
+.footer-center {
+  pointer-events: none;
+  & > * {
+    pointer-events: all;
+  }
+
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}

src/components/footer/FooterCenter.tsx

@@ -1,11 +1,12 @@
 import clsx from "clsx";
 import { useExcalidrawAppState } from "../App";
+import "./FooterCenter.scss";
 
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
   const appState = useExcalidrawAppState();
   return (
     <div
-      className={clsx("layer-ui__wrapper__footer-center zen-mode-transition", {
+      className={clsx("footer-center zen-mode-transition", {
         "layer-ui__wrapper__footer-left--transition-bottom":
           appState.zenModeEnabled,
       })}

src/components/icons.tsx

@@ -883,7 +883,7 @@ export const CenterHorizontallyIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-export const UsersIcon = createIcon(
+export const usersIcon = createIcon(
   <g strokeWidth="1.5">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <circle cx="9" cy="7" r="4"></circle>

src/components/live-collaboration/LiveCollaborationTrigger.scss

@@ -1,30 +1,23 @@
-@import "../css/variables.module";
+@import "../../css/variables.module";
 
 .excalidraw {
   .collab-button {
-    @include outlineButtonStyles;
+    --button-bg: var(--color-primary);
-    width: var(--lg-button-size);
+    --button-color: white;
-    height: var(--lg-button-size);
+    --button-border: var(--color-primary);
+
+    --button-width: var(--lg-button-size);
+    --button-height: var(--lg-button-size);
+
+    --button-hover-bg: var(--color-primary-darker);
+    --button-hover-border: var(--color-primary-darker);
+
+    --button-active-bg: var(--color-primary-darker);
 
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-    color: white;
     flex-shrink: 0;
 
-    &:hover {
+    // double .active to force specificity
-      background-color: var(--color-primary-darker);
+    &.active.active {
-      border-color: var(--color-primary-darker);
-    }
-
-    &:active {
-      background-color: var(--color-primary-darker);
-    }
-
-    &.active {
       background-color: #0fb884;
       border-color: #0fb884;
 

src/components/live-collaboration/LiveCollaborationTrigger.tsx

@@ -0,0 +1,40 @@
+import { t } from "../../i18n";
+import { usersIcon } from "../icons";
+import { Button } from "../Button";
+
+import clsx from "clsx";
+import { useExcalidrawAppState } from "../App";
+
+import "./LiveCollaborationTrigger.scss";
+
+const LiveCollaborationTrigger = ({
+  isCollaborating,
+  onSelect,
+  ...rest
+}: {
+  isCollaborating: boolean;
+  onSelect: () => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const appState = useExcalidrawAppState();
+
+  return (
+    <Button
+      {...rest}
+      className={clsx("collab-button", { active: isCollaborating })}
+      type="button"
+      onSelect={onSelect}
+      style={{ position: "relative" }}
+      title={t("labels.liveCollaboration")}
+    >
+      {usersIcon}
+      {appState.collaborators.size > 0 && (
+        <div className="CollabButton-collaborators">
+          {appState.collaborators.size}
+        </div>
+      )}
+    </Button>
+  );
+};
+
+export default LiveCollaborationTrigger;
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

src/components/main-menu/DefaultItems.tsx

@@ -0,0 +1,285 @@
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { t } from "../../i18n";
+import {
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+  useExcalidrawActionManager,
+} from "../App";
+import {
+  ExportIcon,
+  ExportImageIcon,
+  HelpIcon,
+  LoadIcon,
+  MoonIcon,
+  save,
+  SunIcon,
+  TrashIcon,
+  usersIcon,
+} from "../icons";
+import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
+import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
+import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
+import {
+  actionClearCanvas,
+  actionLoadScene,
+  actionSaveToActiveFile,
+  actionShortcuts,
+  actionToggleTheme,
+} from "../../actions";
+
+import "./DefaultItems.scss";
+import { useState } from "react";
+import ConfirmDialog from "../ConfirmDialog";
+import clsx from "clsx";
+
+export const LoadScene = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (!actionManager.isActionEnabled(actionLoadScene)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem
+      icon={LoadIcon}
+      onSelect={() => actionManager.executeAction(actionLoadScene)}
+      data-testid="load-button"
+      shortcut={getShortcutFromShortcutName("loadScene")}
+      aria-label={t("buttons.load")}
+    >
+      {t("buttons.load")}
+    </DropdownMenuItem>
+  );
+};
+LoadScene.displayName = "LoadScene";
+
+export const SaveToActiveFile = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (!actionManager.isActionEnabled(actionSaveToActiveFile)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem
+      shortcut={getShortcutFromShortcutName("saveScene")}
+      data-testid="save-button"
+      onSelect={() => actionManager.executeAction(actionSaveToActiveFile)}
+      icon={save}
+      aria-label={`${t("buttons.save")}`}
+    >{`${t("buttons.save")}`}</DropdownMenuItem>
+  );
+};
+SaveToActiveFile.displayName = "SaveToActiveFile";
+
+export const SaveAsImage = () => {
+  const setAppState = useExcalidrawSetAppState();
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  return (
+    <DropdownMenuItem
+      icon={ExportImageIcon}
+      data-testid="image-export-button"
+      onSelect={() => setAppState({ openDialog: "imageExport" })}
+      shortcut={getShortcutFromShortcutName("imageExport")}
+      aria-label={t("buttons.exportImage")}
+    >
+      {t("buttons.exportImage")}
+    </DropdownMenuItem>
+  );
+};
+SaveAsImage.displayName = "SaveAsImage";
+
+export const Help = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+
+  const actionManager = useExcalidrawActionManager();
+
+  return (
+    <DropdownMenuItem
+      data-testid="help-menu-item"
+      icon={HelpIcon}
+      onSelect={() => actionManager.executeAction(actionShortcuts)}
+      shortcut="?"
+      aria-label={t("helpDialog.title")}
+    >
+      {t("helpDialog.title")}
+    </DropdownMenuItem>
+  );
+};
+Help.displayName = "Help";
+
+export const ClearCanvas = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  const [showDialog, setShowDialog] = useState(false);
+  const toggleDialog = () => setShowDialog(!showDialog);
+
+  if (!actionManager.isActionEnabled(actionClearCanvas)) {
+    return null;
+  }
+
+  return (
+    <>
+      <DropdownMenuItem
+        icon={TrashIcon}
+        onSelect={toggleDialog}
+        data-testid="clear-canvas-button"
+        aria-label={t("buttons.clearReset")}
+      >
+        {t("buttons.clearReset")}
+      </DropdownMenuItem>
+
+      {/* FIXME this should live outside MainMenu so it stays open
+          if menu is closed */}
+      {showDialog && (
+        <ConfirmDialog
+          onConfirm={() => {
+            actionManager.executeAction(actionClearCanvas);
+            toggleDialog();
+          }}
+          onCancel={toggleDialog}
+          title={t("clearCanvasDialog.title")}
+        >
+          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
+        </ConfirmDialog>
+      )}
+    </>
+  );
+};
+ClearCanvas.displayName = "ClearCanvas";
+
+export const ToggleTheme = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (!actionManager.isActionEnabled(actionToggleTheme)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem
+      onSelect={() => {
+        return actionManager.executeAction(actionToggleTheme);
+      }}
+      icon={appState.theme === "dark" ? SunIcon : MoonIcon}
+      data-testid="toggle-dark-mode"
+      shortcut={getShortcutFromShortcutName("toggleTheme")}
+      aria-label={
+        appState.theme === "dark"
+          ? t("buttons.lightMode")
+          : t("buttons.darkMode")
+      }
+    >
+      {appState.theme === "dark"
+        ? t("buttons.lightMode")
+        : t("buttons.darkMode")}
+    </DropdownMenuItem>
+  );
+};
+ToggleTheme.displayName = "ToggleTheme";
+
+export const ChangeCanvasBackground = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: "0.5rem" }}>
+      <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+        {t("labels.canvasBackground")}
+      </div>
+      <div style={{ padding: "0 0.625rem" }}>
+        {actionManager.renderAction("changeViewBackgroundColor")}
+      </div>
+    </div>
+  );
+};
+ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
+
+export const Export = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  return (
+    <DropdownMenuItem
+      icon={ExportIcon}
+      onSelect={() => {
+        setAppState({ openDialog: "jsonExport" });
+      }}
+      data-testid="json-export-button"
+      aria-label={t("buttons.export")}
+    >
+      {t("buttons.export")}
+    </DropdownMenuItem>
+  );
+};
+Export.displayName = "Export";
+
+export const Socials = () => (
+  <>
+    <DropdownMenuItemLink
+      icon={GithubIcon}
+      href="https://github.com/excalidraw/excalidraw"
+      aria-label="GitHub"
+    >
+      GitHub
+    </DropdownMenuItemLink>
+    <DropdownMenuItemLink
+      icon={DiscordIcon}
+      href="https://discord.gg/UexuTaE"
+      aria-label="Discord"
+    >
+      Discord
+    </DropdownMenuItemLink>
+    <DropdownMenuItemLink
+      icon={TwitterIcon}
+      href="https://twitter.com/excalidraw"
+      aria-label="Twitter"
+    >
+      Twitter
+    </DropdownMenuItemLink>
+  </>
+);
+Socials.displayName = "Socials";
+
+export const LiveCollaborationTrigger = ({
+  onSelect,
+  isCollaborating,
+}: {
+  onSelect: () => void;
+  isCollaborating: boolean;
+}) => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  return (
+    <DropdownMenuItem
+      data-testid="collab-button"
+      icon={usersIcon}
+      className={clsx({
+        "active-collab": isCollaborating,
+      })}
+      onSelect={onSelect}
+    >
+      {t("labels.liveCollaboration")}
+    </DropdownMenuItem>
+  );
+};
+
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

src/components/main-menu/MainMenu.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  useDevice,
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+} from "../App";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+
+import * as DefaultItems from "./DefaultItems";
+
+import { UserList } from "../UserList";
+import { t } from "../../i18n";
+import { HamburgerMenuIcon } from "../icons";
+
+const MainMenu = ({ children }: { children?: React.ReactNode }) => {
+  const device = useDevice();
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  const onClickOutside = device.isMobile
+    ? undefined
+    : () => setAppState({ openMenu: null });
+  return (
+    <DropdownMenu open={appState.openMenu === "canvas"}>
+      <DropdownMenu.Trigger
+        onToggle={() => {
+          setAppState({
+            openMenu: appState.openMenu === "canvas" ? null : "canvas",
+          });
+        }}
+      >
+        {HamburgerMenuIcon}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content onClickOutside={onClickOutside}>
+        {children}
+        {device.isMobile && appState.collaborators.size > 0 && (
+          <fieldset className="UserList-Wrapper">
+            <legend>{t("labels.collaborators")}</legend>
+            <UserList mobile={true} collaborators={appState.collaborators} />
+          </fieldset>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+MainMenu.Trigger = DropdownMenu.Trigger;
+MainMenu.Item = DropdownMenu.Item;
+MainMenu.ItemLink = DropdownMenu.ItemLink;
+MainMenu.ItemCustom = DropdownMenu.ItemCustom;
+MainMenu.Group = DropdownMenu.Group;
+MainMenu.Separator = DropdownMenu.Separator;
+MainMenu.DefaultItems = DefaultItems;
+
+export default MainMenu;
+
+MainMenu.displayName = "Menu";

src/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -0,0 +1,195 @@
+import { actionLoadScene, actionShortcuts } from "../../actions";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { t } from "../../i18n";
+import {
+  useDevice,
+  useExcalidrawActionManager,
+  useExcalidrawAppState,
+} from "../App";
+import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
+
+const WelcomeScreenMenuItemContent = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string | null;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      <div className="welcome-screen-menu-item__icon">{icon}</div>
+      <div className="welcome-screen-menu-item__text">{children}</div>
+      {shortcut && !device.isMobile && (
+        <div className="welcome-screen-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+WelcomeScreenMenuItemContent.displayName = "WelcomeScreenMenuItemContent";
+
+const WelcomeScreenMenuItem = ({
+  onSelect,
+  children,
+  icon,
+  shortcut,
+  className = "",
+  ...props
+}: {
+  onSelect: () => void;
+  children: React.ReactNode;
+  icon?: JSX.Element;
+  shortcut?: string | null;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      {...props}
+      type="button"
+      className={`welcome-screen-menu-item ${className}`}
+      onClick={onSelect}
+    >
+      <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </WelcomeScreenMenuItemContent>
+    </button>
+  );
+};
+WelcomeScreenMenuItem.displayName = "WelcomeScreenMenuItem";
+
+const WelcomeScreenMenuItemLink = ({
+  children,
+  href,
+  icon,
+  shortcut,
+  className = "",
+  ...props
+}: {
+  children: React.ReactNode;
+  href: string;
+  icon?: JSX.Element;
+  shortcut?: string | null;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <a
+      {...props}
+      className={`welcome-screen-menu-item ${className}`}
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </WelcomeScreenMenuItemContent>
+    </a>
+  );
+};
+WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
+
+const Center = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="welcome-screen-center">
+      {children || (
+        <>
+          <Logo />
+          <Heading>{t("welcomeScreen.defaults.center_heading")}</Heading>
+          <Menu>
+            <MenuItemLoadScene />
+            <MenuItemHelp />
+          </Menu>
+        </>
+      )}
+    </div>
+  );
+};
+Center.displayName = "Center";
+
+const Logo = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="welcome-screen-center__logo virgil welcome-screen-decor">
+      {children || <>{ExcalLogo} Excalidraw</>}
+    </div>
+  );
+};
+Logo.displayName = "Logo";
+
+const Heading = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="welcome-screen-center__heading welcome-screen-decor virgil">
+      {children}
+    </div>
+  );
+};
+Heading.displayName = "Heading";
+
+const Menu = ({ children }: { children?: React.ReactNode }) => {
+  return <div className="welcome-screen-menu">{children}</div>;
+};
+Menu.displayName = "Menu";
+
+const MenuItemHelp = () => {
+  const actionManager = useExcalidrawActionManager();
+
+  return (
+    <WelcomeScreenMenuItem
+      onSelect={() => actionManager.executeAction(actionShortcuts)}
+      shortcut="?"
+      icon={HelpIcon}
+    >
+      {t("helpDialog.title")}
+    </WelcomeScreenMenuItem>
+  );
+};
+MenuItemHelp.displayName = "MenuItemHelp";
+
+const MenuItemLoadScene = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+
+  return (
+    <WelcomeScreenMenuItem
+      onSelect={() => actionManager.executeAction(actionLoadScene)}
+      shortcut={getShortcutFromShortcutName("loadScene")}
+      icon={LoadIcon}
+    >
+      {t("buttons.load")}
+    </WelcomeScreenMenuItem>
+  );
+};
+MenuItemLoadScene.displayName = "MenuItemLoadScene";
+
+const MenuItemLiveCollaborationTrigger = ({
+  onSelect,
+}: {
+  onSelect: () => any;
+}) => {
+  // FIXME when we tie t() to lang state
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const appState = useExcalidrawAppState();
+
+  return (
+    <WelcomeScreenMenuItem shortcut={null} onSelect={onSelect} icon={usersIcon}>
+      {t("labels.liveCollaboration")}
+    </WelcomeScreenMenuItem>
+  );
+};
+MenuItemLiveCollaborationTrigger.displayName =
+  "MenuItemLiveCollaborationTrigger";
+
+// -----------------------------------------------------------------------------
+
+Center.Logo = Logo;
+Center.Heading = Heading;
+Center.Menu = Menu;
+Center.MenuItem = WelcomeScreenMenuItem;
+Center.MenuItemLink = WelcomeScreenMenuItemLink;
+Center.MenuItemHelp = MenuItemHelp;
+Center.MenuItemLoadScene = MenuItemLoadScene;
+Center.MenuItemLiveCollaborationTrigger = MenuItemLiveCollaborationTrigger;
+
+export { Center };

src/components/welcome-screen/WelcomeScreen.Hints.tsx

@@ -0,0 +1,42 @@
+import { t } from "../../i18n";
+import {
+  WelcomeScreenHelpArrow,
+  WelcomeScreenMenuArrow,
+  WelcomeScreenTopToolbarArrow,
+} from "../icons";
+
+const MenuHint = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
+      {WelcomeScreenMenuArrow}
+      <div className="welcome-screen-decor-hint__label">
+        {children || t("welcomeScreen.defaults.menuHint")}
+      </div>
+    </div>
+  );
+};
+MenuHint.displayName = "MenuHint";
+
+const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
+      <div className="welcome-screen-decor-hint__label">
+        {children || t("welcomeScreen.defaults.toolbarHint")}
+      </div>
+      {WelcomeScreenTopToolbarArrow}
+    </div>
+  );
+};
+ToolbarHint.displayName = "ToolbarHint";
+
+const HelpHint = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
+      <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
+      {WelcomeScreenHelpArrow}
+    </div>
+  );
+};
+HelpHint.displayName = "HelpHint";
+
+export { HelpHint, MenuHint, ToolbarHint };

src/components/welcome-screen/WelcomeScreen.scss

@@ -3,29 +3,39 @@
     font-family: "Virgil";
   }
 
-  .WelcomeScreen-logo {
+  // WelcomeSreen common
-    display: flex;
+  // ---------------------------------------------------------------------------
-    align-items: center;
-    column-gap: 0.75rem;
-    font-size: 2.25rem;
 
-    svg {
+  .welcome-screen-decor {
-      width: 1.625rem;
-      height: auto;
-    }
-  }
-
-  .WelcomeScreen-decor {
     pointer-events: none;
 
     color: var(--color-gray-40);
+  }
 
-    &--subheading {
+  &.theme--dark {
-      font-size: 1.125rem;
+    .welcome-screen-decor {
-      text-align: center;
+      color: var(--color-gray-60);
+    }
+  }
+
+  // WelcomeScreen.Hints
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-decor-hint {
+    @media (max-height: 599px) {
+      display: none !important;
     }
 
-    &--help-pointer {
+    @media (max-width: 1024px), (max-width: 800px) {
+      .welcome-screen-decor {
+        &--help,
+        &--menu {
+          display: none;
+        }
+      }
+    }
+
+    &--help {
       display: flex;
       position: absolute;
       right: 0;
@@ -49,7 +59,7 @@
       }
     }
 
-    &--top-toolbar-pointer {
+    &--toolbar {
       position: absolute;
       top: 100%;
       left: 50%;
@@ -58,7 +68,7 @@
       display: flex;
       align-items: baseline;
 
-      &__label {
+      .welcome-screen-decor-hint__label {
         width: 120px;
         position: relative;
         top: -0.5rem;
@@ -74,7 +84,7 @@
       }
     }
 
-    &--menu-pointer {
+    &--menu {
       position: absolute;
       width: 320px;
       font-size: 1rem;
@@ -95,10 +105,19 @@
           transform: scaleX(-1);
         }
       }
+
+      @media (max-width: 860px) {
+        .welcome-screen-decor-hint__label {
+          max-width: 160px;
+        }
+      }
     }
   }
 
-  .WelcomeScreen-container {
+  // WelcomeSreen.Center
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-center {
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -112,7 +131,24 @@
     bottom: 1rem;
   }
 
-  .WelcomeScreen-items {
+  .welcome-screen-center__logo {
+    display: flex;
+    align-items: center;
+    column-gap: 0.75rem;
+    font-size: 2.25rem;
+
+    svg {
+      width: 1.625rem;
+      height: auto;
+    }
+  }
+
+  .welcome-screen-center__heading {
+    font-size: 1.125rem;
+    text-align: center;
+  }
+
+  .welcome-screen-menu {
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -120,7 +156,7 @@
     align-items: center;
   }
 
-  .WelcomeScreen-item {
+  .welcome-screen-menu-item {
     box-sizing: border-box;
 
     pointer-events: all;
@@ -128,8 +164,10 @@
     color: var(--color-gray-50);
     font-size: 0.875rem;
 
+    width: 100%;
     min-width: 300px;
-    display: flex;
+    max-width: 400px;
+    display: grid;
     align-items: center;
     justify-content: space-between;
 
@@ -140,44 +178,49 @@
 
     border-radius: var(--border-radius-md);
 
-    &__label {
+    grid-template-columns: calc(var(--default-icon-size) + 0.5rem) 1fr 3rem;
+
+    &__text {
       display: flex;
       align-items: center;
+      margin-right: auto;
+      text-align: left;
       column-gap: 0.5rem;
+    }
 
-      svg {
+    &__icon {
-        width: var(--default-icon-size);
+      width: var(--default-icon-size);
-        height: var(--default-icon-size);
+      height: var(--default-icon-size);
-      }
     }
 
     &__shortcut {
+      margin-left: auto;
       color: var(--color-gray-40);
       font-size: 0.75rem;
     }
   }
 
-  &:not(:active) .WelcomeScreen-item:hover {
+  &:not(:active) .welcome-screen-menu-item:hover {
     text-decoration: none;
     background: var(--color-gray-10);
 
-    .WelcomeScreen-item__shortcut {
+    .welcome-screen-menu-item__shortcut {
       color: var(--color-gray-50);
     }
 
-    .WelcomeScreen-item__label {
+    .welcome-screen-menu-item__text {
       color: var(--color-gray-100);
     }
   }
 
-  .WelcomeScreen-item:active {
+  .welcome-screen-menu-item:active {
     background: var(--color-gray-20);
 
-    .WelcomeScreen-item__shortcut {
+    .welcome-screen-menu-item__shortcut {
       color: var(--color-gray-50);
     }
 
-    .WelcomeScreen-item__label {
+    .welcome-screen-menu-item__text {
       color: var(--color-gray-100);
     }
 
@@ -185,7 +228,7 @@
       color: var(--color-promo) !important;
 
       &:hover {
-        .WelcomeScreen-item__label {
+        .welcome-screen-menu-item__text {
           color: var(--color-promo) !important;
         }
       }
@@ -193,11 +236,7 @@
   }
 
   &.theme--dark {
-    .WelcomeScreen-decor {
+    .welcome-screen-menu-item {
-      color: var(--color-gray-60);
-    }
-
-    .WelcomeScreen-item {
       color: var(--color-gray-60);
 
       &__shortcut {
@@ -205,69 +244,41 @@
       }
     }
 
-    &:not(:active) .WelcomeScreen-item:hover {
+    &:not(:active) .welcome-screen-menu-item:hover {
       background: var(--color-gray-85);
 
-      .WelcomeScreen-item__shortcut {
+      .welcome-screen-menu-item__shortcut {
         color: var(--color-gray-50);
       }
 
-      .WelcomeScreen-item__label {
+      .welcome-screen-menu-item__text {
         color: var(--color-gray-10);
       }
     }
 
-    .WelcomeScreen-item:active {
+    .welcome-screen-menu-item:active {
       background-color: var(--color-gray-90);
-      .WelcomeScreen-item__label {
+      .welcome-screen-menu-item__text {
         color: var(--color-gray-10);
       }
     }
   }
 
-  // Can tweak these values but for an initial effort, it looks OK to me
-  @media (max-width: 1024px) {
-    .WelcomeScreen-decor {
-      &--help-pointer,
-      &--menu-pointer {
-        display: none;
-      }
-    }
-  }
-
-  // @media (max-height: 400px) {
-  //   .WelcomeScreen-container {
-  //     margin-top: 0;
-  //   }
-  // }
   @media (max-height: 599px) {
-    .WelcomeScreen-container {
+    .welcome-screen-center {
       margin-top: 4rem;
     }
   }
   @media (min-height: 600px) and (max-height: 900px) {
-    .WelcomeScreen-container {
+    .welcome-screen-center {
       margin-top: 8rem;
     }
   }
-  @media (max-height: 630px) {
+  @media (max-height: 500px), (max-width: 320px) {
-    .WelcomeScreen-decor--top-toolbar-pointer {
+    .welcome-screen-center {
-      display: none;
-    }
-  }
-  @media (max-height: 500px) {
-    .WelcomeScreen-container {
       display: none;
     }
   }
 
-  // @media (max-height: 740px) {
+  // ---------------------------------------------------------------------------
-  //   .WelcomeScreen-decor {
-  //     &--help-pointer,
-  //     &--top-toolbar-pointer,
-  //     &--menu-pointer {
-  //       display: none;
-  //     }
-  //   }
-  // }
 }

src/components/welcome-screen/WelcomeScreen.tsx

@@ -0,0 +1,17 @@
+import { Center } from "./WelcomeScreen.Center";
+import { MenuHint, ToolbarHint, HelpHint } from "./WelcomeScreen.Hints";
+
+import "./WelcomeScreen.scss";
+
+const WelcomeScreen = (props: { children: React.ReactNode }) => {
+  // NOTE this component is used as a dummy wrapper to retrieve child props
+  // from, and will never be rendered to DOM directly. As such, we can't
+  // do anything here (use hooks and such)
+  return null;
+};
+WelcomeScreen.displayName = "WelcomeScreen";
+
+WelcomeScreen.Center = Center;
+WelcomeScreen.Hints = { MenuHint, ToolbarHint, HelpHint };
+
+export default WelcomeScreen;

src/constants.ts

@@ -150,6 +150,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     toggleTheme: null,
     saveAsImage: true,
   },
+  welcomeScreen: true,
 };
 
 // breakpoints
@@ -236,14 +237,6 @@ export const ROUNDNESS = {
   ADAPTIVE_RADIUS: 3,
 } as const;
 
-export const COOKIES = {
-  AUTH_STATE_COOKIE: "excplus-auth",
-} as const;
-
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
-
-export const isExcalidrawPlusSignedUser = document.cookie.includes(
-  COOKIES.AUTH_STATE_COOKIE,
-);

src/css/styles.scss

@@ -408,7 +408,7 @@
     pointer-events: all;
 
     &:hover {
-      background-color: var(--button-hover);
+      background-color: var(--button-hover-bg);
     }
 
     &:active {
@@ -540,9 +540,9 @@
   }
 
   .mobile-misc-tools-container {
-    position: fixed;
+    position: absolute;
-    top: 5rem;
+    top: calc(5rem - var(--editor-container-padding));
-    right: 0;
+    right: calc(var(--editor-container-padding) * -1);
     display: flex;
     flex-direction: column;
     border: 1px solid var(--sidebar-border-color);
@@ -569,6 +569,20 @@
       display: none;
     }
   }
+  .UserList-Wrapper {
+    margin: 0;
+    padding: 0;
+    border: none;
+    text-align: left;
+
+    legend {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 400;
+      margin: 0 0 0.25rem;
+      padding: 0;
+    }
+  }
 }
 
 .ErrorSplash.excalidraw {

src/css/theme.scss

@@ -35,13 +35,14 @@
   --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
     0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
     0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
-  --button-hover: var(--color-gray-10);
+  --button-hover-bg: var(--color-gray-10);
   --default-border-color: var(--color-gray-30);
 
   --default-button-size: 2rem;
   --default-icon-size: 1rem;
   --lg-button-size: 2.25rem;
   --lg-icon-size: 1rem;
+  --editor-container-padding: 1rem;
 
   @media screen and (min-device-width: 1921px) {
     --lg-button-size: 2.5rem;
@@ -135,7 +136,7 @@
     --popup-text-inverted-color: #2c2c2c;
     --select-highlight-color: #{$oc-blue-4};
     --text-primary-color: var(--color-gray-40);
-    --button-hover: var(--color-gray-80);
+    --button-hover-bg: var(--color-gray-80);
     --default-border-color: var(--color-gray-80);
     --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
       0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),

src/css/variables.module.scss

@@ -39,11 +39,11 @@
 
   .ToolIcon__icon {
     &:hover {
-      background: var(--button-hover);
+      background: var(--button-hover-bg);
     }
 
     &:active {
-      background: var(--button-hover);
+      background: var(--button-hover-bg);
       border: 1px solid var(--color-primary-darkest);
     }
   }
@@ -54,24 +54,25 @@
   justify-content: center;
   align-items: center;
   padding: 0.625rem;
-  width: var(--default-button-size);
+  width: var(--button-width, var(--default-button-size));
-  height: var(--default-button-size);
+  height: var(--button-height, var(--default-button-size));
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;
-  border-color: var(--default-border-color);
+  border-color: var(--button-border, var(--default-border-color));
   border-radius: var(--border-radius-lg);
   cursor: pointer;
-  background-color: transparent;
+  background-color: var(--button-bg, var(--island-bg-color));
-  color: var(--text-primary-color);
+  color: var(--button-color, var(--text-primary-color));
 
   &:hover {
-    background-color: var(--button-hover);
+    background-color: var(--button-hover-bg);
+    border-color: var(--button-hover-border, var(--default-border-color));
   }
 
   &:active {
-    background-color: var(--button-hover);
+    background-color: var(--button-active-bg);
-    border-color: var(--color-primary-darkest);
+    border-color: var(--button-active-border, var(--color-primary-darkest));
   }
 
   &.active {
@@ -83,7 +84,10 @@
     }
 
     svg {
-      color: var(--color-primary-darker);
+      color: var(--button-color, var(--color-primary-darker));
+
+      width: var(--button-width, var(--lg-icon-size));
+      height: var(--button-height, var(--lg-icon-size));
     }
   }
 }

src/element/Hyperlink.tsx

@@ -267,7 +267,7 @@ export const actionLink = register({
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
   contextItemLabel: (elements, appState) =>
     getContextMenuLabel(elements, appState),
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.length === 1;
   },

src/element/resizeElements.ts

@@ -557,10 +557,10 @@ export const resizeSingleElement = (
     mutateElement(element, {
       scale: [
         // defaulting because scaleX/Y can be 0/-0
-        (Math.sign(scaleX) || stateAtResizeStart.scale[0]) *
+        (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
-          stateAtResizeStart.scale[0],
+          stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
-        (Math.sign(scaleY) || stateAtResizeStart.scale[1]) *
+        (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
-          stateAtResizeStart.scale[1],
+          stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
       ],
     });
   }

src/excalidraw-app/app_constants.ts

@@ -38,3 +38,11 @@ export const STORAGE_KEYS = {
   VERSION_DATA_STATE: "version-dataState",
   VERSION_FILES: "version-files",
 } as const;
+
+export const COOKIES = {
+  AUTH_STATE_COOKIE: "excplus-auth",
+} as const;
+
+export const isExcalidrawPlusSignedUser = document.cookie.includes(
+  COOKIES.AUTH_STATE_COOKIE,
+);

src/excalidraw-app/components/ExcalidrawPlusAppLink.tsx

@@ -1,4 +1,4 @@
-import { isExcalidrawPlusSignedUser } from "../../constants";
+import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 export const ExcalidrawPlusAppLink = () => {
   if (!isExcalidrawPlusSignedUser) {

src/excalidraw-app/components/LanguageList.tsx

@@ -8,23 +8,21 @@ export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
   const [langCode, setLangCode] = useAtom(langCodeAtom);
 
   return (
-    <React.Fragment>
+    <select
-      <select
+      className="dropdown-select dropdown-select__language"
-        className="dropdown-select dropdown-select__language"
+      onChange={({ target }) => setLangCode(target.value)}
-        onChange={({ target }) => setLangCode(target.value)}
+      value={langCode}
-        value={langCode}
+      aria-label={i18n.t("buttons.selectLanguage")}
-        aria-label={i18n.t("buttons.selectLanguage")}
+      style={style}
-        style={style}
+    >
-      >
+      <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
-        <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
+        {i18n.defaultLang.label}
-          {i18n.defaultLang.label}
+      </option>
+      {languages.map((lang) => (
+        <option key={lang.code} value={lang.code}>
+          {lang.label}
         </option>
-        {languages.map((lang) => (
+      ))}
-          <option key={lang.code} value={lang.code}>
+    </select>
-            {lang.label}
-          </option>
-        ))}
-      </select>
-    </React.Fragment>
   );
 };

src/excalidraw-app/index.scss

@@ -4,7 +4,7 @@
   &.theme--dark {
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
-  .layer-ui__wrapper .layer-ui__wrapper__footer-center {
+  .footer-center {
     justify-content: flex-end;
     margin-top: auto;
     margin-bottom: auto;
@@ -24,7 +24,29 @@
       height: 1.2rem;
     }
   }
+
+  .dropdown-menu-container {
+    .dropdown-menu-item {
+      &.active-collab {
+        background-color: #ecfdf5;
+        color: #064e3c;
+      }
+      &.ExcalidrawPlus {
+        color: var(--color-promo);
+      }
+    }
+  }
+
+  &.theme--dark {
+    .dropdown-menu-item {
+      &.active-collab {
+        background-color: #064e3c;
+        color: #ecfdf5;
+      }
+    }
+  }
 }
+
 .excalidraw-app.is-collaborating {
   [data-testid="clear-canvas-button"] {
     display: none;

src/excalidraw-app/index.tsx

@@ -1,6 +1,6 @@
 import polyfill from "../polyfill";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";
@@ -21,7 +21,14 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { Excalidraw, defaultLang, Footer } from "../packages/excalidraw/index";
+import {
+  Excalidraw,
+  defaultLang,
+  Footer,
+  MainMenu,
+  LiveCollaborationTrigger,
+  WelcomeScreen,
+} from "../packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -40,6 +47,7 @@ import {
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
+  isExcalidrawPlusSignedUser,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
@@ -79,8 +87,11 @@ import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
 import { EncryptedIcon } from "./components/EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./components/ExcalidrawPlusAppLink";
+import { LanguageList } from "./components/LanguageList";
+import { PlusPromoIcon } from "../components/icons";
 
 polyfill();
+
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 
 const languageDetector = new LanguageDetector();
@@ -229,7 +240,6 @@ export const langCodeAtom = atom(
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(langCodeAtom);
-
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -594,6 +604,96 @@ const ExcalidrawWrapper = () => {
     localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
   };
 
+  const renderMenu = () => {
+    return (
+      <MainMenu>
+        <MainMenu.DefaultItems.LoadScene />
+        <MainMenu.DefaultItems.SaveToActiveFile />
+        <MainMenu.DefaultItems.Export />
+        <MainMenu.DefaultItems.SaveAsImage />
+        <MainMenu.DefaultItems.LiveCollaborationTrigger
+          isCollaborating={isCollaborating}
+          onSelect={() => setCollabDialogShown(true)}
+        />
+
+        <MainMenu.DefaultItems.Help />
+        <MainMenu.DefaultItems.ClearCanvas />
+        <MainMenu.Separator />
+        <MainMenu.ItemLink
+          icon={PlusPromoIcon}
+          href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
+          className="ExcalidrawPlus"
+        >
+          Excalidraw+
+        </MainMenu.ItemLink>
+        <MainMenu.DefaultItems.Socials />
+        <MainMenu.Separator />
+        <MainMenu.DefaultItems.ToggleTheme />
+        <MainMenu.ItemCustom>
+          <LanguageList style={{ width: "100%" }} />
+        </MainMenu.ItemCustom>
+        <MainMenu.DefaultItems.ChangeCanvasBackground />
+      </MainMenu>
+    );
+  };
+
+  const welcomeScreenJSX = useMemo(() => {
+    let headingContent;
+
+    if (isExcalidrawPlusSignedUser) {
+      headingContent = t("welcomeScreen.app.center_heading_plus")
+        .split(/(Excalidraw\+)/)
+        .map((bit, idx) => {
+          if (bit === "Excalidraw+") {
+            return (
+              <a
+                style={{ pointerEvents: "all" }}
+                href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
+                key={idx}
+              >
+                Excalidraw+
+              </a>
+            );
+          }
+          return bit;
+        });
+    } else {
+      headingContent = t("welcomeScreen.app.center_heading");
+    }
+
+    return (
+      <WelcomeScreen>
+        <WelcomeScreen.Hints.MenuHint>
+          {t("welcomeScreen.app.menuHint")}
+        </WelcomeScreen.Hints.MenuHint>
+        <WelcomeScreen.Hints.ToolbarHint />
+        <WelcomeScreen.Hints.HelpHint />
+        <WelcomeScreen.Center>
+          <WelcomeScreen.Center.Logo />
+          <WelcomeScreen.Center.Heading>
+            {headingContent}
+          </WelcomeScreen.Center.Heading>
+          <WelcomeScreen.Center.Menu>
+            <WelcomeScreen.Center.MenuItemLoadScene />
+            <WelcomeScreen.Center.MenuItemHelp />
+            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
+              onSelect={() => setCollabDialogShown(true)}
+            />
+            {!isExcalidrawPlusSignedUser && (
+              <WelcomeScreen.Center.MenuItemLink
+                href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
+                shortcut={null}
+                icon={PlusPromoIcon}
+              >
+                Try Excalidraw Plus!
+              </WelcomeScreen.Center.MenuItemLink>
+            )}
+          </WelcomeScreen.Center.Menu>
+        </WelcomeScreen.Center>
+      </WelcomeScreen>
+    );
+  }, [setCollabDialogShown]);
+
   return (
     <div
       style={{ height: "100%" }}
@@ -605,7 +705,6 @@ const ExcalidrawWrapper = () => {
         ref={excalidrawRefCallback}
         onChange={onChange}
         initialData={initialStatePromiseRef.current.promise}
-        onCollabButtonClick={() => setCollabDialogShown(true)}
         isCollaborating={isCollaborating}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         UIOptions={{
@@ -639,13 +738,27 @@ const ExcalidrawWrapper = () => {
         onLibraryChange={onLibraryChange}
         autoFocus={true}
         theme={theme}
+        renderTopRightUI={(isMobile) => {
+          if (isMobile) {
+            return null;
+          }
+          return (
+            <LiveCollaborationTrigger
+              isCollaborating={isCollaborating}
+              onSelect={() => setCollabDialogShown(true)}
+            />
+          );
+        }}
       >
+        {renderMenu()}
+
         <Footer>
           <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
             <ExcalidrawPlusAppLink />
             <EncryptedIcon />
           </div>
         </Footer>
+        {welcomeScreenJSX}
       </Excalidraw>
       {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/locales/ar-SA.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "تعذر إدراج صورة SVG. يبدو أن ترميز SVG غير صحيح.",
     "invalidSVGString": "SVG غير صالح.",
     "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "تحديد",

src/locales/bg-BG.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Селекция",

src/locales/bn-BD.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "এসভীজী ছবি সন্নিবেশ করা যায়নি। এসভীজী মার্কআপটি অবৈধ মনে হচ্ছে৷",
     "invalidSVGString": "এসভীজী মার্কআপটি অবৈধ মনে হচ্ছে৷",
     "cannotResolveCollabServer": "কোল্যাব সার্ভারের সাথে সংযোগ করা যায়নি। পৃষ্ঠাটি পুনরায় লোড করে আবার চেষ্টা করুন।",
-    "importLibraryError": "সংগ্রহ লোড করা যায়নি"
+    "importLibraryError": "সংগ্রহ লোড করা যায়নি",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "বাছাই",

src/locales/ca-ES.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "No ha estat possible inserir la imatge SVG. Les marques SVG semblen invàlides.",
     "invalidSVGString": "SVG no vàlid.",
     "cannotResolveCollabServer": "No ha estat possible connectar amb el servidor collab. Si us plau recarregueu la pàgina i torneu a provar.",
-    "importLibraryError": "No s'ha pogut carregar la biblioteca"
+    "importLibraryError": "No s'ha pogut carregar la biblioteca",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Selecció",

src/locales/cs-CZ.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Výběr",

src/locales/da-DK.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "",

src/locales/de-DE.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "SVG-Bild konnte nicht eingefügt werden. Das SVG-Markup sieht ungültig aus.",
     "invalidSVGString": "Ungültige SVG.",
     "cannotResolveCollabServer": "Konnte keine Verbindung zum Collab-Server herstellen. Bitte lade die Seite neu und versuche es erneut.",
-    "importLibraryError": "Bibliothek konnte nicht geladen werden"
+    "importLibraryError": "Bibliothek konnte nicht geladen werden",
+    "collabSaveFailed": "Keine Speicherung in der Backend-Datenbank möglich. Wenn die Probleme weiterhin bestehen, solltest Du Deine Datei lokal speichern, um sicherzustellen, dass Du Deine Arbeit nicht verlierst.",
+    "collabSaveFailed_sizeExceeded": "Keine Speicherung in der Backend-Datenbank möglich, die Zeichenfläche scheint zu groß zu sein. Du solltest Deine Datei lokal speichern, um sicherzustellen, dass Du Deine Arbeit nicht verlierst."
   },
   "toolBar": {
     "selection": "Auswahl",
@@ -312,8 +314,8 @@
     "zoomToFit": "Zoomen um alle Elemente einzupassen",
     "zoomToSelection": "Auf Auswahl zoomen",
     "toggleElementLock": "Auswahl sperren/entsperren",
-    "movePageUpDown": "",
+    "movePageUpDown": "Seite nach oben/unten verschieben",
-    "movePageLeftRight": ""
+    "movePageLeftRight": "Seite nach links/rechts verschieben"
   },
   "clearCanvasDialog": {
     "title": "Zeichenfläche löschen"

src/locales/el-GR.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "Αδυναμία εισαγωγής εικόνας SVG. Η σήμανση της SVG δεν φαίνεται έγκυρη.",
     "invalidSVGString": "Μη έγκυρο SVG.",
     "cannotResolveCollabServer": "Αδυναμία σύνδεσης με τον διακομιστή συνεργασίας. Παρακαλώ ανανεώστε τη σελίδα και προσπαθήστε ξανά.",
-    "importLibraryError": "Αδυναμία φόρτωσης βιβλιοθήκης"
+    "importLibraryError": "Αδυναμία φόρτωσης βιβλιοθήκης",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Επιλογή",

src/locales/en.json

@@ -448,10 +448,16 @@
     "d9480f": "Orange 9"
   },
   "welcomeScreen": {
-    "data": "All your data is saved locally in your browser.",
+    "app": {
-    "switchToPlusApp": "Did you want to go to the Excalidraw+ instead?",
+      "center_heading": "All your data is saved locally in your browser.",
-    "menuHints": "Export, preferences, languages, ...",
+      "center_heading_plus": "Did you want to go to the Excalidraw+ instead?",
-    "toolbarHints": "Pick a tool & Start drawing!",
+      "menuHint": "Export, preferences, languages, ..."
-    "helpHints": "Shortcuts & help"
+    },
+    "defaults": {
+      "menuHint": "Export, preferences, and more...",
+      "center_heading": "Diagrams. Made. Simple.",
+      "toolbarHint": "Pick a tool & Start drawing!",
+      "helpHint": "Shortcuts & help"
+    }
   }
 }

src/locales/es-ES.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "No se pudo insertar la imagen SVG. El código SVG parece inválido.",
     "invalidSVGString": "SVG no válido.",
     "cannotResolveCollabServer": "No se pudo conectar al servidor colaborador. Por favor, vuelva a cargar la página y vuelva a intentarlo.",
-    "importLibraryError": "No se pudo cargar la librería"
+    "importLibraryError": "No se pudo cargar la librería",
+    "collabSaveFailed": "No se pudo guardar en la base de datos del backend. Si los problemas persisten, debería guardar su archivo localmente para asegurarse de que no pierde su trabajo.",
+    "collabSaveFailed_sizeExceeded": "No se pudo guardar en la base de datos del backend, el lienzo parece ser demasiado grande. Debería guardar el archivo localmente para asegurarse de que no pierde su trabajo."
   },
   "toolBar": {
     "selection": "Selección",

src/locales/eu-ES.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "Ezin izan da SVG irudia txertatu. SVG markak baliogabea dirudi.",
     "invalidSVGString": "SVG baliogabea.",
     "cannotResolveCollabServer": "Ezin izan da elkarlaneko zerbitzarira konektatu. Mesedez, berriro kargatu orria eta saiatu berriro.",
-    "importLibraryError": "Ezin izan da liburutegia kargatu"
+    "importLibraryError": "Ezin izan da liburutegia kargatu",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Hautapena",

src/locales/fa-IR.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "تصویر SVG وارد نشد. نشانه گذاری SVG نامعتبر به نظر می رسد.",
     "invalidSVGString": "SVG نادرست.",
     "cannotResolveCollabServer": "به سرور collab متصل نشد. لطفا صفحه را مجددا بارگذاری کنید و دوباره تلاش کنید.",
-    "importLibraryError": "داده‌ها بارگذاری نشدند"
+    "importLibraryError": "داده‌ها بارگذاری نشدند",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "گزینش",

src/locales/fi-FI.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "SVG- kuvaa ei voitu lisätä. Tiedoston SVG-sisältö näyttää virheelliseltä.",
     "invalidSVGString": "Virheellinen SVG.",
     "cannotResolveCollabServer": "Yhteyden muodostaminen collab-palvelimeen epäonnistui. Virkistä sivu ja yritä uudelleen.",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Valinta",

src/locales/fr-FR.json

@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "Coller",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "Coller comme texte brut",
     "pasteCharts": "Coller les graphiques",
     "selectAll": "Tout sélectionner",
     "multiSelect": "Ajouter l'élément à la sélection",
@@ -201,7 +201,9 @@
     "svgImageInsertError": "Impossible d'insérer l'image SVG. Le balisage SVG semble invalide.",
     "invalidSVGString": "SVG invalide.",
     "cannotResolveCollabServer": "Impossible de se connecter au serveur collaboratif. Veuillez recharger la page et réessayer.",
-    "importLibraryError": "Impossible de charger la bibliothèque"
+    "importLibraryError": "Impossible de charger la bibliothèque",
+    "collabSaveFailed": "Impossible d'enregistrer dans la base de données en arrière-plan. Si des problèmes persistent, vous devriez enregistrer votre fichier localement pour vous assurer de ne pas perdre votre travail.",
+    "collabSaveFailed_sizeExceeded": "Impossible d'enregistrer dans la base de données en arrière-plan, le tableau semble trop grand. Vous devriez enregistrer le fichier localement pour vous assurer de ne pas perdre votre travail."
   },
   "toolBar": {
     "selection": "Sélection",
@@ -236,7 +238,7 @@
     "resize": "Vous pouvez conserver les proportions en maintenant la touche MAJ pendant le redimensionnement, maintenez la touche ALT pour redimensionner par rapport au centre",
     "resizeImage": "Vous pouvez redimensionner librement en maintenant SHIFT,\nmaintenez ALT pour redimensionner depuis le centre",
     "rotate": "Vous pouvez restreindre les angles en maintenant MAJ pendant la rotation",
-    "lineEditor_info": "",
+    "lineEditor_info": "Maintenez CtrlOrCmd et Double-cliquez ou appuyez sur CtrlOrCmd + Entrée pour modifier les points",
     "lineEditor_pointSelected": "Appuyer sur Suppr. pour supprimer des points, Ctrl ou Cmd+D pour dupliquer, ou faire glisser pour déplacer",
     "lineEditor_nothingSelected": "Sélectionner un point pour éditer (maintenir la touche MAJ pour en sélectionner plusieurs),\nou maintenir la touche Alt enfoncée et cliquer pour ajouter de nouveaux points",
     "placeImage": "Cliquez pour placer l'image, ou cliquez et faites glisser pour définir sa taille manuellement",
@@ -312,8 +314,8 @@
     "zoomToFit": "Zoomer pour voir tous les éléments",
     "zoomToSelection": "Zoomer sur la sélection",
     "toggleElementLock": "Verrouiller/déverrouiller la sélection",
-    "movePageUpDown": "",
+    "movePageUpDown": "Déplacer la page vers le haut/bas",
-    "movePageLeftRight": ""
+    "movePageLeftRight": "Déplacer la page vers la gauche/droite"
   },
   "clearCanvasDialog": {
     "title": "Effacer la zone de dessin"
@@ -395,7 +397,7 @@
     "fileSavedToFilename": "Enregistré sous {filename}",
     "canvas": "canevas",
     "selection": "sélection",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Utiliser {{shortcut}} pour coller comme un seul élément,\nou coller dans un éditeur de texte existant"
   },
   "colors": {
     "ffffff": "Blanc",

src/locales/gl-ES.json

@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "Pegar",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "Pegar coma texto sen formato",
     "pasteCharts": "Pegar gráficos",
     "selectAll": "Seleccionar todo",
     "multiSelect": "Engadir elemento á selección",
@@ -201,7 +201,9 @@
     "svgImageInsertError": "Non se puido inserir como imaxe SVG. O marcado SVG semella inválido.",
     "invalidSVGString": "SVG inválido.",
     "cannotResolveCollabServer": "Non se puido conectar ao servidor de colaboración. Por favor recargue a páxina e probe de novo.",
-    "importLibraryError": "Non se puido cargar a biblioteca"
+    "importLibraryError": "Non se puido cargar a biblioteca",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Selección",
@@ -236,7 +238,7 @@
     "resize": "Pode reducir as proporcións mantendo SHIFT mentres axusta o tamaño,\nmanteña ALT para axustalo dende o centro",
     "resizeImage": "Pode axustar o tamaño libremente mantendo SHIFT,\nmanteña ALT para axustalo dende o centro",
     "rotate": "Podes reducir os ángulos mantendo SHIFT mentres os rotas",
-    "lineEditor_info": "",
+    "lineEditor_info": "Manteña pulsado CtrlOrCmd e faga dobre clic ou prema CtrlOrCmd + Enter para editar puntos",
     "lineEditor_pointSelected": "Prema Suprimir para eliminar o(s) punto(s)\nCtrlOrCmd+D para duplicalos, ou arrastre para movelos",
     "lineEditor_nothingSelected": "Seleccione un punto para editar (manteña pulsado SHIFT para selección múltiple),\nou manteña pulsado Alt e faga clic para engadir novos puntos",
     "placeImage": "Faga clic para colocar a imaxe, ou faga clic e arrastre para establecer o seu tamaño manualmente",
@@ -312,8 +314,8 @@
     "zoomToFit": "Zoom que se axuste a todos os elementos",
     "zoomToSelection": "Zoom á selección",
     "toggleElementLock": "Bloquear/desbloquear selección",
-    "movePageUpDown": "",
+    "movePageUpDown": "Mover páxina cara enriba/abaixo",
-    "movePageLeftRight": ""
+    "movePageLeftRight": "Mover páxina cara a esquerda/dereita"
   },
   "clearCanvasDialog": {
     "title": "Limpar lenzo"
@@ -395,7 +397,7 @@
     "fileSavedToFilename": "Gardado en {filename}",
     "canvas": "lenzo",
     "selection": "selección",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Usa {{shortcut}} para pegar como un único elemento\nou pega nun editor de texto existente"
   },
   "colors": {
     "ffffff": "Branco",

src/locales/he-IL.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "לא ניתן היה להטמיע את תמונת ה-SVG. קידוד ה-SVG אינו תקני.",
     "invalidSVGString": "SVG בלתי תקני.",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "לא ניתן היה לטעון את הספריה"
+    "importLibraryError": "לא ניתן היה לטעון את הספריה",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "בחירה",

src/locales/hi-IN.json

@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "चिपकाएँ",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "सादे पाठ के रूप में चिपकाएं",
     "pasteCharts": "चार्ट चिपकाएँ",
     "selectAll": "सभी चुनें",
     "multiSelect": "आकार को चयन में जोड़ें",
@@ -201,7 +201,9 @@
     "svgImageInsertError": "एसवीजी छवि सम्मिलित नहीं कर सके, एसवीजी रचना अनुचित हैं",
     "invalidSVGString": "अनुचित SVG",
     "cannotResolveCollabServer": "कॉलेब सर्वर से कनेक्शन नहीं हो पा रहा. कृपया पृष्ठ को पुनः लाने का प्रयास करे.",
-    "importLibraryError": "संग्रह प्रतिष्ठापित नहीं किया जा सका"
+    "importLibraryError": "संग्रह प्रतिष्ठापित नहीं किया जा सका",
+    "collabSaveFailed": "किसी कारण वश अंदरूनी डेटाबेस में सहेजा नहीं जा सका। यदि समस्या बनी रहती है, तो किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।",
+    "collabSaveFailed_sizeExceeded": "लगता है कि पृष्ठ तल काफ़ी बड़ा है, इस्कारण अंदरूनी डेटाबेस में सहेजा नहीं जा सका। किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।"
   },
   "toolBar": {
     "selection": "चयन",
@@ -236,7 +238,7 @@
     "resize": "आकार बदलते समय आप SHIFT को पकड़ कर अनुपात में कमी कर सकते हैं,\nकेंद्र से आकार बदलने के लिए ALT दबाए रखें",
     "resizeImage": "",
     "rotate": "आप घूर्णन करते समय SHIFT पकड़कर कोणों को विवश कर सकते हैं",
-    "lineEditor_info": "",
+    "lineEditor_info": "बिंदुओं को सम्पादित करने के लिए CtrlOrCmd को दबायें रखते हुये डबल क्लिक करे, अथवा CtrlOrCmd + Enter साथ दबाये",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -395,7 +397,7 @@
     "fileSavedToFilename": "",
     "canvas": "",
     "selection": "",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "एक अवयव के रूप में चिपकाने के लिए {{shortcut}} का उपयोग करें,\nया किसी मौजूदा पाठ संपादक में चिपकायें"
   },
   "colors": {
     "ffffff": "सफेद",

src/locales/hu-HU.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "Nem sikerült beszúrni az SVG-képet. Az SVG szintaktika érvénytelennek tűnik.",
     "invalidSVGString": "Érvénytelen SVG.",
     "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Kijelölés",

src/locales/id-ID.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "Tidak dapat menyisipkan gambar SVG. Markup SVG sepertinya tidak valid.",
     "invalidSVGString": "SVG tidak valid.",
     "cannotResolveCollabServer": "Tidak dapat terhubung ke server kolab. Muat ulang laman dan coba lagi.",
-    "importLibraryError": "Tidak dapat memuat pustaka"
+    "importLibraryError": "Tidak dapat memuat pustaka",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Pilihan",

src/locales/it-IT.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "Impossibile inserire l'immagine SVG. Il markup SVG non sembra corretto.",
     "invalidSVGString": "SVG non valido.",
     "cannotResolveCollabServer": "Impossibile connettersi al server di collab. Ricarica la pagina e riprova.",
-    "importLibraryError": "Impossibile caricare la libreria"
+    "importLibraryError": "Impossibile caricare la libreria",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Selezione",

src/locales/ja-JP.json

@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "貼り付け",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "書式なしテキストとして貼り付け",
     "pasteCharts": "チャートの貼り付け",
     "selectAll": "すべて選択",
     "multiSelect": "複数選択",
@@ -201,7 +201,9 @@
     "svgImageInsertError": "SVGイメージを挿入できませんでした。SVGマークアップは無効に見えます。",
     "invalidSVGString": "無効なSVGです。",
     "cannotResolveCollabServer": "コラボレーションサーバに接続できませんでした。ページを再読み込みして、もう一度お試しください。",
-    "importLibraryError": "ライブラリを読み込めませんでした。"
+    "importLibraryError": "ライブラリを読み込めませんでした。",
+    "collabSaveFailed": "バックエンドデータベースに保存できませんでした。問題が解決しない場合は、作業を失わないようにローカルにファイルを保存してください。",
+    "collabSaveFailed_sizeExceeded": "キャンバスが大きすぎるため、バックエンドデータベースに保存できませんでした。問題が解決しない場合は、作業を失わないようにローカルにファイルを保存してください。"
   },
   "toolBar": {
     "selection": "選択",
@@ -236,7 +238,7 @@
     "resize": "サイズを変更中にSHIFTを押すと縦横比を固定できます。Altを押すと中央からサイズを変更できます",
     "resizeImage": "SHIFTを長押しすると自由にサイズを変更できます。\n中央からサイズを変更するにはALTを長押しします",
     "rotate": "回転中にSHIFT キーを押すと角度を制限することができます",
-    "lineEditor_info": "",
+    "lineEditor_info": "CtrlOrCmd を押したままダブルクリックするか、CtrlOrCmd + Enter を押して点を編集します",
     "lineEditor_pointSelected": "Deleteキーを押すと点を削除、CtrlOrCmd+Dで複製、マウスドラッグで移動",
     "lineEditor_nothingSelected": "編集する点を選択（SHIFTを押したままで複数選択）、\nAltキーを押しながらクリックすると新しい点を追加",
     "placeImage": "クリックして画像を配置するか、クリックしてドラッグしてサイズを手動で設定します",
@@ -312,8 +314,8 @@
     "zoomToFit": "すべての要素が収まるようにズーム",
     "zoomToSelection": "選択要素にズーム",
     "toggleElementLock": "選択したアイテムをロック/ロック解除",
-    "movePageUpDown": "",
+    "movePageUpDown": "ページを上下に移動",
-    "movePageLeftRight": ""
+    "movePageLeftRight": "ページを左右に移動"
   },
   "clearCanvasDialog": {
     "title": "キャンバスを消去"
@@ -395,7 +397,7 @@
     "fileSavedToFilename": "{filename} に保存しました",
     "canvas": "キャンバス",
     "selection": "選択",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "{{shortcut}} を使用して単一の要素として貼り付けるか、\n既存のテキストエディタに貼り付け"
   },
   "colors": {
     "ffffff": "ホワイト",

src/locales/kab-KAB.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "D awezɣi tugra n tugna SVG. Acraḍ SVG yettban-d d armeɣtu.",
     "invalidSVGString": "SVG armeɣtu.",
     "cannotResolveCollabServer": "Ulamek tuqqna s aqeddac n umyalel. Ma ulac uɣilif ales asali n usebter sakin eɛreḍ tikkelt-nniḍen.",
-    "importLibraryError": "Ur d-ssalay ara tamkarḍit"
+    "importLibraryError": "Ur d-ssalay ara tamkarḍit",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Tafrayt",

src/locales/kk-KZ.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "",

src/locales/ko-KR.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "SVG 이미지를 삽입하지 못했습니다. SVG 문법이 유효하지 않은 것 같습니다.",
     "invalidSVGString": "유효하지 않은 SVG입니다.",
     "cannotResolveCollabServer": "협업 서버에 접속하는데 실패했습니다. 페이지를 새로고침하고 다시 시도해보세요.",
-    "importLibraryError": "라이브러리를 불러오지 못했습니다."
+    "importLibraryError": "라이브러리를 불러오지 못했습니다.",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "선택",

src/locales/ku-TR.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "نەیتوانی وێنەی SVG داخڵ بکات. نیشانەی ئێس ڤی جی نادروست دیارە.",
     "invalidSVGString": "ئێس ڤی جی نادروستە.",
     "cannotResolveCollabServer": "ناتوانێت پەیوەندی بکات بە سێرڤەری کۆلاب. تکایە لاپەڕەکە دووبارە باربکەوە و دووبارە هەوڵ بدەوە.",
-    "importLibraryError": "نەیتوانی کتێبخانە بار بکات"
+    "importLibraryError": "نەیتوانی کتێبخانە بار بکات",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "دەستنیشانکردن",

src/locales/lt-LT.json

@@ -201,7 +201,9 @@
     "svgImageInsertError": "Nepavyko įtraukti SVG paveiksliuko. Panašu, jog SVG yra nevalidus.",
     "invalidSVGString": "Nevalidus SVG.",
     "cannotResolveCollabServer": "Nepavyko prisijungti prie serverio bendradarbiavimui. Perkrauk puslapį ir pabandyk prisijungti dar kartą.",
-    "importLibraryError": "Nepavyko įkelti bibliotekos"
+    "importLibraryError": "Nepavyko įkelti bibliotekos",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
   },
   "toolBar": {
     "selection": "Žymėjimas",