Add manual column number configuration and make styles more consistent

Author: liamjwang

.gitignore

@@ -3,4 +3,5 @@
 **/out/
 src/test/samples/env/
 src/test/samples/folder*
-.vscode-test-web/
+.vscode-test-web/
+.vscode-test/

package.json

@@ -117,7 +117,7 @@
 		"watch-tests": "tsc -p . -w --outDir dist",
 		"pretest": "npm run compile-tests && npm run compile && npm run lint",
 		"lint": "eslint src --ext ts",
-		"test": "node ./out/test/runTest.js"
+		"test": "node ./dist/test/runTest.js"
 	},
 	"devDependencies": {
 		"@types/glob": "^7.2.0",

src/gallery/gallery.ts

@@ -105,6 +105,16 @@ class GalleryWebview {
 				});
 				break;
 
+			case "POST.gallery.updateColumnCount":
+				webview.postMessage({
+					command: "POST.gallery.setColumnCount",
+					columnCount: message.columnCount
+				});
+				reporter.sendTelemetryEvent(`${telemetryPrefix}.updateColumnCount`, {
+					'columnCount': message.columnCount.toString()
+				});
+				break;
+
 			case "POST.gallery.requestSort":
 				this.gFolders = this.customSorter.sort(this.gFolders, message.valueName, message.ascending);
 				reporter.sendTelemetryEvent(`${telemetryPrefix}.requestSort`, {

src/gallery/script.js

@@ -29,6 +29,9 @@ function initMessageListeners() {
 				DOMManager.updateGlobalDoms(message);
 				DOMManager.updateGalleryContent();
 				break;
+			case "POST.gallery.setColumnCount":
+				updateColumnCount(message.columnCount);
+				break;
 		}
 	});
 }
@@ -306,6 +309,72 @@ class EventListener {
 	}
 }
 
+// Column control functionality
+const columnInput = document.getElementById('column-count');
+const columnArrows = document.querySelectorAll('.column-arrow');
+const autoCheckbox = document.getElementById('auto-columns');
+
+function updateColumnCount(count) {
+	const grids = document.querySelectorAll('.grid');
+	grids.forEach(grid => {
+		if (autoCheckbox.checked) {
+			grid.style.removeProperty('--column-count');
+			grid.style.removeProperty('--column-width');
+		} else {
+			grid.style.setProperty('--column-count', count);
+			grid.style.setProperty('--column-width', '1fr');
+		}
+	});
+}
+
+// Update column input and arrows state based on auto checkbox
+function updateColumnControlState() {
+	const isAuto = autoCheckbox.checked;
+	columnInput.disabled = isAuto;
+	columnArrows.forEach(arrow => arrow.disabled = isAuto);
+	updateColumnCount(isAuto ? null : columnInput.value);
+}
+
+columnInput.addEventListener('change', (e) => {
+	if (autoCheckbox.checked) {return;}
+	const value = Math.min(Math.max(parseInt(e.target.value) || 1, 1), 100);
+	e.target.value = value;
+	vscode.postMessage({
+		command: 'POST.gallery.updateColumnCount',
+		columnCount: value
+	});
+	updateColumnCount(value);
+});
+
+columnArrows.forEach(arrow => {
+	arrow.addEventListener('click', () => {
+		if (autoCheckbox.checked) {return;}
+		const currentValue = parseInt(columnInput.value) || 1;
+		const direction = arrow.dataset.direction;
+		const newValue = direction === 'up' 
+			? Math.min(currentValue + 1, 100)
+			: Math.max(currentValue - 1, 1);
+		
+		columnInput.value = newValue;
+		vscode.postMessage({
+			command: 'POST.gallery.updateColumnCount',
+			columnCount: newValue
+		});
+		updateColumnCount(newValue);
+	});
+});
+
+autoCheckbox.addEventListener('change', () => {
+	updateColumnControlState();
+	vscode.postMessage({
+		command: 'POST.gallery.updateColumnCount',
+		columnCount: autoCheckbox.checked ? null : columnInput.value
+	});
+});
+
+// Initialize column control state
+updateColumnControlState();
+
 (function () {
 	init();
 }());