Updates

Frontend/package.json

@@ -13,10 +13,13 @@
   "dependencies": {
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
+    "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
     "lucide-react": "^0.370.0",
     "next": "14.2.1",

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

@@ -59,7 +59,7 @@ const PlayerPage = async ({ params }: PageProps): Promise<ReactElement> => {
                     </div>
 
                     {/* Player Result */}
-                    {result && <PlayerResult player={result} />}
+                    {result && <PlayerResult query={query} player={result} />}
                 </div>
             </div>
         </main>
@@ -92,11 +92,13 @@ export const generateMetadata = async ({
             if (code === 400) {
                 return Embed({
                     title: "Invalid Player",
+                    color: "#EB4034",
                     description: "The player you searched for is invalid.",
                 });
             } else if (code === 404) {
                 return Embed({
                     title: "Player Not Found",
+                    color: "#EB4034",
                     description: "The player you searched for was not found.",
                 });
             }

Frontend/src/app/components/copy-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactElement, ReactNode } from "react";
+import copy from "clipboard-copy";
+
+/**
+ * Props for the copy button.
+ */
+type CopyButtonProps = {
+    /**
+     * The content to copy when
+     * this component is clicked.
+     */
+    content: string;
+
+    /**
+     * The children to render in this button.
+     */
+    children: ReactNode;
+};
+
+/**
+ * A component that copies
+ */
+const CopyButton = ({ content, children }: CopyButtonProps): ReactElement => (
+    <button onClick={async () => await copy(content)}>{children}</button>
+);
+export default CopyButton;

Frontend/src/app/components/embed.tsx

@@ -9,6 +9,12 @@ type EmbedProps = {
      */
     title: string;
 
+    /**
+     * The color of this embed, undefined
+     * for no custom color.
+     */
+    color?: string | undefined;
+
     /**
      * The description of the embed.
      */
@@ -28,6 +34,7 @@ type EmbedProps = {
  */
 const Embed = ({
     title,
+    color,
     description,
     thumbnail = "",
 }: EmbedProps): Metadata => {
@@ -45,6 +52,7 @@ const Embed = ({
         twitter: {
             card: "summary",
         },
+        themeColor: color,
     };
 };
 export default Embed;

Frontend/src/app/components/landing/statistic-counters.tsx

@@ -8,7 +8,7 @@ import { ReactElement } from "react";
  */
 const StatisticCounters = (): ReactElement => (
     <div className="py-56 flex justify-center items-center">
-        <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24">
+        <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24 pointer-events-none">
             <Counter name="Testing" amount={1_000_000} />
             <Counter name="Testing" amount={1_000_000} />
             <Counter name="Testing" amount={1_000_000} />

Frontend/src/app/components/player/player-result.tsx

@@ -4,6 +4,14 @@ import { CachedPlayer, SkinPart } from "restfulmc-lib";
 import { ReactElement } from "react";
 import { Badge } from "@/components/ui/badge";
 import config from "@/config";
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import CopyButton from "@/components/copy-button";
+import * as querystring from "node:querystring";
 
 /**
  * The result of a player search.
@@ -12,6 +20,7 @@ import config from "@/config";
  * @returns the player result jsx
  */
 const PlayerResult = ({
+    query,
     player: {
         uniqueId,
         username,
@@ -19,11 +28,14 @@ const PlayerResult = ({
         legacy,
     },
 }: {
+    query: string;
     player: CachedPlayer;
 }): ReactElement => (
+    <ContextMenu>
+        <ContextMenuTrigger>
             <div className="relative px-2 py-3 flex flex-col items-center bg-muted rounded-xl">
                 {/* Raw Json */}
-        <div className="absolute top-[7.25rem] right-3">
+                <div className="absolute top-[7.25rem] right-5">
                     <Link
                         href={`${config.apiEndpoint}/player/${username}`}
                         target="_blank"
@@ -79,7 +91,11 @@ const PlayerResult = ({
                                         part === SkinPart.BODY_FLAT
                                 )
                                 .map(([part, url], index) => (
-                            <Link key={index} href={url} target="_blank">
+                                    <Link
+                                        key={index}
+                                        href={url}
+                                        target="_blank"
+                                    >
                                         <img
                                             className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
                                             src={url}
@@ -91,5 +107,20 @@ const PlayerResult = ({
                     </div>
                 </div>
             </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem>
+                <CopyButton content={username}>Copy Player Username</CopyButton>
+            </ContextMenuItem>
+            <ContextMenuItem>
+                <CopyButton content={uniqueId}>Copy Player UUID</CopyButton>
+            </ContextMenuItem>
+            <ContextMenuItem>
+                <CopyButton content={`${config.siteUrl}/player/${query}`}>
+                    Copy Share URL
+                </CopyButton>
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 );
 export default PlayerResult;

Frontend/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 "@/app/lib/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,
+}

Frontend/src/app/layout.tsx

@@ -1,4 +1,3 @@
-import Footer from "@/components/footer";
 import Navbar from "@/components/navbar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import config from "@/config";

Frontend/tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-const { fontFamily, screens } = require("tailwindcss/defaultTheme");
+const { screens } = require("tailwindcss/defaultTheme");
 
 const config = {
     darkMode: ["class"],