Update/marketplace (#2575)

* make category link generic * fix ai category display and svg icons * fix markdown display and ansi module; cleanup * convert tailwindcss to scss in marketplace menu component * convert tailwindcss to scss in marketplace categories component * convert tailwindcss to scss in marketplace item component * update launch icon to taiga icon * convert tailwindcss to scss in marketplace search component + cleanup * convert tailwindcss to scss in marketplace release notes component + cleanup * convert tailwindcss to scss in marketplace about component + cleanup * convert tailwindcss to scss in marketplace additional component * convert tailwindcss to scss in marketplace dependencies component + misc style fixes * convert tailwindcss to scss in marketplace hero component + misc style fixes * convert tailwindcss to scss in marketplace screenshots component * convert tailwindcss to scss in portal marketplace components * remove the rest of tailwindscss and fix reset styles * bump shared and marketplace package versions * misc style + build fixes * sync package lock * fix markdown + cleanup * fix markdown margins and git hash size * fix mobile zindex for hero and mobile changing categories routing link
2026-03-30 12:11:56 +00:00 · 2024-03-21 14:23:28 -04:00
parent 5e6a7e134f
commit 2021431e2f
48 changed files with 1606 additions and 839 deletions
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/controls.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/controls.component.ts
@@ -31,7 +31,6 @@ import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { getAllPackages } from 'src/app/util/get-package-data'
 import { dryUpdate } from 'src/app/util/dry-update'
-import { SidebarService } from 'src/app/services/sidebar.service'
 import { MarketplaceAlertsService } from '../services/alerts.service'

@Component({
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/menu.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/menu.component.ts
@@ -15,21 +15,28 @@ import { MARKETPLACE_REGISTRY } from '../modals/registry.component'
        tuiIconButton
        type="button"
        appearance="icon"
-        icon="tuiIconRepeat"
+        icon="tuiIconRepeatLarge"
        (click)="changeRegistry()"
      >
        Change Registry
      </button>
-      <button
-        slot="mobile"
-        class="flex gap-2 p-5 text-base"
-        (click)="changeRegistry()"
-      >
-        <tui-icon tuiAppearance="icon" icon="tuiIconRepeat"></tui-icon>
+      <button slot="mobile" class="mobile-button" (click)="changeRegistry()">
+        <tui-icon tuiAppearance="icon" icon="tuiIconRepeatLarge"></tui-icon>
        Change Registry
      </button>
    </menu>
  `,
+  styles: [
+    `
+      .mobile-button {
+        display: flex;
+        gap: 0.5rem;
+        padding: 1.25rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
+    `,
+  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [MenuModule, TuiButtonModule, TuiIconModule, TuiAppearanceModule],
 })
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/notification.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/notification.component.ts
@@ -7,7 +7,11 @@ import { ConfigService } from 'src/app/services/config.service'
  standalone: true,
  selector: 'marketplace-notification',
  template: `
-    <tui-notification [status]="status || 'warning'" icon="" class="m-4">
+    <tui-notification
+      [status]="status || 'warning'"
+      icon=""
+      class="notification-wrapper"
+    >
      @switch (status) {
        @case ('success') {
          Services from this registry are packaged and maintained by the Start9
@@ -48,6 +52,13 @@ import { ConfigService } from 'src/app/services/config.service'
      }
    </tui-notification>
  `,
+  styles: [
+    `
+      .notification-wrapper {
+        margin: 1rem;
+      }
+    `,
+  ],
  imports: [TuiNotificationModule],
 })
 export class MarketplaceNotificationComponent {
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/tile.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/tile.component.ts
@@ -30,7 +30,7 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
          direction: 'right';
          autoWidth: true
        "
-        class="overflow-y-auto max-w-full md:max-w-[30rem]"
+        class="preview-wrapper"
        [pkg]="pkg"
        (tuiActiveZoneChange)="toggle($event)"
      >
@@ -38,7 +38,7 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
          tuiAutoFocus
          slot="close"
          size="xs"
-          class="place-self-end"
+          class="close-button"
          tuiIconButton
          type="button"
          appearance="icon"
@@ -47,7 +47,7 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
        ></button>
        <marketplace-controls
          slot="controls"
-          class="flex justify-start gap-2"
+          class="controls-wrapper"
          [pkg]="pkg"
          [localPkg]="pkg.manifest.id | toLocal | async"
        />
@@ -70,6 +70,25 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
          opacity: 1;
        }
      }
+
+      .preview-wrapper {
+        overflow-y: auto;
+        max-width: 100%;
+
+        @media (min-width: 768px) {
+          max-width: 30rem;
+        }
+      }
+
+      .close-button {
+        place-self: end;
+      }
+
+      .controls-wrapper {
+        display: flex;
+        justify-content: flex-start;
+        gap: 0.5rem;
+      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/marketplace.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/marketplace.component.ts
@@ -17,30 +17,26 @@ import { MarketplaceSidebarsComponent } from './components/sidebars.component'
  standalone: true,
  template: `
    <marketplace-menu />
-    <div
-      class="sm:pl-[34vw] md:pl-[28vw] lg:pl-[22vw] 2xl:pl-[280px] min-h-screen flex justify-between overflow-auto scroll-smooth"
-    >
-      <div class="pt-24 sm:pt-3 md:pb-10 md:px-8">
+    <div class="marketplace-content-wrapper">
+      <div class="marketplace-content-inner">
        <marketplace-notification [url]="(details$ | async)?.url || ''" />
-        <div class="mt-8 px-6 mb-10">
-          <h1 class="text-4xl sm:text-5xl font-bold text-zinc-50/80">
+        <div class="title-wrapper">
+          <h1>
            {{ category$ | async | titlecase }}
          </h1>
        </div>
        @if (filtered$ | async; as filtered) {
-          <section
-            class="p-6 md:p-8 grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-16 list-none"
-          >
+          <section class="marketplace-content-list">
            @for (pkg of filtered; track $index) {
              <marketplace-tile
                [pkg]="pkg"
                [style.--animation-order]="$index"
-                class="block h-full"
+                class="tile-wrapper"
              />
            }
          </section>
        } @else {
-          <h1 class="text-xl pl-6">
+          <h1 class="loading-text">
            Loading
            <span class="loading-dots"></span>
          </h1>
@@ -58,6 +54,96 @@ import { MarketplaceSidebarsComponent } from './components/sidebars.component'
        background: #18181b url('/assets/img/background.png') no-repeat top
          right;
      }
+
+      ::ng-deep menu {
+        margin: 0;
+        padding: 0;
+      }
+
+      ::ng-deep button {
+        background-color: transparent;
+        background-image: none;
+      }
+
+      .marketplace-content {
+        &-wrapper {
+          display: flex;
+          justify-content: space-between;
+          overflow: auto;
+          scroll-behavior: smooth;
+          min-height: 100vh;
+
+          @media (min-width: 640px) {
+            padding-left: 34vw;
+          }
+          @media (min-width: 768px) {
+            padding-left: 28vw;
+          }
+          @media (min-width: 1024px) {
+            padding-left: 22vw;
+          }
+          @media (min-width: 1536px) {
+            padding-left: 280px;
+          }
+        }
+
+        &-inner {
+          padding-top: 6rem;
+
+          @media (min-width: 640px) {
+            padding-top: 0.75rem;
+          }
+          @media (min-width: 768px) {
+            padding: 0 2rem 2.5rem 2rem;
+          }
+
+          .title-wrapper {
+            margin: 2rem 0 2.5rem 0;
+            padding: 0 1.5rem;
+
+            h1 {
+              font-size: 2.25rem;
+              line-height: 2.5rem;
+              font-weight: 700;
+              color: rgb(250 250 250 / 0.8);
+
+              @media (min-width: 640px) {
+                font-size: 3rem;
+                line-height: 1;
+              }
+            }
+          }
+        }
+
+        &-list {
+          display: grid;
+          grid-template-columns: repeat(1, minmax(0, 1fr));
+          gap: 4rem;
+          list-style-type: none;
+          padding: 1.5rem;
+
+          @media (min-width: 768px) {
+            padding: 2rem;
+          }
+          @media (min-width: 1280px) {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+          @media (min-width: 1536px) {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+          }
+
+          .tile-wrapper {
+            display: block;
+            height: 100%;
+          }
+        }
+      }
+
+      .loading-text {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+        padding-left: 1.5rem;
+      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/modals/preview.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/modals/preview.component.ts
@@ -22,7 +22,7 @@ import { Router } from '@angular/router'
@Component({
  selector: 'marketplace-preview',
  template: `
-    <div class="grid gap-8 p-7 justify-center">
+    <div class="outer-container">
      <ng-content select="[slot=close]" />
      <marketplace-package-hero [pkg]="pkg">
        <ng-content select="[slot=controls]" />
@@ -38,17 +38,13 @@ import { Router } from '@angular/router'
          View more details
        </a>
      }
-      <div class="grid grid-cols-1 gap-x-8">
+      <div class="inner-container">
        <marketplace-about [pkg]="pkg" />
        @if (!(pkg.manifest.dependencies | empty)) {
-          <div
-            class="rounded-xl bg-gradient-to-bl from-zinc-400/75 to-zinc-600 p-px shadow-lg shadow-zinc-400/10 mt-6"
-          >
-            <div class="lg:col-span-5 xl:col-span-4 bg-zinc-800 rounded-xl p-7">
-              <h2 class="text-lg font-bold small-caps my-2 pb-3">
-                Dependencies
-              </h2>
-              <div class="grid grid-row-auto gap-3">
+          <div class="background-border shadow-color-light box-shadow-lg">
+            <div class="dependencies-container">
+              <h2>Dependencies</h2>
+              <div class="dependencies-list">
                @for (
                  dep of pkg.manifest.dependencies | keyvalue;
                  track $index
@@ -64,11 +60,64 @@ import { Router } from '@angular/router'
          </div>
        }
        <release-notes [pkg]="pkg" />
-        <marketplace-additional class="mt-6" [pkg]="pkg" />
+        <marketplace-additional class="additional-wrapper" [pkg]="pkg" />
      </div>
    </div>
  `,
-  styles: [':host { pointer-events: auto }'],
+  styles: [
+    `
+      :host {
+        pointer-events: auto;
+      }
+
+      .outer-container {
+        display: grid;
+        justify-content: center;
+        gap: 2rem;
+        padding: 1.75rem;
+      }
+
+      .inner-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        column-gap: 2rem;
+      }
+
+      .dependencies {
+        &-container {
+          background-color: rgb(39 39 42);
+          border-radius: 0.75rem;
+          padding: 1.75rem;
+
+          @media (min-width: 1024px) {
+            grid-column: span 5 / span 5;
+          }
+          @media (min-width: 1280px) {
+            grid-column: span 4 / span 4;
+          }
+
+          h2 {
+            font-size: 1.125rem;
+            line-height: 1.75rem;
+            font-weight: 700;
+            margin: 0.5rem 0;
+            padding-bottom: 0.75rem;
+            font-variant: all-small-caps;
+          }
+        }
+
+        &-list {
+          display: grid;
+          grid-auto-rows: auto;
+          gap: 0.75rem;
+        }
+      }
+
+      .additional-wrapper {
+        margin-top: 1.5rem;
+      }
+    `,
+  ],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
--- a/web/projects/ui/src/app/services/api/api.fixures.ts
+++ b/web/projects/ui/src/app/services/api/api.fixures.ts
@@ -102,7 +102,7 @@ export module Mock {
      icon: 'icon.png',
    },
    'release-notes':
-      'Dual funded channels! And lots more amazing new features. Also includes several bugfixes and performance enhancements.',
+      '* Dual funded channels! And lots more amazing new features. Also includes several bugfixes and performance enhancements.',
    license: 'MIT',
    'wrapper-repo': 'https://github.com/start9labs/lnd-wrapper',
    'upstream-repo': 'https://github.com/lightningnetwork/lnd',
--- a/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -104,7 +104,8 @@ export class MockApiService extends ApiService {

  async getStatic(url: string): Promise<string> {
    await pauseFor(2000)
-    return '' // markdown
+    return `* Test markdown instructions
+* Test markdown instructions with [link](https://start9.com)`
  }

  async uploadPackage(guid: string, body: Blob): Promise<void> {
@@ -458,6 +459,7 @@ export class MockApiService extends ApiService {
          'messaging',
          'social',
          'alt coin',
+          'ai',
        ],
      }
      return info
@@ -466,7 +468,8 @@ export class MockApiService extends ApiService {
    } else if (path.startsWith('/package/v0/release-notes')) {
      return Mock.ReleaseNotes
    } else if (path.includes('instructions') || path.includes('license')) {
-      return '' // markdown
+      return `* Test markdown instructions
+* Test markdown instructions with [link](https://start9.com)`
    }
  }