Add WIP 'report post' modal

src/view/com/util/DropdownBtn.tsx

@@ -15,7 +15,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
 import {toShareUrl} from '../../../lib/strings'
 import {useStores} from '../../../state'
-import {ConfirmModal} from '../../../state/models/shell-ui'
+import {ReportPostModal, ConfirmModal} from '../../../state/models/shell-ui'
 import {TABS_ENABLED} from '../../../build-flags'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
@@ -116,6 +116,13 @@ export function PostDropdownBtn({
         Share.share({url: toShareUrl(itemHref)})
       },
     },
+    {
+      icon: 'circle-exclamation',
+      label: 'Report post',
+      onPress() {
+        store.shell.openModal(new ReportPostModal(itemHref))
+      },
+    },
     isAuthor
       ? {
           icon: ['far', 'trash-can'],

src/view/com/util/forms/RadioButton.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {colors} from '../../../lib/styles'
+
+export function RadioButton({
+  label,
+  isSelected,
+  onPress,
+}: {
+  label: string
+  isSelected: boolean
+  onPress: () => void
+}) {
+  return (
+    <TouchableOpacity style={styles.outer} onPress={onPress}>
+      <View style={styles.circle}>
+        {isSelected ? <View style={styles.circleFill} /> : undefined}
+      </View>
+      <Text style={styles.label}>{label}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 5,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.gray2,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  circle: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    padding: 4,
+    borderWidth: 1,
+    borderColor: colors.gray3,
+    marginRight: 10,
+  },
+  circleFill: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: colors.blue3,
+  },
+  label: {
+    flex: 1,
+    fontSize: 17,
+  },
+})

src/view/com/util/forms/RadioGroup.tsx

@@ -0,0 +1,34 @@
+import React, {useState} from 'react'
+import {View} from 'react-native'
+import {RadioButton} from './RadioButton'
+
+export interface RadioGroupItem {
+  label: string
+  key: string
+}
+
+export function RadioGroup({
+  items,
+  onSelect,
+}: {
+  items: RadioGroupItem[]
+  onSelect: (key: string) => void
+}) {
+  const [selection, setSelection] = useState<string>('')
+  const onSelectInner = (key: string) => {
+    setSelection(key)
+    onSelect(key)
+  }
+  return (
+    <View>
+      {items.map(item => (
+        <RadioButton
+          key={item.key}
+          label={item.label}
+          isSelected={item.key === selection}
+          onPress={() => onSelectInner(item.key)}
+        />
+      ))}
+    </View>
+  )
+}