Finally got the refactor completed, now the code needs major streamlining. All the testing checks out.

API/DTOs/Filtering/v2/FilterField.cs

@@ -56,5 +56,12 @@ public enum FilterField
     /// Last time User Read
     /// </summary>
     ReadLast = 32,
-
+}
+
+public enum PersonFilterField
+{
+    Role = 1,
+    Name = 2,
+    SeriesCount = 3,
+    ChapterCount = 4,
 }

API/DTOs/Filtering/v2/FilterStatementDto.cs

@@ -1,4 +1,6 @@
-namespace API.DTOs.Filtering.v2;
+using API.DTOs.Metadata.Browse.Requests;
+
+namespace API.DTOs.Filtering.v2;
 
 public sealed record FilterStatementDto
 {
@@ -6,3 +8,10 @@ public sealed record FilterStatementDto
     public FilterField Field { get; set; }
     public string Value { get; set; }
 }
+
+public sealed record PersonFilterStatementDto
+{
+    public FilterComparison Comparison { get; set; }
+    public PersonFilterField Field { get; set; }
+    public string Value { get; set; }
+}

API/DTOs/Metadata/Browse/Requests/BrowsePersonFilterDto.cs

@@ -1,5 +1,6 @@
 using System.Collections.Generic;
 using API.DTOs.Filtering;
+using API.DTOs.Filtering.v2;
 using API.Entities.Enums;
 
 namespace API.DTOs.Metadata.Browse.Requests;
@@ -7,7 +8,20 @@ namespace API.DTOs.Metadata.Browse.Requests;
 
 public sealed record BrowsePersonFilterDto
 {
-    public required List<PersonRole> Roles { get; set; }
+    /// <summary>
-    public string? Query { get; set; }
+    /// Not used - For parity with Series Filter
+    /// </summary>
+    public int Id { get; set; }
+    /// <summary>
+    /// Not used - For parity with Series Filter
+    /// </summary>
+    public string? Name { get; set; }
+    public ICollection<PersonFilterStatementDto> Statements { get; set; } = [];
+    public FilterCombination Combination { get; set; } = FilterCombination.And;
     public PersonSortOptions? SortOptions { get; set; }
+
+    /// <summary>
+    /// Limit the number of rows returned. Defaults to not applying a limit (aka 0)
+    /// </summary>
+    public int LimitTo { get; set; } = 0;
 }

API/Data/Repositories/PersonRepository.cs

@@ -2,6 +2,7 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using API.Data.Misc;
 using API.DTOs;
 using API.DTOs.Filtering.v2;
 using API.DTOs.Metadata.Browse;
@@ -11,7 +12,9 @@ using API.Entities.Enums;
 using API.Entities.Person;
 using API.Extensions;
 using API.Extensions.QueryExtensions;
+using API.Extensions.QueryExtensions.Filtering;
 using API.Helpers;
+using API.Helpers.Converters;
 using AutoMapper;
 using AutoMapper.QueryableExtensions;
 using Microsoft.EntityFrameworkCore;
@@ -201,33 +204,78 @@ public class PersonRepository : IPersonRepository
     {
         var ageRating = await _context.AppUser.GetUserAgeRestriction(userId);
 
-        var query = _context.Person
+        var query = CreateFilteredPersonQueryable(userId, filter, ageRating);
-            .Where(p => p.SeriesMetadataPeople.Any(smp => filter.Roles.Contains(smp.Role)) || p.ChapterPeople.Any(cmp => filter.Roles.Contains(cmp.Role)))
-            .WhereIf(!string.IsNullOrEmpty(filter.Query), p => EF.Functions.Like(p.Name, $"%{filter.Query}%"))
-            .RestrictAgainstAgeRestriction(ageRating)
-            .SortBy(filter.SortOptions)
-            .Select(p => new BrowsePersonDto
-            {
-                Id = p.Id,
-                Name = p.Name,
-                Description = p.Description,
-                CoverImage = p.CoverImage,
-                SeriesCount = p.SeriesMetadataPeople
-                    .Where(smp => filter.Roles.Contains(smp.Role))
-                    .Select(smp => smp.SeriesMetadata.SeriesId)
-                    .Distinct()
-                    .Count(),
-                ChapterCount = p.ChapterPeople
-                    .Where(cp => filter.Roles.Contains(cp.Role))
-                    .Select(cp => cp.Chapter.Id)
-                    .Distinct()
-                    .Count()
-            })
-            ;
 
         return await PagedList<BrowsePersonDto>.CreateAsync(query, userParams.PageNumber, userParams.PageSize);
     }
 
+    private IQueryable<BrowsePersonDto> CreateFilteredPersonQueryable(int userId, BrowsePersonFilterDto filter, AgeRestriction ageRating)
+    {
+        var query = _context.Person.AsNoTracking();
+
+        // Apply filtering based on statements
+        query = BuildPersonFilterQuery(userId, filter, query);
+
+        // Apply age restriction
+        query = query.RestrictAgainstAgeRestriction(ageRating);
+
+        // Apply sorting and limiting
+        var sortedQuery = query.SortBy(filter.SortOptions);
+
+        var limitedQuery = ApplyPersonLimit(sortedQuery, filter.LimitTo);
+
+        // Project to DTO
+        var projectedQuery = limitedQuery.Select(p => new BrowsePersonDto
+        {
+            Id = p.Id,
+            Name = p.Name,
+            Description = p.Description,
+            CoverImage = p.CoverImage,
+            SeriesCount = p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count(),
+            ChapterCount = p.ChapterPeople
+                .Select(cp => cp.Chapter.Id)
+                .Distinct()
+                .Count()
+        });
+
+        return projectedQuery;
+    }
+
+    private static IQueryable<Person> BuildPersonFilterQuery(int userId, BrowsePersonFilterDto filterDto, IQueryable<Person> query)
+    {
+        if (filterDto.Statements == null || filterDto.Statements.Count == 0) return query;
+
+        var queries = filterDto.Statements
+            .Select(statement => BuildPersonFilterGroup(userId, statement, query))
+            .ToList();
+
+        return filterDto.Combination == FilterCombination.And
+            ? queries.Aggregate((q1, q2) => q1.Intersect(q2))
+            : queries.Aggregate((q1, q2) => q1.Union(q2));
+    }
+
+    private static IQueryable<Person> BuildPersonFilterGroup(int userId, PersonFilterStatementDto statement, IQueryable<Person> query)
+    {
+        var value = PersonFilterFieldValueConverter.ConvertValue(statement.Field, statement.Value);
+
+        return statement.Field switch
+        {
+            PersonFilterField.Name => query.HasPersonName(true, statement.Comparison, (string)value),
+            PersonFilterField.Role => query.HasPersonRole(true, statement.Comparison, (IList<PersonRole>)value),
+            PersonFilterField.SeriesCount => query.HasPersonSeriesCount(true, statement.Comparison, (int)value),
+            PersonFilterField.ChapterCount => query.HasPersonChapterCount(true, statement.Comparison, (int)value),
+            _ => throw new ArgumentOutOfRangeException()
+        };
+    }
+
+    private static IQueryable<Person> ApplyPersonLimit(IQueryable<Person> query, int limit)
+    {
+        return limit <= 0 ? query : query.Take(limit);
+    }
+
     public async Task<Person?> GetPersonById(int personId, PersonIncludes includes = PersonIncludes.None)
     {
         return await _context.Person.Where(p => p.Id == personId)

API/Extensions/QueryExtensions/Filtering/PersonFilter.cs

@@ -0,0 +1,136 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using API.DTOs.Filtering.v2;
+using API.Entities.Enums;
+using API.Entities.Person;
+using Kavita.Common;
+using Microsoft.EntityFrameworkCore;
+
+namespace API.Extensions.QueryExtensions.Filtering;
+
+public static class PersonFilter
+{
+    public static IQueryable<Person> HasPersonName(this IQueryable<Person> queryable, bool condition,
+        FilterComparison comparison, string queryString)
+    {
+        if (string.IsNullOrEmpty(queryString) || !condition) return queryable;
+
+        return comparison switch
+        {
+            FilterComparison.Equal => queryable.Where(p => p.Name.Equals(queryString)),
+            FilterComparison.BeginsWith => queryable.Where(p => EF.Functions.Like(p.Name, $"{queryString}%")),
+            FilterComparison.EndsWith => queryable.Where(p => EF.Functions.Like(p.Name, $"%{queryString}")),
+            FilterComparison.Matches => queryable.Where(p => EF.Functions.Like(p.Name, $"%{queryString}%")),
+            FilterComparison.NotEqual => queryable.Where(p => p.Name != queryString),
+            FilterComparison.NotContains or FilterComparison.GreaterThan or FilterComparison.GreaterThanEqual
+                or FilterComparison.LessThan or FilterComparison.LessThanEqual or FilterComparison.Contains
+                or FilterComparison.IsBefore or FilterComparison.IsAfter or FilterComparison.IsInLast
+                or FilterComparison.IsNotInLast or FilterComparison.MustContains
+                or FilterComparison.IsEmpty =>
+                throw new KavitaException($"{comparison} not applicable for Person.Name"),
+            _ => throw new ArgumentOutOfRangeException(nameof(comparison), comparison,
+                "Filter Comparison is not supported")
+        };
+    }
+    public static IQueryable<Person> HasPersonRole(this IQueryable<Person> queryable, bool condition,
+    FilterComparison comparison, IList<PersonRole> roles)
+    {
+        if (roles == null || roles.Count == 0 || !condition) return queryable;
+
+        return comparison switch
+        {
+            FilterComparison.Contains or FilterComparison.MustContains => queryable.Where(p =>
+                p.SeriesMetadataPeople.Any(smp => roles.Contains(smp.Role)) ||
+                p.ChapterPeople.Any(cmp => roles.Contains(cmp.Role))),
+            FilterComparison.NotContains => queryable.Where(p =>
+                !p.SeriesMetadataPeople.Any(smp => roles.Contains(smp.Role)) &&
+                !p.ChapterPeople.Any(cmp => roles.Contains(cmp.Role))),
+            FilterComparison.Equal or FilterComparison.NotEqual or FilterComparison.BeginsWith
+                or FilterComparison.EndsWith or FilterComparison.Matches or FilterComparison.GreaterThan
+                or FilterComparison.GreaterThanEqual or FilterComparison.LessThan or FilterComparison.LessThanEqual
+                or FilterComparison.IsBefore or FilterComparison.IsAfter or FilterComparison.IsInLast
+                or FilterComparison.IsNotInLast
+                or FilterComparison.IsEmpty =>
+                throw new KavitaException($"{comparison} not applicable for Person.Role"),
+            _ => throw new ArgumentOutOfRangeException(nameof(comparison), comparison,
+                "Filter Comparison is not supported")
+        };
+    }
+
+    public static IQueryable<Person> HasPersonSeriesCount(this IQueryable<Person> queryable, bool condition,
+        FilterComparison comparison, int count)
+    {
+        if (!condition) return queryable;
+
+        return comparison switch
+        {
+            FilterComparison.Equal => queryable.Where(p => p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count() == count),
+            FilterComparison.GreaterThan => queryable.Where(p => p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count() > count),
+            FilterComparison.GreaterThanEqual => queryable.Where(p => p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count() >= count),
+            FilterComparison.LessThan => queryable.Where(p => p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count() < count),
+            FilterComparison.LessThanEqual => queryable.Where(p => p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count() <= count),
+            FilterComparison.NotEqual => queryable.Where(p => p.SeriesMetadataPeople
+                .Select(smp => smp.SeriesMetadata.SeriesId)
+                .Distinct()
+                .Count() != count),
+            FilterComparison.BeginsWith or FilterComparison.EndsWith or FilterComparison.Matches
+                or FilterComparison.Contains or FilterComparison.NotContains or FilterComparison.IsBefore
+                or FilterComparison.IsAfter or FilterComparison.IsInLast or FilterComparison.IsNotInLast
+                or FilterComparison.MustContains
+                or FilterComparison.IsEmpty => throw new KavitaException(
+                    $"{comparison} not applicable for Person.SeriesCount"),
+            _ => throw new ArgumentOutOfRangeException(nameof(comparison), comparison, "Filter Comparison is not supported")
+        };
+    }
+
+    public static IQueryable<Person> HasPersonChapterCount(this IQueryable<Person> queryable, bool condition,
+        FilterComparison comparison, int count)
+    {
+        if (!condition) return queryable;
+
+        return comparison switch
+        {
+            FilterComparison.Equal => queryable.Where(p =>
+                p.ChapterPeople.Select(cp => cp.Chapter.Id).Distinct().Count() == count),
+            FilterComparison.GreaterThan => queryable.Where(p => p.ChapterPeople
+                .Select(cp => cp.Chapter.Id)
+                .Distinct()
+                .Count() > count),
+            FilterComparison.GreaterThanEqual => queryable.Where(p => p.ChapterPeople
+                .Select(cp => cp.Chapter.Id)
+                .Distinct()
+                .Count() >= count),
+            FilterComparison.LessThan => queryable.Where(p =>
+                p.ChapterPeople.Select(cp => cp.Chapter.Id).Distinct().Count() < count),
+            FilterComparison.LessThanEqual => queryable.Where(p => p.ChapterPeople
+                .Select(cp => cp.Chapter.Id)
+                .Distinct()
+                .Count() <= count),
+            FilterComparison.NotEqual => queryable.Where(p =>
+                p.ChapterPeople.Select(cp => cp.Chapter.Id).Distinct().Count() != count),
+            FilterComparison.BeginsWith or FilterComparison.EndsWith or FilterComparison.Matches
+                or FilterComparison.Contains or FilterComparison.NotContains or FilterComparison.IsBefore
+                or FilterComparison.IsAfter or FilterComparison.IsInLast or FilterComparison.IsNotInLast
+                or FilterComparison.MustContains
+                or FilterComparison.IsEmpty => throw new KavitaException(
+                    $"{comparison} not applicable for Person.ChapterCount"),
+            _ => throw new ArgumentOutOfRangeException(nameof(comparison), comparison, "Filter Comparison is not supported")
+        };
+    }
+}

API/Helpers/Converters/PersonFilterFieldValueConverter.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using API.DTOs.Filtering.v2;
+using API.Entities.Enums;
+
+namespace API.Helpers.Converters;
+
+public static class PersonFilterFieldValueConverter
+{
+    public static object ConvertValue(PersonFilterField field, string value)
+    {
+        return field switch
+        {
+            PersonFilterField.Name => value,
+            PersonFilterField.Role => ParsePersonRoles(value),
+            PersonFilterField.SeriesCount => int.Parse(value),
+            PersonFilterField.ChapterCount => int.Parse(value),
+            _ => throw new ArgumentOutOfRangeException(nameof(field), field, "Field is not supported")
+        };
+    }
+
+    private static IList<PersonRole> ParsePersonRoles(string value)
+    {
+        if (string.IsNullOrEmpty(value)) return new List<PersonRole>();
+
+        return value.Split(',', StringSplitOptions.RemoveEmptyEntries)
+            .Select(v => Enum.Parse<PersonRole>(v.Trim()))
+            .ToList();
+    }
+}

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

@@ -2,7 +2,7 @@ import {FilterStatement} from "./filter-statement";
 import {FilterCombination} from "./filter-combination";
 import {SortOptions} from "./sort-options";
 
-export interface FilterV2<TFilter, TSort extends number = number> {
+export interface FilterV2<TFilter extends number = number, TSort extends number = number> {
     name?: string;
     statements: Array<FilterStatement<TFilter>>;
     combination: FilterCombination;

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

@@ -1,7 +1,8 @@
 export enum PersonFilterField {
-  None = -1,
   Role = 1,
-  Name = 2
+  Name = 2,
+  SeriesCount = 3,
+  ChapterCount = 4,
 }
 
 

UI/Web/src/app/_pipes/browse-title.pipe.ts

@@ -2,10 +2,6 @@ import {Pipe, PipeTransform} from '@angular/core';
 import {FilterField} from "../_models/metadata/v2/filter-field";
 import {translate} from "@jsverse/transloco";
 
-
-// export type BrowseTitleFields = FilterField.Genres | FilterField.Tags | FilterField.Editor | FilterField.Inker |
-//   FilterField.
-
 /**
  * Responsible for taking a filter field and value (as a string) and translating into a "Browse X" heading for All Series page
  * Example: Genre & "Action" -> Browse Action

UI/Web/src/app/_pipes/generic-filter-field.pipe.ts

@@ -1,12 +1,108 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
+import {FilterField} from "../_models/metadata/v2/filter-field";
+import {translate} from "@jsverse/transloco";
+import {ValidFilterEntity} from "../metadata-filter/filter-settings";
+import {PersonFilterField} from "../_models/metadata/v2/person-filter-field";
 
 @Pipe({
   name: 'genericFilterField'
 })
 export class GenericFilterFieldPipe implements PipeTransform {
 
-  transform(value: unknown, ...args: unknown[]): unknown {
+  transform<T extends number>(value: T, entityType: ValidFilterEntity): string {
-    return null;
+
+    switch (entityType) {
+      case "series":
+        return this.translateFilterField(value as FilterField);
+      case "person":
+        return this.translatePersonFilterField(value as PersonFilterField);
+    }
+  }
+
+  private translatePersonFilterField(value: PersonFilterField) {
+    switch (value) {
+      case PersonFilterField.Role:
+        return translate('generic-filter-field-pipe.person-role');
+      case PersonFilterField.Name:
+        return translate('generic-filter-field-pipe.person-name');
+      case PersonFilterField.SeriesCount:
+        return translate('generic-filter-field-pipe.person-series-count');
+      case PersonFilterField.ChapterCount:
+        return translate('generic-filter-field-pipe.person-chapter-count');
+    }
+  }
+
+  private translateFilterField(value: FilterField) {
+    switch (value) {
+      case FilterField.AgeRating:
+        return translate('filter-field-pipe.age-rating');
+      case FilterField.Characters:
+        return translate('filter-field-pipe.characters');
+      case FilterField.CollectionTags:
+        return translate('filter-field-pipe.collection-tags');
+      case FilterField.Colorist:
+        return translate('filter-field-pipe.colorist');
+      case FilterField.CoverArtist:
+        return translate('filter-field-pipe.cover-artist');
+      case FilterField.Editor:
+        return translate('filter-field-pipe.editor');
+      case FilterField.Formats:
+        return translate('filter-field-pipe.formats');
+      case FilterField.Genres:
+        return translate('filter-field-pipe.genres');
+      case FilterField.Inker:
+        return translate('filter-field-pipe.inker');
+      case FilterField.Imprint:
+        return translate('filter-field-pipe.imprint');
+      case FilterField.Team:
+        return translate('filter-field-pipe.team');
+      case FilterField.Location:
+        return translate('filter-field-pipe.location');
+      case FilterField.Languages:
+        return translate('filter-field-pipe.languages');
+      case FilterField.Libraries:
+        return translate('filter-field-pipe.libraries');
+      case FilterField.Letterer:
+        return translate('filter-field-pipe.letterer');
+      case FilterField.PublicationStatus:
+        return translate('filter-field-pipe.publication-status');
+      case FilterField.Penciller:
+        return translate('filter-field-pipe.penciller');
+      case FilterField.Publisher:
+        return translate('filter-field-pipe.publisher');
+      case FilterField.ReadProgress:
+        return translate('filter-field-pipe.read-progress');
+      case FilterField.ReadTime:
+        return translate('filter-field-pipe.read-time');
+      case FilterField.ReleaseYear:
+        return translate('filter-field-pipe.release-year');
+      case FilterField.SeriesName:
+        return translate('filter-field-pipe.series-name');
+      case FilterField.Summary:
+        return translate('filter-field-pipe.summary');
+      case FilterField.Tags:
+        return translate('filter-field-pipe.tags');
+      case FilterField.Translators:
+        return translate('filter-field-pipe.translators');
+      case FilterField.UserRating:
+        return translate('filter-field-pipe.user-rating');
+      case FilterField.Writers:
+        return translate('filter-field-pipe.writers');
+      case FilterField.Path:
+        return translate('filter-field-pipe.path');
+      case FilterField.FilePath:
+        return translate('filter-field-pipe.file-path');
+      case FilterField.WantToRead:
+        return translate('filter-field-pipe.want-to-read');
+      case FilterField.ReadingDate:
+        return translate('filter-field-pipe.read-date');
+      case FilterField.ReadLast:
+        return translate('filter-field-pipe.read-last');
+      case FilterField.AverageRating:
+        return translate('filter-field-pipe.average-rating');
+      default:
+        throw new Error(`Invalid FilterField value: ${value}`);
+    }
   }
 
 }

UI/Web/src/app/_pipes/sort-field.pipe.ts

@@ -1,6 +1,8 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 import {SortField} from "../_models/metadata/series-filter";
 import {TranslocoService} from "@jsverse/transloco";
+import {ValidFilterEntity} from "../metadata-filter/filter-settings";
+import {PersonSortField} from "../_models/metadata/v2/person-sort-field";
 
 @Pipe({
   name: 'sortField',
@@ -11,7 +13,30 @@ export class SortFieldPipe implements PipeTransform {
   constructor(private translocoService: TranslocoService) {
   }
 
-  transform(value: SortField): string {
+  transform<T extends number>(value: T, entityType: ValidFilterEntity): string {
+
+    switch (entityType) {
+      case "series":
+        return this.seriesSortFields(value as SortField);
+      case "person":
+        return this.personSortFields(value as PersonSortField);
+
+    }
+  }
+
+  private personSortFields(value: PersonSortField) {
+    switch (value) {
+      case PersonSortField.Name:
+        return this.translocoService.translate('sort-field-pipe.person-name');
+      case PersonSortField.SeriesCount:
+        return this.translocoService.translate('sort-field-pipe.person-series-count');
+      case PersonSortField.ChapterCount:
+        return this.translocoService.translate('sort-field-pipe.person-chapter-count');
+
+    }
+  }
+
+  private seriesSortFields(value: SortField) {
     switch (value) {
       case SortField.SortName:
         return this.translocoService.translate('sort-field-pipe.sort-name');
@@ -32,7 +57,6 @@ export class SortFieldPipe implements PipeTransform {
       case SortField.Random:
         return this.translocoService.translate('sort-field-pipe.random');
     }
-
   }
 
 }

UI/Web/src/app/_resolvers/url-filter.resolver.ts

@@ -0,0 +1,22 @@
+import {Injectable} from "@angular/core";
+import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from "@angular/router";
+import {Observable, of} from "rxjs";
+import {FilterV2} from "../_models/metadata/v2/filter-v2";
+import {FilterUtilitiesService} from "../shared/_services/filter-utilities.service";
+
+/**
+ * Checks the url for a filter and resolves one if applicable, otherwise returns null.
+ * It is up to the consumer to cast appropriately.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class UrlFilterResolver implements Resolve<any> {
+
+  constructor(private filterUtilitiesService: FilterUtilitiesService) {}
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FilterV2 | null> {
+    if (!state.url.includes('?')) return of(null);
+    return this.filterUtilitiesService.decodeFilter(state.url.split('?')[1]);
+  }
+}

UI/Web/src/app/_routes/all-series-routing.module.ts

@@ -1,7 +1,13 @@
-import { Routes } from "@angular/router";
+import {Routes} from "@angular/router";
-import { AllSeriesComponent } from "../all-series/_components/all-series/all-series.component";
+import {AllSeriesComponent} from "../all-series/_components/all-series/all-series.component";
+import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
 
 
 export const routes: Routes = [
-  {path: '', component: AllSeriesComponent, pathMatch: 'full'},
+  {path: '', component: AllSeriesComponent, pathMatch: 'full',
+    runGuardsAndResolvers: 'always',
+    resolve: {
+      filter: UrlFilterResolver
+    }
+  },
 ];

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

@@ -1,6 +1,12 @@
-import { Routes } from "@angular/router";
+import {Routes} from "@angular/router";
-import { BookmarksComponent } from "../bookmark/_components/bookmarks/bookmarks.component";
+import {BookmarksComponent} from "../bookmark/_components/bookmarks/bookmarks.component";
+import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
 
 export const routes: Routes = [
-  {path: '', component: BookmarksComponent, pathMatch: 'full'},
+  {path: '', component: BookmarksComponent, pathMatch: 'full',
+    resolve: {
+      filter: UrlFilterResolver
+    },
+    runGuardsAndResolvers: 'always',
+  },
 ];

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

@@ -2,10 +2,16 @@ import {Routes} from "@angular/router";
 import {BrowseAuthorsComponent} from "../browse/browse-people/browse-authors.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'},
+  {path: 'authors', component: BrowseAuthorsComponent, pathMatch: 'full',
+    resolve: {
+      filter: UrlFilterResolver
+    },
+    runGuardsAndResolvers: 'always',
+  },
   {path: 'genres', component: BrowseGenresComponent, pathMatch: 'full'},
   {path: 'tags', component: BrowseTagsComponent, pathMatch: 'full'},
 ];

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

@@ -1,9 +1,15 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
-import { AllCollectionsComponent } from '../collections/_components/all-collections/all-collections.component';
+import {AllCollectionsComponent} from '../collections/_components/all-collections/all-collections.component';
-import { CollectionDetailComponent } from '../collections/_components/collection-detail/collection-detail.component';
+import {CollectionDetailComponent} from '../collections/_components/collection-detail/collection-detail.component';
+import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
 
 export const routes: Routes = [
   {path: '', component: AllCollectionsComponent, pathMatch: 'full'},
-  {path: ':id', component: CollectionDetailComponent},
+  {path: ':id', component: CollectionDetailComponent,
+    resolve: {
+      filter: UrlFilterResolver
+    },
+    runGuardsAndResolvers: 'always',
+  },
 ];
 

UI/Web/src/app/_routes/library-detail-routing.module.ts

@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
 import {AuthGuard} from '../_guards/auth.guard';
 import {LibraryAccessGuard} from '../_guards/library-access.guard';
 import {LibraryDetailComponent} from '../library-detail/library-detail.component';
+import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
 
 
 export const routes: Routes = [
@@ -9,12 +10,18 @@ export const routes: Routes = [
     path: ':libraryId',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard, LibraryAccessGuard],
-    component: LibraryDetailComponent
+    component: LibraryDetailComponent,
+    resolve: {
+      filter: UrlFilterResolver
+    },
   },
   {
     path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard, LibraryAccessGuard],
-    component: LibraryDetailComponent
+    component: LibraryDetailComponent,
+    resolve: {
+      filter: UrlFilterResolver
+    },
   },
 ];

UI/Web/src/app/_routes/want-to-read-routing.module.ts

@@ -1,6 +1,10 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
-import { WantToReadComponent } from '../want-to-read/_components/want-to-read/want-to-read.component';
+import {WantToReadComponent} from '../want-to-read/_components/want-to-read/want-to-read.component';
+import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
 
 export const routes: Routes = [
-  {path: '', component: WantToReadComponent, pathMatch: 'full'},
+  {path: '', component: WantToReadComponent, pathMatch: 'full', runGuardsAndResolvers: 'always', resolve: {
+    filter: UrlFilterResolver
+    }
+  },
 ];

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

@@ -7,7 +7,7 @@ import {Genre} from '../_models/metadata/genre';
 import {AgeRatingDto} from '../_models/metadata/age-rating-dto';
 import {Language} from '../_models/metadata/language';
 import {PublicationStatusDto} from '../_models/metadata/publication-status-dto';
-import {Person, PersonRole} from '../_models/metadata/person';
+import {allPeopleRoles, Person, PersonRole} from '../_models/metadata/person';
 import {Tag} from '../_models/tag';
 import {FilterComparison} from '../_models/metadata/v2/filter-comparison';
 import {FilterField} from '../_models/metadata/v2/filter-field';
@@ -29,6 +29,10 @@ import {PaginatedResult} from "../_models/pagination";
 import {UtilityService} from "../shared/_services/utility.service";
 import {BrowseGenre} from "../_models/metadata/browse/browse-genre";
 import {BrowseTag} from "../_models/metadata/browse/browse-tag";
+import {ValidFilterEntity} from "../metadata-filter/filter-settings";
+import {PersonFilterField} from "../_models/metadata/v2/person-filter-field";
+import {PersonRolePipe} from "../_pipes/person-role.pipe";
+import {PersonSortField} from "../_models/metadata/v2/person-sort-field";
 
 @Injectable({
   providedIn: 'root'
@@ -44,6 +48,7 @@ export class MetadataService {
   private validLanguages: Array<Language> = [];
   private ageRatingPipe = new AgeRatingPipe();
   private mangaFormatPipe = new MangaFormatPipe(this.translocoService);
+  private personRolePipe = new PersonRolePipe();
 
   constructor(private httpClient: HttpClient) { }
 
@@ -148,19 +153,28 @@ export class MetadataService {
     return this.httpClient.get<Array<Person>>(this.baseUrl + 'metadata/people-by-role?role=' + role);
   }
 
-  createDefaultFilterDto(): FilterV2<FilterField> {
+  createDefaultFilterDto<TFilter extends number, TSort extends number>(entityType: ValidFilterEntity): FilterV2<TFilter, TSort> {
     return {
-      statements: [] as FilterStatement<FilterField>[],
+      statements: [] as FilterStatement<TFilter>[],
       combination: FilterCombination.And,
       limitTo: 0,
       sortOptions: {
         isAscending: true,
-        sortField: SortField.SortName
+        sortField: (entityType === 'series' ? SortField.SortName : PersonSortField.Name) as TSort
       }
     };
   }
 
-  createDefaultFilterStatement(field: FilterField = FilterField.SeriesName, comparison = FilterComparison.Equal, value = '') {
+  createDefaultFilterStatement(entityType: ValidFilterEntity) {
+    switch (entityType) {
+      case 'series':
+        return this.createFilterStatement(FilterField.SeriesName);
+      case 'person':
+        return this.createFilterStatement(PersonFilterField.Role, FilterComparison.Contains, `${PersonRole.CoverArtist}, ${PersonRole.Writer}`);
+    }
+  }
+
+  createFilterStatement<T extends number>(field: T, comparison = FilterComparison.Equal, value = '') {
     return {
       comparison: comparison,
       field: field,
@@ -223,9 +237,28 @@ export class MetadataService {
   /**
    * Used to get the underlying Options (for Metadata Filter Dropdowns)
    * @param filterField
+   * @param entityType
    */
-  getOptionsForFilterField(filterField: FilterField) {
+  getOptionsForFilterField<T extends number>(filterField: T, entityType: ValidFilterEntity) {
-    switch (filterField) {
+
+    switch (entityType) {
+      case 'series':
+        return this.getSeriesOptionsForFilterField(filterField as FilterField);
+      case 'person':
+        return this.getPersonOptionsForFilterField(filterField as PersonFilterField);
+    }
+  }
+
+  private getPersonOptionsForFilterField(field: PersonFilterField) {
+    switch (field) {
+      case PersonFilterField.Role:
+        return of(allPeopleRoles.map(r => {return {value: r, label: this.personRolePipe.transform(r)}}));
+    }
+    return of([])
+  }
+
+  private getSeriesOptionsForFilterField(field: FilterField) {
+    switch (field) {
       case FilterField.PublicationStatus:
         return this.getAllPublicationStatus().pipe(map(pubs => pubs.map(pub => {
           return {value: pub.value, label: pub.title}

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

@@ -9,7 +9,9 @@ import {UtilityService} from "../shared/_services/utility.service";
 import {BrowsePerson} from "../_models/metadata/browse/browse-person";
 import {StandaloneChapter} from "../_models/standalone-chapter";
 import {TextResonse} from "../_types/text-response";
-import {BrowsePersonFilter} from "../_models/metadata/v2/browse-person-filter";
+import {FilterV2} from "../_models/metadata/v2/filter-v2";
+import {PersonFilterField} from "../_models/metadata/v2/person-filter-field";
+import {PersonSortField} from "../_models/metadata/v2/person-sort-field";
 
 @Injectable({
   providedIn: 'root'
@@ -44,7 +46,7 @@ export class PersonService {
     return this.httpClient.get<Array<StandaloneChapter>>(this.baseUrl + `person/chapters-by-role?personId=${personId}&role=${role}`);
   }
 
-  getAuthorsToBrowse(filter: BrowsePersonFilter, pageNum?: number, itemsPerPage?: number) {
+  getAuthorsToBrowse(filter: FilterV2<PersonFilterField, PersonSortField>, pageNum?: number, itemsPerPage?: number) {
     let params = new HttpParams();
     params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
 
@@ -55,6 +57,17 @@ export class PersonService {
     );
   }
 
+  // getAuthorsToBrowse(filter: BrowsePersonFilter, pageNum?: number, itemsPerPage?: number) {
+  //   let params = new HttpParams();
+  //   params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
+  //
+  //   return this.httpClient.post<PaginatedResult<BrowsePerson[]>>(this.baseUrl + `person/all`, filter, {observe: 'response', params}).pipe(
+  //     map((response: any) => {
+  //       return this.utilityService.createPaginatedResult(response) as PaginatedResult<BrowsePerson[]>;
+  //     })
+  //   );
+  // }
+
   downloadCover(personId: number) {
     return this.httpClient.post<string>(this.baseUrl + 'person/fetch-cover?personId=' + personId, {}, TextResonse);
   }

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

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
+import {NavigationStart, Router} from '@angular/router';
-import { filter, ReplaySubject, take } from 'rxjs';
+import {filter, ReplaySubject, take} from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -18,6 +18,7 @@ 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);
@@ -27,13 +28,15 @@ 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);
     });
-    
+
   }
 
   set(state: boolean) {
     this.toggleState = state;
+    console.log('[toggleservice] setting filter open status: ', this.toggleState);
     this.toggleStateSource.next(state);
   }
 }

UI/Web/src/app/all-series/_components/all-series/all-series.component.ts

@@ -38,6 +38,8 @@ import {MetadataService} from "../../../_services/metadata.service";
 import {Observable} from "rxjs";
 import {FilterField} from "../../../_models/metadata/v2/filter-field";
 import {SeriesFilterSettings} from "../../../metadata-filter/filter-settings";
+import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
+import {Select2Option} from "ng-select2-component";
 
 
 @Component({
@@ -130,8 +132,14 @@ export class AllSeriesComponent implements OnInit {
   constructor() {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
 
-    this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
+
-      this.filter = filter;
+    this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
+      this.filter = data['filter'] as FilterV2<FilterField, SortField>;
+
+      if (this.filter == null) {
+        this.filter = this.metadataService.createDefaultFilterDto('series');
+        this.filter.statements.push(this.metadataService.createDefaultFilterStatement('series') as FilterStatement<FilterField>);
+      }
 
       this.title = this.route.snapshot.queryParamMap.get('title') || this.filter!.name || this.title;
       this.titleService.setTitle('Kavita - ' + this.title);
@@ -140,8 +148,13 @@ export class AllSeriesComponent implements OnInit {
       if (this.shouldRewriteTitle()) {
         const field = this.filter!.statements[0].field;
 
+        console.log('field', field);
+
         // This api returns value as string and number, it will complain without the casting
-        (this.metadataService.getOptionsForFilterField(field) as Observable<any>).subscribe((opts: any[]) => {
+        (this.metadataService.getOptionsForFilterField<FilterField>(field, 'series') as Observable<Select2Option[]>).subscribe((opts: Select2Option[]) => {
+          console.log('opts:', opts);
+
+          // BUG: There is now a timing issue when navigating FROM a click. On refresh it works.
           const matchingOpts = opts.filter(m => `${m.value}` === `${this.filter!.statements[0].value}`);
           if (matchingOpts.length === 0) return;
 
@@ -158,7 +171,7 @@ export class AllSeriesComponent implements OnInit {
 
       this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
       this.filterActiveCheck!.statements.push(this.filterUtilityService.createSeriesV2DefaultStatement());
-      this.filterSettings.presetsV2 =  this.filter;
+      this.filterSettings.presetsV2 = this.filter;
 
       this.cdRef.markForCheck();
     });

UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.ts

@@ -1,4 +1,12 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, OnInit} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  EventEmitter,
+  inject,
+  OnInit
+} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ToastrService} from 'ngx-toastr';
 import {take} from 'rxjs';
@@ -10,7 +18,7 @@ import {JumpKey} from 'src/app/_models/jumpbar/jump-key';
 import {PageBookmark} from 'src/app/_models/readers/page-bookmark';
 import {Pagination} from 'src/app/_models/pagination';
 import {Series} from 'src/app/_models/series';
-import {FilterEvent} from 'src/app/_models/metadata/series-filter';
+import {FilterEvent, SortField} from 'src/app/_models/metadata/series-filter';
 import {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service';
 import {ImageService} from 'src/app/_services/image.service';
 import {JumpbarService} from 'src/app/_services/jumpbar.service';
@@ -28,6 +36,9 @@ import {Title} from "@angular/platform-browser";
 import {WikiLink} from "../../../_models/wiki";
 import {FilterField} from "../../../_models/metadata/v2/filter-field";
 import {SeriesFilterSettings} from "../../../metadata-filter/filter-settings";
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
+import {MetadataService} from "../../../_services/metadata.service";
 
 @Component({
   selector: 'app-bookmarks',
@@ -52,6 +63,8 @@ export class BookmarksComponent implements OnInit {
   private readonly titleService = inject(Title);
   public readonly bulkSelectionService = inject(BulkSelectionService);
   public readonly imageService = inject(ImageService);
+  public readonly metadataService = inject(MetadataService);
+  public readonly destroyRef = inject(DestroyRef);
 
   protected readonly WikiLink = WikiLink;
 
@@ -74,8 +87,14 @@ export class BookmarksComponent implements OnInit {
   refresh: EventEmitter<void> = new EventEmitter();
 
   constructor() {
-      this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
+
-        this.filter = filter;
+      this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
+        this.filter = data['filter'] as FilterV2<FilterField, SortField>;
+
+        if (this.filter == null) {
+          this.filter = this.metadataService.createDefaultFilterDto('series');
+          this.filter.statements.push(this.metadataService.createDefaultFilterStatement('series') as FilterStatement<FilterField>);
+        }
 
         this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
         this.filterActiveCheck!.statements.push(this.filterUtilityService.createSeriesV2DefaultStatement());
@@ -85,6 +104,7 @@ export class BookmarksComponent implements OnInit {
         this.cdRef.markForCheck();
       });
 
+
       this.titleService.setTitle('Kavita - ' + translate('bookmarks.title'));
     }
 

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

@@ -8,44 +8,44 @@
 
     </app-side-nav-companion-bar>
 
-    <form [formGroup]="filterGroup">
+<!--    <form [formGroup]="filterGroup">-->
-      <div class="row mb-3">
+<!--      <div class="row mb-3">-->
-        <div class="col-md-4 col-auto">
+<!--        <div class="col-md-4 col-auto">-->
-          <div class="form-group">
+<!--          <div class="form-group">-->
-            <label for="role-selection">{{t('roles-label')}}</label>
+<!--            <label for="role-selection">{{t('roles-label')}}</label>-->
-            <select2 [data]="allRoles"
+<!--            <select2 [data]="allRoles"-->
-                     id="role-selection"
+<!--                     id="role-selection"-->
-                     formControlName="roles"
+<!--                     formControlName="roles"-->
-                     [hideSelectedItems]="true"
+<!--                     [hideSelectedItems]="true"-->
-                     [multiple]="true"
+<!--                     [multiple]="true"-->
-                     [infiniteScroll]="true"
+<!--                     [infiniteScroll]="true"-->
-                     [resettable]="true"
+<!--                     [resettable]="true"-->
-            style="min-width: 200px">
+<!--            style="min-width: 200px">-->
-            </select2>
+<!--            </select2>-->
-          </div>
+<!--          </div>-->
-        </div>
+<!--        </div>-->
 
-        <div class="col-auto ms-auto me-auto">
+<!--        <div class="col-auto ms-auto me-auto">-->
-          <div class="form-group">
+<!--          <div class="form-group">-->
-            <label for="query">Filter</label>
+<!--            <label for="query">Filter</label>-->
-            <input type="text" id="query" style="min-width: 100px" autocomplete="off" formControlName="query" class="form-control" />
+<!--            <input type="text" id="query" style="min-width: 100px" autocomplete="off" formControlName="query" class="form-control" />-->
-          </div>
+<!--          </div>-->
-        </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>
 
+<!--        <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"
@@ -53,10 +53,11 @@
       [trackByIdentity]="trackByIdentity"
       [jumpBarKeys]="jumpKeys"
       [filteringDisabled]="true"
-      [customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name"
+
       [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)">

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

@@ -23,19 +23,16 @@ import {PersonCardComponent} from "../../cards/person-card/person-card.component
 import {ImageService} from "../../_services/image.service";
 import {TranslocoDirective} from "@jsverse/transloco";
 import {CompactNumberPipe} from "../../_pipes/compact-number.pipe";
-import {allPeopleRoles, PersonRole} from "../../_models/metadata/person";
+import {ReactiveFormsModule} from "@angular/forms";
-import {Select2} from "ng-select2-component";
-import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {PersonRolePipe} from "../../_pipes/person-role.pipe";
-import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {debounceTime, tap} from "rxjs/operators";
-import {SortButtonComponent} from "../../_single-module/sort-button/sort-button.component";
 import {PersonSortField} from "../../_models/metadata/v2/person-sort-field";
-import {PersonSortOptions} from "../../_models/metadata/v2/sort-options";
 import {PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
 import {FilterUtilitiesService} from "../../shared/_services/filter-utilities.service";
 import {FilterV2} from "../../_models/metadata/v2/filter-v2";
 import {PersonFilterSettings} from "../../metadata-filter/filter-settings";
+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";
 
 
 @Component({
@@ -47,9 +44,8 @@ import {PersonFilterSettings} from "../../metadata-filter/filter-settings";
     DecimalPipe,
     PersonCardComponent,
     CompactNumberPipe,
-    Select2,
     ReactiveFormsModule,
-    SortButtonComponent,
+
   ],
   templateUrl: './browse-authors.component.html',
   styleUrl: './browse-authors.component.scss',
@@ -75,58 +71,51 @@ export class BrowseAuthorsComponent implements OnInit {
   refresh: EventEmitter<void> = new EventEmitter();
   jumpKeys: Array<JumpKey> = [];
   trackByIdentity = (index: number, item: BrowsePerson) => `${item.id}`;
-  personRolePipe = new PersonRolePipe();
-  allRoles = allPeopleRoles.map(r => {return {value: r, label: this.personRolePipe.transform(r)}});
-  filterGroup = new FormGroup({
-    roles: new FormControl([PersonRole.CoverArtist, PersonRole.Writer], []),
-    sortField: new FormControl(PersonSortField.Name, []),
-    query: new FormControl('', []),
-  });
-  isAscending:  boolean = true;
   filterSettings: PersonFilterSettings = new PersonFilterSettings();
   filterActive: boolean = false;
   filterOpen: EventEmitter<boolean> = new EventEmitter();
-  filter: FilterV2<PersonFilterField> | undefined = undefined;
+  filter: FilterV2<PersonFilterField, PersonSortField> | undefined = undefined;
   filterActiveCheck!: FilterV2<PersonFilterField>;
 
 
-  ngOnInit() {
+  constructor() {
     this.isLoading = true;
     this.cdRef.markForCheck();
 
+    this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
+      this.filter = data['filter'] as FilterV2<PersonFilterField, PersonSortField>;
 
-    this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
+      // if (this.filter == null) {
-      this.filter = filter;
+      //   this.filter
+      // }
+
+      console.log('filter from url:', this.filter);
 
       this.filterActiveCheck = this.filterUtilityService.createPersonV2Filter();
-      this.filterActiveCheck!.statements.push(this.filterUtilityService.createPersonV2DefaultStatement());
+      this.filterActiveCheck!.statements.push({value: `${PersonRole.Writer},${PersonRole.CoverArtist}`, field: PersonFilterField.Role, comparison: FilterComparison.Contains});
-      this.filterSettings.presetsV2 =  this.filter;
+      this.filterSettings.presetsV2 = this.filter;
 
       this.cdRef.markForCheck();
+      this.loadData();
     });
-
-
-
-    this.filterGroup.valueChanges.pipe(
-      takeUntilDestroyed(this.destroyRef),
-      debounceTime(200),
-      tap(_ => this.loadData())
-    ).subscribe()
-
-    this.loadData();
   }
 
-  onSortUpdate(isAscending: boolean) {
+
-    this.isAscending = isAscending;
+  ngOnInit() {
-    this.loadData();
+
   }
 
+
   loadData() {
-    const roles = this.filterGroup.get('roles')?.value ?? [];
+    console.log('loading data with filter', this.filter!);
-    const sortOptions = {sortField: parseInt(this.filterGroup.get('sortField')!.value + '', 10), isAscending: this.isAscending} as PersonSortOptions;
-    const query = this.filterGroup.get('query')?.value ?? '';
 
-    this.personService.getAuthorsToBrowse({roles, sortOptions, query}).subscribe(d => {
+    if (!this.filter) {
+      this.filter = this.filterUtilityService.createPersonV2Filter();
+      this.filter.statements.push({value: `${PersonRole.Writer},${PersonRole.CoverArtist}`, field: PersonFilterField.Role, comparison: FilterComparison.Contains});
+      this.cdRef.markForCheck();
+    }
+
+    this.personService.getAuthorsToBrowse(this.filter!).subscribe(d => {
       this.authors = [...d.result];
       this.pagination = d.pagination;
       this.jumpKeys = this.jumpbarService.getJumpKeys(this.authors, d => d.name);
@@ -138,4 +127,18 @@ export class BrowseAuthorsComponent implements OnInit {
   goToPerson(person: BrowsePerson) {
     this.router.navigate(['person', person.name]);
   }
+
+  updateFilter(data: FilterEvent) {
+    if (data.filterV2 === undefined) return;
+    this.filter = data.filterV2;
+
+    if (data.isFirst) {
+      this.loadData();
+      return;
+    }
+
+    this.filterUtilityService.updateUrlFromFilter(this.filter).subscribe((_) => {
+      this.loadData();
+    });
+  }
 }

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

@@ -1,18 +1,18 @@
 <ng-container *transloco="let t; read: 'card-detail-layout'">
   <app-loading [loading]="isLoading"></app-loading>
 
-  @if (header.length > 0) {
+  @if (header().length > 0) {
     <div class="row mt-2 g-0 pb-2">
       <div class="col me-auto">
         <h4>
-          @if (actions.length > 0) {
+          @if (actions().length > 0) {
             <span>
-              <app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" [labelBy]="header"></app-card-actionables>&nbsp;
+              <app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions()" [labelBy]="header()"></app-card-actionables>&nbsp;
             </span>
           }
 
           <span>
-            {{header}}&nbsp;
+            {{header()}}&nbsp;
             @if (pagination) {
               <span class="badge bg-primary rounded-pill"
                     [attr.aria-label]="t('total-items', {count: pagination.totalItems})">{{pagination.totalItems}}</span>

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

@@ -10,10 +10,12 @@ import {
   HostListener,
   inject,
   Inject,
+  input,
   Input,
   OnChanges,
   OnInit,
   Output,
+  Signal,
   SimpleChange,
   SimpleChanges,
   TemplateRef,
@@ -38,7 +40,7 @@ import {filter, map} from "rxjs/operators";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {tap} from "rxjs";
 import {FilterV2} from "../../_models/metadata/v2/filter-v2";
-import {FilterSettingsBase, SeriesFilterSettings} from "../../metadata-filter/filter-settings";
+import {FilterSettingsBase, ValidFilterEntity} from "../../metadata-filter/filter-settings";
 
 
 const ANIMATION_TIME_MS = 0;
@@ -73,9 +75,9 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
 
-  protected readonly Breakpoint = Breakpoint;
 
-  @Input() header: string = '';
+
+  header: Signal<string> = input('');
   @Input() isLoading: boolean = false;
   @Input() items: any[] = [];
   @Input() pagination!: Pagination;
@@ -93,17 +95,15 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   /**
    * Any actions to exist on the header for the parent collection (library, collection)
    */
-  @Input() actions: ActionItem<any>[] = [];
+  actions: Signal<ActionItem<any>[]> = input([]);
   /**
    * A trackBy to help with rendering. This is required as without it there are issues when scrolling
    */
   @Input({required: true}) trackByIdentity!: TrackByFunction<any>;
   @Input() filterSettings!: FilterSettingsBase;
+  entityType = input<ValidFilterEntity | 'other'>();
   @Input() refresh!: EventEmitter<void>;
-  /**
+
-   * Pass the filter object optionally. If not passed, will create a SeriesFilter by default
-   */
-  filter: FilterV2<number> | undefined = undefined;
 
   /**
    * Will force the jumpbar to be disabled - in cases where you're not using a traditional filter config
@@ -126,6 +126,11 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   updateApplied: number = 0;
   bufferAmount: number = 1;
 
+  /**
+   * Pass the filter object optionally. If not passed, will create a SeriesFilter by default
+   */
+  filter: FilterV2<number> | undefined = undefined;
+
 
 
 
@@ -150,7 +155,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
     // }
 
     if (this.filterSettings === undefined) {
-      this.filterSettings = new SeriesFilterSettings();
+      this.filterSettings = this.filterUtilityService.getDefaultSettings(this.entityType());
+      console.log('[card detail layout] Filter Setting is not set, defaulting: ', this.filterSettings);
       this.cdRef.markForCheck();
     }
 
@@ -231,4 +237,6 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   tryToSaveJumpKey() {
     this.jumpbarService.saveResumePosition(this.router.url, this.virtualScroller.viewPortInfo.startIndex);
   }
+
+  protected readonly Breakpoint = Breakpoint;
 }

UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts

@@ -26,7 +26,7 @@ import {SeriesAddedToCollectionEvent} from 'src/app/_models/events/series-added-
 import {JumpKey} from 'src/app/_models/jumpbar/jump-key';
 import {Pagination} from 'src/app/_models/pagination';
 import {Series} from 'src/app/_models/series';
-import {FilterEvent} from 'src/app/_models/metadata/series-filter';
+import {FilterEvent, SortField} from 'src/app/_models/metadata/series-filter';
 import {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service';
 import {ActionService} from 'src/app/_services/action.service';
 import {CollectionTagService} from 'src/app/_services/collection-tag.service';
@@ -48,7 +48,6 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco";
 import {CardActionablesComponent} from "../../../_single-module/card-actionables/card-actionables.component";
 import {FilterField} from "../../../_models/metadata/v2/filter-field";
-import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
 import {FilterV2} from "../../../_models/metadata/v2/filter-v2";
 import {AccountService} from "../../../_services/account.service";
 import {User} from "../../../_models/user";
@@ -63,6 +62,8 @@ import {ScrobbleProviderNamePipe} from "../../../_pipes/scrobble-provider-name.p
 import {PromotedIconComponent} from "../../../shared/_components/promoted-icon/promoted-icon.component";
 import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
 import {SeriesFilterSettings} from "../../../metadata-filter/filter-settings";
+import {MetadataService} from "../../../_services/metadata.service";
+import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
 
 @Component({
   selector: 'app-collection-detail',
@@ -96,6 +97,7 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
   protected readonly utilityService = inject(UtilityService);
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly scrollService = inject(ScrollService);
+  private readonly metadataService = inject(MetadataService);
 
   protected readonly ScrobbleProvider = ScrobbleProvider;
   protected readonly Breakpoint = Breakpoint;
@@ -189,18 +191,26 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
       }
       const tagId = parseInt(routeId, 10);
 
-      this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
+      this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
-        this.filter = filter as FilterV2<FilterField>;
+        this.filter = data['filter'] as FilterV2<FilterField, SortField>;
+  
+        const defaultStmt =  {field: FilterField.CollectionTags, value: tagId + '', comparison: FilterComparison.Equal};
+
+        if (this.filter == null) {
+          this.filter = this.metadataService.createDefaultFilterDto('series');
+          this.filter.statements.push(defaultStmt);
+        }
 
         if (this.filter.statements.filter((stmt: FilterStatement<FilterField>) => stmt.field === FilterField.CollectionTags).length === 0) {
-          this.filter!.statements.push({field: FilterField.CollectionTags, value: tagId + '', comparison: FilterComparison.Equal});
+          this.filter!.statements.push(defaultStmt);
         }
+
         this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
-        this.filterActiveCheck!.statements.push({field: FilterField.CollectionTags, value: tagId + '', comparison: FilterComparison.Equal});
+        this.filterActiveCheck!.statements.push(defaultStmt);
         this.filterSettings.presetsV2 =  this.filter;
-        this.cdRef.markForCheck();
 
         this.updateTag(tagId);
+        this.cdRef.markForCheck();
       });
   }
 

UI/Web/src/app/library-detail/library-detail.component.ts

@@ -17,7 +17,7 @@ import {SeriesAddedEvent} from '../_models/events/series-added-event';
 import {Library} from '../_models/library/library';
 import {Pagination} from '../_models/pagination';
 import {Series} from '../_models/series';
-import {FilterEvent} from '../_models/metadata/series-filter';
+import {FilterEvent, SortField} from '../_models/metadata/series-filter';
 import {Action, ActionFactoryService, ActionItem} from '../_services/action-factory.service';
 import {ActionService} from '../_services/action.service';
 import {LibraryService} from '../_services/library.service';
@@ -43,6 +43,7 @@ import {CardActionablesComponent} from "../_single-module/card-actionables/card-
 import {LoadingComponent} from "../shared/loading/loading.component";
 import {debounceTime, ReplaySubject, tap} from "rxjs";
 import {SeriesFilterSettings} from "../metadata-filter/filter-settings";
+import {MetadataService} from "../_services/metadata.service";
 
 @Component({
     selector: 'app-library-detail',
@@ -68,6 +69,7 @@ export class LibraryDetailComponent implements OnInit {
   private readonly filterUtilityService = inject(FilterUtilitiesService);
   public readonly navService = inject(NavService);
   public readonly bulkSelectionService = inject(BulkSelectionService);
+  public readonly metadataService = inject(MetadataService);
 
   libraryId!: number;
   libraryName = '';
@@ -184,16 +186,19 @@ export class LibraryDetailComponent implements OnInit {
 
     this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
 
-    this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
+    this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
-      this.filter = filter as FilterV2<FilterField>;
+      this.filter = data['filter'] as FilterV2<FilterField, SortField>;
 
-      if (this.filter.statements.filter(stmt => stmt.field === FilterField.Libraries).length === 0) {
+      const defaultStmt = {field: FilterField.Libraries, value: this.libraryId + '', comparison: FilterComparison.Equal};
-        this.filter!.statements.push({field: FilterField.Libraries, value: this.libraryId + '', comparison: FilterComparison.Equal});
+
+      if (this.filter == null) {
+        this.filter = this.metadataService.createDefaultFilterDto('series');
+        this.filter.statements.push(defaultStmt);
       }
 
-      this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
-      this.filterActiveCheck.statements.push({field: FilterField.Libraries, value: this.libraryId + '', comparison: FilterComparison.Equal});
 
+      this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
+      this.filterActiveCheck!.statements.push(defaultStmt);
       this.filterSettings.presetsV2 =  this.filter;
 
       this.loadPage$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100), tap(_ => this.loadPage())).subscribe();

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

@@ -39,13 +39,13 @@ import {ValidFilterEntity} from "../../filter-settings";
 })
 export class MetadataBuilderComponent<TFilter extends number = number, TSort extends number = number> implements OnInit {
 
-  @Input({required: true}) filter!: FilterV2<number>;
+  @Input({required: true}) filter!: FilterV2<TFilter, TSort>;
   /**
    * The number of statements that can be. 0 means unlimited. -1 means none.
    */
   @Input() statementLimit = 0;
   entityType = input.required<ValidFilterEntity>();
-  @Output() update: EventEmitter<FilterV2<number>> = new EventEmitter<FilterV2<number>>();
+  @Output() update: EventEmitter<FilterV2<TFilter, TSort>> = new EventEmitter<FilterV2<TFilter, TSort>>();
   @Output() apply: EventEmitter<void> = new EventEmitter<void>();
 
   private readonly cdRef = inject(ChangeDetectorRef);
@@ -62,7 +62,11 @@ 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 => {
       this.filter.combination = parseInt(this.formGroup.get('comparison')?.value, 10) as FilterCombination;
       this.update.emit(this.filter);
@@ -70,7 +74,8 @@ export class MetadataBuilderComponent<TFilter extends number = number, TSort ext
   }
 
   addFilter() {
-    this.filter.statements = [this.metadataService.createDefaultFilterStatement(), ...this.filter.statements];
+    const statement = this.metadataService.createFilterStatement<TFilter>(this.filterUtilityService.getDefaultFilterField(this.entityType()));
+    this.filter.statements = [statement, ...this.filter.statements];
     this.cdRef.markForCheck();
   }
 

UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html

@@ -3,8 +3,8 @@
         <div class="row g-0">
             <div class="col-md-3 me-2 col-10 mb-2">
                 <select class="form-select me-2" formControlName="input">
-                  @for (field of filterFieldOptions(); track field) {
+                  @for (field of filterFieldOptions(); track field.value) {
-                    <option [value]="field">{{field | filterField}}</option>
+                    <option [value]="field.value">{{field.title}}</option>
                   }
                 </select>
             </div>

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

@@ -20,17 +20,24 @@ import {MetadataService} from 'src/app/_services/metadata.service';
 import {FilterComparison} from 'src/app/_models/metadata/v2/filter-comparison';
 import {FilterField} from 'src/app/_models/metadata/v2/filter-field';
 import {AsyncPipe} from "@angular/common";
-import {FilterFieldPipe} from "../../../_pipes/filter-field.pipe";
 import {FilterComparisonPipe} from "../../../_pipes/filter-comparison.pipe";
 import {takeUntilDestroyed, toSignal} from "@angular/core/rxjs-interop";
 import {Select2, Select2Option} from "ng-select2-component";
 import {NgbDate, NgbDateParserFormatter, NgbInputDatepicker, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
 import {TranslocoDirective, TranslocoService} from "@jsverse/transloco";
-import {MangaFormatPipe} from "../../../_pipes/manga-format.pipe";
-import {AgeRatingPipe} from "../../../_pipes/age-rating.pipe";
 import {ValidFilterEntity} from "../../filter-settings";
 import {FilterUtilitiesService} from "../../../shared/_services/filter-utilities.service";
 
+interface FieldConfig {
+  type: PredicateType;
+  baseComparisons: FilterComparison[];
+  defaultValue: any;
+  allowsDateComparisons?: boolean;
+  allowsNumberComparisons?: boolean;
+  excludesMustContains?: boolean;
+  allowsIsEmpty?: boolean;
+}
+
 enum PredicateType {
   Text = 1,
   Number = 2,
@@ -56,42 +63,42 @@ const unitLabels: Map<FilterField, FilterRowUi> = new Map([
     [FilterField.ReadLast, new FilterRowUi('unit-read-last')],
 ]);
 
-const StringFields = [FilterField.SeriesName, FilterField.Summary, FilterField.Path, FilterField.FilePath];
+// const StringFields = [FilterField.SeriesName, FilterField.Summary, FilterField.Path, FilterField.FilePath, PersonFilterField.Name];
-const NumberFields = [
+// const NumberFields = [
-  FilterField.ReadTime, FilterField.ReleaseYear, FilterField.ReadProgress,
+//   FilterField.ReadTime, FilterField.ReleaseYear, FilterField.ReadProgress,
-  FilterField.UserRating, FilterField.AverageRating, FilterField.ReadLast
+//   FilterField.UserRating, FilterField.AverageRating, FilterField.ReadLast
-];
+// ];
-const DropdownFields = [
+// const DropdownFields = [
-  FilterField.PublicationStatus, FilterField.Languages, FilterField.AgeRating,
+//   FilterField.PublicationStatus, FilterField.Languages, FilterField.AgeRating,
-  FilterField.Translators, FilterField.Characters, FilterField.Publisher,
+//   FilterField.Translators, FilterField.Characters, FilterField.Publisher,
-  FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
+//   FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
-  FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
+//   FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
-  FilterField.Writers, FilterField.Genres, FilterField.Libraries,
+//   FilterField.Writers, FilterField.Genres, FilterField.Libraries,
-  FilterField.Formats, FilterField.CollectionTags, FilterField.Tags,
+//   FilterField.Formats, FilterField.CollectionTags, FilterField.Tags,
-  FilterField.Imprint, FilterField.Team, FilterField.Location
+//   FilterField.Imprint, FilterField.Team, FilterField.Location, PersonFilterField.Role
-];
+// ];
-const BooleanFields = [FilterField.WantToRead];
+// const BooleanFields = [FilterField.WantToRead];
-const DateFields = [FilterField.ReadingDate];
+// const DateFields = [FilterField.ReadingDate];
-
+//
-const DropdownFieldsWithoutMustContains = [
+// const DropdownFieldsWithoutMustContains = [
-  FilterField.Libraries, FilterField.Formats, FilterField.AgeRating, FilterField.PublicationStatus
+//   FilterField.Libraries, FilterField.Formats, FilterField.AgeRating, FilterField.PublicationStatus
-];
+// ];
-const DropdownFieldsThatIncludeNumberComparisons = [
+// const DropdownFieldsThatIncludeNumberComparisons = [
-  FilterField.AgeRating
+//   FilterField.AgeRating
-];
+// ];
-const NumberFieldsThatIncludeDateComparisons = [
+// const NumberFieldsThatIncludeDateComparisons = [
-  FilterField.ReleaseYear
+//   FilterField.ReleaseYear
-];
+// ];
-
+//
-const FieldsThatShouldIncludeIsEmpty = [
+// const FieldsThatShouldIncludeIsEmpty = [
-  FilterField.Summary, FilterField.UserRating, FilterField.Genres,
+//   FilterField.Summary, FilterField.UserRating, FilterField.Genres,
-  FilterField.CollectionTags, FilterField.Tags, FilterField.ReleaseYear,
+//   FilterField.CollectionTags, FilterField.Tags, FilterField.ReleaseYear,
-  FilterField.Translators, FilterField.Characters, FilterField.Publisher,
+//   FilterField.Translators, FilterField.Characters, FilterField.Publisher,
-  FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
+//   FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
-  FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
+//   FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
-  FilterField.Writers, FilterField.Imprint, FilterField.Team,
+//   FilterField.Writers, FilterField.Imprint, FilterField.Team,
-  FilterField.Location,
+//   FilterField.Location,
-];
+// ];
 
 const StringComparisons = [
   FilterComparison.Equal,
@@ -128,7 +135,6 @@ const BooleanComparisons = [
   imports: [
     ReactiveFormsModule,
     AsyncPipe,
-    FilterFieldPipe,
     FilterComparisonPipe,
     NgbTooltip,
     TranslocoDirective,
@@ -161,8 +167,6 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
   dropdownOptions$ = of<Select2Option[]>([]);
 
   loaded: boolean = false;
-  private readonly mangaFormatPipe = new MangaFormatPipe(this.translocoService);
-  private readonly ageRatingPipe = new AgeRatingPipe();
 
 
   private comparisonSignal!: Signal<FilterComparison>;
@@ -172,8 +176,8 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
   uiLabel: Signal<FilterRowUi | null> = computed(() => null);
   isMultiSelectDropdownAllowed: Signal<boolean> = computed(() => false);
 
-  sortFieldOptions = computed(() => []);
+  sortFieldOptions: Signal<{title: string, value: TFilter}[]> = computed(() => []);
-  filterFieldOptions = computed(() => []);
+  filterFieldOptions: Signal<{title: string, value: TFilter}[]> = computed(() => []);
 
   ngOnInit() {
 
@@ -213,9 +217,6 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       return this.filterUtilitiesService.getFilterFields(this.entityType());
     });
 
-
-    //this.formGroup.addControl('input', new FormControl<FilterField>(FilterField.SeriesName, []));
-
     this.formGroup.get('input')?.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe((val: string) => this.handleFieldChange(val));
     this.populateFromPreset();
 
@@ -226,14 +227,14 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       startWith(this.preset.value),
       distinctUntilChanged(),
       filter(() => {
-        const inputVal = parseInt(this.formGroup.get('input')?.value, 10) as FilterField;
+        return this.filterUtilitiesService.getDropdownFields<TFilter>(this.entityType()).includes(this.inputSignal());
-        return DropdownFields.includes(inputVal);
       }),
       switchMap((_) => this.getDropdownObservable()),
       takeUntilDestroyed(this.destroyRef)
     );
 
 
+
     this.formGroup!.valueChanges.pipe(
       distinctUntilChanged(),
       tap(_ => this.propagateFilterUpdate()),
@@ -251,7 +252,9 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       value: this.formGroup.get('filterValue')?.value!
     };
 
-    if (typeof stmt.value === 'object' && DateFields.includes(stmt.field)) {
+    const dateFields = this.filterUtilitiesService.getDateFields(this.entityType());
+    const booleanFields = this.filterUtilitiesService.getBooleanFields(this.entityType());
+    if (typeof stmt.value === 'object' && dateFields.includes(stmt.field)) {
       stmt.value = this.dateParser.format(stmt.value);
     }
 
@@ -265,7 +268,7 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
     }
 
     if (stmt.comparison !== FilterComparison.IsEmpty) {
-      if (!stmt.value && (![FilterField.SeriesName, FilterField.Summary].includes(stmt.field) && !BooleanFields.includes(stmt.field))) return;
+      if (!stmt.value && (![FilterField.SeriesName, FilterField.Summary].includes(stmt.field) && !booleanFields.includes(stmt.field))) return;
     }
 
     this.filterStatement.emit(stmt);
@@ -276,14 +279,19 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
     this.formGroup.get('comparison')?.patchValue(this.preset.comparison);
     this.formGroup.get('input')?.patchValue(this.preset.field);
 
-    if (StringFields.includes(this.preset.field)) {
+    const dropdownFields = this.filterUtilitiesService.getDropdownFields<TFilter>(this.entityType());
+    const stringFields = this.filterUtilitiesService.getStringFields<TFilter>(this.entityType());
+    const dateFields = this.filterUtilitiesService.getDateFields(this.entityType());
+    const booleanFields = this.filterUtilitiesService.getBooleanFields(this.entityType());
+
+    if (stringFields.includes(this.preset.field)) {
       this.formGroup.get('filterValue')?.patchValue(val);
-    } else if (BooleanFields.includes(this.preset.field)) {
+    } else if (booleanFields.includes(this.preset.field)) {
       this.formGroup.get('filterValue')?.patchValue(val);
-    } else if (DateFields.includes(this.preset.field)) {
+    } else if (dateFields.includes(this.preset.field)) {
       this.formGroup.get('filterValue')?.patchValue(this.dateParser.parse(val));
     }
-    else if (DropdownFields.includes(this.preset.field)) {
+    else if (dropdownFields.includes(this.preset.field)) {
       if (this.isMultiSelectDropdownAllowed() || val.includes(',')) {
         this.formGroup.get('filterValue')?.patchValue(val.split(',').map(d => parseInt(d, 10)));
       } else {
@@ -302,18 +310,29 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
   }
 
   getDropdownObservable(): Observable<Select2Option[]> {
-      const filterField = parseInt(this.formGroup.get('input')?.value, 10) as FilterField;
+      const filterField = this.inputSignal();
-      return this.metadataService.getOptionsForFilterField(filterField);
+      return this.metadataService.getOptionsForFilterField<TFilter>(filterField, this.entityType());
   }
 
   handleFieldChange(val: string) {
-    const inputVal = parseInt(val, 10) as FilterField;
+    const inputVal = parseInt(val, 10) as TFilter;
+    console.log('input', inputVal);inputVal
 
+    const stringFields = this.filterUtilitiesService.getStringFields<TFilter>(this.entityType());
+    const dropdownFields = this.filterUtilitiesService.getDropdownFields<TFilter>(this.entityType());
+    const numberFields = this.filterUtilitiesService.getNumberFields<TFilter>(this.entityType());
+    const booleanFields = this.filterUtilitiesService.getBooleanFields<TFilter>(this.entityType());
+    const dateFields = this.filterUtilitiesService.getDateFields<TFilter>(this.entityType());
+    const fieldsThatShouldIncludeIsEmpty = this.filterUtilitiesService.getFieldsThatShouldIncludeIsEmpty<TFilter>(this.entityType());
+    const numberFieldsThatIncludeDateComparisons = this.filterUtilitiesService.getNumberFieldsThatIncludeDateComparisons<TFilter>(this.entityType());
+    const dropdownFieldsThatIncludeDateComparisons = this.filterUtilitiesService.getDropdownFieldsThatIncludeDateComparisons<TFilter>(this.entityType());
+    const dropdownFieldsWithoutMustContains = this.filterUtilitiesService.getDropdownFieldsWithoutMustContains<TFilter>(this.entityType());
+    const dropdownFieldsThatIncludeNumberComparisons = this.filterUtilitiesService.getDropdownFieldsThatIncludeNumberComparisons<TFilter>(this.entityType());
 
-    if (StringFields.includes(inputVal)) {
+    if (stringFields.includes(inputVal)) {
       let comps = [...StringComparisons];
 
-      if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
+      if (fieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
         comps.push(FilterComparison.IsEmpty);
       }
 
@@ -328,13 +347,13 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       return;
     }
 
-    if (NumberFields.includes(inputVal)) {
+    if (numberFields.includes(inputVal)) {
       const comps = [...NumberComparisons];
 
-      if (NumberFieldsThatIncludeDateComparisons.includes(inputVal)) {
+      if (numberFieldsThatIncludeDateComparisons.includes(inputVal)) {
         comps.push(...DateComparisons);
       }
-      if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
+      if (fieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
         comps.push(FilterComparison.IsEmpty);
       }
 
@@ -350,9 +369,9 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       return;
     }
 
-    if (DateFields.includes(inputVal)) {
+    if (dateFields.includes(inputVal)) {
       const comps = [...DateComparisons];
-      if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
+      if (fieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
         comps.push(FilterComparison.IsEmpty);
       }
 
@@ -367,9 +386,9 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       return;
     }
 
-    if (BooleanFields.includes(inputVal)) {
+    if (booleanFields.includes(inputVal)) {
       let comps = [...DateComparisons];
-      if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
+      if (fieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
         comps.push(FilterComparison.IsEmpty);
       }
 
@@ -385,15 +404,15 @@ export class MetadataFilterRowComponent<TFilter extends number = number, TSort e
       return;
     }
 
-    if (DropdownFields.includes(inputVal)) {
+    if (dropdownFields.includes(inputVal)) {
       let comps = [...DropdownComparisons];
-      if (DropdownFieldsThatIncludeNumberComparisons.includes(inputVal)) {
+      if (dropdownFieldsThatIncludeNumberComparisons.includes(inputVal)) {
         comps.push(...NumberComparisons);
       }
-      if (DropdownFieldsWithoutMustContains.includes(inputVal)) {
+      if (dropdownFieldsWithoutMustContains.includes(inputVal)) {
         comps = comps.filter(c => c !== FilterComparison.MustContains);
       }
-      if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
+      if (fieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
         comps.push(FilterComparison.IsEmpty);
       }
 

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

@@ -18,6 +18,7 @@ export class FilterSettingsBase<TFilter extends number = number, TSort extends n
     statementLimit: number = 0;
     saveDisabled: boolean = false;
     type: ValidFilterEntity = 'series';
+    supportsSmartFilter: boolean = false;
 }
 
 /**
@@ -25,6 +26,7 @@ export class FilterSettingsBase<TFilter extends number = number, TSort extends n
  */
 export class SeriesFilterSettings extends FilterSettingsBase<FilterField, SortField> {
   type: ValidFilterEntity = 'series';
+  supportsSmartFilter = true;
 }
 
 /**

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

@@ -43,15 +43,19 @@
               <label for="sort-options" class="form-label">{{t('sort-by-label')}}</label>
               <app-sort-button [disabled]="filterSettings().sortDisabled" (update)="updateSortOrder($event)" [isAscending]="isAscendingSort" />
               <select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
-                @for(field of allSortFields; track field.value) {
+                @for(field of filterFieldOptions(); track field.value) {
                   <option [value]="field.value">{{field.title}}</option>
                 }
               </select>
             </div>
-            <div class="col-md-4 col-sm-12" [ngClass]="{'mt-3': utilityService.getActiveBreakpoint() <= Breakpoint.Mobile}">
+
-              <label for="filter-name" class="form-label">{{t('filter-name-label')}}</label>
+            @if (filterSettings().supportsSmartFilter) {
-              <input id="filter-name" type="text" class="form-control" formControlName="name">
+              <div class="col-md-4 col-sm-12" [ngClass]="{'mt-3': utilityService.getActiveBreakpoint() <= Breakpoint.Mobile}">
-            </div>
+                <label for="filter-name" class="form-label">{{t('filter-name-label')}}</label>
+                <input id="filter-name" type="text" class="form-control" formControlName="name">
+              </div>
+            }
+
 
             @if (utilityService.getActiveBreakpoint() > Breakpoint.Tablet) {
               <ng-container [ngTemplateOutlet]="buttons"></ng-container>

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

@@ -11,22 +11,21 @@ import {
   input,
   Input,
   OnInit,
-  Output
+  Output,
+  Signal
 } from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NgbCollapse} from '@ng-bootstrap/ng-bootstrap';
 import {Breakpoint, UtilityService} from '../shared/_services/utility.service';
 import {Library} from '../_models/library/library';
-import {allSeriesSortFields, FilterEvent, FilterItem} from '../_models/metadata/series-filter';
+import {FilterEvent, FilterItem} from '../_models/metadata/series-filter';
 import {ToggleService} from '../_services/toggle.service';
 import {FilterV2} from '../_models/metadata/v2/filter-v2';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {DrawerComponent} from '../shared/drawer/drawer.component';
-import {AsyncPipe, NgClass, NgTemplateOutlet} from '@angular/common';
+import {AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet} from '@angular/common';
 import {translate, TranslocoModule, TranslocoService} from "@jsverse/transloco";
-import {SortFieldPipe} from "../_pipes/sort-field.pipe";
 import {MetadataBuilderComponent} from "./_components/metadata-builder/metadata-builder.component";
-import {FilterField} from "../_models/metadata/v2/filter-field";
 import {FilterService} from "../_services/filter.service";
 import {ToastrService} from "ngx-toastr";
 import {animate, style, transition, trigger} from "@angular/animations";
@@ -54,7 +53,7 @@ import {FilterUtilitiesService} from "../shared/_services/filter-utilities.servi
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgTemplateOutlet, DrawerComponent,
     ReactiveFormsModule, FormsModule, AsyncPipe, TranslocoModule,
-    MetadataBuilderComponent, NgClass, SortButtonComponent]
+    MetadataBuilderComponent, NgClass, SortButtonComponent, JsonPipe]
 })
 export class MetadataFilterComponent<TFilter extends number = number, TSort extends number = number> implements OnInit {
 
@@ -67,12 +66,6 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
   protected readonly toggleService = inject(ToggleService);
   protected readonly translocoService = inject(TranslocoService);
   protected readonly filterUtilitiesService = inject(FilterUtilitiesService);
-  private readonly sortFieldPipe = new SortFieldPipe(this.translocoService);
-
-  protected readonly allSortFields = allSeriesSortFields.map(f => {
-    return {title: this.sortFieldPipe.transform(f), value: f};
-  }).sort((a, b) => a.title.localeCompare(b.title));
-
 
   /**
    * This toggles the opening/collapsing of the metadata filter code
@@ -97,22 +90,22 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
   updateApplied: number = 0;
 
   fullyLoaded: boolean = false;
-  filterV2: FilterV2<FilterField> | undefined;
+  filterV2: FilterV2<TFilter, TSort> | undefined;
-  sortFieldOptions = computed(() => {
+  sortFieldOptions: Signal<{title: string, value: number}[]> = computed(() => []);
-    return this.filterUtilitiesService.getSortFields(this.filterSettings().type);
+  filterFieldOptions: Signal<{title: string, value: number}[]> = computed(() => []);
-  });
-  filterFieldOptions = computed(() => {
-    return this.filterUtilitiesService.getFilterFields(this.filterSettings().type);
-  });
-
 
   constructor() {
     effect(() => {
-      console.log('setting type: ', this.filterSettings().type);
+      const settings = this.filterSettings();
+      if (settings?.presetsV2) {
+        this.filterV2 = this.deepClone(settings.presetsV2);
+        this.cdRef.markForCheck();
+      }
     })
   }
 
 
+
   ngOnInit(): void {
     if (this.filterOpen) {
       this.filterOpen.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(openState => {
@@ -123,6 +116,15 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
     }
 
 
+    this.filterFieldOptions = computed(() => {
+      return this.filterUtilitiesService.getFilterFields(this.filterSettings().type);
+    });
+
+    this.sortFieldOptions = computed(() => {
+      return this.filterUtilitiesService.getSortFields(this.filterSettings().type);
+    });
+
+
 
     this.loadFromPresetsAndSetup();
   }
@@ -159,7 +161,8 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
     return clonedObj;
   }
 
-  handleFilters(filter: FilterV2<FilterField>) {
+  handleFilters(filter: FilterV2<TFilter, TSort>) {
+    console.log('handleFilters', filter);
     this.filterV2 = filter;
   }
 
@@ -167,31 +170,37 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
   loadFromPresetsAndSetup() {
     this.fullyLoaded = false;
 
-    this.filterV2 = this.deepClone(this.filterSettings().presetsV2);
+    const currentFilterSettings = this.filterSettings();
+    console.log('BUG HERE filterSettings: ', currentFilterSettings);
+    this.filterV2 = this.deepClone(currentFilterSettings.presetsV2);
 
-    const defaultSortField = this.sortFieldOptions()[0];
+    console.log('preset: ', currentFilterSettings.presetsV2);
+
+    const defaultSortField = this.sortFieldOptions()[0].value;
 
     this.sortGroup = new FormGroup({
       sortField: new FormControl({value: this.filterV2?.sortOptions?.sortField || defaultSortField, disabled: this.filterSettings().sortDisabled}, []),
       limitTo: new FormControl(this.filterV2?.limitTo || 0, []),
       name: new FormControl(this.filterV2?.name || '', [])
     });
+
     if (this.filterSettings()?.presetsV2?.sortOptions) {
       this.isAscendingSort = this.filterSettings()?.presetsV2?.sortOptions!.isAscending || true;
     }
 
+    this.cdRef.markForCheck();
 
     this.sortGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-    if (this.filterV2?.sortOptions === null) {
+      if (this.filterV2?.sortOptions === null) {
-      this.filterV2.sortOptions = {
+        this.filterV2.sortOptions = {
-        isAscending: this.isAscendingSort,
+          isAscending: this.isAscendingSort,
-        sortField: parseInt(this.sortGroup.get('sortField')?.value, 10)
+          sortField: parseInt(this.sortGroup.get('sortField')?.value, 10) as TSort
-      };
+        };
-    }
+      }
-    this.filterV2!.sortOptions!.sortField = parseInt(this.sortGroup.get('sortField')?.value, 10);
+      this.filterV2!.sortOptions!.sortField = parseInt(this.sortGroup.get('sortField')?.value, 10) as TSort;
-    this.filterV2!.limitTo = Math.max(parseInt(this.sortGroup.get('limitTo')?.value || '0', 10), 0);
+      this.filterV2!.limitTo = Math.max(parseInt(this.sortGroup.get('limitTo')?.value || '0', 10), 0);
-    this.filterV2!.name = this.sortGroup.get('name')?.value || '';
+      this.filterV2!.name = this.sortGroup.get('name')?.value || '';
-    this.cdRef.markForCheck();
+      this.cdRef.markForCheck();
     });
 
     this.fullyLoaded = true;
@@ -204,7 +213,7 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
     this.isAscendingSort = isAscending;
 
     if (this.filterV2?.sortOptions === null) {
-      const defaultSortField = this.sortFieldOptions()[0];
+      const defaultSortField = this.sortFieldOptions()[0].value as TSort;
 
       this.filterV2.sortOptions = {
         isAscending: this.isAscendingSort,

UI/Web/src/app/shared/_services/filter-utilities.service.ts

@@ -14,7 +14,15 @@ import {map, tap} from "rxjs/operators";
 import {Observable, of, switchMap} from "rxjs";
 import {allPersonFilterFields, PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
 import {allPersonSortFields} from "../../_models/metadata/v2/person-sort-field";
-import {ValidFilterEntity} from "../../metadata-filter/filter-settings";
+import {
+  FilterSettingsBase,
+  PersonFilterSettings,
+  SeriesFilterSettings,
+  ValidFilterEntity
+} from "../../metadata-filter/filter-settings";
+import {SortFieldPipe} from "../../_pipes/sort-field.pipe";
+import {GenericFilterFieldPipe} from "../../_pipes/generic-filter-field.pipe";
+import {TranslocoService} from "@jsverse/transloco";
 
 
 @Injectable({
@@ -25,6 +33,10 @@ export class FilterUtilitiesService {
   private readonly router = inject(Router);
   private readonly metadataService = inject(MetadataService);
   private readonly http = inject(HttpClient);
+  private readonly translocoService = inject(TranslocoService);
+
+  private readonly sortFieldPipe = new SortFieldPipe(this.translocoService);
+  private readonly genericFilterFieldPipe = new GenericFilterFieldPipe();
 
   private readonly apiUrl = environment.apiUrl;
 
@@ -35,7 +47,7 @@ export class FilterUtilitiesService {
   decodeFilter(encodedFilter: string) {
     return this.http.post<FilterV2<number>>(this.apiUrl + 'filter/decode', {encodedFilter}).pipe(map(filter => {
       if (filter == null) {
-        filter = this.metadataService.createDefaultFilterDto();
+        filter = this.metadataService.createDefaultFilterDto('series');
         filter.statements.push(this.createSeriesV2DefaultStatement());
       }
 
@@ -49,9 +61,9 @@ export class FilterUtilitiesService {
     }));
   }
 
-  filterPresetsFromUrl(snapshot: ActivatedRouteSnapshot): Observable<FilterV2<number>> {
+  filterPresetsFromUrl<TFilter extends number>(snapshot: ActivatedRouteSnapshot, entityType: ValidFilterEntity, defaultStatement: FilterStatement<TFilter> | null = null): Observable<FilterV2<number>> {
-    const filter = this.metadataService.createDefaultFilterDto();
+    const filter = this.metadataService.createDefaultFilterDto(entityType);
-    filter.statements.push(this.createSeriesV2DefaultStatement());
+    filter.statements.push(defaultStatement ?? this.createSeriesV2DefaultStatement());
     if (!window.location.href.includes('?')) return of(filter);
 
     return this.decodeFilter(window.location.href.split('?')[1]);
@@ -66,7 +78,7 @@ export class FilterUtilitiesService {
    */
   applyFilter(page: Array<any>, filter: FilterField, comparison: FilterComparison, value: string) {
     const dto = this.createSeriesV2Filter();
-    dto.statements.push(this.metadataService.createDefaultFilterStatement(filter, comparison, value + ''));
+    dto.statements.push(this.metadataService.createFilterStatement(filter, comparison, value + ''));
 
     return this.encodeFilter(dto).pipe(switchMap(encodedFilter => {
       return this.router.navigateByUrl(page.join('/') + '?' + encodedFilter);
@@ -125,22 +137,30 @@ export class FilterUtilitiesService {
   getSortFields<T extends number>(type: ValidFilterEntity) {
     switch (type) {
       case 'series':
-        return allSeriesSortFields as unknown as T[];
+        return allSeriesSortFields.map(f => {
+          return {title: this.sortFieldPipe.transform(f, type), value: f};
+        }).sort((a, b) => a.title.localeCompare(b.title)) as unknown as {title: string, value: T}[];
       case 'person':
-        return allPersonSortFields as unknown as T[];
+        return allPersonSortFields.map(f => {
+          return {title: this.sortFieldPipe.transform(f, type), value: f};
+        }).sort((a, b) => a.title.localeCompare(b.title)) as unknown as {title: string, value: T}[];
       default:
-        return [] as T[];
+        return [] as {title: string, value: T}[];
     }
   }
 
-  getFilterFields<T extends number>(type: ValidFilterEntity) {
+  getFilterFields<T extends number>(type: ValidFilterEntity): {title: string, value: T}[] {
     switch (type) {
       case 'series':
-        return allSeriesFilterFields as unknown as T[];
+        return allSeriesFilterFields.map(f => {
+          return {title: this.genericFilterFieldPipe.transform(f, type), value: f};
+        }).sort((a, b) => a.title.localeCompare(b.title)) as unknown as {title: string, value: T}[];
       case 'person':
-        return allPersonFilterFields as unknown as T[];
+        return allPersonFilterFields.map(f => {
+          return {title: this.genericFilterFieldPipe.transform(f, type), value: f};
+        }).sort((a, b) => a.title.localeCompare(b.title)) as unknown as {title: string, value: T}[];
       default:
-        return [] as T[];
+        return [] as {title: string, value: T}[];
     }
   }
 
@@ -152,4 +172,161 @@ export class FilterUtilitiesService {
         return PersonFilterField.Role as unknown as T;
     }
   }
+
+  /**
+   * Returns the appropriate Dropdown Fields based on the entity type
+   * @param type
+   */
+  getDropdownFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.PublicationStatus, FilterField.Languages, FilterField.AgeRating,
+          FilterField.Translators, FilterField.Characters, FilterField.Publisher,
+          FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
+          FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
+          FilterField.Writers, FilterField.Genres, FilterField.Libraries,
+          FilterField.Formats, FilterField.CollectionTags, FilterField.Tags,
+          FilterField.Imprint, FilterField.Team, FilterField.Location
+        ] as unknown as T[];
+      case 'person':
+        return [
+          PersonFilterField.Role
+        ] as unknown as T[];
+    }
+  }
+
+  getStringFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.SeriesName, FilterField.Summary, FilterField.Path, FilterField.FilePath, PersonFilterField.Name
+        ] as unknown as T[];
+      case 'person':
+        return [
+          PersonFilterField.Name
+        ] as unknown as T[];
+    }
+  }
+
+  getNumberFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.ReadTime, FilterField.ReleaseYear, FilterField.ReadProgress,
+          FilterField.UserRating, FilterField.AverageRating, FilterField.ReadLast
+        ] as unknown as T[];
+      case 'person':
+        return [
+          PersonFilterField.ChapterCount, PersonFilterField.SeriesCount
+        ] as unknown as T[];
+    }
+  }
+
+  getBooleanFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.WantToRead
+        ] as unknown as T[];
+      case 'person':
+        return [
+
+        ] as unknown as T[];
+    }
+  }
+
+  getDateFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.ReadingDate
+        ] as unknown as T[];
+      case 'person':
+        return [
+
+        ] as unknown as T[];
+    }
+  }
+
+  getNumberFieldsThatIncludeDateComparisons<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.ReleaseYear
+        ] as unknown as T[];
+      case 'person':
+        return [
+
+        ] as unknown as T[];
+    }
+  }
+
+  getDropdownFieldsThatIncludeDateComparisons<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.AgeRating
+        ] as unknown as T[];
+      case 'person':
+        return [
+
+        ] as unknown as T[];
+    }
+  }
+
+  getDropdownFieldsWithoutMustContains<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.Libraries, FilterField.Formats, FilterField.AgeRating, FilterField.PublicationStatus
+        ] as unknown as T[];
+      case 'person':
+        return [
+
+        ] as unknown as T[];
+    }
+  }
+
+  getDropdownFieldsThatIncludeNumberComparisons<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.AgeRating
+        ] as unknown as T[];
+      case 'person':
+        return [
+
+        ] as unknown as T[];
+    }
+  }
+
+  getFieldsThatShouldIncludeIsEmpty<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return [
+          FilterField.Summary, FilterField.UserRating, FilterField.Genres,
+          FilterField.CollectionTags, FilterField.Tags, FilterField.ReleaseYear,
+          FilterField.Translators, FilterField.Characters, FilterField.Publisher,
+          FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
+          FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
+          FilterField.Writers, FilterField.Imprint, FilterField.Team,
+          FilterField.Location
+        ] as unknown as T[];
+      case 'person':
+        return [] as unknown as T[];
+    }
+  }
+
+  getDefaultSettings(entityType: ValidFilterEntity | "other" | undefined): FilterSettingsBase<any, any> {
+    if (entityType === 'other' || entityType === undefined) {
+      // It doesn't matter, return series type
+      return new SeriesFilterSettings();
+    }
+
+    if (entityType == 'series') return new SeriesFilterSettings();
+    if (entityType == 'person') return new PersonFilterSettings();
+
+    return new SeriesFilterSettings();
+  }
 }

UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.ts

@@ -22,7 +22,7 @@ import {SeriesRemovedEvent} from 'src/app/_models/events/series-removed-event';
 import {JumpKey} from 'src/app/_models/jumpbar/jump-key';
 import {Pagination} from 'src/app/_models/pagination';
 import {Series} from 'src/app/_models/series';
-import {FilterEvent} from 'src/app/_models/metadata/series-filter';
+import {FilterEvent, SortField} from 'src/app/_models/metadata/series-filter';
 import {Action, ActionItem} from 'src/app/_services/action-factory.service';
 import {ActionService} from 'src/app/_services/action.service';
 import {ImageService} from 'src/app/_services/image.service';
@@ -41,6 +41,9 @@ import {translate, TranslocoDirective} from "@jsverse/transloco";
 import {FilterV2} from "../../../_models/metadata/v2/filter-v2";
 import {FilterField} from "../../../_models/metadata/v2/filter-field";
 import {SeriesFilterSettings} from "../../../metadata-filter/filter-settings";
+import {MetadataService} from "../../../_services/metadata.service";
+import {FilterStatement} from "../../../_models/metadata/v2/filter-statement";
+import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
 
 
 @Component({
@@ -55,6 +58,7 @@ export class WantToReadComponent implements OnInit, AfterContentChecked {
   @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
   @ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
   private readonly destroyRef = inject(DestroyRef);
+  private readonly metadataService = inject(MetadataService);
 
   isLoading: boolean = true;
   series: Array<Series> = [];
@@ -108,13 +112,23 @@ export class WantToReadComponent implements OnInit, AfterContentChecked {
       this.router.routeReuseStrategy.shouldReuseRoute = () => false;
       this.titleService.setTitle('Kavita - ' + translate('want-to-read.title'));
 
-      this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot).subscribe(filter => {
+
-        this.filter = filter;
+      this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
+        this.filter = data['filter'] as FilterV2<FilterField, SortField>;
+
+        const defaultStmt = {field: FilterField.WantToRead, value: 'true', comparison: FilterComparison.Equal} as FilterStatement<FilterField>;
+
+        if (this.filter == null) {
+          this.filter = this.metadataService.createDefaultFilterDto('series');
+          this.filter.statements.push(defaultStmt);
+        }
+
 
         this.filterActiveCheck = this.filterUtilityService.createSeriesV2Filter();
-        this.filterActiveCheck!.statements.push(this.filterUtilityService.createSeriesV2DefaultStatement());
+        this.filterActiveCheck!.statements.push(defaultStmt);
         this.filterSettings.presetsV2 =  this.filter;
 
+
         this.cdRef.markForCheck();
       });
 

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

@@ -2085,7 +2085,10 @@
         "release-year": "Release Year",
         "read-progress": "Last Read",
         "average-rating": "Average Rating",
-        "random": "Random"
+        "random": "Random",
+        "person-name": "Name",
+        "person-series-count": "Series Count",
+        "person-chapter-count": "Chapter Count"
     },
 
     "edit-series-modal": {
@@ -2608,6 +2611,13 @@
         "location": "In {{value}} location"
     },
 
+    "generic-filter-field-pipe": {
+        "person-role": "Role",
+        "person-name": "Name",
+        "person-series-count": "Series Count",
+        "person-chapter-count": "Chapter Count"
+    },
+
 
     "toasts": {
         "regen-cover": "A job has been enqueued to regenerate the cover image",