feat: Introduce core sidebar component with user controls, voice state management, and update banner.

Frontend/Electron/src/components/Sidebar.jsx

@@ -827,7 +827,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
         return (
             <div style={{ marginLeft: 32, marginBottom: 8 }}>
                 {users.map(user => (
-                    <div key={user.userId} style={{ display: 'flex', alignItems: 'center', marginBottom: 4 }}>
+                    <div key={user.userId} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                         <Avatar
                             username={user.username}
                             size={24}
@@ -837,7 +837,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
                             }}
                         />
                         <span style={{ color: 'var(--header-secondary)', fontSize: 14 }}>{user.username}</span>
-                        <div style={{ display: 'flex', marginLeft: 'auto', gap: 4, alignItems: 'center' }}>
+                        <div style={{ display: 'flex', marginLeft: 'auto', gap: 4, alignItems: 'center', marginRight: "16px" }}>
                             {user.isScreenSharing && <div style={liveBadgeStyle}>Live</div>}
                             {(user.isMuted || user.isDeafened) && (
                                 <ColoredIcon src={mutedIcon} color="var(--header-secondary)" size="14px" />

Frontend/Electron/src/components/UpdateBanner.jsx

@@ -93,3 +93,4 @@ export function TitleBarUpdateIcon() {
         </button>
     );
 }
+    

convex/voiceState.ts

@@ -85,15 +85,23 @@ export const getAll = query({
       isMuted: boolean;
       isDeafened: boolean;
       isScreenSharing: boolean;
+      avatarUrl: string | null;
     }>> = {};
 
     for (const s of states) {
+      const user = await ctx.db.get(s.userId);
+      let avatarUrl: string | null = null;
+      if (user?.avatarStorageId) {
+        avatarUrl = await ctx.storage.getUrl(user.avatarStorageId);
+      }
+
       (grouped[s.channelId] ??= []).push({
         userId: s.userId,
         username: s.username,
         isMuted: s.isMuted,
         isDeafened: s.isDeafened,
         isScreenSharing: s.isScreenSharing,
+        avatarUrl,
       });
     }