From f7b079b1b4c2267bcdb9791fd313327095873b29 Mon Sep 17 00:00:00 2001
From: Matt Hill <MattDHill@users.noreply.github.com>
Date: Mon, 14 Aug 2023 07:39:07 -0600
Subject: [PATCH] start menu lol (#2389)

* start menu lol

* add icons, abstract header menu

* chore: few tweaks

---------

Co-authored-by: waterplea <alexander@inkin.ru>
---
 frontend/projects/shared/styles/taiga.scss    |  3 +-
 .../components/card/card.component.html       |  2 +-
 .../components/card/card.component.scss       |  2 +-
 .../portal/components/card/card.component.ts  | 16 ++++--
 .../header-menu/header-menu.component.html    | 56 +++++++++++++++++++
 .../header-menu/header-menu.component.scss    | 17 ++++++
 .../header-menu/header-menu.component.ts      | 22 ++++++++
 .../components/header/header.component.html   |  1 +
 .../components/header/header.component.scss   |  3 +-
 .../components/header/header.component.ts     | 17 +++++-
 .../navigation/navigation.component.html      |  2 +-
 .../navigation/navigation.component.scss      |  6 +-
 .../navigation/navigation.component.ts        |  4 +-
 .../app/apps/portal/pipes/to-desktop-item.ts  |  2 -
 .../ui/pages/system/proxies/proxies.page.html |  2 +-
 15 files changed, 136 insertions(+), 19 deletions(-)
 create mode 100644 frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.html
 create mode 100644 frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.scss
 create mode 100644 frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts

diff --git a/frontend/projects/shared/styles/taiga.scss b/frontend/projects/shared/styles/taiga.scss
index 3cafeedfd..ed482baf7 100644
--- a/frontend/projects/shared/styles/taiga.scss
+++ b/frontend/projects/shared/styles/taiga.scss
@@ -80,7 +80,8 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
     &::before {
       background: var(--tui-clear);
       box-shadow: 1rem 0 var(--tui-clear), -1rem 0 var(--tui-clear);
-      padding-top: 0.375rem;
+      padding-top: 0.375rem !important;
+      padding-bottom: 0 !important;
     }
 
     &::after {
diff --git a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.html b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.html
index 899d83144..db497170b 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.html
@@ -2,7 +2,7 @@
   <img alt="" class="icon" [src]="icon" />
   <label ticker class="title">{{ title }}</label>
 </span>
-<span class="side">
+<span *ngIf="isService" class="side">
   <tui-hosted-dropdown
     #dropdown
     [content]="content"
diff --git a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss
index 95d16a0fb..0af6ca6c3 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss
@@ -6,7 +6,7 @@
   overflow: hidden;
   box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
   // TODO: Theme
-  background: rgb(111 109 109 / 90%);
+  background: rgb(111 109 109);
 }
 
 .link {
diff --git a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts
index 6cf02c8a7..5547d314b 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts
@@ -38,18 +38,22 @@ import { toRouterLink } from '../../utils/to-router-link'
 export class CardComponent {
   private readonly navigation = inject(NavigationService)
 
-  @Input()
-  id = ''
+  @Input({ required: true })
+  id!: string
 
-  @Input()
-  icon = ''
+  @Input({ required: true })
+  icon!: string
 
-  @Input()
-  title = ''
+  @Input({ required: true })
+  title!: string
 
   @Input()
   actions: Record<string, readonly Action[]> = {}
 
+  get isService(): boolean {
+    return !this.id.includes('/')
+  }
+
   @HostListener('click')
   onClick() {
     const { id, icon, title } = this
diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.html b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.html
new file mode 100644
index 000000000..4690eb04f
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.html
@@ -0,0 +1,56 @@
+<tui-hosted-dropdown
+  [content]="content"
+  [tuiDropdownMaxHeight]="9999"
+  (click.stop.prevent)="(0)"
+  (pointerdown.stop)="(0)"
+>
+  <button tuiIconButton appearance="">
+    <img style="max-width: 62%" src="assets/img/icon.png" alt="StartOS" />
+  </button>
+  <ng-template #content>
+    <tui-data-list>
+      <h3 class="title">StartOS</h3>
+      <button tuiOption class="item" (click)="({})">
+        <tui-svg src="tuiIconInfo"></tui-svg>
+        About this server
+      </button>
+      <tui-opt-group>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconBookOpen"></tui-svg>
+          User Manual
+          <tui-svg class="external" src="tuiIconArrowUpRight"></tui-svg>
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconHeadphones"></tui-svg>
+          Contact Support
+          <tui-svg class="external" src="tuiIconArrowUpRight"></tui-svg>
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconDollarSign"></tui-svg>
+          Donate to Start9
+          <tui-svg class="external" src="tuiIconArrowUpRight"></tui-svg>
+        </button>
+      </tui-opt-group>
+      <tui-opt-group>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconTool"></tui-svg>
+          System Rebuild
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconRefreshCw"></tui-svg>
+          Restart
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconPower"></tui-svg>
+          Shutdown
+        </button>
+      </tui-opt-group>
+      <tui-opt-group>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconLogOut"></tui-svg>
+          Logout
+        </button>
+      </tui-opt-group>
+    </tui-data-list>
+  </ng-template>
+</tui-hosted-dropdown>
diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.scss b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.scss
new file mode 100644
index 000000000..37973ef33
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.scss
@@ -0,0 +1,17 @@
+.item {
+  justify-content: flex-start;
+  gap: 0.75rem;
+}
+
+.title {
+  margin: 0;
+  padding: 0 0.5rem 0.25rem;
+  white-space: nowrap;
+  font: var(--tui-font-text-l);
+  font-weight: bold;
+}
+
+.external {
+  margin-left: auto;
+  padding-left: 0.5rem;
+}
diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts
new file mode 100644
index 000000000..84daae18c
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import {
+  TuiButtonModule,
+  TuiDataListModule,
+  TuiHostedDropdownModule,
+  TuiSvgModule,
+} from '@taiga-ui/core'
+
+@Component({
+  selector: 'header-menu',
+  templateUrl: 'header-menu.component.html',
+  styleUrls: ['header-menu.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    TuiHostedDropdownModule,
+    TuiDataListModule,
+    TuiSvgModule,
+    TuiButtonModule,
+  ],
+})
+export class HeaderMenuComponent {}
diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.html b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.html
index 54abed9a7..f6f904187 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.html
@@ -8,4 +8,5 @@
       Notifications
     </button>
   </tui-badged-content>
+  <header-menu></header-menu>
 </div>
diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss
index e07f51a9c..71d68d68f 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss
@@ -5,9 +5,10 @@
   padding: 0 1rem 0 2rem;
   font-size: 1.5rem;
   // TODO: Theme
-  background: rgb(51 51 51 / 74%);
+  background: rgb(51 51 51 / 84%);
 }
 
 .toolbar {
+  display: flex;
   margin-left: auto;
 }
diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts
index 8e84d8f47..c8005f68d 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts
@@ -1,6 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { TuiBadgedContentModule } from '@taiga-ui/kit'
-import { TuiButtonModule } from '@taiga-ui/core'
+import {
+  TuiButtonModule,
+  TuiDataListModule,
+  TuiHostedDropdownModule,
+  TuiSvgModule,
+} from '@taiga-ui/core'
+import { HeaderMenuComponent } from './header-menu/header-menu.component'
 
 @Component({
   selector: 'header[appHeader]',
@@ -8,6 +14,13 @@ import { TuiButtonModule } from '@taiga-ui/core'
   styleUrls: ['header.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiBadgedContentModule, TuiButtonModule],
+  imports: [
+    TuiBadgedContentModule,
+    TuiButtonModule,
+    TuiHostedDropdownModule,
+    TuiDataListModule,
+    TuiSvgModule,
+    HeaderMenuComponent,
+  ],
 })
 export class HeaderComponent {}
diff --git a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html
index 0fcd71661..d57dc2cfe 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html
@@ -4,7 +4,7 @@
   routerLinkActive="tab_active"
   [routerLinkActiveOptions]="{ exact: true }"
 >
-  <img class="icon" src="assets/img/icon_transparent.png" alt="Home" />
+  <tui-svg src="tuiIconHomeLarge" class="home"></tui-svg>
 </a>
 <a
   *ngFor="let tab of tabs$ | async"
diff --git a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss
index ebdb09244..1879322e3 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss
@@ -2,7 +2,7 @@
   height: 3rem;
   display: flex;
   // TODO: Theme
-  background: rgb(97 95 95 / 75%);
+  background: rgb(97 95 95 / 84%);
 }
 
 .tab {
@@ -29,3 +29,7 @@
   top: 0;
   right: 0;
 }
+
+.home {
+  color: var(--tui-base-08);
+}
diff --git a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts
index 7c9655020..b847381f4 100644
--- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule, Location } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { TuiButtonModule } from '@taiga-ui/core'
+import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core'
 import { NavigationItem, NavigationService } from './navigation.service'
 
 @Component({
@@ -10,7 +10,7 @@ import { NavigationItem, NavigationService } from './navigation.service'
   styleUrls: ['navigation.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, RouterModule, TuiButtonModule],
+  imports: [CommonModule, RouterModule, TuiButtonModule, TuiSvgModule],
 })
 export class NavigationComponent {
   private readonly location = inject(Location)
diff --git a/frontend/projects/ui/src/app/apps/portal/pipes/to-desktop-item.ts b/frontend/projects/ui/src/app/apps/portal/pipes/to-desktop-item.ts
index 1769165c1..4e623a181 100644
--- a/frontend/projects/ui/src/app/apps/portal/pipes/to-desktop-item.ts
+++ b/frontend/projects/ui/src/app/apps/portal/pipes/to-desktop-item.ts
@@ -9,8 +9,6 @@ import { toRouterLink } from '../utils/to-router-link'
   standalone: true,
 })
 export class ToDesktopItemPipe implements PipeTransform {
-  private readonly system = SYSTEM_UTILITIES
-
   transform(
     packages: Record<string, PackageDataEntry>,
     id: string,
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html
index 133765a87..b358ad465 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html
@@ -105,7 +105,7 @@
                 [icon]="icon"
               ></button>
               <ng-template #icon>
-                <tui-svg src="tuiIconMoreHorizontal" class="icon"></tui-svg>
+                <tui-svg src="tuiIconMoreHorizontal"></tui-svg>
               </ng-template>
             </tui-hosted-dropdown>
             <ng-template #dropdown let-close="close">