Restructure some files

src/components/Menu/Row.tsx

@@ -3,7 +3,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
 
 export interface Props {
@@ -11,8 +11,13 @@ export interface Props {
   iconFrontColor?: ColorDefinitions
 
   title: string
+  description?: string
   content?: string
 
+  switchValue?: boolean
+  switchDisabled?: boolean
+  switchOnValueChange?: () => void
+
   iconBack?: 'chevron-right' | 'check'
   iconBackColor?: ColorDefinitions
 
@@ -24,7 +29,11 @@ const MenuRow: React.FC<Props> = ({
   iconFront,
   iconFrontColor = 'primary',
   title,
+  description,
   content,
+  switchValue,
+  switchDisabled,
+  switchOnValueChange,
   iconBack,
   iconBackColor = 'secondary',
   loading = false,
@@ -61,45 +70,59 @@ const MenuRow: React.FC<Props> = ({
               style={styles.iconFront}
             />
           )}
-          <Text
-            style={[styles.text, { color: theme.primary }]}
-            numberOfLines={1}
-          >
-            {title}
-          </Text>
-        </View>
-        {(content || iconBack) && (
-          <View style={styles.back}>
-            {content && content.length ? (
-              <>
-                <Text
-                  style={[
-                    styles.content,
-                    {
-                      color: theme.secondary,
-                      opacity: !iconBack && loading ? 0 : 1
-                    }
-                  ]}
-                  numberOfLines={1}
-                >
-                  {content}
-                </Text>
-                {loading && !iconBack && loadingSpinkit}
-              </>
+          <View style={styles.main}>
+            <Text
+              style={[styles.title, { color: theme.primary }]}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            {description ? (
+              <Text style={[styles.description, { color: theme.secondary }]}>
+                {description}
+              </Text>
             ) : null}
-            {iconBack && (
-              <>
-                <Feather
-                  name={iconBack}
-                  size={StyleConstants.Font.Size.M + 2}
-                  color={theme[iconBackColor]}
-                  style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
-                />
-                {loading && loadingSpinkit}
-              </>
-            )}
           </View>
-        )}
+        </View>
+
+        <View style={styles.back}>
+          {content && content.length ? (
+            <>
+              <Text
+                style={[
+                  styles.content,
+                  {
+                    color: theme.secondary,
+                    opacity: !iconBack && loading ? 0 : 1
+                  }
+                ]}
+                numberOfLines={1}
+              >
+                {content}
+              </Text>
+              {loading && !iconBack && loadingSpinkit}
+            </>
+          ) : null}
+          {switchValue !== undefined ? (
+            <Switch
+              value={switchValue}
+              onValueChange={switchOnValueChange}
+              disabled={switchDisabled}
+              trackColor={{ true: theme.blue, false: theme.disabled }}
+            />
+          ) : null}
+          {iconBack ? (
+            <>
+              <Feather
+                name={iconBack}
+                size={StyleConstants.Font.Size.M + 2}
+                color={theme[iconBackColor]}
+                style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
+              />
+              {loading && loadingSpinkit}
+            </>
+          ) : null}
+        </View>
       </View>
     </Pressable>
   )
@@ -131,10 +154,16 @@ const styles = StyleSheet.create({
   iconFront: {
     marginRight: 8
   },
-  text: {
-    flex: 1,
+  main: {
+    flex: 1
+  },
+  title: {
     ...StyleConstants.FontStyle.M
   },
+  description: {
+    ...StyleConstants.FontStyle.S,
+    marginTop: StyleConstants.Spacing.XS
+  },
   content: {
     ...StyleConstants.FontStyle.M
   },

src/components/ParseContent.tsx

@@ -76,6 +76,7 @@ const renderNode = ({
       }
     } else {
       const domain = href.split(new RegExp(/:\/\/(.[^\/]+)/))
+      // Need example here
       const content = node.children && node.children[0].data
       const shouldBeTag =
         tags && tags.filter(tag => `#${tag.name}` === content).length > 0

src/components/Timelines.tsx

@@ -9,7 +9,6 @@ import sharedScreens from '@screens/Shared/sharedScreens'
 import { getLocalUrl, getRemoteUrl } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
-import getCurrentTab from '@utils/getCurrentTab'
 import { HeaderRight } from './Header'
 import { TabView } from 'react-native-tab-view'
 
@@ -28,9 +27,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
   const [segment, setSegment] = useState(0)
 
   const onPressSearch = useCallback(() => {
-    navigation.navigate(getCurrentTab(navigation), {
-      screen: 'Screen-Shared-Search'
-    })
+    navigation.navigate('Screen-Shared-Search')
   }, [])
 
   const routes = content

src/components/Timelines/Timeline/Shared/Actions.tsx

@@ -8,7 +8,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { toast } from '@components/toast'
 import { StyleConstants } from '@utils/styles/constants'
 import { useNavigation } from '@react-navigation/native'
-import getCurrentTab from '@utils/getCurrentTab'
 import { findIndex } from 'lodash'
 import { TimelineData } from '../../Timeline'
 
@@ -124,13 +123,10 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
 
   const onPressReply = useCallback(
     () =>
-      navigation.navigate(getCurrentTab(navigation), {
-        screen: 'Screen-Shared-Compose',
-        params: {
-          type: 'reply',
-          incomingStatus: status,
-          visibilityLock: status.visibility === 'direct'
-        }
+      navigation.navigate('Screen-Shared-Compose', {
+        type: 'reply',
+        incomingStatus: status,
+        visibilityLock: status.visibility === 'direct'
       }),
     []
   )

src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx

@@ -5,7 +5,6 @@ import { useMutation, useQueryClient } from 'react-query'
 import client from '@api/client'
 import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
 import { toast } from '@components/toast'
-import getCurrentTab from '@utils/getCurrentTab'
 import { TimelineData } from '@root/components/Timelines/Timeline'
 import { findIndex } from 'lodash'
 
@@ -155,9 +154,9 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
                     .then(res => {
                       queryClient.invalidateQueries(queryKey)
                       setBottomSheetVisible(false)
-                      navigation.navigate(getCurrentTab(navigation), {
-                        screen: 'Screen-Shared-Compose',
-                        params: { type: 'edit', incomingStatus: res.body }
+                      navigation.navigate('Screen-Shared-Compose', {
+                        type: 'edit',
+                        incomingStatus: res.body
                       })
                     })
                     .catch(() => {

src/components/toast.tsx

@@ -63,7 +63,7 @@ const ToastBase = ({ config }: { config: Config }) => {
     <SafeAreaView
       style={[
         styles.base,
-        { backgroundColor: theme.background, shadowColor: theme.primary }
+        { backgroundColor: theme.background, borderBottomColor: theme.primary }
       ]}
     >
       <View style={styles.container}>
@@ -97,15 +97,14 @@ const toastConfig = {
 const styles = StyleSheet.create({
   base: {
     width: '100%',
-    shadowOpacity: 1,
-    shadowRadius: 6
+    borderBottomWidth: 1
   },
   container: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: StyleConstants.Spacing.M
+    padding: StyleConstants.Spacing.L
   },
   texts: {
     marginLeft: StyleConstants.Spacing.S