Skip to content

[DRAFT] feat(menu): use material icons for files and folders #2739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 22, 2025
Merged

[DRAFT] feat(menu): use material icons for files and folders #2739

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e69f89
feat(menu): use material icons for files and folders
elianiva Apr 18, 2025
9d0a47d
Merge branch 'main' into feat/icons
elianiva Apr 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
17 changes: 17 additions & 0 deletions src/core/webview/ClineProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,6 +621,13 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
"codicon.css",
])

const materialIconsUri = getUri(webview, this.contextProxy.extensionUri, [
Copy link
Contributor

@ellipsis-dev ellipsis-dev bot Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic to obtain the material icons URI is duplicated in multiple methods (e.g. in getHMRHtmlContent and getHtmlContent). Consider extracting this into a helper function to improve maintainability.

Copy link
Contributor Author

@elianiva elianiva Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

About this, I'm not sure if we want to dedupe the logic for html content and HMR html content or just leave them as is

I had a bug where I added the icons base uri to the html content but not on the HMR html content so it wasn't working on dev

Might be worth looking into? Maybe unify some parts for the production html and the one for development

Copy link
Contributor

@adamhill adamhill Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome.

"node_modules",
"vscode-material-icons",
"generated",
"icons",
])

const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])

const file = "src/index.tsx"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"))
Expand Down Expand Up @@ -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>
Expand Down
59 changes: 41 additions & 18 deletions webview-ui/src/components/chat/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -33,6 +34,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
loading = false,
dynamicSearchResults = [],
}) => {
const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("")
const menuRef = useRef<HTMLDivElement>(null)

const filteredOptions = useMemo(() => {
Expand All @@ -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:
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -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 ||
Expand All @@ -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>
))
) : (
Expand Down