Use standalone components for menu

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core'
-import { UserNotificationsComponent } from '@app/shared/shared-main'
+import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
 
 type NotificationSortType = 'createdAt' | 'read'
 

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

@@ -35,6 +35,7 @@ import {
   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: [
@@ -56,7 +57,8 @@ import { UploadProgressComponent } from '@app/shared/standalone-upload'
     SharedActorImageModule,
     SharedActorImageEditModule,
 
-    UploadProgressComponent
+    UploadProgressComponent,
+    UserNotificationsComponent
   ],
 
   declarations: [

client/src/app/app.component.html

@@ -72,10 +72,10 @@
   </ng-template>
 </p-toast>
 
-<ng-container *ngIf="isUserLoggedIn()">
+@defer (when isUserLoggedIn()) {
   <my-account-setup-warning-modal #accountSetupWarningModal></my-account-setup-warning-modal>
   <my-admin-welcome-modal #adminWelcomeModal></my-admin-welcome-modal>
   <my-instance-config-warning-modal #instanceConfigWarningModal></my-instance-config-warning-modal>
-</ng-container>
+}
 
 <my-custom-modal #customModal></my-custom-modal>

client/src/app/app.module.ts

@@ -13,13 +13,9 @@ import { EmptyComponent } from './empty.component'
 import { HeaderComponent, SearchTypeaheadComponent, SuggestionComponent } from './header'
 import { HighlightPipe } from './header/highlight.pipe'
 import { polyfillICU } from './helpers'
-import { LanguageChooserComponent, MenuComponent, NotificationComponent } from './menu'
-import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-modal.component'
-import { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
+import { MenuComponent } from './menu'
 import { ConfirmComponent } from './modal/confirm.component'
 import { CustomModalComponent } from './modal/custom-modal.component'
-import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
-import { QuickSettingsModalComponent } from './modal/quick-settings-modal.component'
 import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from './shared/shared-forms'
 import { SharedGlobalIconModule } from './shared/shared-icons'
@@ -27,6 +23,9 @@ import { SharedInstanceModule } from './shared/shared-instance'
 import { SharedMainModule } from './shared/shared-main'
 import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings'
 import { HotkeysCheatSheetComponent } from './hotkeys'
+import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
+import { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
+import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-modal.component'
 
 registerLocaleData(localeOc, 'oc')
 
@@ -51,19 +50,12 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS
     AppComponent,
     EmptyComponent,
 
-    MenuComponent,
-    LanguageChooserComponent,
-    QuickSettingsModalComponent,
-    NotificationComponent,
     HeaderComponent,
     SearchTypeaheadComponent,
     SuggestionComponent,
     HighlightPipe,
 
-    AccountSetupWarningModalComponent,
     CustomModalComponent,
-    AdminWelcomeModalComponent,
-    InstanceConfigWarningModalComponent,
     ConfirmComponent,
 
     HotkeysCheatSheetComponent
@@ -81,6 +73,12 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS
     SharedInstanceModule,
     SharedActorImageModule,
 
+    MenuComponent,
+
+    InstanceConfigWarningModalComponent,
+    AdminWelcomeModalComponent,
+    AccountSetupWarningModalComponent,
+
     AppRoutingModule // Put it after all the module because it has the 404 route
   ],
 

client/src/app/menu/index.ts

@@ -1,3 +1,2 @@
 export * from './language-chooser.component'
-export * from './notification.component'
 export * from './menu.component'

client/src/app/menu/language-chooser.component.ts

@@ -1,12 +1,16 @@
+import { CommonModule } from '@angular/common'
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
 import { getDevLocale, isOnDevLocale } from '@app/helpers'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { getCompleteLocale, getShortLocale, I18N_LOCALES, objectKeysTyped, sortBy } from '@peertube/peertube-core-utils'
 
 @Component({
   selector: 'my-language-chooser',
   templateUrl: './language-chooser.component.html',
-  styleUrls: [ './language-chooser.component.scss' ]
+  styleUrls: [ './language-chooser.component.scss' ],
+  standalone: true,
+  imports: [ CommonModule, SharedGlobalIconModule ]
 })
 export class LanguageChooserComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef

client/src/app/menu/menu.component.html

@@ -78,7 +78,9 @@
             </div>
           </div>
 
-          <my-notification (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification>
+          @defer (when isLoggedIn) {
+            <my-notification (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification>
+          }
         </div>
 
         <ul class="logged-in-menu">

client/src/app/menu/menu.component.ts

@@ -1,7 +1,7 @@
 import * as debug from 'debug'
 import { forkJoin, Subscription } from 'rxjs'
 import { first, switchMap } from 'rxjs/operators'
-import { ViewportScroller } from '@angular/common'
+import { CommonModule, ViewportScroller } from '@angular/common'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import {
@@ -18,18 +18,36 @@ import {
   UserService
 } from '@app/core'
 import { scrollToTop } from '@app/helpers'
-import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
-import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { HTMLServerConfig, ServerConfig, UserRight, UserRightType, VideoConstant } from '@peertube/peertube-models'
+import { NotificationComponent } from './notification.component'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
+import { LanguageChooserComponent } from './language-chooser.component'
+import { QuickSettingsModalComponent } from './quick-settings-modal.component'
 
 const debugLogger = debug('peertube:menu:MenuComponent')
 
 @Component({
   selector: 'my-menu',
   templateUrl: './menu.component.html',
-  styleUrls: [ './menu.component.scss' ]
+  styleUrls: [ './menu.component.scss' ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedActorImageModule,
+    NotificationComponent,
+    SharedMainModule,
+    SharedGlobalIconModule,
+    SharedUserInterfaceSettingsModule,
+    SharedFormModule,
+    LanguageChooserComponent,
+    QuickSettingsModalComponent
+  ]
 })
 export class MenuComponent implements OnInit, OnDestroy {
   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent

client/src/app/menu/notification.component.ts

@@ -3,13 +3,17 @@ import { filter } from 'rxjs/operators'
 import { Component, EventEmitter, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { NavigationEnd, Router } from '@angular/router'
 import { Notifier, PeerTubeSocket, ScreenService } from '@app/core'
-import { UserNotificationService } from '@app/shared/shared-main'
+import { SharedMainModule, UserNotificationService } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 
 @Component({
   selector: 'my-notification',
   templateUrl: './notification.component.html',
-  styleUrls: [ './notification.component.scss' ]
+  styleUrls: [ './notification.component.scss' ],
+  standalone: true,
+  imports: [ UserNotificationsComponent, SharedMainModule, SharedGlobalIconModule ]
 })
 export class NotificationComponent implements OnInit, OnDestroy {
   @ViewChild('popover', { static: true }) popover: NgbPopover

client/src/app/menu/quick-settings-modal.component.ts

@@ -5,10 +5,15 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, AuthStatus, LocalStorageService, User, UserService } from '@app/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'my-quick-settings',
-  templateUrl: './quick-settings-modal.component.html'
+  templateUrl: './quick-settings-modal.component.html',
+  standalone: true,
+  imports: [ CommonModule, SharedGlobalIconModule, SharedUserInterfaceSettingsModule ]
 })
 export class QuickSettingsModalComponent implements OnInit, OnDestroy {
   private static readonly QUERY_MODAL_NAME = 'quick-settings'

client/src/app/modal/account-setup-warning-modal.component.ts

@@ -1,5 +1,8 @@
+import { CommonModule } from '@angular/common'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier, ServerService, User, UserService } from '@app/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@@ -7,7 +10,9 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 @Component({
   selector: 'my-account-setup-warning-modal',
   templateUrl: './account-setup-warning-modal.component.html',
-  styleUrls: [ './account-setup-warning-modal.component.scss' ]
+  styleUrls: [ './account-setup-warning-modal.component.scss' ],
+  standalone: true,
+  imports: [ CommonModule, SharedGlobalIconModule, SharedFormModule ]
 })
 export class AccountSetupWarningModalComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef

client/src/app/modal/admin-welcome-modal.component.html

@@ -11,22 +11,19 @@
     <div class="block-documentation">
       <div class="columns">
         <a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" rel="noopener noreferrer">
-          <a i18n class="link-title" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" rel="noopener noreferrer">CLI
-            documentation</a>
+          <a i18n class="link-title" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" rel="noopener noreferrer">CLI documentation</a>
 
           <div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
         </a>
 
         <a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" rel="noopener noreferrer">
-          <a i18n class="link-title" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" rel="noopener noreferrer">Administer
-            documentation</a>
+          <a i18n class="link-title" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" rel="noopener noreferrer">Administer documentation</a>
 
           <div i18n>Managing users, following other instances, dealing with spammers...</div>
         </a>
 
         <a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" rel="noopener noreferrer">
-          <a i18n class="link-title" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" rel="noopener noreferrer">Use
-            documentation</a>
+          <a i18n class="link-title" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" rel="noopener noreferrer">Use documentation</a>
 
           <div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
         </a>
@@ -41,10 +38,12 @@
         <div i18n class="subtitle">Useful links</div>
 
         <ul>
-          <li i18n>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank"
-                                                                           rel="noopener noreferrer">https://joinpeertube.org</a></li>
+          <li i18n>
+            Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
+          </li>
 
-          <li i18n>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
+          <li i18n>
+            Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
           </li>
         </ul>
       </div>

client/src/app/modal/admin-welcome-modal.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@@ -7,7 +8,9 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 @Component({
   selector: 'my-admin-welcome-modal',
   templateUrl: './admin-welcome-modal.component.html',
-  styleUrls: [ './admin-welcome-modal.component.scss' ]
+  styleUrls: [ './admin-welcome-modal.component.scss' ],
+  standalone: true,
+  imports: [ SharedGlobalIconModule ]
 })
 export class AdminWelcomeModalComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef

client/src/app/modal/instance-config-warning-modal.component.ts

@@ -1,6 +1,8 @@
-import { Location } from '@angular/common'
+import { CommonModule, Location } from '@angular/common'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { About, ServerConfig } from '@peertube/peertube-models'
 import { logger } from '@root-helpers/logger'
@@ -9,7 +11,9 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 @Component({
   selector: 'my-instance-config-warning-modal',
   templateUrl: './instance-config-warning-modal.component.html',
-  styleUrls: [ './instance-config-warning-modal.component.scss' ]
+  styleUrls: [ './instance-config-warning-modal.component.scss' ],
+  standalone: true,
+  imports: [ CommonModule, SharedGlobalIconModule, SharedFormModule ]
 })
 export class InstanceConfigWarningModalComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef

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

@@ -46,7 +46,7 @@ import {
 } from './misc'
 import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
 import { ActorRedirectGuard } from './router'
-import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
+import { UserHistoryService, UserNotificationService, UserQuotaComponent } from './users'
 import {
   EmbedComponent,
   RedundancyService,
@@ -120,7 +120,6 @@ import { VideoChannelService } from './video-channel'
     SimpleSearchInputComponent,
 
     UserQuotaComponent,
-    UserNotificationsComponent,
 
     SignupLabelComponent,
 
@@ -184,7 +183,6 @@ import { VideoChannelService } from './video-channel'
     SimpleSearchInputComponent,
 
     UserQuotaComponent,
-    UserNotificationsComponent,
 
     SignupLabelComponent,
 

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

@@ -1,5 +1,4 @@
 export * from './user-history.service'
 export * from './user-notification.model'
 export * from './user-notification.service'
-export * from './user-notifications.component'
 export * from './user-quota.component'

client/src/app/shared/standalone-notifications/user-notifications.component.ts

@@ -2,13 +2,16 @@ import { Subject } from 'rxjs'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { ComponentPagination, hasMoreItems, Notifier } from '@app/core'
 import { AbuseState } from '@peertube/peertube-models'
-import { UserNotification } from './user-notification.model'
-import { UserNotificationService } from './user-notification.service'
+import { SharedMainModule, UserNotification, UserNotificationService } from '../shared-main'
+import { CommonModule } from '@angular/common'
+import { SharedGlobalIconModule } from '../shared-icons'
 
 @Component({
   selector: 'my-user-notifications',
   templateUrl: 'user-notifications.component.html',
-  styleUrls: [ 'user-notifications.component.scss' ]
+  styleUrls: [ 'user-notifications.component.scss' ],
+  standalone: true,
+  imports: [ CommonModule, SharedMainModule, SharedGlobalIconModule ]
 })
 export class UserNotificationsComponent implements OnInit {
   @Input() ignoreLoadingBar = false