feat: remove margin

apps/www/src/components/feat/server-page/server-page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import type { ServerResponse } from "@/lib/types/mh-server";
+import type { OnlineServer, ServerResponse } from "@/lib/types/mh-server";
 import IconDisplay from "../icons/minecraft-icon-display";
 import { ServerPageTags } from "./server-page-tags";
 import { Separator } from "@/components/ui/separator";
@@ -13,9 +13,11 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 export function ServerMainPage({
 	server,
 	mhsfData,
+  onlineServer
 }: {
 	server: ServerResponse;
 	mhsfData: ReturnType<typeof useMHSFServer>;
+  onlineServer?: OnlineServer;
 }) {
 	useEffect(() => {
 		if (mhsfData.server?.customizationData.colorMode !== null) {
@@ -52,21 +54,26 @@ export function ServerMainPage({
 				</div>
 				<p className="w-full">
 					<div className="lg:flex justify-between w-full">
-						<h1 className="text-2xl font-bold flex items-center gap-1 ml-2">
+						<h1 className="text-2xl font-bold flex items-center gap-1">
+							{server.name}
+							{onlineServer !== undefined && onlineServer?.author && (
+								<span className="text-muted-foreground flex items-center gap-2">
+									by{" "}
 									{mhsfData.server?.customizationData.userProfilePicture && (
-								<Avatar className="h-[32px] w-[32px]">
+										<Avatar className="h-[16px] w-[16px]">
 											<AvatarImage
 												src={
-											mhsfData.server?.customizationData.userProfilePicture ??
-											""
+													mhsfData.server?.customizationData
+														.userProfilePicture ?? ""
 												}
 												alt="Server Owner Image"
 											/>
-									<AvatarFallback>{server.name[0]}</AvatarFallback>
+											<AvatarFallback>{onlineServer?.author[0]}</AvatarFallback>
 										</Avatar>
 									)}
-
-							{server.name}
+									{onlineServer?.author}
+								</span>
+							)}
 						</h1>
 						<span>
 							<ServerPageButtons server={server} mhsfData={mhsfData} />

apps/www/src/components/feat/server-page/server-provider.tsx

@@ -14,7 +14,7 @@ import { ReportingProvider } from "./reporting/reporting-provider";
 import { ServerEditorProvider } from "./server-editor/server-editor-provider";
 
 export function ServerProvider({ serverId }: { serverId: string }) {
-  const { server, error, loading } = useServer({ id: serverId });
+  const { server, error, loading, onlineServer } = useServer({ id: serverId });
   const settings = useSettingsStore();
   const mhsf = useMHSFServer(serverId);
 
@@ -77,6 +77,7 @@ export function ServerProvider({ serverId }: { serverId: string }) {
               <ServerMainPage
                 server={server as ServerResponse}
                 mhsfData={mhsf}
+                onlineServer={onlineServer ?? undefined}
               />
             </ReportingProvider>
           </ServerEditorProvider>

apps/www/src/lib/hooks/use-server.tsx

@@ -6,6 +6,7 @@ export function useServer(serverSpecifier: { id?: string; name?: string }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [server, setServer] = useState<ServerResponse | null>(null);
+  const [onlineServer, setOnlineServer] = useState<OnlineServer | null>(null);
 
   useEffectOnce(() => {
     try {
@@ -16,6 +17,15 @@ export function useServer(serverSpecifier: { id?: string; name?: string }) {
         const json = await res.json();
         if (json.server === null) throw new Error("Server not found");
 
+        if (server?.online) {
+          const res = await fetch("https://api.minehut.com/servers");
+          const json = await res.json() as {servers: OnlineServer[]};
+          const onlineServerData = json.servers.find((s) => s.staticInfo._id === server._id) ?? null;
+          if (onlineServerData) {
+            setOnlineServer(onlineServerData);
+          }
+        }
+
         setServer(json.server);
         setLoading(false);
       })();
@@ -26,5 +36,5 @@ export function useServer(serverSpecifier: { id?: string; name?: string }) {
     }
   });
 
-  return { loading, error, server };
+  return { loading, error, server, onlineServer };
 }