embed color based on if the lookup was successful

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

@@ -7,9 +7,10 @@ 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 { Colors } from "@/common/colors";
 import { generateEmbed } from "@/common/embed";
 import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { ReactElement } from "react";
@@ -21,6 +22,25 @@ type Params = {
   };
 };
 
+export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
+  try {
+    if (!id || id.length === 0) {
+      return {
+        themeColor: Colors.red,
+      };
+    }
+    await getPlayer(id); // Ensure the player is valid.
+    return {
+      themeColor: Colors.green,
+    };
+  } catch (err) {
+    // An error occurred
+    return {
+      themeColor: Colors.red,
+    };
+  }
+}
+
 export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
   try {
     // No id provided

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

@@ -3,6 +3,7 @@ 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 { Colors } from "@/common/colors";
 import { generateEmbed } from "@/common/embed";
 import { formatNumber } from "@/common/number-utils";
 import { capitalizeFirstLetter } from "@/common/string-utils";
@@ -13,7 +14,7 @@ import {
   ServerPlatform,
   getServer,
 } from "mcutils-library";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import Image from "next/image";
 import { ReactElement } from "react";
 import config from "../../../../../../config.json";
@@ -53,6 +54,25 @@ function checkPlatform(platform: ServerPlatform): boolean {
   return platform === ServerPlatform.Java || platform === ServerPlatform.Bedrock;
 }
 
+export async function generateViewport({ params: { platform, hostname } }: Params): Promise<Viewport> {
+  try {
+    if (!checkPlatform(platform) || !hostname || hostname.length === 0) {
+      return {
+        themeColor: Colors.red,
+      };
+    }
+    await getServer(platform, hostname); // Ensure the server is valid.
+    return {
+      themeColor: Colors.green,
+    };
+  } catch (err) {
+    // An error occurred
+    return {
+      themeColor: Colors.red,
+    };
+  }
+}
+
 export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
   try {
     if (!checkPlatform(platform)) {

src/app/components/player/lookup-player.tsx

@@ -24,7 +24,8 @@ export function LookupPlayer(): ReactElement {
     }
 
     try {
-      await getPlayer(query);
+      const player = await getPlayer(query);
+      router.push(`/player/${player.username}`);
     } catch (err) {
       toast({
         title: "Error",
@@ -34,8 +35,6 @@ export function LookupPlayer(): ReactElement {
       });
       return;
     }
-
-    router.push(`/player/${query}`);
   };
 
   return (

src/app/components/server/lookup-server.tsx

@@ -30,7 +30,8 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme
     }
 
     try {
-      await getServer(platform, query);
+      const server = await getServer(platform, query);
+      router.push(`/server/${platform}/${server.hostname}`);
     } catch (err) {
       toast({
         title: "Error",
@@ -40,8 +41,6 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme
       });
       return;
     }
-
-    router.push(`/server/${platform}/${query}`);
   };
 
   return (

src/common/colors.ts

@@ -0,0 +1,4 @@
+export const Colors = {
+  green: "#0FFF50",
+  red: "#8B0000",
+};