feat(app): polish Open in icon treatment

Bring in the Open in button-group and transparent icon updates from #12641 while keeping locale strings unchanged. Replace CSS inversion with dedicated light/dark Zed icon assets for cleaner theme handling.

Co-authored-by: Edin <[email protected]>

2 files changed, 29 insertions, 6 deletions

diff --git a/packages/ui/src/components/app-icon.css b/packages/ui/src/components/app-icon.css
index edcdbcceb..16cb0dcc1 100644
--- a/packages/ui/src/components/app-icon.css
+++ b/packages/ui/src/components/app-icon.css
@@ -1,9 +1,5 @@
 img[data-component="app-icon"] {
   display: block;
   box-sizing: border-box;
-  padding: 2px;
-  border-radius: 0.125rem;
-  background: var(--smoke-light-2);
-  border: 1px solid var(--smoke-light-alpha-4);
   object-fit: contain;
 }
diff --git a/packages/ui/src/components/app-icon.tsx b/packages/ui/src/components/app-icon.tsx
index e3f2a0fb2..e91638b98 100644
--- a/packages/ui/src/components/app-icon.tsx
+++ b/packages/ui/src/components/app-icon.tsx
@@ -1,5 +1,5 @@
 import type { Component, ComponentProps } from "solid-js"
-import { splitProps } from "solid-js"
+import { createSignal, onCleanup, onMount, splitProps } from "solid-js"
 import type { IconName } from "./app-icons/types"
 
 import androidStudio from "../assets/icons/app/android-studio.svg"
@@ -15,6 +15,7 @@ import textmate from "../assets/icons/app/textmate.png"
 import vscode from "../assets/icons/app/vscode.svg"
 import xcode from "../assets/icons/app/xcode.png"
 import zed from "../assets/icons/app/zed.svg"
+import zedDark from "../assets/icons/app/zed-dark.svg"
 import sublimetext from "../assets/icons/app/sublimetext.svg"
 
 const icons = {
@@ -34,17 +35,43 @@ const icons = {
   "sublime-text": sublimetext,
 } satisfies Record<IconName, string>
 
+const themed: Partial<Record<IconName, { light: string; dark: string }>> = {
+  zed: {
+    light: zed,
+    dark: zedDark,
+  },
+}
+
+const scheme = () => {
+  if (typeof document !== "object") return "light" as const
+  if (document.documentElement.dataset.colorScheme === "dark") return "dark" as const
+  return "light" as const
+}
+
 export type AppIconProps = Omit<ComponentProps<"img">, "src"> & {
   id: IconName
 }
 
 export const AppIcon: Component<AppIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["id", "class", "classList", "alt", "draggable"])
+  const [mode, setMode] = createSignal(scheme())
+
+  onMount(() => {
+    const sync = () => setMode(scheme())
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-color-scheme"],
+    })
+    sync()
+    onCleanup(() => observer.disconnect())
+  })
+
   return (
     <img
       data-component="app-icon"
       {...rest}
-      src={icons[local.id]}
+      src={themed[local.id]?.[mode()] ?? icons[local.id]}
       alt={local.alt ?? ""}
       draggable={local.draggable ?? false}
       classList={{