First step of adding filter editing support

src/components/Hr.tsx

@@ -0,0 +1,23 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { View, ViewStyle } from 'react-native'
+
+const Hr: React.FC<{ style?: ViewStyle }> = ({ style }) => {
+  const { colors } = useTheme()
+
+  return (
+    <View
+      style={[
+        {
+          borderTopColor: colors.border,
+          borderTopWidth: 1,
+          height: 1,
+          marginVertical: StyleConstants.Spacing.S
+        },
+        style
+      ]}
+    />
+  )
+}
+
+export default Hr

src/components/Input.tsx

@@ -9,7 +9,9 @@ import CustomText from './Text'
 export type Props = {
   title?: string
   multiline?: boolean
-} & Pick<NonNullable<EmojisState['inputProps'][0]>, 'value' | 'selection' | 'isFocused'> &
+  invalid?: boolean
+} & Pick<NonNullable<EmojisState['inputProps'][0]>, 'value'> &
+  Pick<Partial<EmojisState['inputProps'][0]>, 'isFocused' | 'selection'> &
   Omit<
     TextInputProps,
     | 'style'
@@ -27,8 +29,9 @@ const ComponentInput = forwardRef(
     {
       title,
       multiline = false,
+      invalid = false,
       value: [value, setValue],
-      selection: [selection, setSelection],
+      selection,
       isFocused,
       ...props
     }: Props,
@@ -43,7 +46,7 @@ const ComponentInput = forwardRef(
           paddingHorizontal: withTiming(StyleConstants.Spacing.XS),
           left: withTiming(StyleConstants.Spacing.S),
           top: withTiming(-(StyleConstants.Font.Size.S / 2) - 2),
-          backgroundColor: withTiming(colors.backgroundDefault)
+          backgroundColor: colors.backgroundDefault
         }
       } else {
         return {
@@ -62,7 +65,7 @@ const ComponentInput = forwardRef(
           borderWidth: 1,
           marginVertical: StyleConstants.Spacing.S,
           padding: StyleConstants.Spacing.S,
-          borderColor: colors.border,
+          borderColor: invalid ? colors.red : colors.border,
           flexDirection: multiline ? 'column' : 'row',
           alignItems: 'stretch'
         }}
@@ -78,9 +81,13 @@ const ComponentInput = forwardRef(
           }}
           value={value}
           onChangeText={setValue}
-          onFocus={() => (isFocused.current = true)}
-          onBlur={() => (isFocused.current = false)}
-          onSelectionChange={({ nativeEvent }) => setSelection(nativeEvent.selection)}
+          {...(isFocused !== undefined && {
+            onFocus: () => (isFocused.current = true),
+            onBlur: () => (isFocused.current = false)
+          })}
+          {...(selection !== undefined && {
+            onSelectionChange: ({ nativeEvent }) => selection[1](nativeEvent.selection)
+          })}
           {...(multiline && {
             multiline,
             numberOfLines: Platform.OS === 'android' ? 5 : undefined

src/components/Menu/Row.tsx

@@ -44,7 +44,7 @@ const MenuRow: React.FC<Props> = ({
   loading = false,
   onPress
 }) => {
-  const { colors, theme } = useTheme()
+  const { colors } = useTheme()
   const { screenReaderEnabled } = useAccessibility()
 
   return (

src/components/Selections.tsx

@@ -8,17 +8,22 @@ import { ParseEmojis } from './Parse'
 import CustomText from './Text'
 
 export interface Props {
+  title?: string
+
   multiple?: boolean
   options: { selected: boolean; content: string }[]
   setOptions: React.Dispatch<React.SetStateAction<{ selected: boolean; content: string }[]>>
   disabled?: boolean
+  invalid?: boolean
 }
 
 const Selections: React.FC<Props> = ({
+  title,
   multiple = false,
   options,
   setOptions,
-  disabled = false
+  disabled = false,
+  invalid = false
 }) => {
   const { colors } = useTheme()
 
@@ -32,52 +37,71 @@ const Selections: React.FC<Props> = ({
       : 'circle'
 
   return (
-    <View>
-      {options.map((option, index) => (
-        <Pressable
-          key={index}
-          disabled={disabled}
-          style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
-          onPress={() => {
-            if (multiple) {
-              haptics('Light')
-
-              setOptions(options.map((o, i) => (i === index ? { ...o, selected: !o.selected } : o)))
-            } else {
-              if (!option.selected) {
+    <View style={{ marginVertical: StyleConstants.Spacing.S }}>
+      {title ? (
+        <CustomText
+          fontStyle='M'
+          children={title}
+          style={{ color: disabled ? colors.disabled : colors.primaryDefault }}
+        />
+      ) : null}
+      <View
+        style={{
+          paddingHorizontal: StyleConstants.Spacing.M,
+          paddingVertical: StyleConstants.Spacing.XS,
+          marginTop: StyleConstants.Spacing.S,
+          borderWidth: 1,
+          borderColor: disabled ? colors.disabled : invalid ? colors.red : colors.border
+        }}
+      >
+        {options.map((option, index) => (
+          <Pressable
+            key={index}
+            disabled={disabled}
+            style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
+            onPress={() => {
+              if (multiple) {
                 haptics('Light')
+
                 setOptions(
-                  options.map((o, i) => {
-                    if (i === index) {
-                      return { ...o, selected: true }
-                    } else {
-                      return { ...o, selected: false }
-                    }
-                  })
+                  options.map((o, i) => (i === index ? { ...o, selected: !o.selected } : o))
                 )
+              } else {
+                if (!option.selected) {
+                  haptics('Light')
+                  setOptions(
+                    options.map((o, i) => {
+                      if (i === index) {
+                        return { ...o, selected: true }
+                      } else {
+                        return { ...o, selected: false }
+                      }
+                    })
+                  )
+                }
               }
-            }
-          }}
-        >
-          <View style={{ flex: 1, flexDirection: 'row' }}>
-            <Icon
-              style={{
-                paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
-                marginRight: StyleConstants.Spacing.S
-              }}
-              name={isSelected(index)}
-              size={StyleConstants.Font.Size.M}
-              color={disabled ? colors.disabled : colors.primaryDefault}
-            />
-            <CustomText style={{ flex: 1 }}>
-              <ParseEmojis
-                content={option.content}
-                style={{ color: disabled ? colors.disabled : colors.primaryDefault }}
+            }}
+          >
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                style={{
+                  marginTop: (StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M) / 2,
+                  marginRight: StyleConstants.Spacing.S
+                }}
+                name={isSelected(index)}
+                size={StyleConstants.Font.Size.M}
+                color={disabled ? colors.disabled : colors.primaryDefault}
               />
-            </CustomText>
-          </View>
-        </Pressable>
-      ))}
+              <CustomText fontStyle='S' style={{ flex: 1 }}>
+                <ParseEmojis
+                  content={option.content}
+                  style={{ color: disabled ? colors.disabled : colors.primaryDefault }}
+                />
+              </CustomText>
+            </View>
+          </Pressable>
+        ))}
+      </View>
     </View>
   )
 }

src/components/Timeline/Shared/Filtered.tsx

@@ -99,7 +99,7 @@ export const shouldFilter = ({
         break
     }
   }
-  const queryKeyFilters: QueryKeyFilters = ['Filters']
+  const queryKeyFilters: QueryKeyFilters = ['Filters', { version: 'v1' }]
   queryClient.getQueryData<Mastodon.Filter<'v1'>[]>(queryKeyFilters)?.forEach(filter => {
     if (returnFilter) {
       return

src/components/Timeline/Shared/Poll.tsx

@@ -133,7 +133,7 @@ const TimelinePoll: React.FC = () => {
         <View style={{ flex: 1, flexDirection: 'row' }}>
           <Icon
             style={{
-              paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
+              marginTop: (StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M) / 2,
               marginRight: StyleConstants.Spacing.S
             }}
             name={
@@ -205,7 +205,7 @@ const TimelinePoll: React.FC = () => {
         <View style={{ flex: 1, flexDirection: 'row' }}>
           <Icon
             style={{
-              paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
+              marginTop: (StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M) / 2,
               marginRight: StyleConstants.Spacing.S
             }}
             name={isSelected(index)}