feat: two-step registration with avatar/color picker, fix focus ring clipping

Refactor RegisterPage into a two-step flow: credentials first, then
personalization (display name, avatar upload, avatar color). Replace the
dual-panel sliding layout with conditional rendering and CSS keyframe
animations to eliminate overflow-hidden clipping of focus rings.

Supporting changes:
- Server accepts avatarColor on registration
- Auth store resets all user-scoped stores on login/register/logout
- Voice store gains resetSession() for full session cleanup
- Sync presence status to federated instances
- Propagate presence_update to socialStore regardless of origin

packages/web/src/hooks/useWebSocket.ts

@@ -305,9 +305,7 @@ function handleEvent(origin: string, event: ServerEvent): void {
 
     case 'presence_update':
       updateMemberPresence(event.userId, event.status);
-      if (isHome) {
-        useSocialStore.getState().updateFriendPresence(event.userId, event.status);
-      }
+      useSocialStore.getState().updateFriendPresence(event.userId, event.status);
       break;
 
     case 'user_updated': {