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

move detail list to its own config

Browse Source
This commit is contained in:
jeffvli
2026-02-09 10:29:49 -08:00
parent 72b2dca759
commit ba4b07614c
12 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/helpers/use-item-list-column-reorder.ts
+20 -8
View File
@@ -7,14 +7,19 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
interface UseItemListColumnReorderProps {
itemListKey: ItemListKey;
tableKey?: 'detail' | 'main';
}
export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReorderProps) => {
export const useItemListColumnReorder = ({
itemListKey,
tableKey = 'main',
}: UseItemListColumnReorderProps) => {
const { setList } = useSettingsStoreActions();
const handleColumnReordered = useCallback(
(columnIdFrom: TableColumn, columnIdTo: TableColumn, edge: Edge | null) => {
const columns = useSettingsStore.getState().lists[itemListKey]?.table.columns;
const list = useSettingsStore.getState().lists[itemListKey];
const columns = tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
if (!columns) {
return;
@@ -83,13 +88,20 @@ export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReord
// Insert the column at the new position
newColumns.splice(newIndex, 0, updatedMovedColumn);
setList(itemListKey, {
table: {
columns: newColumns,
},
});
if (tableKey === 'detail') {
type SetListData = Parameters<
ReturnType<typeof useSettingsStoreActions>['setList']
>[1];
setList(itemListKey, { detail: { columns: newColumns } } as SetListData);
} else {
setList(itemListKey, {
table: {
columns: newColumns,
},
});
}
},
[itemListKey, setList],
[itemListKey, setList, tableKey],
);
return { handleColumnReordered };
src/renderer/components/item-list/helpers/use-item-list-column-resize.ts
+22 -8
View File
@@ -5,11 +5,18 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
interface UseItemListColumnResizeProps {
itemListKey: ItemListKey;
tableKey?: 'detail' | 'main';
}
export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResizeProps) => {
export const useItemListColumnResize = ({
itemListKey,
tableKey = 'main',
}: UseItemListColumnResizeProps) => {
const { setList } = useSettingsStoreActions();
const columns = useSettingsStore((state) => state.lists[itemListKey]?.table.columns);
const columns = useSettingsStore((state) => {
const list = state.lists[itemListKey];
return tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
});
const handleColumnResized = useCallback(
(columnId: TableColumn, width: number) => {
@@ -19,13 +26,20 @@ export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResize
column.id === columnId ? { ...column, width } : column,
);
setList(itemListKey, {
table: {
columns: updatedColumns,
},
});
if (tableKey === 'detail') {
type SetListData = Parameters<
ReturnType<typeof useSettingsStoreActions>['setList']
>[1];
setList(itemListKey, { detail: { columns: updatedColumns } } as SetListData);
} else {
setList(itemListKey, {
table: {
columns: updatedColumns,
},
});
}
},
[columns, itemListKey, setList],
[columns, itemListKey, setList, tableKey],
);
return { handleColumnResized };
src/renderer/components/item-list/item-detail-list/item-detail.module.css
+2
View File
@@ -66,6 +66,8 @@
}
.track-header-cell {
display: flex;
align-items: center;
min-width: 0;
padding-right: var(--theme-spacing-sm);
padding-left: var(--theme-spacing-sm);
src/renderer/components/item-list/item-detail-list/item-detail.tsx
+1 -1
View File
@@ -724,7 +724,7 @@ export const ItemDetailList = ({
const internalState = useItemListState(getDataFn, extractRowIdSong);
const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.ALBUM_DETAIL]?.table);
const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.ALBUM]?.detail);
const trackColumns = useMemo((): ItemTableListColumnConfig[] => {
const raw = tableConfig?.columns;
if (raw && raw.length > 0) {
src/renderer/components/item-list/types.ts
+1 -1
View File
@@ -98,7 +98,7 @@ export interface ItemListTableComponentProps<TQuery> extends ItemListComponentPr
enableRowHoverHighlight?: boolean;
enableSelection?: boolean;
enableVerticalBorders?: boolean;
size?: 'compact' | 'default';
size?: 'compact' | 'default' | 'large';
}
export interface ItemTableListColumnConfig {
src/renderer/features/albums/components/album-list-content.tsx
+11 -2
View File
@@ -74,13 +74,16 @@ export const AlbumListContent = () => {
};
const AlbumListSuspenseContainer = () => {
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
const { detail, display, grid, itemsPerPage, pagination, table } = useListSettings(
ItemListKey.ALBUM,
);
const { customFilters } = useListContext();
return (
<Suspense fallback={<Spinner container />}>
<AlbumListView
detail={detail}
display={display}
grid={grid}
itemsPerPage={itemsPerPage}
@@ -95,13 +98,17 @@ const AlbumListSuspenseContainer = () => {
export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
export const AlbumListView = ({
detail,
display,
grid,
itemsPerPage,
overrideQuery,
pagination,
table,
}: ItemListSettings & { overrideQuery?: OverrideAlbumListQuery }) => {
}: ItemListSettings & {
detail?: ItemListSettings['detail'];
overrideQuery?: OverrideAlbumListQuery;
}) => {
const server = useCurrentServer();
const { pageKey } = useListContext();
@@ -196,6 +203,7 @@ export const AlbumListView = ({
case ListPaginationType.INFINITE: {
return (
<AlbumListInfiniteDetail
enableHeader={detail?.enableHeader}
itemsPerPage={itemsPerPage}
query={mergedQuery}
serverId={server.id}
@@ -205,6 +213,7 @@ export const AlbumListView = ({
case ListPaginationType.PAGINATED: {
return (
<AlbumListPaginatedDetail
enableHeader={detail?.enableHeader}
itemsPerPage={itemsPerPage}
query={mergedQuery}
serverId={server.id}
src/renderer/features/albums/components/album-list-header-filters.tsx
+1 -1
View File
@@ -98,11 +98,11 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
<ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
<ListConfigMenu
detailConfig={{
listKey: ItemListKey.ALBUM_DETAIL,
optionsConfig: {
autoFitColumns: { hidden: true },
},
tableColumnsData: SONG_TABLE_COLUMNS,
tableKey: 'detail',
}}
listKey={ItemListKey.ALBUM}
tableColumnsData={ALBUM_TABLE_COLUMNS}
src/renderer/features/albums/components/album-list-infinite-detail.tsx
+5 -1
View File
@@ -14,9 +14,12 @@ import {
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {}
interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {
enableHeader?: boolean;
}
export const AlbumListInfiniteDetail = ({
enableHeader = true,
itemsPerPage = 100,
query = {
sortBy: AlbumListSort.NAME,
@@ -49,6 +52,7 @@ export const AlbumListInfiniteDetail = ({
return (
<ItemDetailList
data={loadedItems}
enableHeader={enableHeader}
getItem={getItem}
itemCount={itemCount}
onRangeChanged={onRangeChanged}
src/renderer/features/albums/components/album-list-paginated-detail.tsx
+9 -2
View File
@@ -16,9 +16,12 @@ import {
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {}
interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {
enableHeader?: boolean;
}
export const AlbumListPaginatedDetail = ({
enableHeader = true,
itemsPerPage = 100,
query = {
sortBy: AlbumListSort.NAME,
@@ -59,7 +62,11 @@ export const AlbumListPaginatedDetail = ({
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemDetailList currentPage={currentPage} items={data || []} />
<ItemDetailList
currentPage={currentPage}
enableHeader={enableHeader}
items={data || []}
/>
</ItemListWithPagination>
);
};
src/renderer/features/shared/components/list-config-menu.tsx
+3 -2
View File
@@ -73,9 +73,9 @@ export const ListConfigBooleanControl = ({
};
export interface ListConfigMenuDetailConfig {
listKey: ItemListKey;
optionsConfig?: ListConfigMenuOptionsConfig['detail'];
tableColumnsData: { label: string; value: string }[];
tableKey: 'detail';
}
export interface ListConfigMenuDisplayTypeConfig {
@@ -196,9 +196,10 @@ const Config = ({
return (
<TableConfig
enablePinColumnButtons={false}
listKey={props.detailConfig.listKey}
listKey={props.listKey}
optionsConfig={props.detailConfig.optionsConfig}
tableColumnsData={props.detailConfig.tableColumnsData}
tableKey="detail"
/>
);
}
src/renderer/features/shared/components/table-config.tsx
+52 -23
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';
@@ -53,6 +58,7 @@ interface TableConfigProps {
};
};
tableColumnsData: { label: string; value: string }[];
tableKey?: 'detail' | 'main';
}
export const TableConfig = ({
@@ -61,12 +67,28 @@ export const TableConfig = ({
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 = [
{
@@ -159,7 +181,7 @@ export const TableConfig = ({
})
}
size="sm"
value={list.table.size}
value={table.size}
w="100%"
/>
),
@@ -171,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',
@@ -183,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',
@@ -197,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',
@@ -211,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',
@@ -225,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',
@@ -237,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',
@@ -258,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 (
<>
@@ -267,8 +296,8 @@ export const TableConfig = ({
<TableColumnConfig
data={tableColumnsData}
enablePinColumnButtons={enablePinColumnButtons}
onChange={(columns) => setList(listKey, { table: { columns } })}
value={list.table.columns}
onChange={(columns) => setTableUpdate({ columns })}
value={table.columns}
/>
</>
);
src/renderer/store/settings.store.ts
+55 -1
View File
@@ -206,7 +206,18 @@ const ItemTableListPropsSchema = z.object({
size: z.enum(['compact', 'default', 'large']),
});
const ItemDetailListPropsSchema = z.object({
columns: z.array(ItemTableListColumnConfigSchema),
enableAlternateRowColors: z.boolean(),
enableHeader: z.boolean(),
enableHorizontalBorders: z.boolean(),
enableRowHoverHighlight: z.boolean(),
enableVerticalBorders: z.boolean(),
size: z.enum(['compact', 'default', 'large']),
});
const ItemListConfigSchema = z.object({
detail: ItemDetailListPropsSchema.optional(),
display: z.nativeEnum(ListDisplayType),
grid: z.object({
itemGap: z.enum(['lg', 'md', 'sm', 'xl', 'xs']),
@@ -790,7 +801,9 @@ export type DataGridProps = {
};
export type DataTableProps = z.infer<typeof ItemTableListPropsSchema>;
export type ItemDetailListProps = z.infer<typeof ItemDetailListPropsSchema>;
export type ItemListSettings = {
detail?: ItemDetailListProps;
display: ListDisplayType;
grid: DataGridProps;
itemsPerPage: number;
@@ -1163,6 +1176,30 @@ const initialState: SettingsState = {
},
},
[LibraryItem.ALBUM]: {
detail: {
columns: pickTableColumns({
autoSizeColumns: [],
columns: SONG_TABLE_COLUMNS,
columnWidths: {
[TableColumn.DURATION]: 100,
[TableColumn.TITLE]: 400,
[TableColumn.TRACK_NUMBER]: 50,
[TableColumn.USER_FAVORITE]: 60,
},
enabledColumns: [
TableColumn.TRACK_NUMBER,
TableColumn.TITLE,
TableColumn.DURATION,
TableColumn.USER_FAVORITE,
],
}),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
size: 'compact',
},
display: ListDisplayType.GRID,
grid: {
itemGap: 'sm',
@@ -1737,6 +1774,23 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
delete data.table;
}
if (listState && data.detail) {
if (!listState.detail) {
const t = listState.table;
listState.detail = {
columns: t.columns,
enableAlternateRowColors: false,
enableHeader: t.enableHeader,
enableHorizontalBorders: t.enableHorizontalBorders,
enableRowHoverHighlight: t.enableRowHoverHighlight,
enableVerticalBorders: t.enableVerticalBorders,
size: t.size,
};
}
Object.assign(listState.detail, data.detail);
delete data.detail;
}
if (listState && data.grid) {
Object.assign(listState.grid, data.grid);
delete data.grid;
@@ -2092,7 +2146,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
return persistedState;
},
name: 'store_settings',
version: 24,
version: 25,
},
),
);