Reorganize client shared modules

49 files changed, 414 insertions, 753 deletions

diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
index a68f79b47..039c389e4 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
@@ -1,12 +1,11 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier } from '@app/core'
-import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
-import { VideoChannelCreate } from '../../../../../shared/models/videos'
-import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
+import { VideoChannelService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { VideoChannelValidatorsService } from '@app/shared/forms/form-validators/video-channel-validators.service'
+import { VideoChannelCreate } from '@shared/models'
+import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
 
 @Component({
   selector: 'my-account-video-channel-create',
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.component.html
index 048d143cd..048d143cd 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.component.html
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.component.scss
index 8f8af655c..8f8af655c 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.component.scss
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.ts
index 355cb4f55..710c51d8e 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.ts
@@ -1,5 +1,5 @@
-import { FormReactive } from '@app/shared'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { FormReactive } from '@app/shared/shared-forms'
+import { VideoChannel } from '@app/shared/shared-main'
 
 export abstract class MyAccountVideoChannelEdit extends FormReactive {
   // We need it even in the create component because it's used in the edit template
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
index 9c948b367..489c437ea 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
@@ -1,15 +1,12 @@
+import { Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
-import { VideoChannelUpdate } from '../../../../../shared/models/videos'
-import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { Subscription } from 'rxjs'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { VideoChannelValidatorsService } from '@app/shared/forms/form-validators/video-channel-validators.service'
-import { ServerConfig } from '@shared/models'
+import { ServerConfig, VideoChannelUpdate } from '@shared/models'
+import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
 
 @Component({
   selector: 'my-account-video-channel-update',
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels-routing.module.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels-routing.module.ts
index 94037e18f..94037e18f 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels-routing.module.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels-routing.module.ts
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
index b2e8210d3..b2e8210d3 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss
index 76fb2cde0..76fb2cde0 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
index 9caefe5b1..70510d7c9 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core'
-import { Notifier } from '@app/core'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { ScreenService } from '@app/shared/misc/screen.service'
-import { User } from '@app/shared'
+import { ChartData } from 'chart.js'
+import { max, maxBy, min, minBy } from 'lodash-es'
 import { flatMap } from 'rxjs/operators'
+import { Component, OnInit } from '@angular/core'
+import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { min, minBy, max, maxBy } from 'lodash-es'
-import { ChartData } from 'chart.js'
 
 @Component({
   selector: 'my-account-video-channels',
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.module.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.module.ts
index 87d6b762f..f8c6ad56b 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.module.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.module.ts
@@ -1,16 +1,22 @@
-import { NgModule } from '@angular/core'
 import { ChartModule } from 'primeng/chart'
-import { MyAccountVideoChannelsRoutingModule } from './my-account-video-channels-routing.module'
-import { MyAccountVideoChannelsComponent } from './my-account-video-channels.component'
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedMainModule } from '@app/shared/shared-main'
 import { MyAccountVideoChannelCreateComponent } from './my-account-video-channel-create.component'
 import { MyAccountVideoChannelUpdateComponent } from './my-account-video-channel-update.component'
-import { SharedModule } from '@app/shared'
+import { MyAccountVideoChannelsRoutingModule } from './my-account-video-channels-routing.module'
+import { MyAccountVideoChannelsComponent } from './my-account-video-channels.component'
 
 @NgModule({
   imports: [
     MyAccountVideoChannelsRoutingModule,
-    SharedModule,
-    ChartModule
+
+    ChartModule,
+
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
   ],
 
   declarations: [
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
index e48c39cdf..03ec75e25 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core'
-import { GenericAccountBlocklistComponent, BlocklistComponentType } from '@app/shared/blocklist'
+import { BlocklistComponentType, GenericAccountBlocklistComponent } from '@app/shared/shared-moderation'
 
 @Component({
   selector: 'my-account-blocklist',
-  styleUrls: [ '../../shared/blocklist/account-blocklist.component.scss' ],
-  templateUrl: '../../shared/blocklist/account-blocklist.component.html'
+  styleUrls: [ '../../shared/shared-moderation/account-blocklist.component.scss' ],
+  templateUrl: '../../shared/shared-moderation/account-blocklist.component.html'
 })
 export class MyAccountBlocklistComponent extends GenericAccountBlocklistComponent {
   mode = BlocklistComponentType.Account
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
index cfaba1c7b..9b983a197 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core'
-import { GenericServerBlocklistComponent, BlocklistComponentType } from '@app/shared/blocklist'
+import { BlocklistComponentType, GenericServerBlocklistComponent } from '@app/shared/shared-moderation'
 
 @Component({
   selector: 'my-account-server-blocklist',
-  styleUrls: [ '../../+admin/moderation/moderation.component.scss', '../../shared/blocklist/server-blocklist.component.scss' ],
-  templateUrl: '../../shared/blocklist/server-blocklist.component.html'
+  styleUrls: [ '../../+admin/moderation/moderation.component.scss', '../../shared/shared-moderation/server-blocklist.component.scss' ],
+  templateUrl: '../../shared/shared-moderation/server-blocklist.component.html'
 })
 export class MyAccountServerBlocklistComponent extends GenericServerBlocklistComponent {
   mode = BlocklistComponentType.Account
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
index 5f0ccee50..dc78b3d6e 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.ts
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
@@ -1,17 +1,19 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { immutableAssign } from '@app/shared/misc/utils'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-import { AbstractVideoList } from '../../shared/video/abstract-video-list'
-import { VideoService } from '../../shared/video/video.service'
+import {
+  AuthService,
+  ComponentPagination,
+  ConfirmService,
+  LocalStorageService,
+  Notifier,
+  ScreenService,
+  ServerService,
+  UserService
+} from '@app/core'
+import { immutableAssign } from '@app/helpers'
+import { UserHistoryService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ScreenService } from '@app/shared/misc/screen.service'
-import { UserHistoryService } from '@app/shared/users/user-history.service'
-import { UserService } from '@app/shared'
-import { Notifier, ServerService } from '@app/core'
-import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-account-history',
@@ -38,7 +40,6 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
     protected screenService: ScreenService,
     protected storageService: LocalStorageService,
     private confirmService: ConfirmService,
-    private videoService: VideoService,
     private userHistoryService: UserHistoryService
   ) {
     super()
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
index a50cb0fb9..0c1427d96 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core'
-import { UserNotificationsComponent } from '@app/shared'
+import { UserNotificationsComponent } from '@app/shared/shared-main'
 
 @Component({
   templateUrl: './my-account-notifications.component.html',
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
index d5682914e..0e62b5ca5 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@@ -1,14 +1,10 @@
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
-import { FormReactive } from '@app/shared'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { VideoOwnershipService } from '@app/shared/video-ownership'
-import { VideoChangeOwnership } from '../../../../../../shared/models/videos'
-import { VideoAcceptOwnershipValidatorsService } from '@app/shared/forms/form-validators'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormReactive, FormValidatorService, VideoAcceptOwnershipValidatorsService } from '@app/shared/shared-forms'
+import { VideoChannelService, VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoChangeOwnership, VideoChannel } from '@shared/models'
 
 @Component({
   selector: 'my-account-accept-ownership',
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index f0a6303d1..5167732c2 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -1,10 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
-import { Notifier } from '@app/core'
-import { RestPagination, RestTable } from '@app/shared'
 import { SortMeta } from 'primeng/api'
-import { VideoChangeOwnership } from '../../../../../shared'
-import { VideoOwnershipService } from '@app/shared/video-ownership'
-import { Account } from '@app/shared/account/account.model'
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { Notifier, RestPagination, RestTable } from '@app/core'
+import { Account, VideoOwnershipService } from '@app/shared/shared-main'
+import { VideoChangeOwnership } from '@shared/models'
 import { MyAccountAcceptOwnershipComponent } from './my-account-accept-ownership/my-account-accept-ownership.component'
 
 @Component({
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index f6b711e09..ac9cf4cfd 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -2,26 +2,20 @@ import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
 import { LoginGuard } from '../core'
-import { MyAccountComponent } from './my-account.component'
+import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
+import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-account-server-blocklist.component'
+import { MyAccountHistoryComponent } from './my-account-history/my-account-history.component'
+import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.component'
+import { MyAccountOwnershipComponent } from './my-account-ownership/my-account-ownership.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
+import { MyAccountSubscriptionsComponent } from './my-account-subscriptions/my-account-subscriptions.component'
+import { MyAccountVideoImportsComponent } from './my-account-video-imports/my-account-video-imports.component'
+import { MyAccountVideoPlaylistCreateComponent } from './my-account-video-playlists/my-account-video-playlist-create.component'
+import { MyAccountVideoPlaylistElementsComponent } from './my-account-video-playlists/my-account-video-playlist-elements.component'
+import { MyAccountVideoPlaylistUpdateComponent } from './my-account-video-playlists/my-account-video-playlist-update.component'
+import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/my-account-video-playlists.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
-import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
-import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
-import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component'
-import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
-import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
-import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
-import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
-import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component'
-import {
-  MyAccountVideoPlaylistCreateComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
-import {
-  MyAccountVideoPlaylistUpdateComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
-import {
-  MyAccountVideoPlaylistElementsComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
+import { MyAccountComponent } from './my-account.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -46,7 +40,10 @@ const myAccountRoutes: Routes = [
 
       {
         path: 'video-channels',
-        loadChildren: () => import('./my-account-video-channels/my-account-video-channels.module').then(m => m.MyAccountVideoChannelsModule)
+        loadChildren: () => {
+          return import('./+my-account-video-channels/my-account-video-channels.module')
+            .then(m => m.MyAccountVideoChannelsModule)
+        }
       },
 
       {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
index 9d406805f..5444b97ae 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -1,12 +1,10 @@
+import { forkJoin } from 'rxjs'
+import { tap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
-import { AuthService, Notifier, ServerService } from '@app/core'
-import { FormReactive, UserService } from '../../../shared'
+import { AuthService, ServerService, UserService } from '@app/core'
+import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
-import { User } from '../../../../../../shared'
-import { tap } from 'rxjs/operators'
-import { forkJoin } from 'rxjs'
+import { User } from '@shared/models'
 
 @Component({
   selector: 'my-account-change-email',
@@ -21,7 +19,6 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
   constructor (
     protected formValidatorService: FormValidatorService,
     private userValidatorsService: UserValidatorsService,
-    private notifier: Notifier,
     private authService: AuthService,
     private userService: UserService,
     private serverService: ServerService,
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index cbb068c7c..6a16f8a2c 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -1,11 +1,9 @@
+import { filter } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
-import { AuthService, Notifier } from '@app/core'
-import { FormReactive, UserService } from '../../../shared'
+import { AuthService, Notifier, UserService } from '@app/core'
+import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
-import { filter } from 'rxjs/operators'
-import { User } from '../../../../../../shared'
+import { User } from '@shared/models'
 
 @Component({
   selector: 'my-account-change-password',
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
index 25d862867..ae6ac5387 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
@@ -1,9 +1,6 @@
 import { Component, Input } from '@angular/core'
-import { Notifier } from '@app/core'
-import { AuthService, ConfirmService, RedirectService } from '../../../core'
-import { UserService } from '../../../shared'
+import { AuthService, ConfirmService, Notifier, RedirectService, User, UserService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { User } from '@app/shared'
 
 @Component({
   selector: 'my-account-danger-zone',
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/index.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/index.ts
deleted file mode 100644
index 62fce79a8..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './my-account-interface-settings.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
deleted file mode 100644
index 0d0ddc0f2..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<form role="form" (ngSubmit)="updateInterfaceSettings()" [formGroup]="form">
-
-  <div class="form-group">
-    <label i18n for="theme">Theme</label>
-
-    <div class="peertube-select-container">
-      <select formControlName="theme" id="theme" class="form-control">
-        <option i18n value="instance-default">instance default</option>
-        <option i18n value="default">peertube default</option>
-
-        <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
-      </select>
-    </div>
-  </div>
-
-  <input *ngIf="!reactiveUpdate" type="submit" class="mt-0" i18n-value value="Save" [disabled]="!form.valid">
-</form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
deleted file mode 100644
index 7818dfc02..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-
-  display: block;
-  margin-top: 15px;
-}
-
-.peertube-select-container {
-  @include peertube-select-container(340px);
-
-  margin-bottom: 30px;
-}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
deleted file mode 100644
index b6c17c0e3..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component, Input, OnInit, OnDestroy } from '@angular/core'
-import { Notifier, ServerService } from '@app/core'
-import { ServerConfig, UserUpdateMe } from '../../../../../../shared'
-import { AuthService } from '../../../core'
-import { FormReactive } from '../../../shared/forms/form-reactive'
-import { User, UserService } from '../../../shared/users'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { Subject, Subscription } from 'rxjs'
-
-@Component({
-  selector: 'my-account-interface-settings',
-  templateUrl: './my-account-interface-settings.component.html',
-  styleUrls: [ './my-account-interface-settings.component.scss' ]
-})
-export class MyAccountInterfaceSettingsComponent extends FormReactive implements OnInit, OnDestroy {
-  @Input() user: User = null
-  @Input() reactiveUpdate = false
-  @Input() notifyOnUpdate = true
-  @Input() userInformationLoaded: Subject<any>
-
-  formValuesWatcher: Subscription
-
-  private serverConfig: ServerConfig
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private authService: AuthService,
-    private notifier: Notifier,
-    private userService: UserService,
-    private serverService: ServerService,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  get availableThemes () {
-    return this.serverConfig.theme.registered
-               .map(t => t.name)
-  }
-
-  ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
-
-    this.buildForm({
-      theme: null
-    })
-
-    this.userInformationLoaded
-      .subscribe(() => {
-        this.form.patchValue({
-          theme: this.user.theme
-        })
-
-        if (this.reactiveUpdate) {
-          this.formValuesWatcher = this.form.valueChanges.subscribe(val => this.updateInterfaceSettings())
-        }
-      })
-  }
-
-  ngOnDestroy () {
-    this.formValuesWatcher?.unsubscribe()
-  }
-
-  updateInterfaceSettings () {
-    const theme = this.form.value['theme']
-
-    const details: UserUpdateMe = {
-      theme
-    }
-
-    if (this.authService.isLoggedIn()) {
-      this.userService.updateMyProfile(details).subscribe(
-        () => {
-          this.authService.refreshUserInformation()
-
-          if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.'))
-        },
-
-        err => this.notifier.error(err.message)
-      )
-    } else {
-      this.userService.updateMyAnonymousProfile(details)
-      if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.'))
-    }
-  }
-}
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 af17a0352..cfa514b26 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
@@ -1,11 +1,10 @@
+import { debounce } from 'lodash-es'
+import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
-import { User } from '@app/shared'
+import { Notifier, ServerService, User } from '@app/core'
+import { UserNotificationService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Subject } from 'rxjs'
-import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from '../../../../../../shared'
-import { Notifier, ServerService } from '@app/core'
-import { debounce } from 'lodash-es'
-import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from '@shared/models'
 
 @Component({
   selector: 'my-account-notification-preferences',
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
index fcad5a6c2..b0d8494e7 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -1,11 +1,8 @@
+import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
-import { Notifier } from '@app/core'
-import { FormReactive, UserService } from '../../../shared'
-import { User } from '@app/shared'
+import { Notifier, User, UserService } from '@app/core'
+import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { Subject } from 'rxjs'
-import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 
 @Component({
   selector: 'my-account-profile',
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 040b2130f..2826d8d83 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -34,7 +34,7 @@
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-    <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
+    <my-user-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-video-settings>
   </div>
 </div>
 
@@ -55,7 +55,7 @@
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-    <my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
+    <my-user-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-interface-settings>
   </div>
 </div>
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index f73f3aa1e..4800be24b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -1,11 +1,8 @@
-import { Component, OnInit, AfterViewChecked } from '@angular/core'
-import { Notifier } from '@app/core'
 import { BytesPipe } from 'ngx-pipes'
-import { AuthService } from '../../core'
-import { User } from '../../shared'
-import { UserService } from '../../shared/users'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ViewportScroller } from '@angular/common'
+import { AfterViewChecked, Component, OnInit } from '@angular/core'
+import { AuthService, Notifier, User, UserService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-settings',
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/index.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/index.ts
deleted file mode 100644
index 1253bd369..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './my-account-video-settings.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
deleted file mode 100644
index 0dda33af2..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group form-group-select">
-    <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
-    <my-help>
-      <ng-template ptTemplate="customHtml">
-        <ng-container i18n>
-          With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
-        </ng-container>
-      </ng-template>
-    </my-help>
-
-    <div class="peertube-select-container">
-      <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
-        <option i18n value="undefined" disabled>Policy for sensitive videos</option>
-        <option i18n value="do_not_list">Do not list</option>
-        <option i18n value="blur">Blur thumbnails</option>
-        <option i18n value="display">Display</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="form-group form-group-select">
-    <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
-    <my-help>
-      <ng-template ptTemplate="customHtml">
-        <ng-container i18n>In Recently added, Trending, Local, Most liked and Search pages</ng-container>
-      </ng-template>
-    </my-help>
-
-    <div>
-      <p-multiSelect
-        inputId="videoLanguages" [options]="languageItems" formControlName="videoLanguages" [showToggleAll]="true"
-        [defaultLabel]="getDefaultVideoLanguageLabel()" [selectedItemsLabel]="getSelectedVideoLanguageLabel()"
-        emptyFilterMessage="No results found" i18n-emptyFilterMessage
-      ></p-multiSelect>
-    </div>
-  </div>
-
-  <ng-content select="inner-title"></ng-content>
-
-  <div class="form-group">
-    <my-peertube-checkbox
-      inputName="webTorrentEnabled" formControlName="webTorrentEnabled" [recommended]="true"
-      i18n-labelText labelText="Help share videos being played"
-    >
-      <ng-container ngProjectAs="description">
-        <span i18n>The <a routerLink="/about/peertube" fragment="privacy">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
-      </ng-container>
-    </my-peertube-checkbox>
-  </div>
-
-  <div class="form-group">
-    <my-peertube-checkbox
-      inputName="autoPlayVideo" formControlName="autoPlayVideo"
-      i18n-labelText labelText="Automatically play videos"
-    >
-      <ng-container ngProjectAs="description">
-        <span i18n>When on a video page, directly start playing the video.</span>
-      </ng-container>
-    </my-peertube-checkbox>
-  </div>
-
-  <div class="form-group">
-    <my-peertube-checkbox
-      inputName="autoPlayNextVideo" formControlName="autoPlayNextVideo"
-      i18n-labelText labelText="Automatically start playing the next video"
-    >
-      <ng-container ngProjectAs="description">
-        <span i18n>When a video ends, follow up with the next suggested video.</span>
-      </ng-container>
-    </my-peertube-checkbox>
-  </div>
-
-  <input *ngIf="!reactiveUpdate" type="submit" i18n-value value="Save" [disabled]="!form.valid">
-</form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
deleted file mode 100644
index 430250b87..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-
-  margin-top: 15px;
-}
-
-.peertube-select-container {
-  @include peertube-select-container(340px);
-
-  margin-bottom: 30px;
-}
-
-.form-group-select {
-  margin-bottom: 30px;
-}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
deleted file mode 100644
index 0aaa54cd7..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Component, Input, OnInit, OnDestroy } from '@angular/core'
-import { Notifier, ServerService } from '@app/core'
-import { UserUpdateMe } from '../../../../../../shared/models/users'
-import { User, UserService } from '@app/shared/users'
-import { AuthService } from '../../../core'
-import { FormReactive } from '@app/shared/forms/form-reactive'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { forkJoin, Subject, Subscription } from 'rxjs'
-import { SelectItem } from 'primeng/api'
-import { first } from 'rxjs/operators'
-import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
-import { pick } from 'lodash-es'
-
-@Component({
-  selector: 'my-account-video-settings',
-  templateUrl: './my-account-video-settings.component.html',
-  styleUrls: [ './my-account-video-settings.component.scss' ]
-})
-export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit, OnDestroy {
-  @Input() user: User = null
-  @Input() reactiveUpdate = false
-  @Input() notifyOnUpdate = true
-  @Input() userInformationLoaded: Subject<any>
-
-  languageItems: SelectItem[] = []
-  defaultNSFWPolicy: NSFWPolicyType
-  formValuesWatcher: Subscription
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private authService: AuthService,
-    private notifier: Notifier,
-    private userService: UserService,
-    private serverService: ServerService,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    let oldForm: any
-
-    this.buildForm({
-      nsfwPolicy: null,
-      webTorrentEnabled: null,
-      autoPlayVideo: null,
-      autoPlayNextVideo: null,
-      videoLanguages: null
-    })
-
-    forkJoin([
-      this.serverService.getVideoLanguages(),
-      this.serverService.getConfig(),
-      this.userInformationLoaded.pipe(first())
-    ]).subscribe(([ languages, config ]) => {
-      this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ]
-      this.languageItems = this.languageItems
-                               .concat(languages.map(l => ({ label: l.label, value: l.id })))
-
-      const videoLanguages = this.user.videoLanguages
-        ? this.user.videoLanguages
-        : this.languageItems.map(l => l.value)
-
-      this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy
-
-      this.form.patchValue({
-        nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy,
-        webTorrentEnabled: this.user.webTorrentEnabled,
-        autoPlayVideo: this.user.autoPlayVideo === true,
-        autoPlayNextVideo: this.user.autoPlayNextVideo,
-        videoLanguages
-      })
-
-      if (this.reactiveUpdate) {
-        oldForm = { ...this.form.value }
-        this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
-          const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
-          oldForm = { ...this.form.value }
-          this.updateDetails([updatedKey])
-        })
-      }
-    })
-  }
-
-  ngOnDestroy () {
-    this.formValuesWatcher?.unsubscribe()
-  }
-
-  updateDetails (onlyKeys?: string[]) {
-    const nsfwPolicy = this.form.value[ 'nsfwPolicy' ]
-    const webTorrentEnabled = this.form.value['webTorrentEnabled']
-    const autoPlayVideo = this.form.value['autoPlayVideo']
-    const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
-
-    let videoLanguages: string[] = this.form.value['videoLanguages']
-    if (Array.isArray(videoLanguages)) {
-      if (videoLanguages.length === this.languageItems.length) {
-        videoLanguages = null // null means "All"
-      } else if (videoLanguages.length > 20) {
-        this.notifier.error('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.')
-        return
-      } else if (videoLanguages.length === 0) {
-        this.notifier.error('You need to enabled at least 1 video language.')
-        return
-      }
-    }
-
-    let details: UserUpdateMe = {
-      nsfwPolicy,
-      webTorrentEnabled,
-      autoPlayVideo,
-      autoPlayNextVideo,
-      videoLanguages
-    }
-
-    if (onlyKeys) details = pick(details, onlyKeys)
-
-    if (this.authService.isLoggedIn()) {
-      this.userService.updateMyProfile(details).subscribe(
-        () => {
-          this.authService.refreshUserInformation()
-
-          if (this.notifyOnUpdate) this.notifier.success(this.i18n('Video settings updated.'))
-        },
-
-        err => this.notifier.error(err.message)
-      )
-    } else {
-      this.userService.updateMyAnonymousProfile(details)
-      if (this.notifyOnUpdate) this.notifier.success(this.i18n('Display/Video settings updated.'))
-    }
-  }
-
-  getDefaultVideoLanguageLabel () {
-    return this.i18n('No language')
-  }
-
-  getSelectedVideoLanguageLabel () {
-    return this.i18n('{{\'{0} languages selected')
-  }
-}
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
index b347fc3fe..390293a28 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -1,9 +1,8 @@
-import { Component, OnInit } from '@angular/core'
-import { Notifier } from '@app/core'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { UserSubscriptionService } from '@app/shared/user-subscription'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { Subject } from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { ComponentPagination, Notifier } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
 
 @Component({
   selector: 'my-account-subscriptions',
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
index 4452154eb..42ddb0ee2 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
@@ -1,9 +1,8 @@
-import { Component, OnInit } from '@angular/core'
-import { RestPagination, RestTable } from '@app/shared'
 import { SortMeta } from 'primeng/api'
-import { Notifier } from '@app/core'
-import { VideoImport, VideoImportState } from '../../../../../shared/models/videos'
-import { VideoImportService } from '@app/shared/video-import'
+import { Component, OnInit } from '@angular/core'
+import { Notifier, RestPagination, RestTable } from '@app/core'
+import { VideoImportService } from '@app/shared/shared-main'
+import { VideoImport, VideoImportState } from '@shared/models'
 
 @Component({
   selector: 'my-account-video-imports',
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
index e47e5f980..e72ae2366 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
@@ -1,14 +1,13 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
+import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
+import { VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { VideoPlaylistValidatorsService } from '@app/shared'
 import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylistPrivacy } from '@shared/models/videos/playlist/video-playlist-privacy.model'
-import { populateAsyncUserVideoChannels } from '@app/shared/misc/utils'
+import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
+import { populateAsyncUserVideoChannels } from '@app/helpers'
 
 @Component({
   selector: 'my-account-video-playlist-create',
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
index e94188786..7ae8de75e 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts
@@ -1,6 +1,6 @@
-import { FormReactive } from '@app/shared'
-import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
+import { FormReactive } from '@app/shared/shared-forms'
 import { VideoConstant, VideoPlaylistPrivacy } from '@shared/models'
+import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
 
 export abstract class MyAccountVideoPlaylistEdit extends FormReactive {
   // Declare it here to avoid errors in create template
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
index 366640618..0add81c38 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -1,16 +1,9 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { Notifier, ServerService } from '@app/core'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { Subject, Subscription } from 'rxjs'
-import { ActivatedRoute } from '@angular/router'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
-import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ScreenService } from '@app/shared/misc/screen.service'
 import { CdkDragDrop } from '@angular/cdk/drag-drop'
-import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { ComponentPagination, Notifier, ScreenService } from '@app/core'
+import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 
 @Component({
   selector: 'my-account-video-playlist-elements',
@@ -33,12 +26,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
   private paramsSub: Subscription
 
   constructor (
-    private authService: AuthService,
-    private serverService: ServerService,
     private notifier: Notifier,
-    private confirmService: ConfirmService,
     private route: ActivatedRoute,
-    private i18n: I18n,
     private screenService: ScreenService,
     private videoPlaylistService: VideoPlaylistService
   ) {}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
index 2f85cdd96..6787fb757 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
@@ -1,16 +1,14 @@
+import { forkJoin, Subscription } from 'rxjs'
+import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { forkJoin, Subscription } from 'rxjs'
+import { populateAsyncUserVideoChannels } from '@app/helpers'
+import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
+import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { MyAccountVideoPlaylistEdit } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-edit'
-import { populateAsyncUserVideoChannels } from '@app/shared/misc/utils'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
-import { VideoPlaylistValidatorsService } from '@app/shared'
-import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model'
-import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
-import { delayWhen, map, switchMap } from 'rxjs/operators'
+import { VideoPlaylistUpdate } from '@shared/models'
+import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
 
 @Component({
   selector: 'my-account-video-playlist-update',
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
index c6728cc30..ea3bcde4f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
@@ -1,15 +1,10 @@
+import { Subject } from 'rxjs'
+import { debounceTime, flatMap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
-import { Notifier } from '@app/core'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-import { User } from '@app/shared'
-import { flatMap, debounceTime } from 'rxjs/operators'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core'
+import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylistType } from '@shared/models'
-import { Subject } from 'rxjs'
 
 @Component({
   selector: 'my-account-video-playlists',
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 0ec033eaf..3cfe8fb38 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,21 +1,15 @@
 import { concat, Observable, Subject } from 'rxjs'
-import { tap, toArray, debounceTime } from 'rxjs/operators'
-import { Component, ViewChild, OnInit } from '@angular/core'
+import { debounceTime, tap, toArray } from 'rxjs/operators'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { immutableAssign } from '@app/shared/misc/utils'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Notifier, ServerService } from '@app/core'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-import { Video } from '../../shared/video/video.model'
-import { VideoService } from '../../shared/video/video.service'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
+import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
+import { immutableAssign } from '@app/helpers'
+import { Video, VideoService } from '@app/shared/shared-main'
+import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ScreenService } from '@app/shared/misc/screen.service'
+import { VideoSortField } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
-import { MiniatureDisplayOptions, OwnerDisplayType } from '@app/shared/video/video-miniature.component'
-import { SelectionType, VideosSelectionComponent } from '@app/shared/video/videos-selection.component'
-import { VideoSortField } from '@app/shared/video/sort-field.type'
-import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 
 @Component({
   selector: 'my-account-videos',
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
index f4e2b5955..18e716a09 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -1,11 +1,9 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { Notifier } from '@app/core'
+import { Notifier, UserService } from '@app/core'
+import { FormReactive, FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared/shared-forms'
+import { Video, VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { FormReactive, UserService } from '../../../shared/index'
-import { Video } from '@app/shared/video/video.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared'
-import { VideoOwnershipService } from '@app/shared/video-ownership'
 
 @Component({
   selector: 'my-video-change-ownership',
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index ca447c054..ea4da676a 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { TopMenuDropdownParam } from '@app/shared/menu/top-menu-dropdown.component'
 import { ServerConfig } from '@shared/models'
+import { TopMenuDropdownParam } from './top-menu-dropdown.component'
 
 @Component({
   selector: 'my-my-account',
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 72b9fd9f2..9a11a89ea 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -1,47 +1,55 @@
-import { NgModule } from '@angular/core'
-import { TableModule } from 'primeng/table'
 import { AutoCompleteModule } from 'primeng/autocomplete'
 import { InputSwitchModule } from 'primeng/inputswitch'
-import { SharedModule } from '../shared'
+import { TableModule } from 'primeng/table'
+import { DragDropModule } from '@angular/cdk/drag-drop'
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { SharedModerationModule } from '@app/shared/shared-moderation'
+import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
+import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription/shared-user-subscription.module'
+import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
+import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist/shared-video-playlist.module'
+import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
+import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-account-server-blocklist.component'
+import { MyAccountHistoryComponent } from './my-account-history/my-account-history.component'
+import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.component'
+import { MyAccountAcceptOwnershipComponent } from './my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component'
+import { MyAccountOwnershipComponent } from './my-account-ownership/my-account-ownership.component'
 import { MyAccountRoutingModule } from './my-account-routing.module'
+import { MyAccountChangeEmailComponent } from './my-account-settings/my-account-change-email'
 import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component'
+import { MyAccountDangerZoneComponent } from './my-account-settings/my-account-danger-zone'
+import { MyAccountNotificationPreferencesComponent } from './my-account-settings/my-account-notification-preferences'
+import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
-import { MyAccountComponent } from './my-account.component'
+import { MyAccountSubscriptionsComponent } from './my-account-subscriptions/my-account-subscriptions.component'
+import { MyAccountVideoImportsComponent } from './my-account-video-imports/my-account-video-imports.component'
+import { MyAccountVideoPlaylistCreateComponent } from './my-account-video-playlists/my-account-video-playlist-create.component'
+import { MyAccountVideoPlaylistElementsComponent } from './my-account-video-playlists/my-account-video-playlist-elements.component'
+import { MyAccountVideoPlaylistUpdateComponent } from './my-account-video-playlists/my-account-video-playlist-update.component'
+import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/my-account-video-playlists.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
 import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-ownership/video-change-ownership.component'
-import { MyAccountOwnershipComponent } from './my-account-ownership/my-account-ownership.component'
-import { MyAccountAcceptOwnershipComponent } from './my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component'
-import { MyAccountProfileComponent } from '@app/+my-account/my-account-settings/my-account-profile/my-account-profile.component'
-import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
-import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settings/my-account-danger-zone'
-import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
-import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
-import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
-import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
-import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
-import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences'
-import {
-  MyAccountVideoPlaylistCreateComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
-import {
-  MyAccountVideoPlaylistUpdateComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
-import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component'
-import {
-  MyAccountVideoPlaylistElementsComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
+import { MyAccountComponent } from './my-account.component'
+import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
 
 @NgModule({
   imports: [
-    TableModule,
     MyAccountRoutingModule,
+
     AutoCompleteModule,
-    SharedModule,
     TableModule,
     InputSwitchModule,
-    DragDropModule
+    DragDropModule,
+
+    SharedMainModule,
+    SharedModerationModule,
+    SharedVideoMiniatureModule,
+    SharedUserSubscriptionModule,
+    SharedVideoPlaylistModule,
+    SharedUserInterfaceSettingsModule,
+    SharedGlobalIconModule
   ],
 
   declarations: [
@@ -68,7 +76,9 @@ import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-setti
     MyAccountVideoPlaylistCreateComponent,
     MyAccountVideoPlaylistUpdateComponent,
     MyAccountVideoPlaylistsComponent,
-    MyAccountVideoPlaylistElementsComponent
+    MyAccountVideoPlaylistElementsComponent,
+
+    TopMenuDropdownComponent
   ],
 
   exports: [
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html
deleted file mode 100644
index d01b9ac7f..000000000
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<ng-container *ngIf="actor">
-  <div class="actor">
-    <div class="d-flex">
-      <img [src]="actor.avatarUrl" alt="Avatar" />
-
-      <div class="actor-img-edit-container">
-        <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
-          <my-global-icon iconName="edit"></my-global-icon>
-          <label for="avatarfile" i18n>Change your avatar</label>
-          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
-        </div>
-      </div>
-    </div>
-
-
-    <div class="actor-info">
-      <div class="actor-info-names">
-        <div class="actor-info-display-name">{{ actor.displayName }}</div>
-        <div class="actor-info-username">{{ actor.name }}</div>
-      </div>
-      <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
-    </div>
-  </div>
-</ng-container>
\ No newline at end of file
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
deleted file mode 100644
index 5a66ecfd2..000000000
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.actor {
-  display: flex;
-
-  img {
-    @include avatar(100px);
-
-    margin-right: 15px;
-  }
-
-  .actor-img-edit-container {
-    position: relative;
-    width: 0;
-
-    .actor-img-edit-button {
-      @include peertube-button-file(21px);
-      @include button-with-icon(19px);
-    
-      margin-top: 10px;
-      margin-bottom: 5px;
-      border-radius: 50%;
-      top: 55px;
-      right: 45px;
-      cursor: pointer;
-
-      input {
-        width: 30px;
-        height: 30px;
-      }
-
-      my-global-icon {
-        right: 7px;
-      }
-    }
-  }
-
-  .actor-info {
-    justify-content: center;
-    display: inline-flex;
-    flex-direction: column;
-
-    .actor-info-names {
-      display: flex;
-      align-items: center;
-
-      .actor-info-display-name {
-        font-size: 20px;
-        font-weight: $font-bold;
-
-        @media screen and (max-width: $small-view) {
-          font-size: 16px;
-        }
-      }
-
-      .actor-info-username {
-        margin-left: 7px;
-        position: relative;
-        top: 2px;
-        font-size: 14px;
-        color: $grey-actor-name;
-      }
-    }
-
-    .actor-info-followers {
-      font-size: 15px;
-      padding-bottom: .5rem;
-    }
-  }
-}
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
deleted file mode 100644
index 8e4a7a602..000000000
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ServerService } from '../../core/server'
-import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { Account } from '@app/shared/account/account.model'
-import { Notifier } from '@app/core'
-import { ServerConfig } from '@shared/models'
-import { BytesPipe } from 'ngx-pipes'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-
-@Component({
-  selector: 'my-actor-avatar-info',
-  templateUrl: './actor-avatar-info.component.html',
-  styleUrls: [ './actor-avatar-info.component.scss' ]
-})
-export class ActorAvatarInfoComponent implements OnInit {
-  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
-
-  @Input() actor: VideoChannel | Account
-
-  @Output() avatarChange = new EventEmitter<FormData>()
-
-  maxSizeText: string
-
-  private serverConfig: ServerConfig
-  private bytesPipe: BytesPipe
-
-  constructor (
-    private serverService: ServerService,
-    private notifier: Notifier,
-    private i18n: I18n
-  ) {
-    this.bytesPipe = new BytesPipe()
-    this.maxSizeText = this.i18n('max size')
-  }
-
-  ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
-  }
-
-  onAvatarChange () {
-    const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
-    if (avatarfile.size > this.maxAvatarSize) {
-      this.notifier.error('Error', 'This image is too large.')
-      return
-    }
-
-    const formData = new FormData()
-    formData.append('avatarfile', avatarfile)
-
-    this.avatarChange.emit(formData)
-  }
-
-  get maxAvatarSize () {
-    return this.serverConfig.avatar.file.size.max
-  }
-
-  get maxAvatarSizeInBytes () {
-    return this.bytesPipe.transform(this.maxAvatarSize)
-  }
-
-  get avatarExtensions () {
-    return this.serverConfig.avatar.file.extensions.join(', ')
-  }
-}
diff --git a/client/src/app/+my-account/top-menu-dropdown.component.html b/client/src/app/+my-account/top-menu-dropdown.component.html
new file mode 100644
index 000000000..aeaceb662
--- /dev/null
+++ b/client/src/app/+my-account/top-menu-dropdown.component.html
@@ -0,0 +1,50 @@
+<div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
+  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
+
+    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
+
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
+      #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+      <span
+        *ngIf="isInSmallView"
+        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
+        (click)="openModal(id)" role="button" class="title-page title-page-settings">
+        <ng-container i18n>{{ menuEntry.label }}</ng-container>
+        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
+      </span>
+
+      <span
+        *ngIf="!isInSmallView"
+        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
+        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
+      >
+        <ng-container i18n>{{ menuEntry.label }}</ng-container>
+        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
+      </span>
+
+      <div ngbDropdownMenu>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <ng-container *ngFor="let menuEntry of menuEntries; index as id">
+      <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
+        <a *ngFor="let menuChild of menuEntry.children"
+          [ngClass]="{ icon: hasIcons }"
+          [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
+      </div>
+    </ng-container>
+  </div>
+</ng-template>
diff --git a/client/src/app/+my-account/top-menu-dropdown.component.scss b/client/src/app/+my-account/top-menu-dropdown.component.scss
new file mode 100644
index 000000000..84dd7dce3
--- /dev/null
+++ b/client/src/app/+my-account/top-menu-dropdown.component.scss
@@ -0,0 +1,56 @@
+@import '_variables';
+@import '_mixins';
+
+.parent-entry {
+  span[role=button] {
+    cursor: pointer;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+::ng-deep .dropdown-toggle::after {
+  position: relative;
+  top: 2px;
+}
+
+::ng-deep .dropdown-menu {
+  margin-top: 0 !important;
+}
+
+.icon {
+  @include dropdown-with-icon-item;
+
+  top: -1px;
+}
+
+.sub-menu.no-scroll {
+  overflow-x: hidden;
+}
+
+.modal-body {
+  .hidden {
+    display: none;
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+
+    &.active {
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/+my-account/top-menu-dropdown.component.ts b/client/src/app/+my-account/top-menu-dropdown.component.ts
new file mode 100644
index 000000000..5909db0b5
--- /dev/null
+++ b/client/src/app/+my-account/top-menu-dropdown.component.ts
@@ -0,0 +1,131 @@
+import { Subscription } from 'rxjs'
+import { filter, take } from 'rxjs/operators'
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { NavigationEnd, Router } from '@angular/router'
+import { MenuService, ScreenService } from '@app/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+
+export type TopMenuDropdownParam = {
+  label: string
+  routerLink?: string
+
+  children?: {
+    label: string
+    routerLink: string
+
+    iconName?: GlobalIconName
+  }[]
+}
+
+@Component({
+  selector: 'my-top-menu-dropdown',
+  templateUrl: './top-menu-dropdown.component.html',
+  styleUrls: [ './top-menu-dropdown.component.scss' ]
+})
+export class TopMenuDropdownComponent implements OnInit, OnDestroy {
+  @Input() menuEntries: TopMenuDropdownParam[] = []
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
+  isModalOpened = false
+  currentMenuEntryIndex: number
+
+  private openedOnHover = false
+  private routeSub: Subscription
+
+  constructor (
+    private router: Router,
+    private modalService: NgbModal,
+    private screen: ScreenService,
+    private menuService: MenuService
+  ) { }
+
+  get isInSmallView () {
+    let marginLeft = 0
+    if (this.menuService.isMenuDisplayed) {
+      marginLeft = this.menuService.menuWidth
+    }
+
+    return this.screen.isInSmallView(marginLeft)
+  }
+
+  ngOnInit () {
+    this.updateChildLabels(window.location.pathname)
+
+    this.routeSub = this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(() => this.updateChildLabels(window.location.pathname))
+
+    this.hasIcons = this.menuEntries.some(
+      e => e.children && e.children.some(c => !!c.iconName)
+    )
+  }
+
+  ngOnDestroy () {
+    if (this.routeSub) this.routeSub.unsubscribe()
+  }
+
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(() => this.openedOnHover = false)
+  }
+
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+
+    return dropdown.toggle()
+  }
+
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+
+    dropdown.close()
+    this.openedOnHover = false
+  }
+
+  openModal (index: number) {
+    this.currentMenuEntryIndex = index
+    this.isModalOpened = true
+
+    this.modalService.open(this.modal, {
+      centered: true,
+      beforeDismiss: async () => {
+        this.onModalDismiss()
+        return true
+      }
+    })
+  }
+
+  onModalDismiss () {
+    this.isModalOpened = false
+  }
+
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+
+  private updateChildLabels (path: string) {
+    this.suffixLabels = {}
+
+    for (const entry of this.menuEntries) {
+      if (!entry.children) continue
+
+      for (const child of entry.children) {
+        if (path.startsWith(child.routerLink)) {
+          this.suffixLabels[entry.label] = child.label
+        }
+      }
+    }
+  }
+}