Merge branch 'main' into candidate

src/components/Filter.tsx

@@ -2,7 +2,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { View } from 'react-native'
+import { View, ViewStyle } from 'react-native'
 import { TouchableNativeFeedback } from 'react-native-gesture-handler'
 import Icon from './Icon'
 import CustomText from './Text'
@@ -11,9 +11,10 @@ export type Props = {
   onPress: () => void
   filter: Mastodon.Filter<'v2'>
   button?: React.ReactNode
+  style?: ViewStyle
 }
 
-export const Filter: React.FC<Props> = ({ onPress, filter, button }) => {
+export const Filter: React.FC<Props> = ({ onPress, filter, button, style }) => {
   const { t } = useTranslation(['common', 'screenTabs'])
   const { colors } = useTheme()
 
@@ -24,7 +25,8 @@ export const Filter: React.FC<Props> = ({ onPress, filter, button }) => {
           paddingVertical: StyleConstants.Spacing.S,
           flexDirection: 'row',
           alignItems: 'center',
-          backgroundColor: colors.backgroundDefault
+          backgroundColor: colors.backgroundDefault,
+          ...style
         }}
       >
         <View style={{ flex: 1 }}>
@@ -83,12 +85,7 @@ export const Filter: React.FC<Props> = ({ onPress, filter, button }) => {
                     {filter.context.map((c, index) => (
                       <Fragment key={index}>
                         <CustomText
-                          style={{
+                          style={{ color: colors.secondary }}
-                            color: colors.secondary,
-                            textDecorationColor: colors.disabled,
-                            textDecorationLine: 'underline',
-                            textDecorationStyle: 'solid'
-                          }}
                           children={t(`screenTabs:me.preferencesFilters.contexts.${c}`)}
                         />
                         <CustomText children={t('common:separator')} />

src/components/Hr.tsx

@@ -12,7 +12,7 @@ const Hr: React.FC<{ style?: ViewStyle }> = ({ style }) => {
           borderTopColor: colors.border,
           borderTopWidth: 1,
           height: 1,
-          marginVertical: StyleConstants.Spacing.S
+          paddingVertical: StyleConstants.Spacing.S
         },
         style
       ]}

src/components/SwipeToActions.tsx

@@ -0,0 +1,57 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { ColorValue, TouchableNativeFeedback, View } from 'react-native'
+import { SwipeListView } from 'react-native-swipe-list-view'
+import haptics from './haptics'
+import Icon, { IconName } from './Icon'
+import ComponentSeparator from './Separator'
+
+export type Props = {
+  actions: {
+    onPress: (item: any) => void
+    color: ColorValue
+    icon: IconName
+    haptic?: Parameters<typeof haptics>['0']
+  }[]
+}
+
+export const SwipeToActions = <T extends unknown>({
+  actions,
+  ...rest
+}: Props & SwipeListView<T>['props']) => {
+  const perActionWidth = StyleConstants.Spacing.L * 2 + StyleConstants.Font.Size.L
+
+  return (
+    <SwipeListView
+      renderHiddenItem={({ item }) => (
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
+          {actions.map((action, index) => (
+            <TouchableNativeFeedback
+              key={index}
+              onPress={() => {
+                haptics(action.haptic || 'Light')
+                action.onPress({ item })
+              }}
+            >
+              <View
+                style={{
+                  paddingHorizontal: StyleConstants.Spacing.L,
+                  flexBasis: perActionWidth,
+                  backgroundColor: action.color,
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                }}
+              >
+                <Icon name={action.icon} color='white' size={StyleConstants.Font.Size.L} />
+              </View>
+            </TouchableNativeFeedback>
+          ))}
+        </View>
+      )}
+      rightOpenValue={-perActionWidth * actions.length}
+      disableRightSwipe
+      closeOnRowPress
+      ItemSeparatorComponent={ComponentSeparator}
+      {...rest}
+    />
+  )
+}

src/i18n/ca/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "Segueix l'usuari",
       "action_true": "Deixa de seguir l'usuari"
     },
-    "inLists": "",
+    "inLists": "Llistes que hi sigui l'usuari...",
     "showBoosts": {
       "action_false": "Mostra els impulsos de l'usuari",
       "action_true": "Oculta els impulsos de l'usuari"
@@ -21,7 +21,7 @@
       "succeed_locked": "Enviada la sol·licitud de seguiment a @{{target}} com {{source}}, pendent d'aprovar-la",
       "failed": "Segueix com"
     },
-    "blockReport": "",
+    "blockReport": "Bloqueja i denuncia",
     "block": {
       "action_false": "Bloqueja l'usuari",
       "action_true": "Deixa de bloquejar l'usuari",
@@ -56,11 +56,11 @@
   },
   "hashtag": {
     "follow": {
-      "action_false": "",
+      "action_false": "Segueix",
-      "action_true": ""
+      "action_true": "Deixa de seguir"
     },
     "filter": {
-      "action": ""
+      "action": "Filtra l'etiqueta..."
     }
   },
   "share": {
@@ -99,8 +99,8 @@
       "action_true": "Deixa de fixar la publicació"
     },
     "filter": {
-      "action_false": "",
+      "action_false": "Filtra la publicació...",
-      "action_true": ""
+      "action_true": "Gestiona els filtres..."
     }
   }
 }

src/i18n/ca/screens/tabs.json

@@ -211,7 +211,7 @@
       },
       "keywords": "Coincidències per aquestes paraules claus",
       "keyword": "Paraula clau",
-      "statuses": ""
+      "statuses": "Coincideixen aquestes publicacions"
     },
     "profile": {
       "feedback": {
@@ -400,14 +400,14 @@
       "name": "Multimèdia de <0 /><1></1>"
     },
     "filter": {
-      "name": "",
+      "name": "Afegeix al filtre",
-      "existed": ""
+      "existed": "Existia sota aquests filtres"
     },
     "history": {
       "name": "Edita l'historial"
     },
     "report": {
-      "name": "Denuncia {{acct}}",
+      "name": "Denúncia a {{acct}}",
       "report": "Denúncia",
       "forward": {
         "heading": "Envia anònimament al servidor remot {{instance}}"

src/i18n/es/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "Seguir usuario",
       "action_true": "Dejar de seguir usuario"
     },
-    "inLists": "",
+    "inLists": "Listas que contienen el usuario...",
     "showBoosts": {
       "action_false": "Mostrar los impulsos del usuario",
       "action_true": "Ocultar los impulsos del usuario"
@@ -21,7 +21,7 @@
       "succeed_locked": "Enviado la solicitud de seguimiento a @{{target}} como {{source}}, pendiente de aprobación",
       "failed": "Seguir como"
     },
-    "blockReport": "",
+    "blockReport": "Bloquear y denunciar",
     "block": {
       "action_false": "Bloquear usuario",
       "action_true": "Desbloquear usuario",
@@ -56,11 +56,11 @@
   },
   "hashtag": {
     "follow": {
-      "action_false": "",
+      "action_false": "Seguir",
-      "action_true": ""
+      "action_true": "Dejar de seguir"
     },
     "filter": {
-      "action": ""
+      "action": "Filtrar la etiqueta..."
     }
   },
   "share": {
@@ -99,8 +99,8 @@
       "action_true": "Desfijar toot"
     },
     "filter": {
-      "action_false": "",
+      "action_false": "Filtrar la publicación...",
-      "action_true": ""
+      "action_true": "Gestiona los filtros..."
     }
   }
 }

src/i18n/es/screens/tabs.json

@@ -70,16 +70,16 @@
         "name": "Notificaciones push"
       },
       "preferences": {
-        "name": ""
+        "name": "Preferencias"
       },
       "preferencesFilters": {
-        "name": ""
+        "name": "Todos los filtros de contenido"
       },
       "preferencesFilterAdd": {
-        "name": ""
+        "name": "Crear filtro"
       },
       "preferencesFilterEdit": {
-        "name": ""
+        "name": "Editar filtro"
       },
       "profile": {
         "name": "Editar perfil"
@@ -136,82 +136,82 @@
     },
     "preferences": {
       "visibility": {
-        "title": "",
+        "title": "Visibilidad de publicación predeterminada",
         "options": {
-          "public": "",
+          "public": "Público",
-          "unlisted": "",
+          "unlisted": "No listado",
-          "private": ""
+          "private": "Solo seguidores"
         }
       },
       "sensitive": {
-        "title": ""
+        "title": "Marcar el contenido multimedia como sensibles por defecto"
       },
       "media": {
-        "title": "",
+        "title": "Mostrar el contenido multimedia",
         "options": {
-          "default": "",
+          "default": "Ocultar los contenidos multimedia marcados como sensibles",
-          "show_all": "",
+          "show_all": "Mostrar siempre el contenido multimedia",
-          "hide_all": ""
+          "hide_all": "Siempre ocultar el contenido multimedia"
         }
       },
       "spoilers": {
-        "title": ""
+        "title": "Siempre expandir las publicaciones marcadas con advertencias de contenido"
       },
       "autoplay_gifs": {
-        "title": ""
+        "title": "Reproduce automáticamente los GIF"
       },
       "filters": {
-        "title": "",
+        "title": "Filtros de contenido",
-        "content": ""
+        "content": "{{count}} activo"
       },
       "web_only": {
-        "title": "",
+        "title": "Actualizar ajustes",
-        "description": ""
+        "description": "Los ajustes a continuación solo se pueden actualizar mediante la interfaz web"
       }
     },
     "preferencesFilters": {
-      "expired": "",
+      "expired": "Expirado",
-      "keywords_one": "",
+      "keywords_one": "{{count}} palabra clave",
-      "keywords_other": "",
+      "keywords_other": "{{count}} palabras clave",
-      "statuses_one": "",
+      "statuses_one": "{{count}} publicación",
-      "statuses_other": "",
+      "statuses_other": "{{count}} publicaciones",
-      "context": "",
+      "context": "Se aplica en <0 />",
       "contexts": {
-        "home": "",
+        "home": "Seguidos y listas",
-        "notifications": "",
+        "notifications": "Notificación",
-        "public": "",
+        "public": "Federado",
-        "thread": "",
+        "thread": "Conversación",
-        "account": ""
+        "account": "Perfil"
       }
     },
     "preferencesFilter": {
-      "name": "",
+      "name": "Nombre",
-      "expiration": "",
+      "expiration": "Vencimiento",
       "expirationOptions": {
-        "0": "",
+        "0": "Nunca",
-        "1800": "",
+        "1800": "Después de 30 minutos",
-        "3600": "",
+        "3600": "Después de 1 hora",
-        "43200": "",
+        "43200": "Después de 12 horas",
-        "86400": "",
+        "86400": "Después de 1 día",
-        "604800": "",
+        "604800": "Después de 1 semana",
-        "18144000": ""
+        "18144000": "Después de 1 mes"
       },
-      "context": "",
+      "context": "Se aplica en",
       "contexts": {
-        "home": "",
+        "home": "Seguidos y listas",
-        "notifications": "",
+        "notifications": "Notificación",
-        "public": "",
+        "public": "Cronología federada",
-        "thread": "",
+        "thread": "Vista de conversación",
-        "account": ""
+        "account": "Vista de perfil"
       },
-      "action": "",
+      "action": "Al coincidir",
       "actions": {
         "warn": "",
-        "hide": ""
+        "hide": "Oculto completamente"
       },
-      "keywords": "",
+      "keywords": "Coincide con estas palabras clave",
-      "keyword": "",
+      "keyword": "Palabra clave",
-      "statuses": ""
+      "statuses": "Coincide con estas publicaciones"
     },
     "profile": {
       "feedback": {
@@ -400,8 +400,8 @@
       "name": "Multimedia de <0 /><1></1>"
     },
     "filter": {
-      "name": "",
+      "name": "Añadir al filtro",
-      "existed": ""
+      "existed": "Existe en estos filtros"
     },
     "history": {
       "name": "Historial de ediciones"

src/i18n/eu/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "",
       "action_true": ""
     },
-    "inLists": "",
+    "inLists": "Erabiltzaile hau zerrenda hauetan dago...",
     "showBoosts": {
       "action_false": "",
       "action_true": ""
@@ -16,12 +16,12 @@
       "action_true": ""
     },
     "followAs": {
-      "trigger": "",
+      "trigger": "Honela jarraitu...",
       "succeed_default": "",
       "succeed_locked": "",
       "failed": ""
     },
-    "blockReport": "",
+    "blockReport": "Blokeatu eta salatu",
     "block": {
       "action_false": "",
       "action_true": "",
@@ -56,11 +56,11 @@
   },
   "hashtag": {
     "follow": {
-      "action_false": "",
+      "action_false": "Jarraitu",
-      "action_true": ""
+      "action_true": "Jarraitzeari utzi"
     },
     "filter": {
-      "action": ""
+      "action": "Traola iragazi..."
     }
   },
   "share": {
@@ -99,8 +99,8 @@
       "action_true": ""
     },
     "filter": {
-      "action_false": "",
+      "action_false": "Tuta iragazi...",
-      "action_true": ""
+      "action_true": "Iragazkiak kudeatu..."
     }
   }
 }

src/i18n/nl/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "Volg gebruiker",
       "action_true": "Ontvolg"
     },
-    "inLists": "",
+    "inLists": "Lijsten met gebruiker...",
     "showBoosts": {
       "action_false": "Boosts van gebruiker weergeven",
       "action_true": "Boosts van gebruiker verbergen"
@@ -16,12 +16,12 @@
       "action_true": "Dempen opheffen voor gebruiker"
     },
     "followAs": {
-      "trigger": "",
+      "trigger": "Volg als ...",
       "succeed_default": "Je volgt nu @{{target}} met @{{source}}",
       "succeed_locked": "Verstuurde het volgverzoek naar @{{target}} met {{source}}, in afwachting van goedkeuring",
       "failed": "Volg als"
     },
-    "blockReport": "",
+    "blockReport": "Blokkeren en rapporten",
     "block": {
       "action_false": "Gebruiker blokkeren",
       "action_true": "Gebruiker deblokkeren",
@@ -56,11 +56,11 @@
   },
   "hashtag": {
     "follow": {
-      "action_false": "",
+      "action_false": "Volg",
-      "action_true": ""
+      "action_true": "Ontvolg"
     },
     "filter": {
-      "action": ""
+      "action": "Filter hashtag ..."
     }
   },
   "share": {
@@ -99,8 +99,8 @@
       "action_true": "Toot losmaken"
     },
     "filter": {
-      "action_false": "",
+      "action_false": "Filter toot ...",
-      "action_true": ""
+      "action_true": "Filters beheren ..."
     }
   }
 }

src/i18n/nl/screens/tabs.json

@@ -70,16 +70,16 @@
         "name": "Push Melding"
       },
       "preferences": {
-        "name": ""
+        "name": "Voorkeuren"
       },
       "preferencesFilters": {
-        "name": ""
+        "name": "Alle inhoudsfilters"
       },
       "preferencesFilterAdd": {
-        "name": ""
+        "name": "Filter Maken"
       },
       "preferencesFilterEdit": {
-        "name": ""
+        "name": "Bewerk filter"
       },
       "profile": {
         "name": "Profiel bewerken"
@@ -136,82 +136,82 @@
     },
     "preferences": {
       "visibility": {
-        "title": "",
+        "title": "Standaard zichtbaarheid van berichten",
         "options": {
-          "public": "",
+          "public": "Openbaar",
-          "unlisted": "",
+          "unlisted": "Niet openbaar",
-          "private": ""
+          "private": "Alleen volgers"
         }
       },
       "sensitive": {
-        "title": ""
+        "title": "Media standaard als gevoelig markeren"
       },
       "media": {
-        "title": "",
+        "title": "Mediaweergave",
         "options": {
-          "default": "",
+          "default": "Als gevoelig gemarkeerde media verbergen",
-          "show_all": "",
+          "show_all": "Media altijd tonen",
-          "hide_all": ""
+          "hide_all": "Media altijd verbergen"
         }
       },
       "spoilers": {
-        "title": ""
+        "title": "Altijd toots met tekstwaarschuwingen uitklappen"
       },
       "autoplay_gifs": {
-        "title": ""
+        "title": "GIF automatisch afspelen in toots"
       },
       "filters": {
-        "title": "",
+        "title": "Inhoud Filters",
-        "content": ""
+        "content": "{{count}} actief"
       },
       "web_only": {
-        "title": "",
+        "title": "Instellingen bijwerken",
-        "description": ""
+        "description": "Instellingen hieronder kunnen alleen met behulp van de webUI worden bijgewerkt"
       }
     },
     "preferencesFilters": {
-      "expired": "",
+      "expired": "Verlopen",
-      "keywords_one": "",
+      "keywords_one": "{{count}} trefwoord",
-      "keywords_other": "",
+      "keywords_other": "{{count}} trefwoorden",
-      "statuses_one": "",
+      "statuses_one": "{{count}} toot",
-      "statuses_other": "",
+      "statuses_other": "{{count}} toots",
-      "context": "",
+      "context": "Van toepassing in <0 />",
       "contexts": {
-        "home": "",
+        "home": "volgend en lijsten",
-        "notifications": "",
+        "notifications": "melding",
-        "public": "",
+        "public": "gefedereerd",
-        "thread": "",
+        "thread": "gesprek",
-        "account": ""
+        "account": "profiel"
       }
     },
     "preferencesFilter": {
-      "name": "",
+      "name": "Naam",
-      "expiration": "",
+      "expiration": "Vervaldatum",
       "expirationOptions": {
-        "0": "",
+        "0": "Nooit",
-        "1800": "",
+        "1800": "Na 30 minuten",
-        "3600": "",
+        "3600": "Na 1 uur",
-        "43200": "",
+        "43200": "Na 12 uur",
-        "86400": "",
+        "86400": "Na 1 dag",
-        "604800": "",
+        "604800": "Na 1 week",
-        "18144000": ""
+        "18144000": "Na 1 maand"
       },
-      "context": "",
+      "context": "Van toepassing in",
       "contexts": {
-        "home": "",
+        "home": "Volgend en lijsten",
-        "notifications": "",
+        "notifications": "Melding",
-        "public": "",
+        "public": "Federale tijdlijn",
-        "thread": "",
+        "thread": "Gesprek weergave",
-        "account": ""
+        "account": "Profiel weergave"
       },
-      "action": "",
+      "action": "Bij een overeenkomst",
       "actions": {
-        "warn": "",
+        "warn": "Ingeklapt maar kan worden onthuld",
-        "hide": ""
+        "hide": "Volledig verborgen"
       },
-      "keywords": "",
+      "keywords": "Komt overeen met deze trefwoorden",
-      "keyword": "",
+      "keyword": "Trefwoord",
-      "statuses": ""
+      "statuses": "Komt overeen met deze toots"
     },
     "profile": {
       "feedback": {
@@ -400,8 +400,8 @@
       "name": "<0 /><1>'s media</1>"
     },
     "filter": {
-      "name": "",
+      "name": "Toevoegen aan filter",
-      "existed": ""
+      "existed": "Bestaat in deze filters"
     },
     "history": {
       "name": "Geschiedenis bewerken"

src/i18n/uk/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "Підписатися на користувача",
       "action_true": "Відписатися від користувача"
     },
-    "inLists": "",
+    "inLists": "Списки, в яких є користувач ...",
     "showBoosts": {
       "action_false": "Показати передмухи користувача",
       "action_true": "Приховати передмухи користувача"
@@ -16,12 +16,12 @@
       "action_true": "Зняти заглушення з користувача"
     },
     "followAs": {
-      "trigger": "",
+      "trigger": "Стежити як ...",
       "succeed_default": "Тепер ви стежите за @{{target}} з @{{source}}",
       "succeed_locked": "Запит на стеження за @{{target}} з {{source}} надіслано, очікується затвердження",
       "failed": "Стежити як"
     },
-    "blockReport": "",
+    "blockReport": "Заблокувати й поскаржитися",
     "block": {
       "action_false": "Заблокувати користувача",
       "action_true": "Розблокувати користувача",
@@ -56,11 +56,11 @@
   },
   "hashtag": {
     "follow": {
-      "action_false": "",
+      "action_false": "Підписатися",
-      "action_true": ""
+      "action_true": "Відписатися"
     },
     "filter": {
-      "action": ""
+      "action": "Фільтрувати хештеґ ..."
     }
   },
   "share": {
@@ -99,8 +99,8 @@
       "action_true": "Відкріпити дмух"
     },
     "filter": {
-      "action_false": "",
+      "action_false": "Фільтрувати дмух ...",
-      "action_true": ""
+      "action_true": "Керувати фільтрами ..."
     }
   }
 }

src/i18n/uk/screens/tabs.json

@@ -211,7 +211,7 @@
       },
       "keywords": "Збіг із цими ключовими словами",
       "keyword": "Ключове слово",
-      "statuses": ""
+      "statuses": "Збігається з цими дмухами"
     },
     "profile": {
       "feedback": {
@@ -400,8 +400,8 @@
       "name": "<0 /><1> медіа</1>"
     },
     "filter": {
-      "name": "",
+      "name": "Додати фільтр",
-      "existed": ""
+      "existed": "Існує в цих фільтрах"
     },
     "history": {
       "name": "Редагувати історію"

src/i18n/zh-Hant/components/contextMenu.json

@@ -6,7 +6,7 @@
       "action_false": "跟隨使用者",
       "action_true": "取消跟隨使用者"
     },
-    "inLists": "",
+    "inLists": "包含使用者的列表 ...",
     "showBoosts": {
       "action_false": "顯示使用者的轉嘟",
       "action_true": "隱藏使用者的轉嘟"
@@ -16,12 +16,12 @@
       "action_true": "解除靜音使用者"
     },
     "followAs": {
-      "trigger": "",
+      "trigger": "用其它帳號跟隨 ...",
       "succeed_default": "@{{source}} 正在跟隨 @{{target}}",
       "succeed_locked": "已從 {{source}} 發送跟隨請求至 @{{target}}，等待同意",
       "failed": "用其它帳號跟隨"
     },
-    "blockReport": "",
+    "blockReport": "封鎖並檢舉",
     "block": {
       "action_false": "封鎖使用者",
       "action_true": "解除封鎖使用者",
@@ -56,11 +56,11 @@
   },
   "hashtag": {
     "follow": {
-      "action_false": "",
+      "action_false": "跟隨",
-      "action_true": ""
+      "action_true": "取消跟隨"
     },
     "filter": {
-      "action": ""
+      "action": "過濾主題標籤 ..."
     }
   },
   "share": {
@@ -99,8 +99,8 @@
       "action_true": "取消釘選嘟文"
     },
     "filter": {
-      "action_false": "",
+      "action_false": "過濾嘟文 ...",
-      "action_true": ""
+      "action_true": "管理過濾器 ..."
     }
   }
 }

src/i18n/zh-Hant/screens/tabs.json

@@ -211,7 +211,7 @@
       },
       "keywords": "符合這些關鍵字",
       "keyword": "關鍵字",
-      "statuses": ""
+      "statuses": "符合這些嘟文"
     },
     "profile": {
       "feedback": {
@@ -400,8 +400,8 @@
       "name": "<0 /><1>的媒體</1>"
     },
     "filter": {
-      "name": "",
+      "name": "新增至過濾器",
-      "existed": ""
+      "existed": "已被過濾"
     },
     "history": {
       "name": "編輯歷史"

src/screens/Compose/DraftsList.tsx

@@ -1,6 +1,6 @@
 import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
-import ComponentSeparator from '@components/Separator'
+import { SwipeToActions } from '@components/SwipeToActions'
 import CustomText from '@components/Text'
 import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
 import apiInstance from '@utils/api/instance'
@@ -10,10 +10,8 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Dimensions, Modal, Platform, Pressable, View } from 'react-native'
+import { Dimensions, Modal, Pressable, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
-import { PanGestureHandler } from 'react-native-gesture-handler'
-import { SwipeListView } from 'react-native-swipe-list-view'
 import ComposeContext from './utils/createContext'
 import { formatText } from './utils/processText'
 import { ComposeStateDraft, ExtendedAttachment } from './utils/types'
@@ -39,9 +37,7 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
   useEffect(() => {
     navigation.setOptions({
       title: t('content.draftsList.header.title'),
-      headerLeft: () => (
+      headerLeft: () => <HeaderLeft content='chevron-down' onPress={() => navigation.goBack()} />
-        <HeaderLeft content='chevron-down' onPress={() => navigation.goBack()} />
-      )
     })
   }, [])
 
@@ -49,8 +45,6 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
   const [drafts] = useAccountStorage.object('drafts')
   const [checkingAttachments, setCheckingAttachments] = useState(false)
 
-  const actionWidth = StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4
-
   return (
     <>
       <View
@@ -61,7 +55,8 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
           padding: StyleConstants.Spacing.S,
           borderColor: colors.border,
           borderWidth: 1,
-          borderRadius: StyleConstants.Spacing.S
+          borderRadius: StyleConstants.Spacing.S,
+          marginBottom: StyleConstants.Spacing.S
         }}
       >
         <Icon
@@ -74,135 +69,104 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
           {t('content.draftsList.warning')}
         </CustomText>
       </View>
-      <PanGestureHandler enabled={Platform.OS === 'ios'}>
+      <SwipeToActions
-        <SwipeListView
+        actions={[
-          data={drafts.filter(draft => draft.timestamp !== timestamp)}
+          { onPress: ({ item }) => removeDraft(item.timestamp), color: colors.red, icon: 'trash' }
-          renderItem={({ item }: { item: ComposeStateDraft }) => {
+        ]}
-            return (
+        data={drafts.filter(draft => draft.timestamp !== timestamp)}
-              <Pressable
+        renderItem={({ item }: { item: ComposeStateDraft }) => {
-                accessibilityHint={t('content.draftsList.content.accessibilityHint')}
+          return (
-                style={{
-                  flex: 1,
-                  padding: StyleConstants.Spacing.Global.PagePadding,
-                  backgroundColor: colors.backgroundDefault
-                }}
-                onPress={async () => {
-                  setCheckingAttachments(true)
-                  let tempDraft = item
-                  let tempUploads: ExtendedAttachment[] = []
-                  if (item.attachments && item.attachments.uploads.length) {
-                    for (const attachment of item.attachments.uploads) {
-                      await apiInstance<Mastodon.Attachment>({
-                        method: 'get',
-                        url: `media/${attachment.remote?.id}`
-                      })
-                        .then(res => {
-                          if (res.body.id === attachment.remote?.id) {
-                            tempUploads.push(attachment)
-                          }
-                        })
-                        .catch(() => {})
-                    }
-                    tempDraft = {
-                      ...tempDraft,
-                      attachments: { ...item.attachments, uploads: tempUploads }
-                    }
-                  }
-
-                  tempDraft.spoiler?.length &&
-                    formatText({ textInput: 'text', composeDispatch, content: tempDraft.spoiler })
-                  tempDraft.text?.length &&
-                    formatText({ textInput: 'text', composeDispatch, content: tempDraft.text })
-                  composeDispatch({
-                    type: 'loadDraft',
-                    payload: tempDraft
-                  })
-                  removeDraft(item.timestamp)
-                  navigation.goBack()
-                }}
-              >
-                <View style={{ flex: 1 }}>
-                  <HeaderSharedCreated created_at={item.timestamp} />
-                  <CustomText
-                    fontStyle='M'
-                    numberOfLines={2}
-                    style={{
-                      marginTop: StyleConstants.Spacing.XS,
-                      color: colors.primaryDefault
-                    }}
-                  >
-                    {item.text || item.spoiler || t('content.draftsList.content.textEmpty')}
-                  </CustomText>
-                  {item.attachments?.uploads.length ? (
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        marginTop: StyleConstants.Spacing.S
-                      }}
-                    >
-                      {item.attachments.uploads.map((attachment, index) => (
-                        <FastImage
-                          key={index}
-                          style={{
-                            width:
-                              (Dimensions.get('window').width -
-                                StyleConstants.Spacing.Global.PagePadding * 2 -
-                                StyleConstants.Spacing.S * 3) /
-                              4,
-                            height:
-                              (Dimensions.get('window').width -
-                                StyleConstants.Spacing.Global.PagePadding * 2 -
-                                StyleConstants.Spacing.S * 3) /
-                              4,
-                            marginLeft: index !== 0 ? StyleConstants.Spacing.S : 0
-                          }}
-                          source={{
-                            uri: attachment.local?.thumbnail || attachment.remote?.preview_url
-                          }}
-                        />
-                      ))}
-                    </View>
-                  ) : null}
-                </View>
-              </Pressable>
-            )
-          }}
-          renderHiddenItem={({ item }) => (
             <Pressable
+              accessibilityHint={t('content.draftsList.content.accessibilityHint')}
               style={{
                 flex: 1,
-                flexDirection: 'row',
+                padding: StyleConstants.Spacing.Global.PagePadding,
-                justifyContent: 'flex-end',
+                backgroundColor: colors.backgroundDefault
-                backgroundColor: colors.red
               }}
-              onPress={() => removeDraft(item.timestamp)}
+              onPress={async () => {
-              children={
+                setCheckingAttachments(true)
-                <View
+                let tempDraft = item
-                  style={{
+                let tempUploads: ExtendedAttachment[] = []
-                    flexBasis:
+                if (item.attachments && item.attachments.uploads.length) {
-                      StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4,
+                  for (const attachment of item.attachments.uploads) {
-                    justifyContent: 'center',
+                    await apiInstance<Mastodon.Attachment>({
-                    alignItems: 'center'
+                      method: 'get',
-                  }}
+                      url: `media/${attachment.remote?.id}`
-                  children={
+                    })
-                    <Icon
+                      .then(res => {
-                      name='trash'
+                        if (res.body.id === attachment.remote?.id) {
-                      size={StyleConstants.Font.Size.L}
+                          tempUploads.push(attachment)
-                      color={colors.primaryOverlay}
+                        }
-                    />
+                      })
+                      .catch(() => {})
                   }
-                />
+                  tempDraft = {
-              }
+                    ...tempDraft,
-            />
+                    attachments: { ...item.attachments, uploads: tempUploads }
-          )}
+                  }
-          disableRightSwipe={true}
+                }
-          rightOpenValue={-actionWidth}
+
-          previewOpenValue={-actionWidth / 2}
+                tempDraft.spoiler?.length &&
-          ItemSeparatorComponent={ComponentSeparator}
+                  formatText({ textInput: 'text', composeDispatch, content: tempDraft.spoiler })
-          keyExtractor={item => item.timestamp?.toString()}
+                tempDraft.text?.length &&
-        />
+                  formatText({ textInput: 'text', composeDispatch, content: tempDraft.text })
-      </PanGestureHandler>
+                composeDispatch({
+                  type: 'loadDraft',
+                  payload: tempDraft
+                })
+                removeDraft(item.timestamp)
+                navigation.goBack()
+              }}
+            >
+              <View style={{ flex: 1 }}>
+                <HeaderSharedCreated created_at={item.timestamp} />
+                <CustomText
+                  fontStyle='M'
+                  numberOfLines={2}
+                  style={{
+                    marginTop: StyleConstants.Spacing.XS,
+                    color: colors.primaryDefault
+                  }}
+                >
+                  {item.text || item.spoiler || t('content.draftsList.content.textEmpty')}
+                </CustomText>
+                {item.attachments?.uploads.length ? (
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'row',
+                      marginTop: StyleConstants.Spacing.S
+                    }}
+                  >
+                    {item.attachments.uploads.map((attachment, index) => (
+                      <FastImage
+                        key={index}
+                        style={{
+                          width:
+                            (Dimensions.get('window').width -
+                              StyleConstants.Spacing.Global.PagePadding * 2 -
+                              StyleConstants.Spacing.S * 3) /
+                            4,
+                          height:
+                            (Dimensions.get('window').width -
+                              StyleConstants.Spacing.Global.PagePadding * 2 -
+                              StyleConstants.Spacing.S * 3) /
+                            4,
+                          marginLeft: index !== 0 ? StyleConstants.Spacing.S : 0
+                        }}
+                        source={{
+                          uri: attachment.local?.thumbnail || attachment.remote?.preview_url
+                        }}
+                      />
+                    ))}
+                  </View>
+                ) : null}
+              </View>
+            </Pressable>
+          )
+        }}
+        keyExtractor={item => item.timestamp?.toString()}
+      />
       <Modal
         transparent
         animationType='fade'

src/screens/Compose/index.tsx

@@ -416,12 +416,12 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
           <Stack.Screen
             name='Screen-Compose-DraftsList'
             component={ComposeDraftsList}
-            options={{ presentation: 'modal' }}
+            options={{ presentation: 'modal', headerShadowVisible: false }}
           />
           <Stack.Screen
             name='Screen-Compose-EditAttachment'
             component={ComposeEditAttachment}
-            options={{ presentation: 'modal' }}
+            options={{ presentation: 'modal', headerShadowVisible: false }}
           />
         </Stack.Navigator>
       </ComposeContext.Provider>

src/screens/Tabs/Me/Preferences/Filters.tsx

@@ -1,22 +1,17 @@
 import { Filter } from '@components/Filter'
 import { HeaderLeft, HeaderRight } from '@components/Header'
-import Icon from '@components/Icon'
+import { SwipeToActions } from '@components/SwipeToActions'
-import ComponentSeparator from '@components/Separator'
 import apiInstance from '@utils/api/instance'
 import { TabMePreferencesStackScreenProps } from '@utils/navigation/navigators'
 import { useFiltersQuery } from '@utils/queryHooks/filters'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Pressable, View } from 'react-native'
-import { SwipeListView } from 'react-native-swipe-list-view'
 
 const TabMePreferencesFilters: React.FC<
   TabMePreferencesStackScreenProps<'Tab-Me-Preferences-Filters'>
 > = ({ navigation }) => {
   const { colors } = useTheme()
-  const { t } = useTranslation(['common', 'screenTabs'])
 
   useEffect(() => {
     navigation.setOptions({
@@ -38,40 +33,31 @@ const TabMePreferencesFilters: React.FC<
   const { data, refetch } = useFiltersQuery<'v2'>({ version: 'v2' })
 
   return (
-    <SwipeListView
+    <SwipeToActions
-      contentContainerStyle={{ padding: StyleConstants.Spacing.Global.PagePadding }}
+      actions={[
-      renderHiddenItem={({ item }) => (
+        {
-        <Pressable
+          onPress: ({ item }) => {
-          style={{
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'flex-end',
-            backgroundColor: colors.red
-          }}
-          onPress={() => {
             apiInstance({ method: 'delete', version: 'v2', url: `filters/${item.id}` }).then(() =>
               refetch()
             )
-          }}
+          },
-        >
+          color: colors.red,
-          <View style={{ paddingHorizontal: StyleConstants.Spacing.L }}>
+          icon: 'trash'
-            <Icon name='trash' color='white' size={StyleConstants.Font.Size.L} />
+        }
-          </View>
+      ]}
-        </Pressable>
-      )}
-      rightOpenValue={-(StyleConstants.Spacing.L * 2 + StyleConstants.Font.Size.L)}
-      disableRightSwipe
-      closeOnRowPress
       data={data?.sort(filter =>
         filter.expires_at ? new Date().getTime() - new Date(filter.expires_at).getTime() : 1
       )}
       renderItem={({ item: filter }) => (
         <Filter
+          style={{
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            paddingVertical: StyleConstants.Spacing.M
+          }}
           filter={filter}
           onPress={() => navigation.navigate('Tab-Me-Preferences-Filter', { type: 'edit', filter })}
         />
       )}
-      ItemSeparatorComponent={ComponentSeparator}
     />
   )
 }

src/screens/Tabs/Me/Preferences/index.tsx

@@ -1,8 +1,9 @@
 import { HeaderLeft } from '@components/Header'
 import { Message } from '@components/Message'
+import { useNavigationState } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { TabMePreferencesStackParamList, TabMeStackScreenProps } from '@utils/navigation/navigators'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import FlashMessage from 'react-native-flash-message'
 import TabMePreferencesFilter from './Filter'
@@ -17,6 +18,15 @@ const TabMePreferences: React.FC<TabMeStackScreenProps<'Tab-Me-Preferences'>> =
   const { t } = useTranslation('screenTabs')
   const messageRef = useRef<FlashMessage>(null)
 
+  const isNested =
+    (useNavigationState(
+      state => state.routes.find(route => route.name === 'Tab-Me-Preferences')?.state?.routes.length
+    ) || 0) > 1
+
+  useEffect(() => {
+    navigation.setOptions({ gestureEnabled: !isNested })
+  }, [isNested])
+
   return (
     <>
       <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>

src/screens/Tabs/Shared/Toot.tsx

@@ -314,6 +314,55 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
         const curr = item._level || 0
         const next = query.data?.pages[0].body[index + 1]?._level || 0
 
+        const height = heights[index] || 300
+        let path = ''
+
+        if (curr > 1 || next > 1) {
+          Array.from({ length: curr }).forEach((_, i) => {
+            if (i > MAX_LEVEL) return null
+
+            const lastLine = curr === i + 1
+            if (lastLine) {
+              if (curr === prev + 1 || curr === next - 1) {
+                if (curr > next) return
+
+                path =
+                  path +
+                  ` M ${curr * StyleConstants.Spacing.S + ARC} ${
+                    StyleConstants.Spacing.M + StyleConstants.Avatar.XS / 2
+                  } ` +
+                  `a ${ARC} ${ARC} 0 0 0 -${ARC} ${ARC} ` +
+                  `v ${height}`
+              } else {
+                if (i >= curr - 2) return
+
+                path =
+                  path +
+                  ` M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
+                  `v ${
+                    height -
+                    (StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size.L) / 2 -
+                    StyleConstants.Avatar.XS / 2
+                  } ` +
+                  `a ${ARC} ${ARC} 0 0 0 ${ARC} ${ARC}`
+              }
+            } else {
+              if (i >= next - 1) {
+                path =
+                  path +
+                  ` M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
+                  `v ${
+                    height -
+                    (StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size.L * 1.35) / 2
+                  } ` +
+                  `h ${ARC}`
+              } else {
+                path = path + ` M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v ${height}`
+              }
+            }
+          })
+        }
+
         return (
           <View
             style={{ paddingLeft: Math.min(curr - 1, MAX_LEVEL) * StyleConstants.Spacing.S }}
@@ -323,92 +372,11 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
               }
             }) => setHeights({ ...heights, [index]: height })}
           >
-            {curr > 1 || next > 1
+            {path.length ? (
-              ? [...new Array(curr)].map((_, i) => {
+              <Svg style={{ position: 'absolute' }} fill='none'>
-                  if (i > MAX_LEVEL) return null
+                <Path d={path} strokeWidth={1} stroke={colors.border} strokeOpacity={0.6} />
-
+              </Svg>
-                  const lastLine = curr === i + 1
+            ) : null}
-                  if (lastLine) {
-                    if (curr === prev + 1 || curr === next - 1) {
-                      if (curr > next) {
-                        return null
-                      }
-                      return (
-                        <Svg key={i} style={{ position: 'absolute' }} fill='none'>
-                          <Path
-                            d={
-                              `M ${curr * StyleConstants.Spacing.S + ARC} ${
-                                StyleConstants.Spacing.M + StyleConstants.Avatar.XS / 2
-                              } ` +
-                              `a ${ARC} ${ARC} 0 0 0 -${ARC} ${ARC} ` +
-                              `v ${heights[index] || 300}`
-                            }
-                            strokeWidth={1}
-                            stroke={colors.border}
-                            strokeOpacity={0.6}
-                          />
-                        </Svg>
-                      )
-                    } else {
-                      if (i >= curr - 2) return null
-                      return (
-                        <Svg key={i} style={{ position: 'absolute' }} fill='none'>
-                          <Path
-                            d={
-                              `M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
-                              `v ${
-                                (heights[index] || 300) -
-                                (StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size.L) / 2 -
-                                StyleConstants.Avatar.XS / 2
-                              } ` +
-                              `a ${ARC} ${ARC} 0 0 0 ${ARC} ${ARC}`
-                            }
-                            strokeWidth={1}
-                            stroke={colors.border}
-                            strokeOpacity={0.6}
-                          />
-                        </Svg>
-                      )
-                    }
-                  } else {
-                    if (i >= next - 1) {
-                      return (
-                        <Svg key={i} style={{ position: 'absolute' }} fill='none'>
-                          <Path
-                            d={
-                              `M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
-                              `v ${
-                                (heights[index] || 300) -
-                                (StyleConstants.Spacing.S * 1.5 +
-                                  StyleConstants.Font.Size.L * 1.35) /
-                                  2
-                              } ` +
-                              `h ${ARC}`
-                            }
-                            strokeWidth={1}
-                            stroke={colors.border}
-                            strokeOpacity={0.6}
-                          />
-                        </Svg>
-                      )
-                    } else {
-                      return (
-                        <Svg key={i} style={{ position: 'absolute' }} fill='none'>
-                          <Path
-                            d={
-                              `M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
-                              `v ${heights[index] || 300}`
-                            }
-                            strokeWidth={1}
-                            stroke={colors.border}
-                            strokeOpacity={0.6}
-                          />
-                        </Svg>
-                      )
-                    }
-                  }
-                })
-              : null}
             <TimelineDefault
               item={item}
               queryKey={item._remote ? queryKey.remote : queryKey.local}