feat(blacklist): Automatically add media with blacklisted tags to the blacklist (#1306)

* feat(blacklist): add blacktag settings to main settings page

* feat(blacklist): create blacktag logic and infrastructure

* feat(blacklist): add scheduling for blacktags job

* feat(blacklist): create blacktag ui badge for blacklist

* docs(blacklist): document blacktags in using-jellyseerr

* fix(blacklist): batch blacklist and media db removes to avoid expression tree too large error

* feat(blacklist): allow easy import and export of blacktag configuration

* fix(settings): don't copy the API key every time you press enter on the main settings

* fix(blacklist): move filter inline with page title to match all the other pages

* feat(blacklist): allow filtering between manually blacklisted and automatically blacklisted entries

* docs(blacklist): reword blacktag documentation a little

* refactor(blacklist): remove blacktag settings from public settings interfaces

There's no reason for it to be there

* refactor(blacklist): remove unused variable from processResults in blacktagsProcessor

* refactor(blacklist): change all instances of blacktag to blacklistedTag and update doc to match

* docs(blacklist): update general documentation for blacklisted tag settings

* fix(blacklist): update setting use of "blacklisted tag" to match between modals

* perf(blacklist): remove media type constraint from existing blacklist entry query

Doesn't make sense to keep it because tmdbid has a unique constraint on it

* fix(blacklist): remove whitespace line causing prettier to fail in CI

* refactor(blacklist): swap out some != and == for !s and _s

* fix(blacklist): merge back CopyButton changes, disable button when there's nothing to copy

* refactor(blacklist): use axios instead of fetch for blacklisted tag queries

* style(blacklist): use templated axios types and remove redundant try-catches

src/components/Blacklist/index.tsx

@@ -1,3 +1,4 @@
+import BlacklistedTagsBadge from '@app/components/BlacklistedTagsBadge';
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
@@ -14,6 +15,7 @@ import defineMessages from '@app/utils/defineMessages';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
+  FunnelIcon,
   MagnifyingGlassIcon,
   TrashIcon,
 } from '@heroicons/react/24/solid';
@@ -42,8 +44,17 @@ const messages = defineMessages('components.Blacklist', {
   blacklistdate: 'date',
   blacklistedby: '{date} by {user}',
   blacklistNotFoundError: '<strong>{title}</strong> is not blacklisted.',
+  filterManual: 'Manual',
+  filterBlacklistedTags: 'Blacklisted Tags',
+  showAllBlacklisted: 'Show All Blacklisted Media',
 });
 
+enum Filter {
+  ALL = 'all',
+  MANUAL = 'manual',
+  BLACKLISTEDTAGS = 'blacklistedTags',
+}
+
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
   return (movie as MovieDetails).title !== undefined;
 };
@@ -52,6 +63,7 @@ const Blacklist = () => {
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const [searchFilter, debouncedSearchFilter, setSearchFilter] =
     useDebouncedState('');
+  const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.MANUAL);
   const router = useRouter();
   const intl = useIntl();
 
@@ -64,9 +76,11 @@ const Blacklist = () => {
     error,
     mutate: revalidate,
   } = useSWR<BlacklistResultsResponse>(
-    `/api/v1/blacklist/?take=${currentPageSize}
-    &skip=${pageIndex * currentPageSize}
-    ${debouncedSearchFilter ? `&search=${debouncedSearchFilter}` : ''}`,
+    `/api/v1/blacklist/?take=${currentPageSize}&skip=${
+      pageIndex * currentPageSize
+    }&filter=${currentFilter}${
+      debouncedSearchFilter ? `&search=${debouncedSearchFilter}` : ''
+    }`,
     {
       refreshInterval: 0,
       revalidateOnFocus: false,
@@ -94,19 +108,52 @@ const Blacklist = () => {
   return (
     <>
       <PageTitle title={[intl.formatMessage(globalMessages.blacklist)]} />
-      <Header>{intl.formatMessage(globalMessages.blacklist)}</Header>
+      <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
+        <Header>{intl.formatMessage(globalMessages.blacklist)}</Header>
 
-      <div className="mt-2 flex flex-grow flex-col sm:flex-grow-0 sm:flex-row sm:justify-end">
-        <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 md:flex-grow-0">
-          <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
-            <MagnifyingGlassIcon className="h-6 w-6" />
-          </span>
-          <input
-            type="text"
-            className="rounded-r-only"
-            value={searchFilter}
-            onChange={(e) => searchItem(e)}
-          />
+        <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <FunnelIcon className="h-6 w-6" />
+            </span>
+            <select
+              id="filter"
+              name="filter"
+              onChange={(e) => {
+                setCurrentFilter(e.target.value as Filter);
+                router.push({
+                  pathname: router.pathname,
+                  query: router.query.userId
+                    ? { userId: router.query.userId }
+                    : {},
+                });
+              }}
+              value={currentFilter}
+              className="rounded-r-only"
+            >
+              <option value="all">
+                {intl.formatMessage(globalMessages.all)}
+              </option>
+              <option value="manual">
+                {intl.formatMessage(messages.filterManual)}
+              </option>
+              <option value="blacklistedTags">
+                {intl.formatMessage(messages.filterBlacklistedTags)}
+              </option>
+            </select>
+          </div>
+
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 md:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <MagnifyingGlassIcon className="h-6 w-6" />
+            </span>
+            <input
+              type="text"
+              className="rounded-r-only"
+              value={searchFilter}
+              onChange={(e) => searchItem(e)}
+            />
+          </div>
         </div>
       </div>
 
@@ -117,6 +164,16 @@ const Blacklist = () => {
           <span className="text-2xl text-gray-400">
             {intl.formatMessage(globalMessages.noresults)}
           </span>
+          {currentFilter !== Filter.ALL && (
+            <div className="mt-4">
+              <Button
+                buttonType="primary"
+                onClick={() => setCurrentFilter(Filter.ALL)}
+              >
+                {intl.formatMessage(messages.showAllBlacklisted)}
+              </Button>
+            </div>
+          )}
         </div>
       ) : (
         data.results.map((item: BlacklistItem) => {
@@ -352,7 +409,7 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
                       numeric="auto"
                     />
                   ),
-                  user: (
+                  user: item.user ? (
                     <Link href={`/users/${item.user.id}`}>
                       <span className="group flex items-center truncate">
                         <CachedImage
@@ -369,6 +426,14 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
                         </span>
                       </span>
                     </Link>
+                  ) : item.blacklistedTags ? (
+                    <span className="ml-1">
+                      <BlacklistedTagsBadge data={item} />
+                    </span>
+                  ) : (
+                    <span className="ml-1 truncate text-sm font-semibold">
+                      ???
+                    </span>
                   ),
                 })}
               </span>