feat(tiles): allow users to toggle between editing and viewing (#1238)

<img width="502" height="189" alt="image"
src="https://github.com/user-attachments/assets/d4ce4e83-a390-4e81-b597-4584e4f6841f"
/>

Author: pregnantboy

packages/frontend/src/pages/Tile/components/TableBanner/EditMode.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { BiChevronDown } from 'react-icons/bi'
 import { MdOutlineModeEdit, MdOutlineRemoveRedEye } from 'react-icons/md'
 import { Flex, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react'
 import { Badge, Menu } from '@opengovsg/design-system-react'
@@ -14,18 +15,18 @@ interface ModeOption {
 }
 
 const MODES: ModeOption[] = [
-  {
-    label: 'View only',
-    icon: <MdOutlineRemoveRedEye size={16} />,
-    colorScheme: 'secondary',
-    value: 'view',
-  },
   {
     label: 'Edit Mode',
     icon: <MdOutlineModeEdit size={16} />,
     colorScheme: 'primary',
     value: 'edit',
   },
+  {
+    label: 'View only',
+    icon: <MdOutlineRemoveRedEye size={16} />,
+    colorScheme: 'secondary',
+    value: 'view',
+  },
 ]
 
 const EditMode = () => {
@@ -36,31 +37,25 @@ const EditMode = () => {
     [mode],
   )
 
-  if (hasEditPermission) {
-    return null
-  }
-
   return (
     <Menu gutter={0} colorScheme="secondary">
       <Badge
         as={MenuButton}
-        /**
-         * Prevent the button from being clicked, as it is only used to display the current mode
-         * remove this prop to allow selection of view/edit mode
-         */
-        pointerEvents="none"
         variant="subtle"
         size="xs"
         fontSize="xs"
-        py={1}
+        height={{ base: 10, md: 7 }}
+        my="auto"
         border="none"
         colorScheme={selectedModeOption.colorScheme}
+        pointerEvents={hasEditPermission ? 'auto' : 'none'}
       >
-        <Flex alignItems="center" gap={1}>
+        <Flex alignItems="center" gap={2}>
           {selectedModeOption.icon}
           <Text display={{ base: 'none', md: 'flex' }}>
             {selectedModeOption.label}
           </Text>
+          {hasEditPermission && <BiChevronDown />}
         </Flex>
       </Badge>
 

packages/frontend/src/pages/Tile/components/TableBanner/index.tsx

@@ -20,12 +20,12 @@ function TableBanner() {
       overflow="hidden"
       zIndex={10}
     >
-      <Flex alignItems="center" gap={4}>
+      <Flex alignItems="center" gap={8}>
         {role ? <BreadCrumb /> : <Text textStyle="subhead-1">{tableName}</Text>}
-        <EditMode />
       </Flex>
       <Flex gap={2}>
         <RefreshButton />
+        <EditMode />
         <ImportExportToolbar />
       </Flex>
     </Flex>