Add self-labeling controls (#1141)

* Add self-label modal

* Use the shield-exclamation icon consistently on post moderation

* Wire up self-labeling

* Bump @atproto/api@0.6.0

* Bump @atproto/dev-env@^0.2.3

* Add e2e test for self-labeling

* Fix types

1 files changed, 15 insertions, 8 deletions

diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx
index 503c49b2f..4b494264e 100644
--- a/src/view/com/util/forms/SelectableBtn.tsx
+++ b/src/view/com/util/forms/SelectableBtn.tsx
@@ -5,6 +5,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {isDesktopWeb} from 'platform/detection'
 
 interface SelectableBtnProps {
+  testID?: string
   selected: boolean
   label: string
   left?: boolean
@@ -15,6 +16,7 @@ interface SelectableBtnProps {
 }
 
 export function SelectableBtn({
+  testID,
   selected,
   label,
   left,
@@ -25,12 +27,15 @@ export function SelectableBtn({
 }: SelectableBtnProps) {
   const pal = usePalette('default')
   const palPrimary = usePalette('inverted')
+  const needsWidthStyles = !style || !('width' in style || 'flex' in style)
   return (
     <Pressable
+      testID={testID}
       style={[
-        styles.selectableBtn,
-        left && styles.selectableBtnLeft,
-        right && styles.selectableBtnRight,
+        styles.btn,
+        needsWidthStyles && styles.btnWidth,
+        left && styles.btnLeft,
+        right && styles.btnRight,
         pal.border,
         selected ? palPrimary.view : pal.view,
         style,
@@ -45,9 +50,7 @@ export function SelectableBtn({
 }
 
 const styles = StyleSheet.create({
-  selectableBtn: {
-    flex: isDesktopWeb ? undefined : 1,
-    width: isDesktopWeb ? 100 : undefined,
+  btn: {
     flexDirection: 'row',
     justifyContent: 'center',
     borderWidth: 1,
@@ -55,12 +58,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 10,
   },
-  selectableBtnLeft: {
+  btnWidth: {
+    flex: isDesktopWeb ? undefined : 1,
+    width: isDesktopWeb ? 100 : undefined,
+  },
+  btnLeft: {
     borderTopLeftRadius: 8,
     borderBottomLeftRadius: 8,
     borderLeftWidth: 1,
   },
-  selectableBtnRight: {
+  btnRight: {
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
   },