fix(desktop): update workspace dropdown button layout

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx → apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/CreateWorkspaceButton.tsx

@@ -1,9 +1,9 @@
 import { Button } from "@superset/ui/button";
-import { ButtonGroup } from "@superset/ui/button-group";
+import { ButtonGroup, ButtonGroupSeparator } from "@superset/ui/button-group";
 import { toast } from "@superset/ui/sonner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useRef } from "react";
-import { HiChevronDown, HiMiniPlus } from "react-icons/hi2";
+import { HiMiniPlus, HiOutlineBolt } from "react-icons/hi2";
 import { trpc } from "renderer/lib/trpc";
 import { useOpenNew } from "renderer/react-query/projects";
 import {
@@ -12,13 +12,15 @@ import {
 } from "renderer/react-query/workspaces";
 import { useOpenNewWorkspaceModal } from "renderer/stores/new-workspace-modal";
 
-export interface WorkspaceDropdownProps {
+export interface CreateWorkspaceButtonProps {
 	className?: string;
 }
 
-export function WorkspaceDropdown({ className }: WorkspaceDropdownProps) {
-	const primaryButtonRef = useRef<HTMLButtonElement>(null);
-	const chevronButtonRef = useRef<HTMLButtonElement>(null);
+export function CreateWorkspaceButton({
+	className,
+}: CreateWorkspaceButtonProps) {
+	const modalButtonRef = useRef<HTMLButtonElement>(null);
+	const quickCreateButtonRef = useRef<HTMLButtonElement>(null);
 
 	const { data: activeWorkspace } = trpc.workspaces.getActive.useQuery();
 	const { data: recentProjects = [] } = trpc.projects.getRecents.useQuery();
@@ -31,8 +33,13 @@ export function WorkspaceDropdown({ className }: WorkspaceDropdownProps) {
 		(p) => p.id === activeWorkspace?.projectId,
 	);
 
-	const handlePrimaryAction = () => {
-		primaryButtonRef.current?.blur();
+	const handleModalCreate = () => {
+		modalButtonRef.current?.blur();
+		openModal();
+	};
+
+	const handleQuickCreate = () => {
+		quickCreateButtonRef.current?.blur();
 		if (currentProject) {
 			toast.promise(
 				createWorkspace.mutateAsync({ projectId: currentProject.id }),
@@ -85,54 +92,51 @@ export function WorkspaceDropdown({ className }: WorkspaceDropdownProps) {
 		}
 	};
 
-	const handleChevronClick = () => {
-		chevronButtonRef.current?.blur();
-		openModal();
-	};
-
 	return (
 		<ButtonGroup
-			className={[className, "group/split"].filter(Boolean).join(" ")}
+			className={`${className} ml-1 mt-1 rounded-md border border-border/50`}
 		>
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<Button
-						ref={primaryButtonRef}
+						ref={modalButtonRef}
 						variant="ghost"
-						size="icon"
+						size="sm"
 						aria-label="New workspace"
-						className="ml-1 mt-1 size-7 text-muted-foreground hover:text-foreground group-hover/split:bg-accent/30 hover:!bg-accent"
-						onClick={handlePrimaryAction}
-						disabled={
-							createWorkspace.isPending ||
-							createBranchWorkspace.isPending ||
-							openNew.isPending
-						}
+						className="h-7 gap-1 rounded-r-none px-2 text-muted-foreground hover:bg-accent hover:text-foreground"
+						onClick={handleModalCreate}
 					>
-						<HiMiniPlus className="size-5" />
+						<HiMiniPlus className="size-4" />
+						<span className="text-xs">New</span>
 					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom" sideOffset={4}>
-					{currentProject
-						? `New workspace in ${currentProject.name}`
-						: "New workspace"}
+					New workspace
 				</TooltipContent>
 			</Tooltip>
+			<ButtonGroupSeparator />
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<Button
-						ref={chevronButtonRef}
+						ref={quickCreateButtonRef}
 						variant="ghost"
 						size="icon"
-						aria-label="More workspace options"
-						className="mt-1 size-7 w-4 text-muted-foreground hover:text-foreground group-hover/split:bg-accent/30 hover:!bg-accent"
-						onClick={handleChevronClick}
+						aria-label="Quick create workspace"
+						className="size-7 rounded-l-none text-muted-foreground hover:bg-accent hover:text-foreground"
+						onClick={handleQuickCreate}
+						disabled={
+							createWorkspace.isPending ||
+							createBranchWorkspace.isPending ||
+							openNew.isPending
+						}
 					>
-						<HiChevronDown className="size-2.5" />
+						<HiOutlineBolt className="size-3.5" />
 					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom" sideOffset={4}>
-					More options
+					{currentProject
+						? `Quick create in ${currentProject.name}`
+						: "Quick create workspace"}
 				</TooltipContent>
 			</Tooltip>
 		</ButtonGroup>

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx

@@ -10,8 +10,8 @@ import {
 	useIsSettingsTabOpen,
 } from "renderer/stores/app-state";
 import { HOTKEYS } from "shared/hotkeys";
+import { CreateWorkspaceButton } from "./CreateWorkspaceButton";
 import { SettingsTab } from "./SettingsTab";
-import { WorkspaceDropdown } from "./WorkspaceDropdown";
 import { WorkspaceGroup } from "./WorkspaceGroup";
 
 const MIN_WORKSPACE_WIDTH = 60;
@@ -214,7 +214,7 @@ export function WorkspacesTabs() {
 						<div className="pointer-events-none absolute right-0 top-0 h-full w-8 bg-linear-to-l from-background to-transparent" />
 					)}
 				</div>
-				<WorkspaceDropdown className="no-drag" />
+				<CreateWorkspaceButton className="no-drag" />
 			</div>
 		</div>
 	);