simplify navigation within most admin menus

client/src/app/+admin/admin.component.html

@@ -1,11 +1,5 @@
 <div class="row">
-  <div class="sub-menu">
+  <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
-    <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ item.label }}</a>
-    </ng-template>
-
-    <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>
-  </div>
 
   <div class="margin-content">
     <router-outlet></router-outlet>

client/src/app/+admin/admin.component.scss

@@ -0,0 +1,3 @@
+my-top-menu-dropdown {
+  flex-grow: 1;
+}

client/src/app/+admin/admin.component.ts

@@ -3,12 +3,15 @@ import { AuthService } from '@app/core'
 import { ListOverflowItem } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRight } from '@shared/models'
+import { TopMenuDropdownParam } from '@app/shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
-  templateUrl: './admin.component.html'
+  templateUrl: './admin.component.html',
+  styleUrls: [ './admin.component.scss' ]
 })
 export class AdminComponent implements OnInit {
   items: ListOverflowItem[] = []
+  menuEntries: TopMenuDropdownParam[] = []
 
   constructor (
     private auth: AuthService,
@@ -16,12 +19,58 @@ export class AdminComponent implements OnInit {
   ) {}
 
   ngOnInit () {
-    if (this.hasUsersRight()) this.items.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+    const federationItems: TopMenuDropdownParam = {
-    if (this.hasServerFollowRight()) this.items.push({ label: this.i18n('Follows & redundancies'), routerLink: '/admin/follows' })
+      label: this.i18n('Federation'),
-    if (this.hasVideoAbusesRight() || this.hasVideoBlocklistRight()) this.items.push({ label: this.i18n('Moderation'), routerLink: '/admin/moderation' })
+      children: [
-    if (this.hasConfigRight()) this.items.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
+        {
-    if (this.hasPluginsRight()) this.items.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
+          label: this.i18n('Instances you follow'),
-    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.items.push({ label: this.i18n('System'), routerLink: '/admin/system' })
+          routerLink: '/admin/follows/following-list',
+          iconName: 'sign-out'
+        },
+        {
+          label: this.i18n('Instances following you'),
+          routerLink: '/admin/follows/followers-list',
+          iconName: 'sign-in'
+        },
+        {
+          label: this.i18n('Video redundancies'),
+          routerLink: '/admin/follows/video-redundancies-list',
+          iconName: 'videos'
+        }
+      ]
+    }
+
+    const moderationItems: TopMenuDropdownParam = {
+      label: this.i18n('Moderation'),
+      children: []
+    }
+    if (this.hasVideoAbusesRight()) moderationItems.children.push({
+      label: this.i18n('Video reports'),
+      routerLink: '/admin/moderation/video-abuses/list',
+      iconName: 'flag'
+    })
+    if (this.hasVideoBlocklistRight()) moderationItems.children.push({
+      label: this.i18n('Video blocks'),
+      routerLink: '/admin/moderation/video-blocks/list',
+      iconName: 'cross'
+    })
+    if (this.hasAccountsBlocklistRight()) moderationItems.children.push({
+      label: this.i18n('Muted accounts'),
+      routerLink: '/admin/moderation/blocklist/accounts',
+      iconName: 'user'
+    })
+    if (this.hasServersBlocklistRight()) moderationItems.children.push({
+      label: this.i18n('Muted servers'),
+      routerLink: '/admin/moderation/blocklist/servers',
+      iconName: 'server'
+    })
+
+    if (this.hasUsersRight()) this.menuEntries.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+    if (this.hasServerFollowRight()) this.menuEntries.push(federationItems)
+    if (this.hasVideoAbusesRight() || this.hasVideoBlocklistRight()) this.menuEntries.push(moderationItems)
+    if (this.hasConfigRight()) this.menuEntries.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
+    if (this.hasPluginsRight()) this.menuEntries.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
+    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.menuEntries.push({ label: this.i18n('System'), routerLink: '/admin/system' })
   }
 
   hasUsersRight () {
@@ -40,6 +89,14 @@ export class AdminComponent implements OnInit {
     return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
   }
 
+  hasAccountsBlocklistRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)
+  }
+
+  hasServersBlocklistRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)
+  }
+
   hasConfigRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_CONFIGURATION)
   }

client/src/app/+admin/follows/follows.component.html

@@ -1,13 +1 @@
-<div class="admin-sub-header">
-  <h1 i18n class="form-sub-title">Follows & redundancies</h1>
-
-  <div class="admin-sub-nav">
-    <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
-
-    <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
-
-    <a i18n routerLink="video-redundancies-list" routerLinkActive="active">Video redundancies</a>
-  </div>
-</div>
-
 <router-outlet></router-outlet>

client/src/app/+admin/moderation/moderation.component.html

@@ -1,15 +1 @@
-<div class="admin-sub-header">
-  <h1 i18n class="form-sub-title">Moderation</h1>
-
-  <div class="admin-sub-nav">
-    <a *ngIf="hasVideoAbusesRight()" i18n routerLink="video-abuses/list" routerLinkActive="active">Video reports</a>
-
-    <a *ngIf="hasVideoBlocklistRight()" i18n routerLink="video-blocks/list" routerLinkActive="active">Video blocks</a>
-
-    <a *ngIf="hasAccountsBlocklistRight()" i18n routerLink="blocklist/accounts" routerLinkActive="active">Muted accounts</a>
-
-    <a *ngIf="hasServersBlocklistRight()" i18n routerLink="blocklist/servers" routerLinkActive="active">Muted servers</a>
-  </div>
-</div>
-
 <router-outlet></router-outlet>

client/src/app/+admin/moderation/moderation.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { AuthService, ServerService } from '@app/core'
+import { ServerService } from '@app/core'
-import { UserRight } from '@shared/models'
 
 @Component({
   templateUrl: './moderation.component.html',
@@ -10,29 +9,11 @@ export class ModerationComponent implements OnInit {
   autoBlockVideosEnabled = false
 
   constructor (
-    private auth: AuthService,
     private serverService: ServerService
   ) { }
 
   ngOnInit (): void {
     this.serverService.getConfig()
       .subscribe(config => this.autoBlockVideosEnabled = config.autoBlacklist.videos.ofUsers.enabled)
-
-  }
-
-  hasVideoAbusesRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES)
-  }
-
-  hasVideoBlocklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
-  }
-
-  hasAccountsBlocklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)
-  }
-
-  hasServersBlocklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)
   }
 }

client/src/app/+my-account/my-account.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
-import { TopMenuDropdownParam } from './top-menu-dropdown.component'
+import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
   selector: 'my-my-account',

client/src/app/+my-account/my-account.module.ts

@@ -33,7 +33,6 @@ import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/m
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
 import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-ownership/video-change-ownership.component'
 import { MyAccountComponent } from './my-account.component'
-import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
 
 @NgModule({
   imports: [
@@ -79,8 +78,6 @@ import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
     MyAccountVideoPlaylistUpdateComponent,
     MyAccountVideoPlaylistsComponent,
     MyAccountVideoPlaylistElementsComponent,
-
-    TopMenuDropdownComponent
   ],
 
   exports: [

client/src/app/shared/shared-icons/global-icon.component.ts

@@ -34,6 +34,7 @@ const icons = {
   'delete': require('!!raw-loader?!../../../assets/images/feather/delete.svg').default,
   'inbox-full': require('!!raw-loader?!../../../assets/images/feather/inbox-full.svg').default,
   'sign-out': require('!!raw-loader?!../../../assets/images/feather/log-out.svg').default,
+  'sign-in': require('!!raw-loader?!../../../assets/images/feather/log-in.svg').default,
   'download': require('!!raw-loader?!../../../assets/images/feather/download.svg').default,
   'ownership-change': require('!!raw-loader?!../../../assets/images/feather/share.svg').default,
   'share': require('!!raw-loader?!../../../assets/images/feather/share-2.svg').default,

client/src/app/shared/shared-main/misc/index.ts

@@ -1,2 +1,3 @@
 export * from './help.component'
 export * from './list-overflow.component'
+export * from './top-menu-dropdown.component'

client/src/app/shared/shared-main/shared-main.module.ts

@@ -25,7 +25,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
-import { HelpComponent, ListOverflowComponent } from './misc'
+import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService } from './users'
 import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
@@ -81,10 +81,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 
     HelpComponent,
     ListOverflowComponent,
+    TopMenuDropdownComponent,
 
     UserNotificationsComponent,
-
-    FeedComponent
   ],
 
   exports: [
@@ -131,10 +130,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 
     HelpComponent,
     ListOverflowComponent,
+    TopMenuDropdownComponent,
 
-    UserNotificationsComponent,
+    UserNotificationsComponent
-
-    FeedComponent
   ],
 
   providers: [

client/src/assets/images/feather/log-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>