diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx index 8d9fb12d774a3..319ac3242067a 100644 --- a/site/src/components/DropdownMenu/DropdownMenu.tsx +++ b/site/src/components/DropdownMenu/DropdownMenu.tsx @@ -111,7 +111,7 @@ export const DropdownMenuItem = forwardRef< [ "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors", "focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - "[&>svg]:size-4 [&>svg]:shrink-0 no-underline", + "[&>svg]:size-4 [&>svg]:shrink-0 [&>img]:size-4 [&>img]:shrink-0 no-underline", inset && "pl-8", ], className, diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx index 1fd9c4b93cfa6..1b1abcf6b5ef4 100644 --- a/site/src/pages/TaskPage/TaskPage.stories.tsx +++ b/site/src/pages/TaskPage/TaskPage.stories.tsx @@ -131,9 +131,15 @@ export const Active: Story = { { ...MockWorkspaceApp, id: "vscode", - display_name: "VSCode", + display_name: "VS Code Web", icon: "/icon/code.svg", }, + { + ...MockWorkspaceApp, + id: "zed", + display_name: "Zed", + icon: "/icon/zed.svg", + }, ], }, ], diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index dbc0e5224ea4a..e863ade7f37f4 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -2,6 +2,12 @@ import { API } from "api/api"; import { getErrorDetail, getErrorMessage } from "api/errors"; import type { WorkspaceApp, WorkspaceStatus } from "api/typesGenerated"; import { Button } from "components/Button/Button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "components/DropdownMenu/DropdownMenu"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; @@ -14,7 +20,12 @@ import { TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useProxy } from "contexts/ProxyContext"; -import { ArrowLeftIcon, LayoutGridIcon, RotateCcwIcon } from "lucide-react"; +import { + ArrowLeftIcon, + ChevronDownIcon, + LayoutGridIcon, + RotateCcwIcon, +} from "lucide-react"; import { AppStatusIcon } from "modules/apps/AppStatusIcon"; import { getAppHref } from "modules/apps/apps"; import { useAppLink } from "modules/apps/useAppLink"; @@ -255,7 +266,7 @@ const TaskPage = () => { + + + {externalApps + .filter((app) => app.external) + .map((app) => { + const link = useAppLink(app, { + agent, + workspace: task.workspace, + }); + + return ( + + + {app.icon ? ( + + ) : ( + + )} + {link.label} + + + ); + })} + + + + )}
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy