refactor(apps): remove ~8,300 lines from the remaining 13 apps and fix their bugs

apps/app-loader/project.json

@@ -93,7 +93,7 @@
                 "tsConfig": "apps/app-loader/tsconfig.spec.json",
                 "setupFiles": [
                     "libs/common/src/test-storage.ts",
-                    "apps/app-loader/src/test-setup.ts"
+                    "shared/test-setup-base.ts"
                 ],
                 "isolate": true,
                 "watch": false,

apps/app-loader/src/app/app.component.ts

@@ -2,14 +2,14 @@ import { Component, inject, OnInit, signal } from '@angular/core';
 import {
     current_user,
     currentUser,
+    firstTruthyValueFrom,
     markInitialisationComplete,
     SettingsService,
     setupPlace,
     storeApiKeyFromUrl,
     withTimeout,
 } from '@placeos/common';
 import { authority, queryApplications, setAPI_Key } from '@placeos/ts-client';
-import { first, lastValueFrom } from 'rxjs';
 
 import {
     appInitial,
@@ -51,7 +51,9 @@ import {
                         <p>No applications configured for this domain.</p>
                     </div>
                 } @else {
-                    <div class="app-grid">
+                    <div
+                        class="app-grid grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3"
+                    >
                         @for (app of applications(); track app.id) {
                             <a
                                 class="border-base-300 bg-base-200 text-base-content hover:border-primary focus-visible:border-primary flex flex-col items-center gap-3 rounded-xl border p-4 text-center no-underline transition hover:-translate-y-0.5 hover:shadow-md focus-visible:shadow-md focus-visible:outline-none"
@@ -72,15 +74,19 @@ import {
                                         <span>{{ appInitial(app.name) }}</span>
                                     }
                                 </div>
-                                <div class="app-name">{{ app.name }}</div>
+                                <div
+                                    class="app-name line-clamp-2 text-center text-base/[1.35] font-semibold wrap-break-word"
+                                >
+                                    {{ app.name }}
+                                </div>
                             </a>
                         }
                     </div>
                 }
             </section>
         </main>
     `,
-    styles: [],
+    host: { class: 'block min-h-full' },
     providers: [SettingsService],
 })
 export class AppComponent implements OnInit {
@@ -97,16 +103,14 @@ export class AppComponent implements OnInit {
         const api_key = params.get('x-api-key');
         if (api_key) setAPI_Key(api_key);
         try {
-            await lastValueFrom(
-                this._settings.initialised.pipe(first((_) => _)),
-            );
+            await firstTruthyValueFrom(this._settings.initialised);
             const settings = { ...(this._settings.get('composer') || {}) };
             settings.mock =
                 !!this._settings.get('mock') ||
                 location.origin.includes('demo.place.tech');
             await setupPlace(settings).finally(storeApiKeyFromUrl);
             await withTimeout(
-                lastValueFrom(current_user.pipe(first((_) => !!_))),
+                firstTruthyValueFrom(current_user),
                 30_000,
                 'Current user loading timed out.',
             );

apps/app-loader/src/styles.css

@@ -2,132 +2,6 @@
 /* The app renders only its own templates, so scan only app sources. */
 @source './';
 
-:root {
-    /* Brand */
-    --brand-100: hsl(336, 57%, 48%);
-    --brand-200: hsl(217, 91%, 60%);
-    --brand-300: hsl(200, 15%, 94%);
-    --brand-400: hsl(336, 57%, 48%);
-    --brand-500: hsl(336, 57%, 48%);
-    --brand-600: hsl(336, 57%, 48%);
-    --brand-content: hsl(0, 0%, 100%);
-
-    /* Primary */
-    --primary: hsl(336, 57%, 48%);
-    --primary-focus: hsl(336, 57%, 38%);
-    --primary-content: hsl(0, 0%, 100%);
-
-    /* Secondary */
-    --secondary: hsl(237, 37%, 20%);
-    --secondary-focus: hsl(237, 37%, 10%);
-    --secondary-content: hsl(0, 0%, 100%);
-
-    /* Ternary */
-    --ternary: hsl(237, 37%, 20%);
-    --ternary-focus: hsl(237, 37%, 10%);
-    --ternary-content: hsl(0, 0%, 100%);
-
-    /* Accent */
-    --accent: hsl(156, 57%, 48%);
-    --accent-focus: hsl(156, 57%, 38%);
-    --accent-content: hsl(0, 0%, 0%);
-
-    /* Neutral */
-    --neutral: hsl(0, 0%, 50%);
-    --neutral-focus: hsl(0, 0%, 40%);
-    --neutral-content: hsl(0, 0%, 100%);
-
-    /* Base */
-    --base-100: hsl(0, 0%, 98.5%);
-    --base-200: hsl(49, 2%, 92%);
-    --base-300: hsl(56, 5%, 71%);
-    --base-400: hsl(58, 7%, 55%);
-    --base-content: hsl(0, 0%, 0%);
-
-    /* Info */
-    --info: hsl(217, 91%, 60%);
-    --info-light: hsl(207, 89%, 94%);
-    --info-content: hsl(214, 100%, 97%);
-
-    /* Warning */
-    --warn: #ffa000;
-    --warn-light: hsl(60, 100%, 95%);
-    --warn-content: hsl(0, 0%, 0%);
-
-    /* Success */
-    --success: hsl(118, 50%, 43%);
-    --success-light: hsl(120, 39%, 94%);
-    --success-content: hsl(152, 81%, 96%);
-
-    /* Error */
-    --error: hsl(354, 75%, 53%);
-    --error-light: hsl(350, 100%, 96%);
-    --error-content: hsl(0, 0%, 100%);
-}
-
-.theme-dark {
-    /* Brand */
-    --brand-100: hsl(336, 57%, 48%);
-    --brand-200: hsl(217, 91%, 60%);
-    --brand-300: hsl(232, 50%, 48%);
-    --brand-400: hsl(336, 57%, 48%);
-    --brand-500: hsl(336, 57%, 48%);
-    --brand-600: hsl(336, 57%, 48%);
-    --brand-content: hsl(0, 0%, 100%);
-
-    /* Primary */
-    --primary: hsl(336, 57%, 48%);
-    --primary-focus: hsl(336, 57%, 38%);
-    --primary-content: hsl(0, 0%, 100%);
-
-    /* Secondary */
-    --secondary: hsl(336, 57%, 48%);
-    --secondary-focus: hsl(336, 57%, 38%);
-    --secondary-content: hsl(0, 0%, 100%);
-
-    /* Ternary */
-    --ternary: hsl(206, 23%, 30%);
-    --ternary-focus: hsl(206, 23%, 24%);
-    --ternary-content: hsl(0, 0%, 80%);
-
-    /* Accent */
-    --accent: hsl(156, 57%, 28%);
-    --accent-focus: hsl(158, 17%, 9%);
-    --accent-content: hsl(0, 0%, 80%);
-
-    /* Neutral */
-    --neutral: hsl(0, 0%, 20%);
-    --neutral-focus: hsl(0, 0%, 15%);
-    --neutral-content: hsl(0, 0%, 80%);
-
-    /* Base */
-    --base-100: hsl(0, 0%, 10%);
-    --base-200: hsl(0, 0%, 15%);
-    --base-300: hsl(0, 0%, 20%);
-    --base-400: hsl(0, 0%, 30%);
-    --base-content: hsl(0, 0%, 80%);
-
-    /* Info */
-    --info: hsl(211, 80%, 42%);
-    --info-light: hsl(206, 90%, 61%);
-    --info-content: hsl(0, 0%, 100%);
-
-    /* Warning */
-    --warn: hsl(34, 100%, 50%);
-    --warn-light: hsl(44, 100%, 65%);
-    --warn-content: hsl(0, 0%, 0%);
-
-    /* Success */
-    --success: hsl(122, 46%, 34%);
-    --success-light: hsl(122, 39%, 57%);
-    --success-content: hsl(0, 0%, 100%);
-
-    /* Error */
-    --error: hsl(0, 66%, 47%);
-    --error-light: hsl(4, 83%, 63%);
-    --error-content: hsl(0, 0%, 100%);
-}
-
 html,
 body {
     height: 100%;

apps/app-loader/tsconfig.spec.json

@@ -7,7 +7,7 @@
         "moduleResolution": "bundler",
         "isolatedModules": true
     },
-    "files": ["src/test-setup.ts"],
+    "files": ["../../shared/test-setup-base.ts"],
     "include": ["**/*.spec.ts", "**/*.d.ts"],
     "angularCompilerOptions": {
         "extendedDiagnostics": {

apps/assistant-panel/project.json

@@ -71,7 +71,7 @@
                             "with": "apps/assistant-panel/src/environments/settings.ts"
                         }
                     ],
-                    "serviceWorker": "apps/assistant-panel/ngsw-config.json"
+                    "serviceWorker": "shared/ngsw-config.json"
                 },
                 "production": {
                     "fileReplacements": [
@@ -109,7 +109,7 @@
                             "maximumError": "10kb"
                         }
                     ],
-                    "serviceWorker": "apps/assistant-panel/ngsw-config.json"
+                    "serviceWorker": "shared/ngsw-config.json"
                 }
             }
         },
@@ -138,7 +138,8 @@
                 "tsConfig": "apps/assistant-panel/tsconfig.spec.json",
                 "setupFiles": [
                     "libs/common/src/test-storage.ts",
-                    "apps/assistant-panel/src/test-setup.ts"
+                    "shared/test-setup-base.ts",
+                    "shared/test-setup.ts"
                 ],
                 "isolate": true,
                 "watch": false,

apps/assistant-panel/src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { PlaceOS_Service, SettingsService } from '@placeos/common';
+import { PlaceOS_Service, setMocks, SettingsService } from '@placeos/common';
 import {
     GlobalBannerComponent,
     GlobalLoadingComponent,
 } from '@placeos/components';
 import { ChatComponent } from '@placeos/components/chat';
 import { SettingsDebugPanelLauncherComponent } from '@placeos/components/settings-debug';
+import { mocksInit } from '@placeos/mocks';
 
 @Component({
     selector: 'app-root',
@@ -53,6 +54,7 @@ export class AppComponent implements OnInit {
     public readonly has_chat = this._settings.signal('chat.enabled', false);
 
     public ngOnInit(): void {
+        setMocks(mocksInit);
         this._placeos.init();
     }
 }

apps/assistant-panel/src/app/app.config.ts

@@ -8,17 +8,28 @@ import {
     ErrorHandler,
     provideZonelessChangeDetection,
 } from '@angular/core';
-import { provideRouter, withHashLocation } from '@angular/router';
+import {
+    provideRouter,
+    withHashLocation,
+    withNavigationErrorHandler,
+} from '@angular/router';
 import { provideServiceWorker } from '@angular/service-worker';
 
-import { LazySentryErrorHandler } from '@placeos/common';
+import {
+    LazySentryErrorHandler,
+    reloadOnChunkLoadError,
+} from '@placeos/common';
 import { environment } from '../environments/environment';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideZonelessChangeDetection(),
-        provideRouter(routes, withHashLocation()),
+        provideRouter(
+            routes,
+            withHashLocation(),
+            withNavigationErrorHandler((e) => reloadOnChunkLoadError(e.error)),
+        ),
         provideServiceWorker('ngsw-worker.js', {
             enabled: environment.production,
         }),