[C-4672] [C-4745] [C-4807] Advanced search UI qa fixes

packages/mobile/src/components/notification-reminder/NotificationReminder.tsx

@@ -53,7 +53,6 @@ const NotificationReminderInternal = () => {
           dispatch(
             setVisibility({ drawer: 'EnablePushNotifications', visible: true })
           )
-          return
       }
     } catch (error) {
       // Not sure what happened, but swallow the error. Not worth blocking on.

packages/mobile/src/harmony-native/components/input/SelectablePill/SelectablePill.tsx

@@ -4,7 +4,6 @@ import { useControlled } from '@audius/harmony/src/hooks/useControlled'
 import { css } from '@emotion/native'
 import { Pressable } from 'react-native'
 import type { GestureResponderEvent } from 'react-native'
-import { Gesture, GestureDetector, State } from 'react-native-gesture-handler'
 import Animated, {
   interpolate,
   interpolateColor,
@@ -35,7 +34,7 @@ export const SelectablePill = (props: SelectablePillProps) => {
     value,
     style: styleProp,
     fullWidth,
-    isControlled,
+    disableUnselectAnimation,
     ...other
   } = props
   const { color, motion, cornerRadius, typography } = useTheme()
@@ -50,8 +49,20 @@ export const SelectablePill = (props: SelectablePillProps) => {
   const selected = useSharedValue(isSelected ? 1 : 0)
 
   const handlePressIn = useCallback(() => {
+    pressed.value = withTiming(1, motion.press)
+    if (!isSelected) {
+      selected.value = withTiming(1, motion.press)
+    }
     setIsPressing(true)
-  }, [])
+  }, [pressed, motion.press, selected, setIsPressing, isSelected])
+
+  const handleTouchCancel = useCallback(() => {
+    pressed.value = withTiming(0, motion.press)
+    if (!isSelected) {
+      selected.value = withTiming(0, motion.press)
+    }
+    setIsPressing(false)
+  }, [pressed, motion.press, selected, setIsPressing, isSelected])
 
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
@@ -65,28 +76,22 @@ export const SelectablePill = (props: SelectablePillProps) => {
     [onChange, onPress, value, isSelected, setIsSelected]
   )
 
-  const tap = Gesture.Tap()
-    .shouldCancelWhenOutside(true)
-    .onBegin(() => {
-      pressed.value = withTiming(1, motion.press)
-      if (!isSelected) {
-        selected.value = withTiming(1, motion.press)
-      }
-    })
-    .onFinalize((event) => {
-      pressed.value = withTiming(0, motion.press)
-      const isDeselect =
-        event.state === State.END && isSelected && !isControlled
-      const isCancel = event.state !== State.END && !isSelected
-      if (isDeselect || isCancel) {
-        selected.value = withTiming(0, motion.press)
-      }
-    })
-
   useEffect(() => {
     setIsSelected(isSelectedProp)
-    selected.value = withTiming(isSelectedProp ? 1 : 0, motion.press)
-  }, [isSelectedProp, motion.press, selected, setIsSelected])
+    if (isSelectedProp) {
+      selected.value = withTiming(1, motion.press)
+    } else {
+      selected.value = disableUnselectAnimation
+        ? 0
+        : withTiming(0, motion.press)
+    }
+  }, [
+    isSelectedProp,
+    motion.press,
+    selected,
+    setIsSelected,
+    disableUnselectAnimation
+  ])
 
   const animatedRootStyles = useAnimatedStyle(() => ({
     opacity: withTiming(disabled ? 0.45 : 1, motion.press),
@@ -112,56 +117,49 @@ export const SelectablePill = (props: SelectablePillProps) => {
   }))
 
   return (
-    <GestureDetector gesture={tap}>
-      <Pressable
-        onPressIn={handlePressIn}
-        onPress={handlePress}
-        style={[
-          css({ alignSelf: 'flex-start', borderRadius: cornerRadius['2xl'] }),
-          styleProp
-        ]}
+    <Pressable
+      onPressIn={handlePressIn}
+      onTouchCancel={handleTouchCancel}
+      onPress={handlePress}
+      style={[
+        css({ alignSelf: 'flex-start', borderRadius: cornerRadius['2xl'] }),
+        styleProp
+      ]}
+    >
+      <AnimatedFlex
+        accessibilityRole={type}
+        accessibilityState={{
+          checked: type === 'checkbox' ? isSelected : undefined,
+          selected: type === 'radio' ? isSelected : undefined,
+          disabled: !!disabled
+        }}
+        direction='row'
+        gap='s'
+        alignItems='center'
+        justifyContent='center'
+        alignSelf='flex-start'
+        border='strong'
+        borderRadius='2xl'
+        h={size === 'small' ? 'xl' : '2xl'}
+        ph={size === 'small' ? 'm' : 'l'}
+        shadow={size === 'large' ? (isSelected ? 'flat' : 'near') : undefined}
+        style={[animatedRootStyles, fullWidth ? { width: '100%' } : undefined]}
+        {...other}
       >
-        <AnimatedFlex
-          accessibilityRole={type}
-          accessibilityState={{
-            checked: type === 'checkbox' ? isSelected : undefined,
-            selected: type === 'radio' ? isSelected : undefined,
-            disabled: !!disabled
-          }}
-          direction='row'
-          gap='s'
-          alignItems='center'
-          justifyContent='center'
-          alignSelf='flex-start'
-          border='strong'
-          borderRadius='2xl'
-          h={size === 'small' ? 'xl' : '2xl'}
-          ph={size === 'small' ? 'm' : 'l'}
-          shadow={size === 'large' ? (isSelected ? 'flat' : 'near') : undefined}
-          style={[
-            animatedRootStyles,
-            fullWidth ? { width: '100%' } : undefined
-          ]}
-          {...other}
+        {size !== 'small' && Icon ? (
+          <Icon
+            size='s'
+            color={isSelected || isPressing ? 'staticWhite' : 'default'}
+          />
+        ) : null}
+        <AnimatedText
+          numberOfLines={1}
+          variant='body'
+          style={[animatedTextStyles, { lineHeight: typography.lineHeight.m }]}
         >
-          {size !== 'small' && Icon ? (
-            <Icon
-              size='s'
-              color={isSelected || isPressing ? 'staticWhite' : 'default'}
-            />
-          ) : null}
-          <AnimatedText
-            numberOfLines={1}
-            variant='body'
-            style={[
-              animatedTextStyles,
-              { lineHeight: typography.lineHeight.m }
-            ]}
-          >
-            {label}
-          </AnimatedText>
-        </AnimatedFlex>
-      </Pressable>
-    </GestureDetector>
+          {label}
+        </AnimatedText>
+      </AnimatedFlex>
+    </Pressable>
   )
 }

packages/mobile/src/harmony-native/components/input/SelectablePill/types.ts

@@ -12,5 +12,6 @@ export type SelectablePillProps = {
   icon?: IconComponent
   onChange?: (value: string, isSelected?: boolean) => void
   fullWidth?: boolean
+  disableUnselectAnimation?: boolean
 } & Pick<PressableProps, 'disabled' | 'onPress'> &
   ViewProps

packages/mobile/src/screens/search-screen-v2/SearchCategoriesAndFilters.tsx

@@ -50,6 +50,9 @@ const SearchCategory = (props: SearchCategoryProps) => {
         setCategory(isSelected ? (value as SearchCategoryType) : 'all')
       }}
       icon={isSelected ? IconCloseAlt : undefined}
+      // Disable unselect animation when the category is selected
+      // to avoid a flash of purple as the pills rearrange
+      disableUnselectAnimation
     />
   )
 }

packages/web/src/components/edit/fields/AdvancedField.tsx

@@ -491,8 +491,7 @@ const AdvancedModalFields = ({ isUpload }: { isUpload?: boolean }) => {
                     const input = e.nativeEvent.target as HTMLInputElement
                     input.value = input.value.slice(0, input.maxLength)
                   }}
-                  label={messages.bpm.header}
-                  placeholder={messages.bpm.label}
+                  label={messages.bpm.label}
                   autoComplete='off'
                 />
               </Flex>

packages/web/src/components/lineup/LineupProvider.tsx

@@ -510,12 +510,14 @@ class LineupProvider extends PureComponent<CombinedProps, LineupProviderState> {
     let tileSize: TrackTileSize
     let lineupStyle = {}
     let containerClassName: string
+    let statSize = 'large'
     if (variant === LineupVariant.MAIN || variant === LineupVariant.PLAYLIST) {
       tileSize = TrackTileSize.LARGE
       lineupStyle = styles.main
     } else if (variant === LineupVariant.SECTION) {
       tileSize = TrackTileSize.SMALL
       lineupStyle = styles.section
+      statSize = 'small'
       containerClassName = styles.searchTrackTileContainer
     } else if (variant === LineupVariant.CONDENSED) {
       tileSize = TrackTileSize.SMALL
@@ -539,6 +541,7 @@ class LineupProvider extends PureComponent<CombinedProps, LineupProviderState> {
             ordered,
             togglePlay: this.togglePlay,
             size: tileSize,
+            statSize,
             containerClassName,
             uid: entry.uid,
             showArtistPick: showLeadingElementArtistPick && !!leadingElementId,

packages/web/src/components/track/desktop/ConnectedTrackTile.tsx

@@ -64,6 +64,7 @@ type OwnProps = {
   order: number
   containerClassName?: string
   size: TrackTileSize
+  statSize: 'small' | 'large'
   showArtistPick: boolean
   ordered: boolean
   togglePlay: (uid: UID, id: ID) => void
@@ -106,7 +107,8 @@ const ConnectedTrackTile = ({
   isTrending,
   isFeed = false,
   showRankIcon,
-  onClick
+  onClick,
+  statSize = 'large'
 }: ConnectedTrackTileProps) => {
   const trackWithFallback = getTrackWithFallback(track)
   const {
@@ -246,7 +248,6 @@ const ConnectedTrackTile = ({
 
   const renderStats = () => {
     const contentTitle = 'track' // undefined,  playlist or album -  undefined is track
-    const statSize = 'large'
     return (
       <div className={cn(styles.socialInfo)}>
         <Stats

packages/web/src/components/track/desktop/stats/Stats.module.css

@@ -12,7 +12,7 @@
 
 .medium,
 .small {
-  font-size: var(--harmony-font-2xs);
+  font-size: var(--harmony-font-xs);
   font-weight: var(--harmony-font-demi-bold);
   letter-spacing: 0.25px;
 }

packages/web/src/pages/search-page-v2/search-results/TrackResults.tsx

@@ -136,7 +136,9 @@ export const TrackResults = (props: TrackResultsProps) => {
 
   return (
     <Lineup
-      variant={LineupVariant.SECTION}
+      variant={
+        viewLayout === 'grid' ? LineupVariant.SECTION : LineupVariant.MAIN
+      }
       count={count}
       loadMore={loadMore}
       scrollParent={mainContentRef.current}