30 files changed, 161 insertions, 193 deletions
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
index 2da492ea1..051635f45 100644
--- a/client/src/app/shared/shared-main/angular/autofocus.directive.ts
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -7,6 +7,8 @@ export class AutofocusDirective implements AfterViewInit {
  constructor (private host: ElementRef) { }
  ngAfterViewInit () {
-    this.host.nativeElement.focus()
+    const el = this.host.nativeElement as HTMLElement
+    el.focus({ preventScroll: true })
  }
 }
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index d62c1f88e..dc6a25e83 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -1,37 +1,51 @@
 import { Pipe, PipeTransform } from '@angular/core'
+import { prepareIcu } from '@app/helpers'
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
+  private yearICU = prepareIcu($localize`{interval, plural, =1 {1 year ago} other {{interval} years ago}}`)
+  private monthICU = prepareIcu($localize`{interval, plural, =1 {1 month ago} other {{interval} months ago}}`)
+  private weekICU = prepareIcu($localize`{interval, plural, =1 {1 week ago} other {{interval} weeks ago}}`)
+  private dayICU = prepareIcu($localize`{interval, plural, =1 {1 day ago} other {{interval} days ago}}`)
+  private hourICU = prepareIcu($localize`{interval, plural, =1 {1 hour ago} other {{interval} hours ago}}`)
  transform (arg: number | Date | string) {
    const argDate = new Date(arg)
    const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
    let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) return $localize`${interval} years ago`
+    if (interval >= 1) {
-    if (interval === 1) return $localize`1 year ago`
+      return this.yearICU({ interval }, $localize`${interval} year(s) ago`)
+    }
    interval = Math.floor(seconds / 2419200)
    // 12 months = 360 days, but a year ~ 365 days
    // Display "1 year ago" rather than "12 months ago"
    if (interval >= 12) return $localize`1 year ago`
-    if (interval > 1) return $localize`${interval} months ago`
-    if (interval === 1) return $localize`1 month ago`
+    if (interval >= 1) {
+      return this.monthICU({ interval }, $localize`${interval} month(s) ago`)
+    }
    interval = Math.floor(seconds / 604800)
    // 4 weeks ~ 28 days, but our month is 30 days
    // Display "1 month ago" rather than "4 weeks ago"
    if (interval >= 4) return $localize`1 month ago`
-    if (interval > 1) return $localize`${interval} weeks ago`
-    if (interval === 1) return $localize`1 week ago`
+    if (interval >= 1) {
+      return this.weekICU({ interval }, $localize`${interval} week(s) ago`)
+    }
    interval = Math.floor(seconds / 86400)
-    if (interval > 1) return $localize`${interval} days ago`
+    if (interval >= 1) {
-    if (interval === 1) return $localize`1 day ago`
+      return this.dayICU({ interval }, $localize`${interval} day(s) ago`)
+    }
    interval = Math.floor(seconds / 3600)
-    if (interval > 1) return $localize`${interval} hours ago`
+    if (interval >= 1) {
-    if (interval === 1) return $localize`1 hour ago`
+      return this.hourICU({ interval }, $localize`${interval} hour(s) ago`)
+    }
    interval = Math.floor(seconds / 60)
    if (interval >= 1) return $localize`${interval} min ago`
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 10dae68f0..017355bd0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -39,7 +39,7 @@
          </span>
          <h6
-            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
            class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
          >
            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 67ac6e1aa..749773f8a 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
    return actions.some(a => {
      if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
-      return a.isDisplayed === undefined || a.isDisplayed(entry)
+      return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry))
    })
  }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index d1a4215e6..3e3728623 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,16 @@
-<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+<div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
-  <my-small-loader [loading]="loading"></my-small-loader>
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</div>
+<a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</a>
+<ng-template #content>
+  <my-loader size="sm" [loading]="loading"></my-loader>
  <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
  <span *ngIf="label" class="button-label">{{ label }}</span>
  <ng-content></ng-content>
-</span>
+</ng-template>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index c53b8f2e5..7f0cdf1ed 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -9,17 +9,14 @@
  .button-label {
    display: none;
  }
-}
-:host {
+  my-global-icon {
-  outline: none;
+    margin: 0 !important;
-  display: inline-block;
+  }
 }
-my-small-loader ::ng-deep .root {
+:host {
  display: inline-block;
-  margin: 0 3px 0 0;
-  width: 20px;
 }
 a[class$=-button],
@@ -30,35 +27,34 @@ span[class$=-button] {
 }
 .action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px);
  width: 100%; // useful for ellipsis, allow to define a max-width on host component
-  &.icon-only {
+  &.has-icon {
-    my-global-icon {
+    @include button-with-icon(21px);
-      margin: 0;
+  }
-    }
+  &.icon-only my-global-icon {
+    margin: 0 !important;
  }
 }
-.orange-button {
+.orange-button,
+.grey-button {
  @include peertube-button;
-  @include orange-button;
 }
-.orange-button-link {
+.orange-button-link,
+.grey-button-link {
  @include peertube-button-link;
-  @include orange-button;
 }
-.grey-button {
+.orange-button,
-  @include peertube-button;
+.orange-button-link {
-  @include grey-button;
+  @include orange-button;
 }
+.grey-button,
 .grey-button-link {
-  @include peertube-button-link;
  @include grey-button;
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 52936a4d4..10d67831f 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 @Component({
@@ -7,20 +7,24 @@ import { GlobalIconName } from '@app/shared/shared-icons'
  templateUrl: './button.component.html'
 })
-export class ButtonComponent {
+export class ButtonComponent implements OnChanges {
  @Input() label = ''
  @Input() className = 'grey-button'
  @Input() icon: GlobalIconName = undefined
+  @Input() routerLink: string[] | string
  @Input() title: string = undefined
  @Input() loading = false
  @Input() disabled = false
  @Input() responsiveLabel = false
-  getClasses () {
+  classes: { [id: string]: boolean } = {}
-    return {
+  ngOnChanges () {
+    this.classes = {
      [this.className]: true,
      disabled: this.disabled,
      'icon-only': !this.label,
+      'has-icon': !!this.icon,
      'responsive-label': this.responsiveLabel
    }
  }
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
deleted file mode 100644
index d7a6702a7..000000000
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<span
-  class="action-button action-button-delete grey-button"
-  [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
->
-  <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-  <span class="button-label" *ngIf="label">{{ label }}</span>
-</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 90735852c..1cab10803 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -2,17 +2,16 @@ import { Component, Input, OnInit } from '@angular/core'
 @Component({
  selector: 'my-delete-button',
-  styleUrls: [ './button.component.scss' ],
+  template: `
-  templateUrl: './delete-button.component.html'
+  <my-button icon="delete" className="grey-button" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"></my-button>
+  `
 })
 export class DeleteButtonComponent implements OnInit {
  @Input() label: string
  @Input() title: string
  @Input() responsiveLabel = false
  ngOnInit () {
-    // <my-delete-button /> No label
    if (this.label === undefined && !this.title) {
      this.title = $localize`Delete`
    }
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
deleted file mode 100644
index 8beeee6c4..000000000
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<a
-  class="action-button action-button-edit grey-button"
-  [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
->
-  <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
-  <span class="button-label" *ngIf="label">{{ label }}</span>
-</a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 24c8625ff..28aacbbff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -2,8 +2,13 @@ import { Component, Input, OnInit } from '@angular/core'
 @Component({
  selector: 'my-edit-button',
-  styleUrls: [ './button.component.scss' ],
+  template: `
-  templateUrl: './edit-button.component.html'
+    <my-button
+      icon="edit" className="grey-button-link"
+      [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
+      [routerLink]="routerLink"
+    ></my-button>
+  `
 })
 export class EditButtonComponent implements OnInit {
  @Input() label: string
@@ -20,10 +25,6 @@ export class EditButtonComponent implements OnInit {
    // <my-edit-button label /> Use default label
    if (this.label === '') {
      this.label = $localize`Update`
-      if (!this.title) {
-        this.title = this.label
-      }
    }
  }
 }
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
index a061914d5..60483727c 100644
--- a/client/src/app/shared/shared-main/loaders/index.ts
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -1,2 +1 @@
 export * from './loader.component'
-export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
deleted file mode 100644
index ca8ed063e..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div *ngIf="loading">
-  <div class="loader">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
deleted file mode 100644
index b88b0db6a..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-// Thanks to https://loading.io/css/ (CC0 License)
-.loader {
-  display: inline-block;
-  position: relative;
-  width: 50px;
-  height: 50px;
-}
-.loader div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 44px;
-  height: 44px;
-  margin: 6px;
-  border: 4px solid;
-  border-radius: 50%;
-  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #999999 transparent transparent;
-}
-.loader div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.loader div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.loader div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
 @Component({
  selector: 'my-loader',
-  styleUrls: [ './loader.component.scss' ],
+  template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
-  templateUrl: './loader.component.html'
 })
 export class LoaderComponent {
  @Input() loading: boolean
+  @Input() size: 'sm' | 'xl'
+  private readonly sizes = {
+    sm: {
+      width: '1rem',
+      height: '1rem',
+      'border-width': '0.15rem'
+    },
+    xl: {
+      width: '3rem',
+      height: '3rem'
+    }
+  }
+  getStyle () {
+    if (!this.size) return undefined
+    return this.sizes[this.size]
+  }
 }
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
deleted file mode 100644
index 7886f8918..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="root" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
deleted file mode 100644
index 191877f14..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-@Component({
-  selector: 'my-small-loader',
-  styleUrls: [ ],
-  templateUrl: './small-loader.component.html'
-})
-export class SmallLoaderComponent {
-  @Input() loading: boolean
-}
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
index 3fe888a35..539df06bd 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="hasChannelNotConfigured()" class="channels-setup-message alert alert-info">
+<div *ngIf="hasChannelNotConfigured()" class="channels-setup-message alert pt-alert-primary">
  <my-global-icon iconName="tip"></my-global-icon>
  <div>
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
index 7dcba2ca5..2aa176e1b 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -5,28 +5,24 @@
  display: flex;
  align-items: center;
  justify-content: center;
+}
-  my-global-icon {
+my-global-icon {
-    width: 32px;
+  @include apply-svg-color(pvar(--mainColor));
-    align-self: flex-start;
-    ::ng-deep {
+  width: 32px;
-      svg {
+  align-self: flex-start;
-        fill: #0c5460;
-      }
-    }
-    + div {
+  + div {
-      margin-left: 10px;
+    margin-left: 10px;
-      text-align: center;
+    text-align: center;
+  }
+}
-      a.channels-settings-link {
+.channels-settings-link {
-        @include peertube-button-link;
+  @include peertube-button-link;
-        @include grey-button;
+  @include grey-button;
-        height: fit-content;
+  height: fit-content;
-        margin-top: 10px;
+  margin-top: 10px;
-      }
-    }
-  }
 }
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index b2e0982f1..6f29eaefa 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -1,18 +1,22 @@
-<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+<div #itemsParent class="list-overflow-parent">
  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
  </span>
  <ng-container *ngIf="isMenuDisplayed()">
    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
-      <span class="glyphicon glyphicon-chevron-down"></span>
+      <span class="chevron-down"></span>
    </button>
-    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+    <div
+      *ngIf="!isInMobileView" class="list-overflow-menu"
+      ngbDropdown container="body" #dropdown="ngbDropdown"
+      (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"
+    >
      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
      >
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="chevron-down"></span>
      </button>
      <div ngbDropdownMenu>
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 19c055fd3..b06418568 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -7,6 +7,9 @@
 .list-overflow-parent {
  overflow: hidden;
+  display: flex;
+  // For the menu icon
+  max-width: calc(100vw - 30px);
 }
 .list-overflow-menu {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index fbc481093..541991f74 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -15,6 +15,9 @@ import {
 } from '@angular/core'
 import { ScreenService } from '@app/core'
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import * as debug from 'debug'
+const logger = debug('peertube:main:ListOverflowItem')
 export interface ListOverflowItem {
  label: string
@@ -37,7 +40,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
  showItemsUntilIndexExcluded: number
  active = false
-  isInTouchScreen = false
  isInMobileView = false
  private openedOnHover = false
@@ -58,13 +60,14 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
  @HostListener('window:resize')
  onWindowResize () {
-    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
    this.isInMobileView = !!this.screenService.isInMobileView()
    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
    let showItemsUntilIndexExcluded: number
    let accWidth = 0
+    logger('Parent width is %d', parentWidth)
    for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
      accWidth += el.nativeElement.getBoundingClientRect().width
      if (showItemsUntilIndexExcluded === undefined) {
@@ -76,6 +79,8 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
    }
+    logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
    this.cdr.markForCheck()
  }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 1e2f6c6a9..386d26116 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,17 +1,10 @@
 <div class="root">
-  <div class="input-group has-feedback has-clear">
+  <div class="input-group has-clear">
-    <input
+    <input #ref type="text" class="last-in-group"
-      #ref
+      [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
-      type="text"
-      [(ngModel)]="value"
-      (keyup.enter)="sendSearch()"
-      [hidden]="!inputShown"
-      [name]="name"
-      [placeholder]="placeholder"
    >
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetFilter()"></a>
+    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
-    <span class="sr-only" i18n>Clear filters</span>
  </div>
  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index d5fcff760..ee0f7a8d2 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -5,7 +5,7 @@
  display: flex;
 }
-my-global-icon {
+.root > my-global-icon {
  @include margin-left(10px);
  height: 28px;
@@ -25,3 +25,7 @@ input {
    box-shadow: 0 0 5px 0 #a5a5a5;
  }
 }
+.input-group > my-global-icon {
+  width: 20px;
+}
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index d884e75b2..d96fdbdc6 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,7 +1,13 @@
 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
-    <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
+    <a
+      *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
+      [routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
+      (click)="onActiveLinkScrollToTop(routerLink)"
+    >
+      {{ menuEntry.label }}
+    </a>
    <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
      #dropdown="ngbDropdown" autoClose="true" container="body">
@@ -10,7 +16,7 @@
        tabindex=0
        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
        (click)="openModal(id)" (keydown.enter)="openModal(id)"
-        role="button" class="title-page title-page-settings">
+        role="button" class="sub-menu-entry">
        <ng-container i18n>{{ menuEntry.label }}</ng-container>
      </span>
@@ -19,7 +25,7 @@
        tabindex=0
        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
        (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
-        role="button" class="title-page title-page-settings"
+        role="button" class="sub-menu-entry"
      >
        <ng-container i18n>{{ menuEntry.label }}</ng-container>
      </span>
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 5629640bc..89f43239f 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
-import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { LoaderComponent } from './loaders'
 import {
  ChannelsSetupMessageComponent,
  HelpComponent,
@@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel'
    FeedComponent,
    LoaderComponent,
-    SmallLoaderComponent,
    ChannelsSetupMessageComponent,
    HelpComponent,
@@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel'
    FeedComponent,
    LoaderComponent,
-    SmallLoaderComponent,
    ChannelsSetupMessageComponent,
    HelpComponent,
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
index dd1fc20d0..0e0d38c2a 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.html
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -12,7 +12,7 @@
  <div *ngIf="hasDailyQuota()" class="mt-3">
    <label class="user-quota-title" tabindex="0" i18n>Daily video quota</label>
    <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
-      <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
+      <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
        [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
      <span>{{ userVideoQuotaUsedDaily | bytes: 1 }}</span>
      <span>{{ userVideoQuotaDaily }}</span>
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 70571bde6..f3e86ce78 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .user-quota {
  label {
    @include margin-right(5px);
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index 32376bf62..62bd94349 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -27,6 +27,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  videosCount?: number
  viewsPerDay?: ViewsPerDate[]
+  totalViews?: number
  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
    return Actor.GET_ACTOR_AVATAR_URL(actor, size)
@@ -74,6 +75,10 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
      this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
    }
+    if (hash.totalViews !== null && hash.totalViews !== undefined) {
+      this.totalViews = hash.totalViews
+    }
    if (hash.ownerAccount) {
      this.ownerAccount = hash.ownerAccount
      this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 022bb95ad..2e4ab87d7 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -1,6 +1,6 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
-import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
+import { durationToString, prepareIcu, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { buildVideoWatchPath } from '@shared/core-utils'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
@@ -19,6 +19,9 @@ import {
 } from '@shared/models'
 export class Video implements VideoServerModel {
+  private static readonly viewsICU = prepareIcu($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`)
+  private static readonly viewersICU = prepareIcu($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`)
  byVideoChannel: string
  byAccount: string
@@ -269,12 +272,10 @@ export class Video implements VideoServerModel {
  }
  getExactNumberOfViews () {
-    if (this.views < 1000) return ''
    if (this.isLive) {
-      return $localize`${this.views} viewers`
+      return Video.viewersICU({ viewers: this.viewers }, $localize`${this.viewers} viewer(s)`)
    }
-    return $localize`${this.views} views`
+    return Video.viewsICU({ views: this.views }, $localize`{${this.views} view(s)}`)
  }
 }