add context menu to server and player

src/app/(pages)/player/[[...id]]/page.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { Card } from "@/app/components/card";
+import { CopyButton } from "@/app/components/copy-button";
 import { ErrorCard } from "@/app/components/error-card";
 import { LookupPlayer } from "@/app/components/player/lookup-player";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
 import { Separator } from "@/app/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
 import { generateEmbed } from "@/common/embed";
@@ -10,6 +12,7 @@ import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { ReactElement } from "react";
+import config from "../../../../../config.json";
 
 type Params = {
   params: {
@@ -69,53 +72,70 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
 
       {error && <ErrorCard message={error} />}
       {player != undefined && (
-        <Card className="w-max xs:w-fit">
-          <div className="flex gap-4 flex-col xs:flex-row">
-            <div className="flex justify-center xs:justify-start">
-              <Image
-                className="w-[96px] h-[96px]"
-                src={player.skin.parts.head}
-                width={96}
-                height={96}
-                quality={100}
-                alt="The player's skin"
-              />
-            </div>
+        <ContextMenu>
+          <ContextMenuTrigger>
+            <Card className="w-max xs:w-fit">
+              <div className="flex gap-4 flex-col xs:flex-row">
+                <div className="flex justify-center xs:justify-start">
+                  <Image
+                    className="w-[96px] h-[96px]"
+                    src={player.skin.parts.head}
+                    width={96}
+                    height={96}
+                    quality={100}
+                    alt="The player's skin"
+                  />
+                </div>
 
-            <div className="flex flex-col gap-2">
-              <div>
-                <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
-                <p>{player.uniqueId}</p>
-              </div>
+                <div className="flex flex-col gap-2">
+                  <div>
+                    <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
+                    <p>{player.uniqueId}</p>
+                  </div>
 
-              <Separator />
+                  <Separator />
 
-              <div className="flex flex-col gap-2">
-                <p className="text-lg">Skin Parts</p>
-                <div className="flex gap-2">
-                  {Object.entries(player.skin.parts)
-                    .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
-                    .map(([part, url]) => {
-                      return (
-                        <Tooltip key={part}>
-                          <TooltipTrigger>
-                            <Link href={url} target="_blank">
-                              <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-                            </Link>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>
-                              Click to view {player.username}&apos;s {part}
-                            </p>
-                          </TooltipContent>
-                        </Tooltip>
-                      );
-                    })}
+                  <div className="flex flex-col gap-2">
+                    <p className="text-lg">Skin Parts</p>
+                    <div className="flex gap-2">
+                      {Object.entries(player.skin.parts)
+                        .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+                        .map(([part, url]) => {
+                          return (
+                            <Tooltip key={part}>
+                              <TooltipTrigger>
+                                <Link href={url} target="_blank">
+                                  <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
+                                </Link>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>
+                                  Click to view {player.username}&apos;s {part}
+                                </p>
+                              </TooltipContent>
+                            </Tooltip>
+                          );
+                        })}
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
-        </Card>
+            </Card>
+          </ContextMenuTrigger>
+          <ContextMenuContent className="flex flex-col">
+            <CopyButton content={player.username}>
+              <ContextMenuItem>Copy Player Username</ContextMenuItem>
+            </CopyButton>
+
+            <CopyButton content={player.uniqueId}>
+              <ContextMenuItem>Copy Player UUID</ContextMenuItem>
+            </CopyButton>
+
+            <CopyButton content={`${config.siteUrl}/player/${id}`}>
+              <ContextMenuItem>Copy Share URL</ContextMenuItem>
+            </CopyButton>
+          </ContextMenuContent>
+        </ContextMenu>
       )}
     </div>
   );

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -1,6 +1,8 @@
 import { Card } from "@/app/components/card";
+import { CopyButton } from "@/app/components/copy-button";
 import { ErrorCard } from "@/app/components/error-card";
 import { LookupServer } from "@/app/components/server/lookup-server";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
 import { generateEmbed } from "@/common/embed";
 import { formatNumber } from "@/common/number-utils";
 import { capitalizeFirstLetter } from "@/common/string-utils";
@@ -118,39 +120,53 @@ export default async function Page({ params: { platform, hostname } }: Params):
 
       {error && <ErrorCard message={error} />}
       {server != null && (
-        <Card className="w-max xs:w-fit">
-          <div className="flex gap-2 flex-col">
-            <div className="flex gap-4 flex-col xs:flex-row">
-              {favicon && (
-                <div className="flex justify-center xs:justify-start">
-                  <Image
-                    className="w-[64px] h-[64px]"
-                    src={favicon}
-                    width={64}
-                    height={64}
-                    quality={100}
-                    alt="The server's favicon"
-                  />
-                </div>
-              )}
+        <ContextMenu>
+          <ContextMenuTrigger>
+            <Card className="w-max xs:w-fit">
+              <div className="flex gap-2 flex-col">
+                <div className="flex gap-4 flex-col xs:flex-row">
+                  {favicon && (
+                    <div className="flex justify-center xs:justify-start">
+                      <Image
+                        className="w-[64px] h-[64px]"
+                        src={favicon}
+                        width={64}
+                        height={64}
+                        quality={100}
+                        alt="The server's favicon"
+                      />
+                    </div>
+                  )}
 
-              <div className="flex flex-col">
-                <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
-                <div>
-                  <p>
-                    Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
-                  </p>
+                  <div className="flex flex-col">
+                    <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
+                    <div>
+                      <p>
+                        Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
+                  {server.motd.html.map((line, index) => {
+                    return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
+                  })}
                 </div>
               </div>
-            </div>
-
-            <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
-              {server.motd.html.map((line, index) => {
-                return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
-              })}
-            </div>
-          </div>
-        </Card>
+            </Card>
+          </ContextMenuTrigger>
+          <ContextMenuContent className="flex flex-col">
+            <CopyButton content={server.hostname}>
+              <ContextMenuItem>Copy Server Hostname</ContextMenuItem>
+            </CopyButton>
+            {favicon && (
+              <CopyButton content={favicon}>
+                <ContextMenuItem>Copy Server Favicon URL</ContextMenuItem>
+              </CopyButton>
+            )}
+          </ContextMenuContent>
+        </ContextMenu>
       )}
     </div>
   );

src/app/components/copy-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useToast } from "@/common/use-toast";
+import copy from "clipboard-copy";
+import { ReactElement } from "react";
+
+type CopyButtonProps = {
+  content: string;
+  children: React.ReactNode;
+};
+
+/**
+ * A button that copies the content to the clipboard
+ *
+ * @param props the properties for the button
+ * @returns the copy button
+ */
+export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
+  const { toast } = useToast();
+
+  return (
+    <button
+      onClick={async () => {
+        await copy(content);
+        toast({
+          title: "Copied!",
+          description: `Copied "${content}" to the clipboard.`,
+          duration: 5000,
+        });
+      }}
+    >
+      {children}
+    </button>
+  );
+}

src/app/components/ui/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/common/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}