feat: Implement core chat application UI, including chat, voice, members, DMs, and shared components.

packages/shared/src/components/FriendsView.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useQuery } from 'convex/react';
 import { api } from '../../../../convex/_generated/api';
 import Avatar from './Avatar';
+import ColoredIcon from './ColoredIcon';
 import { useOnlineUsers } from '../contexts/PresenceContext';
 import friendsIcon from '../assets/icons/friends.svg';
 
@@ -54,26 +55,7 @@ const FriendsView = ({ onOpenDM }) => {
             }}>
                 <div style={{ display: 'flex', alignItems: 'center', marginRight: '16px', paddingRight: '16px', borderRight: '1px solid var(--border-subtle)' }}>
                     <div style={{ marginRight: '12px' }}>
-                        <div style={{
-                            width: 24,
-                            height: 24,
-                            overflow: 'hidden',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            flexShrink: 0
-                        }}>
-                            <img
-                                src={friendsIcon}
-                                alt=""
-                                style={{
-                                    width: 24,
-                                    height: 24,
-                                    transform: 'translateX(-1000px)',
-                                    filter: `drop-shadow(1000px 0 0 var(--interactive-normal))`
-                                }}
-                            />
-                        </div>
+                        <ColoredIcon src={friendsIcon} color="var(--interactive-normal)" size="24px" />
                     </div>
                      Friends
                 </div>