21 files changed, 114 insertions, 93 deletions

diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index fd648a425..8d1c3eadb 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -3,6 +3,7 @@ import { SelectButtonModule } from 'primeng/selectbutton'
 import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -38,6 +39,7 @@ import { JobService, LogsComponent, LogsService, SystemComponent } from './syste
 import { DebugComponent, DebugService } from './system/debug'
 import { JobsComponent } from './system/jobs/jobs.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 
 @NgModule({
   imports: [
@@ -49,6 +51,8 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
     SharedGlobalIconModule,
     SharedAbuseListModule,
     SharedVideoCommentModule,
+    SharedAccountAvatarModule,
+    SharedActorImageModule,
 
     TableModule,
     SelectButtonModule,
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 622d464e4..633de9677 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -24,7 +24,7 @@
 
   <ng-template pTemplate="header">
     <tr>
-      <th style="width: 150px;">Actions</th>
+      <th style="width: 150px;" i18n>Actions</th>
       <th i18n>Follower handle</th>
       <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
       <th style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index cf87ec05f..f4e6a60fe 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -31,7 +31,7 @@
 
   <ng-template pTemplate="header">
     <tr>
-      <th style="width: 150px;">Action</th>
+      <th style="width: 150px;" i18n>Action</th>
       <th i18n>Host</th>
       <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index a654e51a6..f3bcca497 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -24,7 +24,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px;"></th>
-      <th style="width: 150px;">Action</th>
+      <th style="width: 150px;" i18n>Action</th>
       <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
       <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th >
       <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index 128f4962d..f5cf93adb 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -34,12 +34,7 @@
       <td>
         <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
-            <img
-              class="avatar"
-              [src]="accountBlock.blockedAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
+            <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
             <div>
               {{ accountBlock.blockedAccount.displayName }}
               <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 82c371f4d..d6aca10e7 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -164,7 +164,8 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
         baseUrl: `${environment.originServerUrl}/videos/embed/${entry.video.uuid}`,
         title: false,
         warningTitle: false
-      })
+      }),
+      entry.video.name
     )
   }
 
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
index fa4a8edfd..d360c3c51 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -5,7 +5,7 @@
   <my-feed [syndicationItems]="syndicationItems"></my-feed>
 </h1>
 
-<em>This view also shows comments from muted accounts.</em>
+<em i18n>This view also shows comments from muted accounts.</em>
 
 <p-table
   [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
@@ -86,12 +86,8 @@
       <td>
         <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
-            <img
-              class="avatar"
-              [src]="videoComment.accountAvatarUrl"
-              alt=""
-            >
-            <div>
+            <my-account-avatar [account]="videoComment.account"></my-account-avatar>
+          <div>
               {{ videoComment.account.displayName }}
               <span>{{ videoComment.by }}</span>
             </div>
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
index d208944fe..c9262da09 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -1,17 +1,9 @@
 @import 'mixins';
 
-h1 {
-  my-feed {
-    margin-left: 5px;
-    display: inline-block;
-
-    ::ng-deep {
-      my-global-icon {
-        width: 15px !important;
-        top: 0 !important;
-      }
-    }
-  }
+my-feed {
+  margin-left: 5px;
+  display: inline-block;
+  width: 15px;
 }
 
 my-global-icon {
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 82a965313..9cbec03a1 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -23,7 +23,7 @@
         </a>
 
         <div class="buttons">
-          <my-edit-button *ngIf="pluginType !== PluginType.THEME" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
 
           <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
                      [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)"
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index c78b19585..1a95980ae 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -31,8 +31,6 @@ export class PluginListInstalledComponent implements OnInit {
   plugins: PeerTubePlugin[] = []
   updating: { [name: string]: boolean } = {}
 
-  PluginType = PluginType
-
   onDataSubject = new Subject<any[]>()
 
   constructor (
@@ -104,6 +102,10 @@ export class PluginListInstalledComponent implements OnInit {
     return !!this.updating[this.getUpdatingKey(plugin)]
   }
 
+  isTheme (plugin: PeerTubePlugin) {
+    return plugin.type === PluginType.THEME
+  }
+
   async uninstall (plugin: PeerTubePlugin) {
     const res = await this.confirmService.confirm(
       $localize`Do you really want to uninstall ${plugin.name}?`,
@@ -128,6 +130,16 @@ export class PluginListInstalledComponent implements OnInit {
     const updatingKey = this.getUpdatingKey(plugin)
     if (this.updating[updatingKey]) return
 
+    if (this.isMajorUpgrade(plugin)) {
+      const res = await this.confirmService.confirm(
+        $localize`This is a major plugin upgrade. Please go on the plugin homepage to check potential release notes.`,
+        $localize`Upgrade`,
+        $localize`Proceed upgrade`
+      )
+
+      if (res === false) return
+    }
+
     this.updating[updatingKey] = true
 
     this.pluginApiService.update(plugin.name, plugin.type)
@@ -156,4 +168,13 @@ export class PluginListInstalledComponent implements OnInit {
   private getUpdatingKey (plugin: PeerTubePlugin) {
     return plugin.name + plugin.type
   }
+
+  private isMajorUpgrade (plugin: PeerTubePlugin) {
+    if (!plugin.latestVersion) return false
+
+    const latestMajor = plugin.latestVersion.split('.')[0]
+    const currentMajor = plugin.version.split('.')[0]
+
+    return latestMajor > currentMajor
+  }
 }
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 1b5fe45c6..727633399 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <div class="search-bar">
-  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..."/>
+  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." autofocus />
 </div>
 
 <div class="alert alert-info" i18n *ngIf="pluginInstalled">
@@ -20,8 +20,8 @@
     <my-global-icon iconName="search"></my-global-icon>
 
     <ng-container i18n>
-      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
-      </ng-container>
+      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for {{ search }}"
+    </ng-container>
   </ng-container>
 </div>
 
@@ -48,6 +48,8 @@
         <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
 
         <div class="buttons">
+          <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+
           <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
                      label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
           ></my-button>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index 4c571dee4..d2c179aba 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -3,7 +3,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
-import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@app/core'
+import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
 import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
 import { PluginType } from '@shared/models/plugins/plugin.type'
 
@@ -39,6 +39,7 @@ export class PluginSearchComponent implements OnInit {
   private searchSubject = new Subject<string>()
 
   constructor (
+    private pluginService: PluginService,
     private pluginApiService: PluginApiService,
     private notifier: Notifier,
     private confirmService: ConfirmService,
@@ -119,6 +120,14 @@ export class PluginSearchComponent implements OnInit {
     return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
   }
 
+  getShowRouterLink (plugin: PeerTubePluginIndex) {
+    return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
+  }
+
+  isThemeSearch () {
+    return this.pluginType === PluginType.THEME
+  }
+
   async install (plugin: PeerTubePluginIndex) {
     if (this.installing[plugin.npmName]) return
 
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index cb2894568..ad65293d4 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -7,7 +7,7 @@
 
   <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
     <div class="form-group" *ngFor="let setting of registeredSettings">
-      <my-dynamic-form-field [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
+      <my-dynamic-form-field [hidden]="isSettingHidden(setting)" [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
     </div>
 
     <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index 4e60ca290..ca9ad9922 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -2,7 +2,7 @@ import { Subscription } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { Notifier } from '@app/core'
+import { Notifier, PluginService } from '@app/core'
 import { BuildFormArgument } from '@app/shared/form-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { PeerTubePlugin, RegisterServerSettingOptions } from '@shared/models'
@@ -19,10 +19,12 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
   pluginTypeLabel: string
 
   private sub: Subscription
+  private npmName: string
 
   constructor (
     protected formValidatorService: FormValidatorService,
-    private pluginService: PluginApiService,
+    private pluginService: PluginService,
+    private pluginAPIService: PluginApiService,
     private notifier: Notifier,
     private route: ActivatedRoute
   ) {
@@ -32,9 +34,9 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
   ngOnInit () {
     this.sub = this.route.params.subscribe(
       routeParams => {
-        const npmName = routeParams['npmName']
+        this.npmName = routeParams['npmName']
 
-        this.loadPlugin(npmName)
+        this.loadPlugin(this.npmName)
       }
     )
   }
@@ -46,7 +48,7 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
   formValidated () {
     const settings = this.form.value
 
-    this.pluginService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
+    this.pluginAPIService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
         .subscribe(
           () => {
             this.notifier.success($localize`Settings updated.`)
@@ -60,18 +62,27 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
     return Array.isArray(this.registeredSettings) && this.registeredSettings.length !== 0
   }
 
+  isSettingHidden (setting: RegisterServerSettingOptions) {
+    const script = this.pluginService.getRegisteredSettingsScript(this.npmName)
+
+    if (!script?.isSettingHidden) return false
+
+    return script.isSettingHidden({ setting, formValues: this.form.value })
+  }
+
   private loadPlugin (npmName: string) {
-    this.pluginService.getPlugin(npmName)
+    this.pluginAPIService.getPlugin(npmName)
         .pipe(switchMap(plugin => {
-          return this.pluginService.getPluginRegisteredSettings(plugin.name, plugin.type)
+          return this.pluginAPIService.getPluginRegisteredSettings(plugin.name, plugin.type)
             .pipe(map(data => ({ plugin, registeredSettings: data.registeredSettings })))
         }))
         .subscribe(
-          ({ plugin, registeredSettings }) => {
+          async ({ plugin, registeredSettings }) => {
             this.plugin = plugin
-            this.registeredSettings = registeredSettings
 
-            this.pluginTypeLabel = this.pluginService.getPluginTypeLabel(this.plugin.type)
+            this.registeredSettings = await this.translateSettings(registeredSettings)
+
+            this.pluginTypeLabel = this.pluginAPIService.getPluginTypeLabel(this.plugin.type)
 
             this.buildSettingsForm()
           },
@@ -104,4 +115,27 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
     return registered.default
   }
 
+  private async translateSettings (settings: RegisterServerSettingOptions[]) {
+    for (const setting of settings) {
+      for (const key of [ 'label', 'html', 'descriptionHTML' ]) {
+        if (setting[key]) setting[key] = await this.pluginService.translateBy(this.npmName, setting[key])
+      }
+
+      if (Array.isArray(setting.options)) {
+        const newOptions = []
+
+        for (const o of setting.options) {
+          newOptions.push({
+            value: o.value,
+            label: await this.pluginService.translateBy(this.npmName, o.label)
+          })
+        }
+
+        setting.options = newOptions
+      }
+    }
+
+    return settings
+  }
+
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index fad30576b..d91fccc09 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -94,7 +94,6 @@ export class PluginApiService {
 
     return this.authHttp.get<RegisteredServerSettings>(path)
                .pipe(
-                 switchMap(res => this.translateSettingsLabel(npmName, res)),
                  catchError(res => this.restExtractor.handleError(res))
                )
   }
@@ -141,19 +140,4 @@ export class PluginApiService {
 
     return `https://www.npmjs.com/package/peertube-${typeString}-${name}`
   }
-
-  private translateSettingsLabel (npmName: string, res: RegisteredServerSettings): Observable<RegisteredServerSettings> {
-    return this.pluginService.translationsObservable
-      .pipe(
-        map(allTranslations => allTranslations[npmName]),
-        map(translations => {
-          const registeredSettings = res.registeredSettings
-                                        .map(r => {
-                                          return Object.assign({}, r, { label: peertubeTranslate(r.label, translations) })
-                                        })
-
-          return { registeredSettings }
-        })
-      )
-  }
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index 83030b7e0..f59a01b74 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -3,7 +3,7 @@
 
 .plugin {
   margin: 15px 0;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
 }
 
 .first-row {
diff --git a/client/src/app/+admin/system/debug/debug.component.html b/client/src/app/+admin/system/debug/debug.component.html
index 75f3df601..2dc509383 100644
--- a/client/src/app/+admin/system/debug/debug.component.html
+++ b/client/src/app/+admin/system/debug/debug.component.html
@@ -1,19 +1,19 @@
 <div class="root">
-  <h4>IP</h4>
+  <h4 i18n>IP address</h4>
 
-  <p>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
+  <p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
 
-  <p>If this is not your correct public IP, please consider fixing it because:</p>
+  <p i18n>If this is not your correct public IP, please consider fixing it because:</p>
   <ul>
-    <li>Views may not be counted correctly (reduced compared to what they should be)</li>
-    <li>Anti brute force system could be overzealous</li>
-    <li>P2P system could not work correctly</li>
+    <li i18n>Views may not be counted correctly (reduced compared to what they should be)</li>
+    <li i18n>Anti brute force system could be overzealous</li>
+    <li i18n>P2P system could not work correctly</li>
   </ul>
 
-  <p>To fix it:<p>
+  <p i18n>To fix it:<p>
   <ul>
-    <li>Check the <code>trust_proxy</code> configuration key</li>
-    <li>If you run PeerTube using Docker, check you run the <code>reverse-proxy</code> with <code>network_mode: "host"</code>
+    <li i18n>Check the <code>trust_proxy</code> configuration key</li>
+    <li i18n>If you run PeerTube using Docker, check you run the <code>reverse-proxy</code> with <code>network_mode: "host"</code>
       (see <a href="https://github.com/Chocobozzz/PeerTube/issues/1643#issuecomment-464789666">issue 1643</a>)</li>
   </ul>
 </div>
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 243c6556a..5e92c0f36 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -72,7 +72,7 @@
     <div class="anchor" id="user"></div> <!-- user anchor -->
     <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div>
     <div *ngIf="!isCreation() && user" class="account-title">
-      <my-actor-avatar-info [actor]="user.account"></my-actor-avatar-info>
+      <my-actor-avatar-edit [actor]="user.account" [editable]="false" [displaySubscribers]="false" [displayUsername]="false"></my-actor-avatar-edit>
     </div>
   </div>
 
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index aa87b8d6d..8b0ac8783 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -72,11 +72,3 @@ input[type=submit], button {
   @include dashboard;
   max-width: 900px;
 }
-
-my-actor-avatar-info ::ng-deep {
-  .actor-img-edit-container,
-  .actor-info-followers,
-  .actor-info-username {
-    display: none;
-  }
-}
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 4a09fb392..e114f3425 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -106,13 +106,8 @@
       <td *ngIf="isSelected('username')">
         <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
           <div class="chip two-lines">
-            <img
-              class="avatar"
-              [src]="user?.account?.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
-            <div>
+            <my-account-avatar [account]="user?.account"></my-account-avatar>
+           <div>
               <span class="user-table-primary-text">{{ user.account.displayName }}</span>
               <span class="text-muted">{{ user.username }}</span>
             </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 7875b74ad..339e18206 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -163,10 +163,6 @@ export class UserListComponent extends RestTable implements OnInit {
     this.loadData()
   }
 
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
-
   async unbanUsers (users: User[]) {
     const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
     if (res === false) return