add detail display type to toggle

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -95,7 +95,7 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                 <ListRefreshButton listKey={pageKey as ItemListKey} />
             </Group>
             <Group gap="sm" wrap="nowrap">
-                <ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
+                <ListDisplayTypeToggleButton enableDetail listKey={ItemListKey.ALBUM} />
                 <ListConfigMenu
                     detailConfig={{
                         optionsConfig: {

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

@@ -16,10 +16,11 @@ export const DisplayTypeToggleButton = ({
 }: DisplayTypeToggleButtonProps) => {
     const { t } = useTranslation();
     const isGrid = displayType === ListDisplayType.GRID;
+    const isDetail = displayType === ListDisplayType.DETAIL;
 
     return (
         <ActionIcon
-            icon={isGrid ? 'layoutGrid' : 'layoutTable'}
+            icon={isGrid ? 'layoutGrid' : isDetail ? 'layoutDetail' : 'layoutTable'}
             iconProps={{
                 size: 'lg',
             }}
@@ -27,7 +28,9 @@ export const DisplayTypeToggleButton = ({
             tooltip={{
                 label: isGrid
                     ? t('table.config.view.grid', { postProcess: 'sentenceCase' })
-                    : t('table.config.view.table', { postProcess: 'sentenceCase' }),
+                    : isDetail
+                      ? t('table.config.view.detail', { postProcess: 'sentenceCase' })
+                      : t('table.config.view.table', { postProcess: 'sentenceCase' }),
             }}
             variant="subtle"
             {...buttonProps}

src/renderer/features/shared/components/list-config-menu.tsx

@@ -40,7 +40,7 @@ const DISPLAY_TYPES = [
     {
         label: (
             <Group align="center" justify="center" p="sm">
-                <Icon icon="layoutList" size="lg" />
+                <Icon icon="layoutDetail" size="lg" />
                 {i18n.t('table.config.view.detail', { postProcess: 'sentenceCase' }) as string}
             </Group>
         ),

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

@@ -3,21 +3,50 @@ import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
 interface ListDisplayTypeToggleButtonProps {
+    enableDetail?: boolean;
     listKey: ItemListKey;
 }
 
-export const ListDisplayTypeToggleButton = ({ listKey }: ListDisplayTypeToggleButtonProps) => {
+export const ListDisplayTypeToggleButton = ({
+    enableDetail = false,
+    listKey,
+}: ListDisplayTypeToggleButtonProps) => {
     const displayType = useSettingsStore(
         (state) => state.lists[listKey]?.display,
     ) as ListDisplayType;
     const { setList } = useSettingsStoreActions();
 
     const handleToggleDisplayType = () => {
-        const newDisplayType =
+        console.log('enableDetail', enableDetail);
-            displayType === ListDisplayType.GRID ? ListDisplayType.TABLE : ListDisplayType.GRID;
+        let newDisplayType: ListDisplayType;
+
+        if (enableDetail) {
+            if (displayType === ListDisplayType.DETAIL) {
+                newDisplayType = ListDisplayType.TABLE;
+            } else if (displayType === ListDisplayType.TABLE) {
+                newDisplayType = ListDisplayType.GRID;
+            } else if (displayType === ListDisplayType.GRID) {
+                newDisplayType = ListDisplayType.DETAIL;
+            } else {
+                newDisplayType = ListDisplayType.GRID;
+            }
+        } else {
+            if (displayType === ListDisplayType.GRID) {
+                newDisplayType = ListDisplayType.TABLE;
+            } else if (displayType === ListDisplayType.TABLE) {
+                newDisplayType = ListDisplayType.GRID;
+            } else {
+                newDisplayType = ListDisplayType.GRID;
+            }
+        }
+
+        console.log('newDisplayType', newDisplayType);
+
         setList(listKey, {
             display: newDisplayType,
         });
+
+        return;
     };
 
     return <DisplayTypeToggleButton displayType={displayType} onToggle={handleToggleDisplayType} />;

src/shared/components/icon/icon.tsx

@@ -58,6 +58,7 @@ import {
     LuInfo,
     LuKeyboard,
     LuLayoutGrid,
+    LuLayoutList,
     LuLibrary,
     LuList,
     LuListFilter,
@@ -186,6 +187,7 @@ export const AppIcon = {
     itemSong: LuMusic,
     keyboard: LuKeyboard,
     lastPlayed: LuHeadphones,
+    layoutDetail: LuLayoutList,
     layoutGrid: LuLayoutGrid,
     layoutList: LuList,
     layoutTable: LuTable,