rename frontend to web and update contributing guide (#2509)

* rename frontend to web and update contributing guide

* rename this time

* fix build

* restructure rust code

* update documentation

* update descriptions

* Update CONTRIBUTING.md

Co-authored-by: J H <2364004+Blu-J@users.noreply.github.com>

---------

Co-authored-by: Aiden McClelland <me@drbonez.dev>
Co-authored-by: Aiden McClelland <3732071+dr-bonez@users.noreply.github.com>
Co-authored-by: J H <2364004+Blu-J@users.noreply.github.com>

web/projects/ui/src/app/pages/updates/updates.page.html

@@ -0,0 +1,122 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Updates</ion-title>
+    <ion-buttons slot="end">
+      <badge-menu-button></badge-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="with-widgets">
+  <ion-item-group *ngIf="data$ | async as data">
+    <div *ngFor="let host of data.hosts">
+      <ion-item-divider class="inline">
+        <store-icon [url]="host.url" size="26px"></store-icon>
+        &nbsp;
+        <span style="padding-left: 8px; letter-spacing: 0.7px; font-size: 20px">
+          {{ host.name }}
+        </span>
+      </ion-item-divider>
+
+      <ion-item *ngIf="data.errors.includes(host.url)">
+        <ion-text color="danger">Request Failed</ion-text>
+      </ion-item>
+
+      <ng-container
+        *ngIf="data.marketplace[host.url]?.packages as packages else loading"
+      >
+        <ng-container
+          *ngIf="packages | filterUpdates : data.localPkgs as updates"
+        >
+          <ion-accordion-group multiple="true" class="ion-padding-start">
+            <div *ngFor="let pkg of updates" class="item-container">
+              <ion-accordion *ngIf="data.localPkgs[pkg.manifest.id] as local">
+                <ion-item lines="none" slot="header">
+                  <ion-avatar slot="start" style="width: 50px; height: 50px">
+                    <img [src]="pkg | mimeType | trustUrl" />
+                  </ion-avatar>
+                  <ion-label>
+                    <h1 style="line-height: 1.3">{{ pkg.manifest.title }}</h1>
+                    <h2 class="inline">
+                      <span>
+                        {{ local.installed?.manifest?.version || '' |
+                        displayEmver }}
+                      </span>
+                      &nbsp;
+                      <ion-icon name="arrow-forward"></ion-icon>
+                      &nbsp;
+                      <ion-text color="success">
+                        {{ pkg.manifest.version | displayEmver }}
+                      </ion-text>
+                    </h2>
+                    <p
+                      *ngIf="marketplaceService.updateErrors[pkg.manifest.id] as error"
+                    >
+                      <ion-text color="danger">{{ error }}</ion-text>
+                    </p>
+                  </ion-label>
+                  <div slot="end" style="margin-left: 4px">
+                    <round-progress
+                      *ngIf="local.state === 'updating' else notUpdating"
+                      [current]="local['install-progress'] | installProgress"
+                      [max]="100"
+                      [radius]="13"
+                      [stroke]="3"
+                      [rounded]="true"
+                      color="var(--ion-color-primary)"
+                    ></round-progress>
+                    <ng-template #notUpdating>
+                      <ion-spinner
+                        *ngIf="marketplaceService.updateQueue[pkg.manifest.id] else updateBtn"
+                        color="dark"
+                      ></ion-spinner>
+                      <ng-template #updateBtn>
+                        <ion-button
+                          (click)="tryUpdate(pkg.manifest, host.url, local, $event)"
+                          [color]="marketplaceService.updateErrors[pkg.manifest.id] ? 'danger' : 'tertiary'"
+                          strong
+                        >
+                          {{ marketplaceService.updateErrors[pkg.manifest.id] ?
+                          'Retry' : 'Update' }}
+                        </ion-button>
+                      </ng-template>
+                    </ng-template>
+                  </div>
+                </ion-item>
+                <div class="ion-padding" slot="content">
+                  <div class="notes">
+                    <h5>What's new</h5>
+                    <p
+                      [innerHTML]="pkg.manifest['release-notes'] | markdown"
+                    ></p>
+                  </div>
+                  <ion-button
+                    fill="clear"
+                    strong
+                    (click)="viewInMarketplace($event, host.url, pkg.manifest.id)"
+                  >
+                    View listing
+                    <ion-icon slot="end" name="open-outline"></ion-icon>
+                  </ion-button>
+                </div>
+              </ion-accordion>
+            </div>
+          </ion-accordion-group>
+          <ion-item
+            *ngIf="!updates.length"
+            class="ion-text-center ion-padding"
+            lines="none"
+          >
+            <ion-label>All services are up to date!</ion-label>
+          </ion-item>
+        </ng-container>
+      </ng-container>
+
+      <ng-template #loading>
+        <div class="ion-padding">
+          <skeleton-list [showAvatar]="true" [rows]="2"></skeleton-list>
+        </div>
+      </ng-template>
+    </div>
+  </ion-item-group>
+</ion-content>