Merge branch 'main' into task/migrate-backend-logger-to-instance-pattern

CHANGELOG.md

@@ -7,10 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added an automatic refresh every 30 seconds to the users table in the admin control panel
+
 ### Changed
 
 - Refactored the backend logging to use the instance-based `Logger`
 
+### Fixed
+
+- Fixed a layout issue in the asset profile dialog of the admin control by truncating long titles
+
 ## 3.7.0 - 2026-06-02
 
 ### Added

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss

@@ -14,4 +14,8 @@
       top: 0;
     }
   }
+
+  .mat-mdc-dialog-title {
+    padding-right: 0.5rem !important;
+  }
 }

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -1,10 +1,10 @@
 <div class="d-flex flex-column h-100">
-  <div class="d-flex mb-3">
+  <h1 class="align-items-center d-flex mb-3" mat-dialog-title>
-    <h1 class="flex-grow-1 m-0" mat-dialog-title>
+    <span class="flex-grow-1 text-truncate">{{
-      <span>{{ assetProfile?.name ?? data.symbol }}</span>
+      assetProfile?.name ?? data.symbol
-    </h1>
+    }}</span>
     <button
-      class="mx-1 no-min-width px-2"
+      class="ml-1 no-min-width px-2"
       mat-button
       type="button"
       [matMenuTriggerFor]="assetProfileActionsMenu"
@@ -87,7 +87,7 @@
         <ng-container i18n>Delete</ng-container>
       </button>
     </mat-menu>
-  </div>
+  </h1>
 
   <div class="flex-grow-1" mat-dialog-content>
     <gf-line-chart

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -59,8 +59,10 @@ import {
   personOutline,
   trashOutline
 } from 'ionicons/icons';
+import ms from 'ms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { interval } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 
 @Component({
@@ -184,6 +186,15 @@ export class GfAdminUsersComponent implements OnInit {
 
   public ngOnInit() {
     this.fetchUsers();
+
+    interval(ms('30 seconds'))
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.fetchUsers({
+          pageIndex: this.paginator().pageIndex,
+          showLoading: false
+        });
+      });
   }
 
   protected formatDistanceToNow(aDateString: string) {
@@ -267,8 +278,13 @@ export class GfAdminUsersComponent implements OnInit {
     );
   }
 
-  private fetchUsers({ pageIndex }: { pageIndex: number } = { pageIndex: 0 }) {
+  private fetchUsers({
+    pageIndex = 0,
+    showLoading = true
+  }: { pageIndex?: number; showLoading?: boolean } = {}) {
+    if (showLoading) {
       this.isLoading = true;
+    }
 
     if (pageIndex === 0 && this.paginator()) {
       this.paginator().pageIndex = 0;
@@ -281,7 +297,7 @@ export class GfAdminUsersComponent implements OnInit {
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ count, users }) => {
-        this.dataSource = new MatTableDataSource(users);
+        this.dataSource.data = users;
         this.totalItems = count;
 
         this.isLoading = false;

apps/client/src/styles.scss

@@ -1,10 +1,11 @@
 @use '@angular/material' as mat;
+@use 'sass:color';
 
-@import './styles/bootstrap';
+@use './styles/bootstrap';
-@import './styles/table';
+@use './styles/table' as table;
-@import './styles/variables';
+@use './styles/variables' as variables;
 
-@import 'svgmap/style.min';
+@use 'svgmap/style.min';
 
 :root {
   --dark-background: rgb(25, 25, 25);
@@ -12,8 +13,10 @@
   --light-background: rgb(255, 255, 255);
 
   --dark-primary-text:
-    #{red($dark-primary-text)}, #{green($dark-primary-text)},
+    #{color.channel(variables.$dark-primary-text, 'red')},
-    #{blue($dark-primary-text)}, #{alpha($dark-primary-text)};
+    #{color.channel(variables.$dark-primary-text, 'green')},
+    #{color.channel(variables.$dark-primary-text, 'blue')},
+    #{color.channel(variables.$dark-primary-text, 'alpha')};
   --dark-secondary-text: 0, 0, 0, 0.54;
   --dark-accent-text: 0, 0, 0, 0.87;
   --dark-warn-text: 0, 0, 0, 0.87;
@@ -21,8 +24,10 @@
   --dark-dividers: 0, 0, 0, 0.12;
   --dark-focused: 0, 0, 0, 0.12;
   --light-primary-text:
-    #{red($light-primary-text)}, #{green($light-primary-text)},
+    #{color.channel(variables.$light-primary-text, 'red')},
-    #{blue($light-primary-text)}, #{alpha($light-primary-text)};
+    #{color.channel(variables.$light-primary-text, 'green')},
+    #{color.channel(variables.$light-primary-text, 'blue')},
+    #{color.channel(variables.$light-primary-text, 'alpha')};
   --light-secondary-text: 255, 255, 255, 0.7;
   --light-accent-text: 255, 255, 255, 1;
   --light-warn-text: 255, 255, 255, 1;
@@ -240,7 +245,7 @@ body {
     }
 
     .gf-table {
-      @include gf-table(true);
+      @include table.gf-table(true);
     }
 
     .mat-mdc-dialog-container {
@@ -353,7 +358,7 @@ ngx-skeleton-loader {
 }
 
 .gf-table {
-  @include gf-table;
+  @include table.gf-table;
 }
 
 .gf-text-wrap-balance {

libs/common/src/lib/interfaces/product.ts

@@ -13,5 +13,6 @@ export interface Product {
   pricingPerYear?: string;
   regions?: string[];
   slogan?: string;
+  url?: string;
   useAnonymously?: boolean;
 }