feat: add official fileIcons API and Icon pack setting (#2887)

* WIP

* feat: improve the api and its use in other part of app

* fix

* format

* chore: i18n strings

* fix: ownership and recycle name

* fix: listeners leak

* address the overhead of matchExtenstion

* format

Author: bajrangCoder

src/components/fileTree/index.js

@@ -127,6 +127,12 @@ export default class FileTree {
 				$title.dataset.name = name;
 				const textEl = $title.querySelector(".text");
 				if (textEl) textEl.textContent = name;
+				const iconEl = $title.querySelector("span:first-child");
+				if (iconEl) {
+					iconEl.className = helpers.getIconForFolder(name, {
+						expanded: false,
+					});
+				}
 
 				// Collapse if expanded and clear children
 				if (!recycledEl.classList.contains("hidden")) {
@@ -137,6 +143,7 @@ export default class FileTree {
 						this.childTrees.delete(recycledEl._folderUrl);
 					}
 					recycledEl.$ul.innerHTML = "";
+					recycledEl.$ul._fileTree = null;
 				}
 
 				recycledEl._folderUrl = url;
@@ -149,7 +156,9 @@ export default class FileTree {
 		});
 		$wrapper._folderUrl = url;
 
-		const $indicator = tag("span", { className: "icon folder" });
+		const $indicator = tag("span", {
+			className: helpers.getIconForFolder(name, { expanded: false }),
+		});
 
 		const $title = tile({
 			lead: $indicator,
@@ -166,15 +175,20 @@ export default class FileTree {
 		$wrapper.append($title, $content);
 
 		// Child file tree for nested folders
-		let childTree = null;
 		$content._fileTree = null;
 
 		const toggle = async () => {
+			const name = $title.dataset.name;
+			const url = $title.dataset.url;
 			const isExpanded = !$wrapper.classList.contains("hidden");
+			let childTree = $content._fileTree;
 
 			if (isExpanded) {
 				// Collapse
 				$wrapper.classList.add("hidden");
+				$indicator.className = helpers.getIconForFolder(name, {
+					expanded: false,
+				});
 
 				if (childTree) {
 					childTree.destroy();
@@ -186,6 +200,9 @@ export default class FileTree {
 			} else {
 				// Expand
 				$wrapper.classList.remove("hidden");
+				$indicator.className = helpers.getIconForFolder(name, {
+					expanded: true,
+				});
 				$title.classList.add("loading");
 
 				// Create child tree with incremented depth
@@ -211,7 +228,12 @@ export default class FileTree {
 
 		$title.addEventListener("contextmenu", (e) => {
 			e.stopPropagation();
-			this.options.onContextMenu?.("dir", url, name, $title);
+			this.options.onContextMenu?.(
+				"dir",
+				$title.dataset.url,
+				$title.dataset.name,
+				$title,
+			);
 		});
 
 		// Check if folder should be expanded from saved state
@@ -225,9 +247,9 @@ export default class FileTree {
 				expanded: { get: () => !$wrapper.classList.contains("hidden") },
 				unclasped: { get: () => !$wrapper.classList.contains("hidden") }, // Legacy compatibility
 				$ul: { get: () => $content },
-				fileTree: { get: () => childTree },
+				fileTree: { get: () => $content._fileTree },
 				refresh: {
-					value: () => childTree?.refresh(),
+					value: () => $content._fileTree?.refresh(),
 				},
 				expand: {
 					value: () => !$wrapper.classList.contains("hidden") || toggle(),
@@ -284,12 +306,17 @@ export default class FileTree {
 
 		$tile.addEventListener("click", (e) => {
 			e.stopPropagation();
-			this.options.onFileClick?.(url, name);
+			this.options.onFileClick?.($tile.dataset.url, $tile.dataset.name);
 		});
 
 		$tile.addEventListener("contextmenu", (e) => {
 			e.stopPropagation();
-			this.options.onContextMenu?.("file", url, name, $tile);
+			this.options.onContextMenu?.(
+				"file",
+				$tile.dataset.url,
+				$tile.dataset.name,
+				$tile,
+			);
 		});
 
 		return $tile;

src/components/referencesPanel/utils.js

@@ -87,7 +87,11 @@ export function createReferenceItem(item, options = {}) {
 				onclick={() => onToggleFile?.(item.uri)}
 			>
 				<span className="icon chevron keyboard_arrow_down" />
-				<span className={`${iconClass} file-icon`} />
+				<span
+					className={`${iconClass} file-icon`}
+					data-file-icon-name={item.fileName}
+					data-file-icon-extra="file-icon"
+				/>
 				<span className="file-name">{sanitize(item.fileName)}</span>
 				<span className="ref-count">{item.count}</span>
 			</div>

src/components/settingsPage.js

@@ -1,3 +1,4 @@
+import fileIcons from "lib/fileIcons";
 import "./settingsPage.scss";
 import colorPicker from "dialogs/color";
 import prompt from "dialogs/prompt";
@@ -390,12 +391,19 @@ function createListItemElement(item, options, useInfoAsDescription) {
 	const $item = (
 		<div
 			tabIndex={1}
-			className={`list-item ${item.sake ? "sake" : ""} ${item.icon || item.image ? "" : "no-leading-icon"}`}
+			className={`list-item ${item.sake ? "sake" : ""} ${item.icon || item.image || item.fileIcon ? "" : "no-leading-icon"}`}
 			data-key={item.key}
 			data-action="list-item"
 		>
 			<span
-				className={`icon ${item.icon || (item.image ? "" : "no-icon")}`}
+				className={
+					item.fileIcon
+						? `icon ${fileIcons.icon(item.fileIcon)}`
+						: `icon ${item.icon || (item.image ? "" : "no-icon")}`
+				}
+				data-file-icon-name={item.fileIcon?.name}
+				data-file-icon-kind={item.fileIcon?.kind}
+				data-file-icon-extra={item.fileIcon ? "icon" : undefined}
 				style={{ color: item.iconColor }}
 			>
 				{item.image && (

src/dialogs/select.js

@@ -2,6 +2,7 @@ import Checkbox from "components/checkbox";
 import tile from "components/tile";
 import DOMPurify from "dompurify";
 import actionStack from "lib/actionStack";
+import fileIcons from "lib/fileIcons";
 import restoreTheme from "lib/restoreTheme";
 
 /**
@@ -20,6 +21,7 @@ import restoreTheme from "lib/restoreTheme";
  * @property {string} [text]
  * @property {string} [subText]
  * @property {string} [icon]
+ * @property {{name: string, kind?: "file" | "folder"}} [fileIcon]
  * @property {string} [className]
  * @property {string} [title]
  * @property {boolean} [disabled]
@@ -100,8 +102,18 @@ function select(title, items, options = {}) {
 				itemOptions.text = item;
 			}
 
-			// handle icon (lead)
-			if (itemOptions.icon) {
+			// File resources stay refreshable while image assets load.
+			if (itemOptions.fileIcon) {
+				const resource = itemOptions.fileIcon;
+				lead = (
+					<i
+						className={`icon ${fileIcons.icon(resource)}`}
+						data-file-icon-extra="icon"
+						data-file-icon-name={resource.name}
+						data-file-icon-kind={resource.kind || "file"}
+					/>
+				);
+			} else if (itemOptions.icon) {
 				if (itemOptions.icon === "letters" && !!itemOptions.letters) {
 					lead = (
 						<i className="icon letters" data-letters={itemOptions.letters}></i>

src/lang/ar-ye.json

@@ -881,5 +881,8 @@
 	"wrap-indent-same": "Same",
 	"wrap-indent-indent": "Indent (+1 level)",
 	"wrap-indent-deep": "Deep indent (+2 levels)",
-	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size.",
+	"icon pack": "Icon pack",
+	"settings-info-icon-pack": "Choose the icons used for files and folders in the explorer and file lists across the app.",
+	"unavailable": "unavailable"
 }

src/lang/be-by.json

@@ -881,5 +881,8 @@
 	"wrap-indent-same": "Same",
 	"wrap-indent-indent": "Indent (+1 level)",
 	"wrap-indent-deep": "Deep indent (+2 levels)",
-	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size.",
+	"icon pack": "Icon pack",
+	"settings-info-icon-pack": "Choose the icons used for files and folders in the explorer and file lists across the app.",
+	"unavailable": "unavailable"
 }

src/lang/bn-bd.json

@@ -881,5 +881,8 @@
 	"wrap-indent-same": "Same",
 	"wrap-indent-indent": "Indent (+1 level)",
 	"wrap-indent-deep": "Deep indent (+2 levels)",
-	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size.",
+	"icon pack": "Icon pack",
+	"settings-info-icon-pack": "Choose the icons used for files and folders in the explorer and file lists across the app.",
+	"unavailable": "unavailable"
 }

src/lang/cs-cz.json

@@ -881,5 +881,8 @@
 	"wrap-indent-same": "Same",
 	"wrap-indent-indent": "Indent (+1 level)",
 	"wrap-indent-deep": "Deep indent (+2 levels)",
-	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size.",
+	"icon pack": "Icon pack",
+	"settings-info-icon-pack": "Choose the icons used for files and folders in the explorer and file lists across the app.",
+	"unavailable": "unavailable"
 }

src/lang/de-de.json

@@ -881,5 +881,8 @@
 	"wrap-indent-same": "Same",
 	"wrap-indent-indent": "Indent (+1 level)",
 	"wrap-indent-deep": "Deep indent (+2 levels)",
-	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size.",
+	"icon pack": "Icon pack",
+	"settings-info-icon-pack": "Choose the icons used for files and folders in the explorer and file lists across the app.",
+	"unavailable": "unavailable"
 }

src/lang/en-us.json

@@ -179,6 +179,9 @@
 	"light": "Light",
 	"dark": "Dark",
 	"file browser": "File Browser",
+	"icon pack": "Icon pack",
+	"settings-info-icon-pack": "Choose the icons used for files and folders in the explorer and file lists across the app.",
+	"unavailable": "unavailable",
 	"operation not permitted": "Operation not permitted",
 	"no such file or directory": "No such file or directory",
 	"input/output error": "Input/output error",