complete multiple UI launcher

frontend/projects/ui/src/app/components/launch-menu/launch-menu.component.html

@@ -0,0 +1,28 @@
+<ion-popover
+  #popover
+  (didDismiss)="popover.isOpen = false"
+  mode="ios"
+  type="event"
+>
+  <ng-template>
+    <ion-content>
+      <ion-item-group>
+        <ng-container *ngFor="let address of addressInfo | uiAddresses">
+          <ion-item-divider>{{ address.name }}</ion-item-divider>
+          <ion-item
+            button
+            detail="false"
+            *ngFor="let address of address.addresses"
+            (click)="launchUI(address)"
+          >
+            <ion-label>
+              <h2>{{ address | addressType }}</h2>
+              <p>{{ address }}</p>
+            </ion-label>
+            <ion-icon slot="end" name="open-outline" size="small"></ion-icon>
+          </ion-item>
+        </ng-container>
+      </ion-item-group>
+    </ion-content>
+  </ng-template>
+</ion-popover>

frontend/projects/ui/src/app/components/launch-menu/launch-menu.component.scss

@@ -0,0 +1,3 @@
+ion-popover {
+  --min-width: 360px;
+}

frontend/projects/ui/src/app/components/launch-menu/launch-menu.component.ts

@@ -0,0 +1,37 @@
+import { DOCUMENT } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  ViewChild,
+} from '@angular/core'
+import { InstalledPackageInfo } from 'src/app/services/patch-db/data-model'
+
+@Component({
+  selector: 'launch-menu',
+  templateUrl: 'launch-menu.component.html',
+  styleUrls: ['launch-menu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LaunchMenuComponent {
+  @ViewChild('popover') popover!: HTMLIonPopoverElement
+
+  @Input()
+  addressInfo!: InstalledPackageInfo['address-info']
+
+  set isOpen(open: boolean) {
+    this.popover.isOpen = open
+  }
+
+  set event(event: Event) {
+    this.popover.event = event
+  }
+
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  launchUI(address: string) {
+    this.document.defaultView?.open(address, '_blank', 'noreferrer')
+    this.popover.isOpen = false
+  }
+}

frontend/projects/ui/src/app/components/launch-menu/launch-menu.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { LaunchMenuComponent } from './launch-menu.component'
+import { UiPipeModule } from 'src/app/pipes/ui/ui.module'
+
+@NgModule({
+  declarations: [LaunchMenuComponent],
+  imports: [CommonModule, IonicModule, UiPipeModule],
+  exports: [LaunchMenuComponent],
+})
+export class LaunchMenuComponentModule {}

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.html

@@ -30,30 +30,9 @@ <h2 ticker>{{ manifest.title }}</h2>
     >
       <ion-icon slot="icon-only" name="open-outline"></ion-icon>
     </ion-button>
-    <ion-popover
-      #popover
-      [isOpen]="isPopoverOpen"
-      (didDismiss)="isPopoverOpen = false"
-      mode="ios"
-      type="event"
-    >
-      <ng-template>
-        <ion-content>
-          <ion-item-group>
-            <ng-container
-              *ngFor="let uiAddress of installed['address-info'] | uiAddresses"
-            >
-              <ion-item-divider>{{ uiAddress.name }}</ion-item-divider>
-              <ion-item button *ngFor="let address of uiAddress.addresses">
-                <ion-label>
-                  <h2>{{ address | addressType }}</h2>
-                  <p>{{ address }}</p>
-                </ion-label>
-              </ion-item>
-            </ng-container>
-          </ion-item-group>
-        </ion-content>
-      </ng-template>
-    </ion-popover>
+    <launch-menu
+      #launchMenu
+      [addressInfo]="installed['address-info']"
+    ></launch-menu>
   </ng-container>
 </ion-item>

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.scss

@@ -1,3 +0,0 @@
-ion-popover {
-  --min-width: 300px;
-}

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.ts

@@ -4,6 +4,7 @@ import {
   Input,
   ViewChild,
 } from '@angular/core'
+import { LaunchMenuComponent } from 'src/app/components/launch-menu/launch-menu.component'
 import { PackageMainStatus } from 'src/app/services/patch-db/data-model'
 import { PkgInfo } from 'src/app/util/get-package-info'
 
@@ -14,13 +15,11 @@ import { PkgInfo } from 'src/app/util/get-package-info'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListPkgComponent {
-  @ViewChild('popover') popover!: HTMLIonPopoverElement
+  @ViewChild('launchMenu') launchMenu!: LaunchMenuComponent
 
   @Input()
   pkg!: PkgInfo
 
-  isPopoverOpen = false
-
   get status(): PackageMainStatus {
     return (
       this.pkg.entry.installed?.status.main.status || PackageMainStatus.Stopped
@@ -30,7 +29,7 @@ export class AppListPkgComponent {
   openPopover(e: Event): void {
     e.stopPropagation()
     e.preventDefault()
-    this.popover.event = e
-    this.isPopoverOpen = true
+    this.launchMenu.event = e
+    this.launchMenu.isOpen = true
   }
 }

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.module.ts

@@ -16,6 +16,7 @@ import { AppListIconComponent } from './app-list-icon/app-list-icon.component'
 import { AppListPkgComponent } from './app-list-pkg/app-list-pkg.component'
 import { PackageInfoPipe } from './package-info.pipe'
 import { WidgetListComponentModule } from 'src/app/components/widget-list/widget-list.component.module'
+import { LaunchMenuComponentModule } from 'src/app/components/launch-menu/launch-menu.module'
 
 const routes: Routes = [
   {
@@ -37,6 +38,7 @@ const routes: Routes = [
     WidgetListComponentModule,
     ResponsiveColModule,
     TickerModule,
+    LaunchMenuComponentModule,
   ],
   declarations: [
     AppListPage,

frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts

@@ -24,6 +24,7 @@ import { ToDependenciesPipe } from './pipes/to-dependencies.pipe'
 import { ToStatusPipe } from './pipes/to-status.pipe'
 import { ProgressDataPipe } from './pipes/progress-data.pipe'
 import { InsecureWarningComponentModule } from 'src/app/components/insecure-warning/insecure-warning.module'
+import { LaunchMenuComponentModule } from 'src/app/components/launch-menu/launch-menu.module'
 
 const routes: Routes = [
   {
@@ -59,6 +60,7 @@ const routes: Routes = [
     ResponsiveColModule,
     SharedPipesModule,
     InsecureWarningComponentModule,
+    LaunchMenuComponentModule,
   ],
 })
 export class AppShowPageModule {}

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.html

@@ -5,7 +5,7 @@
       size="x-large"
       weight="600"
       [installProgress]="pkg['install-progress']"
-      [rendering]="PR[status.primary]"
+      [rendering]="rendering"
     ></status>
   </ion-label>
 </ion-item>
@@ -53,12 +53,14 @@
           *ngIf="addressInfo | hasUi"
           class="action-button"
           color="primary"
-          [disabled]="status.primary === 'running'"
-          (click)="launchUi(addressInfo)"
+          [disabled]="status.primary !== 'running'"
+          (click)="openPopover($event)"
         >
           <ion-icon slot="start" name="open-outline"></ion-icon>
           Open UI
         </ion-button>
+
+        <launch-menu #launchMenu [addressInfo]="addressInfo"></launch-menu>
       </ion-col>
     </ion-row>
   </ion-grid>

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts

@@ -1,14 +1,18 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { UiLauncherService } from 'src/app/services/ui-launcher.service'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewChild,
+} from '@angular/core'
 import {
   PackageStatus,
   PrimaryRendering,
   PrimaryStatus,
+  StatusRendering,
 } from 'src/app/services/pkg-status-rendering.service'
 import {
   AddressInfo,
   DataModel,
-  InstalledPackageInfo,
   PackageDataEntry,
   PackageState,
 } from 'src/app/services/patch-db/data-model'
@@ -24,6 +28,7 @@ import { DependencyInfo } from '../../pipes/to-dependencies.pipe'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { PatchDB } from 'patch-db-client'
+import { LaunchMenuComponent } from 'src/app/components/launch-menu/launch-menu.component'
 
 @Component({
   selector: 'app-show-status',
@@ -32,6 +37,8 @@ import { PatchDB } from 'patch-db-client'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppShowStatusComponent {
+  @ViewChild('launchMenu') launchMenu!: LaunchMenuComponent
+
   @Input()
   pkg!: PackageDataEntry
 
@@ -41,16 +48,13 @@ export class AppShowStatusComponent {
   @Input()
   dependencies: DependencyInfo[] = []
 
-  PR = PrimaryRendering
-
   readonly connected$ = this.connectionService.connected$
 
   constructor(
     private readonly alertCtrl: AlertController,
     private readonly errToast: ErrorToastService,
     private readonly loadingCtrl: LoadingController,
     private readonly embassyApi: ApiService,
-    private readonly launcherService: UiLauncherService,
     private readonly formDialog: FormDialogService,
     private readonly connectionService: ConnectionService,
     private readonly patch: PatchDB<DataModel>,
@@ -80,8 +84,13 @@ export class AppShowStatusComponent {
     return this.status.primary === PrimaryStatus.Stopped
   }
 
-  launchUi(addressInfo: InstalledPackageInfo['address-info']): void {
-    this.launcherService.launch(addressInfo)
+  get rendering(): StatusRendering {
+    return PrimaryRendering[this.status.primary]
+  }
+
+  openPopover(e: Event): void {
+    this.launchMenu.event = e
+    this.launchMenu.isOpen = true
   }
 
   presentModalConfig(): void {