Add separators in user moderation dropdown

4 files changed, 36 insertions, 14 deletions

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 48230d6d8..90651f217 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -8,14 +8,20 @@
   </div>
 
   <div ngbDropdownMenu class="dropdown-menu">
-    <ng-container *ngFor="let action of actions">
-      <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
-        <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
+    <ng-container *ngFor="let actions of getActions()">
 
-        <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
-          {{ action.label }}
-        </span>
+      <ng-container *ngFor="let action of actions">
+        <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+          <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
+
+          <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
+            {{ action.label }}
+          </span>
+        </ng-container>
       </ng-container>
+
+      <div class="dropdown-divider"></div>
+
     </ng-container>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 92c4d1d2c..a4fcceeee 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+.dropdown-divider:last-child {
+  display: none;
+}
+
 .action-button {
   @include peertube-button;
 
@@ -52,4 +56,4 @@
       width: 100%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index d8026ef41..275e2b51e 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -14,10 +14,16 @@ export type DropdownAction<T> = {
 })
 
 export class ActionDropdownComponent<T> {
-  @Input() actions: DropdownAction<T>[] = []
+  @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
   @Input() entry: T
   @Input() placement = 'bottom-left'
   @Input() buttonSize: 'normal' | 'small' = 'normal'
   @Input() label: string
   @Input() theme: 'orange' | 'grey' = 'grey'
+
+  getActions () {
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+
+    return [ this.actions ]
+  }
 }
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 460750740..47967f8e5 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -26,7 +26,7 @@ export class UserModerationDropdownComponent implements OnChanges {
   @Output() userChanged = new EventEmitter()
   @Output() userDeleted = new EventEmitter()
 
-  userActions: DropdownAction<{ user: User, account: Account }>[] = []
+  userActions: DropdownAction<{ user: User, account: Account }>[][] = []
 
   constructor (
     private authService: AuthService,
@@ -264,7 +264,7 @@ export class UserModerationDropdownComponent implements OnChanges {
       if (this.user && authUser.id === this.user.id) return
 
       if (this.user && authUser.hasRight(UserRight.MANAGE_USERS)) {
-        this.userActions = this.userActions.concat([
+        this.userActions.push([
           {
             label: this.i18n('Edit'),
             linkBuilder: ({ user }) => this.getRouterUserEditLink(user)
@@ -294,7 +294,7 @@ export class UserModerationDropdownComponent implements OnChanges {
       // Actions on accounts/servers
       if (this.account) {
         // User actions
-        this.userActions = this.userActions.concat([
+        this.userActions.push([
           {
             label: this.i18n('Mute this account'),
             isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === false,
@@ -317,9 +317,11 @@ export class UserModerationDropdownComponent implements OnChanges {
           }
         ])
 
+        let instanceActions: DropdownAction<{ user: User, account: Account }>[] = []
+
         // Instance actions
         if (authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
-          this.userActions = this.userActions.concat([
+          instanceActions = instanceActions.concat([
             {
               label: this.i18n('Mute this account by your instance'),
               isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === false,
@@ -335,7 +337,7 @@ export class UserModerationDropdownComponent implements OnChanges {
 
         // Instance actions
         if (authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
-          this.userActions = this.userActions.concat([
+          instanceActions = instanceActions.concat([
             {
               label: this.i18n('Mute the instance by your instance'),
               isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false,
@@ -348,6 +350,10 @@ export class UserModerationDropdownComponent implements OnChanges {
             }
           ])
         }
+
+        if (instanceActions.length !== 0) {
+          this.userActions.push(instanceActions)
+        }
       }
     }
   }