Migrate to standalone components

client/src/app/+about/about-follows/about-follows.component.ts

@@ -3,11 +3,14 @@ import { Component, OnInit } from '@angular/core'
 import { ComponentPagination, hasMoreItems, Notifier, RestService, ServerService } from '@app/core'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { Actor } from '@peertube/peertube-models'
+import { NgIf, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-about-follows',
   templateUrl: './about-follows.component.html',
-  styleUrls: [ './about-follows.component.scss' ]
+  styleUrls: [ './about-follows.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, NgFor ]
 })
 
 export class AboutFollowsComponent implements OnInit {

client/src/app/+about/about-instance/about-instance.component.ts

@@ -1,17 +1,32 @@
-import { ViewportScroller } from '@angular/common'
+import { ViewportScroller, NgIf, NgFor } from '@angular/common'
 import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, RouterLink } from '@angular/router'
 import { Notifier, ServerService } from '@app/core'
-import { AboutHTML } from '@app/shared/shared-instance'
 import { HTMLServerConfig, ServerStats } from '@peertube/peertube-models'
 import { copyToClipboard } from '@root-helpers/utils'
 import { ResolverData } from './about-instance.resolver'
 import { ContactAdminModalComponent } from './contact-admin-modal.component'
+import { InstanceStatisticsComponent } from './instance-statistics.component'
+import { InstanceFeaturesTableComponent } from '../../shared/shared-instance/instance-features-table.component'
+import { PluginSelectorDirective } from '../../shared/shared-main/plugins/plugin-selector.directive'
+import { CustomMarkupContainerComponent } from '../../shared/shared-custom-markup/custom-markup-container.component'
+import { AboutHTML } from '@app/shared/shared-main'
 
 @Component({
   selector: 'my-about-instance',
   templateUrl: './about-instance.component.html',
-  styleUrls: [ './about-instance.component.scss' ]
+  styleUrls: [ './about-instance.component.scss' ],
+  standalone: true,
+  imports: [
+    NgIf,
+    RouterLink,
+    NgFor,
+    CustomMarkupContainerComponent,
+    PluginSelectorDirective,
+    InstanceFeaturesTableComponent,
+    InstanceStatisticsComponent,
+    ContactAdminModalComponent
+  ]
 })
 export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>

client/src/app/+about/about-instance/about-instance.resolver.ts

@@ -3,8 +3,8 @@ import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { ServerService } from '@app/core'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
-import { AboutHTML, InstanceService } from '@app/shared/shared-instance'
 import { About, ServerStats } from '@peertube/peertube-models'
+import { InstanceService, AboutHTML } from '@app/shared/shared-main'
 
 export type ResolverData = {
   serverStats: ServerStats

client/src/app/+about/about-instance/contact-admin-modal.component.ts

@@ -8,10 +8,13 @@ import {
   SUBJECT_VALIDATOR
 } from '@app/shared/form-validators/instance-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { InstanceService } from '@app/shared/shared-instance'
+import { InstanceService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { HTMLServerConfig, HttpStatusCode } from '@peertube/peertube-models'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgClass } from '@angular/common'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 type Prefill = {
   subject?: string
@@ -21,7 +24,9 @@ type Prefill = {
 @Component({
   selector: 'my-contact-admin-modal',
   templateUrl: './contact-admin-modal.component.html',
-  styleUrls: [ './contact-admin-modal.component.scss' ]
+  styleUrls: [ './contact-admin-modal.component.scss' ],
+  standalone: true,
+  imports: [ GlobalIconComponent, NgIf, FormsModule, ReactiveFormsModule, NgClass ]
 })
 export class ContactAdminModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: NgbModal

client/src/app/+about/about-instance/instance-statistics.component.ts

@@ -1,10 +1,15 @@
 import { Component, Input } from '@angular/core'
 import { ServerStats } from '@peertube/peertube-models'
+import { BytesPipe } from '../../shared/shared-main/angular/bytes.pipe'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { NgIf, DecimalPipe } from '@angular/common'
 
 @Component({
   selector: 'my-instance-statistics',
   templateUrl: './instance-statistics.component.html',
-  styleUrls: [ './instance-statistics.component.scss' ]
+  styleUrls: [ './instance-statistics.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, GlobalIconComponent, DecimalPipe, BytesPipe ]
 })
 export class InstanceStatisticsComponent {
   @Input() serverStats: ServerStats

client/src/app/+about/about-peertube/about-peertube.component.ts

@@ -4,7 +4,8 @@ import { ViewportScroller } from '@angular/common'
 @Component({
   selector: 'my-about-peertube',
   templateUrl: './about-peertube.component.html',
-  styleUrls: [ './about-peertube.component.scss' ]
+  styleUrls: [ './about-peertube.component.scss' ],
+  standalone: true
 })
 
 export class AboutPeertubeComponent implements AfterViewChecked {

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

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core'
 import { ScreenService } from '@app/core'
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
+import { PluginSelectorDirective } from '../shared/shared-main/plugins/plugin-selector.directive'
+import { NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-about',
-  templateUrl: './about.component.html'
+  templateUrl: './about.component.html',
+  standalone: true,
+  imports: [ NgClass, PluginSelectorDirective, RouterLink, RouterLinkActive, RouterOutlet ]
 })
 
 export class AboutComponent {

client/src/app/+about/about.module.ts

@@ -1,46 +0,0 @@
-import { NgModule } from '@angular/core'
-import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
-import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
-import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
-import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
-import { InstanceStatisticsComponent } from '@app/+about/about-instance/instance-statistics.component'
-import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
-import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedInstanceModule } from '@app/shared/shared-instance'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { AboutRoutingModule } from './about-routing.module'
-import { AboutComponent } from './about.component'
-
-@NgModule({
-  imports: [
-    AboutRoutingModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedInstanceModule,
-    SharedGlobalIconModule,
-    SharedCustomMarkupModule
-  ],
-
-  declarations: [
-    AboutComponent,
-
-    AboutInstanceComponent,
-    ContactAdminModalComponent,
-    InstanceStatisticsComponent,
-
-    AboutPeertubeComponent,
-    AboutFollowsComponent
-  ],
-
-  exports: [
-    AboutComponent
-  ],
-
-  providers: [
-    AboutInstanceResolver
-  ]
-})
-export class AboutModule { }

client/src/app/+about/index.ts

@@ -1,3 +0,0 @@
-export * from './about-routing.module'
-export * from './about.component'
-export * from './about.module'

client/src/app/+about/routes.ts

@@ -1,15 +1,22 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { AboutComponent } from './about.component'
+import { InstanceFollowService } from '@app/shared/shared-instance'
+import { CustomMarkupService, DynamicElementService } from '@app/shared/shared-custom-markup'
 
-const aboutRoutes: Routes = [
+export default [
   {
     path: '',
     component: AboutComponent,
+    providers: [
+      AboutInstanceResolver,
+      InstanceFollowService,
+      CustomMarkupService,
+      DynamicElementService
+    ],
     children: [
       {
         path: '',
@@ -61,10 +68,4 @@ const aboutRoutes: Routes = [
       }
     ]
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(aboutRoutes) ],
-  exports: [ RouterModule ]
-})
-export class AboutRoutingModule {}

client/src/app/+accounts/account-video-channels/account-video-channels.component.ts

@@ -6,11 +6,19 @@ import { SimpleMemoize } from '@app/helpers'
 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 import { NSFWPolicyType, VideoSortField } from '@peertube/peertube-models'
+import { VideoMiniatureComponent } from '../../shared/shared-video-miniature/video-miniature.component'
+import { SubscribeButtonComponent } from '../../shared/shared-user-subscription/subscribe-button.component'
+import { RouterLink } from '@angular/router'
+import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { NgIf, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-account-video-channels',
   templateUrl: './account-video-channels.component.html',
-  styleUrls: [ './account-video-channels.component.scss' ]
+  styleUrls: [ './account-video-channels.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, InfiniteScrollerDirective, NgFor, ActorAvatarComponent, RouterLink, SubscribeButtonComponent, VideoMiniatureComponent ]
 })
 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   account: Account

client/src/app/+accounts/account-videos/account-videos.component.ts

@@ -5,10 +5,14 @@ import { ComponentPaginationLight, DisableForReuseHook, ScreenService } from '@a
 import { Account, AccountService, VideoService } from '@app/shared/shared-main'
 import { VideoFilters } from '@app/shared/shared-video-miniature'
 import { VideoSortField } from '@peertube/peertube-models'
+import { VideosListComponent } from '../../shared/shared-video-miniature/videos-list.component'
+import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-account-videos',
-  templateUrl: './account-videos.component.html'
+  templateUrl: './account-videos.component.html',
+  standalone: true,
+  imports: [ NgIf, VideosListComponent ]
 })
 export class AccountVideosComponent implements OnInit, OnDestroy, DisableForReuseHook {
   getVideosObservableFunction = this.getVideosObservable.bind(this)

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

@@ -1,7 +1,7 @@
 import { Subscription } from 'rxjs'
 import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
 import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
 import {
   Account,
@@ -14,10 +14,37 @@ import {
 } from '@app/shared/shared-main'
 import { AccountReportComponent, BlocklistService } from '@app/shared/shared-moderation'
 import { HttpStatusCode, User, UserRight } from '@peertube/peertube-models'
+import { SimpleSearchInputComponent } from '../shared/shared-main/misc/simple-search-input.component'
+import { ListOverflowComponent } from '../shared/shared-main/misc/list-overflow.component'
+import { SubscribeButtonComponent } from '../shared/shared-user-subscription/subscribe-button.component'
+import { CopyButtonComponent } from '../shared/shared-main/buttons/copy-button.component'
+import { AccountBlockBadgesComponent } from '../shared/shared-moderation/account-block-badges.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { UserModerationDropdownComponent } from '../shared/shared-moderation/user-moderation-dropdown.component'
+import { ActorAvatarComponent } from '../shared/shared-actor-image/actor-avatar.component'
+import { NgIf, NgClass, DatePipe } from '@angular/common'
 
 @Component({
   templateUrl: './accounts.component.html',
-  styleUrls: [ './accounts.component.scss' ]
+  styleUrls: [ './accounts.component.scss' ],
+  standalone: true,
+  imports: [
+    NgIf,
+    ActorAvatarComponent,
+    UserModerationDropdownComponent,
+    NgbTooltip,
+    AccountBlockBadgesComponent,
+    CopyButtonComponent,
+    NgClass,
+    RouterLink,
+    SubscribeButtonComponent,
+    RouterLinkActive,
+    ListOverflowComponent,
+    SimpleSearchInputComponent,
+    RouterOutlet,
+    AccountReportComponent,
+    DatePipe
+  ]
 })
 export class AccountsComponent implements OnInit, OnDestroy {
   @ViewChild('accountReportModal') accountReportModal: AccountReportComponent

client/src/app/+accounts/accounts.module.ts

@@ -1,39 +0,0 @@
-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 { SharedModerationModule } from '@app/shared/shared-moderation'
-import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
-import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
-import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
-import { AccountVideosComponent } from './account-videos/account-videos.component'
-import { AccountsRoutingModule } from './accounts-routing.module'
-import { AccountsComponent } from './accounts.component'
-
-@NgModule({
-  imports: [
-    AccountsRoutingModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedUserSubscriptionModule,
-    SharedModerationModule,
-    SharedVideoMiniatureModule,
-    SharedGlobalIconModule,
-    SharedActorImageModule
-  ],
-
-  declarations: [
-    AccountsComponent,
-    AccountVideosComponent,
-    AccountVideoChannelsComponent
-  ],
-
-  exports: [
-    AccountsComponent
-  ],
-
-  providers: []
-})
-export class AccountsModule { }

client/src/app/+accounts/index.ts

@@ -1,3 +0,0 @@
-export * from './accounts-routing.module'
-export * from './accounts.component'
-export * from './accounts.module'

client/src/app/+accounts/routes.ts

@@ -1,10 +1,12 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
 import { AccountsComponent } from './accounts.component'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+import { BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
+import { VideoPlaylistService } from '@app/shared/shared-video-playlist'
 
-const accountsRoutes: Routes = [
+export default [
   {
     path: 'peertube',
     redirectTo: '/videos/local'
@@ -12,6 +14,12 @@ const accountsRoutes: Routes = [
   {
     path: ':accountId',
     component: AccountsComponent,
+    providers: [
+      UserSubscriptionService,
+      BlocklistService,
+      VideoPlaylistService,
+      VideoBlockService
+    ],
     children: [
       {
         path: '',
@@ -48,10 +56,4 @@ const accountsRoutes: Routes = [
       }
     ]
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(accountsRoutes) ],
-  exports: [ RouterModule ]
-})
-export class AccountsRoutingModule {}

client/src/app/+admin/admin-routing.module.ts

@@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { ConfigRoutes } from '@app/+admin/config'
-import { ModerationRoutes } from '@app/+admin/moderation/moderation.routes'
-import { PluginsRoutes } from '@app/+admin/plugins/plugins.routes'
-import { SystemRoutes } from '@app/+admin/system'
-import { AdminComponent } from './admin.component'
-import { FollowsRoutes } from './follows'
-import { OverviewRoutes } from './overview'
-
-const adminRoutes: Routes = [
-  {
-    path: '',
-    component: AdminComponent,
-    children: [
-      {
-        path: '',
-        redirectTo: 'users',
-        pathMatch: 'full'
-      },
-
-      ...FollowsRoutes,
-      ...OverviewRoutes,
-      ...ModerationRoutes,
-      ...SystemRoutes,
-      ...ConfigRoutes,
-      ...PluginsRoutes
-    ]
-  }
-]
-
-@NgModule({
-  imports: [ RouterModule.forChild(adminRoutes) ],
-  exports: [ RouterModule ]
-})
-export class AdminRoutingModule {}

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

@@ -3,10 +3,15 @@ import { AuthService, ScreenService, ServerService } from '@app/core'
 import { ListOverflowItem } from '@app/shared/shared-main'
 import { TopMenuDropdownParam } from '@app/shared/shared-main/misc/top-menu-dropdown.component'
 import { UserRight } from '@peertube/peertube-models'
+import { RouterOutlet } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { TopMenuDropdownComponent } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
   templateUrl: './admin.component.html',
-  styleUrls: [ './admin.component.scss' ]
+  styleUrls: [ './admin.component.scss' ],
+  standalone: true,
+  imports: [ TopMenuDropdownComponent, NgClass, RouterOutlet ]
 })
 export class AdminComponent implements OnInit {
   items: ListOverflowItem[] = []

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

@@ -1,159 +0,0 @@
-import { ChartModule } from 'primeng/chart'
-import { TableModule } from 'primeng/table'
-import { NgModule } from '@angular/core'
-import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
-import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
-import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
-import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { SharedModerationModule } from '@app/shared/shared-moderation'
-import { SharedTablesModule } from '@app/shared/shared-tables'
-import { SharedUsersModule } from '@app/shared/shared-users'
-import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
-import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { AdminRoutingModule } from './admin-routing.module'
-import { AdminComponent } from './admin.component'
-import {
-  EditAdvancedConfigurationComponent,
-  EditBasicConfigurationComponent,
-  EditConfigurationService,
-  EditCustomConfigComponent,
-  EditHomepageComponent,
-  EditInstanceInformationComponent,
-  EditLiveConfigurationComponent,
-  EditVODTranscodingComponent
-} from './config'
-import { ConfigService } from './config/shared/config.service'
-import { FollowersListComponent, FollowModalComponent, VideoRedundanciesListComponent } from './follows'
-import { FollowingListComponent } from './follows/following-list/following-list.component'
-import { RedundancyCheckboxComponent } from './follows/shared/redundancy-checkbox.component'
-import { VideoRedundancyInformationComponent } from './follows/video-redundancies-list/video-redundancy-information.component'
-import {
-  AbuseListComponent,
-  AdminRegistrationService,
-  ProcessRegistrationModalComponent,
-  RegistrationListComponent,
-  VideoBlockListComponent
-} from './moderation'
-import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from './moderation/instance-blocklist'
-import {
-  UserCreateComponent,
-  UserListComponent,
-  UserPasswordComponent,
-  UserUpdateComponent,
-  VideoAdminService,
-  VideoCommentListComponent,
-  VideoListComponent
-} from './overview'
-import {
-  PluginApiService,
-  PluginCardComponent,
-  PluginListInstalledComponent,
-  PluginNavigationComponent,
-  PluginSearchComponent,
-  PluginShowInstalledComponent
-} from './plugins'
-import { SharedAdminModule } from './shared'
-import {
-  JobService,
-  LogsComponent,
-  LogsService,
-  RunnerJobListComponent,
-  RunnerListComponent,
-  RunnerRegistrationTokenListComponent,
-  RunnerService
-} from './system'
-import { DebugComponent, DebugService } from './system/debug'
-import { JobsComponent } from './system/jobs'
-
-@NgModule({
-  imports: [
-    AdminRoutingModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedModerationModule,
-    SharedGlobalIconModule,
-    SharedAbuseListModule,
-    SharedVideoCommentModule,
-    SharedActorImageModule,
-    SharedActorImageEditModule,
-    SharedCustomMarkupModule,
-    SharedVideoMiniatureModule,
-    SharedTablesModule,
-    SharedUsersModule,
-    SharedAdminModule,
-
-    TableModule,
-    ChartModule
-  ],
-
-  declarations: [
-    AdminComponent,
-
-    VideoListComponent,
-
-    FollowersListComponent,
-    FollowingListComponent,
-    FollowModalComponent,
-    RedundancyCheckboxComponent,
-    VideoRedundanciesListComponent,
-    VideoRedundancyInformationComponent,
-
-    UserCreateComponent,
-    UserUpdateComponent,
-    UserPasswordComponent,
-    UserListComponent,
-
-    VideoBlockListComponent,
-    AbuseListComponent,
-    VideoCommentListComponent,
-
-    InstanceServerBlocklistComponent,
-    InstanceAccountBlocklistComponent,
-
-    PluginListInstalledComponent,
-    PluginSearchComponent,
-    PluginShowInstalledComponent,
-    PluginCardComponent,
-    PluginNavigationComponent,
-
-    JobsComponent,
-    LogsComponent,
-    DebugComponent,
-
-    EditCustomConfigComponent,
-    EditBasicConfigurationComponent,
-    EditVODTranscodingComponent,
-    EditLiveConfigurationComponent,
-    EditAdvancedConfigurationComponent,
-    EditInstanceInformationComponent,
-    EditHomepageComponent,
-
-    RegistrationListComponent,
-    ProcessRegistrationModalComponent,
-
-    RunnerRegistrationTokenListComponent,
-    RunnerListComponent,
-    RunnerJobListComponent
-  ],
-
-  exports: [
-    AdminComponent
-  ],
-
-  providers: [
-    JobService,
-    LogsService,
-    DebugService,
-    ConfigService,
-    PluginApiService,
-    EditConfigurationService,
-    VideoAdminService,
-    AdminRegistrationService,
-    RunnerService
-  ]
-})
-export class AdminModule { }

client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts

@@ -1,10 +1,15 @@
 import { Component, Input } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/angular/peertube-template.directive'
+import { HelpComponent } from '../../../shared/shared-main/misc/help.component'
+import { NgClass, NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-edit-advanced-configuration',
   templateUrl: './edit-advanced-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [ FormsModule, ReactiveFormsModule, NgClass, NgIf, HelpComponent, PeerTubeTemplateDirective ]
 })
 export class EditAdvancedConfigurationComponent {
   @Input() form: FormGroup

client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html

@@ -90,7 +90,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- broadcast grid -->
+  <div class="pt-two-cols mt-4"> <!-- broadcast grid -->
     <div class="title-col">
       <h2 i18n>BROADCAST MESSAGE</h2>
       <div i18n class="inner-form-description">
@@ -146,7 +146,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- new users grid -->
+  <div class="pt-two-cols mt-4"> <!-- new users grid -->
     <div class="title-col">
       <h2 i18n>NEW USERS</h2>
       <div i18n class="inner-form-description">
@@ -263,7 +263,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- videos grid -->
+  <div class="pt-two-cols mt-4"> <!-- videos grid -->
     <div class="title-col">
       <h2 i18n>VIDEOS</h2>
     </div>
@@ -375,7 +375,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- video channels grid -->
+  <div class="pt-two-cols mt-4"> <!-- video channels grid -->
     <div class="title-col">
       <h2 i18n>VIDEO CHANNELS</h2>
     </div>
@@ -397,7 +397,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- search grid -->
+  <div class="pt-two-cols mt-4"> <!-- search grid -->
     <div class="title-col">
       <h2 i18n>SEARCH</h2>
     </div>
@@ -486,7 +486,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- import/export grid -->
+  <div class="pt-two-cols mt-4"> <!-- import/export grid -->
     <div class="title-col">
       <h2 i18n>USER IMPORT/EXPORT</h2>
     </div>
@@ -562,7 +562,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- federation grid -->
+  <div class="pt-two-cols mt-4"> <!-- federation grid -->
     <div class="title-col">
       <h2 i18n>FEDERATION</h2>
       <div i18n class="inner-form-description">
@@ -641,7 +641,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- administrators grid -->
+  <div class="pt-two-cols mt-4"> <!-- administrators grid -->
     <div class="title-col">
       <h2 i18n>ADMINISTRATORS</h2>
     </div>
@@ -669,7 +669,7 @@
     </div>
   </div>
 
-  <div class="row mt-4"> <!-- Twitter grid -->
+  <div class="pt-two-cols mt-4"> <!-- Twitter grid -->
     <div class="title-col">
       <h2 i18n>TWITTER</h2>
       <div i18n class="inner-form-description">

client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts

@@ -1,15 +1,40 @@
 import { pairwise } from 'rxjs/operators'
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MenuService, ThemeService } from '@app/core'
 import { HTMLServerConfig } from '@peertube/peertube-models'
 import { ConfigService } from '../shared/config.service'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/angular/peertube-template.directive'
+import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
+import { UserRealQuotaInfoComponent } from '../../shared/user-real-quota-info.component'
+import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
+import { HelpComponent } from '../../../shared/shared-main/misc/help.component'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
+import { NgFor, NgIf, NgClass } from '@angular/common'
+import { RouterLink } from '@angular/router'
 
 @Component({
   selector: 'my-edit-basic-configuration',
   templateUrl: './edit-basic-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    RouterLink,
+    NgFor,
+    SelectCustomValueComponent,
+    NgIf,
+    PeertubeCheckboxComponent,
+    HelpComponent,
+    MarkdownTextareaComponent,
+    NgClass,
+    UserRealQuotaInfoComponent,
+    SelectOptionsComponent,
+    PeerTubeTemplateDirective
+  ]
 })
 export class EditBasicConfigurationComponent implements OnInit, OnChanges {
   @Input() form: FormGroup

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts

@@ -30,6 +30,15 @@ import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { CustomPageService } from '@app/shared/shared-main/custom-page'
 import { CustomConfig, CustomPage, HTMLServerConfig } from '@peertube/peertube-models'
 import { EditConfigurationService } from './edit-configuration.service'
+import { EditAdvancedConfigurationComponent } from './edit-advanced-configuration.component'
+import { EditLiveConfigurationComponent } from './edit-live-configuration.component'
+import { EditVODTranscodingComponent } from './edit-vod-transcoding.component'
+import { EditBasicConfigurationComponent } from './edit-basic-configuration.component'
+import { EditInstanceInformationComponent } from './edit-instance-information.component'
+import { EditHomepageComponent } from './edit-homepage.component'
+import { NgbNav, NgbNavItem, NgbNavLink, NgbNavLinkBase, NgbNavContent, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgFor } from '@angular/common'
 
 type ComponentCustomConfig = CustomConfig & {
   instanceCustomHomepage: CustomPage
@@ -38,7 +47,26 @@ type ComponentCustomConfig = CustomConfig & {
 @Component({
   selector: 'my-edit-custom-config',
   templateUrl: './edit-custom-config.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [
+    NgIf,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbNav,
+    NgbNavItem,
+    NgbNavLink,
+    NgbNavLinkBase,
+    NgbNavContent,
+    EditHomepageComponent,
+    EditInstanceInformationComponent,
+    EditBasicConfigurationComponent,
+    EditVODTranscodingComponent,
+    EditLiveConfigurationComponent,
+    EditAdvancedConfigurationComponent,
+    NgbNavOutlet,
+    NgFor
+  ]
 })
 export class EditCustomConfigComponent extends FormReactive implements OnInit {
   activeNav: string

client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts

@@ -1,11 +1,16 @@
 import { Component, Input } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
+import { NgIf } from '@angular/common'
+import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
+import { CustomMarkupHelpComponent } from '../../../shared/shared-custom-markup/custom-markup-help.component'
 
 @Component({
   selector: 'my-edit-homepage',
   templateUrl: './edit-homepage.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [ FormsModule, ReactiveFormsModule, CustomMarkupHelpComponent, MarkdownTextareaComponent, NgIf ]
 })
 export class EditHomepageComponent {
   @Input() form: FormGroup

client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts

@@ -1,17 +1,43 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnInit } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { Notifier, ServerService } from '@app/core'
 import { HttpErrorResponse } from '@angular/common/http'
 import { genericUploadErrorHandler } from '@app/helpers'
-import { InstanceService } from '@app/shared/shared-instance'
+import { InstanceService } from '@app/shared/shared-main'
 import { ActorImage, HTMLServerConfig } from '@peertube/peertube-models'
+import { HelpComponent } from '../../../shared/shared-main/misc/help.component'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/angular/peertube-template.directive'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { RouterLink } from '@angular/router'
+import { SelectCheckboxComponent } from '../../../shared/shared-forms/select/select-checkbox.component'
+import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
+import { CustomMarkupHelpComponent } from '../../../shared/shared-custom-markup/custom-markup-help.component'
+import { NgClass, NgIf } from '@angular/common'
+import { ActorBannerEditComponent } from '../../../shared/shared-actor-image-edit/actor-banner-edit.component'
+import { ActorAvatarEditComponent } from '../../../shared/shared-actor-image-edit/actor-avatar-edit.component'
 
 @Component({
   selector: 'my-edit-instance-information',
   templateUrl: './edit-instance-information.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent,
+    NgClass,
+    NgIf,
+    CustomMarkupHelpComponent,
+    MarkdownTextareaComponent,
+    SelectCheckboxComponent,
+    RouterLink,
+    PeertubeCheckboxComponent,
+    PeerTubeTemplateDirective,
+    HelpComponent
+  ]
 })
 export class EditInstanceInformationComponent implements OnInit {
   @Input() form: FormGroup

client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts

@@ -1,14 +1,33 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { HTMLServerConfig } from '@peertube/peertube-models'
 import { ConfigService } from '../shared/config.service'
 import { EditConfigurationService, ResolutionOption } from './edit-configuration.service'
+import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
+import { RouterLink } from '@angular/router'
+import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
+import { NgClass, NgIf, NgFor } from '@angular/common'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/angular/peertube-template.directive'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
 
 @Component({
   selector: 'my-edit-live-configuration',
   templateUrl: './edit-live-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    PeertubeCheckboxComponent,
+    PeerTubeTemplateDirective,
+    NgClass,
+    NgIf,
+    SelectOptionsComponent,
+    NgFor,
+    RouterLink,
+    SelectCustomValueComponent
+  ]
 })
 export class EditLiveConfigurationComponent implements OnInit, OnChanges {
   @Input() form: FormGroup

client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts

@@ -1,14 +1,33 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { HTMLServerConfig } from '@peertube/peertube-models'
 import { ConfigService } from '../shared/config.service'
 import { EditConfigurationService, ResolutionOption } from './edit-configuration.service'
+import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
+import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
+import { RouterLink } from '@angular/router'
+import { NgClass, NgFor, NgIf } from '@angular/common'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/angular/peertube-template.directive'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
 
 @Component({
   selector: 'my-edit-vod-transcoding',
   templateUrl: './edit-vod-transcoding.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ]
+  styleUrls: [ './edit-custom-config.component.scss' ],
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    PeertubeCheckboxComponent,
+    PeerTubeTemplateDirective,
+    NgClass,
+    NgFor,
+    NgIf,
+    RouterLink,
+    SelectCustomValueComponent,
+    SelectOptionsComponent
+  ]
 })
 export class EditVODTranscodingComponent implements OnInit, OnChanges {
   @Input() form: FormGroup

client/src/app/+admin/follows/followers-list/followers-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { formatICU } from '@app/helpers'
@@ -6,11 +6,34 @@ import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { DropdownAction } from '@app/shared/shared-main'
 import { ActorFollow } from '@peertube/peertube-models'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { DeleteButtonComponent } from '../../../shared/shared-main/buttons/delete-button.component'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgIf, DatePipe } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-followers-list',
   templateUrl: './followers-list.component.html',
-  styleUrls: [ './followers-list.component.scss' ]
+  styleUrls: [ './followers-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    NgIf,
+    ActionDropdownComponent,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    ButtonComponent,
+    DeleteButtonComponent,
+    AutoColspanDirective,
+    DatePipe
+  ]
 })
 export class FollowersListComponent extends RestTable <ActorFollow> implements OnInit {
   followers: ActorFollow[] = []

client/src/app/+admin/follows/following-list/follow-modal.component.ts

@@ -6,11 +6,16 @@ import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { NgClass, NgIf } from '@angular/common'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-follow-modal',
   templateUrl: './follow-modal.component.html',
-  styleUrls: [ './follow-modal.component.scss' ]
+  styleUrls: [ './follow-modal.component.scss' ],
+  standalone: true,
+  imports: [ GlobalIconComponent, FormsModule, ReactiveFormsModule, NgClass, NgIf ]
 })
 export class FollowModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: NgbModal

client/src/app/+admin/follows/following-list/following-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
@@ -7,10 +7,32 @@ import { ActorFollow } from '@peertube/peertube-models'
 import { FollowModalComponent } from './follow-modal.component'
 import { DropdownAction } from '@app/shared/shared-main'
 import { formatICU } from '@app/helpers'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { RedundancyCheckboxComponent } from '../shared/redundancy-checkbox.component'
+import { DeleteButtonComponent } from '../../../shared/shared-main/buttons/delete-button.component'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgIf, DatePipe } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   templateUrl: './following-list.component.html',
-  styleUrls: [ './following-list.component.scss' ]
+  styleUrls: [ './following-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    NgIf,
+    ActionDropdownComponent,
+    AdvancedInputFilterComponent,
+    DeleteButtonComponent,
+    RedundancyCheckboxComponent,
+    AutoColspanDirective,
+    FollowModalComponent,
+    DatePipe
+  ]
 })
 export class FollowingListComponent extends RestTable <ActorFollow> implements OnInit {
   @ViewChild('followModal') followModal: FollowModalComponent

client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts

@@ -1,10 +1,14 @@
 import { Component, Input } from '@angular/core'
 import { Notifier } from '@app/core'
 import { RedundancyService } from '@app/shared/shared-main'
+import { FormsModule } from '@angular/forms'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
 
 @Component({
   selector: 'my-redundancy-checkbox',
-  templateUrl: './redundancy-checkbox.component.html'
+  templateUrl: './redundancy-checkbox.component.html',
+  standalone: true,
+  imports: [ PeertubeCheckboxComponent, FormsModule ]
 })
 export class RedundancyCheckboxComponent {
   @Input() redundancyAllowed: boolean

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts

@@ -1,15 +1,41 @@
 import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { BytesPipe, RedundancyService } from '@app/shared/shared-main'
 import { VideoRedundanciesTarget, VideoRedundancy, VideosRedundancyStats } from '@peertube/peertube-models'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
+import { ChartModule } from 'primeng/chart'
+import { VideoRedundancyInformationComponent } from './video-redundancy-information.component'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { DeleteButtonComponent } from '../../../shared/shared-main/buttons/delete-button.component'
+import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { NgIf, NgFor } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { FormsModule } from '@angular/forms'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-video-redundancies-list',
   templateUrl: './video-redundancies-list.component.html',
-  styleUrls: [ './video-redundancies-list.component.scss' ]
+  styleUrls: [ './video-redundancies-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    FormsModule,
+    TableModule,
+    SharedModule,
+    NgIf,
+    NgbTooltip,
+    TableExpanderIconComponent,
+    DeleteButtonComponent,
+    AutoColspanDirective,
+    NgFor,
+    VideoRedundancyInformationComponent,
+    ChartModule,
+    BytesPipe
+  ]
 })
 export class VideoRedundanciesListComponent extends RestTable implements OnInit {
   private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'

client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts

@@ -1,10 +1,14 @@
 import { Component, Input } from '@angular/core'
 import { FileRedundancyInformation, StreamingPlaylistRedundancyInformation } from '@peertube/peertube-models'
+import { BytesPipe } from '../../../shared/shared-main/angular/bytes.pipe'
+import { DatePipe } from '@angular/common'
 
 @Component({
   selector: 'my-video-redundancy-information',
   templateUrl: './video-redundancy-information.component.html',
-  styleUrls: [ './video-redundancy-information.component.scss' ]
+  styleUrls: [ './video-redundancy-information.component.scss' ],
+  standalone: true,
+  imports: [ DatePipe, BytesPipe ]
 })
 export class VideoRedundancyInformationComponent {
   @Input() redundancyElement: FileRedundancyInformation | StreamingPlaylistRedundancyInformation

client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core'
+import { AbuseListTableComponent } from '../../../shared/shared-abuse-list/abuse-list-table.component'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-abuse-list',
   templateUrl: './abuse-list.component.html',
-  styleUrls: [ ]
+  styleUrls: [],
+  standalone: true,
+  imports: [ GlobalIconComponent, AbuseListTableComponent ]
 })
 export class AbuseListComponent {
 

client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts

@@ -1,10 +1,30 @@
 import { Component } from '@angular/core'
 import { BlocklistComponentType, GenericAccountBlocklistComponent } from '@app/shared/shared-moderation'
+import { NgIf, DatePipe } from '@angular/common'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { ActorAvatarComponent } from '../../../shared/shared-actor-image/actor-avatar.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { SharedModule } from 'primeng/api'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-instance-account-blocklist',
   styleUrls: [ '../../../shared/shared-moderation/moderation.scss' ],
-  templateUrl: '../../../shared/shared-moderation/account-blocklist.component.html'
+  templateUrl: '../../../shared/shared-moderation/account-blocklist.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    ActorAvatarComponent,
+    AutoColspanDirective,
+    NgIf,
+    DatePipe
+  ]
 })
 export class InstanceAccountBlocklistComponent extends GenericAccountBlocklistComponent {
   mode = BlocklistComponentType.Instance

client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts

@@ -1,10 +1,30 @@
 import { Component } from '@angular/core'
 import { GenericServerBlocklistComponent, BlocklistComponentType } from '@app/shared/shared-moderation'
+import { BatchDomainsModalComponent } from '../../../shared/shared-moderation/batch-domains-modal.component'
+import { NgIf, DatePipe } from '@angular/common'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { SharedModule } from 'primeng/api'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-instance-server-blocklist',
   styleUrls: [ '../../../shared/shared-moderation/server-blocklist.component.scss' ],
-  templateUrl: '../../../shared/shared-moderation/server-blocklist.component.html'
+  templateUrl: '../../../shared/shared-moderation/server-blocklist.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    AutoColspanDirective,
+    NgIf,
+    BatchDomainsModalComponent,
+    DatePipe
+  ]
 })
 export class InstanceServerBlocklistComponent extends GenericServerBlocklistComponent {
   mode = BlocklistComponentType.Instance

client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts

@@ -6,10 +6,16 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { UserRegistration } from '@peertube/peertube-models'
 import { AdminRegistrationService } from './admin-registration.service'
 import { REGISTRATION_MODERATION_RESPONSE_VALIDATOR } from './process-registration-validators'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
+import { NgIf, NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-process-registration-modal',
-  templateUrl: './process-registration-modal.component.html'
+  templateUrl: './process-registration-modal.component.html',
+  standalone: true,
+  imports: [ NgIf, GlobalIconComponent, FormsModule, ReactiveFormsModule, NgClass, PeertubeCheckboxComponent ]
 })
 export class ProcessRegistrationModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: NgbModal

client/src/app/+admin/moderation/registration-list/registration-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
@@ -8,11 +8,36 @@ import { DropdownAction } from '@app/shared/shared-main'
 import { UserRegistration, UserRegistrationState } from '@peertube/peertube-models'
 import { AdminRegistrationService } from './admin-registration.service'
 import { ProcessRegistrationModalComponent } from './process-registration-modal.component'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { UserEmailInfoComponent } from '../../shared/user-email-info.component'
+import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgIf, NgClass, DatePipe } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-registration-list',
   templateUrl: './registration-list.component.html',
-  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './registration-list.component.scss' ]
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './registration-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    NgIf,
+    ActionDropdownComponent,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    TableExpanderIconComponent,
+    NgClass,
+    UserEmailInfoComponent,
+    AutoColspanDirective,
+    ProcessRegistrationModalComponent,
+    DatePipe
+  ]
 })
 export class RegistrationListComponent extends RestTable <UserRegistration> implements OnInit {
   @ViewChild('processRegistrationModal', { static: true }) processRegistrationModal: ProcessRegistrationModalComponent

client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { switchMap } from 'rxjs/operators'
 import { environment } from 'src/environments/environment'
 import { Component, OnInit } from '@angular/core'
@@ -10,11 +10,37 @@ import { VideoBlockService } from '@app/shared/shared-moderation'
 import { buildVideoEmbedLink, decorateVideoLink } from '@peertube/peertube-core-utils'
 import { VideoBlacklist, VideoBlacklistType, VideoBlacklistType_Type } from '@peertube/peertube-models'
 import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
+import { EmbedComponent } from '../../../shared/shared-main/video/embed.component'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { VideoCellComponent } from '../../../shared/shared-tables/video-cell.component'
+import { ActionDropdownComponent } from '../../../shared/shared-main/buttons/action-dropdown.component'
+import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component'
+import { NgIf, NgClass, DatePipe } from '@angular/common'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-video-block-list',
   templateUrl: './video-block-list.component.html',
-  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    NgIf,
+    TableExpanderIconComponent,
+    ActionDropdownComponent,
+    NgClass,
+    VideoCellComponent,
+    AutoColspanDirective,
+    EmbedComponent,
+    DatePipe
+  ]
 })
 export class VideoBlockListComponent extends RestTable implements OnInit {
   blocklist: (VideoBlacklist & { reasonHtml?: string })[] = []

client/src/app/+admin/overview/comments/video-comment-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
@@ -8,11 +8,39 @@ import { BulkService } from '@app/shared/shared-moderation'
 import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
 import { FeedFormat, UserRight } from '@peertube/peertube-models'
 import { formatICU } from '@app/helpers'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { ActorAvatarComponent } from '../../../shared/shared-actor-image/actor-avatar.component'
+import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgIf, NgClass, DatePipe } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { FeedComponent } from '../../../shared/shared-main/feeds/feed.component'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-video-comment-list',
   templateUrl: './video-comment-list.component.html',
-  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    FeedComponent,
+    TableModule,
+    SharedModule,
+    NgIf,
+    ActionDropdownComponent,
+    AdvancedInputFilterComponent,
+    ButtonComponent,
+    NgbTooltip,
+    TableExpanderIconComponent,
+    NgClass,
+    ActorAvatarComponent,
+    AutoColspanDirective,
+    DatePipe
+  ]
 })
 export class VideoCommentListComponent extends RestTable <VideoCommentAdmin> implements OnInit {
   comments: VideoCommentAdmin[]

client/src/app/+admin/overview/users/user-edit/user-create.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, RouterLink } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, Notifier, ScreenService, ServerService } from '@app/core'
 import {
@@ -16,11 +16,41 @@ import { FormReactiveService } from '@app/shared/shared-forms'
 import { UserAdminService } from '@app/shared/shared-users'
 import { UserCreate, UserRole } from '@peertube/peertube-models'
 import { UserEdit } from './user-edit'
+import { BytesPipe } from '../../../../shared/shared-main/angular/bytes.pipe'
+import { UserPasswordComponent } from './user-password.component'
+import { PeertubeCheckboxComponent } from '../../../../shared/shared-forms/peertube-checkbox.component'
+import { UserRealQuotaInfoComponent } from '../../../shared/user-real-quota-info.component'
+import { SelectCustomValueComponent } from '../../../../shared/shared-forms/select/select-custom-value.component'
+import { InputTextComponent } from '../../../../shared/shared-forms/input-text.component'
+import { PeerTubeTemplateDirective } from '../../../../shared/shared-main/angular/peertube-template.directive'
+import { HelpComponent } from '../../../../shared/shared-main/misc/help.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActorAvatarEditComponent } from '../../../../shared/shared-actor-image-edit/actor-avatar-edit.component'
+import { NgIf, NgTemplateOutlet, NgClass, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-user-create',
   templateUrl: './user-edit.component.html',
-  styleUrls: [ './user-edit.component.scss' ]
+  styleUrls: [ './user-edit.component.scss' ],
+  standalone: true,
+  imports: [
+    RouterLink,
+    NgIf,
+    NgTemplateOutlet,
+    ActorAvatarEditComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgClass,
+    HelpComponent,
+    PeerTubeTemplateDirective,
+    InputTextComponent,
+    NgFor,
+    SelectCustomValueComponent,
+    UserRealQuotaInfoComponent,
+    PeertubeCheckboxComponent,
+    UserPasswordComponent,
+    BytesPipe
+  ]
 })
 export class UserCreateComponent extends UserEdit implements OnInit {
   error: string

client/src/app/+admin/overview/users/user-edit/user-password.component.ts

@@ -4,11 +4,15 @@ import { USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-valida
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { UserAdminService } from '@app/shared/shared-users'
 import { UserUpdate } from '@peertube/peertube-models'
+import { NgClass, NgIf } from '@angular/common'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'my-user-password',
   templateUrl: './user-password.component.html',
-  styleUrls: [ './user-password.component.scss' ]
+  styleUrls: [ './user-password.component.scss' ],
+  standalone: true,
+  imports: [ FormsModule, ReactiveFormsModule, NgClass, NgIf ]
 })
 export class UserPasswordComponent extends FormReactive implements OnInit {
   @Input() userId: number

client/src/app/+admin/overview/users/user-edit/user-update.component.ts

@@ -1,6 +1,6 @@
 import { Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Router, RouterLink } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
 import {
@@ -13,11 +13,41 @@ import { FormReactiveService } from '@app/shared/shared-forms'
 import { TwoFactorService, UserAdminService } from '@app/shared/shared-users'
 import { User as UserType, UserAdminFlag, UserRole, UserUpdate } from '@peertube/peertube-models'
 import { UserEdit } from './user-edit'
+import { BytesPipe } from '../../../../shared/shared-main/angular/bytes.pipe'
+import { UserPasswordComponent } from './user-password.component'
+import { PeertubeCheckboxComponent } from '../../../../shared/shared-forms/peertube-checkbox.component'
+import { UserRealQuotaInfoComponent } from '../../../shared/user-real-quota-info.component'
+import { SelectCustomValueComponent } from '../../../../shared/shared-forms/select/select-custom-value.component'
+import { InputTextComponent } from '../../../../shared/shared-forms/input-text.component'
+import { PeerTubeTemplateDirective } from '../../../../shared/shared-main/angular/peertube-template.directive'
+import { HelpComponent } from '../../../../shared/shared-main/misc/help.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActorAvatarEditComponent } from '../../../../shared/shared-actor-image-edit/actor-avatar-edit.component'
+import { NgIf, NgTemplateOutlet, NgClass, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-user-update',
   templateUrl: './user-edit.component.html',
-  styleUrls: [ './user-edit.component.scss' ]
+  styleUrls: [ './user-edit.component.scss' ],
+  standalone: true,
+  imports: [
+    RouterLink,
+    NgIf,
+    NgTemplateOutlet,
+    ActorAvatarEditComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgClass,
+    HelpComponent,
+    PeerTubeTemplateDirective,
+    InputTextComponent,
+    NgFor,
+    SelectCustomValueComponent,
+    UserRealQuotaInfoComponent,
+    PeertubeCheckboxComponent,
+    UserPasswordComponent,
+    BytesPipe
+  ]
 })
 export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   error: string

client/src/app/+admin/overview/users/user-list/user-list.component.ts

@@ -1,6 +1,6 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Router, RouterLink } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { formatICU, getAPIHost } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
@@ -9,6 +9,21 @@ import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModera
 import { UserAdminService } from '@app/shared/shared-users'
 import { User, UserRole, UserRoleType } from '@peertube/peertube-models'
 import { logger } from '@root-helpers/logger'
+import { BytesPipe } from '../../../../shared/shared-main/angular/bytes.pipe'
+import { AutoColspanDirective } from '../../../../shared/shared-main/angular/auto-colspan.directive'
+import { UserEmailInfoComponent } from '../../../shared/user-email-info.component'
+import { ActorAvatarComponent } from '../../../../shared/shared-actor-image/actor-avatar.component'
+import { UserModerationDropdownComponent } from '../../../../shared/shared-moderation/user-moderation-dropdown.component'
+import { TableExpanderIconComponent } from '../../../../shared/shared-tables/table-expander-icon.component'
+import { PeertubeCheckboxComponent } from '../../../../shared/shared-forms/peertube-checkbox.component'
+import { FormsModule } from '@angular/forms'
+import { SelectCheckboxComponent } from '../../../../shared/shared-forms/select/select-checkbox.component'
+import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgIf, NgClass, DatePipe } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
 
 type UserForList = User & {
   rawVideoQuota: number
@@ -20,7 +35,34 @@ type UserForList = User & {
 @Component({
   selector: 'my-user-list',
   templateUrl: './user-list.component.html',
-  styleUrls: [ './user-list.component.scss' ]
+  styleUrls: [ './user-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    NgIf,
+    ActionDropdownComponent,
+    RouterLink,
+    AdvancedInputFilterComponent,
+    NgbDropdown,
+    NgbDropdownToggle,
+    NgbDropdownMenu,
+    NgbDropdownItem,
+    SelectCheckboxComponent,
+    FormsModule,
+    PeertubeCheckboxComponent,
+    NgbTooltip,
+    NgClass,
+    TableExpanderIconComponent,
+    UserModerationDropdownComponent,
+    ActorAvatarComponent,
+    UserEmailInfoComponent,
+    AutoColspanDirective,
+    UserBanModalComponent,
+    DatePipe,
+    BytesPipe
+  ]
 })
 export class UserListComponent extends RestTable <User> implements OnInit {
   private static readonly LOCAL_STORAGE_SELECTED_COLUMNS_KEY = 'admin-user-list-selected-columns'

client/src/app/+admin/overview/videos/video-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { finalize } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -11,11 +11,45 @@ import { VideoActionsDisplayType } from '@app/shared/shared-video-miniature'
 import { getAllFiles } from '@peertube/peertube-core-utils'
 import { UserRight, VideoFile, VideoPrivacy, VideoState, VideoStreamingPlaylistType } from '@peertube/peertube-models'
 import { VideoAdminService } from './video-admin.service'
+import { BytesPipe } from '../../../shared/shared-main/angular/bytes.pipe'
+import { EmbedComponent } from '../../../shared/shared-main/video/embed.component'
+import { AutoColspanDirective } from '../../../shared/shared-main/angular/auto-colspan.directive'
+import { VideoCellComponent } from '../../../shared/shared-tables/video-cell.component'
+import { VideoActionsDropdownComponent } from '../../../shared/shared-video-miniature/video-actions-dropdown.component'
+import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { AdvancedInputFilterComponent } from '../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgClass, NgIf, NgFor, DatePipe } from '@angular/common'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-video-list',
   templateUrl: './video-list.component.html',
-  styleUrls: [ './video-list.component.scss' ]
+  styleUrls: [ './video-list.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    NgClass,
+    SharedModule,
+    NgIf,
+    ActionDropdownComponent,
+    AdvancedInputFilterComponent,
+    ButtonComponent,
+    NgbTooltip,
+    TableExpanderIconComponent,
+    VideoActionsDropdownComponent,
+    VideoCellComponent,
+    AutoColspanDirective,
+    NgFor,
+    EmbedComponent,
+    VideoBlockComponent,
+    DatePipe,
+    BytesPipe
+  ]
 })
 export class VideoListComponent extends RestTable <Video> implements OnInit {
   @ViewChild('videoBlockModal') videoBlockModal: VideoBlockComponent

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts

@@ -6,11 +6,29 @@ import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@ap
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { compareSemVer } from '@peertube/peertube-core-utils'
 import { PeerTubePlugin, PluginType, PluginType_Type } from '@peertube/peertube-models'
+import { DeleteButtonComponent } from '../../../shared/shared-main/buttons/delete-button.component'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { EditButtonComponent } from '../../../shared/shared-main/buttons/edit-button.component'
+import { PluginCardComponent } from '../shared/plugin-card.component'
+import { InfiniteScrollerDirective } from '../../../shared/shared-main/angular/infinite-scroller.directive'
+import { NgIf, NgFor } from '@angular/common'
+import { PluginNavigationComponent } from '../shared/plugin-navigation.component'
 
 @Component({
   selector: 'my-plugin-list-installed',
   templateUrl: './plugin-list-installed.component.html',
-  styleUrls: [ './plugin-list-installed.component.scss' ]
+  styleUrls: [ './plugin-list-installed.component.scss' ],
+  standalone: true,
+  imports: [
+    PluginNavigationComponent,
+    NgIf,
+    InfiniteScrollerDirective,
+    NgFor,
+    PluginCardComponent,
+    EditButtonComponent,
+    ButtonComponent,
+    DeleteButtonComponent
+  ]
 })
 export class PluginListInstalledComponent implements OnInit {
   pluginType: PluginType_Type

client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts

@@ -6,11 +6,31 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
 import { PeerTubePluginIndex, PluginType, PluginType_Type } from '@peertube/peertube-models'
 import { logger } from '@root-helpers/logger'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { EditButtonComponent } from '../../../shared/shared-main/buttons/edit-button.component'
+import { PluginCardComponent } from '../shared/plugin-card.component'
+import { InfiniteScrollerDirective } from '../../../shared/shared-main/angular/infinite-scroller.directive'
+import { AutofocusDirective } from '../../../shared/shared-main/angular/autofocus.directive'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
+import { NgIf, NgFor } from '@angular/common'
+import { PluginNavigationComponent } from '../shared/plugin-navigation.component'
 
 @Component({
   selector: 'my-plugin-search',
   templateUrl: './plugin-search.component.html',
-  styleUrls: [ './plugin-search.component.scss' ]
+  styleUrls: [ './plugin-search.component.scss' ],
+  standalone: true,
+  imports: [
+    PluginNavigationComponent,
+    NgIf,
+    GlobalIconComponent,
+    AutofocusDirective,
+    InfiniteScrollerDirective,
+    NgFor,
+    PluginCardComponent,
+    EditButtonComponent,
+    ButtonComponent
+  ]
 })
 export class PluginSearchComponent implements OnInit {
   pluginType: PluginType_Type

client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts

@@ -7,11 +7,16 @@ import { BuildFormArgument } from '@app/shared/form-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { PeerTubePlugin, RegisterServerSettingOptions } from '@peertube/peertube-models'
 import { PluginApiService } from '../shared/plugin-api.service'
+import { DynamicFormFieldComponent } from '../../../shared/shared-forms/dynamic-form-field.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-plugin-show-installed',
   templateUrl: './plugin-show-installed.component.html',
-  styleUrls: [ './plugin-show-installed.component.scss' ]
+  styleUrls: [ './plugin-show-installed.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, FormsModule, ReactiveFormsModule, NgFor, DynamicFormFieldComponent ]
 })
 export class PluginShowInstalledComponent extends FormReactive implements OnInit, OnDestroy {
   plugin: PeerTubePlugin

client/src/app/+admin/plugins/shared/plugin-card.component.ts

@@ -1,11 +1,14 @@
 import { Component, Input } from '@angular/core'
 import { PeerTubePlugin, PeerTubePluginIndex, PluginType_Type } from '@peertube/peertube-models'
 import { PluginApiService } from './plugin-api.service'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-plugin-card',
   templateUrl: './plugin-card.component.html',
-  styleUrls: [ './plugin-card.component.scss' ]
+  styleUrls: [ './plugin-card.component.scss' ],
+  standalone: true,
+  imports: [ GlobalIconComponent ]
 })
 
 export class PluginCardComponent {

client/src/app/+admin/plugins/shared/plugin-navigation.component.ts

@@ -1,10 +1,14 @@
 import { Component, Input } from '@angular/core'
 import { PluginType_Type } from '@peertube/peertube-models'
+import { NgClass } from '@angular/common'
+import { RouterLink, RouterLinkActive } from '@angular/router'
 
 @Component({
   selector: 'my-plugin-navigation',
   templateUrl: './plugin-navigation.component.html',
-  styleUrls: [ './plugin-navigation.component.scss' ]
+  styleUrls: [ './plugin-navigation.component.scss' ],
+  standalone: true,
+  imports: [ RouterLink, RouterLinkActive, NgClass ]
 })
 export class PluginNavigationComponent {
   @Input() pluginType: PluginType_Type

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

@@ -0,0 +1,66 @@
+import { Routes } from '@angular/router'
+import { ConfigRoutes, EditConfigurationService } from '@app/+admin/config'
+import { ModerationRoutes } from '@app/+admin/moderation/moderation.routes'
+import { PluginsRoutes } from '@app/+admin/plugins/plugins.routes'
+import { DebugService, JobService, LogsService, RunnerService, SystemRoutes } from '@app/+admin/system'
+import { AdminComponent } from './admin.component'
+import { FollowsRoutes } from './follows'
+import { OverviewRoutes, VideoAdminService } from './overview'
+import { TwoFactorService, UserAdminService } from '@app/shared/shared-users'
+import { AbuseService, BlocklistService, BulkService, VideoBlockService } from '@app/shared/shared-moderation'
+import { CustomMarkupService, DynamicElementService } from '@app/shared/shared-custom-markup'
+import { InstanceFollowService } from '@app/shared/shared-instance'
+import { CustomPageService } from '@app/shared/shared-main/custom-page'
+import { VideoCommentService } from '@app/shared/shared-video-comment'
+import { AdminRegistrationService } from './moderation/registration-list'
+import { PluginApiService } from './plugins/shared/plugin-api.service'
+import { ConfigService } from './config/shared/config.service'
+import { FindInBulkService, SearchService } from '@app/shared/shared-search'
+import { VideoPlaylistService } from '@app/shared/shared-video-playlist'
+
+export default [
+  {
+    path: '',
+    component: AdminComponent,
+    providers: [
+      BlocklistService,
+      UserAdminService,
+      BulkService,
+      AdminRegistrationService,
+      CustomMarkupService,
+      CustomPageService,
+      DebugService,
+      EditConfigurationService,
+      InstanceFollowService,
+      JobService,
+      LogsService,
+      PluginApiService,
+      RunnerService,
+      TwoFactorService,
+      UserAdminService,
+      VideoAdminService,
+      VideoBlockService,
+      VideoCommentService,
+      ConfigService,
+      AbuseService,
+      DynamicElementService,
+      FindInBulkService,
+      SearchService,
+      VideoPlaylistService
+    ],
+    children: [
+      {
+        path: '',
+        redirectTo: 'users',
+        pathMatch: 'full'
+      },
+
+      ...FollowsRoutes,
+      ...OverviewRoutes,
+      ...ModerationRoutes,
+      ...SystemRoutes,
+      ...ConfigRoutes,
+      ...PluginsRoutes
+    ]
+  }
+] satisfies Routes

client/src/app/+admin/shared/index.ts

@@ -1,3 +1,2 @@
+export * from './user-email-info.component'
 export * from './user-real-quota-info.component'
-
-export * from './shared-admin.module'

client/src/app/+admin/shared/shared-admin.module.ts

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core'
-import { SharedMainModule } from '../../shared/shared-main/shared-main.module'
-import { UserEmailInfoComponent } from './user-email-info.component'
-import { UserRealQuotaInfoComponent } from './user-real-quota-info.component'
-
-@NgModule({
-  imports: [
-    SharedMainModule
-  ],
-
-  declarations: [
-    UserRealQuotaInfoComponent,
-    UserEmailInfoComponent
-  ],
-
-  exports: [
-    UserRealQuotaInfoComponent,
-    UserEmailInfoComponent
-  ],
-
-  providers: []
-})
-export class SharedAdminModule { }

client/src/app/+admin/shared/user-email-info.component.ts

@@ -1,10 +1,13 @@
 import { Component, Input } from '@angular/core'
 import { User, UserRegistration } from '@peertube/peertube-models'
+import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-user-email-info',
   templateUrl: './user-email-info.component.html',
-  styleUrls: [ './user-email-info.component.scss' ]
+  styleUrls: [ './user-email-info.component.scss' ],
+  standalone: true,
+  imports: [ NgIf ]
 })
 export class UserEmailInfoComponent {
   @Input() entry: User | UserRegistration

client/src/app/+admin/shared/user-real-quota-info.component.ts

@@ -1,10 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { HTMLServerConfig, VideoResolution } from '@peertube/peertube-models'
+import { BytesPipe } from '../../shared/shared-main/angular/bytes.pipe'
+import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-user-real-quota-info',
-  templateUrl: './user-real-quota-info.component.html'
+  templateUrl: './user-real-quota-info.component.html',
+  standalone: true,
+  imports: [ NgIf, BytesPipe ]
 })
 export class UserRealQuotaInfoComponent implements OnInit {
   @Input() videoQuota: number | string

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

@@ -5,7 +5,8 @@ import { DebugService } from './debug.service'
 
 @Component({
   templateUrl: './debug.component.html',
-  styleUrls: [ './debug.component.scss' ]
+  styleUrls: [ './debug.component.scss' ],
+  standalone: true
 })
 export class DebugComponent implements OnInit {
   debug: Debug

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

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
 import { escapeHTML } from '@peertube/peertube-core-utils'
@@ -7,11 +7,31 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { JobStateClient } from '../../../../types/job-state-client.type'
 import { JobTypeClient } from '../../../../types/job-type-client.type'
 import { JobService } from './job.service'
+import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TableModule } from 'primeng/table'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgFor, NgClass, NgIf } from '@angular/common'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   selector: 'my-jobs',
   templateUrl: './jobs.component.html',
-  styleUrls: [ './jobs.component.scss' ]
+  styleUrls: [ './jobs.component.scss' ],
+  standalone: true,
+  imports: [
+    FormsModule,
+    NgFor,
+    NgSelectModule,
+    NgClass,
+    ButtonComponent,
+    TableModule,
+    SharedModule,
+    NgIf,
+    NgbTooltip,
+    TableExpanderIconComponent
+  ]
 })
 export class JobsComponent extends RestTable implements OnInit {
   private static LOCAL_STORAGE_STATE = 'jobs-list-state'

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

@@ -3,10 +3,17 @@ import { LocalStorageService, Notifier } from '@app/core'
 import { ServerLogLevel } from '@peertube/peertube-models'
 import { LogRow } from './log-row.model'
 import { LogsService } from './logs.service'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { SelectTagsComponent } from '../../../shared/shared-forms/select/select-tags.component'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgFor, NgIf, NgClass, DatePipe } from '@angular/common'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   templateUrl: './logs.component.html',
-  styleUrls: [ './logs.component.scss' ]
+  styleUrls: [ './logs.component.scss' ],
+  standalone: true,
+  imports: [ FormsModule, NgFor, NgSelectModule, NgIf, NgClass, SelectTagsComponent, ButtonComponent, DatePipe ]
 })
 export class LogsComponent implements OnInit {
   private static LOCAL_STORAGE_LOG_TYPE_CHOICE_KEY = 'admin-logs-log-type-choice'

client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts

@@ -1,4 +1,4 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { formatICU } from '@app/helpers'
@@ -6,10 +6,35 @@ import { DropdownAction } from '@app/shared/shared-main'
 import { RunnerJob, RunnerJobState } from '@peertube/peertube-models'
 import { RunnerJobFormatted, RunnerService } from '../runner.service'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { AutoColspanDirective } from '../../../../shared/shared-main/angular/auto-colspan.directive'
+import { TableExpanderIconComponent } from '../../../../shared/shared-tables/table-expander-icon.component'
+import { ButtonComponent } from '../../../../shared/shared-main/buttons/button.component'
+import { AdvancedInputFilterComponent } from '../../../../shared/shared-forms/advanced-input-filter.component'
+import { ActionDropdownComponent } from '../../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgIf, NgClass } from '@angular/common'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TableModule } from 'primeng/table'
+import { RouterLink } from '@angular/router'
+import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-runner-job-list',
-  templateUrl: './runner-job-list.component.html'
+  templateUrl: './runner-job-list.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    RouterLink,
+    TableModule,
+    SharedModule,
+    NgbTooltip,
+    NgIf,
+    ActionDropdownComponent,
+    AdvancedInputFilterComponent,
+    ButtonComponent,
+    TableExpanderIconComponent,
+    NgClass,
+    AutoColspanDirective
+  ]
 })
 export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnInit {
   runnerJobs: RunnerJobFormatted[] = []

client/src/app/+admin/system/runners/runner-list/runner-list.component.ts

@@ -1,13 +1,31 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { DropdownAction } from '@app/shared/shared-main'
 import { Runner } from '@peertube/peertube-models'
 import { RunnerService } from '../runner.service'
+import { DatePipe } from '@angular/common'
+import { AutoColspanDirective } from '../../../../shared/shared-main/angular/auto-colspan.directive'
+import { ActionDropdownComponent } from '../../../../shared/shared-main/buttons/action-dropdown.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TableModule } from 'primeng/table'
+import { RouterLink } from '@angular/router'
+import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-runner-list',
-  templateUrl: './runner-list.component.html'
+  templateUrl: './runner-list.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    RouterLink,
+    TableModule,
+    SharedModule,
+    NgbTooltip,
+    ActionDropdownComponent,
+    AutoColspanDirective,
+    DatePipe
+  ]
 })
 export class RunnerListComponent extends RestTable <Runner> implements OnInit {
   runners: Runner[] = []

client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.ts

@@ -1,14 +1,36 @@
-import { SortMeta } from 'primeng/api'
+import { SortMeta, SharedModule } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { DropdownAction } from '@app/shared/shared-main'
 import { RunnerRegistrationToken } from '@peertube/peertube-models'
 import { RunnerService } from '../runner.service'
+import { DatePipe } from '@angular/common'
+import { AutoColspanDirective } from '../../../../shared/shared-main/angular/auto-colspan.directive'
+import { CopyButtonComponent } from '../../../../shared/shared-main/buttons/copy-button.component'
+import { ActionDropdownComponent } from '../../../../shared/shared-main/buttons/action-dropdown.component'
+import { ButtonComponent } from '../../../../shared/shared-main/buttons/button.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TableModule } from 'primeng/table'
+import { RouterLink } from '@angular/router'
+import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-runner-registration-token-list',
   styleUrls: [ './runner-registration-token-list.component.scss' ],
-  templateUrl: './runner-registration-token-list.component.html'
+  templateUrl: './runner-registration-token-list.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    RouterLink,
+    TableModule,
+    SharedModule,
+    NgbTooltip,
+    ButtonComponent,
+    ActionDropdownComponent,
+    CopyButtonComponent,
+    AutoColspanDirective,
+    DatePipe
+  ]
 })
 export class RunnerRegistrationTokenListComponent extends RestTable <RunnerRegistrationToken> implements OnInit {
   registrationTokens: RunnerRegistrationToken[] = []

client/src/app/+error-page/error-page.component.ts

@@ -2,11 +2,15 @@ import { Component, OnInit } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { Router } from '@angular/router'
 import { HttpStatusCode, HttpStatusCodeType } from '@peertube/peertube-models'
+import { LoginLinkComponent } from '../shared/shared-main/angular/login-link.component'
+import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-error-page',
   templateUrl: './error-page.component.html',
-  styleUrls: [ './error-page.component.scss' ]
+  styleUrls: [ './error-page.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, LoginLinkComponent ]
 })
 export class ErrorPageComponent implements OnInit {
   status: HttpStatusCodeType = HttpStatusCode.NOT_FOUND_404

client/src/app/+error-page/error-page.module.ts

@@ -1,25 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { ErrorPageRoutingModule } from './error-page-routing.module'
-import { ErrorPageComponent } from './error-page.component'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    SharedMainModule,
-
-    ErrorPageRoutingModule
-  ],
-
-  declarations: [
-    ErrorPageComponent
-  ],
-
-  exports: [
-    ErrorPageComponent
-  ],
-
-  providers: []
-})
-export class ErrorPageModule { }

client/src/app/+error-page/routes.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { ErrorPageComponent } from './error-page.component'
 import { MenuGuards } from '@app/core'
 
-const errorPageRoutes: Routes = [
+export default [
   {
     path: '',
     component: ErrorPageComponent,
@@ -15,10 +14,4 @@ const errorPageRoutes: Routes = [
       }
     }
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(errorPageRoutes) ],
-  exports: [ RouterModule ]
-})
-export class ErrorPageRoutingModule {}

client/src/app/+home/home-routing.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { HomeComponent } from './home.component'
-
-const homeRoutes: Routes = [
-  {
-    path: '',
-    component: HomeComponent,
-    data: {
-      meta: {
-        title: $localize`Homepage`
-      }
-    }
-  }
-]
-
-@NgModule({
-  imports: [ RouterModule.forChild(homeRoutes) ],
-  exports: [ RouterModule ]
-})
-export class HomeRoutingModule {}

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

@@ -1,9 +1,12 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { CustomPageService } from '@app/shared/shared-main/custom-page'
+import { CustomMarkupContainerComponent } from '../shared/shared-custom-markup/custom-markup-container.component'
 
 @Component({
   templateUrl: './home.component.html',
-  styleUrls: [ './home.component.scss' ]
+  styleUrls: [ './home.component.scss' ],
+  standalone: true,
+  imports: [ CustomMarkupContainerComponent ]
 })
 
 export class HomeComponent implements OnInit {

client/src/app/+home/home.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core'
-import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { HomeRoutingModule } from './home-routing.module'
-import { HomeComponent } from './home.component'
-
-@NgModule({
-  imports: [
-    HomeRoutingModule,
-
-    SharedMainModule,
-    SharedCustomMarkupModule
-  ],
-
-  declarations: [
-    HomeComponent
-  ],
-
-  exports: [
-    HomeComponent
-  ],
-
-  providers: [ ]
-})
-export class HomeModule { }

client/src/app/+home/index.ts

@@ -1,3 +0,0 @@
-export * from './home-routing.module'
-export * from './home.component'
-export * from './home.module'

client/src/app/+home/routes.ts

@@ -0,0 +1,29 @@
+import { Routes } from '@angular/router'
+import { HomeComponent } from './home.component'
+import { CustomPageService } from '../shared/shared-main/custom-page'
+import { CustomMarkupService, DynamicElementService } from '@app/shared/shared-custom-markup'
+import { FindInBulkService, SearchService } from '@app/shared/shared-search'
+import { VideoPlaylistService } from '@app/shared/shared-video-playlist'
+import { BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
+
+export default [
+  {
+    path: '',
+    component: HomeComponent,
+    providers: [
+      CustomPageService,
+      FindInBulkService,
+      SearchService,
+      VideoPlaylistService,
+      CustomMarkupService,
+      DynamicElementService,
+      BlocklistService,
+      VideoBlockService
+    ],
+    data: {
+      meta: {
+        title: $localize`Homepage`
+      }
+    }
+  }
+] satisfies Routes

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

@@ -1,6 +1,6 @@
 import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Router, RouterLink } from '@angular/router'
 import { AuthService, Notifier, RedirectService, SessionStorageService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators'
@@ -10,11 +10,33 @@ import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
 import { NgbAccordionDirective, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { getExternalAuthHref } from '@peertube/peertube-core-utils'
 import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@peertube/peertube-models'
+import { GlobalIconComponent } from '../shared/shared-icons/global-icon.component'
+import { InstanceBannerComponent } from '../shared/shared-instance/instance-banner.component'
+import { AutofocusDirective } from '../shared/shared-main/angular/autofocus.directive'
+import { PluginSelectorDirective } from '../shared/shared-main/plugins/plugin-selector.directive'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgClass, NgTemplateOutlet, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-login',
   templateUrl: './login.component.html',
-  styleUrls: [ './login.component.scss' ]
+  styleUrls: [ './login.component.scss' ],
+  standalone: true,
+  imports: [
+    NgIf,
+    RouterLink,
+    FormsModule,
+    PluginSelectorDirective,
+    ReactiveFormsModule,
+    AutofocusDirective,
+    NgClass,
+    NgTemplateOutlet,
+    InputTextComponent,
+    NgFor,
+    InstanceBannerComponent,
+    InstanceAboutAccordionComponent,
+    GlobalIconComponent
+  ]
 })
 
 export class LoginComponent extends FormReactive implements OnInit, AfterViewInit {

client/src/app/+login/login.module.ts

@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedInstanceModule } from '@app/shared/shared-instance'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { LoginRoutingModule } from './login-routing.module'
-import { LoginComponent } from './login.component'
-
-@NgModule({
-  imports: [
-    LoginRoutingModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedGlobalIconModule,
-
-    SharedInstanceModule
-  ],
-
-  declarations: [
-    LoginComponent
-  ],
-
-  exports: [
-    LoginComponent
-  ],
-
-  providers: [
-  ]
-})
-export class LoginModule { }

client/src/app/+login/routes.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
 import { LoginComponent } from './login.component'
 
-const loginRoutes: Routes = [
+export default [
   {
     path: '',
     component: LoginComponent,
@@ -12,14 +11,9 @@ const loginRoutes: Routes = [
         title: $localize`Login`
       }
     },
+    providers: [ ServerConfigResolver ],
     resolve: {
       serverConfig: ServerConfigResolver
     }
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(loginRoutes) ],
-  exports: [ RouterModule ]
-})
-export class LoginRoutingModule {}

client/src/app/+manage/manage.module.ts

@@ -1,31 +0,0 @@
-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 { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
-import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
-import { VideoChannelCreateComponent } from './video-channel-edit/video-channel-create.component'
-import { VideoChannelUpdateComponent } from './video-channel-edit/video-channel-update.component'
-import { ManageRoutingModule } from './manage-routing.module'
-
-@NgModule({
-  imports: [
-    ManageRoutingModule,
-    SharedMainModule,
-    SharedFormModule,
-    SharedGlobalIconModule,
-    SharedActorImageModule,
-    SharedActorImageEditModule
-  ],
-
-  declarations: [
-    VideoChannelCreateComponent,
-    VideoChannelUpdateComponent
-  ],
-
-  exports: [
-  ],
-
-  providers: []
-})
-export class ManageModule { }

client/src/app/+manage/routes.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { VideoChannelCreateComponent } from './video-channel-edit/video-channel-create.component'
 import { VideoChannelUpdateComponent } from './video-channel-edit/video-channel-update.component'
 
-const manageRoutes: Routes = [
+export default [
   {
     path: 'create',
     component: VideoChannelCreateComponent,
@@ -22,10 +21,4 @@ const manageRoutes: Routes = [
       }
     }
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(manageRoutes) ],
-  exports: [ RouterModule ]
-})
-export class ManageRoutingModule {}

client/src/app/+manage/video-channel-edit/video-channel-create.component.ts

@@ -13,10 +13,29 @@ import { FormReactiveService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { HttpStatusCode, VideoChannelCreate } from '@peertube/peertube-models'
 import { VideoChannelEdit } from './video-channel-edit'
+import { PeertubeCheckboxComponent } from '../../shared/shared-forms/peertube-checkbox.component'
+import { MarkdownTextareaComponent } from '../../shared/shared-forms/markdown-textarea.component'
+import { HelpComponent } from '../../shared/shared-main/misc/help.component'
+import { ActorAvatarEditComponent } from '../../shared/shared-actor-image-edit/actor-avatar-edit.component'
+import { ActorBannerEditComponent } from '../../shared/shared-actor-image-edit/actor-banner-edit.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgClass } from '@angular/common'
 
 @Component({
   templateUrl: './video-channel-edit.component.html',
-  styleUrls: [ './video-channel-edit.component.scss' ]
+  styleUrls: [ './video-channel-edit.component.scss' ],
+  standalone: true,
+  imports: [
+    NgIf,
+    FormsModule,
+    ReactiveFormsModule,
+    ActorBannerEditComponent,
+    ActorAvatarEditComponent,
+    NgClass,
+    HelpComponent,
+    MarkdownTextareaComponent,
+    PeertubeCheckboxComponent
+  ]
 })
 export class VideoChannelCreateComponent extends VideoChannelEdit implements OnInit, AfterViewInit {
   error: string

client/src/app/+manage/video-channel-edit/video-channel-update.component.ts

@@ -14,11 +14,30 @@ import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoChannelUpdate } from '@peertube/peertube-models'
 import { VideoChannelEdit } from './video-channel-edit'
 import { shallowCopy } from '@peertube/peertube-core-utils'
+import { PeertubeCheckboxComponent } from '../../shared/shared-forms/peertube-checkbox.component'
+import { MarkdownTextareaComponent } from '../../shared/shared-forms/markdown-textarea.component'
+import { HelpComponent } from '../../shared/shared-main/misc/help.component'
+import { ActorAvatarEditComponent } from '../../shared/shared-actor-image-edit/actor-avatar-edit.component'
+import { ActorBannerEditComponent } from '../../shared/shared-actor-image-edit/actor-banner-edit.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-video-channel-update',
   templateUrl: './video-channel-edit.component.html',
-  styleUrls: [ './video-channel-edit.component.scss' ]
+  styleUrls: [ './video-channel-edit.component.scss' ],
+  standalone: true,
+  imports: [
+    NgIf,
+    FormsModule,
+    ReactiveFormsModule,
+    ActorBannerEditComponent,
+    ActorAvatarEditComponent,
+    NgClass,
+    HelpComponent,
+    MarkdownTextareaComponent,
+    PeertubeCheckboxComponent
+  ]
 })
 export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnInit, AfterViewInit, OnDestroy {
   error: string
@@ -179,7 +198,7 @@ export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnI
   }
 
   getFormButtonTitle () {
-    return $localize`Update ${this.videoChannel.name}`
+    return $localize`Update ${this.videoChannel?.name}`
   }
 
   isBulkUpdateVideosDisplayed () {

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

@@ -1,3 +0,0 @@
-export * from './my-account-routing.module'
-export * from './my-account.component'
-export * from './my-account.module'

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

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core'
+import { AbuseListTableComponent } from '../../shared/shared-abuse-list/abuse-list-table.component'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-account-abuses-list',
   templateUrl: './my-account-abuses-list.component.html',
-  styleUrls: [ ]
+  styleUrls: [],
+  standalone: true,
+  imports: [ GlobalIconComponent, AbuseListTableComponent ]
 })
 export class MyAccountAbusesListComponent {
 

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

@@ -3,11 +3,15 @@ import { AuthService, ConfirmService, Notifier, ScopedTokensService } from '@app
 import { VideoService } from '@app/shared/shared-main'
 import { FeedFormat, ScopedToken } from '@peertube/peertube-models'
 import { environment } from '../../../environments/environment'
+import { InputTextComponent } from '../../shared/shared-forms/input-text.component'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-account-applications',
   templateUrl: './my-account-applications.component.html',
-  styleUrls: [ './my-account-applications.component.scss' ]
+  styleUrls: [ './my-account-applications.component.scss' ],
+  standalone: true,
+  imports: [ GlobalIconComponent, InputTextComponent ]
 })
 export class MyAccountApplicationsComponent implements OnInit {
   feedUrl: string

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

@@ -1,9 +1,29 @@
 import { Component } from '@angular/core'
 import { BlocklistComponentType, GenericAccountBlocklistComponent } from '@app/shared/shared-moderation'
+import { NgIf, DatePipe } from '@angular/common'
+import { AutoColspanDirective } from '../../shared/shared-main/angular/auto-colspan.directive'
+import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
+import { SharedModule } from 'primeng/api'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-account-blocklist',
-  templateUrl: '../../shared/shared-moderation/account-blocklist.component.html'
+  templateUrl: '../../shared/shared-moderation/account-blocklist.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    ActorAvatarComponent,
+    AutoColspanDirective,
+    NgIf,
+    DatePipe
+  ]
 })
 export class MyAccountBlocklistComponent extends GenericAccountBlocklistComponent {
   mode = BlocklistComponentType.Account

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

@@ -1,10 +1,30 @@
 import { Component } from '@angular/core'
 import { BlocklistComponentType, GenericServerBlocklistComponent } from '@app/shared/shared-moderation'
+import { BatchDomainsModalComponent } from '../../shared/shared-moderation/batch-domains-modal.component'
+import { NgIf, DatePipe } from '@angular/common'
+import { AutoColspanDirective } from '../../shared/shared-main/angular/auto-colspan.directive'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
+import { SharedModule } from 'primeng/api'
+import { TableModule } from 'primeng/table'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-account-server-blocklist',
   styleUrls: [ '../../shared/shared-moderation/moderation.scss', '../../shared/shared-moderation/server-blocklist.component.scss' ],
-  templateUrl: '../../shared/shared-moderation/server-blocklist.component.html'
+  templateUrl: '../../shared/shared-moderation/server-blocklist.component.html',
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    TableModule,
+    SharedModule,
+    AdvancedInputFilterComponent,
+    NgbTooltip,
+    AutoColspanDirective,
+    NgIf,
+    BatchDomainsModalComponent,
+    DatePipe
+  ]
 })
 export class MyAccountServerBlocklistComponent extends GenericServerBlocklistComponent {
   mode = BlocklistComponentType.Account

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

@@ -4,11 +4,18 @@ import { PeerTubeProblemDocument, ServerErrorCode, UserExport, UserExportState }
 import { UserImportExportService } from './user-import-export.service'
 import { concatMap, first, from, of, switchMap, toArray } from 'rxjs'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { BytesPipe } from '../../shared/shared-main/angular/bytes.pipe'
+import { FormsModule } from '@angular/forms'
+import { PeertubeCheckboxComponent } from '../../shared/shared-forms/peertube-checkbox.component'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { NgIf, NgFor, DatePipe } from '@angular/common'
 
 @Component({
   selector: 'my-account-export',
   templateUrl: './my-account-export.component.html',
-  styleUrls: [ './my-account-export.component.scss' ]
+  styleUrls: [ './my-account-export.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, NgFor, GlobalIconComponent, PeertubeCheckboxComponent, FormsModule, DatePipe, BytesPipe ]
 })
 export class MyAccountExportComponent implements OnInit {
   @ViewChild('exportModal', { static: true }) exportModal: NgbModal

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

@@ -2,10 +2,14 @@ import { Component, OnInit, ViewChild } from '@angular/core'
 import { AuthService, CanComponentDeactivate, UserService } from '@app/core'
 import { MyAccountImportComponent } from './my-account-import.component'
 import { first } from 'rxjs'
+import { MyAccountExportComponent } from './my-account-export.component'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-account-import-export',
-  templateUrl: './my-account-import-export.component.html'
+  templateUrl: './my-account-import-export.component.html',
+  standalone: true,
+  imports: [ GlobalIconComponent, MyAccountImportComponent, MyAccountExportComponent ]
 })
 export class MyAccountImportExportComponent implements OnInit, CanComponentDeactivate {
   @ViewChild('accountImport') accountImport: MyAccountImportComponent

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

@@ -7,11 +7,16 @@ import { buildHTTPErrorResponse, genericUploadErrorHandler, getUploadXRetryConfi
 import { HttpStatusCode, UserImport, UserImportState } from '@peertube/peertube-models'
 import { UploadxService, UploadState, UploaderX } from 'ngx-uploadx'
 import { BytesPipe } from '@app/shared/shared-main'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { UploadProgressComponent } from '../../shared/standalone-upload/upload-progress.component'
+import { NgIf, DatePipe } from '@angular/common'
 
 @Component({
   selector: 'my-account-import',
   templateUrl: './my-account-import.component.html',
-  styleUrls: [ './my-account-import.component.scss' ]
+  styleUrls: [ './my-account-import.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, UploadProgressComponent, NgbTooltip, DatePipe ]
 })
 export class MyAccountImportComponent implements OnInit, OnDestroy, CanComponentDeactivate {
   @Input() videoQuotaUsed: number

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

@@ -1,11 +1,17 @@
 import { Component, ViewChild } from '@angular/core'
 import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
+import { NgIf } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { RouterLink } from '@angular/router'
 
 type NotificationSortType = 'createdAt' | 'read'
 
 @Component({
   templateUrl: './my-account-notifications.component.html',
-  styleUrls: [ './my-account-notifications.component.scss' ]
+  styleUrls: [ './my-account-notifications.component.scss' ],
+  standalone: true,
+  imports: [ RouterLink, GlobalIconComponent, FormsModule, NgIf, UserNotificationsComponent ]
 })
 export class MyAccountNotificationsComponent {
   @ViewChild('userNotification', { static: true }) userNotification: UserNotificationsComponent

client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts

@@ -5,11 +5,16 @@ import { AuthService, Notifier, ServerService, UserService } from '@app/core'
 import { USER_EMAIL_VALIDATOR, USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { HttpStatusCode, User } from '@peertube/peertube-models'
+import { InputTextComponent } from '../../../shared/shared-forms/input-text.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-account-change-email',
   templateUrl: './my-account-change-email.component.html',
-  styleUrls: [ './my-account-change-email.component.scss' ]
+  styleUrls: [ './my-account-change-email.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, FormsModule, ReactiveFormsModule, NgClass, InputTextComponent ]
 })
 export class MyAccountChangeEmailComponent extends FormReactive implements OnInit {
   error: string = null

client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts

@@ -8,11 +8,16 @@ import {
 } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { HttpStatusCode, User } from '@peertube/peertube-models'
+import { InputTextComponent } from '../../../shared/shared-forms/input-text.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-account-change-password',
   templateUrl: './my-account-change-password.component.html',
-  styleUrls: [ './my-account-change-password.component.scss' ]
+  styleUrls: [ './my-account-change-password.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, FormsModule, ReactiveFormsModule, InputTextComponent ]
 })
 export class MyAccountChangePasswordComponent extends FormReactive implements OnInit {
   error: string = null

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts

@@ -4,7 +4,8 @@ import { AuthService, ConfirmService, Notifier, RedirectService, User, UserServi
 @Component({
   selector: 'my-account-danger-zone',
   templateUrl: './my-account-danger-zone.component.html',
-  styleUrls: [ './my-account-danger-zone.component.scss' ]
+  styleUrls: [ './my-account-danger-zone.component.scss' ],
+  standalone: true
 })
 export class MyAccountDangerZoneComponent {
   @Input() user: User = null

client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.ts

@@ -3,11 +3,15 @@ import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, UserService } from '@app/core'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { User, UserUpdateMe } from '@peertube/peertube-models'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'my-account-email-preferences',
   templateUrl: './my-account-email-preferences.component.html',
-  styleUrls: [ './my-account-email-preferences.component.scss' ]
+  styleUrls: [ './my-account-email-preferences.component.scss' ],
+  standalone: true,
+  imports: [ FormsModule, ReactiveFormsModule, PeertubeCheckboxComponent ]
 })
 export class MyAccountEmailPreferencesComponent extends FormReactive implements OnInit {
   @Input() user: User = null

client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts

@@ -5,11 +5,16 @@ import { Notifier, ServerService, User } from '@app/core'
 import { UserNotificationService } from '@app/shared/shared-main'
 import { objectKeysTyped } from '@peertube/peertube-core-utils'
 import { UserNotificationSetting, UserNotificationSettingValue, UserRight, UserRightType } from '@peertube/peertube-models'
+import { FormsModule } from '@angular/forms'
+import { InputSwitchComponent } from '../../../shared/shared-forms/input-switch.component'
+import { NgIf, NgFor } from '@angular/common'
 
 @Component({
   selector: 'my-account-notification-preferences',
   templateUrl: './my-account-notification-preferences.component.html',
-  styleUrls: [ './my-account-notification-preferences.component.scss' ]
+  styleUrls: [ './my-account-notification-preferences.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, NgFor, InputSwitchComponent, FormsModule ]
 })
 export class MyAccountNotificationPreferencesComponent implements OnInit {
   @Input() user: User

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

@@ -3,11 +3,15 @@ import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
 import { USER_DESCRIPTION_VALIDATOR, USER_DISPLAY_NAME_REQUIRED_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgIf, NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-account-profile',
   templateUrl: './my-account-profile.component.html',
-  styleUrls: [ './my-account-profile.component.scss' ]
+  styleUrls: [ './my-account-profile.component.scss' ],
+  standalone: true,
+  imports: [ NgIf, FormsModule, ReactiveFormsModule, NgClass ]
 })
 export class MyAccountProfileComponent extends FormReactive implements OnInit {
   @Input() user: User = null

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

@@ -1,14 +1,42 @@
-import { ViewportScroller } from '@angular/common'
+import { ViewportScroller, NgIf } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
 import { AfterViewChecked, Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, User, UserService } from '@app/core'
 import { genericUploadErrorHandler } from '@app/helpers'
 import { shallowCopy } from '@peertube/peertube-core-utils'
+import { MyAccountDangerZoneComponent } from './my-account-danger-zone/my-account-danger-zone.component'
+import { MyAccountChangeEmailComponent } from './my-account-change-email/my-account-change-email.component'
+import { MyAccountEmailPreferencesComponent } from './my-account-email-preferences/my-account-email-preferences.component'
+import { MyAccountTwoFactorButtonComponent } from './my-account-two-factor/my-account-two-factor-button.component'
+import { MyAccountChangePasswordComponent } from './my-account-change-password/my-account-change-password.component'
+import {
+  MyAccountNotificationPreferencesComponent
+} from './my-account-notification-preferences/my-account-notification-preferences.component'
+import { UserVideoSettingsComponent } from '../../shared/shared-user-settings/user-video-settings.component'
+import { UserInterfaceSettingsComponent } from '../../shared/shared-user-settings/user-interface-settings.component'
+import { MyAccountProfileComponent } from './my-account-profile/my-account-profile.component'
+import { UserQuotaComponent } from '../../shared/shared-main/users/user-quota.component'
+import { ActorAvatarEditComponent } from '../../shared/shared-actor-image-edit/actor-avatar-edit.component'
 
 @Component({
   selector: 'my-account-settings',
   templateUrl: './my-account-settings.component.html',
-  styleUrls: [ './my-account-settings.component.scss' ]
+  styleUrls: [ './my-account-settings.component.scss' ],
+  standalone: true,
+  imports: [
+    ActorAvatarEditComponent,
+    UserQuotaComponent,
+    MyAccountProfileComponent,
+    UserInterfaceSettingsComponent,
+    UserVideoSettingsComponent,
+    MyAccountNotificationPreferencesComponent,
+    NgIf,
+    MyAccountChangePasswordComponent,
+    MyAccountTwoFactorButtonComponent,
+    MyAccountEmailPreferencesComponent,
+    MyAccountChangeEmailComponent,
+    MyAccountDangerZoneComponent
+  ]
 })
 export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
   user: User = null

client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts

@@ -2,10 +2,14 @@ import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, User } from '@app/core'
 import { TwoFactorService } from '@app/shared/shared-users'
+import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
+import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'my-account-two-factor-button',
-  templateUrl: './my-account-two-factor-button.component.html'
+  templateUrl: './my-account-two-factor-button.component.html',
+  standalone: true,
+  imports: [ NgIf, ButtonComponent ]
 })
 export class MyAccountTwoFactorButtonComponent implements OnInit {
   @Input() user: User = null

client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, User } from '@app/core'
 import { USER_EXISTING_PASSWORD_VALIDATOR, USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactiveService } from '@app/shared/shared-forms'
 import { TwoFactorService } from '@app/shared/shared-users'
+import { QRCodeModule } from 'angularx-qrcode'
+import { InputTextComponent } from '../../../shared/shared-forms/input-text.component'
+import { NgIf } from '@angular/common'
+import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-account-two-factor',
   templateUrl: './my-account-two-factor.component.html',
-  styleUrls: [ './my-account-two-factor.component.scss' ]
+  styleUrls: [ './my-account-two-factor.component.scss' ],
+  standalone: true,
+  imports: [ GlobalIconComponent, NgIf, FormsModule, ReactiveFormsModule, InputTextComponent, QRCodeModule ]
 })
 export class MyAccountTwoFactorComponent implements OnInit {
   twoFactorAlreadyEnabled: boolean

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

@@ -1,11 +1,15 @@
 import { Component, OnInit } from '@angular/core'
 import { AuthUser, ScreenService } from '@app/core'
-import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
+import { TopMenuDropdownParam, TopMenuDropdownComponent } from '../shared/shared-main/misc/top-menu-dropdown.component'
+import { RouterOutlet } from '@angular/router'
+import { NgClass } from '@angular/common'
 
 @Component({
   selector: 'my-my-account',
   templateUrl: './my-account.component.html',
-  styleUrls: [ './my-account.component.scss' ]
+  styleUrls: [ './my-account.component.scss' ],
+  standalone: true,
+  imports: [ TopMenuDropdownComponent, NgClass, RouterOutlet ]
 })
 export class MyAccountComponent implements OnInit {
   menuEntries: TopMenuDropdownParam[] = []

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

@@ -1,97 +0,0 @@
-import { QRCodeModule } from 'angularx-qrcode'
-import { AutoCompleteModule } from 'primeng/autocomplete'
-import { TableModule } from 'primeng/table'
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { NgModule } from '@angular/core'
-import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
-import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { SharedModerationModule } from '@app/shared/shared-moderation'
-import { SharedShareModal } from '@app/shared/shared-share-modal'
-import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
-import { SharedUsersModule } from '@app/shared/shared-users'
-import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
-import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component'
-import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
-import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
-import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-account-server-blocklist.component'
-import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.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 { MyAccountEmailPreferencesComponent } from './my-account-settings/my-account-email-preferences'
-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 { MyAccountTwoFactorButtonComponent, MyAccountTwoFactorComponent } from './my-account-settings/my-account-two-factor'
-import { MyAccountComponent } from './my-account.component'
-import {
-  MyAccountImportExportComponent,
-  MyAccountExportComponent,
-  MyAccountImportComponent,
-  UserImportExportService
-} from './my-account-import-export'
-import { UploadProgressComponent } from '@app/shared/standalone-upload'
-import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
-
-@NgModule({
-  imports: [
-    MyAccountRoutingModule,
-
-    QRCodeModule,
-    AutoCompleteModule,
-    TableModule,
-    DragDropModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedModerationModule,
-    SharedUserInterfaceSettingsModule,
-    SharedUsersModule,
-    SharedGlobalIconModule,
-    SharedAbuseListModule,
-    SharedShareModal,
-    SharedActorImageModule,
-    SharedActorImageEditModule,
-
-    UploadProgressComponent,
-    UserNotificationsComponent
-  ],
-
-  declarations: [
-    MyAccountComponent,
-    MyAccountSettingsComponent,
-    MyAccountChangePasswordComponent,
-    MyAccountProfileComponent,
-    MyAccountChangeEmailComponent,
-    MyAccountApplicationsComponent,
-
-    MyAccountTwoFactorButtonComponent,
-    MyAccountTwoFactorComponent,
-
-    MyAccountDangerZoneComponent,
-    MyAccountBlocklistComponent,
-    MyAccountAbusesListComponent,
-    MyAccountServerBlocklistComponent,
-    MyAccountNotificationsComponent,
-    MyAccountNotificationPreferencesComponent,
-
-    MyAccountEmailPreferencesComponent,
-    MyAccountImportExportComponent,
-    MyAccountExportComponent,
-    MyAccountImportComponent
-  ],
-
-  exports: [
-    MyAccountComponent
-  ],
-
-  providers: [
-    UserImportExportService
-  ]
-})
-export class MyAccountModule {
-}

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

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { CanDeactivateGuard, LoginGuard } from '../core'
 import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component'
 import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
@@ -8,13 +7,24 @@ import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-acc
 import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountTwoFactorComponent } from './my-account-settings/my-account-two-factor'
-import { MyAccountImportExportComponent } from './my-account-import-export'
+import { MyAccountImportExportComponent, UserImportExportService } from './my-account-import-export'
 import { MyAccountComponent } from './my-account.component'
+import { TwoFactorService } from '@app/shared/shared-users'
+import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
+import { VideoCommentService } from '@app/shared/shared-video-comment'
 
-const myAccountRoutes: Routes = [
+export default [
   {
     path: '',
     component: MyAccountComponent,
+    providers: [
+      UserImportExportService,
+      TwoFactorService,
+      BlocklistService,
+      AbuseService,
+      VideoCommentService,
+      VideoBlockService
+    ],
     canActivateChild: [ LoginGuard ],
     children: [
       {
@@ -151,10 +161,4 @@ const myAccountRoutes: Routes = [
       }
     ]
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(myAccountRoutes) ],
-  exports: [ RouterModule ]
-})
-export class MyAccountRoutingModule {}

client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts

@@ -5,10 +5,38 @@ import { Component } from '@angular/core'
 import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifier, ScreenService } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { formatICU } from '@app/helpers'
+import { NumberFormatterPipe } from '../../shared/shared-main/angular/number-formatter.pipe'
+import { ChartModule } from 'primeng/chart'
+import { DeferLoadingDirective } from '../../shared/shared-main/angular/defer-loading.directive'
+import { DeleteButtonComponent } from '../../shared/shared-main/buttons/delete-button.component'
+import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
+import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
+import { ChannelsSetupMessageComponent } from '../../shared/shared-main/misc/channels-setup-message.component'
+import { RouterLink } from '@angular/router'
+import { NgIf, NgFor } from '@angular/common'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 
 @Component({
   templateUrl: './my-video-channels.component.html',
-  styleUrls: [ './my-video-channels.component.scss' ]
+  styleUrls: [ './my-video-channels.component.scss' ],
+  standalone: true,
+  imports: [
+    GlobalIconComponent,
+    NgIf,
+    RouterLink,
+    ChannelsSetupMessageComponent,
+    AdvancedInputFilterComponent,
+    InfiniteScrollerDirective,
+    NgFor,
+    ActorAvatarComponent,
+    EditButtonComponent,
+    DeleteButtonComponent,
+    DeferLoadingDirective,
+    ChartModule,
+    NumberFormatterPipe
+  ]
 })
 export class MyVideoChannelsComponent {
   videoChannels: VideoChannel[] = []

client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts

@@ -1,29 +0,0 @@
-import { ChartModule } from 'primeng/chart'
-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 { MyVideoChannelsRoutingModule } from './my-video-channels-routing.module'
-import { MyVideoChannelsComponent } from './my-video-channels.component'
-import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
-
-@NgModule({
-  imports: [
-    MyVideoChannelsRoutingModule,
-
-    ChartModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedGlobalIconModule,
-    SharedActorImageModule
-  ],
-
-  declarations: [
-    MyVideoChannelsComponent
-  ],
-
-  exports: [],
-  providers: []
-})
-export class MyVideoChannelsModule { }

client/src/app/+my-library/+my-video-channels/routes.ts

@@ -1,8 +1,7 @@
-import { NgModule } from '@angular/core'
+import { Routes } from '@angular/router'
-import { RouterModule, Routes } from '@angular/router'
 import { MyVideoChannelsComponent } from './my-video-channels.component'
 
-const myVideoChannelsRoutes: Routes = [
+export default [
   {
     path: '',
     component: MyVideoChannelsComponent,
@@ -20,10 +19,4 @@ const myVideoChannelsRoutes: Routes = [
     path: 'update/:videoChannelName',
     redirectTo: '/manage/update/:videoChannelName'
   }
-]
+] satisfies Routes
-
-@NgModule({
-  imports: [ RouterModule.forChild(myVideoChannelsRoutes) ],
-  exports: [ RouterModule ]
-})
-export class MyVideoChannelsRoutingModule {}