Rework list of labels on own content

src/view/com/modals/AppealLabel.tsx

@@ -1,139 +0,0 @@
-import React, {useState} from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {ComAtprotoModerationDefs} from '@atproto/api'
-import {ScrollView, TextInput} from './util'
-import {Text} from '../util/text/Text'
-import {s, colors} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
-import {CharProgress} from '../composer/char-progress/CharProgress'
-import {getAgent} from '#/state/session'
-import * as Toast from '../util/Toast'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-
-export const snapPoints = ['40%']
-
-type ReportComponentProps =
-  | {
-      uri: string
-      cid: string
-    }
-  | {
-      did: string
-    }
-
-export function Component(props: ReportComponentProps) {
-  const pal = usePalette('default')
-  const [details, setDetails] = useState<string>('')
-  const {_} = useLingui()
-  const {closeModal} = useModalControls()
-  const {isMobile} = useWebMediaQueries()
-  const isAccountReport = 'did' in props
-
-  const submit = async () => {
-    try {
-      const $type = !isAccountReport
-        ? 'com.atproto.repo.strongRef'
-        : 'com.atproto.admin.defs#repoRef'
-      await getAgent().createModerationReport({
-        reasonType: ComAtprotoModerationDefs.REASONAPPEAL,
-        subject: {
-          $type,
-          ...props,
-        },
-        reason: details,
-      })
-      Toast.show(_(msg`We'll look into your appeal promptly.`))
-    } finally {
-      closeModal()
-    }
-  }
-
-  return (
-    <View
-      style={[
-        pal.view,
-        s.flex1,
-        isMobile ? {paddingHorizontal: 12} : undefined,
-      ]}
-      testID="appealLabelModal">
-      <Text
-        type="2xl-bold"
-        style={[pal.text, s.textCenter, {paddingBottom: 8}]}>
-        <Trans>Appeal Content Warning</Trans>
-      </Text>
-      <ScrollView>
-        <View style={[pal.btn, styles.detailsInputContainer]}>
-          <TextInput
-            accessibilityLabel={_(msg`Text input field`)}
-            accessibilityHint={_(
-              msg`Please tell us why you think this content warning was incorrectly applied!`,
-            )}
-            placeholder={_(
-              msg`Please tell us why you think this content warning was incorrectly applied!`,
-            )}
-            placeholderTextColor={pal.textLight.color}
-            value={details}
-            onChangeText={setDetails}
-            autoFocus={true}
-            numberOfLines={3}
-            multiline={true}
-            textAlignVertical="top"
-            maxLength={300}
-            style={[styles.detailsInput, pal.text]}
-          />
-          <View style={styles.detailsInputBottomBar}>
-            <View style={styles.charCounter}>
-              <CharProgress count={details?.length || 0} />
-            </View>
-          </View>
-        </View>
-        <TouchableOpacity
-          testID="confirmBtn"
-          onPress={submit}
-          style={styles.btn}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Confirm`)}
-          accessibilityHint="">
-          <Text style={[s.white, s.bold, s.f18]}>
-            <Trans>Submit</Trans>
-          </Text>
-        </TouchableOpacity>
-      </ScrollView>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  detailsInputContainer: {
-    borderRadius: 8,
-    marginBottom: 8,
-  },
-  detailsInput: {
-    paddingHorizontal: 12,
-    paddingTop: 12,
-    paddingBottom: 12,
-    borderRadius: 8,
-    minHeight: 100,
-    fontSize: 16,
-  },
-  detailsInputBottomBar: {
-    alignSelf: 'flex-end',
-  },
-  charCounter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingRight: 10,
-    paddingBottom: 8,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.blue3,
-  },
-})

src/view/com/modals/Modal.tsx

@@ -17,7 +17,6 @@ import * as ListAddUserModal from './ListAddRemoveUsers'
 import * as AltImageModal from './AltImage'
 import * as EditImageModal from './AltImage'
 import * as ReportModal from './report/Modal'
-import * as AppealLabelModal from './AppealLabel'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as WaitlistModal from './Waitlist'
@@ -75,9 +74,6 @@ export function ModalsContainer() {
   } else if (activeModal?.name === 'report') {
     snapPoints = ReportModal.snapPoints
     element = <ReportModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'appeal-label') {
-    snapPoints = AppealLabelModal.snapPoints
-    element = <AppealLabelModal.Component {...activeModal} />
   } else if (activeModal?.name === 'create-or-edit-list') {
     snapPoints = CreateOrEditListModal.snapPoints
     element = <CreateOrEditListModal.Component {...activeModal} />

src/view/com/modals/Modal.web.tsx

@@ -10,7 +10,6 @@ import type {Modal as ModalIface} from '#/state/modals'
 import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
 import * as ReportModal from './report/Modal'
-import * as AppealLabelModal from './AppealLabel'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as UserAddRemoveLists from './UserAddRemoveLists'
 import * as ListAddUserModal from './ListAddRemoveUsers'
@@ -84,8 +83,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <EditProfileModal.Component {...modal} />
   } else if (modal.name === 'report') {
     element = <ReportModal.Component {...modal} />
-  } else if (modal.name === 'appeal-label') {
-    element = <AppealLabelModal.Component {...modal} />
   } else if (modal.name === 'create-or-edit-list') {
     element = <CreateOrEditListModal.Component {...modal} />
   } else if (modal.name === 'user-add-remove-lists') {