refactor(context-menu): handle filename display better

Author: elianiva

webview-ui/src/components/chat/ContextMenu.tsx

@@ -109,21 +109,37 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 			case ContextMenuOptionType.OpenedFile:
 			case ContextMenuOptionType.Folder:
 				if (option.value) {
+					// remove trailing slash
+					const path = removeLeadingNonAlphanumeric(option.value || "").replace(/\/$/, "")
+					const filename = path.split("/").at(-1)
+					const folderPath = path.split("/").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 +205,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 +247,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,15 +259,15 @@ 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>
 					))
 				) : (
 					<div
 						style={{
-							padding: "12px",
+							padding: "4px",
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",