[fix/feat:ui] Preserve open-in editor brand colors (pingdotgg#3225)

Co-authored-by: Julius Marminge <julius0216@outlook.com>

Author: 2 people

apps/web/src/components/chat/OpenInPicker.tsx

@@ -31,111 +31,138 @@ import {
   RustRoverIcon,
   WebStormIcon,
 } from "../JetBrainsIcons";
-import { isMacPlatform, isWindowsPlatform } from "~/lib/utils";
+import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
 import { shellEnvironment } from "~/state/shell";
 import { useAtomCommand } from "~/state/use-atom-command";
 
+type OpenInOption = {
+  label: string;
+  Icon: Icon;
+  value: EditorId;
+  kind: "brand" | "generic";
+};
+
 const resolveOptions = (platform: string, availableEditors: ReadonlyArray<EditorId>) => {
-  const baseOptions: ReadonlyArray<{ label: string; Icon: Icon; value: EditorId }> = [
+  const baseOptions: ReadonlyArray<OpenInOption> = [
     {
       label: "Cursor",
       Icon: CursorIcon,
       value: "cursor",
+      kind: "brand",
     },
     {
       label: "Trae",
       Icon: TraeIcon,
       value: "trae",
+      kind: "brand",
     },
     {
       label: "Kiro",
       Icon: KiroIcon,
       value: "kiro",
+      kind: "brand",
     },
     {
       label: "VS Code",
       Icon: VisualStudioCode,
       value: "vscode",
+      kind: "brand",
     },
     {
       label: "VS Code Insiders",
       Icon: VisualStudioCodeInsiders,
       value: "vscode-insiders",
+      kind: "brand",
     },
     {
       label: "VSCodium",
       Icon: VSCodium,
       value: "vscodium",
+      kind: "brand",
     },
     {
       label: "Zed",
       Icon: Zed,
       value: "zed",
+      kind: "brand",
     },
     {
       label: "Antigravity",
       Icon: AntigravityIcon,
       value: "antigravity",
+      kind: "brand",
     },
     {
       label: "IntelliJ IDEA",
       Icon: IntelliJIdeaIcon,
       value: "idea",
+      kind: "brand",
     },
     {
       label: "Aqua",
       Icon: AquaIcon,
       value: "aqua",
+      kind: "brand",
     },
     {
       label: "CLion",
       Icon: CLionIcon,
       value: "clion",
+      kind: "brand",
     },
     {
       label: "DataGrip",
       Icon: DataGripIcon,
       value: "datagrip",
+      kind: "brand",
     },
     {
       label: "DataSpell",
       Icon: DataSpellIcon,
       value: "dataspell",
+      kind: "brand",
     },
     {
       label: "GoLand",
       Icon: GoLandIcon,
       value: "goland",
+      kind: "brand",
     },
     {
       label: "PhpStorm",
       Icon: PhpStormIcon,
       value: "phpstorm",
+      kind: "brand",
     },
     {
       label: "PyCharm",
       Icon: PyCharmIcon,
       value: "pycharm",
+      kind: "brand",
     },
     {
       label: "Rider",
       Icon: RiderIcon,
       value: "rider",
+      kind: "brand",
     },
     {
       label: "RubyMine",
       Icon: RubyMineIcon,
       value: "rubymine",
+      kind: "brand",
     },
     {
       label: "RustRover",
       Icon: RustRoverIcon,
       value: "rustrover",
+      kind: "brand",
     },
     {
       label: "WebStorm",
       Icon: WebStormIcon,
       value: "webstorm",
+      kind: "brand",
     },
     {
       label: isMacPlatform(platform)
@@ -145,12 +172,17 @@ const resolveOptions = (platform: string, availableEditors: ReadonlyArray<Editor
           : "Files",
       Icon: FolderClosedIcon,
       value: "file-manager",
+      kind: "generic",
     },
   ];
   const availableEditorSet = new Set(availableEditors);
   return baseOptions.filter((option) => availableEditorSet.has(option.value));
 };
 
+function getOpenInIconClass(kind: OpenInOption["kind"]) {
+  return cn(kind === "brand" ? "text-foreground opacity-100" : "text-muted-foreground");
+}
+
 export const OpenInPicker = memo(function OpenInPicker({
   environmentId,
   keybindings,
@@ -233,7 +265,21 @@ export const OpenInPicker = memo(function OpenInPicker({
         disabled={!preferredEditor || !openInCwd}
         onClick={() => openInEditor(preferredEditor)}
       >
-        {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />}
+        {primaryOption?.Icon && (
+          <primaryOption.Icon
+            aria-hidden="true"
+            className={cn("size-3.5", getOpenInIconClass(primaryOption.kind))}
+          />
+        )}
+        <span
+          className={
+            compact
+              ? "sr-only"
+              : "sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5"
+          }
+        >
+          Open
+        </span>
       </Button>
       <GroupSeparator {...(!compact ? { className: "hidden @3xl/header-actions:block" } : {})} />
       <Menu>
@@ -250,9 +296,9 @@ export const OpenInPicker = memo(function OpenInPicker({
         </MenuTrigger>
         <MenuPopup align="end">
           {options.length === 0 && <MenuItem disabled>No installed editors found</MenuItem>}
-          {options.map(({ label, Icon, value }) => (
+          {options.map(({ label, Icon, value, kind }) => (
             <MenuItem key={value} onClick={() => openInEditor(value)}>
-              <Icon aria-hidden="true" className="text-muted-foreground" />
+              <Icon aria-hidden="true" className={getOpenInIconClass(kind)} />
               {label}
               {value === preferredEditor && openFavoriteEditorShortcutLabel && (
                 <MenuShortcut>{openFavoriteEditorShortcutLabel}</MenuShortcut>