feat: Implement core Discord clone functionality including Convex backend services for authentication, channels, messages, roles, and voice state, alongside new Electron frontend components for chat, voice, server settings, and user interface.

Frontend/Electron/src/components/ScreenShareModal.jsx

@@ -4,6 +4,7 @@ const ScreenShareModal = ({ onClose, onSelectSource }) => {
     const [activeTab, setActiveTab] = useState('applications'); // applications | screens | devices
     const [sources, setSources] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [shareAudio, setShareAudio] = useState(true);
 
     useEffect(() => {
         loadSources();
@@ -43,11 +44,11 @@ const ScreenShareModal = ({ onClose, onSelectSource }) => {
     };
 
     const handleSelect = (source) => {
-        // If device, pass constraints differently
+        // If device, pass constraints differently (webcams don't have loopback audio)
         if (source.isDevice) {
-             onSelectSource({ deviceId: source.id, type: 'device' });
+             onSelectSource({ deviceId: source.id, type: 'device', shareAudio: false });
         } else {
-             onSelectSource({ sourceId: source.id, type: 'screen' });
+             onSelectSource({ sourceId: source.id, type: 'screen', shareAudio });
         }
         onClose();
     };
@@ -210,6 +211,35 @@ const ScreenShareModal = ({ onClose, onSelectSource }) => {
                         renderGrid(sources[activeTab])
                     )}
                 </div>
+
+                {/* Audio sharing footer — hidden for device sources (webcams) */}
+                {activeTab !== 'devices' && (
+                    <div style={{
+                        borderTop: '1px solid #2f3136',
+                        padding: '12px 16px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexShrink: 0,
+                    }}>
+                        <label style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                            cursor: 'pointer',
+                            color: '#dcddde',
+                            fontSize: '14px',
+                            userSelect: 'none',
+                        }}>
+                            <input
+                                type="checkbox"
+                                checked={shareAudio}
+                                onChange={(e) => setShareAudio(e.target.checked)}
+                                style={{ accentColor: '#5865F2', width: '16px', height: '16px', cursor: 'pointer' }}
+                            />
+                            Also share computer audio
+                        </label>
+                    </div>
+                )}
             </div>
         </div>
     );