Work On Modal State Management

apps/desktop/src/app/components/passkeys.component.ts

@@ -2,6 +2,8 @@ import { Component } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 
+import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
+
 export type BrowserSyncVerificationDialogParams = {
   fingerprint: string[];
 };
@@ -9,7 +11,9 @@ export type BrowserSyncVerificationDialogParams = {
 @Component({
   standalone: true,
   template: `
-    <div style="background:white; display:flex; justify-content: center; align-items: center;">
+    <div
+      style="background:white; display:flex; justify-content: center; align-items: center; flex-direction: column"
+    >
       <img
         src="../resources/Frame2101.svg"
         class="mb-4 logo"
@@ -17,8 +21,17 @@ export type BrowserSyncVerificationDialogParams = {
         width="440"
         height="400"
       />
+      <br />
+      <button bitButton type="button" buttonType="secondary" (click)="closeModal()">Close</button>
     </div>
   `,
   imports: [JslibModule],
 })
-export class PasskeysComponent {}
+export class PasskeysComponent {
+  constructor(private readonly desktopSettingsService: DesktopSettingsService) {}
+
+  async closeModal() {
+    console.log("closing modal");
+    await this.desktopSettingsService.setInModalMode(false);
+  }
+}

apps/desktop/src/main/tray.main.ts

@@ -211,6 +211,8 @@ export class TrayMain {
     // Restyle existing
     const existingWin = this.windowMain.win;
 
+    await this.desktopSettingsService.setInModalMode(true);
+
     existingWin.setBounds({
       width: 500,
       height: 400,

apps/desktop/src/main/window.main.ts

@@ -3,7 +3,7 @@ import * as path from "path";
 import * as url from "url";
 
 import { app, BrowserWindow, ipcMain, nativeTheme, screen, session } from "electron";
-import { firstValueFrom } from "rxjs";
+import { concatMap, firstValueFrom, pairwise } from "rxjs";
 
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
@@ -11,6 +11,7 @@ import { processisolations } from "@bitwarden/desktop-napi";
 import { BiometricStateService } from "@bitwarden/key-management";
 
 import { WindowState } from "../platform/models/domain/window-state";
+import { applyMainWindowStyles } from "../platform/popup-modal-styles";
 import { DesktopSettingsService } from "../platform/services/desktop-settings.service";
 import {
   cleanUserAgent,
@@ -45,7 +46,7 @@ export class WindowMain {
     private desktopSettingsService: DesktopSettingsService,
     private argvCallback: (argv: string[]) => void = null,
     private createWindowCallback: (win: BrowserWindow) => void,
-  ) {}
+  ) { }
 
   init(): Promise<any> {
     // Perform a hard reload of the render process by crashing it. This is suboptimal but ensures that all memory gets
@@ -69,6 +70,18 @@ export class WindowMain {
       this.logService.info("Render process reloaded");
     });
 
+    this.desktopSettingsService.inModalMode$
+      .pipe(
+        pairwise(),
+        concatMap(async ([lastValue, newValue]) => {
+          console.log("inModalMode updated", { lastValue, newValue });
+          if (lastValue && !newValue) {
+            applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]);
+          }
+        }),
+      )
+      .subscribe();
+
     return new Promise<void>((resolve, reject) => {
       try {
         if (!isMacAppStore() && !isSnapStore()) {
@@ -203,7 +216,6 @@ export class WindowMain {
         },
       });
     } else {
-      //
       this.win = new BrowserWindow({
         width: 450,
         height: 450,
@@ -353,7 +365,16 @@ export class WindowMain {
   }
 
   private async updateWindowState(configKey: string, win: BrowserWindow) {
+    console.log("updateWindowState");
     if (win == null || win.isDestroyed()) {
+      console.log("no window/destroyed");
+      return;
+    }
+
+    const inModalMode = await firstValueFrom(this.desktopSettingsService.inModalMode$);
+
+    if (inModalMode) {
+      console.log("in modal mode, ignore");
       return;
     }
 

apps/desktop/src/platform/popup-modal-styles.ts

@@ -0,0 +1,15 @@
+import { BrowserWindow } from "electron";
+
+import { WindowState } from "./models/domain/window-state";
+
+export function applyPopupModalStyles(window: BrowserWindow) {
+  //
+}
+
+export function applyMainWindowStyles(window: BrowserWindow, existingWindowState: WindowState) {
+  window.setMinimumSize(400, 400);
+  window.setSize(existingWindowState.width, existingWindowState.height);
+  window.setPosition(existingWindowState.x, existingWindowState.y);
+  window.setWindowButtonVisibility(true);
+  window.setMenuBarVisibility(true);
+}

apps/desktop/src/platform/services/desktop-settings.service.ts

@@ -71,6 +71,10 @@ const MINIMIZE_ON_COPY = new UserKeyDefinition<boolean>(DESKTOP_SETTINGS_DISK, "
   clearOn: [], // User setting, no need to clear
 });
 
+const IN_MODAL_MODE = new KeyDefinition<boolean>(DESKTOP_SETTINGS_DISK, "inModalMode", {
+  deserializer: (b) => b,
+});
+
 /**
  * Various settings for controlling application behavior specific to the desktop client.
  */
@@ -147,6 +151,10 @@ export class DesktopSettingsService {
    */
   minimizeOnCopy$ = this.minimizeOnCopyState.state$.pipe(map(Boolean));
 
+  private readonly inModalModeState = this.stateProvider.getGlobal(IN_MODAL_MODE);
+
+  inModalMode$ = this.inModalModeState.state$.pipe(map(Boolean));
+
   constructor(private stateProvider: StateProvider) {
     this.window$ = this.windowState.state$.pipe(
       map((window) =>
@@ -255,4 +263,7 @@ export class DesktopSettingsService {
   async setMinimizeOnCopy(value: boolean, userId: UserId) {
     await this.stateProvider.getUser(userId, MINIMIZE_ON_COPY).update(() => value);
   }
+  async setInModalMode(value: boolean) {
+    await this.inModalModeState.update(() => value);
+  }
 }