Add support for copying Windows and Homebrew installation commands

beszel/site/src/components/add-system.tsx

@@ -1,5 +1,5 @@
-import { Trans } from "@lingui/react/macro";
+import { Trans } from "@lingui/react/macro"
-import { t } from "@lingui/core/macro";
+import { t } from "@lingui/core/macro"
 import { Button } from "@/components/ui/button"
 import {
 	Dialog,
@@ -19,11 +19,12 @@ import { $publicKey, pb } from "@/lib/stores"
 import { cn, copyToClipboard, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
 import { i18n } from "@lingui/core"
 import { useStore } from "@nanostores/react"
-import { ChevronDownIcon, Copy, PlusIcon } from "lucide-react"
+import { ChevronDownIcon, Copy, ExternalLinkIcon, PlusIcon } from "lucide-react"
 import { memo, useRef, useState } from "react"
 import { basePath, navigate } from "./router"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
 import { SystemRecord } from "@/types"
+import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "./ui/icons"
 
 export function AddSystemButton({ className }: { className?: string }) {
 	const [open, setOpen] = useState(false)
@@ -72,15 +73,22 @@ function copyDockerRun(port = "45876", publicKey: string) {
 	)
 }
 
-function copyInstallCommand(port = "45876", publicKey: string) {
+function copyLinuxCommand(port = "45876", publicKey: string, brew = false) {
-	let cmd = `curl -sL https://raw.githubusercontent.com/henrygd/beszel/main/supplemental/scripts/install-agent.sh -o install-agent.sh && chmod +x install-agent.sh && ./install-agent.sh -p ${port} -k "${publicKey}"`
+	let cmd = `curl -sL https://get.beszel.dev${
-	// add china mirrors flag if zh-CN
+		brew ? "/brew" : ""
+	} -o /tmp/install-agent.sh && chmod +x /tmp/install-agent.sh && /tmp/install-agent.sh -p ${port} -k "${publicKey}"`
 	if ((i18n.locale + navigator.language).includes("zh-CN")) {
 		cmd += ` --china-mirrors`
 	}
 	copyToClipboard(cmd)
 }
 
+function copyWindowsCommand(port = "45876", publicKey: string) {
+	copyToClipboard(
+		`Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser; & iwr -useb https://get.beszel.dev -OutFile "$env:TEMP\install-agent.ps1"; & "$env:TEMP\install-agent.ps1" -Key "${publicKey}" -Port ${port}`
+	)
+}
+
 /**
  * SystemDialog component for adding or editing a system.
  * @param {Object} props - The component props.
@@ -197,7 +205,7 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 											className="absolute end-0 top-0"
 											onClick={() => copyToClipboard(publicKey)}
 										>
-											<Copy className="h-4 w-4 " />
+											<Copy className="size-4" />
 										</Button>
 									</TooltipTrigger>
 									<TooltipContent>
@@ -215,17 +223,39 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 							<CopyButton
 								text={t`Copy` + " docker compose"}
 								onClick={() => copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-								dropdownText={t`Copy` + " docker run"}
+								icon={<DockerIcon className="size-4 -me-0.5" />}
-								dropdownOnClick={() => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey)}
+								dropdownItems={[
+									{
+										text: t`Copy` + " docker run",
+										onClick: () => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey),
+										icons: [<DockerIcon className="size-4" />],
+									},
+								]}
 							/>
 						</TabsContent>
 						{/* Binary */}
 						<TabsContent value="binary" className="contents">
 							<CopyButton
 								text={t`Copy Linux command`}
-								onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
+								icon={<TuxIcon className="size-4" />}
-								dropdownText={t`Manual setup instructions`}
+								onClick={() => copyLinuxCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-								dropdownUrl="https://beszel.dev/guide/agent-installation#binary"
+								dropdownItems={[
+									{
+										text: t`Copy Homebrew command`,
+										onClick: () => copyLinuxCommand(isUnixSocket ? hostValue : port.current?.value, publicKey, true),
+										icons: [<AppleIcon className="size-4" />, <TuxIcon className="w-4 h-4" />],
+									},
+									{
+										text: t`Copy Windows command`,
+										onClick: () => copyWindowsCommand(isUnixSocket ? hostValue : port.current?.value, publicKey),
+										icons: [<WindowsIcon className="size-4" />],
+									},
+									{
+										text: t`Manual setup instructions`,
+										url: "https://beszel.dev/guide/agent-installation#binary",
+										icons: [<ExternalLinkIcon className="size-4" />],
+									},
+								]}
 							/>
 						</TabsContent>
 						{/* Save */}
@@ -237,19 +267,30 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 	)
 })
 
+interface DropdownItem {
+	text: string
+	onClick?: () => void
+	url?: string
+	icons?: React.ReactNode[]
+}
+
 interface CopyButtonProps {
 	text: string
 	onClick: () => void
-	dropdownText: string
+	dropdownItems: DropdownItem[]
-	dropdownOnClick?: () => void
+	icon?: React.ReactNode
-	dropdownUrl?: string
 }
 
 const CopyButton = memo((props: CopyButtonProps) => {
 	return (
 		<div className="flex gap-0 rounded-lg">
-			<Button type="button" variant="outline" onClick={props.onClick} className="rounded-e-none dark:border-e-0 grow">
+			<Button
-				{props.text}
+				type="button"
+				variant="outline"
+				onClick={props.onClick}
+				className="rounded-e-none dark:border-e-0 grow flex items-center gap-2"
+			>
+				{props.text} {props.icon}
 			</Button>
 			<div className="w-px h-full bg-muted"></div>
 			<DropdownMenu>
@@ -259,15 +300,24 @@ const CopyButton = memo((props: CopyButtonProps) => {
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end">
-					{props.dropdownUrl ? (
+					{props.dropdownItems.map((item, index) => (
-						<DropdownMenuItem asChild>
+						<DropdownMenuItem key={index} asChild={!!item.url}>
-							<a href={props.dropdownUrl} className="cursor-pointer" target="_blank" rel="noopener noreferrer">
+							{item.url ? (
-								{props.dropdownText}
+								<a
-							</a>
+									href={item.url}
+									className="cursor-pointer flex items-center gap-1.5"
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									{item.text} {item.icons?.map((icon) => icon)}
+								</a>
+							) : (
+								<div onClick={item.onClick} className="cursor-pointer flex items-center gap-1.5">
+									{item.text} {item.icons?.map((icon) => icon)}
+								</div>
+							)}
 						</DropdownMenuItem>
-					) : (
+					))}
-						<DropdownMenuItem onClick={props.dropdownOnClick} className="cursor-pointer">{props.dropdownText}</DropdownMenuItem>
-					)}
 				</DropdownMenuContent>
 			</DropdownMenu>
 		</div>

beszel/site/src/components/ui/icons.tsx

@@ -38,6 +38,16 @@ export function AppleIcon(props: SVGProps<SVGSVGElement>) {
 	)
 }
 
+// ion icons (MIT) https://github.com/ionic-team/ionicons/blob/main/LICENSE
+export function DockerIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg {...props} viewBox="0 0 512 512" fill="currentColor">
+			<path d="M507 211c-1-1-14-11-42-11a133 133 0 0 0-21 2c-6-36-36-54-37-55l-7-4-5 7a102 102 0 0 0-13 30c-5 21-2 40 8 57-12 7-33 9-37 9H16a16 16 0 0 0-16 16 241 241 0 0 0 15 87c11 30 29 53 51 67 25 15 66 24 113 24a344 344 0 0 0 62-6 257 257 0 0 0 82-29 224 224 0 0 0 55-46c27-30 43-64 55-94h4c30 0 48-12 58-22a63 63 0 0 0 15-22l2-6Z" />
+			<path d="M47 236h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4H47a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m62 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m-125-57h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m62 0h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m0-58h45a4 4 0 0 0 4-4V76a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 116h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4" />
+		</svg>
+	)
+}
+
 // MingCute Apache License 2.0 https://github.com/Richard9394/MingCute
 export function Rows(props: SVGProps<SVGSVGElement>) {
 	return (