✨ Add ack all option to takedown action in workspace

components/common/forms/index.tsx

@@ -1,5 +1,6 @@
 import { ComponentProps, forwardRef } from 'react'
 import { CopyButton } from '../CopyButton'
+import { classNames } from '@/lib/util'
 
 export const Input = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
   function Input(props: ComponentProps<'input'>, ref) {
@@ -138,33 +139,33 @@ export function FormLabel(
   )
 }
 
-export const Checkbox = forwardRef<
-  HTMLInputElement,
-  LabelProps & ComponentProps<'input'>
->(function CheckboxElement(
-  {
-    label,
-    required,
-    className,
-    ...rest
-  }: LabelProps & ComponentProps<'input'> & { className?: string },
-  ref,
-) {
-  return (
-    <div className={className}>
-      <input
-        ref={ref}
-        type="checkbox"
-        className="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-teal-500 focus:ring-indigo-600 dark:focus:ring-teal-500 mr-1"
-        {...rest}
-      />
-      <label
-        htmlFor={rest.name}
-        className="ml-1 text-sm leading-6 font-medium text-gray-900 dark:text-gray-200"
-      >
-        {label}
-        {required && <sup className="text-red-500">*</sup>}
-      </label>
-    </div>
-  )
-})
+type CheckboxProps = LabelProps &
+  ComponentProps<'input'> & { className?: string; inputClassName?: string }
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function CheckboxElement(
+    { label, required, className, inputClassName, ...rest }: CheckboxProps,
+    ref,
+  ) {
+    return (
+      <div className={className}>
+        <input
+          ref={ref}
+          type="checkbox"
+          className={classNames(
+            'h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-teal-500 focus:ring-indigo-600 dark:focus:ring-teal-500 mr-1',
+            inputClassName,
+          )}
+          {...rest}
+        />
+        <label
+          htmlFor={rest.name}
+          className="ml-1 text-sm leading-6 font-medium text-gray-900 dark:text-gray-200"
+        >
+          {label}
+          {required && <sup className="text-red-500">*</sup>}
+        </label>
+      </div>
+    )
+  },
+)

components/workspace/Panel.tsx

@@ -113,6 +113,13 @@ export function WorkspacePanel(props: PropsOf<typeof ActionPanel>) {
         coreEvent.reportType = ComAtprotoModerationDefs.REASONAPPEAL
       }
 
+      if (
+        coreEvent.$type === MOD_EVENTS.TAKEDOWN &&
+        formData.get('acknowledgeAccountSubjects')
+      ) {
+        coreEvent.acknowledgeAccountSubjects = true
+      }
+
       // No need to break if one of the requests fail, continue on with others
       const results = await actionSubjects(
         { event: coreEvent },

components/workspace/PanelActionForm.tsx

@@ -16,12 +16,14 @@ export const WorkspacePanelActionForm = ({
   setModEventType: (action: string) => void
   onCancel: () => void
 }) => {
+  const isTakedownEvent = modEventType === MOD_EVENTS.TAKEDOWN
   const isCommentEvent = modEventType === MOD_EVENTS.COMMENT
   const isMuteEvent = modEventType === MOD_EVENTS.MUTE
   const isTagEvent = modEventType === MOD_EVENTS.TAG
   const isLabelEvent = modEventType === MOD_EVENTS.LABEL
   const shouldShowDurationInHoursField =
     modEventType === MOD_EVENTS.TAKEDOWN || isMuteEvent
+
   return (
     <div className="mb-4 w-1/2">
       <div className="relative flex flex-row gap-1 items-center">
@@ -99,6 +101,22 @@ export const WorkspacePanelActionForm = ({
           label="Update the subject's persistent note with this comment"
         />
       )}
+      {isTakedownEvent && (
+        <Checkbox
+          value="true"
+          id="acknowledgeAccountSubjects"
+          name="acknowledgeAccountSubjects"
+          className="mb-3 flex items-start leading-3"
+          inputClassName="mt-1"
+          label={
+            <span className="leading-4">
+              Acknowledge all open/escalated/appealed reports on subjects
+              created by accounts that you are taking down.
+            </span>
+          }
+        />
+      )}
+
       <div className="flex flex-row gap-2">
         <ActionButton appearance="primary" type="submit" size="sm">
           Submit Action