feat: make meshV2 domain configurable from GUI

- Add MeshDomainModal component to set MeshV2 domain
- Add Redux state to manage domain information
- Update MenuBar to show current domain and provide setting option
- Add connection check before allowing domain changes
- Add translations (Japanese/English)

Author: takaokouji

src/components/gui/gui.jsx

@@ -30,6 +30,7 @@ import DragLayer from '../../containers/drag-layer.jsx';
 import ConnectionModal from '../../containers/connection-modal.jsx';
 import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 import BlockDisplayModal from '../../containers/block-display-modal.jsx';
+import MeshDomainModal from '../../containers/mesh-domain-modal.jsx';
 import URLLoaderModal from '../url-loader-modal/url-loader-modal.jsx';
 import KoshienTestModal from '../koshien-test-modal/koshien-test-modal.jsx';
 
@@ -98,6 +99,7 @@ const GUIComponent = props => {
         isTotallyNormal,
         loading,
         logo,
+        meshDomainModalVisible,
         renderLogin,
         onClickAbout,
         onClickAccountNav,
@@ -198,6 +200,9 @@ const GUIComponent = props => {
                         onLoadUrl={onUrlLoaderSubmit}
                     />
                 ) : null}
+                {meshDomainModalVisible ? (
+                    <MeshDomainModal />
+                ) : null}
                 {koshienTestModalVisible ? (
                     <KoshienTestModal
                         onRequestClose={closeKoshienTestModal}
@@ -458,6 +463,7 @@ GUIComponent.propTypes = {
     isTotallyNormal: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
+    meshDomainModalVisible: PropTypes.bool,
     onActivateCostumesTab: PropTypes.func,
     onActivateRubyTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,

src/components/menu-bar/menu-bar.jsx

@@ -34,7 +34,15 @@ import GoogleDriveSaverHOC from '../../containers/google-drive-saver-hoc.jsx';
 import GoogleDriveSaveDialog from '../google-drive-save-dialog/google-drive-save-dialog.jsx';
 import SettingsMenu from './settings-menu.jsx';
 
-import {openDebugModal, openKoshienTestModal, openConnectionModal} from '../../reducers/modals';
+import {
+    openDebugModal,
+    openKoshienTestModal,
+    openMeshDomainModal,
+    openConnectionModal
+} from '../../reducers/modals';
+import {
+    setDomain as setMeshV2Domain
+} from '../../reducers/mesh-v2';
 import {setConnectionModalExtensionId} from '../../reducers/connection-modal';
 import {openBlockDisplayModal} from '../../reducers/block-display';
 import {setPlayer} from '../../reducers/mode';
@@ -226,29 +234,26 @@ class MenuBar extends React.Component {
             'handleExtensionAdded',
             'handleClickKoshienEntryForm',
             'handleMeshV2MenuClick',
+            'handleMeshDomainClick',
             'handleClickLearn'
         ]);
     }
     componentDidMount () {
         document.addEventListener('keydown', this.handleKeyPress);
-
-        // Listen for extension load events
-        if (this.props.vm.runtime) {
-            this.props.vm.runtime.on('EXTENSION_ADDED', this.handleExtensionAdded);
-            this.props.vm.runtime.on('PERIPHERAL_CONNECTED', this.handleExtensionAdded);
-            this.props.vm.runtime.on('PERIPHERAL_DISCONNECTED', this.handleExtensionAdded);
-            this.props.vm.runtime.on('PERIPHERAL_REQUEST_ERROR', this.handleExtensionAdded);
+        this.syncMeshV2Domain();
+    }
+    componentDidUpdate (prevProps) {
+        if (this.props.extensionLoadCounter !== prevProps.extensionLoadCounter) {
+            this.syncMeshV2Domain();
         }
     }
     componentWillUnmount () {
         document.removeEventListener('keydown', this.handleKeyPress);
-
-        // Remove extension listener
-        if (this.props.vm.runtime) {
-            this.props.vm.runtime.off('EXTENSION_ADDED', this.handleExtensionAdded);
-            this.props.vm.runtime.off('PERIPHERAL_CONNECTED', this.handleExtensionAdded);
-            this.props.vm.runtime.off('PERIPHERAL_DISCONNECTED', this.handleExtensionAdded);
-            this.props.vm.runtime.off('PERIPHERAL_REQUEST_ERROR', this.handleExtensionAdded);
+    }
+    syncMeshV2Domain () {
+        const extension = this.props.vm.runtime.peripheralExtensions.meshV2;
+        if (extension && extension.domain !== this.props.meshV2Domain) {
+            this.props.onSetMeshV2Domain(extension.domain);
         }
     }
     handleExtensionAdded () {
@@ -303,6 +308,20 @@ class MenuBar extends React.Component {
         // Open connection modal
         this.props.onOpenConnectionModal('meshV2');
     }
+    handleMeshDomainClick () {
+        // Close the Mesh V2 menu
+        this.props.onRequestCloseMeshV2();
+
+        const extension = this.props.vm.runtime.peripheralExtensions.meshV2;
+        if (extension && (extension.connectionState === 'connected' || extension.connectionState === 'connecting')) {
+            alert(this.props.intl.formatMessage({ // eslint-disable-line no-alert
+                id: 'mesh.domainConnectedAlert',
+                default: 'Mesh V2 is connected. To change the domain, please disconnect first.'
+            }));
+            return;
+        }
+        this.props.onOpenMeshDomainModal();
+    }
     handleClickNew () {
         // if the project is dirty, and user owns the project, we will autosave.
         // but if they are not logged in and can't save, user should consider
@@ -962,6 +981,24 @@ class MenuBar extends React.Component {
                                         <MenuItem onClick={this.handleMeshV2MenuClick}>
                                             {meshV2Status.message}
                                         </MenuItem>
+                                        <MenuSection>
+                                            <MenuItem onClick={this.handleMeshDomainClick}>
+                                                <FormattedMessage
+                                                    defaultMessage="Domain: {domain}"
+                                                    description="Label for Mesh V2 domain"
+                                                    id="mesh.domain"
+                                                    values={{
+                                                        domain: this.props.meshV2Domain || (
+                                                            <FormattedMessage
+                                                                defaultMessage="Not set"
+                                                                description="Label for Mesh V2 domain not set"
+                                                                id="mesh.domainNotSet"
+                                                            />
+                                                        )
+                                                    }}
+                                                />
+                                            </MenuItem>
+                                        </MenuSection>
                                     </MenuBarMenu>
                                 </div>
                             );
@@ -1342,6 +1379,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    meshV2Domain: PropTypes.string,
     meshV2MenuOpen: PropTypes.bool,
     mode1920: PropTypes.bool,
     mode1990: PropTypes.bool,
@@ -1376,6 +1414,7 @@ MenuBar.propTypes = {
     onOpenRegistration: PropTypes.func,
     onOpenBlockDisplayModal: PropTypes.func,
     onOpenConnectionModal: PropTypes.func,
+    onOpenMeshDomainModal: PropTypes.func,
     onOpenDebugModal: PropTypes.func,
     onOpenKoshienTestModal: PropTypes.func,
     onProjectTelemetryEvent: PropTypes.func,
@@ -1399,6 +1438,7 @@ MenuBar.propTypes = {
     onStartSavingToGoogleDrive: PropTypes.func,
     onSaveDirectlyToGoogleDrive: PropTypes.func,
     onSetAiSaveStatus: PropTypes.func,
+    onSetMeshV2Domain: PropTypes.func,
     onClearAiSaveStatus: PropTypes.func,
     onStartSelectingUrlLoad: PropTypes.func,
     projectFilename: PropTypes.string,
@@ -1431,6 +1471,7 @@ const mapStateToProps = (state, ownProps) => {
         fileMenuOpen: fileMenuOpen(state),
         editMenuOpen: editMenuOpen(state),
         koshienMenuOpen: koshienMenuOpen(state),
+        meshV2Domain: state.scratchGui.meshV2.domain,
         meshV2MenuOpen: meshV2MenuOpen(state),
         extensionLoadCounter: state.scratchGui.koshienFile.extensionLoadCounter,
         aiSaveStatus: state.scratchGui.koshienFile.aiSaveStatus,
@@ -1465,6 +1506,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(setConnectionModalExtensionId(id));
         dispatch(openConnectionModal());
     },
+    onOpenMeshDomainModal: () => dispatch(openMeshDomainModal()),
     onOpenBlockDisplayModal: () => dispatch(openBlockDisplayModal()),
     onOpenKoshienTestModal: () => dispatch(openKoshienTestModal()),
     onClickAccount: () => dispatch(openAccountMenu()),
@@ -1493,6 +1535,7 @@ const mapDispatchToProps = dispatch => ({
     onClickSave: () => dispatch(manualUpdateProject()),
     onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
     onExtensionLoaded: () => dispatch(incrementExtensionLoad()),
+    onSetMeshV2Domain: domain => dispatch(setMeshV2Domain(domain)),
     onSetAiSaveStatus: status => dispatch(setAiSaveStatus(status)),
     onClearAiSaveStatus: () => dispatch(clearAiSaveStatus()),
     onSeeCommunity: () => dispatch(setPlayer(true)),

src/components/mesh-domain-modal/mesh-domain-modal.css

@@ -0,0 +1,64 @@
+.modal-content {
+    width: 480px;
+}
+
+.header {
+    background-color: #00bcd4;
+}
+
+.body {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.input-section {
+    margin-bottom: 1.5rem;
+}
+
+.domain-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    font-size: 1rem;
+    outline: none;
+}
+
+.domain-input:focus {
+    border-color: #00bcd4;
+    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
+}
+
+.button-section {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+}
+
+.save-button, .cancel-button {
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    cursor: pointer;
+    border: none;
+}
+
+.save-button {
+    background-color: #00bcd4;
+    color: white;
+}
+
+.save-button:hover {
+    background-color: #0097a7;
+}
+
+.cancel-button {
+    background-color: #f5f5f5;
+    color: #333;
+}
+
+.cancel-button:hover {
+    background-color: #e0e0e0;
+}

src/components/mesh-domain-modal/mesh-domain-modal.jsx

@@ -0,0 +1,125 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
+
+import Box from '../box/box.jsx';
+import Modal from '../../containers/modal.jsx';
+
+import styles from './mesh-domain-modal.css';
+
+const messages = defineMessages({
+    title: {
+        defaultMessage: 'Mesh V2 Domain Settings',
+        description: 'Title for the Mesh V2 domain modal',
+        id: 'mesh.domainModalTitle'
+    },
+    domainPlaceholder: {
+        defaultMessage: 'Enter domain name...',
+        description: 'Placeholder text for domain input field',
+        id: 'mesh.domainPlaceholder'
+    },
+    saveButton: {
+        defaultMessage: 'Save',
+        description: 'Label for save button',
+        id: 'mesh.domainSaveButton'
+    },
+    cancelButton: {
+        defaultMessage: 'Cancel',
+        description: 'Label for cancel button',
+        id: 'mesh.domainCancelButton'
+    }
+});
+
+class MeshDomainModal extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleDomainChange',
+            'handleSaveClick',
+            'handleCancelClick',
+            'handleKeyPress'
+        ]);
+
+        this.state = {
+            domain: props.initialDomain || ''
+        };
+    }
+
+    handleDomainChange (event) {
+        this.setState({
+            domain: event.target.value
+        });
+    }
+
+    handleSaveClick () {
+        this.props.onSave(this.state.domain.trim());
+    }
+
+    handleCancelClick () {
+        this.props.onRequestClose();
+    }
+
+    handleKeyPress (event) {
+        if (event.key === 'Enter') {
+            this.handleSaveClick();
+        }
+    }
+
+    render () {
+        const {intl, onRequestClose} = this.props;
+        const {domain} = this.state;
+
+        return (
+            <Modal
+                className={styles.modalContent}
+                contentLabel={intl.formatMessage(messages.title)}
+                headerClassName={styles.header}
+                id="meshDomainModal"
+                onRequestClose={onRequestClose}
+            >
+                <Box className={styles.body}>
+                    <Box className={styles.inputSection}>
+                        <input
+                            className={styles.domainInput}
+                            type="text"
+                            value={domain}
+                            placeholder={intl.formatMessage(messages.domainPlaceholder)}
+                            onChange={this.handleDomainChange}
+                            onKeyPress={this.handleKeyPress}
+                            autoFocus
+                        />
+                    </Box>
+
+                    <Box className={styles.buttonSection}>
+                        <button
+                            className={styles.cancelButton}
+                            onClick={this.handleCancelClick}
+                        >
+                            <FormattedMessage
+                                {...messages.cancelButton}
+                            />
+                        </button>
+                        <button
+                            className={styles.saveButton}
+                            onClick={this.handleSaveClick}
+                        >
+                            <FormattedMessage
+                                {...messages.saveButton}
+                            />
+                        </button>
+                    </Box>
+                </Box>
+            </Modal>
+        );
+    }
+}
+
+MeshDomainModal.propTypes = {
+    intl: intlShape.isRequired,
+    onRequestClose: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    initialDomain: PropTypes.string
+};
+
+export default injectIntl(MeshDomainModal);

src/containers/gui.jsx

@@ -181,6 +181,7 @@ const mapStateToProps = state => {
         telemetryModalVisible: state.scratchGui.modals.telemetryModal,
         rubyTabVisible: state.scratchGui.editorTab.activeTabIndex === RUBY_TAB_INDEX,
         urlLoaderModalVisible: state.scratchGui.modals.urlLoaderModal,
+        meshDomainModalVisible: state.scratchGui.modals.meshDomainModal,
         koshienTestModalVisible: state.scratchGui.modals.koshienTestModal,
         vm: state.scratchGui.vm
     };