Method render

src/pages/quickTools/quickTools.js:70–139

()

	}

	render() {
		this.destroy(); // Cleanup potential drag states before re-rendering
		this.container.textContent = "";

		// --- Active Tools Section ---
		const activeSection = <div className="section active-tools"></div>;
		activeSection.appendChild(
			<div className="section-title">{strings["active tools"]}</div>,
		);

		this.activeGrid = <div className="quicktools-grid active-grid"></div>;

		const totalSlots =
			settings.QUICKTOOLS_ROWS *
			settings.QUICKTOOLS_GROUPS *
			settings.QUICKTOOLS_GROUP_CAPACITY;

		for (let i = 0; i < totalSlots; i++) {
			const itemIndex = settings.value.quicktoolsItems[i];
			const itemDef = items[itemIndex];
			const el = this.createItemElement(itemDef, i, "active");
			this.activeGrid.appendChild(el);
		}

		activeSection.appendChild(this.activeGrid);
		this.container.appendChild(activeSection);

		// --- Available Tools Section ---
		this.availableSection = <div className="section available-tools"></div>;
		this.availableSection.appendChild(
			<div className="section-title">{strings["available tools"]}</div>,
		);

		// Group items
		const categories = {
			Modifiers: ["ctrl", "shift", "alt", "meta"],
			Commands: ["command", "undo", "redo", "save", "search"],
			Navigation: ["key"],
			Symbols: ["insert"],
			Other: [],
		};

		const groupedItems = {};
		items.forEach((item, index) => {
			let category = "Other";
			for (const [cat, actions] of Object.entries(categories)) {
				if (actions.includes(item.action)) {
					category = cat;
					break;
				}
			}
			if (!groupedItems[category]) groupedItems[category] = [];
			groupedItems[category].push({ item, index });
		});

		Object.entries(groupedItems).forEach(([category, list]) => {
			const catHeader = <div className="category-header">{category}</div>;
			const catGrid = <div className="quicktools-grid source-grid"></div>;