Refactor AppListPage

ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.html

@@ -6,5 +6,5 @@
   color="warning"
 ></ion-icon>
 <ng-template #bulb>
-  <div class="bulb" [style.background-color]="getColor(pkg)"></div>
+  <div class="bulb" [style.background-color]="color"></div>
 </ng-template>

ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts

@@ -14,9 +14,9 @@ export class AppListIconComponent {
   @Input()
   connectionFailure = false;
 
-  getColor(pkg: PkgInfo): string {
+  get color(): string {
     return this.connectionFailure
       ? "var(--ion-color-dark)"
-      : "var(--ion-color-" + pkg.primaryRendering.color + ")";
+      : "var(--ion-color-" + this.pkg.primaryRendering.color + ")";
   }
 }

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

@@ -1,8 +1,4 @@
-<ion-item
-  button
-  detail="false"
-  [routerLink]="['/services', pkg.entry.manifest.id]"
->
+<ion-item button detail="false" [routerLink]="['/services', manifest.id]">
   <app-list-icon
     slot="start"
     [pkg]="pkg"
@@ -12,8 +8,8 @@
     <img alt="" [src]="pkg.entry['static-files'].icon" />
   </ion-thumbnail>
   <ion-label>
-    <h2>{{ pkg.entry.manifest.title }}</h2>
-    <p>{{ pkg.entry.manifest.version | displayEmver }}</p>
+    <h2>{{ manifest.title }}</h2>
+    <p>{{ manifest.version | displayEmver }}</p>
     <status
       [disconnected]="connectionFailure"
       [rendering]="pkg.primaryRendering"
@@ -23,19 +19,12 @@
     ></status>
   </ion-label>
   <ion-button
-    *ngIf="pkg.entry.manifest.interfaces | hasUi"
+    *ngIf="manifest.interfaces | hasUi"
     slot="end"
     fill="clear"
     color="primary"
     (click)="launchUi(pkg.entry)"
-    [disabled]="
-      !(
-        pkg.entry.state
-        | isLaunchable
-          : pkg.entry.installed?.status.main.status
-          : pkg.entry.manifest.interfaces
-      )
-    "
+    [disabled]="!(pkg.entry.state | isLaunchable: status:manifest.interfaces)"
   >
     <ion-icon slot="icon-only" name="open-outline"></ion-icon>
   </ion-button>

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

@@ -5,7 +5,10 @@ import {
   Inject,
   Input,
 } from "@angular/core";
-import { PackageDataEntry } from "src/app/services/patch-db/data-model";
+import {
+  PackageMainStatus,
+  PackageDataEntry, Manifest,
+} from "src/app/services/patch-db/data-model";
 import { ConfigService } from "src/app/services/config.service";
 import { PkgInfo } from "src/app/util/get-package-info";
 
@@ -26,10 +29,12 @@ export class AppListPkgComponent {
     private readonly config: ConfigService
   ) {}
 
-  getColor(pkg: PkgInfo): string {
-    return this.connectionFailure
-      ? "var(--ion-color-dark)"
-      : "var(--ion-color-" + pkg.primaryRendering.color + ")";
+  get status(): PackageMainStatus {
+    return this.pkg.entry.installed?.status.main.status;
+  }
+
+  get manifest(): Manifest {
+    return this.pkg.entry.manifest;
   }
 
   launchUi(pkg: PackageDataEntry): void {

ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+.item {
+  --background: var(--ion-color-medium-shade);
+}

ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.ts

@@ -16,6 +16,7 @@ import {
 @Component({
   selector: "app-list-reorder",
   templateUrl: "app-list-reorder.component.html",
+  styleUrls: ["app-list-reorder.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListReorderComponent {

ui/src/app/pages/apps-routes/app-list/app-list.page.scss

@@ -1,7 +1,3 @@
 ion-item-divider {
   margin-bottom: 16px;
 }
-
-.item {
-  --background: var(--ion-color-medium-shade);
-}