@chat21/chat21-ionic 3.4.30 → 3.4.32-rc1

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -83,7 +83,12 @@ import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { Project } from 'src/chat21-core/models/projects';
 import { Globals } from 'src/app/utils/globals';
 import { ProjectService } from 'src/app/services/projects/project.service';
-import { getOSCode } from 'src/app/utils/utils';
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { TriggerEvents } from 'src/app/services/triggerEvents/triggerEvents';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -108,6 +113,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   private subscriptions: Array<any>
   public tenant: string;
   public loggedUser: UserModel
+  public projectUser: ProjectUser;
   public conversationWith: string
   public conversationWithFullname: string
   public messages: Array<MessageModel> = []
@@ -137,6 +143,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public tagsCannedFilter: Array<any> = [];
   public SHOW_CANNED_RESPONSES: boolean = false
   public canShowCanned: boolean = true
+  public rolesCanned: { [key: string]: boolean }
 
   public SHOW_COPILOT_SUGGESTIONS: boolean = false;
 
@@ -171,6 +178,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   copilotQuestion: string = '';
   /**COPILOT : end */
 
+  /** TICKET: start */
+  isTicketEnabled: boolean = false;
+  /** TICKET: end */
+
   isMine = isMine
   isInfo = isInfo
   isFirstMessage = isFirstMessage
@@ -236,22 +247,25 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     public conversationHandlerBuilderService: ConversationHandlerBuilderService,
     public cannedResponsesService: CannedResponsesService,
     public imageRepoService: ImageRepoService,
+    public uploadService: UploadService,
     public presenceService: PresenceService,
     public toastController: ToastController,
     public tiledeskService: TiledeskService,
     public projectService: ProjectService,
+    public projectUsersService: ProjectUsersService,
     private networkService: NetworkService,
     private events: EventsService,
     private webSocketService: WebsocketService,
     public projectPlanUtils: ProjectPlanUtils,
+    public triggerEvents: TriggerEvents,
     private g: Globals,
   ) {
     // Change list on date change
     this.route.paramMap.subscribe((params) => {
       this.logger.log('[CONVS-DETAIL] - constructor -> params: ', params)
       this.conversationWith = params.get('IDConv')
-      this.conversationWithFullname = params.get('FullNameConv')
-      this.conv_type = params.get('Convtype')
+      this.conversationWithFullname = decodeURIComponent(params.get('FullNameConv'))
+      this.conv_type = decodeURIComponent(params.get('Convtype'))
 
       this.events.publish('supportconvid:haschanged', this.conversationWith)
     })
@@ -418,6 +432,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   ionViewDidEnter() {
     this.logger.log('[CONVS-DETAIL] > ionViewDidEnter')
     // this.info_content_child_enabled = true;
+    // Scroll to bottom to show the last message without animation
+    this.scrollToLastMessage()
   }
 
   // Unsubscibe when new page transition end
@@ -477,8 +493,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.messages = [] // list messages of conversation
     this.isFileSelected = false // indicates if a file has been selected (image to upload)
     this.isEmailEnabled = (this.appConfigProvider.getConfig().emailSection === 'true' || this.appConfigProvider.getConfig().emailSection === true) ? true : false;
+    this.isTicketEnabled = (this.appConfigProvider.getConfig().ticketSection === 'true' || this.appConfigProvider.getConfig().ticketSection === true) ? true : false;
     this.isWhatsappTemplatesEnabled = (this.appConfigProvider.getConfig().whatsappTemplatesSection === 'true' || this.appConfigProvider.getConfig().whatsappTemplatesSection === true) ? true : false;
-
+    this.fileUploadAccept = this.appConfigProvider.getConfig().fileUploadAccept
+    
     this.cannedResponsesService.initialize(appconfig.apiUrl)
 
     if (checkPlatformIsMobile()) {
@@ -507,10 +525,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     // this.initConversationsHandler(); // nk
     if (this.conversationWith) {
       this.disableTextarea = false
+      this.startConversation();
       this._getProjectIdByConversationWith(this.conversationWith)
       this.initConversationHandler()
       this.initGroupsHandler();
-      this.startConversation();
       this.initSubscriptions();
       this.getLeadDetail();
       this.initializeTyping();
@@ -521,6 +539,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   _getProjectIdByConversationWith(conversationWith: string) {
+    console.log('[CONVS-DETAIL] - _getProjectIdByConversationWith conversationWith', conversationWith, this.channelType)
     if (this.channelType !== TYPE_DIRECT && !this.conversationWith.startsWith('group-')) {
       this.tiledeskService.getProjectIdByConvRecipient(conversationWith).subscribe((res) => {
         this.logger.log('[CONVS-DETAIL] - GET PROJECTID BY CONV RECIPIENT RES + projectId', res, res.id_project)
@@ -534,7 +553,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.logger.log('[CONVS-DETAIL] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *',)
       })
     }else {
-      this.canShowCanned = false;
       this.offlineMsgEmail = false;
     }
     
@@ -545,10 +563,13 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - GET PROJECTID BY CONV RECIPIENT RES', project)
       if (project) {
         const projectId = project.id_project
-        this.canShowCanned = this.projectPlanUtils.checkPlanIsExpired(project)
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(project._id)
         this.offlineMsgEmail = this.checkOfflineMsgEmailIsEnabled(project)
         this.isCopilotEnabled = this.projectPlanUtils.checkProjectProfileFeature(project, 'copilot');
         this.fileUploadAccept = this.checkAcceptedUploadFile(project)
+        this.rolesCanned = this.checkCannedResponsesRoles()
+        this.canShowCanned = this.checkCannedResponses(project)
+        this.logger.log('[CONVS-DETAIL] this.rolesCanned ', this.canShowCanned)
       }
     }, (error) => {
       this.logger.error('[CONVS-DETAIL] - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error)
@@ -586,6 +607,40 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return this.appConfigProvider.getConfig().fileUploadAccept
   }
 
+  checkCannedResponses(project: Project): boolean {
+    let expires = this.projectPlanUtils.checkPlanIsExpired(project)
+    this.logger.log('[CONVS-DETAIL] checkCannedResponses expires ', expires)
+    if(expires){
+      return false
+    }
+
+    let hasRoleToShowCanned = this.rolesCanned[PERMISSIONS.CANNED_RESPONSES_READ]
+    this.logger.log('[CONVS-DETAIL] checkCannedResponses hasRoleToShowCanned ', hasRoleToShowCanned)
+    if(!hasRoleToShowCanned){
+      return false
+    }
+
+    return true
+  }
+
+  checkCannedResponsesRoles(): { [key: string]: boolean } {
+    const permissionKeys = [
+      'CANNED_RESPONSES_CREATE',
+      'CANNED_RESPONSES_READ',
+      'CANNED_RESPONSES_UPDATE',
+      'CANNED_RESPONSES_DELETE',
+    ] as const;
+
+    const roles: { [key: string]: boolean } = {};
+    for (const key of permissionKeys) {
+      const permission = PERMISSIONS[key];
+      roles[permission] = hasRole(this.projectUser, permission);
+    }
+
+    return roles;
+
+  }
+
   // getProjectIdSelectedConversation(conversationWith: string): string{
   //   const conversationWith_segments = conversationWith.split('-')
   //   // Removes the last element of the array if is = to the separator
@@ -669,6 +724,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       "WHATSAPP.ERROR_WHATSAPP_NOT_INSTALLED",
       "WHATSAPP.ERROR_WHATSAPP_GENERIC_ERROR",
 
+      "TICKET.OPEN_TICKET",
+      "TICKET.DESCRIPTION",
+      "TICKET.CONFIRM",
+      "TICKET.CLOSE",
+
       "COPILOT.ASK_AI",
       "COPILOT.NO_SUGGESTIONS_PRESENT",
 
@@ -1884,6 +1944,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
 
+  onOpenTicket(event) {
+    this.logger.debug('[CONVS-DETAIL] openTicketOnExternalService - conversationWith ', this.conversationWith)
+    const detailOBJ = { event: 'onOpenTicketExternally', request_id: this.conversationWith, conversation: this.conversation }
+    this.triggerEvents.triggerOnOpenTicketExternally(detailOBJ)
+  }
   // -------------- START SCROLL/RESIZE  -------------- //
   /** */
   resizeTextArea() {
@@ -1927,6 +1992,29 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+  /**
+   * Scroll to last message without animation using requestAnimationFrame
+   * This is a best practice alternative to setTimeout
+   */
+  private scrollToLastMessage() {
+    this.showIonContent = true
+    if (this.ionContentChatArea) {
+      // Use requestAnimationFrame for better performance
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          // Double RAF ensures DOM is fully rendered
+          this.ionContentChatArea.scrollToBottom(0).then(() => {
+            this.logger.log('[CONVS-DETAIL] scroll posizionato all\'ultimo messaggio')
+          }).catch((error) => {
+            this.logger.error('[CONVS-DETAIL] errore durante lo scroll:', error)
+          })
+        })
+      })
+    } else {
+      this.logger.warn('[CONVS-DETAIL] ionContentChatArea non disponibile')
+    }
+  }
+
   /**
    * detectBottom
    */

package/src/app/pages/conversations-list/conversations-list.module.ts

@@ -19,8 +19,7 @@ import { ProfileInfoPageModule } from '../profile-info/profile-info.module';
 // import { ConversationDetailPageModule } from '../conversation-detail/conversation-detail.module';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
-import { ListConversationsComponent } from 'src/app/chatlib/list-conversations-component/list-conversations/list-conversations.component';
-import { IonListConversationsComponent } from 'src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component';
+import { ListConversationsModule } from 'src/app/chatlib/list-conversations-component/list-conversations.module';
 import { HeaderConversationsList } from 'src/app/components/conversations-list/header-conversations-list/header-conversations-list.component';
 import { HeaderConversationsListArchived } from 'src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component';
 import { HeaderConversationsListUnassigned } from 'src/app/components/conversations-list/header-conversations-list-unassigned/header-conversations-list-unassigned.component';
@@ -46,14 +45,13 @@ import { MomentModule } from 'ngx-moment';
       }
     }),
     SharedModule,
-    MomentModule
+    MomentModule,
+    ListConversationsModule
   ],
   // entryComponents: [DdpHeaderComponent],
   declarations: [
     ConversationListPage,
     //******** COMPONENTS - init ********//
-    ListConversationsComponent,
-    IonListConversationsComponent,
     HeaderConversationsList,
     HeaderConversationsListArchived,
     HeaderConversationsListUnassigned,

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -7,6 +7,8 @@
     [sound_btn]="sound_btn"
     [isMobile]="isMobile"
     [isVisibleTKT]="isVisibleTKT"
+    [isVisibleCNT]="isVisibleCNT"
+    [roles]="rolesHeader"
     (onSoundChange)="onSoundChange($event)"
     (openContactsDirectory)=openContactsDirectory($event) 
     (openProfileInfo)=openProfileInfo($event)>

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -53,7 +53,10 @@ import { Globals } from 'src/app/utils/globals';
 import { TriggerEvents } from 'src/app/services/triggerEvents/triggerEvents';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { Project } from 'src/chat21-core/models/projects';
-import { getOSCode } from 'src/app/utils/utils';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
 
 @Component({
   selector: 'app-conversations-list',
@@ -82,6 +85,7 @@ export class ConversationListPage implements OnInit {
   public archived_btn: boolean
   public sound_btn: string
   public isVisibleTKT: boolean = true;
+  public isVisibleCNT: boolean = true;;
   public convertMessage = convertMessage
   private isShowMenuPage = false
   private logger: LoggerService = LoggerInstance.getInstance()
@@ -104,6 +108,9 @@ export class ConversationListPage implements OnInit {
   public isMobile: boolean = false;
   public isInitialized: boolean = false;
 
+  public projectUser: ProjectUser;
+  public rolesHeader: { [key: string]: boolean }
+
   // PROJECT AVAILABILITY INFO: start
   project: Project
   profile_name_translated: string;
@@ -130,6 +137,7 @@ export class ConversationListPage implements OnInit {
     private translateService: CustomTranslateService,
     public tiledeskService: TiledeskService,
     public tiledeskAuthService: TiledeskAuthService,
+    public projectUsersService: ProjectUsersService,
     public appConfigProvider: AppConfigProvider,
     public platform: Platform,
     public wsService: WebsocketService,
@@ -294,17 +302,19 @@ export class ConversationListPage implements OnInit {
   // ---------------------------------------------------------
   // Opens the Unassigned Conversations iframe
   // ---------------------------------------------------------
-  openUnassignedConversations(IFRAME_URL: string, event) {
+  openUnassignedConversations(IFRAME_URL: string, event: { event: string; data: ConversationModel[] }) {
+    const unassignedConversations = event?.data ?? [];
+    const params = {
+      iframe_URL: IFRAME_URL,
+      callerBtn: event.event,
+      unassignedConversations,
+      stylesMap: this.stylesMap,
+      translationMapConversation: this.translationMapConversation,
+    };
     if (checkPlatformIsMobile()) {
-      presentModal(this.modalController, UnassignedConversationsPage, {
-        iframe_URL: IFRAME_URL,
-        callerBtn: event,
-      })
+      presentModal(this.modalController, UnassignedConversationsPage, params);
     } else {
-      this.navService.push(UnassignedConversationsPage, {
-        iframe_URL: IFRAME_URL,
-        callerBtn: event,
-      })
+      this.navService.push(UnassignedConversationsPage, params);
     }
   }
 
@@ -371,6 +381,11 @@ export class ConversationListPage implements OnInit {
     // save conversationHandler in chatManager
     this.chatManager.setConversationsHandler(this.conversationsHandlerService)
     this.showPlaceholder = false
+    
+    // Hide loading spinner if there are no conversations
+    if (this.conversations.length === 0) {
+      this.loadingIsActive = false
+    }
   }
 
   // private manageStoredConversations() {
@@ -471,7 +486,7 @@ export class ConversationListPage implements OnInit {
   }
 
   listenToCurrentStoredProject() {
-    this.events.subscribe('storage:last_project', projectObjct => {
+    this.events.subscribe('storage:last_project', async(projectObjct) => {
       if (projectObjct && projectObjct !== 'undefined') {
         this.logger.log('[CONVS-LIST-PAGE] - GET STORED PROJECT ', projectObjct)
 
@@ -496,6 +511,10 @@ export class ConversationListPage implements OnInit {
         } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'enterprise') {
           this.profile_name_translated = this.translationMapHeader.get('PaydPlanNameEnterprise');
         }
+
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(this.project._id)
+        this.rolesHeader = this.checkCannedResponsesRoles();
+        this.logger.log('[CONVS-LIST-PAGE] - GET PROJECT USER ROLES ', this.rolesHeader)
       }
     })
   }
@@ -631,8 +650,24 @@ export class ConversationListPage implements OnInit {
     const public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
     this.logger.log('[CONVS-LIST-PAGE] AppConfigService getAppConfig public_Key', public_Key)
     this.isVisibleTKT = getOSCode("TKT", public_Key);
+    this.isVisibleCNT = getOSCode("CNT", public_Key);
   }
 
+  checkCannedResponsesRoles(): { [key: string]: boolean } {
+      const permissionKeys = [
+        'LEADS_READ',
+      ] as const;
+  
+      const roles: { [key: string]: boolean } = {};
+      for (const key of permissionKeys) {
+        const permission = PERMISSIONS[key];
+        roles[permission] = hasRole(this.projectUser, permission);
+      }
+  
+      return roles;
+  
+    }
+
   onBackButtonFN(event) {
     this.conversationType = 'active'
 
@@ -883,6 +918,10 @@ export class ConversationListPage implements OnInit {
 
     this.logger.log('[CONVS-LIST-PAGE] navigateByUrl this.uidConvSelected ', this.uidConvSelected)
 
+    const queryParams = this.route.snapshot.queryParams;
+    const queryString = new URLSearchParams(queryParams).toString();
+    
+
     this.setUidConvSelected(uidConvSelected, converationType)
     if (checkPlatformIsMobile()) {
       this.logger.log('[CONVS-LIST-PAGE] checkPlatformIsMobile(): ', checkPlatformIsMobile())
@@ -900,6 +939,7 @@ export class ConversationListPage implements OnInit {
       if (this.conversationSelected && this.conversationSelected.conversation_with_fullname) {
         pageUrl = 'conversation-detail/' + this.uidConvSelected + '/' + encodeURIComponent(this.conversationSelected.conversation_with_fullname) + '/' + converationType
       }
+      pageUrl += queryString ? `?${queryString}` : '';
       this.logger.log('[CONVS-LIST-PAGE] setUidConvSelected navigateByUrl--->: ', pageUrl)
       // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
       this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29'), {replaceUrl: true})

package/src/app/pages/unassigned-conversations/unassigned-conversations.module.ts

@@ -1,22 +1,34 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
 
 import { IonicModule } from '@ionic/angular';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { createTranslateLoader } from 'src/chat21-core/utils/utils';
 
 import { UnassignedConversationsPageRoutingModule } from './unassigned-conversations-routing.module';
 
 import { UnassignedConversationsPage } from './unassigned-conversations.page';
+import { ListConversationsModule } from 'src/app/chatlib/list-conversations-component/list-conversations.module';
+import { MomentModule } from 'ngx-moment';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    UnassignedConversationsPageRoutingModule
+    UnassignedConversationsPageRoutingModule,
+    MomentModule,
+    ListConversationsModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: createTranslateLoader,
+        deps: [HttpClient],
+      },
+    }),
   ],
-  declarations: [
-    UnassignedConversationsPage,
-  ]
+  declarations: [UnassignedConversationsPage]
 })
 export class UnassignedConversationsPageModule {}

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.html

@@ -1,27 +1,51 @@
-<ion-header>
-  <ion-toolbar [class.mobile]="isMobile">
-    <ion-buttons slot="start">
-      <ion-button ion-button fill="clear" (click)="onClose()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title *ngIf="callerBtn !== 'pinbtn'" style="font-size: 16px;">
-      {{translationMap?.get('UnassignedConversations') }}
-    </ion-title>
-    <ion-title *ngIf="callerBtn === 'pinbtn'" style="font-size: 16px;">
-      {{translationMap?.get('PIN_A_PROJECT') }}
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
+<ion-toolbar [class.mobile]="isMobile">
+  <ion-title *ngIf="callerBtn !== 'pinbtn'" style="font-size: 16px;">
+    {{translationMap?.get('UnassignedConversations') }}
+  </ion-title>
+  <ion-title *ngIf="callerBtn === 'pinbtn'" style="font-size: 16px;">
+    {{translationMap?.get('PIN_A_PROJECT') }}
+  </ion-title>
+
+  <ion-buttons slot="end">
+    <ion-button ion-button fill="clear" (click)="onClose()">
+      <ion-icon slot="icon-only" name="close"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+</ion-toolbar>
 
 <ion-content overflow-scroll="true" id="iframe-ion-content"
   [ngClass]="{'ion-content-black-background' : isProjectsForPanel === true}">
-  <!-- <iframe  id="i_frame"  style="width:100%; height:99%" frameBorder="0" allowfullscreen [src]="unassigned_convs_url_sanitized"></iframe> -->
-  <div class="loader-spinner-wpr">
+  <div *ngIf="callerBtn === 'pinbtn'" class="loader-spinner-wpr">
     <div id="loader" class="loader">
       <svg class="circular" viewBox="25 25 50 50">
         <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
       </svg>
     </div>
   </div>
+
+  <div *ngIf="callerBtn !== 'pinbtn'" class="list-avatar-page">
+    <ion-list>
+      <ng-container *ngIf="unassignedConversationsList.length > 0; else noConvs">
+        <ion-list-conversations
+          [listConversations]="unassignedConversationsList"
+          [stylesMap]="stylesMap"
+          [translationMap]="translationMapConversation"
+          [uidConvSelected]="uidConvSelected"
+          (onConversationSelected)="onConversationSelected($event)"
+          (onCloseConversation)="onCloseConversation($event)"
+          (onJoinConversation)="onJoinConversation($event)"
+          (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)">
+        </ion-list-conversations>
+      </ng-container>
+      <ng-template #noConvs>
+        <ion-item id="no-convs" class="ion-text-center" lines="none">
+          <ion-label class="ion-text-wrap" color="medium">
+            {{ 'LABEL_MSG_PUSH_START_CHAT' | translate }}
+          </ion-label>
+        </ion-item>
+      </ng-template>
+    </ion-list>
+  </div>
 </ion-content>

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.scss

@@ -1,5 +1,6 @@
 ion-toolbar {
   height: var(--header-height);   
+  --background: transparent;
   &:not(.mobile){
       --background: var(--list-bkg-color);
       border: none;
@@ -20,7 +21,7 @@ ion-content {
   // Forcing `--overflow: hidden` breaks scrolling (Chrome >= 144 is stricter here).
   --overflow: auto;
   &:not(.mobile){
-    --background: var(--list-bkg-color);
+    --background: var(--bacis-white);
   }
 }
 
@@ -224,3 +225,11 @@ ion-content::part(scroll) {
 .hide-stretchspinner {
   display: none;
 }
+
+// -------------------------------------------------
+// List avatar page - full viewport height
+// -------------------------------------------------
+.list-avatar-page {
+  min-height: calc(100vh - var(--header-height, 56px));
+  height: 100%;
+}