✨ Add embed type filter for moderation queue

app/reports/page-content.tsx

@@ -29,6 +29,10 @@ import { useFluentReportSearchParams } from '@/reports/useFluentReportSearch'
 import { useLabelerAgent } from '@/shell/ConfigurationContext'
 import { WorkspacePanel } from 'components/workspace/Panel'
 import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
+import {
+  EmbedTypePicker,
+  EmbedTypePickerForModerationQueue,
+} from '@/common/EmbedTypePicker'
 
 const TABS = [
   {
@@ -233,7 +237,10 @@ export const ReportsPageContent = () => {
         </div>
       </SectionHeader>
       <div className="md:flex mt-2 mb-2 flex-row justify-between px-4 sm:px-6 lg:px-8">
-        <LanguagePicker />
+        <div className='flex flex-row items-center gap-2'>
+          <LanguagePicker />
+          <EmbedTypePickerForModerationQueue />
+        </div>
         <ResolvedFilters />
       </div>
       <SubjectTable

components/common/Dropdown.tsx

@@ -46,7 +46,7 @@ export const Dropdown = ({
           <Menu.Items
             className={classNames(
               rightAligned ? 'right-0' : '',
-              'absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
+              'absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-800 py-1 shadow-lg dark:shadow-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none',
             )}
           >
             {items.map((item) => (

components/common/EmbedTypePicker.tsx

@@ -0,0 +1,86 @@
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { Dropdown } from './Dropdown'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+
+const EmbedTypeTitles = {
+  image: 'Image',
+  video: 'Video',
+  external: 'External',
+}
+
+export const EmbedTypePicker = ({
+  embedType,
+  setEmbedType,
+}: {
+  embedType?: string
+  setEmbedType: (embedType?: string) => void
+}) => {
+  return (
+    <Dropdown
+      className="inline-flex justify-center items-center rounded-md text-sm dark:text-gray-200 text-gray-700"
+      items={[
+        {
+          id: 'default',
+          text: 'No embed filter',
+          onClick: () => setEmbedType(),
+        },
+        {
+          id: 'image',
+          text: EmbedTypeTitles['image'],
+          onClick: () => setEmbedType('image'),
+        },
+        {
+          id: 'video',
+          text: EmbedTypeTitles['video'],
+          onClick: () => setEmbedType('video'),
+        },
+        {
+          id: 'external',
+          text: EmbedTypeTitles['external'],
+          onClick: () => setEmbedType('external'),
+        },
+      ]}
+      data-cy="lang-selector"
+    >
+      {embedType ? EmbedTypeTitles[embedType] : 'Embed type'}
+
+      <ChevronDownIcon
+        className="h-4 w-4 dark:text-gray-50"
+        aria-hidden="true"
+      />
+    </Dropdown>
+  )
+}
+
+export const EmbedTypePickerForModerationQueue = () => {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const tagsParam = searchParams.get('tags')
+
+  const tags = tagsParam?.split(',') || []
+
+  const includedEmbedTypes = tags
+    .filter((tag) => tag.startsWith('embed:'))
+    .map((t) => t.replace('embed:', ''))
+
+  const setEmbedType = (embedType?: string) => {
+    const nextParams = new URLSearchParams(searchParams)
+
+    if (embedType) {
+      nextParams.set('tags', `embed:${embedType}`)
+    } else {
+      nextParams.delete('tags')
+    }
+
+    router.push((pathname ?? '') + '?' + nextParams.toString())
+  }
+
+  return (
+    <EmbedTypePicker
+      embedType={includedEmbedTypes[0]}
+      setEmbedType={setEmbedType}
+    />
+  )
+}