Add img_format=png to imager URLs and extend navbar color picker with 10 new colors

src/lib/format.ts

@@ -4,14 +4,16 @@ import { resolveImagerBase } from "@/lib/imager";
 export function avatarImageUrl(
 	base: string,
 	look: string,
-	opts: { size?: "s" | "m" | "l"; headOnly?: boolean; direction?: number } = {},
+	opts: { size?: "s" | "m" | "l"; headOnly?: boolean; direction?: number; headDirection?: number } = {},
 ): string {
 	const resolved = resolveImagerBase(base);
-	const params = new URLSearchParams({ figure: look });
+	const params = new URLSearchParams({ figure: look, img_format: "png" });
 	if (opts.size) params.set("size", opts.size);
 	if (opts.headOnly) params.set("headonly", "1");
 	if (opts.direction !== undefined)
 		params.set("direction", String(opts.direction));
+	if (opts.headDirection !== undefined)
+		params.set("head_direction", String(opts.headDirection));
 	const sep = resolved.includes("?") ? "&" : "?";
 	return `${resolved}${sep}${params.toString()}`;
 }

src/lib/imager.test.ts

@@ -34,5 +34,6 @@ describe("getAvatarUrl", () => {
 		expect(url).toContain("size=l");
 		expect(url).toContain("headonly=1");
 		expect(url).toContain("direction=2");
+		expect(url).toContain("img_format=png");
 	});
 });

src/lib/imager.ts

@@ -57,6 +57,7 @@ export function getAvatarUrl(
 		direction: String(direction),
 		head_direction: String(headDirection),
 		size,
+		img_format: "png",
 	});
 
 	if (headOnly) params.set("headonly", "1");