fix: repair invite links, social features, messaging + Discord UI overhaul

Phase 1 - Feature Repair:
- Fix member kick/leave: add missing db.delete() call in servers.ts
- Stabilize invite codes: return existing code instead of regenerating
- Fix user search: use LIKE instead of exact match in social.ts
- Wire DM button on FriendsPage to create/navigate to DM channels
- Add cancel outgoing friend request (DELETE endpoint + frontend)
- Add accept/decline friend request actions with WS real-time events
- Fix replyToId persistence in message creation
- Hydrate reactions and replyTo in message queries
- Add joinByCode to API client and serverStore
- Add friend_request_received/accepted WebSocket events

Phase 2 - Discord UI Overhaul:
- Remove stray borders between layout columns
- Replace shadow-sm with shadow-header on content headers
- Replace all bg-gray-*/text-gray-* with Discord color tokens
- Ensure flat color contrast (#1E1F22, #2B2D31, #313338)

Testing:
- Set up vitest + @testing-library/react + jsdom
- Add 17 tests across InviteModal, JoinServer, FriendsPage (all passing)
- Fix vite resolve.extensions to prefer .tsx over stale .js files

packages/web/src/components/layout/MemberSidebar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { MemberWithUser } from '@opencord/shared';
 import { useServerStore } from '../../stores/serverStore';
 import { useUIStore } from '../../stores/uiStore';
 import { Avatar } from '../ui/Avatar';
@@ -6,6 +7,7 @@ import { Avatar } from '../ui/Avatar';
 export function MemberSidebar() {
   const members = useServerStore((s) => s.members);
   const memberListOpen = useUIStore((s) => s.memberListOpen);
+  const openUserProfile = useUIStore((s) => s.openUserProfile);
 
   if (!memberListOpen) return null;
 
@@ -18,8 +20,25 @@ export function MemberSidebar() {
     member: 'text-discord-text-primary',
   };
 
+  const getMemberColor = (member: MemberWithUser) => {
+    if (member.roles && member.roles.length > 0) {
+      // Return the color of the first role (already sorted by position)
+      return { color: member.roles[0]!.color };
+    }
+    return undefined;
+  };
+
+  const handleMemberClick = (e: React.MouseEvent, user: any) => {
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    openUserProfile(user, {
+      top: Math.min(rect.top, window.innerHeight - 450),
+      left: rect.left - 316, // Open to the left of member sidebar
+    });
+  };
+
   return (
-    <div className="w-60 bg-discord-bg-members flex-shrink-0 overflow-y-auto">
+    <div className="w-60 bg-discord-bg-members flex-shrink-0 overflow-y-auto select-none no-scrollbar">
       <div className="p-3">
         {/* Online */}
         {onlineMembers.length > 0 && (
@@ -32,7 +51,8 @@ export function MemberSidebar() {
               return (
                 <div
                   key={member.userId}
-                  className="flex items-center gap-3 px-2 py-1.5 rounded hover:bg-discord-bg-hover cursor-pointer group"
+                  onClick={(e) => handleMemberClick(e, member.user)}
+                  className="flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-discord-modifier-hover cursor-pointer group transition-colors"
                 >
                   <Avatar
                     src={member.user.avatar}
@@ -41,11 +61,14 @@ export function MemberSidebar() {
                     status={member.user.status}
                   />
                   <div className="flex-1 min-w-0">
-                    <div className={`text-sm font-medium truncate ${roleColors[member.role] ?? 'text-discord-text-primary'}`}>
+                    <div 
+                      className={`text-[15px] font-medium truncate ${!getMemberColor(member) ? (roleColors[member.role] ?? 'text-discord-text-primary') : ''}`}
+                      style={getMemberColor(member)}
+                    >
                       {displayName}
                     </div>
                     {member.user.customStatus && (
-                      <div className="text-xs text-discord-text-muted truncate">{member.user.customStatus}</div>
+                      <div className="text-[12px] text-discord-text-muted truncate">{member.user.customStatus}</div>
                     )}
                   </div>
                 </div>
@@ -65,16 +88,18 @@ export function MemberSidebar() {
               return (
                 <div
                   key={member.userId}
-                  className="flex items-center gap-3 px-2 py-1.5 rounded hover:bg-discord-bg-hover cursor-pointer group opacity-50"
+                  onClick={(e) => handleMemberClick(e, member.user)}
+                  className="flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-discord-modifier-hover cursor-pointer group transition-colors"
                 >
                   <Avatar
                     src={member.user.avatar}
                     name={displayName}
                     size={32}
                     status="offline"
+                    className="opacity-60"
                   />
                   <div className="flex-1 min-w-0">
-                    <div className="text-sm font-medium truncate text-discord-text-muted">
+                    <div className="text-[15px] font-medium truncate text-discord-text-muted">
                       {displayName}
                     </div>
                   </div>