feat(menu): use material icons for files and folders

Author: elianiva

package-lock.json

@@ -454,6 +454,7 @@
 		"tmp": "^0.2.3",
 		"tree-sitter-wasms": "^0.1.11",
 		"turndown": "^7.2.0",
+		"vscode-material-icons": "^0.1.1",
 		"web-tree-sitter": "^0.22.6",
 		"zod": "^3.23.8"
 	},

package.json

@@ -621,6 +621,13 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			"codicon.css",
 		])
 
+		const materialIconsUri = getUri(webview, this.contextProxy.extensionUri, [
+			"node_modules",
+			"vscode-material-icons",
+			"generated",
+			"icons",
+		])
+
 		const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
 
 		const file = "src/index.tsx"
@@ -656,6 +663,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 					<link href="${codiconsUri}" rel="stylesheet" />
 					<script nonce="${nonce}">
 						window.IMAGES_BASE_URI = "${imagesUri}"
+						window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
 					</script>
 					<title>Roo Code</title>
 				</head>
@@ -705,6 +713,14 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			"codicon.css",
 		])
 
+		// The material icons from the React build output
+		const materialIconsUri = getUri(webview, this.contextProxy.extensionUri, [
+			"node_modules",
+			"vscode-material-icons",
+			"generated",
+			"icons",
+		])
+
 		const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
 
 		// const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
@@ -741,6 +757,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">
 				window.IMAGES_BASE_URI = "${imagesUri}"
+				window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
 			</script>
             <title>Roo Code</title>
           </head>

src/core/webview/ClineProvider.ts

@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo, useRef } from "react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { getIconForFilePath, getIconUrlByName, getIconForDirectoryPath } from "vscode-material-icons"
 import {
 	ContextMenuOptionType,
 	ContextMenuQueryItem,
@@ -33,6 +34,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 	loading = false,
 	dynamicSearchResults = [],
 }) => {
+	const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("")
 	const menuRef = useRef<HTMLDivElement>(null)
 
 	const filteredOptions = useMemo(() => {
@@ -55,6 +57,12 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		}
 	}, [selectedIndex])
 
+	// get the icons base uri on mount
+	useEffect(() => {
+		const w = window as any
+		setMaterialIconsBaseUri(w.MATERIAL_ICONS_BASE_URI)
+	}, [])
+
 	const renderOptionContent = (option: ContextMenuQueryItem) => {
 		switch (option.type) {
 			case ContextMenuOptionType.Mode:
@@ -173,6 +181,15 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		}
 	}
 
+	const getMaterialIconForOption = (option: ContextMenuQueryItem): string => {
+		// only take the last part of the path to handle both file and folder icons
+		// since material-icons have specific folder icons, we use them if available
+		const name = option.value?.split("/").filter(Boolean).at(-1) ?? ""
+		const iconName =
+			option.type === ContextMenuOptionType.Folder ? getIconForDirectoryPath(name) : getIconForFilePath(name)
+		return getIconUrlByName(iconName, materialIconsBaseUri)
+	}
+
 	const isOptionSelectable = (option: ContextMenuQueryItem): boolean => {
 		return option.type !== ContextMenuOptionType.NoResults && option.type !== ContextMenuOptionType.URL
 	}
@@ -229,17 +246,35 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 									overflow: "hidden",
 									paddingTop: 0,
 								}}>
-								{option.type !== ContextMenuOptionType.Mode && getIconForOption(option) && (
-									<i
-										className={`codicon codicon-${getIconForOption(option)}`}
+								{(option.type === ContextMenuOptionType.File ||
+									option.type === ContextMenuOptionType.Folder ||
+									option.type === ContextMenuOptionType.OpenedFile) && (
+									<img
+										src={getMaterialIconForOption(option)}
+										alt="Mode"
 										style={{
 											marginRight: "6px",
 											flexShrink: 0,
-											fontSize: "14px",
-											marginTop: 0,
+											width: "16px",
+											height: "16px",
 										}}
 									/>
 								)}
+								{option.type !== ContextMenuOptionType.Mode &&
+									option.type !== ContextMenuOptionType.File &&
+									option.type !== ContextMenuOptionType.Folder &&
+									option.type !== ContextMenuOptionType.OpenedFile &&
+									getIconForOption(option) && (
+										<i
+											className={`codicon codicon-${getIconForOption(option)}`}
+											style={{
+												marginRight: "6px",
+												flexShrink: 0,
+												fontSize: "14px",
+												marginTop: 0,
+											}}
+										/>
+									)}
 								{renderOptionContent(option)}
 							</div>
 							{(option.type === ContextMenuOptionType.File ||
@@ -251,18 +286,6 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 										style={{ fontSize: "10px", flexShrink: 0, marginLeft: 8 }}
 									/>
 								)}
-							{(option.type === ContextMenuOptionType.Problems ||
-								option.type === ContextMenuOptionType.Terminal ||
-								((option.type === ContextMenuOptionType.File ||
-									option.type === ContextMenuOptionType.Folder ||
-									option.type === ContextMenuOptionType.OpenedFile ||
-									option.type === ContextMenuOptionType.Git) &&
-									option.value)) && (
-								<i
-									className="codicon codicon-add"
-									style={{ fontSize: "10px", flexShrink: 0, marginLeft: 8 }}
-								/>
-							)}
 						</div>
 					))
 				) : (