add draggable table column resize

src/renderer/components/item-list/helpers/item-list-controls.ts

@@ -6,12 +6,18 @@ import { ItemListStateItemWithRequiredProperties } from '/@/renderer/components/
 import { DefaultItemControlProps, ItemControls } from '/@/renderer/components/item-list/types';
 import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
-import { Play } from '/@/shared/types/types';
+import { Play, TableColumn } from '/@/shared/types/types';
 
-export const useDefaultItemListControls = () => {
+interface UseDefaultItemListControlsArgs {
+    onColumnResized?: (columnId: TableColumn, width: number) => void;
+}
+
+export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs) => {
     const player = usePlayerContext();
     const navigate = useNavigate();
 
+    const { onColumnResized } = args || {};
+
     const controls: ItemControls = useMemo(() => {
         return {
             onClick: ({ event, internalState, item }: DefaultItemControlProps) => {
@@ -147,6 +153,10 @@ export const useDefaultItemListControls = () => {
                 }
             },
 
+            onColumnResized: ({ columnId, width }: { columnId: TableColumn; width: number }) => {
+                onColumnResized?.(columnId, width);
+            },
+
             onDoubleClick: ({ internalState, item, itemType }: DefaultItemControlProps) => {
                 if (!item || !internalState) {
                     return;
@@ -239,7 +249,7 @@ export const useDefaultItemListControls = () => {
                 player.setRating(item._serverId, [item.id], itemType, newRating);
             },
         };
-    }, [player, navigate]);
+    }, [onColumnResized, navigate, player]);
 
     return controls;
 };

src/renderer/components/item-list/helpers/use-item-list-column-resize.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+import { ItemListKey, TableColumn } from '/@/shared/types/types';
+
+interface UseItemListColumnResizeProps {
+    itemListKey: ItemListKey;
+}
+
+export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResizeProps) => {
+    const { setList } = useSettingsStoreActions();
+    const columns = useSettingsStore((state) => state.lists[itemListKey]?.table.columns);
+
+    const handleColumnResized = useCallback(
+        (columnId: TableColumn, width: number) => {
+            if (!columns) return;
+
+            const updatedColumns = columns.map((column) =>
+                column.id === columnId ? { ...column, width } : column,
+            );
+
+            setList(itemListKey, {
+                table: {
+                    columns: updatedColumns,
+                },
+            });
+        },
+        [columns, itemListKey, setList],
+    );
+
+    return { handleColumnResized };
+};