feat: implement mobile header (#2559)

* feat: implement mobile header

* chore: remove remaining ties to old ui project

* chore: remove ionic from login page

* chore: address comments

web/projects/marketplace/package.json

@@ -4,7 +4,6 @@
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",
-    "@ionic/angular": ">=6.0.0",
     "@start9labs/shared": ">=0.3.2",
     "@taiga-ui/cdk": ">=3.0.0",
     "@tinkoff/ng-dompurify": ">=4.0.0",

web/projects/marketplace/src/components/store-icon/store-icon.component.html

@@ -1,10 +0,0 @@
-<img
-  *ngIf="icon; else noIcon"
-  class="rounded-full"
-  [style.max-width]="size || '100%'"
-  [src]="icon"
-  alt="Service Icon"
-/>
-<ng-template #noIcon>
-  <ion-icon name="storefront-outline" [style.font-size]="size"></ion-icon>
-</ng-template>

web/projects/marketplace/src/components/store-icon/store-icon.component.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
+import { TuiIconModule } from '@taiga-ui/experimental'
 import { StoreIconComponent } from './store-icon.component'
 
 @NgModule({
   declarations: [StoreIconComponent],
-  imports: [CommonModule, IonicModule],
+  imports: [CommonModule, TuiIconModule],
   exports: [StoreIconComponent],
 })
 export class StoreIconComponentModule {}

web/projects/marketplace/src/components/store-icon/store-icon.component.ts

@@ -3,8 +3,18 @@ import { MarketplaceConfig, sameUrl } from '@start9labs/shared'
 
 @Component({
   selector: 'store-icon',
-  templateUrl: './store-icon.component.html',
-  styleUrls: ['./store-icon.component.scss'],
+  template: `
+    <img
+      *ngIf="icon; else noIcon"
+      [style.border-radius.%]="100"
+      [style.max-width]="size || '100%'"
+      [src]="icon"
+      alt="Service Icon"
+    />
+    <ng-template #noIcon>
+      <tui-icon icon="tuiIconShoppingCart" [style.font-size]="size" />
+    </ng-template>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StoreIconComponent {

web/projects/marketplace/src/pages/list/categories/categories.module.ts

@@ -1,11 +1,10 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
-import { IonicModule } from '@ionic/angular'
 
 import { CategoriesComponent } from './categories.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule],
+  imports: [CommonModule],
   declarations: [CategoriesComponent],
   exports: [CategoriesComponent],
 })

web/projects/marketplace/src/pages/list/skeleton/skeleton.component.html

@@ -1,69 +0,0 @@
-<div class="">
-  <ion-button *ngFor="let cat of ['', '', '', '', '', '', '']" fill="clear">
-    <ion-skeleton-text
-      animated
-      style="width: 80px; border-radius: 0"
-    ></ion-skeleton-text>
-  </ion-button>
-</div>
-<div class="hidden sm:flex flex-col mx-6 pb-3 items-center">
-  <div class="pb-3">
-    <ion-skeleton-text style="border-radius: 100%" animated></ion-skeleton-text>
-  </div>
-
-  <ng-content select="[slot=desktop]"></ng-content>
-</div>
-<ion-row>
-  <ion-col
-    *ngFor="let cat of ['', '', '', '', '', '', '']"
-    fill="clear"
-    responsiveCol
-    sizeXs="12"
-    sizeSm="12"
-    sizeMd="3"
-  >
-    <ion-item>
-      <ion-thumbnail slot="start">
-        <ion-skeleton-text
-          style="border-radius: 100%"
-          animated
-        ></ion-skeleton-text>
-      </ion-thumbnail>
-      <ion-label>
-        <ion-skeleton-text
-          animated
-          style="width: 150px; height: 18px; margin-bottom: 8px"
-        ></ion-skeleton-text>
-      </ion-label>
-    </ion-item>
-  </ion-col>
-</ion-row>
-
-<ion-grid class="p-20">
-  <ion-row>
-    <ion-col
-      *ngFor="let pkg of ['', '', '', '']"
-      responsiveCol
-      sizeXs="12"
-      sizeSm="12"
-      sizeMd="3"
-    >
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text
-            style="border-radius: 100%"
-            animated
-          ></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <ion-skeleton-text
-            animated
-            style="width: 150px; height: 18px; margin-bottom: 8px"
-          ></ion-skeleton-text>
-          <ion-skeleton-text animated style="width: 400px"></ion-skeleton-text>
-          <ion-skeleton-text animated style="width: 100px"></ion-skeleton-text>
-        </ion-label>
-      </ion-item>
-    </ion-col>
-  </ion-row>
-</ion-grid>

web/projects/marketplace/src/pages/list/skeleton/skeleton.component.ts

@@ -1,8 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-
-@Component({
-  selector: 'marketplace-skeleton',
-  templateUrl: 'skeleton.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SkeletonComponent {}

web/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { IonicModule } from '@ionic/angular'
-import { ResponsiveColDirective } from '@start9labs/shared'
-
-import { SkeletonComponent } from './skeleton.component'
-
-@NgModule({
-  imports: [CommonModule, IonicModule, ResponsiveColDirective],
-  declarations: [SkeletonComponent],
-  exports: [SkeletonComponent],
-})
-export class SkeletonModule {}

web/projects/marketplace/src/pages/release-notes/release-notes.component.html

@@ -10,7 +10,7 @@
       >
         <span class="small-caps">Latest Release</span>
         &nbsp;-&nbsp;
-        <span class="text-sm">{{ published | date : 'medium' }}</span>
+        <span class="text-sm">{{ published | date: 'medium' }}</span>
       </p>
     </div>
     <div class="flex flex-wrap justify-between gap-6">
@@ -41,7 +41,7 @@
     <tui-accordion
       class="max-w-lg"
       [closeOthers]="false"
-      *ngFor="let note of notes | keyvalue : asIsOrder"
+      *ngFor="let note of notes | keyvalue: asIsOrder"
     >
       <tui-accordion-item class="my-1">
         {{ note.key | displayEmver }}
@@ -53,6 +53,6 @@
   </ng-container>
 
   <ng-template #loading>
-    <text-spinner text="Loading Release Notes"></text-spinner>
+    <tui-loader textContent="Loading Release Notes" />
   </ng-template>
 </ng-template>

web/projects/marketplace/src/pages/release-notes/release-notes.module.ts

@@ -1,26 +1,25 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
 import {
   EmverPipesModule,
   MarkdownPipeModule,
   SafeLinksDirective,
-  TextSpinnerComponentModule,
-} from "@start9labs/shared";
-import { NgDompurifyModule } from "@tinkoff/ng-dompurify";
-import { ReleaseNotesComponent } from "./release-notes.component";
-import { TuiButtonModule } from "@taiga-ui/core";
-import { TuiAccordionModule } from "@taiga-ui/kit";
+} from '@start9labs/shared'
+import { TuiAccordionModule } from '@taiga-ui/kit'
+import { TuiButtonModule, TuiLoaderModule } from '@taiga-ui/core'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { ReleaseNotesComponent } from './release-notes.component'
 
 @NgModule({
   imports: [
     CommonModule,
-    TextSpinnerComponentModule,
     EmverPipesModule,
     MarkdownPipeModule,
     NgDompurifyModule,
     SafeLinksDirective,
     TuiButtonModule,
     TuiAccordionModule,
+    TuiLoaderModule,
   ],
   declarations: [ReleaseNotesComponent],
   exports: [ReleaseNotesComponent],

web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts

@@ -2,9 +2,10 @@ import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
+  inject,
   Input,
 } from '@angular/core'
+import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
 import {
   TuiButtonModule,
   TuiDialogContext,
@@ -13,7 +14,6 @@ import {
 import { TuiCarouselModule } from '@taiga-ui/kit'
 import { MarketplacePkg } from '../../../types'
 import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
-import { isPlatform } from '@ionic/angular'
 
 @Component({
   selector: 'marketplace-package-screenshots',
@@ -77,15 +77,14 @@ import { isPlatform } from '@ionic/angular'
   imports: [CommonModule, TuiCarouselModule, TuiButtonModule],
 })
 export class MarketplacePackageScreenshotComponent {
+  private readonly dialogs = inject(TuiDialogService)
+
   @Input({ required: true })
   pkg!: MarketplacePkg
 
-  constructor(
-    @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
-  ) {}
   index = 0
 
-  isMobile = isPlatform(window, 'ios') || isPlatform(window, 'android')
+  isMobile = inject(TUI_IS_MOBILE)
 
   presentModalImg(content: PolymorpheusContent<TuiDialogContext>) {
     this.dialogs