vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add display type toggle to list headers

Browse Source
This commit is contained in:
jeffvli
2025-12-01 18:36:02 -08:00
parent 51c546fa5d
commit baf40ba50e
8 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-header-filters.tsx
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+36
View File
@@ -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
+24
View File
@@ -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
+2
View File
@@ -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>