cleanup and docs

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

@@ -1,11 +1,11 @@
-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 { ServerView } from "@/app/components/server/server-view";
 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 { isValidServer } from "@/common/server";
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import {
   CachedBedrockMinecraftServer,
@@ -15,7 +15,6 @@ import {
   getServer,
 } from "mcutils-library";
 import { Metadata, Viewport } from "next";
-import Image from "next/image";
 import { ReactElement } from "react";
 import config from "../../../../../../config.json";
 
@@ -55,40 +54,29 @@ function checkPlatform(platform: ServerPlatform): boolean {
 }
 
 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,
-    };
-  }
+  const validPlayer = await isValidServer(platform, hostname);
+  return {
+    themeColor: validPlayer ? Colors.green : Colors.red,
+  };
 }
 
 export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
+  if (!checkPlatform(platform)) {
+    // Invalid platform
+    return generateEmbed({
+      title: "Server Not Found",
+      description: "Invalid platform",
+    });
+  }
+  if (!hostname || hostname.length === 0) {
+    // No hostname
+    return generateEmbed({
+      title: "Server Lookup",
+      description: `Click to lookup a ${capitalizeFirstLetter(platform)} server.`,
+    });
+  }
+
   try {
-    if (!checkPlatform(platform)) {
-      // Invalid platform
-      return generateEmbed({
-        title: "Server Not Found",
-        description: "Invalid platform",
-      });
-    }
-    if (!hostname || hostname.length === 0) {
-      // No hostname
-      return generateEmbed({
-        title: "Server Lookup",
-        description: `Click to lookup a ${capitalizeFirstLetter(platform)} server.`,
-      });
-    }
     const server = await getServer(platform, hostname);
     const { hostname: serverHostname, players } = server as CachedJavaMinecraftServer | CachedBedrockMinecraftServer;
 
@@ -115,21 +103,21 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
 export default async function Page({ params: { platform, hostname } }: Params): Promise<ReactElement> {
   let error: string | undefined = undefined; // The error to display
   let server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer | undefined = undefined; // The server to display
-  let invalidPlatform = !checkPlatform(platform); // Whether the platform is invalid
+  let invalidPlatform: boolean = !checkPlatform(platform); // Whether the platform is invalid
+  let favicon: string | undefined; // The server's favicon
 
-  // Try and get the player to display
-  try {
-    if (invalidPlatform) {
-      error = "Invalid platform"; // Set the error message
-    } else {
+  if (invalidPlatform) {
+    error = "Invalid platform"; // Set the error message
+  } else {
+    // Try and get the player to display
+    try {
       server = platform && hostname ? await getServer(platform, hostname) : undefined;
+      favicon = getFavicon(platform, server);
+    } catch (err) {
+      error = (err as McUtilsAPIError).message; // Set the error message
     }
-  } catch (err) {
-    error = (err as McUtilsAPIError).message; // Set the error message
   }
 
-  const favicon = getFavicon(platform, server);
-
   return (
     <div className="h-full flex flex-col items-center">
       <div className="mb-4 text-center">
@@ -143,39 +131,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
       {server != null && (
         <ContextMenu>
           <ContextMenuTrigger>
-            <Card className="w-max xs:w-fit relative">
-              <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>
-                  </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>
+            <ServerView server={server} favicon={favicon} />
           </ContextMenuTrigger>
           <ContextMenuContent className="flex flex-col">
             <CopyButton content={server.hostname}>