✨ Subject type filter

app/reports/page-content.tsx

@@ -22,16 +22,15 @@ import { ModActionPanelQuick } from '../actions/ModActionPanel/QuickAction'
 import { ButtonGroup } from '@/common/buttons'
 import { SubjectTable } from 'components/subject/table'
 import { useTitle } from 'react-use'
-import { LanguagePicker } from '@/common/LanguagePicker'
 import { QueueSelector, QUEUE_NAMES } from '@/reports/QueueSelector'
 import { simpleHash, unique } from '@/lib/util'
 import { useEmitEvent } from '@/mod-event/helpers/emitEvent'
 import { useFluentReportSearchParams } from '@/reports/useFluentReportSearch'
 import { useLabelerAgent } from '@/shell/ConfigurationContext'
 import { WorkspacePanel } from 'components/workspace/Panel'
 import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
-import { EmbedTypePickerForModerationQueue } from '@/common/EmbedTypePicker'
 import { QUEUE_SEED } from '@/lib/constants'
+import QueueFilterPanel from '@/reports/QueueFilter/Panel'
 
 const TABS = [
   {
@@ -106,13 +105,15 @@ const ResolvedFilters = () => {
   const appealed = params.get('appealed')
 
   const updateParams = useCallback(
-    (key: string, newState: boolean) => {
+    (updates: Record<string, boolean>) => {
       const nextParams = new URLSearchParams(params)
-      if (nextParams.get(key) == `${newState}`) {
-        nextParams.delete(key)
-      } else {
-        nextParams.set(key, `${newState}`)
-      }
+      Object.entries(updates).forEach(([key, newState]) => {
+        if (nextParams.get(key) === `${newState}`) {
+          nextParams.delete(key)
+        } else {
+          nextParams.set(key, `${newState}`)
+        }
+      })
       router.push((pathname ?? '') + '?' + nextParams.toString())
     },
     [params, pathname, router],
@@ -126,20 +127,29 @@ const ResolvedFilters = () => {
         {
           id: 'takendown',
           text: 'Taken Down',
-          onClick: () => updateParams('takendown', true),
+          onClick: () => updateParams({ takendown: true }),
           isActive: takendown === 'true',
         },
         {
-          id: 'includeMuted',
-          text: 'Show Muted',
-          onClick: () => updateParams('includeMuted', true),
-          isActive: includeMuted === 'true',
-        },
-        {
-          id: 'onlyMuted',
-          text: 'Only Muted',
-          onClick: () => updateParams('onlyMuted', true),
-          isActive: onlyMuted === 'true',
+          id: 'mute',
+          text:
+            includeMuted === 'true'
+              ? 'Include Muted'
+              : onlyMuted === 'true'
+              ? 'Only Muted'
+              : 'Mutes',
+          onClick: () => {
+            // setting a param to it's current value toggles it off
+            // so we toggle off includeMuted and toggle on onlyMuted
+            if (includeMuted === 'true') {
+              updateParams({ includeMuted: true, onlyMuted: true })
+            } else if (onlyMuted === 'true') {
+              updateParams({ onlyMuted: true })
+            } else {
+              updateParams({ includeMuted: true })
+            }
+          },
+          isActive: includeMuted === 'true' || onlyMuted === 'true',
         },
         {
           id: 'appealed',
@@ -151,12 +161,12 @@ const ResolvedFilters = () => {
               : 'Appeals',
           onClick: () => {
             if (appealed === 'true') {
-              updateParams('appealed', false)
+              updateParams({ appealed: false })
             } else if (appealed === 'false') {
               // setting the same value toggles the param off
-              updateParams('appealed', false)
+              updateParams({ appealed: false })
             } else {
-              updateParams('appealed', true)
+              updateParams({ appealed: true })
             }
           },
           isActive: appealed === 'true' || appealed === 'false',
@@ -237,8 +247,7 @@ export const ReportsPageContent = () => {
       </SectionHeader>
       <div className="md:flex mt-2 mb-2 flex-row justify-between px-4 sm:px-6 lg:px-8">
         <div className="flex flex-row items-center gap-2">
-          <LanguagePicker />
-          <EmbedTypePickerForModerationQueue />
+          <QueueFilterPanel />
         </div>
         <ResolvedFilters />
       </div>
@@ -294,6 +303,8 @@ function useModerationQueueQuery() {
   const tags = params.get('tags')
   const excludeTags = params.get('excludeTags')
   const queueName = params.get('queueName')
+  const subjectType = params.get('subjectType')
+  const collections = params.get('collections')
   const { sortField, sortDirection } = getSortParams(params)
   const { lastReviewedBy, subject, reporters, includeAllUserRecords } =
     useFluentReportSearchParams()
@@ -316,6 +327,8 @@ function useModerationQueueQuery() {
         queueName,
         includeMuted,
         onlyMuted,
+        subjectType,
+        collections,
       },
     ],
     queryFn: async ({ pageParam }) => {
@@ -329,6 +342,17 @@ function useModerationQueueQuery() {
 
       if (subject) {
         queryParams.subject = subject
+      } else {
+        if (subjectType) {
+          queryParams.subjectType = subjectType
+        }
+
+        if (subjectType === 'record') {
+          const collectionNames = collections?.split(',')
+          if (collectionNames?.length) {
+            queryParams.collections = collectionNames
+          }
+        }
       }
 
       if (takendown) {