Conditionally render labels button when media exists in post (#5942)

* conditionally render button

* update labels on remove

* tweak

src/view/com/composer/Composer.tsx

@@ -896,13 +896,14 @@ function ComposerPills({
             style={bottomBarAnimatedStyle}
           />
         )}
+        {hasMedia || hasLink ? (
           <LabelsBtn
             labels={draft.labels}
             onChange={nextLabels => {
               dispatch({type: 'update_labels', labels: nextLabels})
             }}
-          hasMedia={hasMedia || hasLink}
           />
+        ) : null}
       </ScrollView>
     </Animated.View>
   )

src/view/com/composer/labels/LabelsBtn.tsx

@@ -21,11 +21,9 @@ import {Text} from '#/components/Typography'
 
 export function LabelsBtn({
   labels,
-  hasMedia,
   onChange,
 }: {
   labels: SelfLabel[]
-  hasMedia: boolean
   onChange: (v: SelfLabel[]) => void
 }) {
   const control = Dialog.useDialogControl()
@@ -45,10 +43,6 @@ export function LabelsBtn({
     onChange([...filtered, newLabel].filter(Boolean) as SelfLabel[])
   }
 
-  if (!hasMedia && hasLabel) {
-    onChange([])
-  }
-
   return (
     <>
       <Button
@@ -65,7 +59,6 @@ export function LabelsBtn({
           msg`Opens a dialog to add a content warning to your post`,
         )}
         style={[
-          !hasMedia && {opacity: 0.5},
           native({
             paddingHorizontal: 8,
             paddingVertical: 6,
@@ -85,7 +78,6 @@ export function LabelsBtn({
         <Dialog.Handle />
         <DialogInner
           labels={labels}
-          hasMedia={hasMedia}
           updateAdultLabels={updateAdultLabels}
           updateOtherLabels={updateOtherLabels}
         />
@@ -96,12 +88,10 @@ export function LabelsBtn({
 
 function DialogInner({
   labels,
-  hasMedia,
   updateAdultLabels,
   updateOtherLabels,
 }: {
   labels: string[]
-  hasMedia: boolean
   updateAdultLabels: (labels: AdultSelfLabel[]) => void
   updateOtherLabels: (labels: OtherSelfLabel[]) => void
 }) {
@@ -119,32 +109,18 @@ function DialogInner({
             <Trans>Add a content warning</Trans>
           </Text>
           <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
-            {hasMedia ? (
             <Trans>
               Choose self-labels that are applicable for the media you are
               posting. If none are selected, this post is suitable for all
               audiences.
             </Trans>
-            ) : (
-              <Trans>
-                No self-labels can be applied to this post because it contains
-                no media.
-              </Trans>
-            )}
           </Text>
         </View>
 
         <View style={[a.my_md, a.gap_lg]}>
-          {hasMedia ? (
-            <>
           <View>
             <View
-                  style={[
+              style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
-                    a.flex_row,
-                    a.align_center,
-                    a.justify_between,
-                    a.pb_sm,
-                  ]}>
               <Text style={[a.font_bold, a.text_lg]}>
                 <Trans>Adult Content</Trans>
               </Text>
@@ -198,12 +174,7 @@ function DialogInner({
           </View>
           <View>
             <View
-                  style={[
+              style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
-                    a.flex_row,
-                    a.align_center,
-                    a.justify_between,
-                    a.pb_sm,
-                  ]}>
               <Text style={[a.font_bold, a.text_lg]}>
                 <Trans>Other</Trans>
               </Text>
@@ -221,9 +192,7 @@ function DialogInner({
                 onChange={values => {
                   updateOtherLabels(values as OtherSelfLabel[])
                 }}>
-                    <Toggle.Item
+                <Toggle.Item name="graphic-media" label={_(msg`Graphic Media`)}>
-                      name="graphic-media"
-                      label={_(msg`Graphic Media`)}>
                   <Toggle.Checkbox />
                   <Toggle.LabelText>
                     <Trans>Graphic Media</Trans>
@@ -237,15 +206,11 @@ function DialogInner({
                     audiences.
                   </Trans>
                 ) : (
-                      <Trans>
+                  <Trans>Does not contain graphic or disturbing content.</Trans>
-                        Does not contain graphic or disturbing content.
-                      </Trans>
                 )}
               </Text>
             </View>
           </View>
-            </>
-          ) : null}
         </View>
       </View>
 

src/view/com/composer/state/composer.ts

@@ -158,6 +158,7 @@ export function composerReducer(
     }
     case 'embed_remove_image': {
       const prevMedia = state.embed.media
+      let nextLabels = state.labels
       if (prevMedia?.type === 'images') {
         const removedImage = action.image
         let nextMedia: ImagesMedia | undefined = {
@@ -168,9 +169,13 @@ export function composerReducer(
         }
         if (nextMedia.images.length === 0) {
           nextMedia = undefined
+          if (!state.embed.link) {
+            nextLabels = []
+          }
         }
         return {
           ...state,
+          labels: nextLabels,
           embed: {
             ...state.embed,
             media: nextMedia,
@@ -220,8 +225,13 @@ export function composerReducer(
       if (prevMedia?.type === 'video') {
         nextMedia = undefined
       }
+      let nextLabels = state.labels
+      if (!state.embed.link) {
+        nextLabels = []
+      }
       return {
         ...state,
+        labels: nextLabels,
         embed: {
           ...state.embed,
           media: nextMedia,
@@ -258,8 +268,13 @@ export function composerReducer(
       }
     }
     case 'embed_remove_link': {
+      let nextLabels = state.labels
+      if (!state.embed.media) {
+        nextLabels = []
+      }
       return {
         ...state,
+        labels: nextLabels,
         embed: {
           ...state.embed,
           link: undefined,