Method createFolderElement

src/components/fileTree/index.js:121–252

* Create folder element (collapsible) * @param {string} name * @param {string} url * @param {HTMLElement} [recycledEl] - Optional recycled element for reuse * @returns {HTMLElement}

(name, url, recycledEl)

	 * @returns {HTMLElement}
	 */
	createFolderElement(name, url, recycledEl) {
		// Try to recycle existing folder element
		if (recycledEl && recycledEl.classList.contains("collapsible")) {
			const $title = recycledEl.$title;
			if ($title) {
				$title.dataset.url = url;
				$title.dataset.name = name;
				const textEl = $title.querySelector(".text");
				if (textEl) textEl.textContent = name;

				// Collapse if expanded and clear children
				if (!recycledEl.classList.contains("hidden")) {
					recycledEl.classList.add("hidden");
					const childTree = this.childTrees.get(recycledEl._folderUrl);
					if (childTree) {
						childTree.destroy();
						this.childTrees.delete(recycledEl._folderUrl);
					}
					recycledEl.$ul.innerHTML = "";
				}

				recycledEl._folderUrl = url;
				return recycledEl;
			}
		}

		const $wrapper = tag("div", {
			className: "list collapsible hidden",
		});
		$wrapper._folderUrl = url;

		const $indicator = tag("span", { className: "icon folder" });

		const $title = tile({
			lead: $indicator,
			type: "div",
			text: name,
		});

		$title.classList.add("light");
		$title.dataset.url = url;
		$title.dataset.name = name;
		$title.dataset.type = "dir";

		const $content = tag("ul", { className: "scroll folder-content" });
		$wrapper.append($title, $content);

		// Child file tree for nested folders
		let childTree = null;
		$content._fileTree = null;

		const toggle = async () => {
			const isExpanded = !$wrapper.classList.contains("hidden");

			if (isExpanded) {
				// Collapse
				$wrapper.classList.add("hidden");