Move sidebar content into tabs

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/app.module.ts

@@ -47,6 +47,7 @@ import {MatTooltipModule} from "@angular/material/tooltip";
 import {MatMenuModule} from "@angular/material/menu";
 import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
 import { FilesTabSidebarComponent } from './pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component';
+import {MatExpansionModule} from "@angular/material/expansion";
 
 @NgModule({
   declarations: [
@@ -100,6 +101,7 @@ import { FilesTabSidebarComponent } from './pages/home/files-tab/files-tab-sideb
     MatSliderModule,
     MatTooltipModule,
     MatMenuModule,
+    MatExpansionModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html

@@ -1,15 +1,21 @@
-<div fxLayout="column" class="sidebar-inner">
-  <div id="file-search-input" fxFlex="220px">
-    <app-file-search #filesearch (searchStartEvent)="this.searchStartEvent.emit()"
-                     (searchEndEvent)="this.searchEndEvent.emit()" [validTags]="this.getValidTagsForSearch()"></app-file-search>
-  </div>
-  <div id="file-tag-list" fxFlex fxFlexAlign="start" fxFlexFill>
-    <h1>Selection Tags</h1>
-    <mat-selection-list [multiple]="false" *ngIf="tags.length > 0"
-                        (selectionChange)="addSearchTagFromList($event)">
-      <mat-list-option
-        *ngFor="let tag of tags"
-        [value]="tag.getNormalizedOutput()">{{tag.getNormalizedOutput()}}</mat-list-option>
-    </mat-selection-list>
-  </div>
+<div class="sidebar-inner">
+  <mat-tab-group headerPosition="below">
+    <mat-tab label="Search">
+      <div class="search-tab-inner"  fxLayout="column">
+        <div id="file-search-input" >
+          <app-file-search #filesearch (searchStartEvent)="this.searchStartEvent.emit()"
+                           (searchEndEvent)="this.searchEndEvent.emit()" [validTags]="this.getValidTagsForSearch()"></app-file-search>
+        </div>
+        <div id="file-tag-list" fxFlex fxFlexAlign="start" fxFlexFill>
+          <h1>Selection Tags</h1>
+          <mat-selection-list [multiple]="false" *ngIf="tags.length > 0"
+                              (selectionChange)="addSearchTagFromList($event)">
+            <mat-list-option
+              *ngFor="let tag of tags"
+              [value]="tag.getNormalizedOutput()">{{tag.getNormalizedOutput()}}</mat-list-option>
+          </mat-selection-list>
+        </div>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
 </div>

mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss

@@ -1,19 +1,30 @@
-#file-search-input {
+app-file-search {
+  display: block;
   width: 100%;
-  overflow: hidden;
 }
 
-app-file-search {
-  display: block;
+#file-search-input {
   width: 100%;
+  overflow: hidden;
 }
 
 #file-tag-list {
   height: 100%;
   overflow-y: auto;
+  width: 100%;
+}
+
+mat-tab-group, mat-tab {
+  height: 100%;
+  width: 100%;
+}
+
+mat-selection-list {
+  height: 100%;
+  user-select: none;
 }
 
-.sidebar-inner {
+.sidebar-inner, .search-tab-inner {
   height: 100%;
   width: 100%;
   display: block;

mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss

@@ -16,13 +16,14 @@ mat-drawer-content {
 
 mat-drawer-container {
   height: 100%;
+  overflow: hidden;
 }
 
 app-file-grid {
   padding: 0;
 }
 
-app-file-gallery {
+app-file-gallery, app-files-tab-sidebar {
   padding: 0;
   height: 100%;
   width: 100%;