+ {/* Header */}
+
+ )
+}
diff --git a/app/queues/page.tsx b/app/queues/page.tsx
new file mode 100644
index 0000000..f1e1bb7
--- /dev/null
+++ b/app/queues/page.tsx
@@ -0,0 +1,11 @@
+'use client'
+import { Suspense } from 'react'
+import { QueuesPageContent } from './page-content'
+
+export default function QueuesPage() {
+ return (
+
+
+
+ {/* Stats */}
+
+
+ + Queues +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Queue list */}
+
+ {isError && (
+
+
+ Failed to load queues.{' '}
+
+
+ )}
+
+ {/* Report metadata */}
+
+ Are you sure you want to unassign yourself from this report? You
+ will no longer be the moderator handling it.
+
+ }
+ confirmButtonText={isUnassigning ? 'Unassigning…' : 'Unassign'}
+ confirmButtonDisabled={isUnassigning}
+ error={
+ unassignError
+ ? (unassignError as any)?.message ?? 'Failed to unassign'
+ : undefined
+ }
+ onConfirm={() => unassignFromMe(report.id)}
+ />
+
+ )
+}
+
+export function ReportDetailPageContent() {
+ const params = useParams()
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const pathname = usePathname()
+ const reportId = Number(params.id)
+ const labelerAgent = useLabelerAgent()
+ const queryClient = useQueryClient()
+ const emitEvent = useEmitEvent()
+ const { toggleWorkspacePanel, isWorkspaceOpen } = useWorkspaceOpener()
+
+ const quickOpenParam = searchParams.get('quickOpen') ?? ''
+ const setQuickActionPanelSubject = (subject: string) => {
+ const nextParams = new URLSearchParams(searchParams)
+ if (!subject) {
+ nextParams.delete('quickOpen')
+ } else {
+ nextParams.set('quickOpen', subject)
+ }
+ router.push((pathname ?? '') + '?' + nextParams.toString())
+ }
+
+ const cachedReport = useMemo(
+ () => findReportInCache(queryClient, reportId),
+ [reportId],
+ )
+
+ const { prevId, nextId } = useMemo(
+ () => findAdjacentReportsInCache(queryClient, reportId),
+ [reportId],
+ )
+
+ // Register this session as a viewer (temporary, non-permanent assignment).
+ useEffect(() => {
+ labelerAgent.tools.ozone.report
+ .assignModerator({ reportId })
+ .catch(() => {})
+ }, [reportId])
+
+ // If no cached report exists, getReport will be called and returns fresh assignment data.
+ // In that case we skip the initial assignment poll and start it after the first interval.
+ const calledGetReport = !cachedReport
+
+ const { data: report, isLoading } = useQuery({
+ queryKey: ['report', reportId],
+ queryFn: async () => {
+ const { data } = await labelerAgent.tools.ozone.report.getReport({
+ id: reportId,
+ })
+ return data
+ },
+ initialData: cachedReport ?? undefined,
+ })
+
+ const [subject, setSubject] = useState(report?.subject.subject ?? '')
+
+ const reportSubject = report?.subject.subject
+ useEffect(() => {
+ if (reportSubject && !subject) {
+ setSubject(reportSubject)
+ }
+ }, [reportSubject, subject])
+
+ const { viewers } = useAssignmentPolling({
+ reportId,
+ hasReport: !!report,
+ initialAssigneeDid: report?.assignment?.did,
+ skipInitialPoll: calledGetReport,
+ })
+
+ if (!report && isLoading) {
+ return (
+
+
+
+ {/* Reporter */}
+
+
+ Reporter:
+
+ {report.reporter.status && (
+
+
+ {/* Comment */}
+ {!!report.comment && (
+
+
+ )}
+
+ {/* Assignment */}
+ + Comment +
+
+ {assignment ? (
+
+
+
+ setUnassignConfirmOpen(true)}
+ >
+ Unassign
+
+ )}
+
+ ) : (
+
+ {moderator ? (
+
+ {isAssignedToMe && (
+
+ Assigned to{' '}
+ {onClickDid ? (
+
+ ) : (
+ assignment.did
+ )}
+
+ )}
+
+ assignToMe(report.id)}
+ >
+ {isPending ? 'Assigning…' : 'Assign to me'}
+
+ {!!error && (
+
+ {(error as any)?.message ?? 'Failed to assign'}
+
+ )}
+
+ )}
+
+
+ )
+ }
+
+ if (!report && !isLoading) {
+ return (
+ + Loading report... +
+
+
+ )
+ }
+
+ return (
+ Report not found.
+
+ {
+ await emitEvent(
+ hydrateModToolInfo(vals, ActionPanelNames.QuickAction),
+ )
+ queryClient.invalidateQueries({ queryKey: ['report', reportId] })
+ queryClient.invalidateQueries({ queryKey: ['reportActivities', reportId] })
+ }}
+ onCancel={() => router.push('/reports')}
+ onClickDid={setQuickActionPanelSubject}
+ />
+ )}
+ setQuickActionPanelSubject('')}
+ setSubject={setQuickActionPanelSubject}
+ subject={quickOpenParam}
+ subjectOptions={subject ? [subject] : [quickOpenParam]}
+ isInitialLoading={isLoading}
+ onSubmit={async (vals: ToolsOzoneModerationEmitEvent.InputSchema) => {
+ await emitEvent(
+ hydrateModToolInfo(vals, ActionPanelNames.QuickAction),
+ )
+ queryClient.invalidateQueries({ queryKey: ['report', reportId] })
+ queryClient.invalidateQueries({ queryKey: ['reportActivities', reportId] })
+ }}
+ />
+ toggleWorkspacePanel()}
+ />
+
+ )
+}
+
+function ReportDetailLayout(props: {
+ report: ToolsOzoneReportDefs.ReportView
+ subject: string
+ setSubject: (subject: string) => void
+ onSubmit: (vals: ToolsOzoneModerationEmitEvent.InputSchema) => Promise
+ {
+ const savedUrl = sessionStorage.getItem('ozone:reportsListUrl')
+ router.push(savedUrl ?? '/reports/beta')
+ }}
+ >
+
+
+
+ {subject && report && (
+ + Report #{reportId} +
+ {(prevId !== null || nextId !== null) && ( +
+
+ prevId !== null && router.push(`/reports/${prevId}`)
+ }
+ >
+
+
+ nextId !== null && router.push(`/reports/${nextId}`)
+ }
+ >
+ Next
+
+
+ )}
+
+
+ )
+}
diff --git a/app/reports/[id]/page.tsx b/app/reports/[id]/page.tsx
new file mode 100644
index 0000000..ec016b7
--- /dev/null
+++ b/app/reports/[id]/page.tsx
@@ -0,0 +1,11 @@
+'use client'
+import { Suspense } from 'react'
+import { ReportDetailPageContent } from './page-content'
+
+export default function ReportDetailPage() {
+ return (
+
+ {/* Left col */}
+
+
+ {/* Subject preview */}
+
+
+ {/* Right col */}
+
+
+ {!isSubjectDid && record?.repo && (
+
+
+
+ {/* Subject status */}
+ {!!subjectStatus && (
+
+
+ )}
+
+
+ )}
+
+ {/* Blobs */}
+ {!!record?.blobs?.length && (
+
+ {!!subjectStatus.priorityScore && (
+
+
+ )}
+ {!!record?.repo.moderation.subjectStatus?.comment && (
+
+
+ )}
+
+
+ )}
+
+ {/* Labels */}
+
+
+
+ {!currentLabels.length &&
+
+
+
+ {/* Subject tags */}
+ {!!subjectStatus?.tags?.length && (
+
+
+
+ {subjectStatus.tags.sort().map((tag) => (
+
+
+
+ )}
+
+ {/* Account labels (records only) */}
+ {!isSubjectDid && !!profile?.labels?.length && (
+
+
+ )}
+
+ {/* Account tags (records only) */}
+ {!!record?.repo.moderation.subjectStatus?.tags?.length && (
+ Account Labels
+ {profile.labels.map((label) => (
+
+
+ {record.repo.moderation.subjectStatus.tags.sort().map((tag) => (
+
+
+ )}
+
+ {/* Event stream */}
+ Account Tags
+
+
+
+ {
+ const reportAction: ToolsOzoneModerationEmitEvent.ReportAction = { ids: [report.id] }
+ await onSubmit({
+ subject: { $type: 'com.atproto.admin.defs#repoRef', did: subject.startsWith('at://') ? getDidFromUri(subject)! : subject },
+ createdBy: config.did,
+ event: {
+ $type: MOD_EVENTS.RESOLVE_APPEAL,
+ comment: '[RESOLVING_APPEAL]',
+ },
+ reportAction,
+ })
+ }
+ : undefined
+ }
+ />
+
+
+
+
+ )}
+
+ {/* Strike data error - unlikely to happen */}
+ {!!strikeDataError && (isTakedownEvent || isReverseTakedownEvent) && (
+
+
+ Please be cautious when taking actions that require
+ up-to-date strike info.{' '}
+ {' '}
+ to reload strike data for this account.
+
+ }
+ />
+
+ )}
+
+
+
+
+
+ {!!report.actions?.length && (
+
+
+ {report.actions.map((modEvent) => (
+
+
+ )}
+
+ + Actions on this report +
+
+
+ )
+}
diff --git a/app/reports/beta/QueueFilterBar.tsx b/app/reports/beta/QueueFilterBar.tsx
new file mode 100644
index 0000000..247ae1c
--- /dev/null
+++ b/app/reports/beta/QueueFilterBar.tsx
@@ -0,0 +1,74 @@
+import { QueueCard } from '@/queues/QueueCard'
+import { ToolsOzoneQueueDefs } from '@atproto/api'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
+import { useState } from 'react'
+
+export function QueueFilterBar({
+ queue,
+ onClear,
+}: {
+ queue: ToolsOzoneQueueDefs.QueueView
+ onClear: () => void
+}) {
+ const [isExpanded, setIsExpanded] = useState(false)
+
+ return (
+
+ {/* Status */}
+
+
+ {/* Muted */}
+
+
+ {/* Subject type */}
+
+
+ {/* My Assignments */}
+
+
+ {/* Report types */}
+
+
+ {/* Collections row — only when subject type is record */}
+ {subjectType === 'record' && (
+
+
+ Collections
+
+ {Object.values(CollectionId).map((id) => (
+ toggleCollection(id)}
+ />
+ ))}
+
+ )}
+
+ {queue && (
+
+ )
+}
diff --git a/app/reports/beta/page-content.tsx b/app/reports/beta/page-content.tsx
new file mode 100644
index 0000000..bfa50cd
--- /dev/null
+++ b/app/reports/beta/page-content.tsx
@@ -0,0 +1,217 @@
+'use client'
+import { useEffect } from 'react'
+import {
+ ReadonlyURLSearchParams,
+ useSearchParams,
+ useRouter,
+ usePathname,
+} from 'next/navigation'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import {
+ ToolsOzoneModerationEmitEvent,
+ ToolsOzoneReportQueryReports,
+} from '@atproto/api'
+import { ReportTable } from 'components/reports/table'
+import { useTitle } from 'react-use'
+import { unique } from '@/lib/util'
+import {
+ ActionPanelNames,
+ hydrateModToolInfo,
+ useEmitEvent,
+} from '@/mod-event/helpers/emitEvent'
+import { useFluentReportSearchParams } from '@/reports/useFluentReportSearch'
+import { useLabelerAgent } from '@/shell/ConfigurationContext'
+import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
+import { WorkspacePanel } from 'components/workspace/Panel'
+import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
+import { useQueueById } from '@/queues/useQueues'
+import { BetaReportsFilters } from './Filters'
+import { QueueFilterBar } from './QueueFilterBar'
+
+const getSortParams = (params: ReadonlyURLSearchParams) => {
+ let sortField = params.get('sortField')
+ let sortDirection = params.get('sortDirection')
+
+ if (!['asc', 'desc'].includes(sortDirection ?? '')) {
+ sortDirection = 'desc'
+ }
+
+ if (!['createdAt', 'updatedAt'].includes(sortField ?? '')) {
+ sortField = 'createdAt'
+ }
+
+ return { sortField, sortDirection }
+}
+
+const REPORTS_LIST_URL_KEY = 'ozone:reportsListUrl'
+
+export const BetaReportsPageContent = () => {
+ const emitEvent = useEmitEvent()
+ const params = useSearchParams()
+ const quickOpenParam = params.get('quickOpen') ?? ''
+ const router = useRouter()
+ const pathname = usePathname()
+
+ // Store current list URL so the detail page back button can return here
+ useEffect(() => {
+ const url = pathname + (params.toString() ? `?${params.toString()}` : '')
+ sessionStorage.setItem(REPORTS_LIST_URL_KEY, url)
+ }, [pathname, params])
+ const { toggleWorkspacePanel, isWorkspaceOpen } = useWorkspaceOpener()
+
+ const rawQueueId = params.get('queueId')
+ const parsedQueueId = rawQueueId ? Number(rawQueueId) : null
+ const queueId = parsedQueueId !== null && !isNaN(parsedQueueId) ? parsedQueueId : null
+ const { queue } = useQueueById(queueId)
+
+ const clearQueueFilter = () => {
+ const nextParams = new URLSearchParams(params)
+ nextParams.delete('queueId')
+ router.replace(`${pathname}?${nextParams.toString()}`)
+ }
+
+ const setQuickActionPanelSubject = (subject: string) => {
+ const searchParams = new URLSearchParams(params)
+ if (!subject) {
+ searchParams.delete('quickOpen')
+ } else {
+ searchParams.set('quickOpen', subject)
+ }
+ router.push((pathname ?? '') + '?' + searchParams.toString())
+ }
+
+ const { data, fetchNextPage, hasNextPage, refetch, isInitialLoading } =
+ useBetaReportsQuery()
+
+ const reports = data?.pages.flatMap((page) => page.reports) ?? []
+ const subjectOptions = unique(reports.map((report) => report.subject.subject))
+
+ useTitle(queue ? `${queue.name} - Reports (Beta)` : 'Queue - Reports (Beta)')
+
+ return (
+ <>
+ {queue && (
+
+
+ )}
+
+
+
+ {isExpanded && (
+ + {queue.name} +
+ + {queue.enabled ? 'Enabled' : 'Disabled'} + + {queue.stats.pendingCount !== undefined && ( + + {queue.stats.pendingCount} pending + + )} +
+
+
+
+
+ )}
+
+ No members found
+
+ )}
+
+ {assignments.map((a) =>
+ isAdmin ? (
+
+ ) : (
+ {
+ assignQueue({ did, queueId })
+ }}
+ />
+ )}
+ {showAssignSelf && (
+
+ )}
+ {showEmptyIndicator && (
+
+ Are you sure you want to unassign{' '}
+
+ {pendingLabel}
+ {' '}
+ from{' '}
+
+ {pendingUnassign.queue.name}
+
+ ? They have been assigned for{' '}
+ {formatDistanceToNowStrict(new Date(pendingUnassign.startAt))}.
+
+ ) : undefined
+ }
+ confirmButtonText={isUnassigning ? 'Unassigning…' : 'Unassign'}
+ confirmButtonDisabled={isUnassigning}
+ onConfirm={handleConfirmUnassign}
+ error={unassignError}
+ />
+
+ )
+}
diff --git a/components/assignments/useAssignments.ts b/components/assignments/useAssignments.ts
new file mode 100644
index 0000000..e6be8ca
--- /dev/null
+++ b/components/assignments/useAssignments.ts
@@ -0,0 +1,130 @@
+import { useEffect, useRef, useCallback } from 'react'
+import { displayError } from '@/common/Loader'
+import { useLabelerAgent } from '@/shell/ConfigurationContext'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-toastify'
+import { MINUTE } from '@/lib/util'
+import {
+ ToolsOzoneQueueAssignModerator,
+ ToolsOzoneQueueDefs,
+ ToolsOzoneQueueGetAssignments,
+ ToolsOzoneQueueUnassignModerator,
+ ToolsOzoneReportDefs,
+ ToolsOzoneReportGetAssignments,
+} from '@atproto/api'
+
+const ASSIGNMENTS_QUERY_KEY = 'assignments'
+
+export const useQueueAssignments = (
+ params: ToolsOzoneQueueGetAssignments.QueryParams,
+) => {
+ const labelerAgent = useLabelerAgent()
+ return useQuery({
+ queryKey: [ASSIGNMENTS_QUERY_KEY, params],
+ queryFn: async () => {
+ const { data } =
+ await labelerAgent.tools.ozone.queue.getAssignments(params)
+ return (data as { assignments: ToolsOzoneQueueDefs.AssignmentView[] })
+ .assignments
+ },
+ refetchInterval: 5000,
+ onError: (err) => {
+ toast.error(`Failed to load assignments:\n${err}`)
+ },
+ })
+}
+
+export const useAssignQueue = () => {
+ const labelerAgent = useLabelerAgent()
+ const queryClient = useQueryClient()
+ return useMutation(
+ async (input: ToolsOzoneQueueAssignModerator.InputSchema) => {
+ const { data } =
+ await labelerAgent.tools.ozone.queue.assignModerator(input)
+ return data
+ },
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: [ASSIGNMENTS_QUERY_KEY] })
+ },
+ onError: (err) => {
+ toast.error(displayError(err))
+ },
+ },
+ )
+}
+
+export const useUnassignQueue = (options?: {
+ onSuccess?: () => void
+ onError?: (err: unknown) => void
+}) => {
+ const labelerAgent = useLabelerAgent()
+ const queryClient = useQueryClient()
+ return useMutation(
+ async (input: ToolsOzoneQueueUnassignModerator.InputSchema) => {
+ await labelerAgent.tools.ozone.queue.unassignModerator(input)
+ },
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: [ASSIGNMENTS_QUERY_KEY] })
+ options?.onSuccess?.()
+ },
+ onError: (err) => {
+ options?.onError?.(err)
+ },
+ },
+ )
+}
+
+export const useReportAssignments = (
+ params: ToolsOzoneReportGetAssignments.QueryParams,
+) => {
+ const labelerAgent = useLabelerAgent()
+ return useQuery({
+ queryKey: [ASSIGNMENTS_QUERY_KEY, params],
+ queryFn: async () => {
+ const { data } =
+ await labelerAgent.tools.ozone.report.getAssignments(params)
+ return (data as { assignments: ToolsOzoneReportDefs.AssignmentView[] })
+ .assignments
+ },
+ refetchInterval: 5000,
+ onError: (err) => {
+ toast.error(`Failed to load assignments:\n${err}`)
+ },
+ })
+}
+
+const AUTO_ASSIGN_INTERVAL_MS = 3 * MINUTE
+export const useAutoAssignReport = ({
+ reportId,
+ queueId,
+}: {
+ reportId: number
+ queueId?: number
+}) => {
+ const labelerAgent = useLabelerAgent()
+ const intervalRef = useRef-
+ )} + +
+ {
+ onChange?.(val || undefined)
+ setQuery(val || '')
+ }}
+ immediate
+ >
+
+
+ )
+}
diff --git a/components/common/DateRangeFilter.tsx b/components/common/DateRangeFilter.tsx
new file mode 100644
index 0000000..b5b7562
--- /dev/null
+++ b/components/common/DateRangeFilter.tsx
@@ -0,0 +1,116 @@
+import { differenceInDays, subDays } from 'date-fns'
+
+export type DateRangePreset = '7d' | '30d' | '90d' | 'custom'
+
+export type DateRangeValue = {
+ startDate?: string
+ endDate?: string
+ preset: DateRangePreset
+}
+
+const PRESETS: { key: DateRangePreset; label: string; days: number }[] = [
+ { key: '7d', label: '7 days', days: 7 },
+ { key: '30d', label: '30 days', days: 30 },
+ { key: '90d', label: '90 days', days: 90 },
+]
+
+export function computeDatesForPreset(preset: DateRangePreset): {
+ startDate?: string
+ endDate?: string
+} {
+ const presetConfig = PRESETS.find((p) => p.key === preset)
+ if (!presetConfig) return {}
+ return {
+ startDate: subDays(new Date(), presetConfig.days).toISOString(),
+ endDate: new Date().toISOString(),
+ }
+}
+
+export function DateRangeFilter({
+ value,
+ onChange,
+ limit,
+}: {
+ value: DateRangeValue
+ onChange: (value: DateRangeValue) => void
+ limit?: number
+}) {
+ const exceedsMax =
+ limit !== undefined
+ ? value.startDate && value.endDate
+ ? differenceInDays(new Date(value.endDate), new Date(value.startDate)) >
+ limit
+ : false
+ : false
+
+ return (
+
+ setQuery('')}
+ >
+
+ {filtered.map((c) => (
+
+ `relative cursor-default select-none py-2 pl-4 pr-4 ${
+ focus
+ ? 'bg-gray-100 dark:bg-slate-600 text-gray-900 dark:text-gray-200'
+ : 'text-gray-900 dark:text-gray-200'
+ }`
+ }
+ >
+
+ ))}
+
+
+
+
+ val}
+ onChange={(e) => {
+ setQuery(e.target.value)
+ onChange?.(e.target.value || undefined)
+ }}
+ onBlur={(e) => {
+ const typed = e.target.value
+ onChange?.(typed || undefined)
+ }}
+ placeholder={
+ placeholder ?? 'collection (e.g. app.bsky.feed.post)'
+ }
+ autoComplete="off"
+ />
+
+
+
+
+
+ {c.label}
+
+ {c.value}
+
+
+ + {/* show a space so this element maintains its height */} + {nsidError ?? '\u00A0'} +
+
+
+ )
+}
diff --git a/components/common/PaginatedGrid.tsx b/components/common/PaginatedGrid.tsx
new file mode 100644
index 0000000..b1fd067
--- /dev/null
+++ b/components/common/PaginatedGrid.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+import { LoadMoreButton } from '@/common/LoadMoreButton'
+
+export function PaginatedGrid
+ {PRESETS.map((preset) => (
+
+ ))}
+
+ {value.preset === 'custom' && (
+
+ {exceedsMax && (
+
+
+ onChange({
+ ...value,
+ startDate: e.target.value
+ ? new Date(e.target.value).toISOString()
+ : undefined,
+ })
+ }
+ />
+ to
+
+ onChange({
+ ...value,
+ endDate: e.target.value
+ ? new Date(e.target.value).toISOString()
+ : undefined,
+ })
+ }
+ />
+
+ )}
+ + Date range cannot exceed {limit} days +
+ )} +
+
+ )
+}
diff --git a/components/common/PaginatedSelect.tsx b/components/common/PaginatedSelect.tsx
new file mode 100644
index 0000000..46bfdfb
--- /dev/null
+++ b/components/common/PaginatedSelect.tsx
@@ -0,0 +1,100 @@
+import { Fragment } from 'react'
+import {
+ Listbox,
+ ListboxButton,
+ ListboxOptions,
+ ListboxOption,
+ Transition,
+} from '@headlessui/react'
+import { ChevronUpDownIcon } from '@heroicons/react/24/solid'
+import { twMerge } from 'tailwind-merge'
+
+export type PaginatedSelectOption = {
+ value: string
+ label: string
+}
+
+export function PaginatedSelect({
+ value,
+ onChange,
+ options,
+ placeholder = 'Select...',
+ hasNextPage,
+ fetchNextPage,
+ className,
+}: {
+ value: string
+ onChange: (value: string) => void
+ options: PaginatedSelectOption[]
+ placeholder?: string
+ hasNextPage?: boolean
+ fetchNextPage?: () => void
+ className?: string
+}) {
+ const selected = options.find((o) => o.value === value)
+
+ return (
+ {items.map(renderItem)}
+ {!!items.length && hasNextPage && fetchNextPage && (
+
+
+ )}
+
+
+
+ {selected ? selected.label : placeholder}
+
+
+
+
+
+
+
+
+ `relative cursor-default select-none py-2 pl-4 pr-4 ${
+ focus
+ ? 'bg-gray-100 dark:bg-slate-600 text-gray-900 dark:text-gray-200'
+ : 'text-gray-500 dark:text-gray-400'
+ }`
+ }
+ >
+ {placeholder}
+
+ {options.map((opt) => (
+
+ `relative cursor-default select-none py-2 pl-4 pr-4 ${
+ focus
+ ? 'bg-gray-100 dark:bg-slate-600 text-gray-900 dark:text-gray-200'
+ : 'text-gray-900 dark:text-gray-200'
+ }`
+ }
+ >
+ {opt.label}
+
+ ))}
+ {hasNextPage && fetchNextPage && (
+ {
+ e.preventDefault()
+ fetchNextPage()
+ }}
+ >
+ Load more...
+
+ )}
+
+
+
+ setShowPopup(false)}
+ />
+
+
+
+ )}
+
+
+ )
+}
+
export function PreviewCard({
subject,
title,
@@ -42,9 +95,13 @@ export function PreviewCard({
if (subject.startsWith('at://')) {
const displayTitle = title || getPreviewTitleForAtUri(subject)
return (
-
+
+ {subject}
+
+
+
+
- {displayTitle}
+
- {title ? title : 'Reported user'}
+
+
{
+export const Tooltip = ({ title, children, anchor }: TooltipProps) => {
return (
{() => (
@@ -40,15 +36,19 @@ export const Tooltip = ({
anchor={anchor}
>
- , 'onClick'> & {
+ appearance?: 'outlined' | 'primary' | 'negative'
+ size?: ButtonSize
+ onHoldComplete?: () => void
+ holdDuration?: number
+}
+
+export function HoldButton({
+ className = '',
+ appearance = 'primary',
+ size = 'md',
+ onHoldComplete,
+ holdDuration = 1000,
+ disabled,
+ children,
+ ...others
+}: HoldButtonProps) {
+ const [holding, setHolding] = useState(false)
+ const timerRef = useRef | null>(null)
+
+ const clear = useCallback(() => {
+ setHolding(false)
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ timerRef.current = null
+ }
+ }, [])
+
+ const start = useCallback(() => {
+ if (disabled) return
+ setHolding(true)
+ timerRef.current = setTimeout(() => {
+ setHolding(false)
+ timerRef.current = null
+ onHoldComplete?.()
+ }, holdDuration)
+ }, [disabled, holdDuration, onHoldComplete])
+
+ return (
+
+ )
+}
diff --git a/components/common/feeds/RecordCard.tsx b/components/common/feeds/RecordCard.tsx
index 155c202..2a3065f 100644
--- a/components/common/feeds/RecordCard.tsx
+++ b/components/common/feeds/RecordCard.tsx
@@ -51,7 +51,7 @@ export const FeedGeneratorRecordCard = ({ uri }: { uri: string }) => {
}
return (
-
-
diff --git a/components/common/buttons.tsx b/components/common/buttons.tsx
index 022c4a1..b1ad40b 100644
--- a/components/common/buttons.tsx
+++ b/components/common/buttons.tsx
@@ -1,4 +1,12 @@
-import { ComponentProps, forwardRef, Ref, ReactElement } from 'react'
+import {
+ ComponentProps,
+ forwardRef,
+ Ref,
+ ReactElement,
+ useCallback,
+ useRef,
+ useState,
+} from 'react'
import Link from 'next/link'
import { classNames } from '../../lib/util'
@@ -135,3 +143,82 @@ export const ButtonGroup = ({
)
}
+
+const holdAppearanceClassNames = {
+ outlined:
+ 'bg-transparent dark:bg-slate-800 disabled:bg-gray-300 text-black dark:text-gray-50 border-gray-700 dark:border-slate-600',
+ primary:
+ 'bg-indigo-600 dark:bg-teal-600 disabled:bg-gray-400 text-white border-transparent',
+ negative:
+ 'bg-red-600 dark:bg-red-700 disabled:bg-gray-400 text-white border-transparent',
+}
+
+const holdFillClassNames = {
+ outlined: 'bg-gray-500/50 dark:bg-slate-400/40',
+ primary: 'bg-white/30 dark:bg-white/20',
+ negative: 'bg-white/30 dark:bg-white/20',
+}
+
+type HoldButtonProps = Omit
-
- - {title} -
-
-
+ {description}
-
+ {title && (
+
+
+ )}
+ {children && (
+ + {title} +
+
+ {children}
+
+ )}
+
![]()
{
+ const { data } = await labelerAgent.app.bsky.actor.getProfile({
+ actor: did,
+ })
+ return data
+ },
+ enabled: !profileProp,
+ retry: false,
+ staleTime: 5 * 60 * 1000,
+ refetchInterval: 5 * 60 * 1000,
+ })
+
+ const profile = profileProp ?? fetchedProfile
+
+ const displayLabel =
+ profile?.displayName || profile?.handle || `${did.slice(0, 20)}...`
+
+ return (
+
+ 
+ {displayLabel}
+
+ )
+}
diff --git a/components/common/starterpacks/RecordCard.tsx b/components/common/starterpacks/RecordCard.tsx
index b2bc7d6..6de83c5 100644
--- a/components/common/starterpacks/RecordCard.tsx
+++ b/components/common/starterpacks/RecordCard.tsx
@@ -70,7 +70,7 @@ export const StarterPackRecordCard = ({ uri }: { uri: string }) => {
}
return (
-
+
![]()
{
})
},
onSuccess: () => {
- queryClient.invalidateQueries(['action-communication-templates'])
+ queryClient.invalidateQueries({ queryKey: ['action-communication-templates'] })
toast.success('Action templates updated successfully')
},
onError: (error: any) => {
diff --git a/components/communication-template/delete-confirmation-modal.tsx b/components/communication-template/delete-confirmation-modal.tsx
index 6a57b8c..58245b0 100644
--- a/components/communication-template/delete-confirmation-modal.tsx
+++ b/components/communication-template/delete-confirmation-modal.tsx
@@ -35,7 +35,7 @@ export const CommunicationTemplateDeleteConfirmationModal = ({
id: templateId,
})
toast.success('Template deleted')
- queryClient.invalidateQueries(['communicationTemplateList'])
+ queryClient.invalidateQueries({ queryKey: ['communicationTemplateList'] })
setIsDeleting(false)
setIsDialogOpen(false)
} catch (err: any) {
diff --git a/components/config/useLabelGroups.tsx b/components/config/useLabelGroups.tsx
index 789b722..367a693 100644
--- a/components/config/useLabelGroups.tsx
+++ b/components/config/useLabelGroups.tsx
@@ -57,7 +57,7 @@ export const useLabelGroupsData = () => {
},
onSuccess: () => {
- queryClient.invalidateQueries(['label-groups-setting'])
+ queryClient.invalidateQueries({ queryKey: ['label-groups-setting'] })
toast.success('Label groups saved')
},
diff --git a/components/list/RecordCard.tsx b/components/list/RecordCard.tsx
index 81c2802..151dd20 100644
--- a/components/list/RecordCard.tsx
+++ b/components/list/RecordCard.tsx
@@ -56,7 +56,7 @@ export const ListRecordCard = ({ uri }: { uri: string }) => {
}
return (
-
+
![]()
}) => {
- // @ts-expect-error durationInHours will be added in a future @atproto/api release
const durationInHours: number | undefined = modEvent.event.durationInHours
const hasAdds = modEvent.event.add.length > 0
let expiresAt: Date | null = null
diff --git a/components/mod-event/FilterPanel.tsx b/components/mod-event/FilterPanel.tsx
index 2adcaa2..ec5513b 100644
--- a/components/mod-event/FilterPanel.tsx
+++ b/components/mod-event/FilterPanel.tsx
@@ -408,14 +408,16 @@ export const EventFilterPanel = ({
+
diff --git a/components/mod-event/ItemTitle.tsx b/components/mod-event/ItemTitle.tsx
index 7d18bf2..3afac16 100644
--- a/components/mod-event/ItemTitle.tsx
+++ b/components/mod-event/ItemTitle.tsx
@@ -143,6 +143,9 @@ export const ItemTitle = ({
: modEvent.record
? modEvent.record.moderation.subjectStatus
: undefined
+ const eventUrlBase = ToolsOzoneModerationDefs.isModEventReport(modEvent.event)
+ ? '/reports'
+ : '/events'
return (
('')
+ const deleteMutation = useDeleteQueue()
+
+ const otherQueues = queues.filter((q) => q.id !== queue?.id)
+ const selectedTarget = otherQueues.find(
+ (q) => q.id === Number(migrateToQueueId),
+ )
+ const isLastQueue = queues.length <= 1
+
+ const handleDelete = async () => {
+ if (!queue) return
+ await deleteMutation.mutateAsync(
+ {
+ queueId: queue.id,
+ ...(migrateToQueueId
+ ? { migrateToQueueId: Number(migrateToQueueId) }
+ : {}),
+ },
+ {
+ onSuccess: () => {
+ setMigrateToQueueId('')
+ onClose()
+ },
+ },
+ )
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/components/queues/configure/QueueForm.tsx b/components/queues/configure/QueueForm.tsx
new file mode 100644
index 0000000..ba1864f
--- /dev/null
+++ b/components/queues/configure/QueueForm.tsx
@@ -0,0 +1,363 @@
+import { ActionButton } from '@/common/buttons'
+import { Checkbox, FormLabel, Input, Textarea } from '@/common/forms'
+import { CollectionAutocomplete } from '../../common/CollectionAutocomplete'
+import { ConfirmationModal } from '@/common/modals/confirmation'
+import { ReasonBadge } from '@/reports/ReasonBadge'
+import { ReportTypeMultiselect } from '@/reports/ReportTypeMultiselect'
+import { ToolsOzoneQueueDefs } from '@atproto/api'
+import { useState } from 'react'
+import { Tooltip } from '@/common/Tooltip'
+import { useCreateQueue, useUpdateQueue } from '../useQueues'
+
+function MatchSummary({
+ subjectTypes,
+ collection,
+ reportTypes,
+}: {
+ subjectTypes: Set
+ collection: string | undefined
+ reportTypes: string[]
+}) {
+ const subjectList = Array.from(subjectTypes)
+
+ if (subjectTypes.size === 0 || reportTypes.length === 0) {
+ return (
+ (
+ queue?.description,
+ )
+ const [showToggleDialog, setShowToggleDialog] = useState(false)
+ const [subjectTypes, setSubjectTypes] = useState>(
+ new Set(queue?.subjectTypes ?? []),
+ )
+ const [collection, setCollection] = useState(
+ queue?.collection?.trim() || undefined,
+ )
+ const collectionSanitized =
+ subjectTypes.has('record') && collection?.trim()
+ ? collection.trim()
+ : undefined
+ const [reportTypes, setReportTypes] = useState(
+ queue?.reportTypes ?? [],
+ )
+ const [errors, setErrors] = useState>({})
+
+ const handleToggleEnabled = async () => {
+ if (!queue) return
+ await updateMutation.mutateAsync(
+ {
+ queueId: queue.id,
+ name: queue.name,
+ description: queue.description,
+ enabled: !queue.enabled,
+ },
+ {
+ onSuccess: () => {
+ setShowToggleDialog(false)
+ onSuccess()
+ },
+ },
+ )
+ }
+
+ const toggleSubjectType = (type: string) => {
+ setSubjectTypes((prev) => {
+ const next = new Set(prev)
+ if (next.has(type)) {
+ next.delete(type)
+ } else {
+ next.add(type)
+ }
+ return next
+ })
+ }
+
+ const validate = (): boolean => {
+ const newErrors: Record = {}
+
+ if (!name.trim()) {
+ newErrors.name = 'Name is required'
+ }
+
+ if (!isEditMode) {
+ if (subjectTypes.size === 0) {
+ newErrors.subjectTypes = 'At least one subject type is required'
+ }
+ if (reportTypes.length === 0) {
+ newErrors.reportTypes = 'At least one report type is required'
+ } else if (reportTypes.length > 25) {
+ newErrors.reportTypes = 'Maximum 25 report types allowed'
+ }
+ }
+
+ setErrors(newErrors)
+ return Object.keys(newErrors).length === 0
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!validate()) return
+
+ if (isEditMode && queue) {
+ await updateMutation.mutateAsync(
+ {
+ queueId: queue.id,
+ name,
+ description,
+ },
+ { onSuccess },
+ )
+ } else {
+ await createMutation.mutateAsync(
+ {
+ name,
+ description,
+ subjectTypes: Array.from(subjectTypes),
+ reportTypes,
+ collection: collectionSanitized,
+ },
+ { onSuccess },
+ )
+ }
+ }
+
+ return (
+
+ This is for sharing configs between team members.
+
+ 1. The sharer should click 'Copy Filters' and paste the output
+ to their team member.
+ 2. The team member should click 'Import Filters' and paste the
+ config.
+
@@ -154,7 +157,7 @@ export const ItemTitle = ({
{createdAt}
diff --git a/components/mod-event/helpers/emitEvent.tsx b/components/mod-event/helpers/emitEvent.tsx
index a97e77a..2ded30c 100644
--- a/components/mod-event/helpers/emitEvent.tsx
+++ b/components/mod-event/helpers/emitEvent.tsx
@@ -118,10 +118,9 @@ export function useEmitEvent() {
// Define the query invalidation to reuse
const invalidateQueries = () => {
if (ComAtprotoAdminDefs.isRepoRef(vals?.subject)) {
- queryClient.invalidateQueries([
- 'accountView',
- { id: vals?.subject.did },
- ])
+ queryClient.invalidateQueries({
+ queryKey: ['accountView', { id: vals?.subject.did }],
+ })
}
}
diff --git a/components/mod-event/useFilterMacrosList.tsx b/components/mod-event/useFilterMacrosList.tsx
index 0a152a5..c9226e8 100644
--- a/components/mod-event/useFilterMacrosList.tsx
+++ b/components/mod-event/useFilterMacrosList.tsx
@@ -34,7 +34,7 @@ export const useFilterMacroUpsertMutation = () => {
},
{
onSuccess: () => {
- queryClient.invalidateQueries([FILTER_MACRO_LIST_QUERY_KEY])
+ queryClient.invalidateQueries({ queryKey: [FILTER_MACRO_LIST_QUERY_KEY] })
toast.success('Filter macro saved')
},
},
@@ -51,7 +51,7 @@ export const useFilterMacroRemoveMutation = () => {
},
{
onSuccess: () => {
- queryClient.invalidateQueries([FILTER_MACRO_LIST_QUERY_KEY])
+ queryClient.invalidateQueries({ queryKey: [FILTER_MACRO_LIST_QUERY_KEY] })
toast.success('Filter macro removed')
},
},
@@ -68,7 +68,7 @@ export const useFilterMacroEmptyMutation = () => {
},
{
onSuccess: () => {
- queryClient.invalidateQueries([FILTER_MACRO_LIST_QUERY_KEY])
+ queryClient.invalidateQueries({ queryKey: [FILTER_MACRO_LIST_QUERY_KEY] })
toast.success('Removed all filter macros')
},
},
diff --git a/components/queues/QueueCard.tsx b/components/queues/QueueCard.tsx
new file mode 100644
index 0000000..4aff9f6
--- /dev/null
+++ b/components/queues/QueueCard.tsx
@@ -0,0 +1,142 @@
+import { QueueAssigneeStatus } from '@/assignments/QueueAssigneeStatus'
+import { useQueueAssignments } from '@/assignments/useAssignments'
+import { Card } from '@/common/Card'
+import { ModeratorBadge } from '@/common/profileStatus/ModeratorBadge'
+import { ReasonBadge } from '@/reports/ReasonBadge'
+import { StatValues } from '@/reports/stats/Stats'
+import { ToolsOzoneQueueDefs } from '@atproto/api'
+import Link from 'next/link'
+import { ReactNode } from 'react'
+
+export function QueueCard({
+ queue,
+ actions,
+ hiddenFields,
+ hideViewReports,
+}: {
+ queue: ToolsOzoneQueueDefs.QueueView
+ actions?: ReactNode
+ hiddenFields?: (keyof ToolsOzoneQueueDefs.QueueView)[]
+ hideViewReports?: boolean
+}) {
+ const { data: assignments } = useQueueAssignments({
+ onlyActive: true,
+ queueIds: [queue.id],
+ })
+
+ return (
+
+
+ )
+}
diff --git a/components/queues/QueueFilters.tsx b/components/queues/QueueFilters.tsx
new file mode 100644
index 0000000..1504b25
--- /dev/null
+++ b/components/queues/QueueFilters.tsx
@@ -0,0 +1,114 @@
+import { ActionButton } from '@/common/buttons'
+import { CollectionAutocomplete } from '@/common/CollectionAutocomplete'
+import { Select } from '@/common/forms'
+import { ReportTypeMultiselect } from '@/reports/ReportTypeMultiselect'
+import { useState } from 'react'
+import { useDebounce } from 'react-use'
+import { QueueListFilters } from './useQueues'
+
+export function QueueFilters({
+ filters,
+ onChange,
+ children,
+ hiddenFilters,
+ className,
+}: {
+ filters: QueueListFilters
+ onChange: (filters: QueueListFilters) => void
+ children?: React.ReactNode
+ hiddenFilters?: (keyof QueueListFilters)[]
+ className?: string
+}) {
+ const updateFilter = (
+ key: K,
+ value: QueueListFilters[K],
+ ) => onChange({ ...filters, [key]: value })
+
+ // debounced collection field
+ const [collectionInput, setCollectionInput] = useState(
+ filters.collection,
+ )
+ useDebounce(
+ () => updateFilter('collection', collectionInput || undefined),
+ 300,
+ [collectionInput],
+ )
+
+ const resetFilters = () => {
+ onChange({})
+ setCollectionInput(undefined)
+ }
+
+ return (
+
+
+ )
+ }
+
+ return (
+ <>
+
+ {!!queues.length && hasNextPage && (
+
+ {/* Column 1 */}
+
+
+
+
+ {/* Column 2 */}
+
+
+ + + {queue.name} + +
+ + {queue.enabled ? 'Enabled' : 'Disabled'} + +
+
+ {!!queue.collection && !hiddenFields?.includes('collection') && (
+ + Subject Types +
+
+ {queue.subjectTypes.map((type) => (
+
+ {type}
+
+ ))}
+
+
+
+ )}
+ + Collection +
+
+ {queue.collection}
+
+
+
+ + Report Types +
+
+ {queue.reportTypes.map((type) => (
+
+
+ {!hiddenFields?.includes('stats') && (
+
+
+ {/* Column 3 */}
+
+
+
+ {/* Actions */}
+ {actions &&
+
+ + Created By +
+
+
+ Assigned
+
+
+ {actions}
}
+
+
+ )
+}
diff --git a/components/queues/QueueList.tsx b/components/queues/QueueList.tsx
new file mode 100644
index 0000000..899a759
--- /dev/null
+++ b/components/queues/QueueList.tsx
@@ -0,0 +1,84 @@
+import { ActionButton } from '@/common/buttons'
+import { Card } from '@/common/Card'
+import { Loading } from '@/common/Loader'
+import { LoadMoreButton } from '@/common/LoadMoreButton'
+import { QueueCard } from '@/queues/QueueCard'
+import { usePermission } from '@/shell/ConfigurationContext'
+import { ToolsOzoneQueueDefs } from '@atproto/api'
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/solid'
+
+export function QueueList({
+ queues,
+ isLoading,
+ fetchNextPage,
+ hasNextPage,
+ onEdit,
+ onDelete,
+ hiddenFields,
+}: {
+ queues: ToolsOzoneQueueDefs.QueueView[]
+ isLoading: boolean
+ fetchNextPage: () => void
+ hasNextPage?: boolean
+ onEdit?: (queue: ToolsOzoneQueueDefs.QueueView) => void
+ onDelete?: (queue: ToolsOzoneQueueDefs.QueueView) => void
+ hiddenFields?: (keyof ToolsOzoneQueueDefs.QueueView)[]
+}) {
+ const canManage = usePermission('canManageQueues')
+ const showActions = canManage && (onEdit || onDelete)
+
+ if (isLoading) return
+
+
+
+
+ setCollectionInput(val)}
+ />
+
+ {children}
+
+
+
+ updateFilter('reportTypes', val)}
+ />
+
+
+ resetFilters()}
+ >
+
+
+ Reset Filters
+No queues found.
+
+ {queues.map((queue) => (
+
+ {onEdit && (
+ onEdit(queue)}
+ title="Edit queue"
+ >
+
+ )}
+ {onDelete && (
+ onDelete(queue)}
+ title="Delete queue"
+ >
+
+ )}
+
+ ) : undefined
+ }
+ />
+ ))}
+
+
+ )}
+
+ )
+}
diff --git a/components/queues/configure/QueueDeleteDialog.tsx b/components/queues/configure/QueueDeleteDialog.tsx
new file mode 100644
index 0000000..66c1c7b
--- /dev/null
+++ b/components/queues/configure/QueueDeleteDialog.tsx
@@ -0,0 +1,154 @@
+import { Fragment, useState } from 'react'
+import {
+ Dialog,
+ Transition,
+ TransitionChild,
+ DialogTitle,
+ Description,
+ DialogPanel,
+} from '@headlessui/react'
+import { ToolsOzoneQueueDefs } from '@atproto/api'
+import { ActionButton } from '@/common/buttons'
+import { Select, FormLabel } from '@/common/forms'
+import { useDeleteQueue } from '../useQueues'
+
+export function QueueDeleteDialog({
+ queue,
+ queues,
+ onClose,
+}: {
+ queue?: ToolsOzoneQueueDefs.QueueView
+ queues: ToolsOzoneQueueDefs.QueueView[]
+ onClose: () => void
+}) {
+ const [migrateToQueueId, setMigrateToQueueId] = useState
+ No reports will match this queue.
+
+ )
+ }
+
+ const nonRecordTypes = subjectList.filter((t) => t !== 'record')
+
+ return (
+
+
+ )
+}
+
+export function QueueForm({
+ queue,
+ onCancel,
+ onSuccess,
+}: {
+ queue?: ToolsOzoneQueueDefs.QueueView
+ onCancel: () => void
+ onSuccess: () => void
+}) {
+ const isEditMode = !!queue
+ const createMutation = useCreateQueue()
+ const updateMutation = useUpdateQueue()
+ const isLoading = createMutation.isLoading || updateMutation.isLoading
+
+ // form
+ const [name, setName] = useState(queue?.name ?? '')
+ const [description, setDescription] = useStateSummary
+How a report matches this queue:
+
+
+
+
+
+ Report reason is one of:
+
+
+ {reportTypes.map((t) => (
+
+ AND
+
+ Subject is one of:
+
+ -
+ {nonRecordTypes.map((t) => (
+
- + {t} + + ))} + {subjectTypes.has('record') && ( +
- + {collection ? ( + + {' '} + record with collection{' '} + {collection} + + ) : ( + + record + + )} + + )} +