feat: user-choosable avatar colors with settings picker

Add avatarColor as a stored, user-selectable field (mint, sky, lavender,
coral, rose, teal, amber). Randomly assigned on registration, changeable
in profile settings. Existing users keep hash-based fallback until they
choose a color. Includes DB migration, API validation, gradient map,
live preview in settings, and banner fallback integration.
This commit is contained in:
Jannis Braun
2026-03-10 20:26:28 +01:00
parent d7449bdf42
commit d2697d87fa
13 changed files with 95 additions and 10 deletions
+14 -1
View File
@@ -4,6 +4,7 @@ import { getDb, schema } from '../db/index.js';
import { authenticate, verifyPassword } from '../utils/auth.js';
import { connectionManager } from '../ws/handler.js';
import type { UpdateUserRequest, VerifyPasswordRequest, VerifyPasswordResponse, ReplicatedInstance } from '@backspace/shared';
import { AVATAR_COLORS } from '@backspace/shared';
import { sanitizeUser } from '../utils/sanitize.js';
export async function userRoutes(app: FastifyInstance): Promise<void> {
@@ -38,7 +39,7 @@ export async function userRoutes(app: FastifyInstance): Promise<void> {
});
app.patch<{ Body: UpdateUserRequest }>('/api/users/@me', { preHandler: authenticate }, async (request, reply) => {
const { displayName, avatar, banner, accentColor, bio, customStatus, status, replicatedInstances, homeUserId } = request.body;
const { displayName, avatar, banner, accentColor, avatarColor, bio, customStatus, status, replicatedInstances, homeUserId } = request.body;
const db = getDb();
const updateData: Record<string, string | null | undefined> = {};
@@ -79,6 +80,18 @@ export async function userRoutes(app: FastifyInstance): Promise<void> {
}
}
if (avatarColor !== undefined) {
if (avatarColor && typeof avatarColor === 'string' && avatarColor.trim().length > 0) {
const trimmed = avatarColor.trim();
if (!(AVATAR_COLORS as readonly string[]).includes(trimmed)) {
return reply.code(400).send({ error: `Invalid avatar color. Must be one of: ${AVATAR_COLORS.join(', ')}`, statusCode: 400 });
}
updateData.avatarColor = trimmed;
} else {
updateData.avatarColor = null;
}
}
if (bio !== undefined) {
if (bio && typeof bio === 'string') {
const trimmed = bio.trim();