Gateways, domains, and new service interface (#3001)

* add support for inbound proxies

* backend changes

* fix file type

* proxy -> tunnel, implement backend apis

* wip start-tunneld

* add domains and gateways, remove routers, fix docs links

* dont show hidden actions

* show and test dns

* edit instead of chnage acme and change gateway

* refactor: domains page

* refactor: gateways page

* domains and acme refactor

* certificate authorities

* refactor public/private gateways

* fix fe types

* domains mostly finished

* refactor: add file control to form service

* add ip util to sdk

* domains api + migration

* start service interface page, WIP

* different options for clearnet domains

* refactor: styles for interfaces page

* minor

* better placeholder for no addresses

* start sorting addresses

* best address logic

* comments

* fix unnecessary export

* MVP of service interface page

* domains preferred

* fix: address comments

* only translations left

* wip: start-tunnel & fix build

* forms for adding domain, rework things based on new ideas

* fix: dns testing

* public domain, max width, descriptions for dns

* nix StartOS domains, implement public and private domains at interface scope

* restart tor instead of reset

* better icon for restart tor

* dns

* fix sort functions for public and private domains

* with todos

* update types

* clean up tech debt, bump dependencies

* revert to ts-rs v9

* fix all types

* fix dns form

* add missing translations

* it builds

* fix: comments (#3009)

* fix: comments

* undo default

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

* fix: refactor legacy components (#3010)

* fix: comments

* fix: refactor legacy components

* remove default again

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

* more translations

* wip

* fix deadlock

* coukd work

* simple renaming

* placeholder for empty service interfaces table

* honor hidden form values

* remove logs

* reason instead of description

* fix dns

* misc fixes

* implement toggling gateways for service interface

* fix showing dns records

* move status column in service list

* remove unnecessary truthy check

* refactor: refactor forms components and remove legacy Taiga UI package (#3012)

* handle wh file uploads

* wip: debugging tor

* socks5 proxy working

* refactor: fix multiple comments (#3013)

* refactor: fix multiple comments

* styling changes, add documentation to sidebar

* translations for dns page

* refactor: subtle colors

* rearrange service page

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

* fix file_stream and remove non-terminating test

* clean  up logs

* support for sccache

* fix gha sccache

* more marketplace translations

* install wizard clarity

* stub hostnameInfo in migration

* fix address info after setup, fix styling on SI page, new 040 release notes

* remove tor logs from os

* misc fixes

* reset tor still not functioning...

* update ts

* minor styling and wording

* chore: some fixes (#3015)

* fix gateway renames

* different handling for public domains

* styling fixes

* whole navbar should not be clickable on service show page

* timeout getState request

* remove links from changelog

* misc fixes from pairing

* use custom name for gateway in more places

* fix dns parsing

* closes #3003

* closes #2999

* chore: some fixes (#3017)

* small copy change

* revert hardcoded error for testing

* dont require port forward if gateway is public

* use old wan ip when not available

* fix .const hanging on undefined

* fix test

* fix doc test

* fix renames

* update deps

* allow specifying dependency metadata directly

* temporarily make dependencies not cliackable in marketplace listings

* fix socks bind

* fix test

---------

Co-authored-by: Aiden McClelland <me@drbonez.dev>
Co-authored-by: waterplea <alexander@inkin.ru>

web/projects/marketplace/src/components/menu/menu.component.html

@@ -7,7 +7,7 @@
       [url]="registry?.url || ''"
     />
     <h1 [tuiSkeleton]="!registry">
-      {{ registry?.info?.name || 'Unnamed Registry' }}
+      {{ registry?.info?.name || 'Unnamed registry' }}
     </h1>
     <!-- change registry modal -->
     <ng-content select="[slot=desktop]"></ng-content>
@@ -62,12 +62,8 @@
               <div>
                 <!-- link to store for brochure -->
                 <ng-content select="[slot=store-mobile]" />
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://docs.start9.com/latest/packaging-guide/"
-                >
-                  <span>Package a service</span>
+                <a docsLink path="/packaging-guide">
+                  <span>{{ 'Package a service' | i18n }}</span>
                   <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
                 </a>
               </div>
@@ -90,12 +86,8 @@
       <div>
         <!-- link to store for brochure -->
         <ng-content select="[slot=store]" />
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://docs.start9.com/latest/packaging-guide/"
-        >
-          <span>Package a service</span>
+        <a docsLink path="/packaging-guide">
+          <span>{{ 'Package a service' | i18n }}</span>
           <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
         </a>
       </div>

web/projects/marketplace/src/components/menu/menu.component.module.ts

@@ -1,6 +1,10 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
-import { SharedPipesModule } from '@start9labs/shared'
+import {
+  DocsLinkDirective,
+  i18nPipe,
+  SharedPipesModule,
+} from '@start9labs/shared'
 import { TuiLet } from '@taiga-ui/cdk'
 import {
   TuiAppearance,
@@ -31,6 +35,8 @@ import { MenuComponent } from './menu.component'
     TuiSkeleton,
     TuiDrawer,
     TuiPopup,
+    i18nPipe,
+    DocsLinkDirective,
   ],
   declarations: [MenuComponent],
   exports: [MenuComponent],

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

@@ -6,7 +6,7 @@ import {
   output,
 } from '@angular/core'
 import { MarketplacePkgBase } from '../../types'
-import { CopyService } from '@start9labs/shared'
+import { CopyService, i18nPipe } from '@start9labs/shared'
 import { DatePipe } from '@angular/common'
 import { MarketplaceItemComponent } from './item.component'
 
@@ -36,7 +36,7 @@ import { MarketplaceItemComponent } from './item.component'
           <marketplace-item
             [style.pointer-events]="'none'"
             [data]="pkg().sdkVersion || 'Unknown'"
-            label="SDK Version"
+            label="SDK version"
             icon=""
           />
           <!-- git hash -->
@@ -44,15 +44,15 @@ import { MarketplaceItemComponent } from './item.component'
             <marketplace-item
               (click)="copyService.copy(gitHash)"
               [data]="gitHash"
-              label="Git Hash"
+              label="Git hash"
               icon="@tui.copy"
               class="item-copy"
             />
           } @else {
             <div class="item-padding">
               <label tuiTitle>
-                <span tuiSubtitle>Git Hash</span>
-                Unknown
+                <span tuiSubtitle>{{ 'Git hash' | i18n }}</span>
+                {{ 'Unknown' | i18n }}
               </label>
             </div>
           }
@@ -128,7 +128,7 @@ import { MarketplaceItemComponent } from './item.component'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MarketplaceItemComponent, DatePipe],
+  imports: [MarketplaceItemComponent, DatePipe, i18nPipe],
 })
 export class MarketplaceAboutComponent {
   readonly copyService = inject(CopyService)

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

@@ -8,13 +8,14 @@ import {
 } from '@angular/core'
 import { MarketplacePkgBase } from '../../../types'
 import { MarketplaceDepItemComponent } from './dependency-item.component'
+import { i18nPipe } from '@start9labs/shared'
 
 @Component({
   selector: 'marketplace-dependencies',
   template: `
     <div class="background-border shadow-color-light box-shadow-lg">
       <div class="dependencies-container">
-        <h2 class="additional-detail-title">Dependencies</h2>
+        <h2 class="additional-detail-title">{{ 'Dependencies' | i18n }}</h2>
         <div class="dependencies-list">
           @for (dep of pkg.dependencyMetadata | keyvalue; track $index) {
             <marketplace-dep-item
@@ -48,7 +49,7 @@ import { MarketplaceDepItemComponent } from './dependency-item.component'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, MarketplaceDepItemComponent],
+  imports: [CommonModule, MarketplaceDepItemComponent, i18nPipe],
 })
 export class MarketplaceDependenciesComponent {
   @Input({ required: true })

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -1,7 +1,7 @@
 import { KeyValue } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { ExverPipesModule } from '@start9labs/shared'
+import { ExverPipesModule, i18nPipe } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 import { TuiAvatar, TuiLineClamp } from '@taiga-ui/kit'
 import { MarketplacePkgBase } from '../../../types'
@@ -20,9 +20,9 @@ import { MarketplacePkgBase } from '../../../types'
             </span>
             <p>
               @if (dep.value.optional) {
-                <span>(optional)</span>
+                <span>({{ 'Optional' | i18n }})</span>
               } @else {
-                <span>(required)</span>
+                <span>({{ 'Required' | i18n }})</span>
               }
             </p>
           </div>
@@ -49,10 +49,11 @@ import { MarketplacePkgBase } from '../../../types'
       filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
         drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
 
-      &:hover {
-        background-color: rgb(63 63 70 / 0.7);
-        cursor: pointer;
-      }
+      // @TODO re-engage when button can link to root with search QP
+      // &:hover {
+      //   background-color: rgb(63 63 70 / 0.7);
+      //   cursor: pointer;
+      // }
     }
 
     .title {
@@ -88,7 +89,7 @@ import { MarketplacePkgBase } from '../../../types'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterModule, TuiAvatar, ExverPipesModule, TuiLineClamp],
+  imports: [RouterModule, TuiAvatar, ExverPipesModule, TuiLineClamp, i18nPipe],
 })
 export class MarketplaceDepItemComponent {
   @Input({ required: true })

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { SharedPipesModule } from '@start9labs/shared'
+import { i18nPipe, SharedPipesModule } from '@start9labs/shared'
 import { TuiTitle } from '@taiga-ui/core'
 import { TuiAvatar } from '@taiga-ui/kit'
 import { TuiCell } from '@taiga-ui/layout'
@@ -11,7 +11,9 @@ import { MarketplacePkg } from '../../types'
   template: `
     <div class="background-border box-shadow-lg shadow-color-light">
       <div class="box-container">
-        <h2 class="additional-detail-title">Alternative Implementations</h2>
+        <h2 class="additional-detail-title">
+          {{ 'Alternative Implementations' | i18n }}
+        </h2>
         @for (pkg of pkgs; track $index) {
           <a
             tuiCell
@@ -42,7 +44,14 @@ import { MarketplacePkg } from '../../types'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink, TuiCell, TuiTitle, SharedPipesModule, TuiAvatar],
+  imports: [
+    RouterLink,
+    TuiCell,
+    TuiTitle,
+    SharedPipesModule,
+    TuiAvatar,
+    i18nPipe,
+  ],
 })
 export class MarketplaceFlavorsComponent {
   @Input()

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

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { i18nKey } from '@start9labs/shared'
 import { TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { TuiFade } from '@taiga-ui/kit'
 
@@ -6,7 +7,7 @@ import { TuiFade } from '@taiga-ui/kit'
   selector: 'marketplace-item',
   template: `
     <label tuiTitle>
-      <span tuiSubtitle>{{ label }}</span>
+      <span tuiSubtitle>{{ label || '' }}</span>
       <span tuiFade>{{ data }}</span>
     </label>
     <tui-icon [icon]="icon" />
@@ -38,7 +39,7 @@ import { TuiFade } from '@taiga-ui/kit'
 })
 export class MarketplaceItemComponent {
   @Input({ required: true })
-  label!: string
+  label!: i18nKey | null
 
   @Input({ required: true })
   icon!: string

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

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MarketplaceItemComponent } from './item.component'
+import { i18nKey } from '@start9labs/shared'
 
 @Component({
   selector: 'marketplace-link',
@@ -13,7 +14,7 @@ import { MarketplaceItemComponent } from './item.component'
 })
 export class MarketplaceLinkComponent {
   @Input({ required: true })
-  label!: string
+  label!: i18nKey
 
   @Input({ required: true })
   icon!: string

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

@@ -5,7 +5,7 @@ import {
   input,
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { CopyService } from '@start9labs/shared'
+import { CopyService, i18nPipe } from '@start9labs/shared'
 import { MarketplacePkgBase } from '../../types'
 import { MarketplaceLinkComponent } from './link.component'
 
@@ -18,13 +18,13 @@ import { MarketplaceLinkComponent } from './link.component'
         <div class="detail-container">
           <marketplace-link
             [url]="pkg().upstreamRepo"
-            label="Upstream Service"
+            label="Upstream service"
             icon="@tui.external-link"
             class="item-pointer"
           />
           <marketplace-link
             [url]="pkg().wrapperRepo"
-            label="StartOS Package"
+            label="StartOS package"
             icon="@tui.external-link"
             class="item-pointer"
           />
@@ -34,7 +34,7 @@ import { MarketplaceLinkComponent } from './link.component'
 
     <div class="background-border shadow-color-light box-shadow-lg">
       <div class="box-container">
-        <h2 class="additional-detail-title">Links</h2>
+        <h2 class="additional-detail-title">{{ 'Links' | i18n }}</h2>
         <div class="detail-container">
           <marketplace-link
             [url]="pkg().marketingSite"
@@ -117,7 +117,7 @@ import { MarketplaceLinkComponent } from './link.component'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MarketplaceLinkComponent],
+  imports: [MarketplaceLinkComponent, i18nPipe],
 })
 export class MarketplaceLinksComponent {
   readonly copyService = inject(CopyService)

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

@@ -18,12 +18,12 @@ import { MarketplaceItemComponent } from './item.component'
   template: `
     <div class="background-border shadow-color-light box-shadow-lg">
       <div class="box-container">
-        <h2 class="additional-detail-title">Versions</h2>
+        <h2 class="additional-detail-title">{{ 'Versions' | i18n }}</h2>
         <marketplace-item
           (click)="promptSelectVersion(versionSelect)"
-          data="Select another version"
+          [data]="'Select another version' | i18n"
           icon="@tui.chevron-right"
-          label=""
+          [label]="null"
           class="select"
         />
         <ng-template