Merge pull request #2591 from Start9Labs/ionic

refactor: completely remove ionic

web/README.md

@@ -44,7 +44,7 @@ git submodule update --init --recursive
 
 ```sh
 cd web
-npm i
+npm ci
 npm run build:deps
 ```
 

web/angular.json

@@ -47,8 +47,6 @@
               "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
               "node_modules/@taiga-ui/styles/taiga-ui-global.less",
               "projects/shared/styles/taiga.scss",
-              "projects/shared/styles/variables.scss",
-              "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",
               "projects/ui/src/styles.scss"
             ],
@@ -97,7 +95,10 @@
               "buildTarget": "ui:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 8100
+          }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -113,30 +114,6 @@
               "projects/ui/src/**/*.html"
             ]
           }
-        },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "ui:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "ui:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "ui:ionic-cordova-build",
-            "devServerTarget": "ui:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "ui:ionic-cordova-build:production",
-              "devServerTarget": "ui:serve:production"
-            }
-          }
         }
       }
     },
@@ -219,7 +196,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "install-wizard:build"
+            "buildTarget": "install-wizard:build",
+            "port": 8100
           },
           "configurations": {
             "production": {
@@ -245,30 +223,6 @@
               "projects/install-wizard/src/**/*.html"
             ]
           }
-        },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "install-wizard:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "install-wizard:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "install-wizard:ionic-cordova-build",
-            "devServerTarget": "install-wizard:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "install-wizard:ionic-cordova-build:production",
-              "devServerTarget": "install-wizard:serve:production"
-            }
-          }
         }
       }
     },
@@ -352,7 +306,10 @@
               "buildTarget": "setup-wizard:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 8100
+          }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -368,30 +325,6 @@
               "projects/setup-wizard/src/**/*.html"
             ]
           }
-        },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "setup-wizard:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "setup-wizard:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "setup-wizard:ionic-cordova-build",
-            "devServerTarget": "setup-wizard:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "setup-wizard:ionic-cordova-build:production",
-              "devServerTarget": "setup-wizard:serve:production"
-            }
-          }
         }
       }
     },
@@ -437,15 +370,16 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"],
+    "schematicCollections": [],
     "analytics": false
   },
   "schematics": {
-    "@ionic/angular-toolkit:component": {
-      "styleext": "scss"
-    },
-    "@ionic/angular-toolkit:page": {
-      "styleext": "scss"
+    "@schematics/angular:component": {
+      "displayBlock": true,
+      "changeDetection": "OnPush",
+      "style": "scss",
+      "skipTests": true,
+      "skipImport": true
     }
   }
 }

web/ionic.config.json

@@ -1,23 +0,0 @@
-{
-  "projects": {
-    "ui": {
-      "name": "ui",
-      "integrations": {},
-      "type": "angular",
-      "root": "projects/ui"
-    },
-    "install-wizard": {
-      "name": "install-wizard",
-      "integrations": {},
-      "type": "angular",
-      "root": "projects/install-wizard"
-    },
-    "setup-wizard": {
-      "name": "setup-wizard",
-      "integrations": {},
-      "type": "angular",
-      "root": "projects/setup-wizard"
-    }
-  },
-  "defaultProject": "ui"
-}

web/package.json

@@ -23,10 +23,10 @@
     "analyze:ui": "webpack-bundle-analyzer dist/raw/ui/stats.json",
     "publish:shared": "npm run build:shared && npm publish ./dist/shared --access public",
     "publish:marketplace": "npm run build:marketplace && npm publish ./dist/marketplace --access public",
-    "start:install": "npm run-script build-config && ionic serve --project install-wizard --host 0.0.0.0",
-    "start:setup": "npm run-script build-config && ionic serve --project setup-wizard --host 0.0.0.0",
-    "start:ui": "npm run-script build-config && ionic serve --project ui --ip --host 0.0.0.0",
-    "start:ui:proxy": "npm run-script build-config && ionic serve --project ui --ip --host 0.0.0.0 -- --proxy-config proxy.conf.json",
+    "start:install": "npm run-script build-config && ng serve --project install-wizard --host 0.0.0.0",
+    "start:setup": "npm run-script build-config && ng serve --project setup-wizard --host 0.0.0.0",
+    "start:ui": "npm run-script build-config && ng serve --project ui --host 0.0.0.0",
+    "start:ui:proxy": "npm run-script build-config && ng serve --project ui --host 0.0.0.0 --proxy-config proxy.conf.json",
     "build-config": "node build-config.js"
   },
   "dependencies": {
@@ -41,22 +41,21 @@
     "@angular/pwa": "^17.3.1",
     "@angular/router": "^17.3.1",
     "@angular/service-worker": "^17.3.1",
-    "@ionic/angular": "^6.1.15",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@start9labs/argon2": "^0.1.0",
     "@start9labs/emver": "^0.1.5",
     "@start9labs/start-sdk": "file:../sdk/dist",
-    "@taiga-ui/addon-charts": "3.68.0",
-    "@taiga-ui/addon-commerce": "3.68.0",
-    "@taiga-ui/addon-mobile": "3.68.0",
-    "@taiga-ui/cdk": "3.68.0",
-    "@taiga-ui/core": "3.68.0",
-    "@taiga-ui/experimental": "3.68.0",
-    "@taiga-ui/icons": "3.68.0",
-    "@taiga-ui/kit": "3.68.0",
-    "@taiga-ui/styles": "3.68.0",
+    "@taiga-ui/addon-charts": "3.73.0",
+    "@taiga-ui/addon-commerce": "3.73.0",
+    "@taiga-ui/addon-mobile": "3.73.0",
+    "@taiga-ui/cdk": "3.73.0",
+    "@taiga-ui/core": "3.73.0",
+    "@taiga-ui/experimental": "3.73.0",
+    "@taiga-ui/icons": "3.73.0",
+    "@taiga-ui/kit": "3.73.0",
+    "@taiga-ui/styles": "3.73.0",
     "@tinkoff/ng-dompurify": "4.0.0",
-    "@tinkoff/ng-event-plugins": "3.1.0",
+    "@tinkoff/ng-event-plugins": "3.1.1",
     "ansi-to-html": "^0.7.2",
     "base64-js": "^1.5.1",
     "cbor": "npm:@jprochazk/cbor@^0.4.9",
@@ -88,7 +87,6 @@
     "@angular/cli": "^17.3.1",
     "@angular/compiler-cli": "^17.3.1",
     "@angular/language-service": "^17.3.1",
-    "@ionic/cli": "^6.19.0",
     "@types/dompurify": "^2.3.3",
     "@types/estree": "^0.0.51",
     "@types/js-yaml": "^4.0.5",

web/projects/marketplace/src/pages/list/categories/categories.component.scss

@@ -24,6 +24,7 @@ button {
   z-index: 50;
   background-color: transparent;
   background-image: none;
+  border: none;
 
   &:hover {
     text-decoration-line: none;

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

@@ -32,8 +32,7 @@ export class CategoriesComponent {
       case 'all':
         return 'tuiIconGridLarge'
       case 'bitcoin':
-        // @TODO need bitcoin icon
-        return 'tuiIconBoldLarge'
+        return 'tuiIconBitcoin'
       case 'messaging':
       case 'communications':
         return 'tuiIconMessageCircleLarge'

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

@@ -10,7 +10,6 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    gap: 1.5rem;
 
     &-version {
       line-height: 1.5rem;

web/projects/shared/assets/taiga-ui/icons/tuiIconBitcoinOutline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M410.47 279.2c-5-11.5-12.7-21.6-28.1-30.1a98.15 98.15 0 00-25.4-10 62.22 62.22 0 0016.3-11 56.37 56.37 0 0015.6-23.3 77.11 77.11 0 003.5-28.2c-1.1-16.8-4.4-33.1-13.2-44.8s-21.2-20.7-37.6-27c-12.6-4.8-25.5-7.8-45.5-8.9V32h-40v64h-32V32h-41v64H96v48h27.87c8.7 0 14.6.8 17.6 2.3a13.22 13.22 0 016.5 6c1.3 2.5 1.9 8.4 1.9 17.5V343c0 9-.6 14.8-1.9 17.4s-2 4.9-5.1 6.3-3.2 1.3-11.8 1.3h-26.4L96 416h87v64h41v-64h32v64h40v-64.4c26-1.3 44.5-4.7 59.4-10.3 19.3-7.2 34.1-17.7 44.7-31.5s14-34.9 14.93-51.2c.67-14.5-.03-33.2-4.56-43.4zM224 150h32v74h-32zm0 212v-90h32v90zm72-208.1c6 2.5 9.9 7.5 13.8 12.7 4.3 5.7 6.5 13.3 6.5 21.4 0 7.8-2.9 14.5-7.5 20.5-3.8 4.9-6.8 8.3-12.8 11.1zm28.8 186.7c-7.8 6.9-12.3 10.1-22.1 13.8a56.06 56.06 0 01-6.7 1.9v-82.8a40.74 40.74 0 0111.3 3.4c7.8 3.3 15.2 6.9 19.8 13.2a43.82 43.82 0 018 24.7c-.03 10.9-2.83 19.2-10.33 25.8z"/></svg>

web/projects/shared/assets/taiga-ui/icons/tuiIconRocketOutline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

web/projects/shared/src/directives/safe-links.directive.ts

@@ -22,7 +22,7 @@ export class SafeLinksDirective implements AfterViewInit {
       .forEach(link => {
         link.target = '_blank'
         link.setAttribute('rel', 'noreferrer')
-        link.classList.add('externalLink')
+        link.classList.add('g-external-link')
       })
   }
 }

web/projects/shared/styles/global.scss

@@ -1,29 +0,0 @@
-/*
- * App Global CSS
- * ----------------------------------------------------------------------------
- * Put style rules here that you want to apply globally. These styles are for
- * the entire app and not just one component. Additionally, this file can be
- * used as an entry point to import other CSS/Sass files to be included in the
- * output CSS.
- * For more information on global stylesheets, visit the documentation:
- * https://ionicframework.com/docs/layout/global-stylesheets
- */
-
-/* Core CSS required for Ionic components to work properly */
-@import '@ionic/angular/css/core.css';
-
-/* Basic CSS for apps built with Ionic */
-@import '@ionic/angular/css/normalize.css';
-@import '@ionic/angular/css/structure.css';
-@import '@ionic/angular/css/typography.css';
-@import '@ionic/angular/css/display.css';
-
-/* Optional CSS utils that can be commented out */
-@import '@ionic/angular/css/padding.css';
-@import '@ionic/angular/css/float-elements.css';
-@import '@ionic/angular/css/text-alignment.css';
-@import '@ionic/angular/css/text-transformation.css';
-@import '@ionic/angular/css/flex-utils.css';
-
-/* Import swiper styles for slides */
-@import 'swiper/scss';

web/projects/shared/styles/shared.scss

@@ -157,9 +157,56 @@
   src: url('/assets/fonts/Courier_New/CourierNew-Bold.ttf');
 }
 
-
 $wide-modal: 900px;
 
+:root {
+  --alt-red: #ff4961;
+  --alt-orange: #f89248;
+  --alt-yellow: #e5d53e;
+  --alt-green: #3dcf6f;
+  --alt-blue: #00a8a8;
+  --alt-purple: #9747ff;
+
+  --portal-header-height: 56px;
+
+  // @TODO rename when make style lib
+  --tw-color-black: 0 0 0;
+  --tw-color-white: 255 255 255;
+  --tw-color-slate-50: 248 250 252;
+  --tw-color-slate-100: 241 245 249;
+  --tw-color-slate-200: 226 232 240;
+  --tw-color-slate-300: 203 213 225;
+  --tw-color-slate-400: 148 163 184;
+  --tw-color-slate-500: 100 116 139;
+  --tw-color-slate-600: 71 85 105;
+  --tw-color-slate-700: 51 65 85;
+  --tw-color-slate-800: 30 41 59;
+  --tw-color-slate-900: 15 23 42;
+  --tw-color-slate-950: 2 6 23;
+  --tw-color-gray-50: 249 250 251;
+  --tw-color-gray-100: 243 244 246;
+  --tw-color-gray-200: 229 231 235;
+  --tw-color-gray-300: 209 213 219;
+  --tw-color-gray-400: 156 163 175;
+  --tw-color-gray-500: 107 114 128;
+  --tw-color-gray-600: 75 85 99;
+  --tw-color-gray-700: 55 65 81;
+  --tw-color-gray-800: 31 41 55;
+  --tw-color-gray-900: 17 24 39;
+  --tw-color-gray-950: 3 7 18;
+  --tw-color-zinc-50: 250 250 250;
+  --tw-color-zinc-100: 244 244 245;
+  --tw-color-zinc-200: 228 228 231;
+  --tw-color-zinc-300: 212 212 216;
+  --tw-color-zinc-400: 161 161 170;
+  --tw-color-zinc-500: 113 113 122;
+  --tw-color-zinc-600: 82 82 91;
+  --tw-color-zinc-700: 63 63 70;
+  --tw-color-zinc-800: 39 39 42;
+  --tw-color-zinc-900: 24 24 27;
+  --tw-color-zinc-950: 9 9 11;
+}
+
 body {
   -webkit-user-select: text;
   -moz-user-select: text;
@@ -167,94 +214,6 @@ body {
   user-select: text;
 }
 
-ion-input {
-  caret-color: gray;
-}
-
-ion-alert {
-  .alert-wrapper {
-    --min-width: 320px;
-  }
-}
-
-.swiper {
-  .swiper-slide {
-    display: unset;
-  }
-}
-
-ion-modal {
-  --backdrop-opacity: 0.7;
-  &::part(content) {
-    border-radius: 6px;
-    border: 2px solid rgba(255, 255, 255, 0.03);
-    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.alertlike-modal {
-  &::part(content) {
-    max-height: 380px !important;
-    top: 25% !important;
-    width: 90% !important;
-    left: 5% !important;
-    --box-shadow: none !important;
-  }
-}
-
-@media (min-width: 1000px) {
-  ion-modal::part(content) {
-    width: $wide-modal !important;
-    left: calc((100vw - $wide-modal) / 2) !important;
-  }
-
-  .alertlike-modal {
-    &::part(content) {
-      width: $wide-modal !important;
-      left: calc((100vw - $wide-modal) / 2) !important;
-    }
-  }
-
-  ion-alert {
-    .alert-wrapper {
-      --width: 50%;
-      --max-width: 500px;
-    }
-  }
-}
-
-.item-interactive {
-  --highlight-background: var(--ion-color-light) !important;
-}
-
-.hidden-scrollbar {
-  overflow: auto;
-  white-space: nowrap;
-  height: 60px;
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  /* IE and Edge */
-  -ms-overflow-style: none;
-  /* Firefox */
-  scrollbar-width: none;
-}
-
-.divider {
-  background: linear-gradient(
-    90deg,
-    var(--ion-color-light) 0,
-    var(--ion-color-dark) 50%,
-    var(--ion-color-light) 100%
-  );
-  height: 1px;
-}
-
 .loading-dots:after {
   content: '...';
   overflow: hidden;
@@ -265,22 +224,6 @@ ion-modal {
   width: 1em;
 }
 
-.courier-new {
-  font-family: 'Courier New';
-}
-
-.montserrat {
-  font-family: 'Montserrat', sans-serif !important;
-}
-
-.color-success-shade {
-  color: var(--ion-color-success-shade);
-}
-
-.color-primary-shade {
-  color: var(--ion-color-primary-shade);
-}
-
 @keyframes ellipsis-dot {
   25% {
     content: '';
@@ -299,37 +242,12 @@ ion-modal {
   }
 }
 
-.alert-error-message {
-  .alert-title {
-    color: var(--ion-color-danger);
-  }
-}
-
-.alert-warning-message {
-  .alert-title {
-    color: var(--ion-color-warning);
-  }
-}
-
-.alert-success-message {
-  .alert-title {
-    color: var(--ion-color-success);
-  }
-}
-
 a {
   cursor: pointer;
   color: inherit;
   text-decoration: none;
 }
 
-.modal-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
-  margin-top: 24px;
-}
-
 /* marketplace */
 .background-border {
   border-radius: 0.75rem;

web/projects/shared/styles/variables.scss

@@ -1,134 +0,0 @@
-// Ionic Variables and Theming. For more info, please see:
-// http://ionicframework.com/docs/theming/
-
-/** Ionic CSS Variables **/
-:root {
-  --ion-color-primary: #0075e1;
-  --ion-color-primary-rgb: 66, 140, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
-
-  --ion-color-secondary: #50c8ff;
-  --ion-color-secondary-rgb: 80, 200, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
-
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106, 100, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47, 223, 117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #ffd534;
-  --ion-color-warning-rgb: 255, 213, 52;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0bb2e;
-  --ion-color-warning-tint: #ffd948;
-
-  --ion-color-danger: #ff4961;
-  --ion-color-danger-rgb: 255, 73, 97;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
-
-  --ion-color-light: #181818;
-  --ion-color-light-rgb: 24, 24, 24;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255, 255, 255;
-  --ion-color-light-shade: #000000;
-  --ion-color-light-tint: #000000;
-
-  --ion-color-medium: #222428;
-  --ion-color-medium-rgb: 34, 36, 40;
-  --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #1e2023;
-  --ion-color-medium-tint: #383a3e;
-
-  --ion-color-dark: #e0e0e0;
-  --ion-color-dark-rgb: 224, 224, 224;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0, 0, 0;
-  --ion-color-dark-shade: #bfbfbf;
-  --ion-color-dark-tint: #d8d8d8;
-
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
-
-  --alt-red: #ff4961;
-  --alt-orange: #f89248;
-  --alt-yellow: #e5d53e;
-  --alt-green: #3dcf6f;
-  --alt-blue: #00a8a8;
-  --alt-purple: #9747ff;
-
-  --portal-header-height: 56px;
-
-  // @TODO rename when make style lib
-  --tw-color-black: 0 0 0;
-  --tw-color-white: 255 255 255;
-  --tw-color-slate-50: 248 250 252;
-  --tw-color-slate-100: 241 245 249;
-  --tw-color-slate-200: 226 232 240;
-  --tw-color-slate-300: 203 213 225;
-  --tw-color-slate-400: 148 163 184;
-  --tw-color-slate-500: 100 116 139;
-  --tw-color-slate-600: 71 85 105;
-  --tw-color-slate-700: 51 65 85;
-  --tw-color-slate-800: 30 41 59;
-  --tw-color-slate-900: 15 23 42;
-  --tw-color-slate-950: 2 6 23;
-  --tw-color-gray-50: 249 250 251;
-  --tw-color-gray-100: 243 244 246;
-  --tw-color-gray-200: 229 231 235;
-  --tw-color-gray-300: 209 213 219;
-  --tw-color-gray-400: 156 163 175;
-  --tw-color-gray-500: 107 114 128;
-  --tw-color-gray-600: 75 85 99;
-  --tw-color-gray-700: 55 65 81;
-  --tw-color-gray-800: 31 41 55;
-  --tw-color-gray-900: 17 24 39;
-  --tw-color-gray-950: 3 7 18;
-  --tw-color-zinc-50: 250 250 250;
-  --tw-color-zinc-100: 244 244 245;
-  --tw-color-zinc-200: 228 228 231;
-  --tw-color-zinc-300: 212 212 216;
-  --tw-color-zinc-400: 161 161 170;
-  --tw-color-zinc-500: 113 113 122;
-  --tw-color-zinc-600: 82 82 91;
-  --tw-color-zinc-700: 63 63 70;
-  --tw-color-zinc-800: 39 39 42;
-  --tw-color-zinc-900: 24 24 27;
-  --tw-color-zinc-950: 9 9 11;
-}

web/projects/ui/src/app/app.component.html

@@ -1,20 +1,7 @@
 <svg-definitions />
 <!--TODO: Theme-->
-<tui-root tuiTheme="night" tuiMode="onDark">
-  <ion-app>
-    <ion-content>
-      <ion-router-outlet
-        id="main-content"
-        class="container"
-        [class.container_offline]="offline$ | async"
-      >
-        <ion-content
-          class="ion-padding with-widgets"
-          style="pointer-events: none; opacity: 0"
-        ></ion-content>
-      </ion-router-outlet>
-    </ion-content>
-  </ion-app>
+<tui-root tuiTheme="night" tuiMode="onDark" [class.offline]="offline$ | async">
+  <router-outlet />
   <toast-container />
   <sidebar-host ngProjectAs="tuiOverContent" />
 </tui-root>

web/projects/ui/src/app/app.component.scss

@@ -1,17 +1,17 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
 :host {
   display: block;
   height: 100%;
 }
 
 tui-root {
+  @include transition(filter);
   height: 100%;
-}
+  font-family: 'Open Sans', sans-serif;
+  --tui-skeleton-radius: 1rem;
 
-.container {
-  max-width: 100%;
-  transition: filter 0.3s;
-
-  &_offline {
+  &.offline {
     filter: saturate(0.75) contrast(0.85);
   }
 }

web/projects/ui/src/app/app.component.ts

@@ -36,9 +36,10 @@ export class AppComponent implements OnInit {
       .pipe(startWith({ restarting: false, shuttingDown: false })),
   ]).pipe(
     map(
-      ([verified, connected, status]) =>
-        verified && (!connected || status.restarting || status.shuttingDown),
+      ([connected, verified, status]) =>
+        connected && (!verified || status.restarting || status.shuttingDown),
     ),
+    startWith(true),
   )
 
   async ngOnInit() {

web/projects/ui/src/app/app.module.ts

@@ -2,7 +2,6 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { ServiceWorkerModule } from '@angular/service-worker'
-import { IonicModule } from '@ionic/angular'
 import { LoadingModule } from '@start9labs/shared'
 import {
   TuiAlertModule,
@@ -11,9 +10,9 @@ import {
   TuiRootModule,
   TuiThemeNightModule,
 } from '@taiga-ui/core'
-import { SidebarHostComponent } from 'src/app/common/sidebar-host.component'
-import { SvgDefinitionsComponent } from 'src/app/common/svg-definitions.component'
-import { ToastContainerComponent } from 'src/app/common/toast-container/toast-container.component'
+import { SidebarHostComponent } from 'src/app/components/sidebar-host.component'
+import { SvgDefinitionsComponent } from 'src/app/components/svg-definitions.component'
+import { ToastContainerComponent } from 'src/app/components/toast-container.component'
 import { environment } from '../environments/environment'
 import { AppComponent } from './app.component'
 import { APP_PROVIDERS } from './app.providers'
@@ -24,9 +23,6 @@ import { RoutingModule } from './routing.module'
   imports: [
     HttpClientModule,
     BrowserAnimationsModule,
-    IonicModule.forRoot({
-      mode: 'md',
-    }),
     RoutingModule,
     ToastContainerComponent,
     TuiRootModule,

web/projects/ui/src/app/app.providers.ts

@@ -1,7 +1,6 @@
 import { APP_INITIALIZER, Provider } from '@angular/core'
 import { UntypedFormBuilder } from '@angular/forms'
 import { Router } from '@angular/router'
-import { IonNav } from '@ionic/angular'
 import {
   AbstractCategoryService,
   AbstractMarketplaceService,
@@ -10,6 +9,7 @@ import {
 import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
 import { TUI_DATE_FORMAT, TUI_DATE_SEPARATOR } from '@taiga-ui/cdk'
 import {
+  tuiDropdownOptionsProvider,
   tuiNumberFormatProvider,
   tuiTextfieldOptionsProvider,
 } from '@taiga-ui/core'
@@ -39,10 +39,10 @@ export const APP_PROVIDERS: Provider[] = [
   PATCH_DB_PROVIDERS,
   FilterPackagesPipe,
   UntypedFormBuilder,
-  IonNav,
   tuiNumberFormatProvider({ decimalSeparator: '.', thousandSeparator: '' }),
   tuiButtonOptionsProvider({ size: 'm' }),
   tuiTextfieldOptionsProvider({ hintOnDisabled: true }),
+  tuiDropdownOptionsProvider({ appearance: 'start-os' }),
   {
     provide: TUI_DATE_FORMAT,
     useValue: 'MDY',

web/projects/ui/src/app/apps/loading/loading.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { LoadingPage } from './loading.page'
-
-const routes: Routes = [
-  {
-    path: '',
-    component: LoadingPage,
-  },
-]
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class LoadingPageModule {}

web/projects/ui/src/app/apps/portal/components/card.component.ts

@@ -1,145 +0,0 @@
-// import { CommonModule } from '@angular/common'
-// import {
-//   ChangeDetectionStrategy,
-//   Component,
-//   HostListener,
-//   Input,
-// } from '@angular/core'
-// import {
-//   TuiBadgedContentModule,
-//   TuiBadgeNotificationModule,
-//   TuiButtonModule,
-//   TuiIconModule,
-// } from '@taiga-ui/experimental'
-// import { RouterLink } from '@angular/router'
-// import { TickerModule } from '@start9labs/shared'
-// import { TuiDataListModule, TuiHostedDropdownModule } from '@taiga-ui/core'
-// import { Action, ActionsComponent } from './actions.component'
-
-// @Component({
-//   selector: '[appCard]',
-//   template: `
-//     <span class="link">
-//       <tui-badged-content [style.--tui-radius.rem]="1.5">
-//         @if (badge) {
-//           <tui-badge-notification size="m" tuiSlot="top">
-//             {{ badge }}
-//           </tui-badge-notification>
-//         }
-//         @if (icon?.startsWith('tuiIcon')) {
-//           <tui-icon class="icon" [icon]="icon" />
-//         } @else {
-//           <img alt="" class="icon" [src]="icon" />
-//         }
-//       </tui-badged-content>
-//       <label ticker class="title">{{ title }}</label>
-//     </span>
-//     @if (isService) {
-//       <span class="side">
-//         <tui-hosted-dropdown
-//           [content]="content"
-//           (click.stop.prevent)="(0)"
-//           (pointerdown.stop)="(0)"
-//         >
-//           <button
-//             tuiIconButton
-//             appearance="outline"
-//             size="xs"
-//             iconLeft="tuiIconMoreHorizontal"
-//             [style.border-radius.%]="100"
-//           >
-//             Actions
-//           </button>
-//           <ng-template #content let-close="close">
-//             <app-actions [actions]="actions" (click)="close()">
-//               {{ title }}
-//             </app-actions>
-//           </ng-template>
-//         </tui-hosted-dropdown>
-//       </span>
-//     }
-//   `,
-//   styles: [
-//     `
-//       :host {
-//         display: flex;
-//         height: 5.5rem;
-//         width: 12.5rem;
-//         border-radius: var(--tui-radius-l);
-//         overflow: hidden;
-//         box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
-//         // TODO: Theme
-//         background: rgb(111 109 109);
-//       }
-
-//       .link {
-//         display: flex;
-//         flex: 1;
-//         flex-direction: column;
-//         align-items: center;
-//         justify-content: center;
-//         color: white;
-//         gap: 0.25rem;
-//         padding: 0 0.5rem;
-//         font: var(--tui-font-text-m);
-//         white-space: nowrap;
-//         overflow: hidden;
-//       }
-
-//       .icon {
-//         width: 2.5rem;
-//         height: 2.5rem;
-//         border-radius: 100%;
-//         color: var(--tui-text-01-night);
-//       }
-
-//       .side {
-//         width: 3rem;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
-//         // TODO: Theme
-//         background: #4b4a4a;
-//       }
-//     `,
-//   ],
-//   standalone: true,
-//   changeDetection: ChangeDetectionStrategy.OnPush,
-//   imports: [
-//     CommonModule,
-//     RouterLink,
-//     TuiButtonModule,
-//     TuiHostedDropdownModule,
-//     TuiDataListModule,
-//     TuiIconModule,
-//     TickerModule,
-//     TuiBadgedContentModule,
-//     TuiBadgeNotificationModule,
-//     ActionsComponent,
-//   ],
-// })
-// export class CardComponent {
-//   @Input({ required: true })
-//   id!: string
-
-//   @Input({ required: true })
-//   icon!: string
-
-//   @Input({ required: true })
-//   title!: string
-
-//   @Input()
-//   actions: Record<string, readonly Action[]> = {}
-
-//   @Input()
-//   badge: number | null = null
-
-//   get isService(): boolean {
-//     return !this.id.includes('/')
-//   }
-
-//   // Prevents Firefox from starting a native drag
-//   @HostListener('pointerdown.prevent')
-//   onDown() {}
-// }

web/projects/ui/src/app/apps/portal/utils/system-tab-resolver.ts

@@ -1,5 +0,0 @@
-import { ActivatedRouteSnapshot } from '@angular/router'
-
-export function systemTabResolver({ data }: ActivatedRouteSnapshot): string {
-  return data['title']
-}

web/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts

@@ -1,32 +0,0 @@
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { SYSTEM_UTILITIES } from '../constants/system-utilities'
-import { toRouterLink } from './to-router-link'
-import { getManifest } from 'src/app/util/get-package-data'
-
-export interface NavigationItem {
-  readonly routerLink: string
-  readonly icon: string
-  readonly title: string
-}
-
-export function toNavigationItem(
-  id: string,
-  packages: Record<string, PackageDataEntry> = {},
-): NavigationItem {
-  const item = SYSTEM_UTILITIES[id]
-  const routerLink = toRouterLink(id)
-
-  if (SYSTEM_UTILITIES[id]) {
-    return {
-      icon: item.icon,
-      title: item.title,
-      routerLink,
-    }
-  }
-
-  return {
-    icon: packages[id]?.icon,
-    title: getManifest(packages[id]).title,
-    routerLink,
-  }
-}

web/projects/ui/src/app/common/os-welcome/os-welcome.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
-import { OSWelcomePage } from './os-welcome.page'
-
-@NgModule({
-  declarations: [OSWelcomePage],
-  imports: [TuiButtonModule],
-  exports: [OSWelcomePage],
-})
-export class OSWelcomePageModule {}

web/projects/ui/src/app/common/os-welcome/os-welcome.page.html

@@ -1,34 +0,0 @@
-<h2>This Release</h2>
-<h4>0.3.5</h4>
-<p class="note-padding">
-  View the complete
-  <a
-    href="https://github.com/Start9Labs/start-os/releases/tag/v0.3.5"
-    target="_blank"
-    noreferrer
-  >
-    release notes
-  </a>
-  for more details.
-</p>
-<h6>Highlights</h6>
-<ul class="spaced-list">
-  <li>
-    This release contains significant under-the-hood improvements to performance
-    and reliability
-  </li>
-  <li>Ditch Docker, replace with Podman</li>
-  <li>Remove locking behavior from PatchDB and optimize</li>
-  <li>Boost efficiency of service manager</li>
-  <li>Require HTTPS on LAN, and improve setup flow for trusting Root CA</li>
-  <li>Better default privacy settings for Firefox kiosk mode</li>
-  <li>Eliminate memory leak from Javascript runtime</li>
-  <li>Other small bug fixes</li>
-  <li>Update license to MIT</li>
-</ul>
-
-<div class="ion-text-center ion-padding">
-  <button tuiButton class="begin" (click)="context.$implicit.complete()">
-    Begin
-  </button>
-</div>

web/projects/ui/src/app/common/os-welcome/os-welcome.page.scss

@@ -1,34 +0,0 @@
-.close-button {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100px;
-}
-
-.main-content {
-  color: var(--ion-color-dark);
-}
-
-.spaced-list {
-  li {
-    padding-bottom: 12px;
-  }
-}
-
-.note-padding {
-  padding-bottom: 12px;
-}
-
-h2 {
-  font-weight: bold;
-}
-
-h4 {
-  font-style: italic;
-}
-
-.begin {
-  display: block;
-  margin: 0 auto;
-}

web/projects/ui/src/app/common/os-welcome/os-welcome.page.ts

@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core'
-import { TuiDialogContext } from '@taiga-ui/core'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
-
-@Component({
-  selector: 'os-welcome',
-  templateUrl: './os-welcome.page.html',
-  styleUrls: ['./os-welcome.page.scss'],
-})
-export class OSWelcomePage {
-  constructor(
-    @Inject(POLYMORPHEUS_CONTEXT) readonly context: TuiDialogContext,
-  ) {}
-}

web/projects/ui/src/app/components/report.component.ts

@@ -9,7 +9,7 @@ import { BackupReport } from 'src/app/services/api/api.types'
 
 @Component({
   template: `
-    <h3 class="g-title">Completed: {{ timestamp | date : 'medium' }}</h3>
+    <h3 class="g-title">Completed: {{ timestamp | date: 'medium' }}</h3>
     <div class="g-action">
       <div [style.flex]="1">
         <strong>System data</strong>

web/projects/ui/src/app/components/welcome.component.ts

@@ -0,0 +1,49 @@
+import { Component, inject, Inject } from '@angular/core'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+
+@Component({
+  standalone: true,
+  template: `
+    <h3>
+      This release:
+      <em>0.3.5</em>
+    </h3>
+    <p>
+      View the complete
+      <a
+        href="https://github.com/Start9Labs/start-os/releases/tag/v0.3.5"
+        target="_blank"
+        noreferrer
+      >
+        release notes
+      </a>
+      for more details.
+    </p>
+    <h5>Highlights</h5>
+    <ul class="spaced-list">
+      <li>
+        This release contains significant under-the-hood improvements to
+        performance and reliability
+      </li>
+      <li>Ditch Docker, replace with Podman</li>
+      <li>Remove locking behavior from PatchDB and optimize</li>
+      <li>Boost efficiency of service manager</li>
+      <li>Require HTTPS on LAN, and improve setup flow for trusting Root CA</li>
+      <li>Better default privacy settings for Firefox kiosk mode</li>
+      <li>Eliminate memory leak from Javascript runtime</li>
+      <li>Other small bug fixes</li>
+      <li>Update license to MIT</li>
+    </ul>
+
+    <p [style.text-align]="'center'">
+      <button tuiButton (click)="context.$implicit.complete()">Begin</button>
+    </p>
+  `,
+  styles: 'li { margin-bottom: 0.5rem }',
+  imports: [TuiButtonModule],
+})
+export class WelcomeComponent {
+  readonly context = inject<TuiDialogContext>(POLYMORPHEUS_CONTEXT)
+}

web/projects/ui/src/app/routes/diagnostic/logs/logs.page.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core'
 import { INTERSECTION_ROOT } from '@ng-web-apis/intersection-observer'
 import { convertAnsi, ErrorService } from '@start9labs/shared'
 import { TuiScrollbarComponent } from '@taiga-ui/core'
-import { DiagnosticService } from 'src/app/apps/diagnostic/services/diagnostic.service'
+import { DiagnosticService } from 'src/app/routes/diagnostic/services/diagnostic.service'
 
 @Component({
   selector: 'logs',

web/projects/ui/src/app/routes/loading/loading.page.ts

@@ -11,17 +11,15 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 @Component({
   standalone: true,
   template: `
-    <app-initializing
-      class="ion-page"
-      (finished)="router.navigate(['login'])"
-    />
+    <app-initializing (finished)="router.navigate(['login'])" />
   `,
   providers: [
     provideSetupService(ApiService),
     provideSetupLogsService(ApiService),
   ],
+  styles: ':host { padding: 1rem; }',
   imports: [InitializingComponent],
 })
-export class LoadingPage {
+export default class LoadingPage {
   readonly router = inject(Router)
 }

web/projects/ui/src/app/routes/portal/components/form.component.ts

@@ -19,8 +19,8 @@ import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiDialogFormService } from '@taiga-ui/kit'
 import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
 import { compare, Operation } from 'fast-json-patch'
-import { FormModule } from 'src/app/common/form/form.module'
-import { InvalidService } from 'src/app/common/form/invalid.service'
+import { FormModule } from 'src/app/routes/portal/components/form/form.module'
+import { InvalidService } from 'src/app/routes/portal/components/form/invalid.service'
 import { FormService } from 'src/app/services/form.service'
 
 export interface ActionButton<T> {

web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.html

@@ -28,7 +28,7 @@
     [open]="!!open.get(item)"
     (openChange)="open.set(item, $event)"
   >
-    {{ item.value | mustache : $any(spec.spec).displayAs }}
+    {{ item.value | mustache: $any(spec.spec).displayAs }}
     <ng-container *ngTemplateOutlet="remove"></ng-container>
   </form-object>
   <ng-template #control>

web/projects/ui/src/app/routes/portal/components/form/form-datetime/form-datetime.component.html

@@ -18,8 +18,8 @@
     [disabled]="!!spec.disabled"
     [readOnly]="readOnly"
     [pseudoInvalid]="invalid"
-    [min]="spec.min ? (spec.min | tuiMapper : getLimit)[0] : min"
-    [max]="spec.max ? (spec.max | tuiMapper : getLimit)[0] : max"
+    [min]="spec.min ? (spec.min | tuiMapper: getLimit)[0] : min"
+    [max]="spec.max ? (spec.max | tuiMapper: getLimit)[0] : max"
     [(ngModel)]="value"
     (focusedChange)="onFocus($event)"
   >
@@ -32,8 +32,8 @@
     [disabled]="!!spec.disabled"
     [readOnly]="readOnly"
     [pseudoInvalid]="invalid"
-    [min]="spec.min ? (spec.min | tuiMapper : getLimit) : min"
-    [max]="spec.max ? (spec.max | tuiMapper : getLimit) : max"
+    [min]="spec.min ? (spec.min | tuiMapper: getLimit) : min"
+    [max]="spec.max ? (spec.max | tuiMapper: getLimit) : max"
     [(ngModel)]="value"
     (focusedChange)="onFocus($event)"
   >

web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.component.html

@@ -1,5 +1,5 @@
 <ng-container
-  *ngFor="let entry of spec | keyvalue : asIsOrder"
+  *ngFor="let entry of spec | keyvalue: asIsOrder"
   tuiMode="onDark"
   [ngSwitch]="entry.value.type"
   [tuiTextfieldCleaner]="true"

web/projects/ui/src/app/routes/portal/components/form/form-text/form-text.component.scss

@@ -4,6 +4,5 @@
 }
 
 .masked {
-  font-family: text-security-disc;
   -webkit-text-security: disc;
 }

web/projects/ui/src/app/routes/portal/components/form/form-text/form-text.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { CT } from '@start9labs/start-sdk'
 import { Control } from '../control'
-import { getDefaultString } from 'src/app/util/config-utilities'
+import { getDefaultString } from 'src/app/utils/config-utilities'
 
 @Component({
   selector: 'form-text',