start adding welcome OS screen

ui/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ConfigService } from './services/config.service'
 import { QRCodeModule } from 'angularx-qrcode'
 import { APP_CONFIG_COMPONENT_MAPPING } from './modals/app-config-injectable/modal-injectable-token'
 import { appConfigComponents } from './modals/app-config-injectable/modal-injectable-value';
+import { OSWelcomePageModule } from './modals/os-welcome/os-welcome.module'
 
 @NgModule({
   declarations: [AppComponent],
@@ -26,6 +27,7 @@ import { appConfigComponents } from './modals/app-config-injectable/modal-inject
     AppRoutingModule,
     IonicStorageModule.forRoot(),
     QRCodeModule,
+    OSWelcomePageModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

ui/src/app/modals/os-welcome/os-welcome.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { OSWelcomePage } from './os-welcome.page'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharingModule,
+  ],
+  declarations: [OSWelcomePage],
+})
+export class OSWelcomePageModule { }

ui/src/app/modals/os-welcome/os-welcome.page.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title style="font-size: 16px;">Welcome to {{ version }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  Here is some cool shit.
+</ion-content>

ui/src/app/modals/os-welcome/os-welcome.page.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+
+@Component({
+  selector: 'os-welcome',
+  templateUrl: './os-welcome.page.html',
+  styleUrls: ['./os-welcome.page.scss'],
+})
+export class OSWelcomePage {
+  @Input() version: string
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+  ) { }
+
+  dismiss () {
+    this.modalCtrl.dismiss()
+  }
+}

ui/src/app/models/server-model.ts

@@ -105,6 +105,7 @@ export class ServerModel {
       wifi: { ssids: [], current: undefined },
       ssh: [],
       notifications: [],
+      welcomeSeen: true,
     })
   }
 }
@@ -122,6 +123,7 @@ export interface S9Server {
   wifi: { ssids: string[], current: string }
   ssh: SSHFingerprint[]
   notifications: S9Notification[]
+  welcomeSeen: boolean
 }
 
 export interface S9Notification {

ui/src/app/services/sync.notifier.ts

@@ -1,18 +1,27 @@
 import { Injectable } from '@angular/core'
-import { ToastController, NavController } from '@ionic/angular'
+import { ConfigService } from 'src/app/services/config.service'
+import { ToastController, NavController, ModalController } from '@ionic/angular'
 import { ServerModel, S9Server } from '../models/server-model'
+import { OSWelcomePage } from '../modals/os-welcome/os-welcome.page'
 
 @Injectable({
   providedIn: 'root',
 })
 export class SyncNotifier {
   constructor (
+    private readonly config: ConfigService,
     private readonly toastCtrl: ToastController,
+    private readonly modalCtrl: ModalController,
     private readonly navCtrl: NavController,
     private readonly serverModel: ServerModel,
   ) { }
 
-  async handleNotifications (server: Readonly<S9Server>): Promise<void> {
+  async handleSpecial (server: Readonly<S9Server>): Promise<void> {
+    this.handleNotifications(server)
+    this.handleOSWelcome(server)
+  }
+
+  private async handleNotifications (server: Readonly<S9Server>) {
     const count = server.notifications.length
 
     if (!count) { return }
@@ -47,4 +56,19 @@ export class SyncNotifier {
     await toast.present()
     this.serverModel.update(updates)
   }
+
+  private async handleOSWelcome(server: Readonly<S9Server>) {
+    if (server.welcomeSeen || server.versionInstalled !== this.config.version) return
+
+    const modal = await this.modalCtrl.create({
+      backdropDismiss: false,
+      component: OSWelcomePage,
+      presentingElement: await this.modalCtrl.getTop(),
+      componentProps: {
+        version: server.versionInstalled
+      },
+    })
+
+    await modal.present()
+  }
 }

ui/src/app/services/sync.service.ts

@@ -35,7 +35,7 @@ export class SyncDaemon {
   stop () { this.$sync$.next(false) }
   sync (): Observable<void> {
     return from(this.getServerAndApps()).pipe(
-      concatMap(() => this.syncNotifier.handleNotifications(this.serverModel.peek())),
+      concatMap(() => this.syncNotifier.handleSpecial(this.serverModel.peek())),
       tap(() => this.$synced$.next()),
       catchError(e => of(console.error(`Exception in sync service`, e))),
     )