store user's column width (#1541)

* Resolving conflicts

* ruff --fix

js/common.js

@@ -452,4 +452,54 @@ async function onReconnected(event) {
 	}
 }
 
-api.addEventListener('reconnected', onReconnected);
+api.addEventListener('reconnected', onReconnected);
+
+const storeId = "comfyui-manager-grid";
+let timeId;
+export function storeColumnWidth(gridId, columnItem) {
+	clearTimeout(timeId);
+	timeId = setTimeout(() => {
+		let data = {};
+		const dataStr = localStorage.getItem(storeId);
+		if (dataStr) {
+			try {
+				data = JSON.parse(dataStr);
+			} catch (e) {}
+		}
+
+		if (!data[gridId]) {
+			data[gridId] =  {};
+		}
+
+		data[gridId][columnItem.id] = columnItem.width;
+
+		localStorage.setItem(storeId, JSON.stringify(data));
+
+	}, 200)
+}
+
+export function restoreColumnWidth(gridId, columns) {
+	const dataStr = localStorage.getItem(storeId);
+	if (!dataStr) {
+		return;
+	}
+	let data;
+	try {
+		data = JSON.parse(dataStr);
+	} catch (e) {}
+	if(!data) {
+		return;
+	}
+	const widthMap = data[gridId];
+	if (!widthMap) {
+		return;
+	}
+
+	columns.forEach(columnItem => {
+		const w = widthMap[columnItem.id];
+		if (w) {
+			columnItem.width = w;
+		}
+	});
+
+}

js/custom-nodes-manager.js

@@ -5,12 +5,15 @@ import { api } from "../../scripts/api.js";
 import {
 	manager_instance, rebootAPI, install_via_git_url,
 	fetchData, md5, icons, show_message, customConfirm, customAlert, customPrompt,
-	sanitizeHTML, infoToast, showTerminal, setNeedRestart
+	sanitizeHTML, infoToast, showTerminal, setNeedRestart,
+	storeColumnWidth, restoreColumnWidth
 } from  "./common.js";
 
 // https://cenfun.github.io/turbogrid/api.html
 import TG from "./turbogrid.esm.js";
 
+const gridId = "node";
+
 const pageCss = `
 .cn-manager {
 	--grid-font: -apple-system, BlinkMacSystemFont, "Segue UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -832,6 +835,10 @@ export class CustomNodesManager {
 			this.renderSelected();
 		});
 
+		grid.bind("onColumnWidthChanged", (e, columnItem) => {
+			storeColumnWidth(gridId, columnItem)
+		});
+
 		grid.bind('onClick', (e, d) => {
 			const btn = this.getButton(d.e.target);
 			if (btn) {
@@ -1159,6 +1166,8 @@ export class CustomNodesManager {
 				return 0;
 			});
 
+		restoreColumnWidth(gridId, columns);
+
 		this.grid.setData({
 			options: options,
 			rows: rows_values,

js/model-manager.js

@@ -2,13 +2,16 @@ import { app } from "../../scripts/app.js";
 import { $el } from "../../scripts/ui.js";
 import { 
 	manager_instance, rebootAPI, 
-	fetchData, md5, icons, show_message, customAlert, infoToast, showTerminal
+	fetchData, md5, icons, show_message, customAlert, infoToast, showTerminal,
+	storeColumnWidth, restoreColumnWidth
 } from  "./common.js";
 import { api } from "../../scripts/api.js";
 
 // https://cenfun.github.io/turbogrid/api.html
 import TG from "./turbogrid.esm.js";
 
+const gridId = "model";
+
 const pageCss = `
 .cmm-manager {
 	--grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -438,6 +441,10 @@ export class ModelManager {
             this.renderSelected();
         });
 
+		grid.bind("onColumnWidthChanged", (e, columnItem) => {
+			storeColumnWidth(gridId, columnItem)
+		});
+
 		grid.bind('onClick', (e, d) => {
 			const { rowItem } = d;
 			const target = d.e.target;
@@ -589,6 +596,8 @@ export class ModelManager {
 			width: 200
 		}];
 
+		restoreColumnWidth(gridId, columns);
+
 		this.grid.setData({
 			options,
 			rows,