feat: add a shortcut icon on the toolbar to quickly filter by favorite animes

Author: AXeL-dev

src/app/modules/popup/layout/layout.component.html

@@ -37,8 +37,36 @@
           <app-search-input [(value)]="searchValue" (tap)="onSearchTap()" (valueChange)="onSearchValueChange($event)"></app-search-input>
         </section>
         <section mdcTopAppBarSection alignEnd>
-          <button mdcTopAppBarAction class="material-icons" label="Notifications" [class.red-color]="notifications.hasUnread()" (click)="toggleNotifications()">{{ notifications.hasUnread() ? 'notifications_active' : 'notifications' }}</button>
-          <a [routerLink]="['/settings']" mdcTopAppBarAction class="material-icons" label="Settings">settings</a>
+          <a
+            *ngIf="settings.openInNewTab"
+            [routerLink]="['/']"
+            [queryParams]="{ view: view === views.Favorites ? views.Latest : views.Favorites }"
+            [title]="view === views.Favorites ? 'Show all' : 'Show favorites'"
+            mdcTopAppBarAction
+            class="material-icons"
+            label="Show favorites"
+          >
+            {{ view === views.Favorites ? 'favorite' : 'favorite_border' }}
+          </a>
+          <button
+            mdcTopAppBarAction
+            class="material-icons"
+            label="Notifications"
+            title="Notifications"
+            [class.red-color]="notifications.hasUnread()"
+            (click)="toggleNotifications()"
+          >
+            {{ notifications.hasUnread() ? 'notifications_active' : 'notifications' }}
+          </button>
+          <a
+            [routerLink]="['/settings']"
+            mdcTopAppBarAction
+            class="material-icons"
+            label="Settings"
+            title="Settings"
+          >
+            settings
+          </a>
         </section>
       </div>
       <div mdcLinearProgress [indeterminate]="true" [closed]="!isLoading"></div>

src/app/modules/popup/layout/layout.component.ts

@@ -3,6 +3,7 @@ import { View } from 'src/app/models/settings';
 import { Router } from '@angular/router';
 import { DebugService } from 'src/app/services/debug.service';
 import { NotificationsService } from 'src/app/services/notifications.service';
+import { SettingsService } from 'src/app/services/settings.service';
 
 @Component({
   selector: 'app-layout',
@@ -24,6 +25,7 @@ export class LayoutComponent implements OnInit {
   constructor(
     public router: Router,
     private debug: DebugService,
+    public settings: SettingsService,
     public notifications: NotificationsService
   ) {
     this.debug.log('Router url:', this.router.url);

src/app/services/settings.service.ts

@@ -70,7 +70,7 @@ export class SettingsService {
   getDefaults() {
     return {
       proxy: this.browser.isWebExtension ? '' : CORSProxies[0].url,
-      openInNewTab: this.browser.isFirefox ? true : false,
+      openInNewTab: !this.browser.isWebExtension || this.browser.isFirefox ? true : false,
       openLinksInInactiveTabs: true,
       maxEpisodesToRetrieve: 50,
       enableDebugging: false,