Add custom room name dialog to scene landing page

src/assets/stylesheets/scene-ui.scss

@@ -38,10 +38,6 @@
   justify-content: center;
   pointer-events: auto;
 
-  button {
-    @extend %action-button;
-    border: 0;
-  }
 }
 
 :local(.logoTagline) {
@@ -147,3 +143,23 @@
     width: 200px;
   }
 }
+
+:local(.createButtons) {
+  position: relative;
+  display: flex;
+}
+
+:local(.create-button) {
+  @extend %action-button;
+  width: 100%;
+  border: 0;
+}
+
+:local(.options-button) {
+  @extend %fa-icon-button;
+  @extend %fa-icon-big;
+  position: absolute;
+  right: 10px;
+  top: -12px;
+  color: white;
+}

src/assets/stylesheets/scene.scss

 @import 'shared';
 @import 'loader';
+@import 'info-dialog';

src/react-components/create-room-dialog.js

@@ -4,8 +4,9 @@ import DialogContainer from "./dialog-container.js";
 
 const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
 
-export default class CreateObjectDialog extends Component {
+export default class CreateRoomDialog extends Component {
   static propTypes = {
+    includeScenePrompt: PropTypes.bool,
     onCustomScene: PropTypes.func,
     onClose: PropTypes.func
   };
@@ -25,7 +26,12 @@ export default class CreateObjectDialog extends Component {
     return (
       <DialogContainer title="Create a Room" onClose={onClose} {...other}>
         <div>
-          <div>Choose a name and GLTF URL for your room&apos;s scene:</div>
+          {this.props.includeScenePrompt ? (
+            <div>Choose a name and GLTF URL for your room&apos;s scene:</div>
+          ) : (
+            <div>Choose a name for your room:</div>
+          )}
+
           <form onSubmit={onCustomSceneClicked}>
             <div className="custom-scene-form">
               <input
@@ -38,13 +44,15 @@ export default class CreateObjectDialog extends Component {
                 onChange={e => this.setState({ customRoomName: e.target.value })}
                 required
               />
-              <input
-                type="url"
-                placeholder="URL to Scene GLTF or GLB (Optional)"
-                className="custom-scene-form__link_field"
-                value={this.state.customSceneUrl}
-                onChange={e => this.setState({ customSceneUrl: e.target.value })}
-              />
+              {this.props.includeScenePrompt && (
+                <input
+                  type="url"
+                  placeholder="URL to Scene GLTF or GLB (Optional)"
+                  className="custom-scene-form__link_field"
+                  value={this.state.customSceneUrl}
+                  onChange={e => this.setState({ customSceneUrl: e.target.value })}
+                />
+              )}
               <div className="custom-scene-form__buttons">
                 <button className="custom-scene-form__action-button">
                   <span>create</span>

src/react-components/hub-create-panel.js

@@ -235,6 +235,7 @@ class HubCreatePanel extends Component {
         </form>
         {this.state.showCustomSceneDialog && (
           <CreateRoomDialog
+            includeScenePrompt={true}
             onClose={() => this.setState({ showCustomSceneDialog: false })}
             onCustomScene={(name, url) => {
               this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () => this.createHub());

src/react-components/scene-ui.js

@@ -8,6 +8,9 @@ import hubLogo from "../assets/images/hub-preview-white.png";
 import spokeLogo from "../assets/images/spoke_logo_black.png";
 import { getReticulumFetchUrl } from "../utils/phoenix-utils";
 import { generateHubName } from "../utils/name-generation";
+import CreateRoomDialog from "./create-room-dialog.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsisH } from "@fortawesome/free-solid-svg-icons/faEllipsisH";
 
 import { lang, messages } from "../utils/i18n";
 
@@ -25,7 +28,8 @@ class SceneUI extends Component {
   };
 
   state = {
-    showScreenshot: false
+    showScreenshot: false,
+    showCustomRoomDialog: false
   };
 
   constructor(props) {
@@ -48,7 +52,7 @@ class SceneUI extends Component {
   }
 
   createRoom = async () => {
-    const payload = { hub: { name: generateHubName(), scene_id: this.props.sceneId } };
+    const payload = { hub: { name: this.state.customRoomName || generateHubName(), scene_id: this.props.sceneId } };
     const createUrl = getReticulumFetchUrl("/api/v1/hubs");
 
     const res = await fetch(createUrl, {
@@ -93,9 +97,16 @@ class SceneUI extends Component {
               <div className={styles.logoTagline}>
                 <FormattedMessage id="scene.logo_tagline" />
               </div>
-              <button onClick={this.createRoom}>
-                <FormattedMessage id="scene.create_button" />
-              </button>
+              <div className={styles.createButtons}>
+                <button className={styles.createButton} onClick={this.createRoom}>
+                  <FormattedMessage id="scene.create_button" />
+                </button>
+                <button className={styles.optionsButton} onClick={() => this.setState({ showCustomRoomDialog: true })}>
+                  <i>
+                    <FontAwesomeIcon icon={faEllipsisH} />
+                  </i>
+                </button>
+              </div>
               <a href={tweetLink} rel="noopener noreferrer" target="_blank" className={styles.tweetButton}>
                 <img src="../assets/images/twitter.svg" />
                 <div>
@@ -114,6 +125,15 @@ class SceneUI extends Component {
               <img src={spokeLogo} />
             </a>
           </div>
+          {this.state.showCustomRoomDialog && (
+            <CreateRoomDialog
+              includeScenePrompt={false}
+              onClose={() => this.setState({ showCustomRoomDialog: false })}
+              onCustomScene={name => {
+                this.setState({ showCustomRoomDialog: false, customRoomName: name }, () => this.createRoom());
+              }}
+            />
+          )}
         </div>
       </IntlProvider>
     );