Global client redesign

* Split "my library" into "video space (channels, videos...)" and "my library (playlists, history...)"
 * Split "admin" into "overview (users, videos...)", "moderation (abuses, blocks, registrations...)" and "settings (configuration, runners...)"
 * Reorganize the header and the left menu: account settings/notifications are now in the header
 * Add instance information context in the left menu
 * Merge dedicated videos pages for "recently added", "trending", "local videos" into a "browse videos" page that includes quick filters
 * Clean up entire CSS
 * Clean CSS variables so it's easier to theme PeerTube (some new variables fallback to old variables to limit currnet themes breakages)
 * Replace the current light theme into a new one (beige)
 * Add a dark (brown) theme (included in PeerTube core)
 * Fix accessibility issues with old light theme colors (white on orange button for example)
 * Redesign the left menu, the horizontal menu, form controls and buttons, "Discover videos" page and common video filters panel
 * Replace/remove/add some global icon

client/src/app/shared/shared-main/menu/horizontal-menu.component.ts

@@ -0,0 +1,103 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router'
+import { GlobalIconComponent, GlobalIconName } from '@app/shared/shared-icons/global-icon.component'
+import { logger } from '@root-helpers/logger'
+import { filter, Subscription } from 'rxjs'
+import { PluginSelectorDirective } from '../plugins/plugin-selector.directive'
+import { ListOverflowComponent } from './list-overflow.component'
+
+export type HorizontalMenuEntry = {
+  label: string
+  iconName?: GlobalIconName
+
+  routerLink: string
+  queryParams?: Record<string, any>
+
+  isDisplayed?: () => boolean // Default: () => true
+  pluginSelectorId?: string // Default: () => true
+
+  children?: {
+    label: string
+
+    routerLink: string
+    queryParams?: Record<string, any>
+
+    isDisplayed?: () => boolean // Default: () => true
+  }[]
+}
+
+@Component({
+  selector: 'my-horizontal-menu',
+  templateUrl: './horizontal-menu.component.html',
+  styleUrls: [ './horizontal-menu.component.scss' ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    ListOverflowComponent,
+    GlobalIconComponent,
+    PluginSelectorDirective
+  ]
+})
+export class HorizontalMenuComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() menuEntries: HorizontalMenuEntry[] = []
+
+  @Input() h1: string
+  @Input() h1Icon: GlobalIconName
+
+  activeParent: HorizontalMenuEntry
+  children: HorizontalMenuEntry[] = []
+
+  private routerSub: Subscription
+
+  constructor (private router: Router, private route: ActivatedRoute) {
+
+  }
+
+  ngOnInit () {
+    this.routerSub = this.router.events.pipe(
+      filter((event: any) => event instanceof NavigationEnd)
+    ).subscribe(() => this.buildChildren())
+  }
+
+  ngOnChanges () {
+    this.buildChildren()
+  }
+
+  ngOnDestroy () {
+    if (this.routerSub) this.routerSub.unsubscribe()
+  }
+
+  private buildChildren () {
+    this.children = []
+    this.activeParent = undefined
+
+    const currentUrl = window.location.pathname
+    const currentComponentPath = this.route.snapshot.pathFromRoot.reduce((a, c) => {
+      if (c.url.length === 0) return a
+
+      return a + '/' + c.url[0].path
+    }, '')
+
+    const entry = this.menuEntries.find(parent => {
+      if (currentUrl.startsWith(parent.routerLink)) return true
+      if (!parent.routerLink.startsWith('/') && `${currentComponentPath}/${parent.routerLink}` === currentUrl) return true
+
+      if (parent.children) return parent.children.some(child => currentUrl.startsWith(child.routerLink))
+
+      return false
+    })
+
+    if (!entry) {
+      if (this.menuEntries.length !== 0) {
+        logger.info(`Unable to find entry for ${currentUrl} or ${currentComponentPath}`, { menuEntries: this.menuEntries })
+      }
+
+      return
+    }
+
+    this.children = entry.children
+    this.activeParent = entry
+  }
+}