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

* conditionally render button

* update labels on remove

* tweak

3 files changed, 120 insertions, 139 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index a523c3f52..af0326d90 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -896,13 +896,14 @@ function ComposerPills({
             style={bottomBarAnimatedStyle}
           />
         )}
-        <LabelsBtn
-          labels={draft.labels}
-          onChange={nextLabels => {
-            dispatch({type: 'update_labels', labels: nextLabels})
-          }}
-          hasMedia={hasMedia || hasLink}
-        />
+        {hasMedia || hasLink ? (
+          <LabelsBtn
+            labels={draft.labels}
+            onChange={nextLabels => {
+              dispatch({type: 'update_labels', labels: nextLabels})
+            }}
+          />
+        ) : null}
       </ScrollView>
     </Animated.View>
   )
diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx
index bac2d756a..fe8816fb4 100644
--- a/src/view/com/composer/labels/LabelsBtn.tsx
+++ b/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,133 +109,108 @@ 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>
-            )}
+            <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>
           </Text>
         </View>
 
         <View style={[a.my_md, a.gap_lg]}>
-          {hasMedia ? (
-            <>
-              <View>
-                <View
-                  style={[
-                    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>
-                </View>
-                <View
-                  style={[
-                    a.p_md,
-                    a.rounded_sm,
-                    a.border,
-                    t.atoms.border_contrast_medium,
-                  ]}>
-                  <Toggle.Group
-                    label={_(msg`Adult Content labels`)}
-                    values={labels}
-                    onChange={values => {
-                      updateAdultLabels(values as AdultSelfLabel[])
-                    }}>
-                    <View style={[a.gap_sm]}>
-                      <Toggle.Item name="sexual" label={_(msg`Suggestive`)}>
-                        <Toggle.Radio />
-                        <Toggle.LabelText>
-                          <Trans>Suggestive</Trans>
-                        </Toggle.LabelText>
-                      </Toggle.Item>
-                      <Toggle.Item name="nudity" label={_(msg`Nudity`)}>
-                        <Toggle.Radio />
-                        <Toggle.LabelText>
-                          <Trans>Nudity</Trans>
-                        </Toggle.LabelText>
-                      </Toggle.Item>
-                      <Toggle.Item name="porn" label={_(msg`Porn`)}>
-                        <Toggle.Radio />
-                        <Toggle.LabelText>
-                          <Trans>Porn</Trans>
-                        </Toggle.LabelText>
-                      </Toggle.Item>
-                    </View>
-                  </Toggle.Group>
-                  <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
-                    {labels.includes('sexual') ? (
-                      <Trans>Pictures meant for adults.</Trans>
-                    ) : labels.includes('nudity') ? (
-                      <Trans>Artistic or non-erotic nudity.</Trans>
-                    ) : labels.includes('porn') ? (
-                      <Trans>Sexual activity or erotic nudity.</Trans>
-                    ) : (
-                      <Trans>Does not contain adult content.</Trans>
-                    )}
-                  </Text>
-                </View>
-              </View>
-              <View>
-                <View
-                  style={[
-                    a.flex_row,
-                    a.align_center,
-                    a.justify_between,
-                    a.pb_sm,
-                  ]}>
-                  <Text style={[a.font_bold, a.text_lg]}>
-                    <Trans>Other</Trans>
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    a.p_md,
-                    a.rounded_sm,
-                    a.border,
-                    t.atoms.border_contrast_medium,
-                  ]}>
-                  <Toggle.Group
-                    label={_(msg`Adult Content labels`)}
-                    values={labels}
-                    onChange={values => {
-                      updateOtherLabels(values as OtherSelfLabel[])
-                    }}>
-                    <Toggle.Item
-                      name="graphic-media"
-                      label={_(msg`Graphic Media`)}>
-                      <Toggle.Checkbox />
-                      <Toggle.LabelText>
-                        <Trans>Graphic Media</Trans>
-                      </Toggle.LabelText>
-                    </Toggle.Item>
-                  </Toggle.Group>
-                  <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
-                    {labels.includes('graphic-media') ? (
-                      <Trans>
-                        Media that may be disturbing or inappropriate for some
-                        audiences.
-                      </Trans>
-                    ) : (
-                      <Trans>
-                        Does not contain graphic or disturbing content.
-                      </Trans>
-                    )}
-                  </Text>
+          <View>
+            <View
+              style={[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>
+            </View>
+            <View
+              style={[
+                a.p_md,
+                a.rounded_sm,
+                a.border,
+                t.atoms.border_contrast_medium,
+              ]}>
+              <Toggle.Group
+                label={_(msg`Adult Content labels`)}
+                values={labels}
+                onChange={values => {
+                  updateAdultLabels(values as AdultSelfLabel[])
+                }}>
+                <View style={[a.gap_sm]}>
+                  <Toggle.Item name="sexual" label={_(msg`Suggestive`)}>
+                    <Toggle.Radio />
+                    <Toggle.LabelText>
+                      <Trans>Suggestive</Trans>
+                    </Toggle.LabelText>
+                  </Toggle.Item>
+                  <Toggle.Item name="nudity" label={_(msg`Nudity`)}>
+                    <Toggle.Radio />
+                    <Toggle.LabelText>
+                      <Trans>Nudity</Trans>
+                    </Toggle.LabelText>
+                  </Toggle.Item>
+                  <Toggle.Item name="porn" label={_(msg`Porn`)}>
+                    <Toggle.Radio />
+                    <Toggle.LabelText>
+                      <Trans>Porn</Trans>
+                    </Toggle.LabelText>
+                  </Toggle.Item>
                 </View>
-              </View>
-            </>
-          ) : null}
+              </Toggle.Group>
+              <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
+                {labels.includes('sexual') ? (
+                  <Trans>Pictures meant for adults.</Trans>
+                ) : labels.includes('nudity') ? (
+                  <Trans>Artistic or non-erotic nudity.</Trans>
+                ) : labels.includes('porn') ? (
+                  <Trans>Sexual activity or erotic nudity.</Trans>
+                ) : (
+                  <Trans>Does not contain adult content.</Trans>
+                )}
+              </Text>
+            </View>
+          </View>
+          <View>
+            <View
+              style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
+              <Text style={[a.font_bold, a.text_lg]}>
+                <Trans>Other</Trans>
+              </Text>
+            </View>
+            <View
+              style={[
+                a.p_md,
+                a.rounded_sm,
+                a.border,
+                t.atoms.border_contrast_medium,
+              ]}>
+              <Toggle.Group
+                label={_(msg`Adult Content labels`)}
+                values={labels}
+                onChange={values => {
+                  updateOtherLabels(values as OtherSelfLabel[])
+                }}>
+                <Toggle.Item name="graphic-media" label={_(msg`Graphic Media`)}>
+                  <Toggle.Checkbox />
+                  <Toggle.LabelText>
+                    <Trans>Graphic Media</Trans>
+                  </Toggle.LabelText>
+                </Toggle.Item>
+              </Toggle.Group>
+              <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
+                {labels.includes('graphic-media') ? (
+                  <Trans>
+                    Media that may be disturbing or inappropriate for some
+                    audiences.
+                  </Trans>
+                ) : (
+                  <Trans>Does not contain graphic or disturbing content.</Trans>
+                )}
+              </Text>
+            </View>
+          </View>
         </View>
       </View>
 
diff --git a/src/view/com/composer/state/composer.ts b/src/view/com/composer/state/composer.ts
index 049488f3a..3c1edb6bd 100644
--- a/src/view/com/composer/state/composer.ts
+++ b/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,