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
+6
View File
@@ -1,5 +1,8 @@
// ─── User Types ─────────────────────────────────────────────────────────────
export const AVATAR_COLORS = ['mint', 'sky', 'lavender', 'coral', 'rose', 'teal', 'amber'] as const;
export type AvatarColor = (typeof AVATAR_COLORS)[number];
export interface User {
id: string;
username: string;
@@ -7,6 +10,7 @@ export interface User {
avatar: string | null;
banner: string | null;
accentColor: string | null;
avatarColor: AvatarColor | null;
bio: string | null;
status: UserStatus;
customStatus: string | null;
@@ -345,6 +349,7 @@ export interface UpdateUserRequest {
avatar?: string;
banner?: string;
accentColor?: string;
avatarColor?: string;
bio?: string;
customStatus?: string;
status?: UserStatus;
@@ -412,6 +417,7 @@ export interface Friend {
avatar: string | null;
banner: string | null;
accentColor: string | null;
avatarColor: AvatarColor | null;
bio: string | null;
status: UserStatus;
customStatus: string | null;