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

@@ -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 {

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"

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 {

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()
+  @Input({ required: true })
-  id = ''
+  id!: string
 
-  @Input()
+  @Input({ required: true })
-  icon = ''
+  icon!: string
 
-  @Input()
+  @Input({ required: true })
-  title = ''
+  title!: string
 
   @Input()
   actions: Record<string, readonly Action[]> = {}
 
+  get isService(): boolean {
+    return !this.id.includes('/')
+  }
+
   @HostListener('click')
   onClick() {
     const { id, icon, title } = this

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>

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;
+}

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 {}

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>

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;
 }

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 {}

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"

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);
+}

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)

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,

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">