Show delete button when sets are selected

AppStack.tsx

@@ -88,7 +88,7 @@ const styles = StyleSheet.create({
   debugBanner: {
     position: 'absolute',
     top: 20,
-    right: 50,
+    right: 100,
     backgroundColor: 'red',
     zIndex: 1000,
     borderRadius: 5,

DrawerHeader.tsx

@@ -6,15 +6,21 @@ import { DrawerParams } from "./drawer-params";
 export default function DrawerHeader({
   name,
   children,
+  ids,
+  unSelect,
 }: {
   name: string;
   children?: JSX.Element | JSX.Element[];
+  ids?: number[],
+  unSelect?: () => void,
 }) {
   const navigation = useNavigation<DrawerNavigationProp<DrawerParams>>();
 
   return (
     <Appbar.Header>
-      <IconButton icon="menu" onPress={navigation.openDrawer} />
+      {ids && ids.length > 0 ? (<IconButton icon="arrow-left" onPress={unSelect} />) : (
+        <IconButton icon="menu" onPress={navigation.openDrawer} />
+      )}
       <Appbar.Content title={name} />
       {children}
     </Appbar.Header>

ListMenu.tsx

@@ -47,40 +47,45 @@ export default function ListMenu({
   };
 
   return (
-    <Menu
+    <>
-      visible={showMenu}
+      {ids.length > 0 && (
-      onDismiss={() => setShowMenu(false)}
+        <IconButton icon="delete" onPress={() => setShowRemove(true)} />
-      anchor={
+      )}
-        <IconButton onPress={() => setShowMenu(true)} icon="dots-vertical" />
+      <Menu
-      }
+        visible={showMenu}
-    >
+        onDismiss={() => setShowMenu(false)}
-      <Menu.Item leadingIcon="check-all" title="Select all" onPress={select} />
+        anchor={
-      <Menu.Item
+          <IconButton onPress={() => setShowMenu(true)} icon="dots-vertical" />
-        leadingIcon="close"
+        }
-        title="Clear"
+      >
-        onPress={clear}
+        <Menu.Item leadingIcon="check-all" title="Select all" onPress={select} />
-        disabled={ids?.length === 0}
-      />
-      <Menu.Item
-        leadingIcon="pencil"
-        title="Edit"
-        onPress={edit}
-        disabled={ids?.length === 0}
-      />
-      {onCopy && (
         <Menu.Item
-          leadingIcon="content-copy"
+          leadingIcon="close"
-          title="Copy"
+          title="Clear"
-          onPress={copy}
+          onPress={clear}
           disabled={ids?.length === 0}
         />
-      )}
+        <Menu.Item
-      <Divider />
+          leadingIcon="pencil"
-      <Menu.Item
+          title="Edit"
-        leadingIcon="delete"
+          onPress={edit}
-        onPress={() => setShowRemove(true)}
+          disabled={ids?.length === 0}
-        title="Delete"
+        />
-      />
+        {onCopy && (
+          <Menu.Item
+            leadingIcon="content-copy"
+            title="Copy"
+            onPress={copy}
+            disabled={ids?.length === 0}
+          />
+        )}
+        <Divider />
+        <Menu.Item
+          leadingIcon="delete"
+          onPress={() => setShowRemove(true)}
+          title="Delete"
+        />
+      </Menu>
       <ConfirmDialog
         title={ids?.length === 0 ? "Delete all" : "Delete selected"}
         show={showRemove}
@@ -94,6 +99,6 @@ export default function ListMenu({
           <>This will delete {ids?.length} record(s). Are you sure?</>
         )}
       </ConfirmDialog>
-    </Menu>
+    </>
   );
 }

SetList.tsx

@@ -164,6 +164,8 @@ export default function SetList() {
     <>
       <DrawerHeader
         name={ids.length > 0 ? `${ids.length} selected` : "History"}
+        ids={ids}
+        unSelect={() => setIds([])}
       >
         <ListMenu
           onClear={clear}