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

src/components/navbar-color-picker.tsx

@@ -7,17 +7,27 @@ const COLORS = [
 	{ name: "Zwart", value: "#0f172a", text: "#f8fafc" },
 	{ name: "Donker", value: "#1e293b", text: "#f8fafc" },
 	{ name: "Grijs", value: "#f1f5f9", text: "#1e293b" },
+	{ name: "Zilvergrijs", value: "#94a3b8", text: "#1e293b" },
+	{ name: "Leisteen", value: "#475569", text: "#f8fafc" },
+	{ name: "Bruin", value: "#92400e", text: "#f8fafc" },
+	{ name: "Koper", value: "#b45309", text: "#f8fafc" },
 	{ name: "Amber", value: "#f59e0b", text: "#1e293b" },
 	{ name: "Goud", value: "#eab308", text: "#1e293b" },
 	{ name: "Oranje", value: "#ea580c", text: "#ffffff" },
 	{ name: "Rood", value: "#ef4444", text: "#ffffff" },
+	{ name: "Bordeaux", value: "#991b1b", text: "#f8fafc" },
 	{ name: "Roze", value: "#ec4899", text: "#ffffff" },
+	{ name: "Fuchsia", value: "#d946ef", text: "#ffffff" },
 	{ name: "Paars", value: "#8b5cf6", text: "#ffffff" },
+	{ name: "Violet", value: "#6d28d9", text: "#f8fafc" },
 	{ name: "Indigo", value: "#6366f1", text: "#ffffff" },
 	{ name: "Blauw", value: "#3b82f6", text: "#ffffff" },
+	{ name: "Koningsblauw", value: "#1d4ed8", text: "#ffffff" },
 	{ name: "Cyaan", value: "#06b6d4", text: "#ffffff" },
+	{ name: "Mint", value: "#14b8a6", text: "#ffffff" },
 	{ name: "Groen", value: "#22c55e", text: "#1e293b" },
 	{ name: "Olijf", value: "#84cc16", text: "#1e293b" },
+	{ name: "Limoen", value: "#65a30d", text: "#ffffff" },
 ];
 
 export function NavbarColorPicker() {
@@ -97,14 +107,14 @@ export function NavbarColorPicker() {
 			</button>
 
 			{mounted && open && (
-				<div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[180px] sm:min-w-[200px] rounded-xl z-50 py-3 px-2">
+				<div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[240px] sm:min-w-[280px] rounded-xl z-50 py-3 px-2">
 					<div
 						className="text-xs font-semibold uppercase tracking-wider mb-2 px-2"
 						style={{ color: "var(--color-text-muted)" }}
 					>
 						Navbar kleur
 					</div>
-					<div className="grid grid-cols-3 sm:grid-cols-5 gap-1.5">
+					<div className="grid grid-cols-5 gap-1.5">
 						{COLORS.map((c, i) => (
 							<button
 								key={c.name}

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");