refactor(context-menu): handle filename display better (#2684)

* refactor(context-menu): handle filename display better

* refactor(context-menu): reduce string computation
This commit is contained in:
Dicha Zelianivan Arkana 2025-04-16 20:46:06 +07:00 committed by GitHub
parent c980662728
commit 1d029ed0cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -109,21 +109,38 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
case ContextMenuOptionType.OpenedFile:
case ContextMenuOptionType.Folder:
if (option.value) {
// remove trailing slash
const path = removeLeadingNonAlphanumeric(option.value || "").replace(/\/$/, "")
const pathList = path.split("/")
const filename = pathList.at(-1)
const folderPath = pathList.slice(0, -1).join("/")
return (
<>
<span>/</span>
{option.value?.startsWith("/.") && <span>.</span>}
<div
style={{
flex: 1,
overflow: "hidden",
display: "flex",
gap: "0.5em",
whiteSpace: "nowrap",
alignItems: "center",
justifyContent: "space-between",
textAlign: "left",
}}>
<span>{filename}</span>
<span
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
direction: "rtl",
textAlign: "left",
textAlign: "right",
flex: 1,
opacity: 0.75,
fontSize: "0.75em",
}}>
{removeLeadingNonAlphanumeric(option.value || "") + "\u200E"}
{folderPath}
</span>
</>
</div>
)
} else {
return <span>Add {option.type === ContextMenuOptionType.File ? "File" : "Folder"}</span>
@ -189,10 +206,9 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
key={`${option.type}-${option.value || index}`}
onClick={() => isOptionSelectable(option) && onSelect(option.type, option.value)}
style={{
padding: "8px 12px",
padding: "4px 6px",
cursor: isOptionSelectable(option) ? "pointer" : "default",
color: "var(--vscode-dropdown-foreground)",
borderBottom: "1px solid var(--vscode-editorGroup-border)",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
@ -232,7 +248,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
!option.value && (
<i
className="codicon codicon-chevron-right"
style={{ fontSize: "14px", flexShrink: 0, marginLeft: 8 }}
style={{ fontSize: "10px", flexShrink: 0, marginLeft: 8 }}
/>
)}
{(option.type === ContextMenuOptionType.Problems ||
@ -244,7 +260,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
option.value)) && (
<i
className="codicon codicon-add"
style={{ fontSize: "14px", flexShrink: 0, marginLeft: 8 }}
style={{ fontSize: "10px", flexShrink: 0, marginLeft: 8 }}
/>
)}
</div>
@ -252,7 +268,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
) : (
<div
style={{
padding: "12px",
padding: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",