diff --git a/src/renderer/components/item-list/helpers/autosize-unpinned-columns.ts b/src/renderer/components/item-list/helpers/append-layout-fill-column.ts similarity index 62% rename from src/renderer/components/item-list/helpers/autosize-unpinned-columns.ts rename to src/renderer/components/item-list/helpers/append-layout-fill-column.ts index 114326d54..6433fe9cd 100644 --- a/src/renderer/components/item-list/helpers/autosize-unpinned-columns.ts +++ b/src/renderer/components/item-list/helpers/append-layout-fill-column.ts @@ -1,8 +1,16 @@ import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types'; +import { TableColumn } from '/@/shared/types/types'; -// Automatically set autoSize for all unpinned columns when auto-fit is off -// This is a view-only helper and does not persist to settings -export const autoSizeUnpinnedColumns = ( +const LAYOUT_FILL_COLUMN: ItemTableListColumnConfig = { + align: 'start', + autoSize: true, + id: TableColumn.LAYOUT_FILL, + isEnabled: true, + pinned: null, + width: 0, +}; + +export const appendLayoutFillColumn = ( columns: ItemTableListColumnConfig[], autoFitColumns: boolean, ): ItemTableListColumnConfig[] => { @@ -18,6 +26,5 @@ export const autoSizeUnpinnedColumns = ( return columns; } - const idSet = new Set(unpinnedEnabled.map((c) => c.id)); - return columns.map((c) => (idSet.has(c.id) ? { ...c, autoSize: true } : c)); + return [...columns, LAYOUT_FILL_COLUMN]; }; diff --git a/src/renderer/components/item-list/helpers/use-grid-rows.ts b/src/renderer/components/item-list/helpers/use-grid-rows.ts index ca1160f6b..da015ad95 100644 --- a/src/renderer/components/item-list/helpers/use-grid-rows.ts +++ b/src/renderer/components/item-list/helpers/use-grid-rows.ts @@ -67,6 +67,7 @@ const getRowIdFromTableColumn = (tableColumn: TableColumn): null | string => { [TableColumn.ID]: null, [TableColumn.IMAGE]: null, [TableColumn.LAST_PLAYED]: 'lastPlayedAt', + [TableColumn.LAYOUT_FILL]: null, [TableColumn.OWNER]: null, [TableColumn.PATH]: null, [TableColumn.PLAY_COUNT]: 'playCount', diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx index 24aefe57b..63de98b74 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx @@ -194,6 +194,14 @@ const ItemTableListColumnBase = (props: ItemTableListColumn) => { ); } + if (type === TableColumn.LAYOUT_FILL) { + return ( + + {null} + + ); + } + if (itemType !== LibraryItem.FOLDER) { switch (type) { case TableColumn.ACTIONS: @@ -829,7 +837,11 @@ export const TableColumnHeaderContainer = ( const [isDraggedOver, setIsDraggedOver] = useState(null); useEffect(() => { - if (!containerRef.current || !props.enableColumnReorder) { + if ( + !containerRef.current || + !props.enableColumnReorder || + props.type === TableColumn.LAYOUT_FILL + ) { return; } @@ -1011,6 +1023,7 @@ export const columnLabelMap: Record = { [TableColumn.LAST_PLAYED]: i18n.t('table.column.lastPlayed', { postProcess: 'upperCase', }) as string, + [TableColumn.LAYOUT_FILL]: '', [TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'upperCase' }) as string, [TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'upperCase' }) as string, [TableColumn.PLAY_COUNT]: i18n.t('table.column.playCount', { diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx index 85c10097a..c70e25325 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx @@ -21,7 +21,7 @@ import { type CellComponentProps, Grid } from 'react-window-v2'; import styles from './item-table-list.module.css'; -import { autoSizeUnpinnedColumns } from '/@/renderer/components/item-list/helpers/autosize-unpinned-columns'; +import { appendLayoutFillColumn } from '/@/renderer/components/item-list/helpers/append-layout-fill-column'; import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id'; import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls'; import { @@ -1280,7 +1280,7 @@ const BaseItemTableList = ({ const [totalContainerWidth, setTotalContainerWidth] = useState(0); const columnsForLayout = useMemo( - () => autoSizeUnpinnedColumns(columns, autoFitColumns), + () => appendLayoutFillColumn(columns, autoFitColumns), [autoFitColumns, columns], ); diff --git a/src/shared/types/types.ts b/src/shared/types/types.ts index 31b69a15a..3a8c486fe 100644 --- a/src/shared/types/types.ts +++ b/src/shared/types/types.ts @@ -184,6 +184,7 @@ export enum TableColumn { ID = 'id', IMAGE = 'imageUrl', LAST_PLAYED = 'lastPlayedAt', + LAYOUT_FILL = '__layoutFill', OWNER = 'username', PATH = 'path', PLAY_COUNT = 'playCount',