Move self-label button (#5780)

* move self label button?

* rm

* make sure its usable on large font sizes

* tweak wording

* update icon

* tweaks

* change button label and change opacity when no media (#5794)

* Tweak it moar (#5807)

* Tweak it moar

* Pluralize

* Labels

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/composer/Composer.tsx

@@ -13,6 +13,7 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   LayoutChangeEvent,
+  ScrollView,
   StyleProp,
   StyleSheet,
   View,
@@ -559,45 +560,30 @@ export const ComposePost = ({
                     <ActivityIndicator />
                   </View>
                 </>
+              ) : canPost ? (
+                <Button
+                  testID="composerPublishBtn"
+                  label={replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)}
+                  variant="solid"
+                  color="primary"
+                  shape="default"
+                  size="small"
+                  style={[a.rounded_full, a.py_sm]}
+                  onPress={() => onPressPublish()}
+                  disabled={videoState.status !== 'idle' && publishOnUpload}>
+                  <ButtonText style={[a.text_md]}>
+                    {replyTo ? (
+                      <Trans context="action">Reply</Trans>
+                    ) : (
+                      <Trans context="action">Post</Trans>
+                    )}
+                  </ButtonText>
+                </Button>
               ) : (
-                <View style={[styles.postBtnWrapper]}>
+                <View style={[styles.postBtn, pal.btn]}>
-                  <LabelsBtn
+                  <Text style={[pal.textLight, s.f16, s.bold]}>
-                    labels={draft.labels}
+                    <Trans context="action">Post</Trans>
-                    onChange={nextLabels => {
+                  </Text>
-                      dispatch({type: 'update_labels', labels: nextLabels})
-                    }}
-                    hasMedia={hasMedia || Boolean(extLink)}
-                  />
-                  {canPost ? (
-                    <Button
-                      testID="composerPublishBtn"
-                      label={
-                        replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)
-                      }
-                      variant="solid"
-                      color="primary"
-                      shape="default"
-                      size="small"
-                      style={[a.rounded_full, a.py_sm]}
-                      onPress={() => onPressPublish()}
-                      disabled={
-                        videoState.status !== 'idle' && publishOnUpload
-                      }>
-                      <ButtonText style={[a.text_md]}>
-                        {replyTo ? (
-                          <Trans context="action">Reply</Trans>
-                        ) : (
-                          <Trans context="action">Post</Trans>
-                        )}
-                      </ButtonText>
-                    </Button>
-                  ) : (
-                    <View style={[styles.postBtn, pal.btn]}>
-                      <Text style={[pal.textLight, s.f16, s.bold]}>
-                        <Trans context="action">Post</Trans>
-                      </Text>
-                    </View>
-                  )}
                 </View>
               )}
             </View>
@@ -758,22 +744,38 @@ export const ComposePost = ({
           </Animated.ScrollView>
           <SuggestedLanguage text={richtext.text} />
 
-          {replyTo ? null : (
+          <Animated.View
-            <ThreadgateBtn
+            style={[a.flex_row, a.p_sm, t.atoms.bg, bottomBarAnimatedStyle]}>
-              postgate={draft.postgate}
+            <ScrollView
-              onChangePostgate={nextPostgate => {
+              contentContainerStyle={[a.gap_sm]}
-                dispatch({type: 'update_postgate', postgate: nextPostgate})
+              horizontal={true}
-              }}
+              bounces={false}
-              threadgateAllowUISettings={draft.threadgate}
+              showsHorizontalScrollIndicator={false}>
-              onChangeThreadgateAllowUISettings={nextThreadgate => {
+              {replyTo ? null : (
-                dispatch({
+                <ThreadgateBtn
-                  type: 'update_threadgate',
+                  postgate={draft.postgate}
-                  threadgate: nextThreadgate,
+                  onChangePostgate={nextPostgate => {
-                })
+                    dispatch({type: 'update_postgate', postgate: nextPostgate})
-              }}
+                  }}
-              style={bottomBarAnimatedStyle}
+                  threadgateAllowUISettings={draft.threadgate}
-            />
+                  onChangeThreadgateAllowUISettings={nextThreadgate => {
-          )}
+                    dispatch({
+                      type: 'update_threadgate',
+                      threadgate: nextThreadgate,
+                    })
+                  }}
+                  style={bottomBarAnimatedStyle}
+                />
+              )}
+              <LabelsBtn
+                labels={draft.labels}
+                onChange={nextLabels => {
+                  dispatch({type: 'update_labels', labels: nextLabels})
+                }}
+                hasMedia={hasMedia || Boolean(extLink)}
+              />
+            </ScrollView>
+          </Animated.View>
           <View
             style={[
               a.flex_row,
@@ -988,10 +990,6 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     marginLeft: 12,
   },
-  postBtnWrapper: {
-    flexDirection: 'row',
-    gap: 14,
-  },
   errorLine: {
     flexDirection: 'row',
     alignItems: 'center',

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

@@ -3,7 +3,6 @@ import {Keyboard, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ShieldExclamation} from '#/lib/icons'
 import {
   ADULT_CONTENT_LABELS,
   AdultSelfLabel,
@@ -12,12 +11,14 @@ import {
   SelfLabel,
 } from '#/lib/moderation'
 import {isWeb} from '#/platform/detection'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, native, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Shield_Stroke2_Corner0_Rounded} from '#/components/icons/Shield'
 import {Text} from '#/components/Typography'
+
 export function LabelsBtn({
   labels,
   hasMedia,
@@ -28,7 +29,6 @@ export function LabelsBtn({
   onChange: (v: SelfLabel[]) => void
 }) {
   const control = Dialog.useDialogControl()
-  const t = useTheme()
   const {_} = useLingui()
 
   const hasLabel = labels.length > 0
@@ -52,20 +52,33 @@ export function LabelsBtn({
   return (
     <>
       <Button
+        variant="solid"
+        color="secondary"
+        size="small"
         testID="labelsBtn"
-        style={!hasMedia && {opacity: 0.4}}
+        onPress={() => {
+          Keyboard.dismiss()
+          control.open()
+        }}
         label={_(msg`Content warnings`)}
         accessibilityHint={_(
           msg`Opens a dialog to add a content warning to your post`,
         )}
-        onPress={() => {
+        style={[
-          Keyboard.dismiss()
+          !hasMedia && {opacity: 0.5},
-          control.open()
+          native({
-        }}>
+            paddingHorizontal: 8,
-        <ShieldExclamation style={{color: t.palette.primary_500}} size={24} />
+            paddingVertical: 6,
-        {labels.length > 0 ? (
+          }),
-          <Check size="sm" fill={t.palette.primary_500} />
+        ]}>
-        ) : null}
+        <ButtonIcon icon={hasLabel ? Check : Shield_Stroke2_Corner0_Rounded} />
+        <ButtonText numberOfLines={1}>
+          {labels.length > 0 ? (
+            <Trans>Labels added</Trans>
+          ) : (
+            <Trans>Labels</Trans>
+          )}
+        </ButtonText>
       </Button>
 
       <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
@@ -114,7 +127,8 @@ function DialogInner({
               </Trans>
             ) : (
               <Trans>
-                There are no self-labels that can be applied to this post.
+                No self-labels can be applied to this post because it contains
+                no media.
               </Trans>
             )}
           </Text>
@@ -235,7 +249,7 @@ function DialogInner({
         </View>
       </View>
 
-      <View style={[a.mt_sm]}>
+      <View style={[a.mt_sm, web([a.flex_row, a.ml_auto])]}>
         <Button
           label={_(msg`Done`)}
           onPress={() => control.close()}

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import {Keyboard, StyleProp, ViewStyle} from 'react-native'
-import Animated, {AnimatedStyle} from 'react-native-reanimated'
+import {AnimatedStyle} from 'react-native-reanimated'
 import {AppBskyFeedPostgate} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
 import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
-import {atoms as a, useTheme} from '#/alf'
+import {native} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {PostInteractionSettingsControlledDialog} from '#/components/dialogs/PostInteractionSettingsDialog'
@@ -19,7 +19,6 @@ export function ThreadgateBtn({
   onChangePostgate,
   threadgateAllowUISettings,
   onChangeThreadgateAllowUISettings,
-  style,
 }: {
   postgate: AppBskyFeedPostgate.Record
   onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
@@ -30,7 +29,6 @@ export function ThreadgateBtn({
   style?: StyleProp<AnimatedStyle<ViewStyle>>
 }) {
   const {_} = useLingui()
-  const t = useTheme()
   const control = Dialog.useDialogControl()
 
   const onPress = () => {
@@ -53,24 +51,25 @@ export function ThreadgateBtn({
 
   return (
     <>
-      <Animated.View style={[a.flex_row, a.p_sm, t.atoms.bg, style]}>
+      <Button
-        <Button
+        variant="solid"
-          variant="solid"
+        color="secondary"
-          color="secondary"
+        size="small"
-          size="small"
+        testID="openReplyGateButton"
-          testID="openReplyGateButton"
+        onPress={onPress}
-          onPress={onPress}
+        label={label}
-          label={label}
+        accessibilityHint={_(
-          accessibilityHint={_(
+          msg`Opens a dialog to choose who can reply to this thread`,
-            msg`Opens a dialog to choose who can reply to this thread`,
+        )}
-          )}
+        style={[
-          style={
+          native({
-            !isNative ? {paddingVertical: 6, paddingHorizontal: 8} : undefined
+            paddingHorizontal: 8,
-          }>
+            paddingVertical: 6,
-          <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
+          }),
-          <ButtonText numberOfLines={1}>{label}</ButtonText>
+        ]}>
-        </Button>
+        <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
-      </Animated.View>
+        <ButtonText numberOfLines={1}>{label}</ButtonText>
+      </Button>
       <PostInteractionSettingsControlledDialog
         control={control}
         onSave={() => {