fix: unmount application view when ephemeral identifier changes

app/assets/javascripts/app.tsx

@@ -25,7 +25,7 @@ declare global {
 }
 
 import { IsWebPlatform, WebAppVersion } from '@/version';
-import { SNLog } from '@standardnotes/snjs';
+import { Runtime, SNLog } from '@standardnotes/snjs';
 import { render } from 'preact';
 import { ApplicationGroupView } from './components/ApplicationGroupView';
 import { Bridge } from './services/bridge';
@@ -47,7 +47,7 @@ const startApplication: StartApplication = async function startApplication(
   const mainApplicationGroup = new ApplicationGroup(
     defaultSyncServerHost,
     bridge,
-    enableUnfinishedFeatures,
+    enableUnfinishedFeatures ? Runtime.Dev : Runtime.Prod,
     webSocketUrl
   );
 

app/assets/javascripts/components/ApplicationGroupView.tsx

@@ -4,7 +4,6 @@ import { Component } from 'preact';
 import { ApplicationView } from './ApplicationView';
 
 type State = {
-  applications: WebApplication[];
   activeApplication?: WebApplication;
 };
 
@@ -15,36 +14,28 @@ type Props = {
 export class ApplicationGroupView extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = {
-      applications: [],
-    };
+
     props.mainApplicationGroup.addApplicationChangeObserver(() => {
-      this.setState({
-        activeApplication: props.mainApplicationGroup
-          .primaryApplication as WebApplication,
-        applications:
-          props.mainApplicationGroup.getApplications() as WebApplication[],
-      });
+      const activeApplication = props.mainApplicationGroup
+        .primaryApplication as WebApplication;
+      this.setState({ activeApplication });
     });
+
     props.mainApplicationGroup.initialize();
   }
 
   render() {
     return (
       <>
-        {this.state.applications.map((application) => {
-          if (application === this.state.activeApplication) {
-            return (
-              <div id={application.identifier}>
-                <ApplicationView
-                  key={application.identifier}
-                  mainApplicationGroup={this.props.mainApplicationGroup}
-                  application={application}
-                />
-              </div>
-            );
-          }
-        })}
+        {this.state.activeApplication && (
+          <div id={this.state.activeApplication.identifier}>
+            <ApplicationView
+              key={this.state.activeApplication.ephemeralIdentifier}
+              mainApplicationGroup={this.props.mainApplicationGroup}
+              application={this.state.activeApplication}
+            />
+          </div>
+        )}
       </>
     );
   }

app/assets/javascripts/components/ChallengeModal.tsx

@@ -122,8 +122,8 @@ export class ChallengeModal extends PureComponent<Props, State> {
         confirmButtonStyle: 'danger',
       })
     ) {
-      await this.application.signOut();
       this.dismiss();
+      this.application.signOut();
     }
   };
 
@@ -334,7 +334,7 @@ export class ChallengeModal extends PureComponent<Props, State> {
                 <div className="sk-panel-footer">
                   {this.state.forgotPasscode ? (
                     <>
-                      <p className="sk-panel-row sk-p">
+                      <p className="sk-panel-row sk-p text-center">
                         {this.state.hasAccount
                           ? 'If you forgot your application passcode, your ' +
                             'only option is to clear your local data from this ' +

app/assets/javascripts/ui_models/application.ts

@@ -16,6 +16,7 @@ import {
   NoteGroupController,
   removeFromArray,
   IconsController,
+  Runtime,
 } from '@standardnotes/snjs';
 
 type WebServices = {
@@ -48,8 +49,8 @@ export class WebApplication extends SNApplication {
     identifier: string,
     defaultSyncServerHost: string,
     public bridge: Bridge,
-    enableUnfinishedFeatures: boolean,
-    webSocketUrl: string
+    webSocketUrl: string,
+    runtime: Runtime
   ) {
     super(
       bridge.environment,
@@ -61,8 +62,8 @@ export class WebApplication extends SNApplication {
       [],
       defaultSyncServerHost,
       bridge.appVersion,
-      enableUnfinishedFeatures,
-      webSocketUrl
+      webSocketUrl,
+      runtime
     );
     deviceInterface.setApplication(this);
     this.noteControllerGroup = new NoteGroupController(this);

app/assets/javascripts/ui_models/application_group.ts

@@ -5,6 +5,7 @@ import {
   SNApplicationGroup,
   DeviceInterface,
   Platform,
+  Runtime,
 } from '@standardnotes/snjs';
 import { AppState } from '@/ui_models/app_state';
 import { Bridge } from '@/services/bridge';
@@ -20,7 +21,7 @@ export class ApplicationGroup extends SNApplicationGroup {
   constructor(
     private defaultSyncServerHost: string,
     private bridge: Bridge,
-    private enableUnfinishedFeatures: boolean,
+    private runtime: Runtime,
     private webSocketUrl: string
   ) {
     super(new WebDeviceInterface(bridge));
@@ -50,8 +51,8 @@ export class ApplicationGroup extends SNApplicationGroup {
       descriptor.identifier,
       this.defaultSyncServerHost,
       this.bridge,
-      this.enableUnfinishedFeatures,
-      this.webSocketUrl
+      this.webSocketUrl,
+      this.runtime
     );
     const appState = new AppState(application, this.bridge);
     const archiveService = new ArchiveManager(application);