feat(site): add brand dropdown

frontend/packages/components/package.json

@@ -41,6 +41,7 @@
 		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-avatar": "^1.0.4",
 		"@radix-ui/react-checkbox": "^1.1.5",
+		"@radix-ui/react-context-menu": "^2.2.15",
 		"@radix-ui/react-dialog": "^1.1.7",
 		"@radix-ui/react-dropdown-menu": "^2.1.7",
 		"@radix-ui/react-label": "^2.1.3",

frontend/packages/components/src/index.ts

@@ -71,6 +71,7 @@ export * from "./ui/kbd";
 export * from "./ui/checkbox";
 export { default as Filters } from "./ui/filters";
 export * from "./ui/filters";
+export * from "./ui/context-menu";
 export * from "./lib/utils";
 export * from "./lib/filesize";
 export * from "./lib/timing";

frontend/packages/components/src/ui/context-menu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import type * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Icon, faCheck, faChevronRight, faCircle } from "@rivet-gg/icons";
+import { cn } from "../lib/utils";
+
+function ContextMenu({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+	return (
+		<ContextMenuPrimitive.Trigger
+			data-slot="context-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuGroup({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+	return (
+		<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+	);
+}
+
+function ContextMenuPortal({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+	return (
+		<ContextMenuPrimitive.Portal
+			data-slot="context-menu-portal"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSub({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+	return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+	return (
+		<ContextMenuPrimitive.RadioGroup
+			data-slot="context-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.SubTrigger
+			data-slot="context-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<Icon icon={faChevronRight} className="ml-auto" />
+		</ContextMenuPrimitive.SubTrigger>
+	);
+}
+
+function ContextMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+	return (
+		<ContextMenuPrimitive.SubContent
+			data-slot="context-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Content
+				data-slot="context-menu-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<ContextMenuPrimitive.Item
+			data-slot="context-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+	return (
+		<ContextMenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<ContextMenuPrimitive.ItemIndicator>
+					<Icon icon={faCheck} className="size-4" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.CheckboxItem>
+	);
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+	return (
+		<ContextMenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<ContextMenuPrimitive.ItemIndicator>
+					<Icon icon={faCircle} className="size-2 fill-current" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.RadioItem>
+	);
+}
+
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.Label
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn(
+				"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+	return (
+		<ContextMenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="context-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
+};

site/src/components/v2/Header.tsx

@@ -12,6 +12,7 @@ import { type ReactNode, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { GitHubDropdown } from "./GitHubDropdown";
 import { HeaderSearch } from "./HeaderSearch";
+import { LogoContextMenu } from "./LogoContextMenu";
 
 interface TextNavItemProps {
 	href: string;
@@ -100,16 +101,18 @@ export function Header({
 					<RivetHeader
 						className={headerStyles}
 						logo={
-							<Link href="/">
-								<Image
-									src={logoUrl.src || logoUrl}
-									width={80}
-									height={24}
-									className="ml-1 w-20"
-									alt="Rivet logo"
-									unoptimized
-								/>
-							</Link>
+							<LogoContextMenu>
+								<Link href="/">
+									<Image
+										src={logoUrl.src || logoUrl}
+										width={80}
+										height={24}
+										className="ml-1 w-20"
+										alt="Rivet logo"
+										unoptimized
+									/>
+								</Link>
+							</LogoContextMenu>
 						}
 						subnav={subnav}
 						support={
@@ -197,16 +200,18 @@ export function Header({
 				subnav ? "pb-2 md:pb-0 md:pt-4" : "md:py-4",
 			)}
 			logo={
-				<Link href="/">
-					<Image
-						src={logoUrl.src || logoUrl}
-						width={80}
-						height={24}
-						className="ml-1 w-20"
-						alt="Rivet logo"
-						unoptimized
-					/>
-				</Link>
+				<LogoContextMenu>
+					<Link href="/">
+						<Image
+							src={logoUrl.src || logoUrl}
+							width={80}
+							height={24}
+							className="ml-1 w-20"
+							alt="Rivet logo"
+							unoptimized
+						/>
+					</Link>
+				</LogoContextMenu>
 			}
 			subnav={subnav}
 			support={

site/src/components/v2/LogoContextMenu.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { useRef } from "react";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+	toast,
+} from "@rivet-gg/components";
+import { Icon, faCopy, faDownload } from "@rivet-gg/icons";
+
+import logoUrl from "@/images/rivet-logos/icon-text-white.svg";
+
+interface LogoContextMenuProps {
+	children: React.ReactNode;
+}
+
+export function LogoContextMenu({ children }: LogoContextMenuProps) {
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	const copyLogoAsSVG = async () => {
+		try {
+			const response = await fetch(logoUrl.src);
+			const svgContent = await response.text();
+
+			await navigator.clipboard.writeText(svgContent);
+			toast.success("Logo copied as SVG!");
+		} catch (err) {
+			toast.error("Failed to copy logo as SVG.");
+		}
+	};
+
+	const downloadBrandAssets = () => {
+		window.open("https://releases.rivet.gg/press-kit.zip", "_blank");
+	};
+
+	return (
+		<>
+			<ContextMenu>
+				<ContextMenuTrigger>{children}</ContextMenuTrigger>
+				<ContextMenuContent ref={menuRef}>
+					<ContextMenuItem onClick={copyLogoAsSVG}>
+						<Icon icon={faCopy} className="mr-3 h-4 w-4" />
+						Copy logo as SVG
+					</ContextMenuItem>
+					<ContextMenuItem onClick={downloadBrandAssets}>
+						<Icon icon={faDownload} className="mr-3 h-4 w-4" />
+						Download brand assets
+					</ContextMenuItem>
+				</ContextMenuContent>
+			</ContextMenu>
+		</>
+	);
+}