From 3089191f6050b4a32d6d06cee9475977f4c2f556 Mon Sep 17 00:00:00 2001
From: Foysal Ahamed <foysal@blueskyweb.xyz>
Date: Wed, 21 Feb 2024 13:28:32 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9D=87=EF=B8=8F=20Language=20filter=20on=20m?=
 =?UTF-8?q?oderation=20queue=20(#25)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :sparkles: Use dids in all links instead of handles

* :bug: Maintain search params when redirecting

* :bug: Wait for auth before attempting to resolve handle

* :sparkles: Add language filter to moderation queue

* :sparkles: Move lang filter to use tags

* :bug: Unique key for option

* :sparkles: Add tag display and emit form

* :sparkles: Allow multiple language inclusion and exclusion from the language picker

* :lipstick: Fix style of the lang picker button

* :arrow_up: Upgrade atproto api version

* :lipstick: Add inline comments and refactor

* :lipstick: Improve the language picker styling and add help text

* :bug: Use tag filters in the query key to refresh after lang selection
---
 app/actions/ModActionPanel/QuickAction.tsx |  35 ++++
 app/reports/page-content.tsx               |  22 ++-
 components/common/LanguagePicker.tsx       | 216 +++++++++++++++++++++
 components/mod-event/EventItem.tsx         |  30 +++
 components/mod-event/EventList.tsx         |  38 +++-
 components/mod-event/ItemTitle.tsx         |   4 +
 components/mod-event/SelectorButton.tsx    |   1 +
 components/mod-event/constants.ts          |   2 +
 components/mod-event/useModEventList.tsx   |  17 +-
 components/tags/utils.ts                   |   5 +
 package.json                               |   2 +-
 yarn.lock                                  |  14 +-
 12 files changed, 371 insertions(+), 15 deletions(-)
 create mode 100644 components/common/LanguagePicker.tsx
 create mode 100644 components/tags/utils.ts

diff --git a/app/actions/ModActionPanel/QuickAction.tsx b/app/actions/ModActionPanel/QuickAction.tsx
index ee8ff900..cd85aa99 100644
--- a/app/actions/ModActionPanel/QuickAction.tsx
+++ b/app/actions/ModActionPanel/QuickAction.tsx
@@ -45,6 +45,7 @@ import { SubjectReviewStateBadge } from '@/subject/ReviewStateMarker'
 import { getProfileUriForDid } from '@/reports/helpers/subject'
 import { Dialog } from '@headlessui/react'
 import { SubjectSwitchButton } from '@/common/SubjectSwitchButton'
+import { diffTags } from 'components/tags/utils'
 
 const FORM_ID = 'mod-action-panel'
 const useBreakpoint = createBreakpoint({ xs: 340, sm: 640 })
@@ -176,6 +177,7 @@ function Form(
   const [modEventType, setModEventType] = useState<string>(
     MOD_EVENTS.ACKNOWLEDGE,
   )
+  const isTagEvent = modEventType === MOD_EVENTS.TAG
   const isLabelEvent = modEventType === MOD_EVENTS.LABEL
   const isMuteEvent = modEventType === MOD_EVENTS.MUTE
   const isCommentEvent = modEventType === MOD_EVENTS.COMMENT
@@ -252,6 +254,15 @@ function Form(
         coreEvent.sticky = true
       }
 
+      if (formData.get('tags')) {
+        const tags = String(formData.get('tags'))
+          .split(',')
+          .map((tag) => tag.trim())
+        const { add, remove } = diffTags(subjectStatus?.tags || [], tags)
+        coreEvent.add = add
+        coreEvent.remove = remove
+      }
+
       const { subject: subjectInfo, record: recordInfo } =
         await createSubjectFromId(subject)
 
@@ -528,6 +539,17 @@ function Form(
                 </LabelList>
               </FormLabel>
             </div>
+            {!!subjectStatus?.tags?.length && (
+              <div className={`mb-3`}>
+                <FormLabel label="Tags">
+                  <LabelList className="-ml-1">
+                    {subjectStatus.tags.map((tag) => {
+                      return <LabelChip key={tag}>{tag}</LabelChip>
+                    })}
+                  </LabelList>
+                </FormLabel>
+              </div>
+            )}
 
             {/* This is only meant to be switched on in mobile/small screen view */}
             {/* The parent component ensures to toggle this based on the screen size */}
@@ -568,6 +590,19 @@ function Form(
                   </FormLabel>
                 )}
 
+                {isTagEvent && (
+                  <FormLabel label="Tags" className="mt-2">
+                    <Input
+                      type="text"
+                      id="tags"
+                      name="tags"
+                      className="block w-full"
+                      placeholder="Comma separated tags"
+                      defaultValue={subjectStatus?.tags?.join(',') || ''}
+                    />
+                  </FormLabel>
+                )}
+
                 <div className="mt-2">
                   <Textarea
                     name="comment"
diff --git a/app/reports/page-content.tsx b/app/reports/page-content.tsx
index a4ec516e..6ee14314 100644
--- a/app/reports/page-content.tsx
+++ b/app/reports/page-content.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useContext, useCallback, Suspense, useEffect } from 'react'
+import { useContext, useCallback } from 'react'
 import {
   ReadonlyURLSearchParams,
   usePathname,
@@ -23,6 +23,7 @@ import { ButtonGroup } from '@/common/buttons'
 import { useFluentReportSearch } from '@/reports/useFluentReportSearch'
 import { SubjectTable } from 'components/subject/table'
 import { useTitle } from 'react-use'
+import { LanguagePicker } from '@/common/LanguagePicker'
 
 const TABS = [
   {
@@ -156,6 +157,8 @@ export const ReportsPageContent = () => {
   const includeMuted = !!params.get('includeMuted')
   const appealed = !!params.get('appealed')
   const reviewState = params.get('reviewState')
+  const tags = params.get('tags')
+  const excludeTags = params.get('excludeTags')
   const { sortField, sortDirection } = getSortParams(params)
   const { getReportSearchParams } = useFluentReportSearch()
   const { lastReviewedBy, subject, reporters } = getReportSearchParams()
@@ -186,6 +189,8 @@ export const ReportsPageContent = () => {
           reporters,
           takendown,
           appealed,
+          tags,
+          excludeTags,
         },
       ],
       queryFn: async ({ pageParam }) => {
@@ -209,6 +214,14 @@ export const ReportsPageContent = () => {
           queryParams.appealed = appealed
         }
 
+        if (tags) {
+          queryParams.tags = tags.split(',')
+        }
+
+        if (excludeTags) {
+          queryParams.excludeTags = excludeTags.split(',')
+        }
+
         // For these fields, we only want to add them to the filter if the values are set, otherwise, defaults will kick in
         Object.entries({
           sortField,
@@ -255,10 +268,9 @@ export const ReportsPageContent = () => {
           </button>
         </div>
       </SectionHeader>
-      <div className="flex mt-2 mb-2 flex-row justify-end px-4 sm:px-6 lg:px-8">
-        <Suspense fallback={<div></div>}>
-          <ResolvedFilters />
-        </Suspense>
+      <div className="md:flex mt-2 mb-2 flex-row justify-between px-4 sm:px-6 lg:px-8">
+        <LanguagePicker />
+        <ResolvedFilters />
       </div>
       <SubjectTable
         subjectStatuses={subjectStatuses}
diff --git a/components/common/LanguagePicker.tsx b/components/common/LanguagePicker.tsx
new file mode 100644
index 00000000..d6cd59fe
--- /dev/null
+++ b/components/common/LanguagePicker.tsx
@@ -0,0 +1,216 @@
+import { LANGUAGES_MAP_CODE2 } from '@/lib/locale/languages'
+import { Popover, Transition } from '@headlessui/react'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import { useSearchParams, useRouter, usePathname } from 'next/navigation'
+import { ActionButton } from './buttons'
+
+// Please make sure that any item added here exists in LANGUAGES_MAP_CODE2 or add it there first
+const availableLanguageCodes = [
+  'en',
+  'es',
+  'fr',
+  'de',
+  'it',
+  'ja',
+  'ko',
+  'pt',
+  'ru',
+]
+
+const SelectionTitle = ({
+  includedLanguages,
+  excludedLanguages,
+}: {
+  includedLanguages: string[]
+  excludedLanguages: string[]
+}) => {
+  if (includedLanguages.length === 0 && excludedLanguages.length === 0) {
+    return (
+      <span className="text-gray-700 dark:text-gray-100">All Languages</span>
+    )
+  }
+
+  const includedNames = includedLanguages.map(
+    (lang) => LANGUAGES_MAP_CODE2[lang].name,
+  )
+  const excludedNames = excludedLanguages.map(
+    (lang) => LANGUAGES_MAP_CODE2[lang].name,
+  )
+
+  return (
+    <>
+      <span className="text-gray-700 dark:text-gray-100">
+        {includedNames.join(', ')}
+      </span>
+      {includedNames.length > 0 && excludedNames.length > 0 && (
+        <span className="text-gray-700 dark:text-gray-100 mx-1">|</span>
+      )}
+      <span className="text-gray-700 dark:text-gray-100">
+        {excludedNames.map((name, i) => (
+          <s key={name}>
+            {name}
+            {i < excludedNames.length - 1 && ', '}
+          </s>
+        ))}
+      </span>
+    </>
+  )
+}
+
+// Tags can be any arbitrary string, and lang tags are prefixed with lang:[code2] so we use this to get the lang code from tag string
+const getLangFromTag = (tag: string) => tag.split(':')[1]
+
+export const LanguagePicker: React.FC = () => {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const tagsParam = searchParams.get('tags')
+  const excludeTagsParam = searchParams.get('excludeTags')
+  const tags = tagsParam?.split(',') || []
+  const excludedTags = excludeTagsParam?.split(',') || []
+  const includedLanguages = tags
+    .filter((tag) => tag.startsWith('lang:'))
+    .map(getLangFromTag)
+  const excludedLanguages = excludedTags
+    .filter((tag) => tag.startsWith('lang:'))
+    .map(getLangFromTag)
+
+  const toggleLanguage = (section: 'include' | 'exclude', newLang: string) => {
+    const nextParams = new URLSearchParams(searchParams)
+    const urlQueryKey = section === 'include' ? 'tags' : 'excludeTags'
+    const selectedLanguages =
+      section === 'include' ? includedLanguages : excludedLanguages
+    const selectedLanguageTags = section === 'include' ? tags : excludedTags
+
+    if (selectedLanguages.includes(newLang)) {
+      const newTags = selectedLanguageTags.filter(
+        (tag) => `lang:${newLang}` !== tag,
+      )
+      if (newTags.length) {
+        nextParams.set(urlQueryKey, newTags.join(','))
+      } else {
+        nextParams.delete(urlQueryKey)
+      }
+    } else {
+      nextParams.set(
+        urlQueryKey,
+        [...selectedLanguageTags, `lang:${newLang}`].join(','),
+      )
+    }
+
+    router.push((pathname ?? '') + '?' + nextParams.toString())
+  }
+  const clearLanguages = () => {
+    const nextParams = new URLSearchParams(searchParams)
+
+    nextParams.delete('tags')
+    nextParams.delete('excludeTags')
+    router.push((pathname ?? '') + '?' + nextParams.toString())
+  }
+
+  return (
+    <Popover>
+      {({ open, close }) => (
+        <>
+          <Popover.Button className="text-sm flex flex-row items-center">
+            <SelectionTitle {...{ includedLanguages, excludedLanguages }} />
+            <ChevronDownIcon className="dark:text-gray-50 w-4 h-4" />
+          </Popover.Button>
+
+          {/* Use the `Transition` component. */}
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Popover.Panel className="absolute left-0 z-10 mt-1 flex w-screen max-w-max -translate-x-1/5 px-4">
+              <div className="w-fit-content flex-auto rounded bg-white dark:bg-slate-800 p-4 text-sm leading-6 shadow-lg dark:shadow-slate-900 ring-1 ring-gray-900/5">
+                <div className="flex flex-row gap-4 text-gray-700 dark:text-gray-100">
+                  <LanguageList
+                    disabled={excludedLanguages}
+                    selected={includedLanguages}
+                    header="Include Languages"
+                    onSelect={(lang) => toggleLanguage('include', lang)}
+                  />
+                  <LanguageList
+                    disabled={includedLanguages}
+                    selected={excludedLanguages}
+                    header="Exclude Languages"
+                    onSelect={(lang) => toggleLanguage('exclude', lang)}
+                  />
+                </div>
+
+                <p className="py-2 block max-w-xs text-gray-500 dark:text-gray-300 text-xs">
+                  Note: <i>When multiple languages are selected, only subjects that are
+                  tagged with <b>all</b> of those languages will be
+                  included/excluded.</i>
+                </p>
+                {(includedLanguages.length > 0 ||
+                  excludedLanguages.length > 0) && (
+                  <div className="flex flex-row mt-2">
+                    <ActionButton
+                      size="xs"
+                      appearance="outlined"
+                      onClick={() => {
+                        clearLanguages()
+                        close()
+                      }}
+                    >
+                      <span className="text-xs">Clear All</span>
+                    </ActionButton>
+                  </div>
+                )}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  )
+}
+
+const LanguageList = ({
+  header,
+  onSelect,
+  selected = [],
+  disabled = [],
+}: {
+  selected: string[]
+  disabled: string[]
+  header: string
+  onSelect: (lang: string) => void
+}) => {
+  return (
+    <div>
+      <h4 className="text-gray-900 dark:text-gray-200 border-b border-gray-300 mb-2 pb-1">
+        {header}
+      </h4>
+      <div className="flex flex-col items-start">
+        {availableLanguageCodes.map((code2) => {
+          const isDisabled = disabled.includes(code2)
+          return (
+            <button
+              className={`w-full flex flex-row items-center justify-between ${
+                isDisabled
+                  ? 'text-gray-400'
+                  : 'text-gray-700 dark:text-gray-100'
+              }`}
+              onClick={() => !isDisabled && onSelect(code2)}
+              key={code2}
+            >
+              {LANGUAGES_MAP_CODE2[code2].name}
+              {selected.includes(code2) && (
+                <CheckIcon className="h-4 w-4 text-green-700" />
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/components/mod-event/EventItem.tsx b/components/mod-event/EventItem.tsx
index c1cf7e98..0e0d005d 100644
--- a/components/mod-event/EventItem.tsx
+++ b/components/mod-event/EventItem.tsx
@@ -194,6 +194,32 @@ const Label = ({
   )
 }
 
+const Tag = ({
+  modEvent,
+}: {
+  modEvent: {
+    event: ComAtprotoAdminDefs.ModEventTag
+  } & ComAtprotoAdminDefs.ModEventView
+}) => {
+  return (
+    <div className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-2">
+      <p>
+        <span>
+          By{' '}
+          {modEvent.creatorHandle
+            ? `@${modEvent.creatorHandle}`
+            : modEvent.createdBy}
+        </span>
+      </p>{' '}
+      {modEvent.event.comment ? (
+        <p className="pb-1">{`${modEvent.event.comment}`}</p>
+      ) : null}
+      <EventLabels header="Added: " labels={modEvent.event.add} />
+      <EventLabels header="Removed: " labels={modEvent.event.remove} />
+    </div>
+  )
+}
+
 const dateFormatter = new Intl.DateTimeFormat('en-US', {
   dateStyle: 'medium',
   timeStyle: 'short',
@@ -242,6 +268,10 @@ export const ModEventItem = ({
     //@ts-ignore
     eventItem = <Label modEvent={modEvent} />
   }
+  if (ComAtprotoAdminDefs.isModEventTag(modEvent.event)) {
+    //@ts-ignore
+    eventItem = <Tag modEvent={modEvent} />
+  }
   if (ComAtprotoAdminDefs.isModEventEmail(modEvent.event)) {
     //@ts-ignore
     eventItem = <Email modEvent={modEvent} />
diff --git a/components/mod-event/EventList.tsx b/components/mod-event/EventList.tsx
index 00854ef3..1706c47c 100644
--- a/components/mod-event/EventList.tsx
+++ b/components/mod-event/EventList.tsx
@@ -75,6 +75,8 @@ export const ModEventList = (
     reportTypes,
     addedLabels,
     removedLabels,
+    addedTags,
+    removedTags,
     includeAllUserRecords,
     modEvents,
     fetchMoreModEvents,
@@ -147,6 +149,8 @@ export const ModEventList = (
             oldestFirst,
             createdAfter,
             createdBefore,
+            addedTags,
+            removedTags,
             changeListFilter,
           }}
         />
@@ -409,6 +413,38 @@ const EventFilterPanel = ({
           </FormLabel>
         </div>
       </div>
+      {types.includes(MOD_EVENTS.TAG) && (
+        <div className="flex flex-row gap-2 mt-2">
+          <FormLabel label="Added Tags" className="flex-1 max-w-sm">
+            <Input
+              type="text"
+              id="addedTags"
+              name="addedTags"
+              placeholder="comma separated tags"
+              className="block w-full"
+              onChange={(e) =>
+                changeListFilter({ field: 'addedTags', value: e.target.value })
+              }
+            />
+          </FormLabel>
+
+          <FormLabel label="Removed Labels" className="flex-1 max-w-sm">
+            <Input
+              type="text"
+              id="removedTags"
+              name="removedTags"
+              placeholder="comma separated tags"
+              className="block w-full"
+              onChange={(e) =>
+                changeListFilter({
+                  field: 'removedTags',
+                  value: e.target.value,
+                })
+              }
+            />
+          </FormLabel>
+        </div>
+      )}
       <div className="flex-row flex gap-2 mt-2">
         {types.includes(MOD_EVENTS.LABEL) && (
           <>
@@ -440,7 +476,7 @@ const EventFilterPanel = ({
 
         {types.includes(MOD_EVENTS.REPORT) && (
           <FormLabel
-            label="Reason"
+            label="Report Reason"
             htmlFor="reasonType"
             className="flex-1 max-w-sm"
           >
diff --git a/components/mod-event/ItemTitle.tsx b/components/mod-event/ItemTitle.tsx
index fad22845..324b4d63 100644
--- a/components/mod-event/ItemTitle.tsx
+++ b/components/mod-event/ItemTitle.tsx
@@ -50,6 +50,10 @@ export const ItemTitle = ({
     eventColor = 'text-blue-400'
     eventTitle = 'Labeled'
   }
+  if (ComAtprotoAdminDefs.isModEventTag(modEvent.event)) {
+    eventColor = 'text-blue-400'
+    eventTitle = 'Tagged'
+  }
   if (ComAtprotoAdminDefs.isModEventMute(modEvent.event)) {
     eventColor = 'text-blue-400'
     eventTitle = 'Muted'
diff --git a/components/mod-event/SelectorButton.tsx b/components/mod-event/SelectorButton.tsx
index aae6df95..6f696d46 100644
--- a/components/mod-event/SelectorButton.tsx
+++ b/components/mod-event/SelectorButton.tsx
@@ -8,6 +8,7 @@ const actions = [
   { text: 'Acknowledge', key: MOD_EVENTS.ACKNOWLEDGE },
   { text: 'Escalate', key: MOD_EVENTS.ESCALATE },
   { text: 'Label', key: MOD_EVENTS.LABEL },
+  { text: 'Tag', key: MOD_EVENTS.TAG },
   { text: 'Mute', key: MOD_EVENTS.MUTE },
   { text: 'Takedown', key: MOD_EVENTS.TAKEDOWN },
   { text: 'Comment', key: MOD_EVENTS.COMMENT },
diff --git a/components/mod-event/constants.ts b/components/mod-event/constants.ts
index 6fb7c63e..22a47604 100644
--- a/components/mod-event/constants.ts
+++ b/components/mod-event/constants.ts
@@ -10,6 +10,7 @@ export const MOD_EVENTS = {
   REPORT: 'com.atproto.admin.defs#modEventReport',
   RESOLVE_APPEAL: 'com.atproto.admin.defs#modEventResolveAppeal',
   EMAIL: 'com.atproto.admin.defs#modEventEmail',
+  TAG: 'com.atproto.admin.defs#modEventTag',
 } as const
 
 export const MOD_EVENT_TITLES = {
@@ -24,4 +25,5 @@ export const MOD_EVENT_TITLES = {
   [MOD_EVENTS.REPORT]: 'Report',
   [MOD_EVENTS.EMAIL]: 'Email Sent',
   [MOD_EVENTS.RESOLVE_APPEAL]: 'Appeal Resolved',
+  [MOD_EVENTS.TAG]: 'Tag',
 }
diff --git a/components/mod-event/useModEventList.tsx b/components/mod-event/useModEventList.tsx
index 04562caa..5945497a 100644
--- a/components/mod-event/useModEventList.tsx
+++ b/components/mod-event/useModEventList.tsx
@@ -37,6 +37,8 @@ const initialListState = {
   reportTypes: [],
   addedLabels: [],
   removedLabels: [],
+  addedTags: '',
+  removedTags: '',
 }
 
 // The 2 fields need overriding because in the initialState, they are set as undefined so the alternative string type is not accepted without override
@@ -63,6 +65,8 @@ type EventListFilterPayload =
   | { field: 'reportTypes'; value: string[] }
   | { field: 'addedLabels'; value: string[] }
   | { field: 'removedLabels'; value: string[] }
+  | { field: 'addedTags'; value: string }
+  | { field: 'removedTags'; value: string }
 
 type EventListAction =
   | {
@@ -132,6 +136,8 @@ export const useModEventList = (
         createdAfter,
         addedLabels,
         removedLabels,
+        addedTags,
+        removedTags,
         reportTypes,
       } = listState
       const queryParams: ComAtprotoAdminQueryModerationEvents.QueryParams = {
@@ -184,6 +190,13 @@ export const useModEventList = (
         }
       }
 
+      if (addedTags?.trim().length) {
+        queryParams.addedTags = addedTags.trim().split(',')
+      }
+      if (removedTags?.trim().length) {
+        queryParams.addedTags = removedTags.trim().split(',')
+      }
+
       return await getModerationEvents(queryParams)
     },
     getNextPageParam: (lastPage) => lastPage.cursor,
@@ -200,7 +213,9 @@ export const useModEventList = (
     listState.oldestFirst ||
     listState.reportTypes.length > 0 ||
     listState.addedLabels.length > 0 ||
-    listState.removedLabels.length > 0
+    listState.removedLabels.length > 0 ||
+    listState.addedTags.length > 0 ||
+    listState.removedTags.length > 0
 
   return {
     // Data from react-query
diff --git a/components/tags/utils.ts b/components/tags/utils.ts
new file mode 100644
index 00000000..affef517
--- /dev/null
+++ b/components/tags/utils.ts
@@ -0,0 +1,5 @@
+export const diffTags = (current: string[], next: string[]) => {
+  const add = next.filter((tag) => !current.includes(tag))
+  const remove = current.filter((tag) => !next.includes(tag))
+  return { add, remove }
+}
diff --git a/package.json b/package.json
index 1088804c..9f5783dd 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "e2e:run": "$(yarn bin)/cypress run"
   },
   "dependencies": {
-    "@atproto/api": "0.9.6",
+    "@atproto/api": "0.9.8",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
     "@tanstack/react-query": "^4.22.0",
diff --git a/yarn.lock b/yarn.lock
index 9f31c25a..b5b87ab3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@atproto/api@0.9.6":
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.6.tgz#768d8f32261199f254883225917ef051c2027c25"
-  integrity sha512-qbBTskuPTyW2VPVptErHtf9pRbZESULmdk9MQJ/Qx2fvtddTF3iksBSyIUySHvnnO0bIDNoBFXY0RZnIyknX0g==
+"@atproto/api@0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.8.tgz#c1a363a10a47edc2a5b62b0910a142c7632262b1"
+  integrity sha512-v3QO2e5MF99JlPEyjhN2LRs8Uv0tf3C0RJwVm83bgp16yLhN2ZQO13z7w99HoGN7dWwoYf/xXWM/PQPJJcxPTA==
   dependencies:
     "@atproto/common-web" "^0.2.3"
     "@atproto/lexicon" "^0.3.1"
@@ -4366,9 +4366,9 @@ tiny-invariant@^1.2.0:
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
 tlds@^1.234.0:
-  version "1.249.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.249.0.tgz#5e10f3428923fef27fa47867770e0aa11b160a35"
-  integrity sha512-PfcE+oqaEhs0U3RDNg4uGg37793cGvlK6+aLAetwR0ImFyV3R2ts1KvU2RfJdtoLn7IFnUEftFFz4br5Wr3caA==
+  version "1.250.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.250.0.tgz#6e387c4d789a21c5429c1781137fe3dbaa514f55"
+  integrity sha512-rWsBfFCWKrjM/o2Q1TTUeYQv6tHSd/umUutDjVs6taTuEgRDIreVYIBgWRWW4ot7jp6n0UVUuxhTLWBtUmPu/w==
 
 tmp@~0.2.1:
   version "0.2.1"