Feature/homepage

frontend/projects/shared/styles/variables.scss

@@ -85,4 +85,11 @@
   --ion-color-step-850: #dbdbdb;
   --ion-color-step-900: #e7e7e7;
   --ion-color-step-950: #f3f3f3;
+
+  --alt-red: #FF4961;
+  --alt-orange: #F89248;
+  --alt-yellow: #E5D53E;
+  --alt-green: #3DCF6F;
+  --alt-blue: #00A8A8;
+  --alt-purple: #9747FF;
 }

frontend/projects/ui/src/app/app-routing.module.ts

@@ -16,7 +16,13 @@ const routes: Routes = [
       import('./pages/login/login.module').then(m => m.LoginPageModule),
   },
   {
-    path: 'embassy',
+    path: 'home',
+    canActivate: [AuthGuard],
+    loadChildren: () =>
+      import('./pages/home/home.module').then(m => m.HomePageModule),
+  },
+  {
+    path: 'settings',
     canActivate: [AuthGuard],
     canActivateChild: [AuthGuard],
     loadChildren: () =>

frontend/projects/ui/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core'
-import { merge, take } from 'rxjs'
+import { merge } from 'rxjs'
 import { AuthService } from './services/auth.service'
 import { SplitPaneTracker } from './services/split-pane.service'
 import { PatchDataService } from './services/patch-data.service'
@@ -28,9 +28,9 @@ export class AppComponent implements OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.serverNameService.name$
-      .pipe(take(1))
-      .subscribe(({ current }) => this.titleService.setTitle(current))
+    this.serverNameService.name$.subscribe(({ current }) =>
+      this.titleService.setTitle(current),
+    )
   }
 
   splitPaneVisible({ detail }: any) {

frontend/projects/ui/src/app/app/menu/menu.component.html

@@ -1,7 +1,6 @@
-<a class="logo ion-padding" routerLink="/services">
+<a class="logo ion-padding" routerLink="/home">
   <img alt="Start9" src="assets/img/logo.png" />
 </a>
-<div class="divider"></div>
 <ion-item-group class="menu">
   <ion-menu-toggle *ngFor="let page of pages" auto-hide="false">
     <ion-item
@@ -23,7 +22,7 @@
         {{ page.title }}
       </ion-label>
       <ion-icon
-        *ngIf="page.url === '/embassy' && (showEOSUpdate$ | async)"
+        *ngIf="page.url === '/settings' && (showEOSUpdate$ | async)"
         color="success"
         size="small"
         name="rocket-outline"

frontend/projects/ui/src/app/app/menu/menu.component.ts

@@ -23,25 +23,25 @@ export class MenuComponent {
       icon: 'grid-outline',
     },
     {
-      title: 'Embassy',
-      url: '/embassy',
-      icon: 'cube-outline',
+      title: 'Marketplace',
+      url: '/marketplace',
+      icon: 'storefront-outline',
     },
     {
       title: 'Updates',
       url: '/updates',
       icon: 'globe-outline',
     },
-    {
-      title: 'Marketplace',
-      url: '/marketplace',
-      icon: 'storefront-outline',
-    },
     {
       title: 'Notifications',
       url: '/notifications',
       icon: 'notifications-outline',
     },
+    {
+      title: 'System Settings',
+      url: '/settings',
+      icon: 'settings-outline',
+    },
   ]
 
   readonly notificationCount$ = this.patch.watch$(

frontend/projects/ui/src/app/app/preloader/preloader.component.ts

@@ -28,9 +28,9 @@ const ICONS = [
   'color-wand-outline',
   'construct-outline',
   'copy-outline',
-  'cube-outline',
   'desktop-outline',
   'download-outline',
+  'duplicate-outline',
   'earth-outline',
   'ellipsis-horizontal',
   'eye-off-outline',
@@ -46,7 +46,6 @@ const ICONS = [
   'information-circle-outline',
   'key-outline',
   'list-outline',
-  'lock-closed-outline',
   'log-out-outline',
   'logo-bitcoin',
   'mail-outline',
@@ -72,6 +71,7 @@ const ICONS = [
   'remove-outline',
   'rocket-outline',
   'save-outline',
+  'settings-outline',
   'shield-checkmark-outline',
   'stop-outline',
   'storefront-outline',

frontend/projects/ui/src/app/components/any-link/any-link.component.html

@@ -0,0 +1,17 @@
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
+
+<a
+  *ngIf="externalLink; else internal"
+  [href]="link"
+  target="_blank"
+  rel="noreferrer"
+>
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</a>
+<ng-template #internal>
+  <a [routerLink]="link">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </a>
+</ng-template>

frontend/projects/ui/src/app/components/any-link/any-link.component.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
+
+import { AnyLinkComponent } from './any-link.component'
+
+@NgModule({
+  declarations: [AnyLinkComponent],
+  imports: [CommonModule, RouterModule.forChild([])],
+  exports: [AnyLinkComponent],
+})
+export class AnyLinkModule {}

frontend/projects/ui/src/app/components/any-link/any-link.component.scss

@@ -0,0 +1,4 @@
+a {
+  text-decoration: none;
+  color: unset;
+}

frontend/projects/ui/src/app/components/any-link/any-link.component.ts

@@ -0,0 +1,26 @@
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  OnInit,
+} from '@angular/core'
+
+@Component({
+  selector: 'any-link',
+  templateUrl: './any-link.component.html',
+  styleUrls: ['./any-link.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AnyLinkComponent implements OnInit {
+  @Input() link!: string
+  externalLink: boolean = false
+
+  ngOnInit() {
+    try {
+      const _ = new URL(this.link)
+      this.externalLink = true
+    } catch {
+      this.externalLink = false
+    }
+  }
+}

frontend/projects/ui/src/app/components/widget-card/widget-card.component.html

@@ -0,0 +1,15 @@
+<ion-card>
+  <any-link link="{{ link }}">
+    <div class="p1">
+      <ion-card-header>
+        <ion-card-title>{{ title }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-icon name="{{ icon }}" style="color: {{ color }}"></ion-icon>
+      </ion-card-content>
+      <ion-footer>
+        {{ description }}
+      </ion-footer>
+    </div>
+  </any-link>
+</ion-card>

frontend/projects/ui/src/app/components/widget-card/widget-card.component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { WidgetCardComponent } from './widget-card.component'
+import { AnyLinkModule } from 'src/app/components/any-link/any-link.component.module'
+
+@NgModule({
+  declarations: [WidgetCardComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+    AnyLinkModule,
+  ],
+  exports: [WidgetCardComponent],
+})
+export class WidgetCardComponentModule {}

frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss

@@ -0,0 +1,50 @@
+ion-card {
+  background: rgba(70, 70, 70, 0.31);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 44px;
+  margin: auto;
+  max-width: 22rem;
+  text-align: center;
+  transition: all 350ms ease;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transition-property: transform;
+    transform: scale(1.05);
+    transition-delay: 40ms;
+  }
+
+  ion-card-title {
+    font-family: 'Open Sans';
+    padding: 0.6rem;
+    font-weight: 600;
+    font-size: 1.3rem;
+  }
+
+  ion-card-content {
+    min-height: 9rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    ion-icon {
+      font-size: 8rem;
+      --ionicon-stroke-width: 1rem;
+    }
+  }
+
+  ion-footer {
+    padding: 1rem;
+    font-family: 'Open Sans';
+    font-size: 1.2rem;
+  }
+
+  .footer-md::before {
+    background-image: none;
+  }
+}
+
+.p1 {
+  padding: 1.2rem;
+}

frontend/projects/ui/src/app/components/widget-card/widget-card.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'widget-card',
+  templateUrl: './widget-card.component.html',
+  styleUrls: ['./widget-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WidgetCardComponent {
+  @Input() title: string = ''
+  @Input() icon: string = ''
+  @Input() color: string = ''
+  @Input() description: string = ''
+  @Input() link: string = ''
+
+  constructor() {}
+}

frontend/projects/ui/src/app/components/widget-list/widget-list.component.html

@@ -0,0 +1,17 @@
+<ion-grid>
+  <ion-row class="ion-justify-content-center ion-align-items-center">
+    <ion-col
+      *ngFor="let card of cards"
+      size="auto"
+      class="ion-align-self-center"
+    >
+      <widget-card
+        title="{{ card.title }}"
+        icon="{{ card.icon }}"
+        color="{{ card.color }}"
+        description="{{ card.description }}"
+        link="{{ card.link }}"
+      ></widget-card>
+    </ion-col>
+  </ion-row>
+</ion-grid>

frontend/projects/ui/src/app/components/widget-list/widget-list.component.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { WidgetListComponent } from './widget-list.component'
+import { AnyLinkModule } from 'src/app/components/any-link/any-link.component.module'
+import { WidgetCardComponentModule } from '../widget-card/widget-card.component.module'
+
+@NgModule({
+  declarations: [WidgetListComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+    AnyLinkModule,
+    WidgetCardComponentModule,
+  ],
+  exports: [WidgetListComponent],
+})
+export class WidgetListComponentModule {}

frontend/projects/ui/src/app/components/widget-list/widget-list.component.scss

@@ -0,0 +1,7 @@
+ion-row {
+  grid-row-gap: 1rem;
+}
+
+ion-col {
+  padding: 0 0.5rem 0.5rem 1rem;
+}