Skip to content

feat(app): add transparent Open in icon toggle #12641

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

Open
edoedac0 wants to merge 9 commits into
base: dev
Choose a base branch
from
+77 −56
Open

feat(app): add transparent Open in icon toggle #12641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
06b3455
feat(app): add transparent Open in icon toggle
edoedac0 Feb 7, 2026
dcb145c
feat(app): make transparent app icon preference desktop-only
edoedac0 Feb 7, 2026
ca0839d
feat(app): make open-in icons always transparent
edoedac0 Feb 8, 2026
e485009
Revert "feat(app): make open-in icons always transparent"
edoedac0 Feb 8, 2026
cfd873f
feat(app): add Tahoe Finder icon support
edoedac0 Feb 8, 2026
bbcca51
feat(app): make Open in action a button group
edoedac0 Feb 8, 2026
f5611e3
feat(app): use Tahoe Finder icon everywhere
edoedac0 Feb 8, 2026
8d82f94
Merge branch 'dev' into feat/transparent-open-icons-toggle
edoedac0 Feb 8, 2026
20f0ae5
Made transparent app icons the default
opencode-agent[bot] Feb 8, 2026
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
103 changes: 53 additions & 50 deletions packages/app/src/components/session/session-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,57 +322,60 @@ export function SessionHeader() {
}
>
<div class="flex items-center">
<Button
variant="ghost"
class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none rounded-r-none"
onClick={() => openDir(current().id)}
aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
>
<AppIcon id={current().icon} class="size-5" />
<span class="text-12-regular text-text-strong">
{language.t("session.header.open.action", { app: current().label })}
</span>
</Button>
<DropdownMenu>
<DropdownMenu.Trigger
as={IconButton}
icon="chevron-down"
<div class="flex items-center rounded-full border border-border-base bg-surface-panel">
<Button
variant="ghost"
class="rounded-sm h-[24px] w-auto px-1.5 border-none shadow-none rounded-l-none data-[expanded]:bg-surface-raised-base-active"
aria-label={language.t("session.header.open.menu")}
/>
<DropdownMenu.Portal>
<DropdownMenu.Content placement="bottom-end" gutter={6}>
<DropdownMenu.Group>
<DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
<DropdownMenu.RadioGroup
value={prefs.app}
onChange={(value) => {
if (!OPEN_APPS.includes(value as OpenApp)) return
setPrefs("app", value as OpenApp)
}}
>
{options().map((o) => (
<DropdownMenu.RadioItem value={o.id} onSelect={() => openDir(o.id)}>
<AppIcon id={o.icon} class="size-5" />
<DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
<DropdownMenu.ItemIndicator>
<Icon name="check-small" size="small" class="text-icon-weak" />
</DropdownMenu.ItemIndicator>
</DropdownMenu.RadioItem>
))}
</DropdownMenu.RadioGroup>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Item onSelect={copyPath}>
<Icon name="copy" size="small" class="text-icon-weak" />
<DropdownMenu.ItemLabel>
{language.t("session.header.open.copyPath")}
</DropdownMenu.ItemLabel>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu>
class="rounded-full h-[28px] py-1.5 pr-4 pl-3 gap-2 border-none shadow-none"
onClick={() => openDir(current().id)}
aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
>
<AppIcon id={current().icon} class="size-5" />
<span class="text-12-regular text-text-strong">
{language.t("session.header.open.action", { app: current().label })}
</span>
</Button>
<div class="h-6 w-px bg-border-base" />
<DropdownMenu>
<DropdownMenu.Trigger
as={IconButton}
icon="chevron-down"
variant="ghost"
class="rounded-full h-[28px] w-auto px-2 border-none shadow-none data-[expanded]:bg-surface-raised-base-active"
aria-label={language.t("session.header.open.menu")}
/>
<DropdownMenu.Portal>
<DropdownMenu.Content placement="bottom-end" gutter={6}>
<DropdownMenu.Group>
<DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
<DropdownMenu.RadioGroup
value={prefs.app}
onChange={(value) => {
if (!OPEN_APPS.includes(value as OpenApp)) return
setPrefs("app", value as OpenApp)
}}
>
{options().map((o) => (
<DropdownMenu.RadioItem value={o.id} onSelect={() => openDir(o.id)}>
<AppIcon id={o.icon} class="size-5" />
<DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
<DropdownMenu.ItemIndicator>
<Icon name="check-small" size="small" class="text-icon-weak" />
</DropdownMenu.ItemIndicator>
</DropdownMenu.RadioItem>
))}
</DropdownMenu.RadioGroup>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Item onSelect={copyPath}>
<Icon name="copy" size="small" class="text-icon-weak" />
<DropdownMenu.ItemLabel>
{language.t("session.header.open.copyPath")}
</DropdownMenu.ItemLabel>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu>
</div>
</div>
</Show>
</div>
Expand Down
3 changes: 3 additions & 0 deletions packages/app/src/i18n/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,6 +501,9 @@ export const dict = {
"session.messages.loadEarlier": "Load earlier messages",
"session.messages.loading": "Loading messages...",
"session.messages.jumpToLatest": "Jump to latest",
"session.messages.reverted.single": "1 message reverted",
"session.messages.reverted.multiple": "{{count}} messages reverted",
"session.messages.reverted.restore": "to restore",
Comment on lines +504 to +506
Copy link
Contributor

@adamdotdevin adamdotdevin Feb 9, 2026

Choose a reason for hiding this comment

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

Let's revert this change, unrelated right?


"session.context.addToContext": "Add {{selection}} to context",

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/assets/icons/app/cursor.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/ui/src/assets/icons/app/finder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 15 additions & 1 deletion packages/ui/src/assets/icons/app/zed.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions packages/ui/src/components/app-icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
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;
}

html[data-color-scheme="dark"] img[data-component="app-icon"][data-app-icon-id="zed"] {
filter: invert(1);
}
1 change: 1 addition & 0 deletions packages/ui/src/components/app-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const AppIcon: Component<AppIconProps> = (props) => {
return (
<img
data-component="app-icon"
data-app-icon-id={local.id}
{...rest}
src={icons[local.id]}
alt={local.alt ?? ""}
Expand Down
Loading