add display type toggle to list headers

src/renderer/features/shared/components/display-type-toggle-button.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+
+import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
+import { ListDisplayType } from '/@/shared/types/types';
+
+interface DisplayTypeToggleButtonProps {
+    buttonProps?: Partial<ActionIconProps>;
+    displayType: ListDisplayType;
+    onToggle: () => void;
+}
+
+export const DisplayTypeToggleButton = ({
+    buttonProps,
+    displayType,
+    onToggle,
+}: DisplayTypeToggleButtonProps) => {
+    const { t } = useTranslation();
+    const isGrid = displayType === ListDisplayType.GRID;
+
+    return (
+        <ActionIcon
+            icon={isGrid ? 'layoutGrid' : 'layoutTable'}
+            iconProps={{
+                size: 'lg',
+            }}
+            onClick={onToggle}
+            tooltip={{
+                label: isGrid
+                    ? t('table.config.view.grid', { postProcess: 'sentenceCase' })
+                    : t('table.config.view.table', { postProcess: 'sentenceCase' }),
+            }}
+            variant="subtle"
+            {...buttonProps}
+        />
+    );
+};

src/renderer/features/shared/components/list-display-type-toggle-button.tsx

@@ -0,0 +1,24 @@
+import { DisplayTypeToggleButton } from '/@/renderer/features/shared/components/display-type-toggle-button';
+import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
+
+interface ListDisplayTypeToggleButtonProps {
+    listKey: ItemListKey;
+}
+
+export const ListDisplayTypeToggleButton = ({ listKey }: ListDisplayTypeToggleButtonProps) => {
+    const displayType = useSettingsStore(
+        (state) => state.lists[listKey]?.display,
+    ) as ListDisplayType;
+    const { setList } = useSettingsStoreActions();
+
+    const handleToggleDisplayType = () => {
+        const newDisplayType =
+            displayType === ListDisplayType.GRID ? ListDisplayType.TABLE : ListDisplayType.GRID;
+        setList(listKey, {
+            display: newDisplayType,
+        });
+    };
+
+    return <DisplayTypeToggleButton displayType={displayType} onToggle={handleToggleDisplayType} />;
+};