From 0209d48475a94ad312a9388a001d4ff582c37500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 2 Jan 2026 20:17:24 -0600
Subject: [PATCH] feat: backgrounds

---
 packages/website-ue/src/core/api/abstract.ts  |  3 ++
 packages/website-ue/src/core/api/server.ts    |  8 ++++
 packages/website-ue/src/core/tools/tools.ts   |  7 ++++
 .../src/pages/api/backgrounds/[id].webp.ts    | 27 +++++++++++++
 .../src/pages/backgrounds/index.astro         | 38 +++++++++++++++++++
 5 files changed, 83 insertions(+)
 create mode 100644 packages/website-ue/src/pages/api/backgrounds/[id].webp.ts
 create mode 100644 packages/website-ue/src/pages/backgrounds/index.astro

diff --git a/packages/website-ue/src/core/api/abstract.ts b/packages/website-ue/src/core/api/abstract.ts
index c712bd4dd..af8a2f6e1 100644
--- a/packages/website-ue/src/core/api/abstract.ts
+++ b/packages/website-ue/src/core/api/abstract.ts
@@ -17,4 +17,7 @@ export abstract class AbstractAPI {
 
   abstract avatars(): Promise<CatalogItemAccessor[]>;
   abstract avatar(id: string): Promise<CatalogItemAccessor>;
+
+  abstract backgrounds(): Promise<CatalogItemAccessor[]>;
+  abstract background(id: string): Promise<CatalogItemAccessor>;
 }
diff --git a/packages/website-ue/src/core/api/server.ts b/packages/website-ue/src/core/api/server.ts
index 7bf43b0d1..82e477a2f 100644
--- a/packages/website-ue/src/core/api/server.ts
+++ b/packages/website-ue/src/core/api/server.ts
@@ -154,4 +154,12 @@ export class ServerAPI extends AbstractAPI {
   async avatar(id: string) {
     return this.metadata.item(`ProfileAvatarEntity.${id}`);
   }
+
+  async backgrounds() {
+    return this.metadata.group("ProfileBackgroundEntity");
+  }
+
+  async background(id: string) {
+    return this.metadata.item(`ProfileBackgroundEntity.${id}`);
+  }
 }
diff --git a/packages/website-ue/src/core/tools/tools.ts b/packages/website-ue/src/core/tools/tools.ts
index bba862ac8..0ddeea56d 100644
--- a/packages/website-ue/src/core/tools/tools.ts
+++ b/packages/website-ue/src/core/tools/tools.ts
@@ -17,10 +17,17 @@ export const tools: Record<string, Tool> = {
     button: "purple",
     significant: true,
   },
+
   avatars: {
     id: "avatars",
     button: "gold",
   },
+
+  backgrounds: {
+    id: "backgrounds",
+    button: "amber",
+  },
+
   api: {
     id: "api",
     disabled: true,
diff --git a/packages/website-ue/src/pages/api/backgrounds/[id].webp.ts b/packages/website-ue/src/pages/api/backgrounds/[id].webp.ts
new file mode 100644
index 000000000..bfb7b0f39
--- /dev/null
+++ b/packages/website-ue/src/pages/api/backgrounds/[id].webp.ts
@@ -0,0 +1,27 @@
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (async () => {
+  const backgrounds = await api.backgrounds();
+
+  return backgrounds.map((avatar) => ({
+    params: { id: avatar.name },
+  }));
+}) satisfies GetStaticPaths;
+
+/**
+ * One day I will write documentation for this
+ */
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const avatar = await api.background(params.id);
+  const profileBackground = avatar.ProfileBackground();
+
+  if (import.meta.env.DEV) {
+    return Response.redirect(profileBackground.background);
+  }
+
+  const response = await fetch(profileBackground.background);
+  const buffer = await response.arrayBuffer();
+
+  return new Response(buffer);
+}
diff --git a/packages/website-ue/src/pages/backgrounds/index.astro b/packages/website-ue/src/pages/backgrounds/index.astro
new file mode 100644
index 000000000..9857f716c
--- /dev/null
+++ b/packages/website-ue/src/pages/backgrounds/index.astro
@@ -0,0 +1,38 @@
+---
+import { Grade } from "@protos/blitz_static_standard_grades_enum";
+import { api } from "../../core/api/dynamic";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+const backgrounds = await api.backgrounds();
+---
+
+<BaseLayout accent="amber">
+  {
+    backgrounds.map((background) => {
+      const ui = background.StuffUI("UIComponent");
+      const profileBackground = background.ProfileBackground();
+
+      return (
+        <>
+          <h3>
+            {ui.display_name} {Grade[ui.grade]}{" "}
+          </h3>
+
+          <pre>{JSON.stringify(profileBackground, null, 2)}</pre>
+
+          {ui.description && <p>{ui.description}</p>}
+          {ui.obtaining_methods && <p>{ui.obtaining_methods}</p>}
+          {ui.features && <p>{ui.features}</p>}
+
+          <img width="128" src={`/api/backgrounds/${background.name}.webp`} />
+
+          {background.components.sellableComponent && (
+            <pre>{JSON.stringify(background.Sellable(), null, 2)}</pre>
+          )}
+
+          <br />
+        </>
+      );
+    })
+  }
+</BaseLayout>