Refactor admin plugins

3 files changed, 38 insertions, 39 deletions

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 14f28f7ef..33575ef52 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
@@ -1,28 +1,27 @@
-<div class="toggle-plugin-type">
-  <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
-</div>
-
-<div class="search-bar">
-  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
-</div>
+<my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
 
 <div class="alert alert-info" i18n *ngIf="pluginInstalled">
   To load your new installed plugins or themes, refresh the page.
 </div>
 
-<div class="result-title" *ngIf="!isSearching">
+<div class="result-and-search">
   <ng-container *ngIf="!search">
     <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>Popular</ng-container>
+    <ng-container *ngIf="!isThemeSearch()" i18n>Popular plugins</ng-container>
+    <ng-container *ngIf="isThemeSearch()" i18n>Popular themes</ng-container>
   </ng-container>
 
-  <ng-container *ngIf="!!search">
+  <ng-container *ngIf="search && !isSearching">
     <my-global-icon iconName="search"></my-global-icon>
 
     <ng-container i18n>
       {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
     </ng-container>
   </ng-container>
+
+  <div class="search-bar">
+    <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
+  </div>
 </div>
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index 16b838682..8bb710fc2 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -1,24 +1,24 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.search-bar {
+.result-and-search {
+  font-size: 22px;
+  font-weight: 600;
+  margin: 30px 0 15px;
   display: flex;
-  justify-content: center;
-  margin: 30px 0;
 
-  input {
-    @include peertube-input-text(60%);
-    height: 35px;
+  my-global-icon {
+    @include margin-right(5px);
   }
 }
 
-.result-title {
-  font-size: 22px;
-  font-weight: 600;
-  margin-bottom: 15px;
+.search-bar {
+  margin-left: auto;
 
-  my-global-icon {
-    @include margin-right(5px);
+  input {
+    @include peertube-input-text(500px);
+
+    height: 35px;
   }
 }
 
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 ef704c83b..d39c2ea1c 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
@@ -9,14 +9,10 @@ import { PeerTubePluginIndex, PluginType } from '@shared/models'
 @Component({
   selector: 'my-plugin-search',
   templateUrl: './plugin-search.component.html',
-  styleUrls: [
-    '../shared/toggle-plugin-type.scss',
-    './plugin-search.component.scss'
-  ]
+  styleUrls: [ './plugin-search.component.scss' ]
 })
 export class PluginSearchComponent implements OnInit {
-  pluginTypeOptions: { label: string, value: PluginType }[] = []
-  pluginType: PluginType = PluginType.PLUGIN
+  pluginType: PluginType
 
   pagination: ComponentPagination = {
     currentPage: 1,
@@ -44,24 +40,30 @@ export class PluginSearchComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute
   ) {
-    this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions()
   }
 
   ngOnInit () {
-    const query = this.route.snapshot.queryParams
-    if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
+    if (!this.route.snapshot.queryParams['pluginType']) {
+      const queryParams = { pluginType: PluginType.PLUGIN }
+
+      this.router.navigate([], { queryParams })
+    }
+
+    this.route.queryParams.subscribe(query => {
+      if (!query['pluginType']) return
+
+      this.pluginType = parseInt(query['pluginType'], 10)
+      this.search = query['search'] || ''
+
+      this.reloadPlugins()
+    })
 
     this.searchSubject.asObservable()
         .pipe(
           debounceTime(400),
           distinctUntilChanged()
         )
-        .subscribe(search => {
-          this.search = search
-          this.reloadPlugins()
-        })
-
-    this.reloadPlugins()
+        .subscribe(search => this.router.navigate([], { queryParams: { search }, queryParamsHandling: 'merge' }))
   }
 
   onSearchChange (event: Event) {
@@ -74,8 +76,6 @@ export class PluginSearchComponent implements OnInit {
     this.pagination.currentPage = 1
     this.plugins = []
 
-    this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
-
     this.loadMorePlugins()
   }