Partial fix #495

Add delete list
Also trying out new context menu

src/i18n/en/common.json

@@ -4,7 +4,8 @@
     "apply": "Apply",
     "cancel": "Cancel",
     "discard": "Discard",
-    "continue": "Continue"
+    "continue": "Continue",
+    "delete": "Delete"
   },
   "customEmoji": {
     "accessibilityLabel": "Custom emoji {{emoji}}"

src/i18n/en/screens/tabs.json

@@ -104,6 +104,13 @@
         }
       }
     },
+    "listDelete": {
+      "heading": "Delete list",
+      "confirm": {
+        "title": "Delete list \"{{list}}\"?",
+        "message": "This action is not recoverable."
+      }
+    },
     "profile": {
       "feedback": {
         "succeed": "{{type}} updated",

src/screens/Tabs/Me/List.tsx

@@ -1,28 +1,94 @@
-import { HeaderRight } from '@components/Header'
+import Icon from '@components/Icon'
+import { displayMessage } from '@components/Message'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import { TabMeStackScreenProps } from '@utils/navigation/navigators'
+import { QueryKeyLists, useListsMutation } from '@utils/queryHooks/lists'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Alert } from 'react-native'
+import { useQueryClient } from 'react-query'
+import * as DropdownMenu from 'zeego/dropdown-menu'
 
 const TabMeList: React.FC<TabMeStackScreenProps<'Tab-Me-List'>> = ({
   navigation,
   route: { key, params }
 }) => {
+  const { colors, theme } = useTheme()
   const { t } = useTranslation('screenTabs')
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'List', list: params.id }]
 
+  const queryKeyLists: QueryKeyLists = ['Lists']
+  const queryClient = useQueryClient()
+  const mutation = useListsMutation({
+    onSuccess: () => {
+      queryClient.refetchQueries(queryKeyLists)
+      navigation.pop(1)
+    },
+    onError: () => {
+      displayMessage({
+        theme,
+        type: 'error',
+        message: t('common:message.error.message', {
+          function: t('me.listDelete.heading')
+        })
+      })
+    }
+  })
+
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <HeaderRight
-          accessibilityLabel={t('me.stacks.listEdit.name')}
-          content='Edit'
-          onPress={() =>
-            navigation.navigate('Tab-Me-List-Edit', { type: 'edit', payload: params, key })
-          }
-        />
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Icon
+              name='MoreHorizontal'
+              size={StyleConstants.Spacing.M * 1.25}
+              color={colors.primaryDefault}
+            />
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content>
+            <DropdownMenu.Item
+              key='list-edit'
+              onSelect={() =>
+                navigation.navigate('Tab-Me-List-Edit', {
+                  type: 'edit',
+                  payload: params,
+                  key
+                })
+              }
+            >
+              <DropdownMenu.ItemTitle children={t('me.stacks.listEdit.name')} />
+              <DropdownMenu.ItemIcon iosIconName='square.and.pencil' />
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              key='list-delete'
+              destructive
+              onSelect={() =>
+                Alert.alert(
+                  t('me.listDelete.confirm.title', { list: params.title.slice(0, 6) }),
+                  t('me.listDelete.confirm.message'),
+                  [
+                    {
+                      text: t('common:buttons.delete'),
+                      style: 'destructive',
+                      onPress: () => mutation.mutate({ type: 'delete', payload: params })
+                    },
+                    { text: t('common:buttons.cancel') }
+                  ]
+                )
+              }
+            >
+              <DropdownMenu.ItemTitle children={t('me.listDelete.heading')} />
+              <DropdownMenu.ItemIcon iosIconName='trash' />
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
       )
     })
   }, [params])

src/utils/queryHooks/lists.ts

@@ -26,6 +26,10 @@ type MutationVarsLists =
       type: 'edit'
       payload: Mastodon.List
     }
+  | {
+      type: 'delete'
+      payload: Pick<Mastodon.List, 'id'>
+    }
 
 const mutationFunction = async (params: MutationVarsLists) => {
   const body = new FormData()
@@ -48,6 +52,11 @@ const mutationFunction = async (params: MutationVarsLists) => {
         url: `lists/${params.payload.id}`,
         body
       }).then(res => res.body)
+    case 'delete':
+      return apiInstance({
+        method: 'delete',
+        url: `lists/${params.payload.id}`
+      })
   }
 }