Промт из видео (Discord)
zenithAct as a Senior Game Developer and Software Architect, an absolute expert in HTML5, Canvas, JavaScript/TypeScript, React, and modern UI/UX development.
YOUR TASK:
Based on the detailed specifications below, write the GIGANTIC, FULLY FUNCTIONAL code for a complete, pixel-perfect Discord-like Multiplayer Game Hub & Chat Interface. This is not a simple mockup; it must include complex state management, interactive UI components, pixel-perfect styling, and all interactive overlays.
FILE STRUCTURE:
You must provide the code for a standard Vite + React + TypeScript project. Specifically, provide the full contents for:
src/App.tsx (The main application component containing all logic, state, and UI)
src/index.css (Tailwind imports and any custom CSS variables)
src/main.tsx (The React entry point)
package.json (Dependencies including lucide-react, socket.io-client, clsx, tailwind-merge)
DETAILED LOGIC & MECHANICS:
1. State Management (App Mechanics):
activeServer: Track the currently selected server (number | null).
activeChannel: Track the currently selected channel (string, e.g., 'general').
showMembers: Boolean to toggle the right-side member list.
inputValue: String for the chat input field.
messages: Array of message objects (id, user, time, text, reactions array).
tooltip: Object for hover tooltips (text, x, y, position).
contextMenu: Object for right-click menus (x, y, messageId).
profilePopout: Object for user profile popovers on click (x, y, user details, avatar, banner).
showSettings: Boolean to toggle the full-screen user settings modal.
activeSettingsTab: String to track the current tab in settings (e.g., 'My Account', 'Privacy & Safety').
privacySettings: Object for specific settings (e.g., dms: boolean).
2. UI/UX Components & Layout:
Global Layout: A full-screen flex container (h-screen w-full flex overflow-hidden bg-[#1E1F22] text-[#DBDEE1] font-sans).
Server Sidebar (Leftmost):
Width: 72px. Background: #1E1F22. Flex column, items centered, padding top 12px, gap 8px.
Server Icons: 48x48px.
Hover Effect: Background changes from #313338 to #5865F2, border-radius morphs from 50% (circle) to 16px (rounded square) using transition-all duration-200.
Active Indicator: A white pill shape on the left side (absolute positioning, width 4px, left -16px). Height is 8px on hover, 40px when active.
Content: Include a Discord home icon (Lucide Hash or custom), a separator line (h-[2px] w-8 bg-[#35363C] rounded), and multiple server icons.
Action Buttons: Add a Plus icon for 'Add a Server' (hover text #23A559, hover bg #23A559 with white icon) and a Compass icon for 'Explore Discoverable Servers' (hover bg #23A559).
Channel Sidebar (Second Column):
Width: 240px. Background: #2B2D31. Flex column.
Header: Height 48px. Server name with a ChevronDown icon. Hover effect: #35373C. Border-bottom: 1px solid #1F2023.
Channel List: Scrollable area. Categories (e.g., 'TEXT CHANNELS', 'VOICE CHANNELS') with a Plus icon on hover. Text is #949BA4, 12px, font-semibold.
Channels: Hash icon for text, Headphones or Speaker icon for voice. Active channel has background #404249 and white text. Inactive channels have text #949BA4 and hover background #35373C. Margin: mx-2, padding: px-2 py-1, border-radius: rounded.
User Controls (Bottom): Height 52px. Background #232428. Flex row, items centered, padding px-2. Shows user avatar (32x32px), username (#F2F3F5, 14px, font-semibold), and status (#B5BAC1, 12px). Includes Mic, Headphones, and Settings icons. Hover effects on icons (bg-[#35373C] rounded).
Main Chat Area (Center):
Flex-1. Background: #313338. Flex column.
Header: Height 48px. Border-bottom 1px solid #1F2023. Flex row, items centered, padding px-4. Channel name with Hash icon (#949BA4), description text (#949BA4, 14px).
Toolbar (Right side of Header): Bell, Pin, Users toggle (active state white, inactive #B5BAC1), Search bar (width 144px, background #1E1F22, text 14px, rounded), Inbox, HelpCircle.
Message Feed: Flex-1, scrollable area, padding px-4 py-6.
Messages: Flex row, margin-top 16px. Hover background #2E3035 (margin -mx-4 px-4 py-1).
Avatar: 40x40px, rounded-full, cursor-pointer.
Header: Username (color varies, e.g., #F2F3F5, hover underline), Timestamp (#949BA4, 12px, margin-left 8px).
Text: #DBDEE1, 16px, leading-relaxed.
Reactions: Small pill-shaped buttons with emoji and count. Background #2B2D31, border 1px solid #2B2D31, rounded. Hover background #35373C, border #5865F2.
Hover Toolbar: Appears on message hover at the top right of the message (absolute positioning, top -16px, right 16px). Contains Reply, Pencil (Edit), MoreHorizontal icons. Background #313338, border 1px solid #1E1F22, rounded-md, shadow-sm.
3. Member List Sidebar (Rightmost):
Width: 240px. Background: #2B2D31. Flex column, hidden if showMembers is false.
Categories: 'ONLINE — [count]' and 'OFFLINE — [count]'. Text #949BA4, 12px, font-semibold, uppercase.
Member Items: Height 44px. Hover background #35373C. Flex row, items centered, padding px-2.
Avatar: 32x32px, rounded-full. Online indicator (green circle #23A559 with border #2B2D31) or Offline indicator (gray circle #80848E). Offline avatars should be grayscale (grayscale class) and opacity 50%.
Name: #DBDEE1, 16px.
Hover Action: Show a Phone icon button on hover to initiate a call (only for other users, not self).
Click Action: Clicking a member opens the profilePopout.
4. Interactive Overlays & Modals:
Tooltips: Absolute positioned black boxes (#111214) with white text, rounded, with a small CSS triangle pointing to the trigger element. Appears on hover for almost all icon buttons.
Context Menu (Right Click): Absolute positioned menu (#111214). Options: 'Reply', 'Edit', 'Pin Message', 'Delete Message' (red text). Hover effects on items (bg-[#5865F2]).
Profile Popout: Absolute positioned card. Width 300px. Background #2B2D31.
Banner: Height 60px, color from user data (e.g., #5865F2).
Avatar: 80x80px, positioned overlapping the banner (-mt-10), with a thick border matching the background (border-[6px] border-[#2B2D31]).
Content: Username, discriminator (#1234), a separator line, and a "Message @user" input field.
Emoji/Reaction Picker: A popout grid of emojis. Clicking an emoji adds it to the input or adds a reaction to a message.
User Settings Modal: Full screen overlay (fixed inset-0 z-[100000] bg-[#313338]).
Left Sidebar: Width 218px, background #2B2D31. List of tabs ('My Account', 'Profiles', 'Privacy & Safety', etc.). Active tab has background #404249.
Right Content: Flex-2, background #313338.
'My Account' Tab: Shows a profile card (banner, avatar, name) and a list of editable fields (Display Name, Username, Email, Phone). Clicking 'Edit' opens a smaller editModal.
'Profiles' Tab: Inputs to change Avatar URL and Banner Color (Hex), with a live preview card on the right.
'Privacy & Safety' Tab: Toggle switches for 'Filter explicit images' and 'Allow direct messages'. Custom toggle UI (green for active, gray for inactive).
Close Button: Top right, an 'ESC' button with a circular border and cross icon.
Edit Modal: A smaller modal (w-[440px]) to edit specific fields (e.g., changing username).
Generic Modal: A simple alert/info modal with a title, description, and "Got it" button.
5. WebRTC Voice Calling Logic:
Implement real WebRTC logic using RTCPeerConnection and navigator.mediaDevices.getUserMedia.
States: callStatus ('calling', 'active', null), incomingCall (offer, from, callerName).
Incoming Call Modal: A prominent modal in the center of the screen showing the caller's name, a pulsing phone icon, and green (Accept) / red (Decline) buttons.
Active Call Overlay: A green bar (bg-[#23A559]) fixed at the top of the screen showing "Voice Connected" and a "Disconnect" button.
Include a hidden <audio ref={remoteAudioRef} autoPlay /> element to play the remote stream.
6. Socket.IO Integration (Mock or Real):
The code must include the logic for socket.io-client.
Events to handle: connect, join, users_update, message_history, receive_message, incoming_call, call_accepted, ice_candidate, call_ended.
Emits: update_profile, join, send_message, edit_message, delete_message, add_reaction, call_user, answer_call, ice_candidate, end_call.
Crucial: If the socket connection fails (e.g., no backend), the UI must still function using local React state as a fallback (e.g., adding messages to the local array).
7. Message Input Area:
Background #383A40, rounded-lg.
Left side: A Plus icon button for attachments (background #B5BAC1, icon color #383A40).
Input field: Transparent background, text #DBDEE1.
Right side: Icons for Gift, GIF, Sticker, Emoji.
Replying State: If replyingTo is set, show a bar above the input (bg-[#2B2D31]) saying "Replying to [User]" with a close button. The input area should become rounded-b-lg instead of fully rounded.
STRICT REQUIREMENTS FOR YOUR OUTPUT:
WRITE THE ENTIRE CODE. Do not use placeholders like // ...rest of the code... or // implement logic here. I need the full, copy-pasteable file.
NO EXTERNAL ASSETS REQUIRED. Use https://picsum.photos/seed/... for avatars and server icons. Use Lucide-react for all UI icons.
READY TO RUN. The code must be completely bug-free, with all variables declared, all TypeScript interfaces/types inferred or defined, and all logic completed.
PIXEL PERFECT. Pay extreme attention to the exact hex colors (#1E1F22, #2B2D31, #313338, #5865F2, etc.), padding, margins, border radii (rounded-[16px], rounded-[24px]), and hover transitions.
SINGLE FILE PREFERRED. If possible, put the entire React component logic into one massive App.tsx file to make it easy to test.
Features Implemented:
Pixel-Perfect UI: A complete replication of the Discord interface, including the Server Sidebar, Channel Sidebar, Main Chat Area, and Member List, using exact colors and spacing.
Real-Time Chat: Fully functional messaging with Socket.IO, including message history, editing, deleting, and reactions.
WebRTC Voice Calling: Real peer-to-peer voice calling with "Incoming Call" modals and an "Active Call" overlay.
User Settings: A comprehensive settings modal with tabs for "My Account" (editable profile fields), "Profiles" (avatar/banner customization), and "Privacy & Safety".
Interactive Elements:
Context Menus: Right-click on messages to Reply, Edit, Pin, or Delete.
Profile Popouts: Click on any user avatar to see their profile card and send a message.
Tooltips: Hover over icons to see descriptive tooltips.
Emoji Picker: A functional emoji picker for adding reactions or typing emojis.
Current State of Placeholders:
"Create a Server" & "Explore": These buttons currently open a generic modal with a description. They are ready to be expanded into full forms if you wish.
"Call User" (Multiple Users): The logic handles 1-on-1 calls perfectly. For group calls, the UI is set up, but the backend logic would need expansion.
You must generate the code for the following file structure:
- `/src/types.ts`: All TypeScript interfaces (User, Message, Channel, etc.).
- `/src/hooks/useSocket.ts`: Custom hook for Socket.IO connection and event handling.
- `/src/hooks/useWebRTC.ts`: Custom hook for WebRTC voice calling logic.
- `/src/components/Sidebar.tsx`: The left-most server list sidebar.
- `/src/components/ChannelList.tsx`: The secondary sidebar with channels and user controls.
- `/src/components/ChatArea.tsx`: The main chat view, including the header, message list, and input area.
- `/src/components/MemberList.tsx`: The right sidebar with online/offline members.
- `/src/components/modals/UserSettings.tsx`: The full-screen user settings modal.
- `/src/components/modals/IncomingCallModal.tsx`: The incoming call popup.
- `/src/components/popouts/ProfilePopout.tsx`: The user profile card popout.
- `/src/App.tsx`: The main entry point that composes these components.