Move unknown series queue items to filter instead of option

frontend/src/Activity/History/historyOptionsStore.ts

@@ -12,7 +12,6 @@ export type HistoryOptions = PageableOptions;
 const { useOptions, useOption, setOptions, setOption, setSort } =
   createOptionsStore<HistoryOptions>('history_options', () => {
     return {
-      includeUnknownSeriesItems: true,
       pageSize: 20,
       selectedFilterKey: 'all',
       sortKey: 'time',

frontend/src/Activity/Queue/Queue.tsx

@@ -37,7 +37,6 @@ import {
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
 import QueueFilterModal from './QueueFilterModal';
-import QueueOptions from './QueueOptions';
 import {
   setQueueOption,
   setQueueOptions,
@@ -252,7 +251,6 @@ function QueueContent() {
               pageSize={pageSize}
               sortKey={sortKey}
               sortDirection={sortDirection}
-              optionsComponent={QueueOptions}
               onTableOptionChange={handleTableOptionChange}
               onSelectAllChange={handleSelectAllChange}
               onSortPress={handleSortPress}
@@ -330,7 +328,6 @@ function QueueContent() {
             columns={columns}
             pageSize={pageSize}
             maxPageSize={200}
-            optionsComponent={QueueOptions}
             onTableOptionChange={handleTableOptionChange}
           >
             <PageToolbarButton

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,46 +0,0 @@
-import React, { useCallback } from 'react';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
-import { inputTypes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import {
-  QueueOptions as QueueOptionsType,
-  setQueueOption,
-  useQueueOption,
-} from './queueOptionsStore';
-import useQueue from './useQueue';
-
-function QueueOptions() {
-  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
-  const { goToPage } = useQueue();
-
-  const handleOptionChange = useCallback(
-    ({ name, value }: OptionChanged<QueueOptionsType>) => {
-      setQueueOption(name, value);
-
-      if (name === 'includeUnknownSeriesItems') {
-        goToPage(1);
-      }
-    },
-    [goToPage]
-  );
-
-  return (
-    <FormGroup>
-      <FormLabel>{translate('ShowUnknownSeriesItems')}</FormLabel>
-
-      <FormInputGroup
-        type={inputTypes.CHECK}
-        name="includeUnknownSeriesItems"
-        value={includeUnknownSeriesItems}
-        helpText={translate('ShowUnknownSeriesItemsHelpText')}
-        // @ts-expect-error - The typing for inputs needs more work
-        onChange={handleOptionChange}
-      />
-    </FormGroup>
-  );
-}
-
-export default QueueOptions;

frontend/src/Activity/Queue/Status/useQueueStatus.ts

@@ -1,5 +1,4 @@
 import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import { useQueueOption } from '../queueOptionsStore';
 
 export interface QueueStatus {
   totalCount: number;
@@ -12,13 +11,8 @@ export interface QueueStatus {
 }
 
 export default function useQueueStatus() {
-  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
-
   const { data } = useApiQuery<QueueStatus>({
     path: '/queue/status',
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
   });
 
   if (!data) {
@@ -29,26 +23,11 @@ export default function useQueueStatus() {
     };
   }
 
-  const {
-    errors,
-    warnings,
-    unknownErrors,
-    unknownWarnings,
-    count,
-    totalCount,
-  } = data;
-
-  if (includeUnknownSeriesItems) {
-    return {
-      count: totalCount,
-      errors: errors || unknownErrors,
-      warnings: warnings || unknownWarnings,
-    };
-  }
+  const { errors, warnings, unknownErrors, unknownWarnings, totalCount } = data;
 
   return {
-    count,
-    errors,
-    warnings,
+    count: totalCount,
+    errors: errors || unknownErrors,
+    warnings: warnings || unknownWarnings,
   };
 }

frontend/src/Activity/Queue/queueOptionsStore.ts

@@ -13,14 +13,12 @@ interface QueueRemovalOptions {
 }
 
 export interface QueueOptions extends PageableOptions {
-  includeUnknownSeriesItems: boolean;
   removalOptions: QueueRemovalOptions;
 }
 
 const { useOptions, useOption, setOptions, setOption, setSort } =
   createOptionsStore<QueueOptions>('queue_options', () => {
     return {
-      includeUnknownSeriesItems: true,
       pageSize: 20,
       selectedFilterKey: 'all',
       sortKey: 'time',

frontend/src/Activity/Queue/useQueue.ts

@@ -22,6 +22,17 @@ export const FILTERS: Filter[] = [
     label: () => translate('All'),
     filters: [],
   },
+  {
+    key: 'excludeUnknownSeriesItems',
+    label: () => translate('ExcludeUnknownSeriesItems'),
+    filters: [
+      {
+        key: 'includeUnknownSeriesItems',
+        value: [false],
+        type: 'equal',
+      },
+    ],
+  },
 ];
 
 export const FILTER_BUILDER: FilterBuilderProp<Queue>[] = [
@@ -55,17 +66,18 @@ export const FILTER_BUILDER: FilterBuilderProp<Queue>[] = [
     type: 'equal',
     valueType: filterBuilderValueTypes.QUEUE_STATUS,
   },
+  {
+    name: 'includeUnknownSeriesItems',
+    label: () => translate('UnknownSeriesItems'),
+    type: 'equal',
+    valueType: filterBuilderValueTypes.BOOL,
+  },
 ];
 
 const useQueue = () => {
   const { page, goToPage } = usePage('queue');
-  const {
-    includeUnknownSeriesItems,
-    pageSize,
-    selectedFilterKey,
-    sortKey,
-    sortDirection,
-  } = useQueueOptions();
+  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
+    useQueueOptions();
   const customFilters = useCustomFiltersList('queue');
 
   const filters = useMemo(() => {
@@ -77,9 +89,6 @@ const useQueue = () => {
     page,
     pageSize,
     filters,
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
     sortKey,
     sortDirection,
     queryOptions: {