add display type toggle to list headers

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
+import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListFiltersModal } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
@@ -69,6 +70,7 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                 <ListRefreshButton listKey={ItemListKey.ALBUM} />
             </Group>
             <Group gap="sm" wrap="nowrap">
+                <ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
                 <ListConfigMenu
                     listKey={ItemListKey.ALBUM}
                     tableColumnsData={ALBUM_TABLE_COLUMNS}

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

@@ -1,5 +1,6 @@
 import { ALBUM_ARTIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
+import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
@@ -26,6 +27,7 @@ export const AlbumArtistListHeaderFilters = () => {
                 <ListRefreshButton listKey={ItemListKey.ALBUM_ARTIST} />
             </Group>
             <Group gap="sm" wrap="nowrap">
+                <ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM_ARTIST} />
                 <ListConfigMenu
                     listKey={ItemListKey.ALBUM_ARTIST}
                     tableColumnsData={ALBUM_ARTIST_TABLE_COLUMNS}

src/renderer/features/artists/components/artist-list-header-filters.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { ALBUM_ARTIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
+import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSelectFilter } from '/@/renderer/features/shared/components/list-select-filter';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
@@ -46,6 +47,7 @@ export const ArtistListHeaderFilters = () => {
                 <ListRefreshButton listKey={ItemListKey.ARTIST} />
             </Group>
             <Group gap="sm" wrap="nowrap">
+                <ListDisplayTypeToggleButton listKey={ItemListKey.ARTIST} />
                 <ListConfigMenu
                     listKey={ItemListKey.ARTIST}
                     tableColumnsData={ALBUM_ARTIST_TABLE_COLUMNS}

src/renderer/features/genres/components/genre-list-header-filters.tsx

@@ -1,5 +1,6 @@
 import { GENRE_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
+import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListFiltersModal } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
@@ -28,6 +29,7 @@ export const GenreListHeaderFilters = () => {
                 <ListRefreshButton listKey={ItemListKey.GENRE} />
             </Group>
             <Group gap="sm" wrap="nowrap">
+                <ListDisplayTypeToggleButton listKey={ItemListKey.GENRE} />
                 <ListConfigMenu
                     listKey={ItemListKey.GENRE}
                     tableColumnsData={GENRE_TABLE_COLUMNS}

src/renderer/features/playlists/components/playlist-list-header-filters.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
+import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListFiltersModal } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
@@ -46,6 +47,7 @@ export const PlaylistListHeaderFilters = () => {
                 <Button onClick={handleCreatePlaylistModal} variant="subtle">
                     {t('action.createPlaylist', { postProcess: 'sentenceCase' })}
                 </Button>
+                <ListDisplayTypeToggleButton listKey={ItemListKey.PLAYLIST} />
                 <ListConfigMenu
                     listKey={ItemListKey.PLAYLIST}
                     tableColumnsData={PLAYLIST_TABLE_COLUMNS}

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} />;
+};

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
+import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
 import { ListFiltersModal } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
@@ -69,6 +70,7 @@ export const SongListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget
                 <ListRefreshButton listKey={ItemListKey.SONG} />
             </Group>
             <Group gap="sm" wrap="nowrap">
+                <ListDisplayTypeToggleButton listKey={ItemListKey.SONG} />
                 <ListConfigMenu listKey={ItemListKey.SONG} tableColumnsData={SONG_TABLE_COLUMNS} />
             </Group>
         </Flex>