More cleanup and string changes.

UI/Web/src/app/_models/metadata/v2/filter-statement.ts

@@ -1,6 +1,6 @@
 import {FilterComparison} from "./filter-comparison";
 
-export interface FilterStatement<T> {
+export interface FilterStatement<T extends number = number> {
     comparison: FilterComparison;
     field: T;
     value: string;

UI/Web/src/app/_routes/browse-routing.module.ts

@@ -1,12 +1,19 @@
 import {Routes} from "@angular/router";
-import {BrowseAuthorsComponent} from "../browse/browse-people/browse-authors.component";
+import {BrowsePeopleComponent} from "../browse/browse-people/browse-people.component";
 import {BrowseGenresComponent} from "../browse/browse-genres/browse-genres.component";
 import {BrowseTagsComponent} from "../browse/browse-tags/browse-tags.component";
 import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
 
 
 export const routes: Routes = [
-  {path: 'authors', component: BrowseAuthorsComponent, pathMatch: 'full',
+  // Legacy route
+  {path: 'authors', component: BrowsePeopleComponent, pathMatch: 'full',
+    resolve: {
+      filter: UrlFilterResolver
+    },
+    runGuardsAndResolvers: 'always',
+  },
+  {path: 'people', component: BrowsePeopleComponent, pathMatch: 'full',
     resolve: {
       filter: UrlFilterResolver
     },

UI/Web/src/app/_services/metadata.service.ts

@@ -170,11 +170,11 @@ export class MetadataService {
       case 'series':
         return this.createFilterStatement(FilterField.SeriesName);
       case 'person':
-        return this.createFilterStatement(PersonFilterField.Role, FilterComparison.Contains, `${PersonRole.CoverArtist}, ${PersonRole.Writer}`);
+        return this.createFilterStatement(PersonFilterField.Role, FilterComparison.Contains, `${PersonRole.CoverArtist},${PersonRole.Writer}`);
     }
   }
 
-  createFilterStatement<T extends number>(field: T, comparison = FilterComparison.Equal, value = '') {
+  createFilterStatement<T extends number = number>(field: T, comparison = FilterComparison.Equal, value = '') {
     return {
       comparison: comparison,
       field: field,

UI/Web/src/app/_services/toggle.service.ts

@@ -18,7 +18,6 @@ export class ToggleService {
     .pipe(filter(event => event instanceof NavigationStart))
     .subscribe((event) => {
       this.toggleState = false;
-      console.log('[toggleservice] collapsing toggle due to navigation event');
       this.toggleStateSource.next(this.toggleState);
     });
     this.toggleStateSource.next(false);
@@ -28,7 +27,6 @@ export class ToggleService {
     this.toggleState = !this.toggleState;
     this.toggleStateSource.pipe(take(1)).subscribe(state => {
       this.toggleState = !state;
-      console.log('[toggleservice] toggling setting filter open status: ', this.toggleState);
       this.toggleStateSource.next(this.toggleState);
     });
 
@@ -36,7 +34,6 @@ export class ToggleService {
 
   set(state: boolean) {
     this.toggleState = state;
-    console.log('[toggleservice] setting filter open status: ', this.toggleState);
     this.toggleStateSource.next(state);
   }
 }

UI/Web/src/app/browse/browse-people/browse-authors.component.html

@@ -1,75 +0,0 @@
-<div class="main-container container-fluid">
-  <ng-container *transloco="let t; read:'browse-authors'" >
-    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
-      <h2 title>
-        <span>{{t('title')}}</span>
-      </h2>
-      <h6 subtitle>{{t('author-count', {num: pagination.totalItems | number})}} </h6>
-
-    </app-side-nav-companion-bar>
-
-<!--    <form [formGroup]="filterGroup">-->
-<!--      <div class="row mb-3">-->
-<!--        <div class="col-md-4 col-auto">-->
-<!--          <div class="form-group">-->
-<!--            <label for="role-selection">{{t('roles-label')}}</label>-->
-<!--            <select2 [data]="allRoles"-->
-<!--                     id="role-selection"-->
-<!--                     formControlName="roles"-->
-<!--                     [hideSelectedItems]="true"-->
-<!--                     [multiple]="true"-->
-<!--                     [infiniteScroll]="true"-->
-<!--                     [resettable]="true"-->
-<!--            style="min-width: 200px">-->
-<!--            </select2>-->
-<!--          </div>-->
-<!--        </div>-->
-
-<!--        <div class="col-auto ms-auto me-auto">-->
-<!--          <div class="form-group">-->
-<!--            <label for="query">Filter</label>-->
-<!--            <input type="text" id="query" style="min-width: 100px" autocomplete="off" formControlName="query" class="form-control" />-->
-<!--          </div>-->
-<!--        </div>-->
-
-<!--        <div class="col-auto ms-auto">-->
-<!--          <div class="form-group">-->
-<!--            <label for="sort">{{t('sort-label')}}</label>-->
-<!--            <app-sort-button (update)="onSortUpdate($event)"></app-sort-button>-->
-<!--            <select class="form-select" style="min-width: 100px" formControlName="sortField">-->
-<!--              <option [value]="PersonSortField.Name">{{t('name-label')}}</option>-->
-<!--              <option [value]="PersonSortField.SeriesCount">{{t('series-count-label')}}</option>-->
-<!--              <option [value]="PersonSortField.ChapterCount">{{t('issue-count-label')}}</option>-->
-<!--            </select>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </form>-->
-<!--    [customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name"-->
-    <app-card-detail-layout
-      [isLoading]="isLoading"
-      [items]="authors"
-      [pagination]="pagination"
-      [trackByIdentity]="trackByIdentity"
-      [jumpBarKeys]="jumpKeys"
-      [filteringDisabled]="true"
-
-      [refresh]="refresh"
-      [filterSettings]="filterSettings"
-      [filterOpen]="filterOpen"
-      (applyFilter)="updateFilter($event)"
-    >
-      <ng-template #cardItem let-item let-position="idx">
-        <app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
-          <ng-template #subtitle>
-            <div class="tag-meta">
-                <div style="font-size: 12px">{{t('series-count', {num: item.seriesCount | compactNumber})}}</div>
-                <div style="font-size: 12px">{{t('issue-count', {num: item.chapterCount | compactNumber})}}</div>
-            </div>
-          </ng-template>
-        </app-person-card>
-      </ng-template>
-    </app-card-detail-layout>
-
-  </ng-container>
-</div>

UI/Web/src/app/browse/browse-people/browse-people.component.html

@@ -0,0 +1,36 @@
+<div class="main-container container-fluid">
+  <ng-container *transloco="let t; read:'browse-people'" >
+    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
+      <h2 title>
+        <span>{{t('title')}}</span>
+      </h2>
+      <h6 subtitle>{{t('author-count', {num: pagination.totalItems | number})}} </h6>
+
+    </app-side-nav-companion-bar>
+
+    <app-card-detail-layout
+      [isLoading]="isLoading"
+      [items]="authors"
+      [pagination]="pagination"
+      [trackByIdentity]="trackByIdentity"
+      [jumpBarKeys]="jumpKeys"
+      [filteringDisabled]="true"
+      [refresh]="refresh"
+      [filterSettings]="filterSettings"
+      [filterOpen]="filterOpen"
+      (applyFilter)="updateFilter($event)"
+    >
+      <ng-template #cardItem let-item let-position="idx">
+        <app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
+          <ng-template #subtitle>
+            <div class="tag-meta">
+                <div style="font-size: 12px">{{t('series-count', {num: item.seriesCount | compactNumber})}}</div>
+                <div style="font-size: 12px">{{t('issue-count', {num: item.chapterCount | compactNumber})}}</div>
+            </div>
+          </ng-template>
+        </app-person-card>
+      </ng-template>
+    </app-card-detail-layout>
+
+  </ng-container>
+</div>

UI/Web/src/app/browse/browse-people/browse-people.component.ts

@@ -4,7 +4,6 @@ import {
 } from "../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component";
 import {CardDetailLayoutComponent} from "../../cards/card-detail-layout/card-detail-layout.component";
 import {DecimalPipe} from "@angular/common";
-import {Series} from "../../_models/series";
 import {Pagination} from "../../_models/pagination";
 import {JumpKey} from "../../_models/jumpbar/jump-key";
 import {ActivatedRoute, Router} from "@angular/router";
@@ -25,10 +24,12 @@ import {FilterEvent} from "../../_models/metadata/series-filter";
 import {PersonRole} from "../../_models/metadata/person";
 import {FilterComparison} from "../../_models/metadata/v2/filter-comparison";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+import {MetadataService} from "../../_services/metadata.service";
+import {FilterStatement} from "../../_models/metadata/v2/filter-statement";
 
 
 @Component({
-  selector: 'app-browse-authors',
+  selector: 'app-browse-people',
   imports: [
     SideNavCompanionBarComponent,
     TranslocoDirective,
@@ -39,11 +40,11 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
     ReactiveFormsModule,
 
   ],
-  templateUrl: './browse-authors.component.html',
+  templateUrl: './browse-people.component.html',
-  styleUrl: './browse-authors.component.scss',
+  styleUrl: './browse-people.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BrowseAuthorsComponent {
+export class BrowsePeopleComponent {
   protected readonly PersonSortField = PersonSortField;
 
   private readonly cdRef = inject(ChangeDetectorRef);
@@ -54,9 +55,8 @@ export class BrowseAuthorsComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly filterUtilityService = inject(FilterUtilitiesService);
   protected readonly imageService = inject(ImageService);
+  protected readonly metadataService = inject(MetadataService);
 
-
-  series: Series[] = [];
   isLoading = false;
   authors: Array<BrowsePerson> = [];
   pagination: Pagination = {currentPage: 0, totalPages: 0, totalItems: 0, itemsPerPage: 0};
@@ -77,6 +77,11 @@ export class BrowseAuthorsComponent {
     this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
       this.filter = data['filter'] as FilterV2<PersonFilterField, PersonSortField>;
 
+      if (this.filter == null) {
+        this.filter = this.metadataService.createDefaultFilterDto('person');
+        this.filter.statements.push(this.metadataService.createDefaultFilterStatement('person') as FilterStatement<PersonFilterField>);
+      }
+
       this.filterActiveCheck = this.filterUtilityService.createPersonV2Filter();
       this.filterActiveCheck!.statements.push({value: `${PersonRole.Writer},${PersonRole.CoverArtist}`, field: PersonFilterField.Role, comparison: FilterComparison.Contains});
       this.filterSettings.presetsV2 = this.filter;
@@ -89,8 +94,8 @@ export class BrowseAuthorsComponent {
 
   loadData() {
     if (!this.filter) {
-      this.filter = this.filterUtilityService.createPersonV2Filter();
+      this.filter = this.metadataService.createDefaultFilterDto('person');
-      this.filter.statements.push({value: `${PersonRole.Writer},${PersonRole.CoverArtist}`, field: PersonFilterField.Role, comparison: FilterComparison.Contains});
+      this.filter.statements.push(this.metadataService.createDefaultFilterStatement('person') as FilterStatement<PersonFilterField>);
       this.cdRef.markForCheck();
     }
 

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -35,7 +35,7 @@
           <p><ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container></p>
         }
 
-        <virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items()" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll">
+        <virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll">
           <div class="grid row g-0" #container>
             @for (item of scroll.viewPortItems; track trackByIdentity(i, item); let i = $index) {
               <div class="card col-auto mt-2 mb-2"
@@ -56,7 +56,7 @@
   </div>
 
   <ng-template #cardTemplate>
-    <virtual-scroller #scroll [items]="items()" [bufferAmount]="bufferAmount">
+    <virtual-scroller #scroll [items]="items" [bufferAmount]="bufferAmount">
       <div class="grid row g-0" #container>
 
         <div class="card col-auto mt-2 mb-2" *ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i" (click)="tryToSaveJumpKey()" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts

@@ -81,9 +81,8 @@ export class CardDetailLayoutComponent<TFilter extends number, TSort extends num
 
   header: Signal<string> = input('');
   @Input() isLoading: boolean = false;
-  //@Input() items: any[] = [];
   @Input() pagination!: Pagination;
-  items = input.required<any[]>();
+  @Input() items: any[] = [];
 
 
   /**
@@ -159,7 +158,7 @@ export class CardDetailLayoutComponent<TFilter extends number, TSort extends num
     }
 
     if (this.pagination === undefined) {
-      const items = this.items();
+      const items = this.items;
       this.pagination = {currentPage: 1, itemsPerPage: items.length, totalItems: items.length, totalPages: 1};
       this.cdRef.markForCheck();
     }

UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts

@@ -63,8 +63,6 @@ export class MetadataBuilderComponent<TFilter extends number = number, TSort ext
 
   ngOnInit() {
 
-    console.log('metadata builder filter: ', this.filter);
-
     this.formGroup.addControl('comparison', new FormControl<FilterCombination>(this.filter?.combination || FilterCombination.Or, []));
 
     this.formGroup.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef), tap(values => {

UI/Web/src/app/metadata-filter/metadata-filter.component.ts

@@ -162,7 +162,6 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
   }
 
   handleFilters(filter: FilterV2<TFilter, TSort>) {
-    console.log('handleFilters', filter);
     this.filterV2 = filter;
   }
 
@@ -171,11 +170,8 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
     this.fullyLoaded = false;
 
     const currentFilterSettings = this.filterSettings();
-    console.log('BUG HERE filterSettings: ', currentFilterSettings);
     this.filterV2 = this.deepClone(currentFilterSettings.presetsV2);
 
-    console.log('preset: ', currentFilterSettings.presetsV2);
-
     const defaultSortField = this.sortFieldOptions()[0].value;
 
     this.sortGroup = new FormGroup({

UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html

@@ -76,7 +76,7 @@
 
               @case (SideNavStreamType.BrowseAuthors) {
                 <app-side-nav-item cdkDrag cdkDragBoundary=".side-nav-container" cdkDragPreviewContainer="parent"
-                                   [cdkDragDisabled]="!editMode" [cdkDragData]="navStream" [editMode]="editMode" icon="fa-users" [title]="t('browse-authors')" link="/browse/authors/"></app-side-nav-item>
+                                   [cdkDragDisabled]="!editMode" [cdkDragData]="navStream" [editMode]="editMode" icon="fa-users" [title]="t('browse-people')" link="/browse/authors/"></app-side-nav-item>
               }
 
               @case (SideNavStreamType.SmartFilter) {

UI/Web/src/assets/langs/en.json

@@ -1036,7 +1036,7 @@
         "collections": "Collections",
         "reading-lists": "Reading Lists",
         "bookmarks": "Bookmarks",
-        "browse-authors": "Browse Authors",
+        "browse-people": "Browse People",
         "filter-label": "{{common.filter}}",
         "all-series": "All Series",
         "clear": "{{common.clear}}",
@@ -1049,7 +1049,7 @@
         "edit": "{{common.edit}}"
     },
 
-    "browse-authors": {
+    "browse-people": {
         "title": "Browse People",
         "author-count": "{{num}} People",
         "cover-image-description": "{{edit-series-modal.cover-image-description}}",
@@ -2511,7 +2511,7 @@
         "reading-lists": "{{side-nav.reading-lists}}",
         "bookmarks": "{{side-nav.bookmarks}}",
         "all-series": "{{side-nav.all-series}}",
-        "browse-authors": "{{side-nav.browse-authors}}"
+        "browse-people": "{{side-nav.browse-people}}"
     },
 
     "filter-field-pipe": {