revert app show to use header and fix back button (#1984)

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

@@ -8,6 +8,7 @@ import { StatusComponentModule } from 'src/app/components/status/status.componen
 import { AppConfigPageModule } from 'src/app/modals/app-config/app-config.module'
 import { LaunchablePipeModule } from 'src/app/pipes/launchable/launchable.module'
 import { UiPipeModule } from 'src/app/pipes/ui/ui.module'
+import { AppShowHeaderComponent } from './components/app-show-header/app-show-header.component'
 import { AppShowProgressComponent } from './components/app-show-progress/app-show-progress.component'
 import { AppShowStatusComponent } from './components/app-show-status/app-show-status.component'
 import { AppShowDependenciesComponent } from './components/app-show-dependencies/app-show-dependencies.component'
@@ -37,6 +38,7 @@ const routes: Routes = [
     ToButtonsPipe,
     ToDependenciesPipe,
     ToStatusPipe,
+    AppShowHeaderComponent,
     AppShowProgressComponent,
     AppShowStatusComponent,
     AppShowDependenciesComponent,

frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html

@@ -1,20 +1,9 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="services"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Service Details</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <ng-container *ngIf="pkg$ | async as pkg">
-    <div class="ion-text-center ion-padding-top">
-      <img [src]="pkg['static-files'].icon" alt="" style="width: 84px" />
-      <h1>{{ pkg.manifest.title }}</h1>
-      <h4>{{ pkg.manifest.version | displayEmver }}</h4>
-    </div>
+<ng-container *ngIf="pkg$ | async as pkg">
+  <!-- header -->
+  <app-show-header [pkg]="pkg"></app-show-header>
 
+  <!-- content -->
+  <ion-content class="ion-padding">
     <!-- ** installing, updating, restoring ** -->
     <ng-container *ngIf="showProgress(pkg); else installed">
       <app-show-progress
@@ -86,5 +75,5 @@
         </ion-grid>
       </ng-template>
     </ng-template>
-  </ng-container>
-</ion-content>
+  </ion-content>
+</ng-container>

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

@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="services"></ion-back-button>
+    </ion-buttons>
+    <ion-item lines="none" color="light">
+      <ion-thumbnail slot="start">
+        <img [src]="pkg['static-files'].icon" alt="" />
+      </ion-thumbnail>
+      <ion-label>
+        <h1
+          class="montserrat"
+          [class.less-large]="pkg.manifest.title.length > 20"
+        >
+          {{ pkg.manifest.title }}
+        </h1>
+        <h2>{{ pkg.manifest.version | displayEmver }}</h2>
+      </ion-label>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.scss

@@ -0,0 +1,3 @@
+.less-large {
+  font-size: 18px !important;
+}

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+
+@Component({
+  selector: 'app-show-header',
+  templateUrl: './app-show-header.component.html',
+  styleUrls: ['./app-show-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppShowHeaderComponent {
+  @Input()
+  pkg!: PackageDataEntry
+}

frontend/projects/ui/src/styles.scss

@@ -157,8 +157,17 @@ img {
 
 ion-back-button {
   margin-left: 16px;
+  height: 36px;
+  width: 36px;
+  --min-height: 0;
+  --min-width: 0;
+  min-width: 0;
+  --icon-font-size: 36px;
   &::part(native) {
-    border: 1px solid white;
+    border: 1px solid gray;
+  }
+  &::part(icon) {
+    min-width: 20px;
   }
 }