MOBILE-3631 messages: Add splitview to messages pages

src/addons/badges/pages/user-badges/user-badges.html

@@ -17,7 +17,7 @@
 
         <ion-list *ngIf="badges && badges.length"  class="ion-no-margin">
             <ion-item class="ion-text-wrap" *ngFor="let badge of badges" [title]="badge.name"
-                (click)="loadIssuedBadge(badge.uniquehash)" [class.core-split-item-selected]="badge.uniquehash == badgeHash">
+                (click)="loadIssuedBadge(badge.uniquehash)" [class.core-selected-item]="badge.uniquehash == badgeHash">
                 <ion-avatar slot="start">
                     <img [src]="badge.badgeurl" [alt]="badge.name" core-external-content>
                 </ion-avatar>

src/addons/calendar/pages/list/list.html

@@ -43,7 +43,7 @@
                         <ion-label>{{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}</ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap" [title]="event.name" (click)="gotoEvent(event.id)"
-                    [class.core-split-item-selected]="event.id == eventId" class="addon-calendar-event"
+                    [class.core-selected-item]="event.id == eventId" class="addon-calendar-event"
                     [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                         <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" slot="start" class="core-module-icon">
                         <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start">

src/addons/messages/messages-lazy.module.ts

@@ -13,13 +13,19 @@
 // limitations under the License.
 
 import { Injector, NgModule } from '@angular/core';
-import { RouterModule, ROUTES, Routes } from '@angular/router';
+import { Route, RouterModule, ROUTES, Routes } from '@angular/router';
 
 import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
 import { AddonMessagesContactsRoutingModule } from './pages/contacts/messages-contacts-routing.module';
 import { AddonMessagesIndexRoutingModule } from './pages/index-35/messages-index-routing.module';
 import { AddonMessagesSettingsHandlerService } from './services/handlers/settings';
 
+export const discussionRoute: Route = {
+    path: 'discussion',
+    loadChildren: () => import('./pages/discussion/discussion.module')
+        .then(m => m.AddonMessagesDiscussionPageModule),
+};
+
 function buildRoutes(injector: Injector): Routes {
     return [
         {
@@ -31,11 +37,7 @@ function buildRoutes(injector: Injector): Routes {
             loadChildren: () => import('./pages/group-conversations/group-conversations.module')
                 .then(m => m.AddonMessagesGroupConversationsPageModule),
         },
-        {
+        discussionRoute,
-            path: 'discussion',
-            loadChildren: () => import('./pages/discussion/discussion.module')
-                .then(m => m.AddonMessagesDiscussionPageModule),
-        },
         {
             path: 'search',
             loadChildren: () => import('./pages/search/search.module')

src/addons/messages/pages/contacts-35/contacts.html

@@ -22,9 +22,9 @@
                 </ion-item-divider>
                 <ng-container *ngFor="let contact of contacts[contactType]">
                     <!-- Don't show deleted users -->
-                    <ion-item class="ion-text-wrap" *ngIf="contact.profileimageurl || contact.profileimageurlsmall"
+                    <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngIf="contact.profileimageurl || contact.profileimageurlsmall"
-                        [title]="contact.fullname" (click)="gotoDiscussion(contact.id)"
+                        [title]="contact.fullname" (click)="gotoDiscussion(contact.id)" detail
-                        [class.core-split-item-selected]="contact.id == discussionUserId" class="addon-messages-conversation-item">
+                        [class.core-selected-item]="contact.id == discussionUserId">
                         <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus"></core-user-avatar>
                         <ion-label><h2>{{ contact.fullname }}</h2></ion-label>
                     </ion-item>

src/addons/messages/pages/contacts-confirmed/contacts-confirmed.html

@@ -4,14 +4,14 @@
     </ion-refresher>
     <core-loading [hideUntil]="loaded" class="core-loading-center">
         <ion-list  class="ion-no-margin">
-            <ion-item class="ion-text-wrap" *ngFor="let contact of contacts" [title]="contact.fullname"
+            <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let contact of contacts"
-                (click)="selectUser(contact.id)"
+                [title]="contact.fullname" (click)="selectUser(contact.id)" detail
-                [class.core-split-item-selected]="contact.id == selectedUserId" class="addon-messages-conversation-item">
+                [class.core-selected-item]="contact.id == selectedUserId">
                 <core-user-avatar slot="start" core-user-avatar [user]="contact" [checkOnline]="contact.showonlinestatus"
                     [linkProfile]="false"></core-user-avatar>
                 <ion-label>
                     <h2>
-                        {{ contact.fullname }}
+                        <core-format-text [text]="contact.fullname" contextLevel="system" [contextInstanceId]="0"></core-format-text>
                         <ion-icon *ngIf="contact.isblocked" name="fas-user-slash" slot="end">
                         </ion-icon>
                     </h2>

src/addons/messages/pages/contacts-confirmed/contacts-confirmed.page.ts

@@ -24,7 +24,7 @@ import {
 } from '../../services/messages';
 import { CoreDomUtils } from '@services/utils/dom';
 import { IonRefresher } from '@ionic/angular';
-import { CoreNavigator } from '@services/navigator';
+import { CoreScreen } from '@services/screen';
 
 /**
  * Component that displays the list of confirmed contacts.
@@ -32,6 +32,7 @@ import { CoreNavigator } from '@services/navigator';
 @Component({
     selector: 'addon-messages-confirmed-contacts',
     templateUrl: 'contacts-confirmed.html',
+    styleUrls: ['../../messages-common.scss'],
 })
 export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
 
@@ -44,8 +45,6 @@ export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
     protected memberInfoObserver: CoreEventObserver;
 
     constructor() {
-        // this.onUserSelected = new EventEmitter();
-
         // Update block status of a user.
         this.memberInfoObserver = CoreEvents.on<AddonMessagesMemberInfoChangedEventData>(
             AddonMessagesProvider.MEMBER_INFO_CHANGED_EVENT,
@@ -74,7 +73,7 @@ export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
     async ngOnInit(): Promise<void> {
         try {
             await this.fetchData();
-            if (this.contacts.length) {
+            if (this.contacts.length && CoreScreen.instance.isTablet) {
                 this.selectUser(this.contacts[0].id, true);
             }
         } finally {
@@ -144,15 +143,13 @@ export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
     selectUser(userId: number, onInit: boolean = false): void {
         this.selectedUserId = userId;
 
-        const data: AddonMessagesSplitViewLoadContactsEventData = {
+        CoreEvents.trigger<AddonMessagesSplitViewLoadContactsEventData>(
+            AddonMessagesProvider.SPLIT_VIEW_LOAD_CONTACTS_EVENT,
+            {
                 userId,
                 onInit,
-        };
+            },
-
+        );
-        CoreEvents.trigger(AddonMessagesProvider.SPLIT_VIEW_LOAD_CONTACTS_EVENT, data);
-
-        // @todo: Check if split view is visible before
-        CoreNavigator.instance.navigateToSitePath('discussion', { params : { userId } });
     }
 
     /**

src/addons/messages/pages/contacts-requests/contacts-requests.html

@@ -4,12 +4,12 @@
     </ion-refresher>
     <core-loading [hideUntil]="loaded" class="core-loading-center">
         <ion-list  class="ion-no-margin">
-            <ion-item class="ion-text-wrap" *ngFor="let request of requests" [title]="request.fullname"
+            <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
-                (click)="selectUser(request.id)" [class.core-split-item-selected]="request.id == selectedUserId"
+                [title]="request.fullname" (click)="selectUser(request.id)"
-                class="addon-messages-conversation-item">
+                [class.core-selected-item]="request.id == selectedUserId" detail>
                 <core-user-avatar slot="start" [user]="request" [linkProfile]="false"></core-user-avatar>
                 <ion-label>
-                    <h2>{{ request.fullname }}</h2>
+                    <core-format-text [text]="request.fullname" contextLevel="system" [contextInstanceId]="0"></core-format-text>
                     <p *ngIf="!request.iscontact">
                         {{ 'addon.messages.wouldliketocontactyou' | translate }}
                     </p>

src/addons/messages/pages/contacts-requests/contacts-requests.page.ts

@@ -25,6 +25,7 @@ import {
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreNavigator } from '@services/navigator';
 import { IonRefresher } from '@ionic/angular';
+import { CoreScreen } from '@services/screen';
 
 /**
  * Component that displays the list of contact requests.
@@ -32,6 +33,7 @@ import { IonRefresher } from '@ionic/angular';
 @Component({
     selector: 'addon-messages-contact-requests',
     templateUrl: 'contacts-requests.html',
+    styleUrls: ['../../messages-common.scss'],
 })
 export class AddonMessagesContactsRequestsPage implements OnInit, OnDestroy {
 
@@ -67,7 +69,7 @@ export class AddonMessagesContactsRequestsPage implements OnInit, OnDestroy {
     async ngOnInit(): Promise<void> {
         try {
             await this.fetchData();
-            if (this.requests.length) {
+            if (this.requests.length && CoreScreen.instance.isTablet) {
                 this.selectUser(this.requests[0].id, true);
             }
         } finally {
@@ -146,9 +148,6 @@ export class AddonMessagesContactsRequestsPage implements OnInit, OnDestroy {
         };
 
         CoreEvents.trigger(AddonMessagesProvider.SPLIT_VIEW_LOAD_CONTACTS_EVENT, data);
-
-        // @todo: Check if split view is visible before
-        CoreNavigator.instance.navigateToSitePath('discussion', { params : { userId } });
     }
 
     /**

src/addons/messages/pages/contacts/contacts.html

@@ -13,7 +13,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<!-- @todo <core-split-view>-->
 <ion-content>
+    <core-split-view>
         <core-tabs [tabs]="tabs" hideUntil="true"></core-tabs>
+    </core-split-view>
 </ion-content>

src/addons/messages/pages/contacts/contacts.module.ts

@@ -17,19 +17,34 @@ import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, ROUTES, Routes } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { conditionalRoutes, resolveModuleRoutes } from '@/app/app-routing.module';
+import { discussionRoute } from '@addons/messages/messages-lazy.module';
+import { CoreScreen } from '@services/screen';
 
 import { CoreSharedModule } from '@/core/shared.module';
 
 import { ADDON_MESSAGES_CONTACTS_ROUTES } from './messages-contacts-routing.module';
 import { AddonMessagesContactsPage } from './contacts.page';
 import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
-import { resolveModuleRoutes } from '@/app/app-routing.module';
 
+// @todo mix both routes to get messages/contacts/requests/discussion and messages/contacts/confirmed/discussion working
 const routes: Routes = [
     {
-        path: '',
+        matcher: segments => {
-        component: AddonMessagesContactsPage,
+            const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
+
+            return matches ? { consumed: [] } : null;
         },
+        component: AddonMessagesContactsPage,
+        children: conditionalRoutes([
+            {
+                path: '',
+                pathMatch: 'full',
+            },
+            discussionRoute,
+        ], () => CoreScreen.instance.isTablet),
+    },
+    ...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
 ];
 
 function buildRoutes(injector: Injector): Routes {

src/addons/messages/pages/contacts/contacts.page.ts

@@ -23,7 +23,7 @@ import {
 } from '../../services/messages';
 import { CoreTab } from '@components/tabs/tabs';
 import { CoreNavigator } from '@services/navigator';
-// @todo import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import { CoreScreen } from '@services/screen';
 
 /**
  * Page that displays contacts and contact requests.
@@ -34,15 +34,13 @@ import { CoreNavigator } from '@services/navigator';
 })
 export class AddonMessagesContactsPage implements OnInit, OnDestroy {
 
-    // @todo @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
-
     protected contactsTab: CoreTab =         {
         id: 'contacts-confirmed',
         class: '',
         title: 'addon.messages.contacts',
         icon: 'fas-address-book',
         enabled: true,
-        page: 'main/messages/contacts/confirmed',
+        page: '/main/messages/contacts/confirmed',
     };
 
     protected requestsTab: CoreTab = {
@@ -51,7 +49,7 @@ export class AddonMessagesContactsPage implements OnInit, OnDestroy {
         title: 'addon.messages.requests',
         icon: 'fas-user-plus',
         enabled: true,
-        page: 'main/messages/contacts/requests',
+        page: '/main/messages/contacts/requests',
         badge: '',
     };
 
@@ -83,8 +81,8 @@ export class AddonMessagesContactsPage implements OnInit, OnDestroy {
             (data) => {
                 this.selectUser(data.userId, data.onInit);
             },
-            this.siteId,
         );
+
     }
 
     /**
@@ -108,19 +106,28 @@ export class AddonMessagesContactsPage implements OnInit, OnDestroy {
      * @param onInit Whether the contact was selected on initial load.
      */
     selectUser(userId: number, onInit = false): void {
-        /* @todo if (userId == this.selectedUserId && this.splitviewCtrl.isOn()) {
+        if (userId == this.selectedUserId && CoreScreen.instance.isTablet) {
             // No user conversation to open or it is already opened.
             return;
         }
 
-        if (onInit && !this.splitviewCtrl.isOn()) {
+        if (onInit && CoreScreen.instance.isMobile) {
             // Do not open a conversation by default when split view is not visible.
             return;
-        }*/
+        }
 
         this.selectedUserId = userId;
-        // @todo this.splitviewCtrl.push('AddonMessagesDiscussionPage', { userId });
+
-        CoreNavigator.instance.navigateToSitePath('discussion', { params : { userId } });
+        // @todo it does not seem to work load anything.
+        let path = 'discussion';
+        if (CoreScreen.instance.isMobile) {
+            path = '../../' + path;
+        } else {
+            const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/contacts/**/discussion');
+            path = (splitViewLoaded ? '../' : '') + path;
+        }
+
+        CoreNavigator.instance.navigate(path, { params : { userId } });
     }
 
     /**

src/addons/messages/pages/discussion/discussion.page.ts

@@ -30,6 +30,7 @@ import {
     AddonMessagesNewMessagedEventData,
     AddonMessagesUpdateConversationListEventData,
     AddonMessagesConversationMessageFormatted,
+    AddonMessagesOpenConversationEventData,
 } from '../../services/messages';
 import { AddonMessagesOffline } from '../../services/messages-offline';
 import { AddonMessagesSync, AddonMessagesSyncEvents, AddonMessagesSyncProvider } from '../../services/messages-sync';
@@ -51,7 +52,6 @@ import { ActivatedRoute } from '@angular/router';
 import {
     AddonMessagesOfflineMessagesDBRecordFormatted,
 } from '@addons/messages/services/database/messages';
-// @todo import { CoreSplitViewComponent } from '@components/split-view/split-view';
 
 /**
  * Page that displays a message discussion page.
@@ -119,9 +119,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
 
     constructor(
         protected route: ActivatedRoute,
-        // @todo @Optional() private svComponent: CoreSplitViewComponent,
     ) {
-
         this.siteId = CoreSites.instance.getCurrentSiteId();
         this.currentUserId = CoreSites.instance.getCurrentSiteUserId();
         this.groupMessagingEnabled = AddonMessages.instance.isGroupMessagingEnabled();
@@ -167,16 +165,19 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
      */
     async ngOnInit(): Promise<void> {
 
-        this.route.queryParams.subscribe(params => {
+        this.route.queryParams.subscribe(async params => {
             // Disable the profile button if we're already coming from a profile.
             const backViewPage = CoreNavigator.instance.getPreviousPath();
             this.showInfo = !backViewPage || !CoreTextUtils.instance.matchesGlob(backViewPage, '**/user/profile');
 
-            this.conversationId = params['conversationId'] || undefined;
+            this.loaded = false;
-            this.userId = params['userId'] || undefined;
+            this.conversationId = parseInt(params['conversationId'], 10) || undefined;
+            this.userId = parseInt(params['userId'], 10) || undefined;
             this.showKeyboard = !!params['showKeyboard'];
 
-            this.fetchData();
+            await this.fetchData();
+
+            this.scrollToBottom();
         });
     }
 
@@ -1293,24 +1294,26 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
 
             await modal.present();
 
-            const userId = await modal.onDidDismiss();
+            const result = await modal.onDidDismiss();
+
+            if (typeof result.data.userId != 'undefined') {
+                const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/**/discussion');
 
-            if (typeof userId != 'undefined') {
                 // Open user conversation.
-                /* @todo if (this.svComponent) {
+                if (splitViewLoaded) {
                     // Notify the left pane to load it, this way the right conversation will be highlighted.
                     CoreEvents.trigger<AddonMessagesOpenConversationEventData>(
                         AddonMessagesProvider.OPEN_CONVERSATION_EVENT,
-                        { userId: userId },
+                        { userId: result.data.userId },
-                        this.siteId);
+                        this.siteId,
-                } else {*/
+                    );
+                } else {
                     // Open the discussion in a new view.
-                CoreNavigator.instance.navigateToSitePath('/messages/discussion', { params: { userId } });
+                    CoreNavigator.instance.navigateToSitePath('/messages/discussion', { params: { userId: result.data.userId } });
-                // }
+                }
             }
         } else {
             // Open the user profile.
-            // @todo const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
             CoreNavigator.instance.navigateToSitePath('/user/profile', { params: { userId: this.userId } });
         }
     }

src/addons/messages/pages/discussions-35/discussions.html

@@ -18,7 +18,7 @@
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let result of search.results" [title]="result.fullname"
                 (click)="gotoDiscussion(result.userid, result.messageid)"
-                [class.core-split-item-selected]="result.userid == discussionUserId" class="addon-message-discussion">
+                [class.core-selected-item]="result.userid == discussionUserId" class="addon-message-discussion">
                 <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus"></core-user-avatar>
                 <ion-label>
                         <h2>{{ result.fullname }}</h2>
@@ -31,7 +31,7 @@
         <ion-list *ngIf="!search.showResults"  class="ion-no-margin">
             <ion-item class="ion-text-wrap" *ngFor="let discussion of discussions" [title]="discussion.fullname"
             (click)="gotoDiscussion(discussion.message!.user)"
-            [class.core-split-item-selected]="discussion.message!.user == discussionUserId" class="addon-message-discussion">
+            [class.core-selected-item]="discussion.message!.user == discussionUserId" class="addon-message-discussion">
                 <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
                 <ion-label>
                     <h2>{{ discussion.fullname }}</h2>

src/addons/messages/pages/group-conversations/group-conversations.html

@@ -17,8 +17,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<!-- @todo <core-split-view> -->
 <ion-content class="core-expand-max">
+    <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
@@ -90,11 +90,12 @@
 
             </ion-list>
         </core-loading>
+    </core-split-view>
 </ion-content>
 
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
-    <ion-item class="ion-text-wrap" *ngFor="let conversation of conversations" [title]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" class="addon-message-discussion" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
+    <ion-item class="ion-text-wrap" *ngFor="let conversation of conversations" [title]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-selected-item]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" class="addon-message-discussion" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
         <!-- Group conversation image. -->
         <ion-avatar slot="start" *ngIf="conversation.type == typeGroup">
             <img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content onError="this.src='assets/img/group-avatar.png'">

src/addons/messages/pages/group-conversations/group-conversations.module.ts

@@ -17,16 +17,32 @@ import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { conditionalRoutes } from '@/app/app-routing.module';
+import { discussionRoute } from '@addons/messages/messages-lazy.module';
+import { CoreScreen } from '@services/screen';
 
 import { CoreSharedModule } from '@/core/shared.module';
 
 import { AddonMessagesGroupConversationsPage } from './group-conversations.page';
 
+
 const routes: Routes = [
     {
-        path: '',
+        matcher: segments => {
-        component: AddonMessagesGroupConversationsPage,
+            const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
+
+            return matches ? { consumed: [] } : null;
         },
+        component: AddonMessagesGroupConversationsPage,
+        children: conditionalRoutes([
+            {
+                path: '',
+                pathMatch: 'full',
+            },
+            discussionRoute,
+        ], () => CoreScreen.instance.isTablet),
+    },
+    ...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
 ];
 
 @NgModule({

src/addons/messages/pages/group-conversations/group-conversations.page.ts

@@ -43,7 +43,7 @@ import {
     AddonMessagesOfflineMessagesDBRecordFormatted,
 } from '@addons/messages/services/database/messages';
 import { AddonMessagesSettingsHandlerService } from '@addons/messages/services/handlers/settings';
-// import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import { CoreScreen } from '@services/screen';
 
 /**
  * Page that displays the list of conversations, including group conversations.
@@ -55,7 +55,6 @@ import { AddonMessagesSettingsHandlerService } from '@addons/messages/services/h
 })
 export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
 
-    // @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
     @ViewChild(IonContent) content?: IonContent;
     @ViewChild('favlist') favListEl?: ElementRef;
     @ViewChild('grouplist') groupListEl?: ElementRef;
@@ -110,7 +109,6 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
     constructor(
         protected route: ActivatedRoute,
     ) {
-
         this.loadingMessage = Translate.instance.instant('core.loading');
         this.siteId = CoreSites.instance.getCurrentSiteId();
         this.currentUserId = CoreSites.instance.getCurrentSiteUserId();
@@ -284,8 +282,10 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.route.queryParams.subscribe(async params => {
             // Conversation to load.
-            this.conversationId = params['conversationId'] || undefined;
+            this.conversationId = params['conversationId'] ? parseInt(params['conversationId'], 10) : undefined;
-            this.discussionUserId = !this.conversationId && (params['discussionUserId'] || undefined);
+            if (!this.conversationId) {
+                this.discussionUserId = params['discussionUserId'] ? parseInt(params['discussionUserId'], 10) : undefined;
+            }
 
             if (this.conversationId || this.discussionUserId) {
                 // There is a discussion to load, open the discussion in a new state.
@@ -293,7 +293,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
             }
 
             await this.fetchData();
-            /* @todo  if (!this.conversationId && !this.discussionUserId && this.splitviewCtrl.isOn()) {
+            if (!this.conversationId && !this.discussionUserId && CoreScreen.instance.isTablet) {
                 // Load the first conversation.
                 let conversation: AddonMessagesConversationForList;
                 const expandedOption = this.getExpandedOption();
@@ -305,7 +305,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
                         this.gotoConversation(conversation.id);
                     }
                 }
-            }*/
+            }
         });
     }
 
@@ -368,10 +368,12 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
      * @return Promise resolved when done.
      */
     protected async fetchDataForExpandedOption(): Promise<void> {
+        if (typeof this.favourites.expanded == 'undefined') {
             // Calculate which option should be expanded initially.
             this.favourites.expanded = this.favourites.count != 0 && !this.group.unread && !this.individual.unread;
             this.group.expanded = !this.favourites.expanded && this.group.count != 0 && !this.individual.unread;
             this.individual.expanded = !this.favourites.expanded && !this.group.expanded;
+        }
 
         this.loadCurrentListElement();
 
@@ -508,7 +510,6 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
      * Navigate to contacts view.
      */
     gotoContacts(): void {
-        // @todo this.splitviewCtrl.getMasterNav().push('AddonMessagesContactsPage');
         CoreNavigator.instance.navigateToSitePath('contacts');
 
     }
@@ -524,23 +525,26 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
         this.selectedConversationId = conversationId;
         this.selectedUserId = userId;
 
-        const params: Params = {
+        const params: Params = {};
-            conversationId: conversationId,
+        if (conversationId) {
-            userId: userId,
+            params.conversationId = conversationId;
-        };
+        }
+        if (userId) {
+            params.userId = userId;
+        }
         if (messageId) {
             params.message = messageId;
         }
 
-        // @todo this.splitviewCtrl.push
+        const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/group-conversations/discussion');
-        CoreNavigator.instance.navigateToSitePath('discussion', { params });
+        const path = (splitViewLoaded ? '../' : '') + 'discussion';
+        CoreNavigator.instance.navigate(path, { params });
     }
 
     /**
      * Navigate to message settings.
      */
     gotoSettings(): void {
-        // @todo this.splitviewCtrl.push
         CoreNavigator.instance.navigateToSitePath(AddonMessagesSettingsHandlerService.PAGE_NAME);
     }
 

src/addons/messages/pages/index-35/index.html

@@ -10,8 +10,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<core-split-view>
 <ion-content>
+    <core-split-view>
         <core-tabs [tabs]="tabs" hideUntil="true"></core-tabs>
-    </ion-content>
     </core-split-view>
+</ion-content>

src/addons/messages/pages/index-35/index.module.ts

@@ -17,19 +17,34 @@ import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, ROUTES, Routes } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { conditionalRoutes, resolveModuleRoutes } from '@/app/app-routing.module';
+import { discussionRoute } from '@addons/messages/messages-lazy.module';
+import { CoreScreen } from '@services/screen';
 
 import { CoreSharedModule } from '@/core/shared.module';
 
 import { AddonMessagesIndex35Page } from './index.page';
 import { ADDON_MESSAGES_INDEX_ROUTES } from './messages-index-routing.module';
 import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
-import { resolveModuleRoutes } from '@/app/app-routing.module';
 
+// @todo mix both routes to get messages/index/discussions/discussion and messages/index/contacts/discussion working
 const routes: Routes = [
     {
-        path: '',
+        matcher: segments => {
-        component: AddonMessagesIndex35Page,
+            const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
+
+            return matches ? { consumed: [] } : null;
         },
+        component: AddonMessagesIndex35Page,
+        children: conditionalRoutes([
+            {
+                path: '',
+                pathMatch: 'full',
+            },
+            discussionRoute,
+        ], () => CoreScreen.instance.isTablet),
+    },
+    ...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
 ];
 
 function buildRoutes(injector: Injector): Routes {

src/addons/messages/pages/index-35/index.page.ts

@@ -19,7 +19,7 @@ import { CoreTab } from '@components/tabs/tabs';
 import { Params } from '@angular/router';
 import { AddonMessagesProvider, AddonMessagesSplitViewLoadIndexEventData } from '../../services/messages';
 import { CoreNavigator } from '@services/navigator';
-// import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import { CoreScreen } from '@services/screen';
 
 /**
  * Page that displays the messages index page.
@@ -30,8 +30,6 @@ import { CoreNavigator } from '@services/navigator';
 })
 export class AddonMessagesIndex35Page implements OnDestroy {
 
-    // @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
-
     tabs: CoreTab[] = [
         {
             id: 'discussions-35',
@@ -55,19 +53,16 @@ export class AddonMessagesIndex35Page implements OnDestroy {
     protected siteId: string;
 
     constructor() {
-
         this.siteId = CoreSites.instance.getCurrentSiteId();
 
         // Update split view or navigate.
         this.loadSplitViewObserver = CoreEvents.on<AddonMessagesSplitViewLoadIndexEventData>(
             AddonMessagesProvider.SPLIT_VIEW_LOAD_INDEX_EVENT,
             (data) => {
-                if (data.discussion /* @todo && (this.splitviewCtrl.isOn() || !data.onlyWithSplitView)*/) {
+                if (data.discussion && (CoreScreen.instance.isTablet || !data.onlyWithSplitView)) {
                     this.gotoDiscussion(data.discussion, data.message);
                 }
             },
-
-            this.siteId,
         );
     }
 
@@ -86,9 +81,16 @@ export class AddonMessagesIndex35Page implements OnDestroy {
             params.message = messageId;
         }
 
-        // @todo
+        let path = 'discussion';
-        // this.splitviewCtrl.push('discussion', { params });
+        if (CoreScreen.instance.isMobile) {
-        CoreNavigator.instance.navigateToSitePath('discussion', { params });
+            path = '../../' + path;
+        } else {
+            const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/index/**/discussion');
+            path = (splitViewLoaded ? '../' : '') + path;
+        }
+
+        CoreNavigator.instance.navigate(path, { params });
+
     }
 
 

src/addons/messages/pages/search/search.html

@@ -10,8 +10,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<!-- @todo <core-split-view>-->
 <ion-content>
+    <core-split-view>
         <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off"
             [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"  searchArea="AddonMessagesSearch"></core-search-box>
 
@@ -30,6 +30,7 @@
                 icon="fas-search" [message]="'core.noresults' | translate">
             </core-empty-box>
         </core-loading>
+    </core-split-view>
 </ion-content>
 
 <!-- Template to render a list of results -->
@@ -41,8 +42,8 @@
 
         <!-- List of results -->
         <ion-item class="ion-text-wrap" *ngFor="let result of item.results" [title]="result.fullname"
-            (click)="openConversation(result)" [class.core-split-item-selected]="result == selectedResult"
+            (click)="openConversation(result)" [class.core-selected-item]="result == selectedResult"
-            class="addon-message-discussion">
+            class="addon-message-discussion" detail>
             <core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false"></core-user-avatar>
             <ion-label>
                 <h2>

src/addons/messages/pages/search/search.module.ts

@@ -17,6 +17,9 @@ import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { CoreScreen } from '@services/screen';
+import { conditionalRoutes } from '@/app/app-routing.module';
+import { discussionRoute } from '@addons/messages/messages-lazy.module';
 
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreSearchComponentsModule } from '@features/search/components/components.module';
@@ -25,9 +28,21 @@ import { AddonMessagesSearchPage } from './search.page';
 
 const routes: Routes = [
     {
-        path: '',
+        matcher: segments => {
-        component: AddonMessagesSearchPage,
+            const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
+
+            return matches ? { consumed: [] } : null;
         },
+        component: AddonMessagesSearchPage,
+        children: conditionalRoutes([
+            {
+                path: '',
+                pathMatch: 'full',
+            },
+            discussionRoute,
+        ], () => CoreScreen.instance.isTablet),
+    },
+    ...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
 ];
 
 @NgModule({

src/addons/messages/pages/search/search.page.ts

@@ -26,7 +26,7 @@ import { CoreDomUtils } from '@services/utils/dom';
 import { CoreApp } from '@services/app';
 import { CoreNavigator } from '@services/navigator';
 import { Params } from '@angular/router';
-// @todo import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import { CoreScreen } from '@services/screen';
 
 /**
  * Page for searching users.
@@ -70,8 +70,6 @@ export class AddonMessagesSearchPage implements OnDestroy {
 
     protected memberInfoObserver: CoreEventObserver;
 
-    // @todo @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
-
     constructor() {
         // Update block status of a user.
         this.memberInfoObserver = CoreEvents.on<AddonMessagesMemberInfoChangedEventData>(
@@ -108,7 +106,12 @@ export class AddonMessagesSearchPage implements OnDestroy {
     clearSearch(): void {
         this.query = '';
         this.displayResults = false;
-        // @todo this.splitviewCtrl.emptyDetails();
+
+        // Empty details.
+        const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/search/discussion');
+        if (splitViewLoaded) {
+            CoreNavigator.instance.navigate('../');
+        }
     }
 
     /**
@@ -245,7 +248,7 @@ export class AddonMessagesSearchPage implements OnDestroy {
      * @param onInit Whether the tser was selected on initial load.
      */
     openConversation(result: AddonMessagesConversationMember | AddonMessagesMessageAreaContact, onInit: boolean = false): void {
-        if (!onInit /* @todo || this.splitviewCtrl.isOn()*/) {
+        if (!onInit || CoreScreen.instance.isTablet) {
             this.selectedResult = result;
 
             const params: Params = {};
@@ -255,8 +258,9 @@ export class AddonMessagesSearchPage implements OnDestroy {
                 params.userId = result.id;
             }
 
-            // @todo this.splitviewCtrl.push('AddonMessagesDiscussionPage', params);
+            const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/search/discussion');
-            CoreNavigator.instance.navigateToSitePath('discussion', { params });
+            const path = (splitViewLoaded ? '../' : '') + 'discussion';
+            CoreNavigator.instance.navigate(path, { params });
         }
     }
 

src/core/features/settings/pages/site/site.html

@@ -28,7 +28,7 @@
             <ion-item *ngIf="isIOS"
                 (click)="openHandler('CoreSharedFilesListPage', {manage: true, siteId: siteId, hideSitePicker: true})"
                 [title]="'core.sharedfiles.sharedfiles' | translate"
-                [class.core-split-item-selected]="'CoreSharedFilesListPage' == selectedPage" detail>
+                [class.core-selected-item]="'CoreSharedFilesListPage' == selectedPage" detail>
                 <ion-icon name="fas-folder" slot="start"></ion-icon>
                 <ion-label>
                     <h2>{{ 'core.sharedfiles.sharedfiles' | translate }}</h2>
@@ -38,7 +38,7 @@
 
             <ion-item *ngFor="let handler of handlers" [ngClass]="['core-settings-handler', handler.class]"
                 (click)="openHandler(handler.page, handler.params)" [title]="handler.title | translate" detail
-                [class.core-split-item-selected]="handler.page == selectedPage">
+                [class.core-selected-item]="handler.page == selectedPage">
                 <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon">
                 </ion-icon>
                 <ion-label>

src/core/features/tag/pages/index/index.html

@@ -18,7 +18,7 @@
                 <ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let area of areas" [title]="area.nameKey | translate"
-                (click)="openArea(area)" [class.core-split-item-selected]="area!.id == selectedAreaId">
+                (click)="openArea(area)" [class.core-selected-item]="area!.id == selectedAreaId">
                 <ion-label>
                     <h2>{{ area!.nameKey | translate }}</h2>
                 </ion-label>