Improve notification settings UI

3 files changed, 77 insertions, 31 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index 75951006d..c3cfe0314 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -1,25 +1,29 @@
-<div class="custom-row">
-  <div i18n>Activities</div>
-  <div i18n>Web</div>
-  <div i18n *ngIf="emailEnabled">Email</div>
-</div>
+<div *ngIf="webNotifications">
+  <ng-container *ngFor="let group of notificationSettingGroups">
+    <div class="header custom-row">
+      <div i18n>{{ group.label }}</div>
+      <div i18n>Web</div>
+      <div i18n *ngIf="emailEnabled">Email</div>
+    </div>
 
-<ng-container *ngFor="let notificationType of notificationSettingKeys">
-  <div class="custom-row" *ngIf="hasUserRight(notificationType)">
-    <div>{{ labelNotifications[notificationType] }}</div>
+    <ng-container *ngFor="let notificationType of group.keys">
+      <div class="custom-row" *ngIf="hasUserRight(notificationType)">
+        <div>{{ labelNotifications[notificationType] }}</div>
 
-    <div>
-      <my-input-switch
-        [(ngModel)]="webNotifications[notificationType]"
-        (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
-      ></my-input-switch>
-    </div>
+        <div>
+          <my-input-switch
+            [(ngModel)]="webNotifications[notificationType]"
+            (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
+          ></my-input-switch>
+        </div>
 
-    <div *ngIf="emailEnabled">
-      <my-input-switch
-        [(ngModel)]="emailNotifications[notificationType]"
-        (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
-      ></my-input-switch>
-    </div>
-  </div>
-</ng-container>
+        <div *ngIf="emailEnabled">
+          <my-input-switch
+            [(ngModel)]="emailNotifications[notificationType]"
+            (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
+          ></my-input-switch>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container>
+</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index b4a7a0a6d..2fe1f9536 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -6,8 +6,10 @@
   align-items: center;
   border-bottom: 1px solid $separator-border-color;
 
-  &:first-child {
+  &.header {
     font-size: 16px;
+    font-weight: $font-semibold;
+    margin-top: 10px;
   }
 
   > div {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index 1eac06234..09da979ab 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -11,14 +11,14 @@ import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from
   styleUrls: [ './my-account-notification-preferences.component.scss' ]
 })
 export class MyAccountNotificationPreferencesComponent implements OnInit {
-  @Input() user: User = null
+  @Input() user: User
   @Input() userInformationLoaded: Subject<any>
 
-  notificationSettingKeys: (keyof UserNotificationSetting)[] = []
-  emailNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any
-  webNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any
-  labelNotifications: { [ id in keyof UserNotificationSetting ]: string } = {} as any
-  rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]: UserRight } = {} as any
+  notificationSettingGroups: { label: string, keys: (keyof UserNotificationSetting)[] }[] = []
+  emailNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
+  webNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
+  labelNotifications: { [ id in keyof UserNotificationSetting ]?: string } = {}
+  rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]?: UserRight } = {}
   emailEnabled = false
 
   private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500)
@@ -32,7 +32,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
       newVideoFromSubscription: $localize`New video from your subscriptions`,
       newCommentOnMyVideo: $localize`New comment on your video`,
       abuseAsModerator: $localize`New abuse`,
-      videoAutoBlacklistAsModerator: $localize`Video blocked automatically waiting review`,
+      videoAutoBlacklistAsModerator: $localize`An automatically blocked video is awaiting review`,
       blacklistOnMyVideo: $localize`One of your video is blocked/unblocked`,
       myVideoPublished: $localize`Video published (after transcoding/scheduled update)`,
       myVideoImportFinished: $localize`Video import finished`,
@@ -46,7 +46,47 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
       newPeerTubeVersion: $localize`A new PeerTube version is available`,
       newPluginVersion: $localize`One of your plugin/theme has a new available version`
     }
-    this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
+    this.notificationSettingGroups = [
+      {
+        label: $localize`Social`,
+        keys: [
+          'newVideoFromSubscription',
+          'newFollow',
+          'commentMention'
+        ]
+      },
+
+      {
+        label: $localize`Your videos`,
+        keys: [
+          'newCommentOnMyVideo',
+          'blacklistOnMyVideo',
+          'myVideoPublished',
+          'myVideoImportFinished'
+        ]
+      },
+
+      {
+        label: $localize`Moderation`,
+        keys: [
+          'abuseStateChange',
+          'abuseNewMessage',
+          'abuseAsModerator',
+          'videoAutoBlacklistAsModerator'
+        ]
+      },
+
+      {
+        label: $localize`Administration`,
+        keys: [
+          'newUserRegistration',
+          'newInstanceFollower',
+          'autoInstanceFollowing',
+          'newPeerTubeVersion',
+          'newPluginVersion'
+        ]
+      }
+    ]
 
     this.rightNotifications = {
       abuseAsModerator: UserRight.MANAGE_ABUSES,