Room dialog (#905)

* support ToolIcon className and fix label padding

* factor some ExportDialog classes out to Modal

* initial RoomDialog prototype

* change label for another-session button

* remove unused css

* add color comments

* Move the collaboration button to the main menu, add support for mobile

* remove button for creating another session

* add locks

* Fix alignment issue

* Reorder button

* reuse current scene for collab session

* keep collaboration state on restore

Co-authored-by: Jed Fox <git@twopointzero.us>

src/components/MobileMenu.tsx

@@ -12,6 +12,7 @@ import { HintViewer } from "./HintViewer";
 import { calculateScrollCenter, getTargetElement } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
+import { RoomDialog } from "./RoomDialog";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -20,6 +21,8 @@ type MobileMenuProps = {
   setAppState: any;
   elements: readonly ExcalidrawElement[];
   setElements: any;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
 };
 
 export function MobileMenu({
@@ -29,6 +32,8 @@ export function MobileMenu({
   actionManager,
   exportButton,
   setAppState,
+  onRoomCreate,
+  onRoomDestroy,
 }: MobileMenuProps) {
   return (
     <>
@@ -40,6 +45,11 @@ export function MobileMenu({
               {actionManager.renderAction("saveScene")}
               {exportButton}
               {actionManager.renderAction("clearCanvas")}
+              <RoomDialog
+                isCollaborating={appState.isCollaborating}
+                onRoomCreate={onRoomCreate}
+                onRoomDestroy={onRoomDestroy}
+              />
               {actionManager.renderAction("changeViewBackgroundColor")}
               <fieldset>
                 <legend>{t("labels.language")}</legend>