Add auto-redact to V2 (#4417)

# Description of Changes
Adds auto-redact tool to V2, with manual-redact in the UI but explicitly
disabled.

Also creates a shared component for the large buttons we're using in a
couple different tools and uses consistently.

frontend/src/components/shared/ButtonSelector.tsx

@@ -0,0 +1,59 @@
+import { Button, Group, Stack, Text } from "@mantine/core";
+
+export interface ButtonOption<T> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+interface ButtonSelectorProps<T> {
+  value: T | undefined;
+  onChange: (value: T) => void;
+  options: ButtonOption<T>[];
+  label?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+}
+
+const ButtonSelector = <T extends string>({
+  value,
+  onChange,
+  options,
+  label = undefined,
+  disabled = false,
+  fullWidth = true,
+}: ButtonSelectorProps<T>) => {
+  return (
+    <Stack gap='var(--mantine-spacing-sm)'>
+      {/* Label (if it exists) */}
+      {label && <Text style={{
+        fontSize: "var(--mantine-font-size-sm)",
+        lineHeight: "var(--mantine-line-height-sm)",
+        fontWeight: "var(--font-weight-medium)",
+      }}>{label}</Text>}
+
+      {/* Buttons */}
+      <Group gap='4px'>
+        {options.map((option) => (
+          <Button
+            key={option.value}
+            variant={value === option.value ? 'filled' : 'outline'}
+            color={value === option.value ? 'var(--color-primary-500)' : 'var(--text-muted)'}
+            onClick={() => onChange(option.value)}
+            disabled={disabled || option.disabled}
+            style={{
+              flex: fullWidth ? 1 : undefined,
+              height: 'auto',
+              minHeight: '2.5rem',
+              fontSize: 'var(--mantine-font-size-sm)'
+            }}
+          >
+            {option.label}
+          </Button>
+        ))}
+      </Group>
+    </Stack>
+  );
+};
+
+export default ButtonSelector;