Add separators in user moderation dropdown

3 files changed, 25 insertions, 9 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 ]
+  }
 }