fix: i need new friends

This reverts commit 7497ca7df1a58d101d451804789f722710519529.

apps/www/src/app/api/og/fonts/index.ts

@@ -4,10 +4,13 @@ export async function loadFonts() {
     new URL("./Inter-Regular.ttf", import.meta.url)
   ).then((res) => res.arrayBuffer());
 
+  const interMediumFontP = fetch(
+    new URL("./Inter-Medium.ttf", import.meta.url)
+  ).then((res) => res.arrayBuffer());
 
   const interBoldFontP = fetch(
     new URL("./Inter-Bold.ttf", import.meta.url)
   ).then((res) => res.arrayBuffer());
 
-  return Promise.all([interRegularFontP, interBoldFontP]);
+  return Promise.all([interRegularFontP, interMediumFontP, interBoldFontP]);
 }

apps/www/src/app/api/og/server/[id]/players/route.tsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "@vercel/og";
-import { NextRequest } from "next/server";
+import type { NextRequest } from "next/server";
 import { MongoClient } from "mongodb";
 import fs from "node:fs";
 import path from "node:path";
@@ -26,6 +26,7 @@ async function loadLocalFonts() {
 
   return [
     fs.readFileSync(path.join(fontPath, "Inter-Regular.ttf")),
+    fs.readFileSync(path.join(fontPath, "Inter-Medium.ttf")),
     fs.readFileSync(path.join(fontPath, "Inter-Bold.ttf")),
   ];
 }
@@ -35,11 +36,19 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
+    // Load banner image from filesystem
+    const bannerPath = path.join(
+      process.cwd(),
+      "public",
+      "branding",
+      "bg-banner.png"
+    );
+    const bannerImageData = fs.readFileSync(bannerPath);
 
     const id = (await params).id;
 
     // Load fonts
-    const [interRegular, interBold] = await loadLocalFonts();
+    const [interRegular, interMedium, interBold] = await loadLocalFonts();
 
     // Verify server exists
     const serverResponse = await fetch(`https://api.minehut.com/server/${id}`);
@@ -60,7 +69,7 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
-              backgroundColor: "white",
+              backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -248,7 +257,7 @@ export async function GET(
             position: "relative",
             overflow: "hidden",
             fontFamily: "Inter",
-            backgroundColor: "white",
+            backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
@@ -540,6 +549,12 @@ export async function GET(
             style: "normal",
             weight: 700,
           },
+          {
+            name: "Inter",
+            data: interMedium,
+            style: "normal",
+            weight: 500,
+          },
         ],
       }
     );
@@ -555,6 +570,21 @@ export async function GET(
       console.error("Failed to load fonts for error page:", e);
     }
 
+    // Try to load the banner image
+    let bannerImageData: Buffer | null = null;
+    try {
+      const bannerPath = path.join(
+        process.cwd(),
+        "public",
+        "branding",
+        "dark-banner.png"
+      );
+      bannerImageData = fs.readFileSync(bannerPath);
+    } catch (e) {
+      // If banner image fails to load, use a solid color background
+      console.error("Failed to load banner image for error page:", e);
+    }
+
     return new ImageResponse(
       (
         <div
@@ -562,6 +592,7 @@ export async function GET(
             display: "flex",
             fontSize: 60,
             color: "white",
+            background: bannerImageData ? undefined : "#121212",
             width: "100%",
             height: "100%",
             padding: "50px 50px",
@@ -569,7 +600,11 @@ export async function GET(
             justifyContent: "center",
             alignItems: "center",
             fontFamily: "Inter",
-            backgroundColor: "white"
+            ...(bannerImageData && {
+              backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }),
           }}
         >
           <div

apps/www/src/app/api/og/server/[id]/route.tsx

@@ -4,7 +4,7 @@ import { NextRequest } from "next/server";
 import { miniMessage } from "minimessage-js";
 import { loadFonts } from "../../fonts";
 
-export const runtime = "edge";
+// export const runtime = "edge";
 
 // Function to parse MiniMessage and create JSX elements with styling
 function parseMotdToJsx(text: string) {
@@ -128,11 +128,15 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
+    // Load banner image
+    const bannerImageData = await fetch(
+      new URL("/branding/bg-banner.png", request.url)
+    ).then((res) => res.arrayBuffer());
 
     const id = (await params).id;
 
     // Load fonts
-    const [interRegular, interBold] = await loadFonts();
+    const [interRegular, interMedium, interBold] = await loadFonts();
 
     // Fetch server data
     const response = await fetch(`https://api.minehut.com/server/${id}`);
@@ -154,6 +158,7 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
+              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -221,7 +226,7 @@ export async function GET(
             position: "relative",
             overflow: "hidden",
             fontFamily: "Inter",
-            backgroundColor: "white",
+            backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
@@ -412,15 +417,30 @@ export async function GET(
             data: interBold,
             style: "normal",
             weight: 700,
-          }
-          
+          },
+          {
+            name: "Inter",
+            data: interMedium,
+            style: "normal",
+            weight: 500,
+          },
         ],
       }
     );
   } catch (error) {
-    const [interRegular, interBold] = await loadFonts();
+    const [interRegular, interMedium, interBold] = await loadFonts();
     console.error("Error generating OG image:", error);
 
+    // Try to load the banner image again in case it failed earlier
+    let bannerImageData: ArrayBuffer | undefined;
+    try {
+      bannerImageData = await fetch(
+        new URL("/branding/dark-banner.png", request.url)
+      ).then((res) => res.arrayBuffer());
+    } catch (e) {
+      // If banner image fails to load, use a solid color background
+      console.error("Failed to load banner image for error page:", e);
+    }
 
     return new ImageResponse(
       (
@@ -429,7 +449,7 @@ export async function GET(
             display: "flex",
             fontSize: 60,
             color: "white",
-            background:  "#121212",
+            background: bannerImageData ? undefined : "#121212",
             width: "100%",
             height: "100%",
             padding: "50px 50px",
@@ -437,7 +457,11 @@ export async function GET(
             justifyContent: "center",
             alignItems: "center",
             fontFamily: "Inter",
-            backgroundColor: "white",
+            ...(bannerImageData && {
+              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }),
           }}
         >
           <div style={{ display: "flex" }}>

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

@@ -103,7 +103,6 @@ export function ServerList() {
 							</TooltipTrigger>
 							<TooltipContent
 								side="bottom"
-								className="backdrop-blur bg-transparent text-black dark:text-white "
 							>
 								{filterCount} modification(s) enabled
 							</TooltipContent>

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

@@ -61,6 +61,7 @@ export function useFilters(data: OnlineServer[]) {
 	const { user, isSignedIn } = useUser();
 
 	const updateServers = async (newFilters: EmbeddedFilter[]) => {
+		if (newFilters.length === 0) setFilteredData(data);
 		const modificationMap = await Promise.all(data.map((v) =>
 			Promise.all(newFilters.map(async (c) => c.functionFilter(v))),
 		));