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,5 +1,8 @@
-<div fxLayout="column" class="sidebar-inner">
-  <div id="file-search-input" fxFlex="220px">
+<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>
@@ -13,3 +16,6 @@
           </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%;