From ba150fb8b9330e166a4c44aab252c38a56e6c359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 23 Nov 2022 09:45:53 +0100
Subject: [PATCH 1/4] MOBILE-4081 settings: Fix font size change click on other
 elements

---
 .../settings/pages/general/general.html       | 18 +++----
 .../settings/pages/general/general.ts         | 52 ++++++++++++++++---
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index 3c463ffe7..c3de108b3 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -15,7 +15,7 @@
             <ion-label>
                 <h2>{{ 'core.settings.language' | translate }}</h2>
             </ion-label>
-            <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged()" interface="action-sheet"
+            <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged($event)" interface="action-sheet"
                 [interfaceOptions]="{header: 'core.settings.language' | translate}">
                 <ion-select-option *ngFor="let entry of languages" [value]="entry.code">{{ entry.name }}</ion-select-option>
             </ion-select>
@@ -24,9 +24,9 @@
             <ion-label>
                 <h2>{{ 'core.settings.fontsize' | translate }}</h2>
             </ion-label>
-            <ion-segment [(ngModel)]="selectedZoomLevel" (ionChange)="zoomLevelChanged()" color="primary">
-                <ion-segment-button *ngFor="let zoomLevel of zoomLevels" [value]="zoomLevel.value"
-                    [ngStyle]="{'font-size.px': zoomLevel.style}">
+            <ion-segment [(ngModel)]="selectedZoomLevel" color="primary">
+                <ion-segment-button *ngFor=" let zoomLevel of zoomLevels" [value]="zoomLevel.value"
+                    [ngStyle]="{'font-size.px': zoomLevel.style}" (click)="zoomLevelChanged($event, zoomLevel.value)">
                     <ion-label>
                         {{ 'core.settings.fontsizecharacter' | translate }}
                         <!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
@@ -40,7 +40,7 @@
                 <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
                 <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
             </ion-label>
-            <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged()" interface="action-sheet"
+            <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged($event)" interface="action-sheet"
                 [disabled]="colorSchemeDisabled" [interfaceOptions]="{header: 'core.settings.colorscheme' | translate}">
                 <ion-select-option *ngFor="let scheme of colorSchemes" [value]="scheme">
                     {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
@@ -56,13 +56,13 @@
                 <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>
                 <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged()"></ion-toggle>
+            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
             <ion-label>
                 <h2>{{ 'core.settings.ioscookies' | translate }}</h2>
                 <p>{{ 'core.settings.ioscookiesdescription' | translate }}</p>
-                <ion-button expand="block" (click)="openNativeSettings()">
+                <ion-button expand="block" (click)="openNativeSettings($event)">
                     {{ 'core.opensettings' | translate }}
                 </ion-button>
             </ion-label>
@@ -72,14 +72,14 @@
                 <h2>{{ 'core.settings.debugdisplay' | translate }}</h2>
                 <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged()"></ion-toggle>
+            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="analyticsSupported">
             <ion-label>
                 <h2>{{ 'core.settings.enablefirebaseanalytics' | translate }}</h2>
                 <p>{{ 'core.settings.enablefirebaseanalyticsdescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged()"></ion-toggle>
+            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged($event)"></ion-toggle>
         </ion-item>
     </ion-list>
 </ion-content>
diff --git a/src/core/features/settings/pages/general/general.ts b/src/core/features/settings/pages/general/general.ts
index 31ecf47e6..04d0db1ce 100644
--- a/src/core/features/settings/pages/general/general.ts
+++ b/src/core/features/settings/pages/general/general.ts
@@ -111,8 +111,13 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Called when a new language is selected.
+     *
+     * @param ev: Event
      */
-    async languageChanged(): Promise<void> {
+    async languageChanged(ev: Event): Promise<void> {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         const previousLanguage = await CoreLang.getCurrentLanguage();
         if (this.selectedLanguage === previousLanguage) {
             // Prevent opening again.
@@ -177,8 +182,16 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Called when a new zoom level is selected.
+     *
+     * @param ev: Event
+     * @param value: New value
      */
-    zoomLevelChanged(): void {
+    zoomLevelChanged(ev: Event, value: CoreZoomLevel): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        this.selectedZoomLevel = value;
+
         this.zoomLevels = this.zoomLevels.map((fontSize) => {
             fontSize.selected = fontSize.value === this.selectedZoomLevel;
 
@@ -191,31 +204,51 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Called when a new color scheme is selected.
+     *
+     * @param ev: Event
      */
-    colorSchemeChanged(): void {
+    colorSchemeChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         CoreSettingsHelper.setColorScheme(this.selectedScheme);
         CoreConfig.set(CoreConstants.SETTINGS_COLOR_SCHEME, this.selectedScheme);
     }
 
     /**
      * Called when the rich text editor is enabled or disabled.
+     *
+     * @param ev: Event
      */
-    richTextEditorChanged(): void {
+    richTextEditorChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         CoreConfig.set(CoreConstants.SETTINGS_RICH_TEXT_EDITOR, this.richTextEditor ? 1 : 0);
     }
 
     /**
      * Called when the debug display setting is enabled or disabled.
+     *
+     * @param ev: Event
      */
-    debugDisplayChanged(): void {
+    debugDisplayChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         CoreConfig.set(CoreConstants.SETTINGS_DEBUG_DISPLAY, this.debugDisplay ? 1 : 0);
         CoreDomUtils.setDebugDisplay(this.debugDisplay);
     }
 
     /**
      * Called when the analytics setting is enabled or disabled.
+     *
+     * @param ev: Event
      */
-    async analyticsEnabledChanged(): Promise<void> {
+    async analyticsEnabledChanged(ev: Event):  Promise<void> {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         await CorePushNotifications.enableAnalytics(this.analyticsEnabled);
 
         CoreConfig.set(CoreConstants.SETTINGS_ANALYTICS_ENABLED, this.analyticsEnabled ? 1 : 0);
@@ -223,8 +256,13 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Open native settings.
+     *
+     * @param ev: Event
      */
-    openNativeSettings(): void {
+    openNativeSettings(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         Diagnostic.switchToSettings();
     }
 

From 8c22f9a44d9186210d15b42af2ae63c2276d0ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 23 Nov 2022 09:46:08 +0100
Subject: [PATCH 2/4] MOBILE-4081 style: Fix outline clicked text color on iOS

---
 src/theme/theme.base.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 59d08893e..f1206c51f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -327,6 +327,9 @@ ion-button.button-outline {
     --background: var(--core-input-background);
     --color: var(--core-input-text);
     --ion-color-primary: var(--core-input-text);
+    &.ios {
+        --color-activated: var(--contrast-background);
+    }
 }
 
 ion-button.button-solid {

From eac671c5b3ad47f41b849d9fdd0aa5968eb13aa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 23 Nov 2022 11:07:07 +0100
Subject: [PATCH 3/4] MOBILE-4081 style: Improve style on message settings

---
 .../messages/pages/settings/settings.html     | 80 +++++++++++--------
 .../messages/pages/settings/settings.page.ts  |  9 ++-
 2 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html
index ef1d86892..fe58ac796 100644
--- a/src/addons/messages/pages/settings/settings.html
+++ b/src/addons/messages/pages/settings/settings.html
@@ -13,31 +13,56 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="preferencesLoaded">
+        <!-- General settings. -->
+        <ion-card>
+            <ion-list>
+                <ion-item-divider class="ion-text-wrap">
+                    <ion-label>
+                        <h2>{{ 'core.settings.general' | translate }}</h2>
+                    </ion-label>
+                </ion-item-divider>
+                <ion-item class="ion-text-wrap">
+                    <ion-label>
+                        <p>{{ 'addon.messages.useentertosend' | translate }}</p>
+                    </ion-label>
+                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
+                </ion-item>
+            </ion-list>
+        </ion-card>
+
         <!-- Contactable privacy. -->
         <ion-card>
             <ion-item *ngIf="!advancedContactable">
-                <ion-label>{{ 'addon.messages.blocknoncontacts' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
+                <ion-label class="ion-text-wrap">
+                    <p>{{ 'addon.messages.blocknoncontacts' | translate }}</p>
+                </ion-label>
+                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)" slot="end">
                 </ion-toggle>
             </ion-item>
 
-            <ion-list *ngIf="advancedContactable" class="ion-text-wrap">
+            <ion-list *ngIf="advancedContactable">
                 <ion-radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
                     <ion-item-divider>
                         <ion-label>
                             <h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
-                    <ion-item>
-                        <ion-label>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</ion-label>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label>
+                            <p>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</p>
+                        </ion-label>
                         <ion-radio slot="start" [value]="onlyContactsValue"></ion-radio>
                     </ion-item>
-                    <ion-item>
-                        <ion-label>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</ion-label>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label>
+                            <p>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</p>
+                        </ion-label>
                         <ion-radio slot="start" [value]="courseMemberValue"></ion-radio>
                     </ion-item>
-                    <ion-item *ngIf="allowSiteMessaging">
-                        <ion-label>{{ 'addon.messages.contactableprivacy_site' | translate }}</ion-label>
+                    <ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
+                        <ion-label>
+                            <p>{{ 'addon.messages.contactableprivacy_site' | translate }}</p>
+                        </ion-label>
                         <ion-radio slot="start" [value]="siteValue"></ion-radio>
                     </ion-item>
                 </ion-radio-group>
@@ -53,23 +78,6 @@
                 <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
             </ng-container>
         </ng-container>
-
-        <!-- General settings. -->
-        <ion-card>
-            <ion-list class="ion-text-wrap">
-                <ion-item-divider>
-                    <ion-label>
-                        <h2>{{ 'core.settings.general' | translate }}</h2>
-                    </ion-label>
-                </ion-item-divider>
-                <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <p class="item-heading">{{ 'addon.messages.useentertosend' | translate }}</p>
-                    </ion-label>
-                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
-                </ion-item>
-            </ion-list>
-        </ion-card>
     </core-loading>
 </ion-content>
 
@@ -94,18 +102,20 @@
                     <!-- If notifications not disabled, show toggles.
                         If notifications are disabled, show "Disabled" instead of toggle. -->
                     <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap">
-                        <ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
+                        <ion-label>
+                            <p>{{ 'core.settings.' + state | translate }}</p>
+                        </ion-label>
                         <ng-container *ngIf="!preferences.disableall">
                             <!-- If notifications enabled, show toggle. -->
-                            <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification['updating'+state]">
+                            <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification['updating'+state]" slot="end">
                                 <ion-toggle [(ngModel)]="processor[state].checked"
                                     (ngModelChange)="changePreferenceLegacy(notification, processor, state)">
                                 </ion-toggle>
                             </core-button-with-spinner>
-                            <span *ngIf="processor.locked && processor[state].checked" class="text-gray">
+                            <span *ngIf="processor.locked && processor[state].checked" class="text-gray" slot="end">
                                 {{'core.settings.forced' | translate }}
                             </span>
-                            <span *ngIf="processor.locked && !processor[state].checked" class="text-gray">
+                            <span *ngIf="processor.locked && !processor[state].checked" class="text-gray" slot="end">
                                 {{'core.settings.disallowed' | translate }}
                             </span>
                         </ng-container>
@@ -129,18 +139,20 @@
             <ng-container *ngFor="let processor of notification.processors">
                 <!-- If group messaging is enabled, display a simplified view. -->
                 <ion-item class="ion-text-wrap">
-                    <ion-label>{{ processor.displayname }}</ion-label>
+                    <ion-label>
+                        <p>{{ processor.displayname }}</p>
+                    </ion-label>
                     <ng-container *ngIf="!preferences.disableall">
                         <!-- If notifications enabled, show toggle. -->
-                        <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification.updating">
+                        <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification.updating" slot="end">
                             <ion-toggle [(ngModel)]="processor.enabled" (ngModelChange)="changePreference(notification, processor)">
                             </ion-toggle>
                         </core-button-with-spinner>
-                        <span class="text-gray" *ngIf="processor.locked">
+                        <span class="text-gray" *ngIf="processor.locked" slot="end">
                             {{ processor.lockedmessage }}
                         </span>
                     </ng-container>
-                    <span *ngIf="preferences.disableall" class="text-gray">{{ 'core.settings.disabled' | translate }}</span>
+                    <span *ngIf="preferences.disableall" class="text-gray" slot="end">{{ 'core.settings.disabled' | translate }}</span>
                 </ion-item>
             </ng-container>
         </ion-card>
diff --git a/src/addons/messages/pages/settings/settings.page.ts b/src/addons/messages/pages/settings/settings.page.ts
index c69841ece..05a8b61f1 100644
--- a/src/addons/messages/pages/settings/settings.page.ts
+++ b/src/addons/messages/pages/settings/settings.page.ts
@@ -70,9 +70,7 @@ export class AddonMessagesSettingsPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Runs when the page has loaded. This event only happens once per page being created.
-     * If a page leaves but is cached, then this event will not fire again on a subsequent viewing.
-     * Setup code for the page.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.fetchPreferences();
@@ -261,6 +259,9 @@ export class AddonMessagesSettingsPage implements OnInit, OnDestroy {
         });
     }
 
+    /**
+     * Send on Enter toggle has changed.
+     */
     sendOnEnterChanged(): void {
         // Save the value.
         CoreConfig.set(CoreConstants.SETTINGS_SEND_ON_ENTER, this.sendOnEnter ? 1 : 0);
@@ -274,7 +275,7 @@ export class AddonMessagesSettingsPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Page destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         // If there is a pending action to update preferences, execute it right now.

From 9b6a1e04fe357f43bfb075e26692eebabf5065f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 23 Nov 2022 11:49:09 +0100
Subject: [PATCH 4/4] MOBILE-4081 airnotifier: Improve devices list format

---
 .../airnotifier/pages/devices/devices.html    | 44 ++++++++++------
 .../airnotifier/pages/devices/devices.ts      | 51 ++++++++++++-------
 2 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.html b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
index 255e061b5..2a84773ea 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.html
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
@@ -9,24 +9,36 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-refresher slot="fixed" [disabled]="!devicesLoaded" (ionRefresh)="refreshDevices($event.target)">
+    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshDevices($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="devicesLoaded">
-        <ion-list>
-            <ion-item class="ion-text-wrap" *ngFor="let device of devices" [class.item-current]="device.current">
-                <ion-label [class.core-bold]="device.current">
-                    <p class="item-heading">
-                        {{ device.name }} {{ device.model }}
-                        <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
-                    </p>
-                    <p>{{ device.platform }} {{ device.version }}</p>
+    <core-loading [hideUntil]="loaded">
+        <ng-container *ngFor="let platform of platformDevices">
+            <ion-item-divider class="ion-text-wrap">
+                <ion-label>
+                    <h2>{{ platform.platform }}</h2>
                 </ion-label>
-                <core-button-with-spinner [loading]="device.updating" slot="end">
-                    <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
-                    </ion-toggle>
-                </core-button-with-spinner>
-            </ion-item>
-        </ion-list>
+            </ion-item-divider>
+            <ion-card>
+                <ion-list>
+                    <ion-item class="ion-text-wrap" *ngFor="let device of platform.devices" [class.item-current]="device.current">
+                        <ion-label>
+                            <p class="item-heading">
+                                <strong>{{ device.name }} {{ device.model }}</strong> ({{platform.platform}} {{ device.version }})
+                            </p>
+                            <p *ngIf="device.current"><strong>{{ 'core.currentdevice' | translate }}</strong></p>
+                            <p>
+                                {{ 'core.lastmodified' | translate }}: {{ device.timemodified * 1000 |
+                                coreFormatDate:'strftimedatetimeshort' }}
+                            </p>
+                        </ion-label>
+                        <core-button-with-spinner [loading]="device.updating" slot="end">
+                            <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
+                            </ion-toggle>
+                        </core-button-with-spinner>
+                    </ion-item>
+                </ion-list>
+            </ion-card>
+        </ng-container>
     </core-loading>
 </ion-content>
diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.ts b/src/addons/messageoutput/airnotifier/pages/devices/devices.ts
index 6165791f2..9b431bd74 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.ts
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.ts
@@ -29,13 +29,13 @@ import { CoreUtils } from '@services/utils/utils';
 })
 export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestroy {
 
-    devices?: AddonMessageOutputAirnotifierDeviceFormatted[] = [];
-    devicesLoaded = false;
+    platformDevices: AddonMessageOutputAirnotifierPlatformDevices[] = [];
+    loaded = false;
 
     protected updateTimeout?: number;
 
     /**
-     * Component being initialized.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.fetchDevices();
@@ -49,12 +49,11 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
     protected async fetchDevices(): Promise<void> {
         try {
             const devices = await AddonMessageOutputAirnotifier.getUserDevices();
-
-            this.devices = this.formatDevices(devices);
+            this.formatDevices(devices);
         } catch (error) {
             CoreDomUtils.showErrorModal(error);
         } finally {
-            this.devicesLoaded = true;
+            this.loaded = true;
         }
     }
 
@@ -62,24 +61,37 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
      * Add some calculated data for devices.
      *
      * @param devices Devices to format.
-     * @return Formatted devices.
      */
-    protected formatDevices(devices: AddonMessageOutputAirnotifierDevice[]): AddonMessageOutputAirnotifierDeviceFormatted[] {
-        const formattedDevices: AddonMessageOutputAirnotifierDeviceFormatted[] = devices;
+    protected formatDevices(devices: AddonMessageOutputAirnotifierDevice[]): void {
+        this.platformDevices = [];
+
+        const formattedDevices: Record<string, AddonMessageOutputAirnotifierPlatformDevices> = {};
         const pushId = CorePushNotifications.getPushId();
 
         // Convert enabled to boolean and search current device.
-        formattedDevices.forEach((device) => {
+        devices.forEach((device: AddonMessageOutputAirnotifierDeviceFormatted) => {
+            if (formattedDevices[device.platform] === undefined) {
+                formattedDevices[device.platform] = {
+                    platform: device.platform,
+                    devices: [],
+                };
+            }
+
             device.enable = !!device.enable;
-            device.current = !!(pushId && pushId == device.pushid);
+            device.current = pushId === device.pushid;
+
+            formattedDevices[device.platform].devices.push(device);
+
         });
 
-        return formattedDevices.sort((a, b) => {
-            const compareA = a.name.toLowerCase();
-            const compareB = b.name.toLowerCase();
+        for (const platform in formattedDevices) {
+            const devices = formattedDevices[platform];
+            devices.devices.sort((a, b) => b.timemodified - a.timemodified);
 
-            return compareA.localeCompare(compareB);
-        });
+            devices.platform = devices.platform.replace('-fcm', '');
+
+            this.platformDevices.push(devices);
+        }
     }
 
     /**
@@ -145,7 +157,7 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
     }
 
     /**
-     * Page destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         // If there is a pending action to update devices, execute it right now.
@@ -157,6 +169,11 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
 
 }
 
+type AddonMessageOutputAirnotifierPlatformDevices = {
+    platform: string;
+    devices: AddonMessageOutputAirnotifierDeviceFormatted[];
+};
+
 /**
  * User device with some calculated data.
  */