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',