From 0eae922a9e16254c20ffaa274139398e739f83fd Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 3 Sep 2026 01:42:33 +0100
Subject: [PATCH] Enhance ObjectTableViewButton with View Mode Cycling and
 Typography Updates

- Refactored ObjectTableViewButton to include a cycling feature for view modes, allowing users to switch between list, cards, and kanban views seamlessly.
- Updated the component to utilize Ant Design's Typography for improved text styling and consistency.
- Removed icons from view mode options to streamline the interface and focused on text labels.
- Adjusted button properties to enhance user interaction and accessibility.
---
 .../common/ObjectTableViewButton.jsx          | 63 ++++++++++++++++---
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectTableViewButton.jsx b/src/components/Dashboard/common/ObjectTableViewButton.jsx
index 8fba4024..76941505 100644
--- a/src/components/Dashboard/common/ObjectTableViewButton.jsx
+++ b/src/components/Dashboard/common/ObjectTableViewButton.jsx
@@ -1,7 +1,16 @@
 import PropTypes from 'prop-types'
 import { useContext, useMemo, useState } from 'react'
 import ObjectListViewContext from '../context/ObjectListViewContext'
-import { Button, Divider, Flex, Modal, Popover, Radio, Select } from 'antd'
+import {
+  Button,
+  Divider,
+  Flex,
+  Modal,
+  Popover,
+  Radio,
+  Select,
+  Typography
+} from 'antd'
 import GridIcon from '../../Icons/GridIcon'
 import ListIcon from '../../Icons/ListIcon'
 import KanbanIcon from '../../Icons/KanbanIcon'
@@ -10,11 +19,13 @@ import { getModelByName } from '../../../database/ObjectModels'
 import { getViewModeType, normalizeViewMode } from './viewModeUtils'
 
 const VIEW_MODE_OPTIONS = [
-  { type: 'list', label: 'List', icon: <ListIcon /> },
-  { type: 'cards', label: 'Cards', icon: <GridIcon /> },
-  { type: 'kanban', label: 'Kanban', icon: <KanbanIcon /> }
+  { type: 'list', label: 'List' },
+  { type: 'cards', label: 'Cards' },
+  { type: 'kanban', label: 'Kanban' }
 ]
 
+const { Text } = Typography
+
 const ObjectTableViewButton = ({
   objectType,
   viewMode: viewModeProp,
@@ -38,6 +49,14 @@ const ObjectTableViewButton = ({
   const hasKanbanOption = stateProperties.length > 0
   const defaultCategoryProperty = stateProperties[0]?.name
 
+  const availableViewModes = useMemo(
+    () =>
+      VIEW_MODE_OPTIONS.filter(
+        (option) => option.type !== 'kanban' || hasKanbanOption
+      ).map((option) => option.type),
+    [hasKanbanOption]
+  )
+
   const handleTypeChange = (nextType) => {
     if (nextType === 'kanban') {
       setViewMode({
@@ -63,6 +82,19 @@ const ObjectTableViewButton = ({
     })
   }
 
+  const { onClick: buttonOnClick, ...restButtonProps } = buttonProps
+
+  const handleCycleView = (event) => {
+    buttonOnClick?.(event)
+
+    const currentType = getViewModeType(normalizedViewMode)
+    const currentIndex = availableViewModes.indexOf(currentType)
+    const nextIndex =
+      currentIndex === -1 ? 0 : (currentIndex + 1) % availableViewModes.length
+
+    handleTypeChange(availableViewModes[nextIndex])
+  }
+
   const activeIcon =
     normalizedViewMode.type === 'cards' ? (
       <GridIcon />
@@ -86,14 +118,21 @@ const ObjectTableViewButton = ({
                   (option) => option.type !== 'kanban' || hasKanbanOption
                 ).map((option) => (
                   <Radio key={option.type} value={option.type}>
-                    <Flex gap='small' align='center'>
-                      {option.icon}
-                      {option.label}
+                    <Flex
+                      gap='4px'
+                      align='center'
+                      style={{ marginLeft: '4px' }}
+                    >
+                      <Text>{option.label}</Text>
                       {option.type === 'kanban' && (
                         <Button
                           type='text'
                           size='small'
-                          icon={<SettingsIcon />}
+                          icon={
+                            <SettingsIcon
+                              style={{ fontSize: '14px', marginTop: '2.5px' }}
+                            />
+                          }
                           disabled={normalizedViewMode.type !== 'kanban'}
                           onClick={(event) => {
                             event.preventDefault()
@@ -111,8 +150,14 @@ const ObjectTableViewButton = ({
         }
         placement='bottomLeft'
         arrow={false}
+        trigger='hover'
       >
-        <Button icon={activeIcon} title='View mode' {...buttonProps} />
+        <Button
+          icon={activeIcon}
+          title='View mode'
+          onClick={handleCycleView}
+          {...restButtonProps}
+        />
       </Popover>
       <Modal
         title='Kanban settings'