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

Add album detail list view (#1681)

Browse Source
This commit is contained in:
Jeff
2026-02-09 21:56:08 -08:00
committed by GitHub
parent 397610d8ab
commit f39a7f8d6f
79 changed files with 3462 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/shared/components/display-type-toggle-button.tsx
+5 -2
View File
@@ -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
+33
View File
@@ -37,6 +37,15 @@ const DISPLAY_TYPES = [
),
value: ListDisplayType.GRID,
},
{
label: (
<Group align="center" justify="center" p="sm">
<Icon icon="layoutDetail" size="lg" />
{i18n.t('table.config.view.detail', { postProcess: 'sentenceCase' }) as string}
</Group>
),
value: ListDisplayType.DETAIL,
},
// {
// disabled: true,
// label: (
@@ -63,6 +72,12 @@ export const ListConfigBooleanControl = ({
);
};
export interface ListConfigMenuDetailConfig {
optionsConfig?: ListConfigMenuOptionsConfig['detail'];
tableColumnsData: { label: string; value: string }[];
tableKey: 'detail';
}
export interface ListConfigMenuDisplayTypeConfig {
disabled?: boolean;
hidden?: boolean;
@@ -75,6 +90,9 @@ export interface ListConfigMenuOptionConfig {
}
export interface ListConfigMenuOptionsConfig {
detail?: {
[key: string]: ListConfigMenuOptionConfig;
};
grid?: {
[key: string]: ListConfigMenuOptionConfig;
};
@@ -85,6 +103,7 @@ export interface ListConfigMenuOptionsConfig {
interface ListConfigMenuProps {
buttonProps?: ActionIconProps;
detailConfig?: ListConfigMenuDetailConfig;
displayTypes?: ListConfigMenuDisplayTypeConfig[];
listKey: ItemListKey;
optionsConfig?: ListConfigMenuOptionsConfig;
@@ -172,6 +191,20 @@ const Config = ({
...props
}: ListConfigMenuProps & { displayType: ListDisplayType }) => {
switch (displayType) {
case ListDisplayType.DETAIL:
if (props.detailConfig) {
return (
<TableConfig
enablePinColumnButtons={false}
listKey={props.listKey}
optionsConfig={props.detailConfig.optionsConfig}
tableColumnsData={props.detailConfig.tableColumnsData}
tableKey="detail"
/>
);
}
return null;
case ListDisplayType.GRID:
return (
<GridConfig
src/renderer/features/shared/components/list-display-type-toggle-button.tsx
+29 -3
View File
@@ -3,21 +3,47 @@ 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 =
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;
}
}
setList(listKey, {
display: newDisplayType,
});
return;
};
return <DisplayTypeToggleButton displayType={displayType} onToggle={handleToggleDisplayType} />;
src/renderer/features/shared/components/table-config.tsx
+91 -51
View File
@@ -21,7 +21,12 @@ import {
ListConfigBooleanControl,
ListConfigTable,
} from '/@/renderer/features/shared/components/list-config-menu';
import { ItemListSettings, useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
import {
type DataTableProps,
ItemListSettings,
useSettingsStore,
useSettingsStoreActions,
} from '/@/renderer/store';
import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
import { Badge } from '/@/shared/components/badge/badge';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -39,6 +44,7 @@ import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/d
import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
interface TableConfigProps {
enablePinColumnButtons?: boolean;
extraOptions?: {
component: React.ReactNode;
id: string;
@@ -52,19 +58,37 @@ interface TableConfigProps {
};
};
tableColumnsData: { label: string; value: string }[];
tableKey?: 'detail' | 'main';
}
export const TableConfig = ({
enablePinColumnButtons = true,
extraOptions,
listKey,
optionsConfig,
tableColumnsData,
tableKey = 'main',
}: TableConfigProps) => {
const { t } = useTranslation();
const list = useSettingsStore((state) => state.lists[listKey]) as ItemListSettings;
const { setList } = useSettingsStoreActions();
const table = tableKey === 'detail' ? (list?.detail ?? list?.table) : list?.table;
const setTableUpdate = useCallback(
(patch: Partial<DataTableProps>) => {
if (tableKey === 'detail') {
setList(listKey, { detail: patch } as Parameters<
ReturnType<typeof useSettingsStoreActions>['setList']
>[1]);
} else {
setList(listKey, { table: patch });
}
},
[listKey, setList, tableKey],
);
const advancedSettings = useMemo(() => {
const allOptions = [
{
@@ -152,12 +176,12 @@ export const TableConfig = ({
},
]}
onChange={(value) =>
setList(listKey, {
table: { size: value as 'compact' | 'default' },
setTableUpdate({
size: value as 'compact' | 'default' | 'large',
})
}
size="sm"
value={list.table.size}
value={table?.size ?? 'default'}
w="100%"
/>
),
@@ -169,8 +193,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { enableHeader: e } })}
value={list.table.enableHeader}
onChange={(e) => setTableUpdate({ enableHeader: e })}
value={table.enableHeader}
/>
),
id: 'enableHeader',
@@ -181,10 +205,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) =>
setList(listKey, { table: { enableRowHoverHighlight: e } })
}
value={list.table.enableRowHoverHighlight}
onChange={(e) => setTableUpdate({ enableRowHoverHighlight: e })}
value={table.enableRowHoverHighlight}
/>
),
id: 'enableRowHoverHighlight',
@@ -195,10 +217,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) =>
setList(listKey, { table: { enableAlternateRowColors: e } })
}
value={list.table.enableAlternateRowColors}
onChange={(e) => setTableUpdate({ enableAlternateRowColors: e })}
value={table.enableAlternateRowColors}
/>
),
id: 'enableAlternateRowColors',
@@ -209,10 +229,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) =>
setList(listKey, { table: { enableHorizontalBorders: e } })
}
value={list.table.enableHorizontalBorders}
onChange={(e) => setTableUpdate({ enableHorizontalBorders: e })}
value={table.enableHorizontalBorders}
/>
),
id: 'enableHorizontalBorders',
@@ -223,8 +241,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { enableVerticalBorders: e } })}
value={list.table.enableVerticalBorders}
onChange={(e) => setTableUpdate({ enableVerticalBorders: e })}
value={table.enableVerticalBorders}
/>
),
id: 'enableVerticalBorders',
@@ -235,8 +253,10 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { autoFitColumns: e } })}
value={list.table.autoFitColumns}
onChange={(e) => setTableUpdate({ autoFitColumns: e })}
value={
tableKey === 'main' ? (table as DataTableProps).autoFitColumns : false
}
/>
),
id: 'autoFitColumns',
@@ -256,7 +276,18 @@ export const TableConfig = ({
return option;
})
.filter((option): option is NonNullable<typeof option> => option !== null);
}, [extraOptions, listKey, optionsConfig, setList, t, list]);
}, [
t,
list.pagination,
list.itemsPerPage,
table,
tableKey,
extraOptions,
setList,
listKey,
setTableUpdate,
optionsConfig,
]);
return (
<>
@@ -264,8 +295,9 @@ export const TableConfig = ({
<Divider />
<TableColumnConfig
data={tableColumnsData}
onChange={(columns) => setList(listKey, { table: { columns } })}
value={list.table.columns}
enablePinColumnButtons={enablePinColumnButtons}
onChange={(columns) => setTableUpdate({ columns })}
value={table.columns}
/>
</>
);
@@ -273,10 +305,12 @@ export const TableConfig = ({
const TableColumnConfig = ({
data,
enablePinColumnButtons,
onChange,
value,
}: {
data: { label: string; value: string }[];
enablePinColumnButtons: boolean;
onChange: (value: ItemTableListColumnConfig[]) => void;
value: ItemTableListColumnConfig[];
}) => {
@@ -473,6 +507,7 @@ const TableColumnConfig = ({
<div style={{ userSelect: 'none' }}>
{filteredColumns.map(({ item, matches }) => (
<TableColumnItem
enablePinColumnButtons={enablePinColumnButtons}
handleAlignCenter={handleAlignCenter}
handleAlignLeft={handleAlignLeft}
handleAlignRight={handleAlignRight}
@@ -516,6 +551,7 @@ const DragHandle = ({
const TableColumnItem = memo(
({
enablePinColumnButtons,
handleAlignCenter,
handleAlignLeft,
handleAlignRight,
@@ -531,6 +567,7 @@ const TableColumnItem = memo(
label,
matches,
}: {
enablePinColumnButtons: boolean;
handleAlignCenter: (item: ItemTableListColumnConfig) => void;
handleAlignLeft: (item: ItemTableListColumnConfig) => void;
handleAlignRight: (item: ItemTableListColumnConfig) => void;
@@ -667,32 +704,34 @@ const TableColumnItem = memo(
variant="subtle"
/>
</ActionIconGroup>
<ActionIconGroup className={styles.group}>
<ActionIcon
icon="arrowLeftToLine"
iconProps={{ size: 'md' }}
onClick={() => handlePinToLeft(item)}
size="xs"
tooltip={{
label: t('table.config.general.pinToLeft', {
postProcess: 'sentenceCase',
}),
}}
variant={item.pinned === 'left' ? 'filled' : 'subtle'}
/>
<ActionIcon
icon="arrowRightToLine"
iconProps={{ size: 'md' }}
onClick={() => handlePinToRight(item)}
size="xs"
tooltip={{
label: t('table.config.general.pinToRight', {
postProcess: 'sentenceCase',
}),
}}
variant={item.pinned === 'right' ? 'filled' : 'subtle'}
/>
</ActionIconGroup>
{enablePinColumnButtons && (
<ActionIconGroup className={styles.group}>
<ActionIcon
icon="arrowLeftToLine"
iconProps={{ size: 'md' }}
onClick={() => handlePinToLeft(item)}
size="xs"
tooltip={{
label: t('table.config.general.pinToLeft', {
postProcess: 'sentenceCase',
}),
}}
variant={item.pinned === 'left' ? 'filled' : 'subtle'}
/>
<ActionIcon
icon="arrowRightToLine"
iconProps={{ size: 'md' }}
onClick={() => handlePinToRight(item)}
size="xs"
tooltip={{
label: t('table.config.general.pinToRight', {
postProcess: 'sentenceCase',
}),
}}
variant={item.pinned === 'right' ? 'filled' : 'subtle'}
/>
</ActionIconGroup>
)}
<ActionIconGroup className={styles.group}>
<ActionIcon
icon="alignLeft"
@@ -772,6 +811,7 @@ const TableColumnItem = memo(
(prevProps, nextProps) => {
// Custom comparison function for better memoization
return (
prevProps.enablePinColumnButtons === nextProps.enablePinColumnButtons &&
prevProps.item.id === nextProps.item.id &&
prevProps.item.isEnabled === nextProps.item.isEnabled &&
prevProps.item.autoSize === nextProps.item.autoSize &&
src/renderer/features/shared/mutations/favorite-optimistic-updates.ts
+24
View File
@@ -520,6 +520,28 @@ export const applyFavoriteOptimisticUpdates = (
}
});
const songListQueryKey = queryKeys.songs.list(variables.apiClientProps.serverId);
const songListQueries = queryClient.getQueriesData({
exact: false,
queryKey: songListQueryKey,
});
songListQueries.forEach(([queryKey, data]) => {
if (data) {
pendingUpdates.push({
previousData: data,
queryKey,
updater: (prev: undefined | { items: Song[] }) => {
if (!prev) return prev;
const updatedItems = updateItemInArray(prev.items, itemIdSet, (item) =>
createFavoriteUpdater<Song>(item),
);
return updatedItems ? { ...prev, items: updatedItems } : prev;
},
});
}
});
const topSongsQueryKey = queryKeys.albumArtists.topSongs(
variables.apiClientProps.serverId,
);
@@ -679,6 +701,7 @@ export const applyFavoriteOptimisticUpdatesDeferred = (
queryKeys.playlists.songList(variables.apiClientProps.serverId),
'playlist-song-list',
);
collectQueries(queryKeys.songs.list(variables.apiClientProps.serverId), 'song-list');
collectQueries(
queryKeys.albumArtists.topSongs(variables.apiClientProps.serverId),
'top-songs',
@@ -742,6 +765,7 @@ export const applyFavoriteOptimisticUpdatesDeferred = (
case 'album-list':
case 'artist-list':
case 'playlist-song-list':
case 'song-list':
case 'top-songs': {
const updatedItems = updateItemInArray(
prev.items || [],
src/renderer/features/shared/mutations/rating-optimistic-updates.ts
+24
View File
@@ -519,6 +519,28 @@ export const applyRatingOptimisticUpdates = (
}
});
const songListQueryKey = queryKeys.songs.list(variables.apiClientProps.serverId);
const songListQueries = queryClient.getQueriesData({
exact: false,
queryKey: songListQueryKey,
});
songListQueries.forEach(([queryKey, data]) => {
if (data) {
pendingUpdates.push({
previousData: data,
queryKey,
updater: (prev: undefined | { items: Song[] }) => {
if (!prev) return prev;
const updatedItems = updateItemInArray(prev.items, itemIdSet, (item) =>
createRatingUpdater<Song>(item),
);
return updatedItems ? { ...prev, items: updatedItems } : prev;
},
});
}
});
const topSongsQueryKey = queryKeys.albumArtists.topSongs(
variables.apiClientProps.serverId,
);
@@ -652,6 +674,7 @@ export const applyRatingOptimisticUpdatesDeferred = (
queryKeys.songs.detail(variables.apiClientProps.serverId),
'song-detail',
);
collectQueries(queryKeys.songs.list(variables.apiClientProps.serverId), 'song-list');
collectQueries(
queryKeys.albumArtists.topSongs(variables.apiClientProps.serverId),
'top-songs',
@@ -712,6 +735,7 @@ export const applyRatingOptimisticUpdatesDeferred = (
case 'album-artist-list':
case 'album-list':
case 'artist-list':
case 'song-list':
case 'top-songs': {
const updatedItems = updateItemInArray(
prev.items || [],