Fix #729

src/components/Hashtag.tsx

@@ -4,9 +4,10 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { PropsWithChildren, useState } from 'react'
-import { Dimensions, Pressable, View } from 'react-native'
+import { Dimensions, Pressable, Text, View } from 'react-native'
 import Sparkline from './Sparkline'
 import CustomText from './Text'
+import { sumBy } from 'lodash'
 
 export interface Props {
   hashtag: Mastodon.Tag
@@ -29,6 +30,8 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
   const width = Dimensions.get('window').width / 4
   const [height, setHeight] = useState<number>(0)
 
+  const sum = sumBy(hashtag.history, h => parseInt(h.uses))
+
   return (
     <Pressable
       accessibilityRole='button'
@@ -41,17 +44,24 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
       }}
       onPress={customOnPress || onPress}
     >
-      <CustomText
-        fontStyle='M'
+      <View
         style={{
           flexShrink: 1,
-          color: colors.primaryDefault,
           paddingRight: StyleConstants.Spacing.M
         }}
-        numberOfLines={1}
       >
-        #{hashtag.name}
-      </CustomText>
+        <CustomText fontStyle='M' style={{ color: colors.primaryDefault }} numberOfLines={1}>
+          #{hashtag.name}
+          {sum ? (
+            <>
+              {' '}
+              <CustomText fontStyle='S' style={{ color: colors.secondary }}>
+                ({sumBy(hashtag.history, h => parseInt(h.uses))})
+              </CustomText>
+            </>
+          ) : null}
+        </CustomText>
+      </View>
       {hashtag.history?.length ? (
         <View
           style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' }}
@@ -66,6 +76,7 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
             width={width}
             height={height}
             margin={children ? StyleConstants.Spacing.S : undefined}
+            color={!sum ? colors.disabled : undefined}
           />
           {children}
         </View>

src/components/Sparkline.tsx

@@ -8,9 +8,10 @@ export interface Props {
   width: number
   height: number
   margin?: number
+  color?: string
 }
 
-const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0 }) => {
+const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0, color }) => {
   const { colors } = useTheme()
 
   const dataToPoints = ({
@@ -70,10 +71,10 @@ const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0 }) => {
   return (
     <Svg height={height} width={width} style={{ marginRight: margin }} fill='none'>
       <G>
-        <Path d={'M' + fillPoints.join(' ')} fill={colors.blue} fillOpacity={0.1} />
+        <Path d={'M' + fillPoints.join(' ')} fill={color || colors.blue} fillOpacity={0.1} />
         <Path
           d={'M' + linePoints.join(' ')}
-          stroke={colors.blue}
+          stroke={color || colors.blue}
           strokeWidth={1}
           strokeLinejoin='round'
           strokeLinecap='round'