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/App.tsx

@@ -190,7 +190,12 @@ export class App extends React.Component<any, AppState> {
       if (commitToHistory) {
         history.resumeRecording();
       }
-      this.setState({ ...res.appState });
+      this.setState(state => ({
+        ...res.appState,
+        isCollaborating: state.isCollaborating,
+        remotePointers: state.remotePointers,
+        collaboratorCount: state.collaboratorCount,
+      }));
     }
   };
 
@@ -226,12 +231,27 @@ export class App extends React.Component<any, AppState> {
     event.preventDefault();
   };
 
+  private destroySocketClient = () => {
+    this.setState({
+      isCollaborating: false,
+    });
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
+      this.roomID = null;
+      this.roomKey = null;
+    }
+  };
+
   private initializeSocketClient = () => {
     if (this.socket) {
       return;
     }
     const roomMatch = getCollaborationLinkData(window.location.href);
     if (roomMatch) {
+      this.setState({
+        isCollaborating: true,
+      });
       this.socket = socketIOClient(SOCKET_SERVER);
       this.roomID = roomMatch[1];
       this.roomKey = roomMatch[2];
@@ -611,6 +631,20 @@ export class App extends React.Component<any, AppState> {
     gesture.pointers.delete(event.pointerId);
   };
 
+  createRoom = async () => {
+    window.history.pushState(
+      {},
+      "Excalidraw",
+      await generateCollaborationLink(),
+    );
+    this.initializeSocketClient();
+  };
+
+  destroyRoom = () => {
+    window.history.pushState({}, "Excalidraw", window.location.origin);
+    this.destroySocketClient();
+  };
+
   public render() {
     const canvasDOMWidth = window.innerWidth;
     const canvasDOMHeight = window.innerHeight;
@@ -630,6 +664,8 @@ export class App extends React.Component<any, AppState> {
           elements={elements}
           setElements={this.setElements}
           language={getLanguage()}
+          onRoomCreate={this.createRoom}
+          onRoomDestroy={this.destroyRoom}
         />
         <main>
           <canvas