From cd47284097406be5f57110d2750a760fb79a4d2d Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 19 Aug 2026 16:46:33 +0000 Subject: [PATCH 1/2] fix(desktop): move share email and Slack into overflow menu Remove the People/Email/Slack tabs from the share modal. Email and Slack are now overflow-menu options, and Slack uses the brand icon. Co-authored-by: John Jeong --- .../session-sharing/delivery-panel.test.tsx | 53 +++++-- .../src/session-sharing/delivery-panel.tsx | 134 ++++++++++++------ .../src/session-sharing/draft-panel.tsx | 11 +- .../src/session-sharing/management-panel.tsx | 12 +- 4 files changed, 147 insertions(+), 63 deletions(-) diff --git a/apps/desktop/src/session-sharing/delivery-panel.test.tsx b/apps/desktop/src/session-sharing/delivery-panel.test.tsx index 67a8f8d9e0..4203e374c2 100644 --- a/apps/desktop/src/session-sharing/delivery-panel.test.tsx +++ b/apps/desktop/src/session-sharing/delivery-panel.test.tsx @@ -1,20 +1,53 @@ import { fireEvent, render, screen } from "@testing-library/react"; +import { + createElement, + type ButtonHTMLAttributes, + type ReactNode, +} from "react"; import { describe, expect, it, vi } from "vitest"; -import { ShareRecapModeSelector } from "./delivery-panel"; +import { ShareRecapOverflowMenu } from "./delivery-panel"; -describe("ShareRecapModeSelector", () => { - it("offers invitation, email, and Slack delivery", () => { +vi.mock("@iconify-icon/react", () => ({ + Icon: (props: Record) => + createElement("iconify-icon", props), +})); + +vi.mock("@anlg/ui/components/ui/dropdown-menu", () => ({ + AppFloatingPanel: ({ children }: { children: ReactNode }) => ( +
{children}
+ ), + DropdownMenu: ({ children }: { children: ReactNode }) => ( +
{children}
+ ), + DropdownMenuContent: ({ children }: { children: ReactNode }) => ( +
{children}
+ ), + DropdownMenuItem: ({ + children, + onSelect, + ...props + }: ButtonHTMLAttributes & { onSelect?: () => void }) => ( + + ), + DropdownMenuTrigger: ({ children }: { children: ReactNode }) => ( + <>{children} + ), +})); + +describe("ShareRecapOverflowMenu", () => { + it("offers email and Slack delivery from the overflow menu", () => { const onValueChange = vi.fn(); - render( - , - ); + render(); + expect(screen.queryByRole("button", { name: "People" })).toBeNull(); + expect(screen.getByRole("button", { name: "More options" })).toBeTruthy(); expect( - screen - .getByRole("button", { name: "People" }) - .getAttribute("aria-pressed"), - ).toBe("true"); + document.querySelector('iconify-icon[icon="logos:slack-icon"]'), + ).not.toBeNull(); + fireEvent.click(screen.getByRole("button", { name: "Email" })); fireEvent.click(screen.getByRole("button", { name: "Slack" })); diff --git a/apps/desktop/src/session-sharing/delivery-panel.tsx b/apps/desktop/src/session-sharing/delivery-panel.tsx index 833cbe3d49..d340ed96d6 100644 --- a/apps/desktop/src/session-sharing/delivery-panel.tsx +++ b/apps/desktop/src/session-sharing/delivery-panel.tsx @@ -1,15 +1,23 @@ +import { Icon } from "@iconify-icon/react"; import { Trans, useLingui } from "@lingui/react/macro"; import { + CaretLeft, CircleNotch, + DotsThree, EnvelopeSimple, LockSimple, - SlackLogo, - UserPlus, } from "@phosphor-icons/react"; import { useQuery } from "@tanstack/react-query"; -import { useState } from "react"; +import { useState, type ReactNode } from "react"; import { Button } from "@anlg/ui/components/ui/button"; +import { + AppFloatingPanel, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@anlg/ui/components/ui/dropdown-menu"; import { Select, SelectContent, @@ -17,7 +25,6 @@ import { SelectTrigger, SelectValue, } from "@anlg/ui/components/ui/select"; -import { cn } from "@anlg/utils"; import { listSlackChannels } from "./delivery-client"; import { @@ -33,44 +40,87 @@ import { useOpenIntegrationUrl } from "~/shared/integration"; export type ShareRecapMode = "invite" | "email" | "slack"; -export function ShareRecapModeSelector({ - value, +function SlackBrandIcon({ size }: { size: number }) { + return ( +