Adding a favicon & finishing the genre/studio filter pannel

src/app/components/items-grid/items-grid.component.html

@@ -12,7 +12,8 @@
 	</button>
 </div>
 
-<mat-menu #filterMenu="matMenu">
+<mat-menu #filterMenu="matMenu" class="big-panel">
+	<h4><b>Genres</b></h4>
 	<mat-chip-list>
 		<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
 		<mat-chip *ngFor="let genre of this.genres"
@@ -23,6 +24,19 @@
 			{{genre.name}}
 		</mat-chip>
 	</mat-chip-list>
+
+	<br/>
+	<h4><b>Studios</b></h4>
+	<mat-chip-list>
+		<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
+		<mat-chip *ngFor="let studio of this.studios"
+		          [color]="this.filters.studios.includes(studio) ? 'accent' : 'default'" selected
+		          (click)="this.filters.studios.includes(studio)
+		          	? this.filters.studios.splice(this.filters.studios.indexOf(studio), 1)
+		          	: this.filters.studios.push(studio)">
+			{{studio.name}}
+		</mat-chip>
+	</mat-chip-list>
 </mat-menu>
 
 <mat-menu #sortMenu="matMenu">

src/app/components/items-grid/items-grid.component.scss

@@ -20,7 +20,7 @@ button
 
 .show
 {
-	width: 28%;
+	width: 27%;
 	min-width: 120px;
 	max-width: 168px;
 	list-style: none;
@@ -94,3 +94,23 @@ button
 		cursor: pointer;
 	}
 }
+
+::ng-deep .big-panel
+{
+	width: 50vw !important;
+	max-width: none !important;
+	margin-left: -20vw;
+	margin-right: -20vw;
+	overflow-x: hidden;
+
+	> div
+	{
+		text-align: center;
+
+		> mat-chip-list > div
+		{
+			justify-content: center;
+			margin: 0;
+		}
+	}
+}

src/app/components/items-grid/items-grid.component.ts

@@ -7,6 +7,7 @@ import {Page} from "../../../models/page";
 import {HttpClient} from "@angular/common/http";
 import {Show, ShowRole} from "../../../models/resources/show";
 import {Collection} from "../../../models/resources/collection";
+import { Studio } from "../../../models/resources/studio";
 import {ItemsUtils} from "../../misc/items-utils";
 import { PreLoaderService } from "../../services/pre-loader.service";
 
@@ -22,8 +23,9 @@ export class ItemsGridComponent
 	sortType: string = "title";
 	sortKeys: string[] = ["title", "start year", "end year"]
 	sortUp: boolean = true;
-	filters: {genres: Genre[]} = {genres: []};
+	filters: {genres: Genre[], studios: Studio[]} = {genres: [], studios: []};
 	genres: Genre[] = [];
+	studios: Studio[] = [];
 
 	constructor(private route: ActivatedRoute,
 	            private sanitizer: DomSanitizer,
@@ -38,11 +40,15 @@ export class ItemsGridComponent
 		{
 			this.genres = data;
 		});
+		this.loader.load<Studio>("/api/studios?limit=0").subscribe(data =>
+		{
+			this.studios = data;
+		});
 	}
 
 	getFilterCount()
 	{
-		return this.filters.genres.length;
+		return this.filters.genres.length + this.filters.studios.length;
 	}
 
 	getThumb(slug: string)