new file: FEATURES-ROADMAP.md
This commit is contained in:
GitHub
parent
770d0e38ec
commit
f14765f47c
177 changed files with 23097 additions and 5237 deletions
809
FEATURES-ROADMAP.md
Normal file
809
FEATURES-ROADMAP.md
Normal file
|
|
@ -0,0 +1,809 @@
|
|||
# AeThex-Connect Complete Features Roadmap
|
||||
|
||||
**Current Status:** 40% Complete (UI + Basic Functionality)
|
||||
**Target:** 100% Feature Parity with Discord Clone + Blockchain Integration
|
||||
|
||||
---
|
||||
|
||||
## PHASE 1: CORE FEATURES (15 hours) - ESSENTIAL
|
||||
|
||||
### 1.1 Message System
|
||||
- [ ] **Emoji Reactions** (30 min)
|
||||
- Add emoji picker button next to messages
|
||||
- Click emoji to toggle reaction
|
||||
- Show reaction count badge
|
||||
- Remove reaction on second click
|
||||
- Files: `MessageInput.jsx`, `Message.jsx`, add emoji-picker lib
|
||||
|
||||
- [ ] **File Uploads** (1 hour)
|
||||
- Wire UploadThing to message input
|
||||
- Preview uploaded files before sending
|
||||
- Display file attachments in messages
|
||||
- Support images, PDFs, documents
|
||||
- Files: `FileUploadModal.jsx`, `Message.jsx`
|
||||
|
||||
- [ ] **Message Timestamps** (15 min)
|
||||
- Show human-readable timestamps
|
||||
- Format: "Today 2:34 PM" / "Yesterday" / "Mon 3/1"
|
||||
- Hover to show exact datetime
|
||||
- Files: `Message.jsx`, utility function
|
||||
|
||||
- [ ] **Message Search** (2 hours)
|
||||
- Add search bar in header
|
||||
- Filter messages by keyword
|
||||
- Highlight search results
|
||||
- Show result count
|
||||
- Files: `ChatAreaHeader.jsx`, add searchStore
|
||||
|
||||
- [ ] **Typing Indicators** (1 hour)
|
||||
- Show "User is typing..." when someone types
|
||||
- Hide after 3 seconds of inactivity
|
||||
- Multiple typists support
|
||||
- Files: `ChatArea.jsx`, add typingStore
|
||||
|
||||
### 1.2 Channel Management
|
||||
- [ ] **Edit/Delete Channels** (1 hour)
|
||||
- Edit channel name & description
|
||||
- Delete channel with confirmation
|
||||
- Move channels between categories
|
||||
- Files: `ChannelSidebar.jsx`, extend channelStore
|
||||
|
||||
- [ ] **Channel Topics/Descriptions** (30 min)
|
||||
- Show channel description in header
|
||||
- Update channel topic
|
||||
- Store in channelStore
|
||||
- Files: `ChatAreaHeader.jsx`
|
||||
|
||||
- [ ] **Mute/Archive Channels** (30 min)
|
||||
- Mute notifications from channel
|
||||
- Archive channel (hide from list)
|
||||
- Visual indicator for muted channels
|
||||
- Files: `ChannelSidebar.jsx`, extend channelStore
|
||||
|
||||
### 1.3 Member System
|
||||
- [ ] **User Profiles** (1 hour)
|
||||
- Click member name → profile modal
|
||||
- Show username, avatar, status, joined date
|
||||
- Display user activity/game
|
||||
- Add friend button (prep for later)
|
||||
- Files: `UserProfileModal.jsx`, `Member.jsx`
|
||||
|
||||
- [ ] **Member Status Indicator** (30 min)
|
||||
- Show online/offline/away/dnd status
|
||||
- Live update presence
|
||||
- Status badge on avatars
|
||||
- Filter by status
|
||||
- Files: `MemberSidebar.jsx`, extend memberStore
|
||||
|
||||
- [ ] **Member Sorting** (30 min)
|
||||
- Sort by online status
|
||||
- Sort by role (Admin → Mod → Member)
|
||||
- Sort alphabetically
|
||||
- Files: `MemberSidebar.jsx`
|
||||
|
||||
### 1.4 User Interface Polish
|
||||
- [ ] **Hover Effects** (30 min)
|
||||
- Add hover delete/edit buttons (DONE but needs refinement)
|
||||
- Hover color changes
|
||||
- Smooth transitions
|
||||
- Files: CSS updates
|
||||
|
||||
- [ ] **Loading States** (30 min)
|
||||
- Show spinners while loading channels
|
||||
- Show loading skeleton for messages
|
||||
- Disable buttons while loading
|
||||
- Files: Add to components
|
||||
|
||||
- [ ] **Error States** (30 min)
|
||||
- Handle network errors gracefully
|
||||
- Show error toast messages
|
||||
- Retry buttons
|
||||
- Files: Add error handling
|
||||
|
||||
---
|
||||
|
||||
## PHASE 2: ADVANCED MESSAGING (12 hours) - HIGH PRIORITY
|
||||
|
||||
### 2.1 Message Threading
|
||||
- [ ] **Message Threads** (2 hours)
|
||||
- Right-click message → "Reply in Thread"
|
||||
- Show thread badge with reply count
|
||||
- Thread modal/sidebar view
|
||||
- Nested conversation view
|
||||
- Files: `ThreadModal.jsx`, update messageStore
|
||||
|
||||
- [ ] **Thread Notifications** (30 min)
|
||||
- Notify when thread gets new reply
|
||||
- Show unread thread count
|
||||
- Mark thread as read
|
||||
|
||||
- [ ] **Thread Sorting** (15 min)
|
||||
- Sort threads by newest/oldest
|
||||
- Show last reply time
|
||||
|
||||
### 2.2 Rich Text & Formatting
|
||||
- [ ] **Bold/Italic/Underline** (1 hour)
|
||||
- Markdown support (**bold**, *italic*, __underline__)
|
||||
- Toolbar buttons in message input
|
||||
- Preview formatting
|
||||
- Files: `MessageInput.jsx`, add rich-text lib
|
||||
|
||||
- [ ] **Code Blocks** (1 hour)
|
||||
- Syntax highlighting for code
|
||||
- Language detection
|
||||
- Copy code button
|
||||
- Files: `Message.jsx`, add syntax-highlighter lib
|
||||
|
||||
- [ ] **Links & Embeds** (1 hour)
|
||||
- Auto-linkify URLs
|
||||
- Show link preview cards
|
||||
- Embed YouTube, Twitter, etc.
|
||||
- Files: `Message.jsx`
|
||||
|
||||
- [ ] **Mentions & Markdown** (1 hour)
|
||||
- @mention autocomplete
|
||||
- #channel mentions
|
||||
- Full markdown support (headers, quotes, lists)
|
||||
- Files: `MessageInput.jsx`, add mention autocomplete
|
||||
|
||||
### 2.3 Message Actions
|
||||
- [ ] **Message Pins** (1 hour)
|
||||
- Pin important messages
|
||||
- Show pinned messages in header dropdown
|
||||
- Unpin messages
|
||||
- Files: `ChatAreaHeader.jsx`, extend messageStore
|
||||
|
||||
- [ ] **Message Bookmarks** (1 hour)
|
||||
- Bookmark messages for later
|
||||
- View bookmarked messages
|
||||
- Remove bookmarks
|
||||
- Files: Add bookmarkStore
|
||||
|
||||
- [ ] **Quote Messages** (30 min)
|
||||
- Reply to specific message with quote
|
||||
- Show original message context
|
||||
- Files: `Message.jsx`, `MessageInput.jsx`
|
||||
|
||||
---
|
||||
|
||||
## PHASE 3: PERMISSIONS & ROLES (10 hours) - IMPORTANT
|
||||
|
||||
### 3.1 Role System
|
||||
- [ ] **Create Custom Roles** (1.5 hours)
|
||||
- Create new roles beyond Admin/Mod/Member
|
||||
- Set role colors
|
||||
- Drag to reorder role hierarchy
|
||||
- Files: `RoleManagementModal.jsx`, add roleStore
|
||||
|
||||
- [ ] **Role Permissions Matrix** (2 hours)
|
||||
- Toggle permissions per role:
|
||||
- Send messages
|
||||
- Edit own messages
|
||||
- Delete any message
|
||||
- Manage channels
|
||||
- Manage roles
|
||||
- Kick members
|
||||
- Ban members
|
||||
- Store in roleStore
|
||||
- Files: `PermissionsModal.jsx`
|
||||
|
||||
### 3.2 Channel Permissions
|
||||
- [ ] **Channel Permission Overrides** (2 hours)
|
||||
- Override server-wide permissions per channel
|
||||
- Restrict roles from viewing channel
|
||||
- Set who can speak in voice channels
|
||||
- Files: `ChannelPermissionsModal.jsx`
|
||||
|
||||
- [ ] **Private Channels** (1 hour)
|
||||
- Restrict channel visibility by role
|
||||
- "Only visible to admins" etc.
|
||||
- Files: `ChannelSidebar.jsx`
|
||||
|
||||
### 3.3 Moderation
|
||||
- [ ] **Ban System** (1 hour)
|
||||
- Ban members (can't rejoin)
|
||||
- Ban list management
|
||||
- Temp bans with expiry
|
||||
- Files: `MemberSidebar.jsx`, extend memberStore
|
||||
|
||||
- [ ] **Mute System** (1 hour)
|
||||
- Mute members (can't send messages)
|
||||
- Show muted badge
|
||||
- Mute duration settings
|
||||
- Files: extend memberStore
|
||||
|
||||
---
|
||||
|
||||
## PHASE 4: DIRECT MESSAGING (8 hours) - NICE TO HAVE
|
||||
|
||||
### 4.1 DM System
|
||||
- [ ] **Direct Messages** (2 hours)
|
||||
- Open DM with any member
|
||||
- DM sidebar showing conversations
|
||||
- DM notifications
|
||||
- Files: `DMSidebar.jsx`, add dmStore
|
||||
|
||||
- [ ] **Group DMs** (1.5 hours)
|
||||
- Create group conversation
|
||||
- Add/remove people from group
|
||||
- Group name & avatar
|
||||
- Files: DM system expansion
|
||||
|
||||
- [ ] **DM Notifications** (30 min)
|
||||
- Badge showing unread DMs
|
||||
- Mention notifications
|
||||
- Sound/desktop notifications (prep)
|
||||
|
||||
### 4.2 Message Requests
|
||||
- [ ] **DM Requests** (1 hour)
|
||||
- Strangers' DMs go to "Requests"
|
||||
- Accept/decline requests
|
||||
- Block users
|
||||
- Files: add requestStore
|
||||
|
||||
---
|
||||
|
||||
## PHASE 5: INVITE & ONBOARDING (6 hours) - COMMUNITY
|
||||
|
||||
### 5.1 Invite System
|
||||
- [ ] **Generate Invite Links** (1 hour)
|
||||
- Create invite with expiry
|
||||
- Set max uses
|
||||
- Different link per invite
|
||||
- Track invite source
|
||||
- Files: `InviteModal.jsx`, add inviteStore
|
||||
|
||||
- [ ] **Invite Management** (1 hour)
|
||||
- Revoke invites
|
||||
- See who joined via invite
|
||||
- Edit invite settings
|
||||
- Files: `InviteManagementModal.jsx`
|
||||
|
||||
- [ ] **Accept Invites** (1 hour)
|
||||
- Join server via invite link
|
||||
- Auto-role assignment
|
||||
- Welcome message
|
||||
- Files: add route for `/invite/:code`
|
||||
|
||||
### 5.2 Welcome
|
||||
- [ ] **Welcome Channel** (1 hour)
|
||||
- Auto-create #welcome channel
|
||||
- Post welcome message
|
||||
- Quick onboarding questionnaire
|
||||
- Files: server setup logic
|
||||
|
||||
- [ ] **New Member Questions** (1 hour)
|
||||
- Show modal on first join
|
||||
- Collect info about member
|
||||
- Use for welcome message
|
||||
- Files: `OnboardingModal.jsx`
|
||||
|
||||
---
|
||||
|
||||
## PHASE 6: VOICE & VIDEO (12 hours) - COMPETITIVE ADVANTAGE
|
||||
|
||||
### 6.1 Voice Channels
|
||||
- [ ] **Replace WebRTC with LiveKit** (3 hours)
|
||||
- Remove simple-peer dependency
|
||||
- Install @livekit/components-react
|
||||
- Basic voice room setup
|
||||
- Join/leave voice
|
||||
- Files: Major refactor, `VoiceChannel.jsx`
|
||||
|
||||
- [ ] **Voice Channel UI** (2 hours)
|
||||
- Show connected users
|
||||
- Mic/speaker toggle
|
||||
- Volume control
|
||||
- Mute other users
|
||||
- Files: `VoiceControlBar.jsx`
|
||||
|
||||
- [ ] **Voice Notifications** (1 hour)
|
||||
- Notify when someone joins voice
|
||||
- Play join/leave sounds
|
||||
- Show duration connected
|
||||
- Files: Add notifications
|
||||
|
||||
### 6.2 Video Calls
|
||||
- [ ] **Video Channel Support** (2 hours)
|
||||
- Enable video in voice channels
|
||||
- Grid/gallery view
|
||||
- Camera toggle
|
||||
- Speaker view
|
||||
- Files: `VideoGrid.jsx`, `VideoTile.jsx`
|
||||
|
||||
- [ ] **Screen Share** (2 hours)
|
||||
- Share screen with audio
|
||||
- Pause/resume screen share
|
||||
- Show screen sharer indicator
|
||||
- Files: `ScreenShareButton.jsx`
|
||||
|
||||
- [ ] **Recording** (1 hour)
|
||||
- Record voice/video
|
||||
- Download recordings
|
||||
- Store in cloud (optional)
|
||||
- Files: integration with backend
|
||||
|
||||
### 6.3 Voice Settings
|
||||
- [ ] **Audio Input/Output** (1 hour)
|
||||
- Select mic/speaker device
|
||||
- Test audio before joining
|
||||
- Audio level indicator
|
||||
- Files: `AudioSettings.jsx`
|
||||
|
||||
- [ ] **Echo Cancellation** (1 hour)
|
||||
- Reduce echo/feedback
|
||||
- Noise suppression
|
||||
- Auto gain control
|
||||
- Files: LiveKit config
|
||||
|
||||
---
|
||||
|
||||
## PHASE 7: BACKEND INTEGRATION (15 hours) - CRITICAL
|
||||
|
||||
### 7.1 Authentication
|
||||
- [ ] **Connection to Auth Endpoints** (2 hours)
|
||||
- Connect demo login to backend
|
||||
- Real login/register
|
||||
- JWT token handling
|
||||
- Session persistence
|
||||
- Files: Update AeThexProvider
|
||||
|
||||
- [ ] **Multi-Method Auth** (1 hour)
|
||||
- Password login
|
||||
- OAuth (Google/GitHub/Clerk)
|
||||
- Blockchain wallet login
|
||||
- Files: Add auth methods
|
||||
|
||||
### 7.2 Database Sync
|
||||
- [ ] **Fetch Real Channels** (1 hour)
|
||||
- Load channels from Supabase
|
||||
- Store in channelStore
|
||||
- Refresh on join
|
||||
- Files: Add API calls
|
||||
|
||||
- [ ] **Fetch Real Messages** (2 hours)
|
||||
- Load messages from API
|
||||
- Pagination/infinite scroll
|
||||
- Cache management
|
||||
- Real-time Socket.IO updates
|
||||
- Files: Update ChatArea
|
||||
|
||||
- [ ] **Save Messages** (1 hour)
|
||||
- POST message to backend
|
||||
- Handle optimistic updates
|
||||
- Retry on failure
|
||||
- Files: Update messageStore
|
||||
|
||||
- [ ] **Sync Member List** (1 hour)
|
||||
- Load server members from DB
|
||||
- Update on join/leave
|
||||
- Real-time presence via Socket.IO
|
||||
- Files: Update memberStore
|
||||
|
||||
### 7.3 Real-time Updates
|
||||
- [ ] **Socket.IO Integration** (3 hours)
|
||||
- Connect to Socket.IO server
|
||||
- Listen for new messages
|
||||
- Listen for member joins/leaves
|
||||
- Listen for typing indicators
|
||||
- Files: Create socketService.jsx
|
||||
|
||||
- [ ] **Optimistic Updates** (2 hours)
|
||||
- Show message immediately
|
||||
- Rollback if fails
|
||||
- Show loading state
|
||||
- Handle conflicts
|
||||
- Files: Update messageStore
|
||||
|
||||
- [ ] **Conflict Resolution** (1 hour)
|
||||
- Handle simultaneous edits
|
||||
- Show version conflicts
|
||||
- Last-write-wins logic
|
||||
- Files: Add conflictStore
|
||||
|
||||
### 7.4 File Storage
|
||||
- [ ] **UploadThing Integration** (1.5 hours)
|
||||
- Wire file uploads to UploadThing API
|
||||
- Show upload progress
|
||||
- Handle upload errors
|
||||
- Get file URL
|
||||
- Files: `FileUploadModal.jsx`
|
||||
|
||||
- [ ] **File Deletion** (30 min)
|
||||
- Delete files from UploadThing
|
||||
- Clean up on message delete
|
||||
- Files: Add to backend
|
||||
|
||||
---
|
||||
|
||||
## PHASE 8: NOTIFICATIONS (6 hours) - ENGAGEMENT
|
||||
|
||||
### 8.1 In-App Notifications
|
||||
- [ ] **Toast Notifications** (1 hour)
|
||||
- Show temporary messages
|
||||
- Auto-dismiss
|
||||
- Different colors for types
|
||||
- Files: Create `Toast.jsx`, `useToast.js`
|
||||
|
||||
- [ ] **Mention Notifications** (1 hour)
|
||||
- Badge when @mentioned
|
||||
- Highlight in chat
|
||||
- Jump to mention context
|
||||
- Files: Add notificationStore
|
||||
|
||||
- [ ] **Channel Activity Badges** (30 min)
|
||||
- Show unread count on channels
|
||||
- Mark as read on view
|
||||
- Files: extend channelStore
|
||||
|
||||
### 8.2 System Notifications
|
||||
- [ ] **Desktop Notifications** (1.5 hours)
|
||||
- Request permission
|
||||
- Show mentions as desktop notifications
|
||||
- Show DMs as desktop notifications
|
||||
- Click to jump to message
|
||||
- Files: Add notificationService.js
|
||||
|
||||
- [ ] **Sound Notifications** (1 hour)
|
||||
- Play sound for mentions
|
||||
- Play sound for DMs
|
||||
- Mute global sound
|
||||
- Per-channel sound settings
|
||||
- Files: Add audioNotifications.js
|
||||
|
||||
---
|
||||
|
||||
## PHASE 9: SETTINGS & PERSONALIZATION (8 hours) - UX
|
||||
|
||||
### 9.1 User Settings
|
||||
- [ ] **Profile Settings** (1 hour)
|
||||
- Edit username
|
||||
- Upload custom avatar
|
||||
- Set custom status/bio
|
||||
- Visibility settings
|
||||
- Files: `UserSettingsModal.jsx`
|
||||
|
||||
- [ ] **Privacy Settings** (1 hour)
|
||||
- DM privacy (who can DM)
|
||||
- Show online status
|
||||
- Show activity status
|
||||
- Block list management
|
||||
- Files: `PrivacySettingsModal.jsx`
|
||||
|
||||
- [ ] **Notification Settings** (1 hour)
|
||||
- Mute server/channel
|
||||
- Notification types per channel
|
||||
- Time mute (do not disturb)
|
||||
- Keywords that notify
|
||||
- Files: `NotificationSettingsModal.jsx`
|
||||
|
||||
### 9.2 Server Settings
|
||||
- [ ] **Server General Settings** (1.5 hours)
|
||||
- Edit server name
|
||||
- Upload server icon
|
||||
- Change server region
|
||||
- Default notification level
|
||||
- Files: `ServerSettingsModal.jsx`
|
||||
|
||||
- [ ] **Server Audit Log** (1 hour)
|
||||
- Show who did what
|
||||
- Filter by action/person
|
||||
- Export audit log
|
||||
- Files: `AuditLogModal.jsx`
|
||||
|
||||
- [ ] **Backup/Import** (1 hour)
|
||||
- Export server data
|
||||
- Import settings
|
||||
- Clone channel structure
|
||||
- Files: Add export/import logic
|
||||
|
||||
### 9.3 Theme & Display
|
||||
- [ ] **Dark/Light Theme** (1 hour)
|
||||
- Toggle dark/light mode
|
||||
- Persist preference
|
||||
- Match system preference
|
||||
- Files: Create `ThemeProvider.jsx`
|
||||
|
||||
- [ ] **Custom Colors** (1 hour)
|
||||
- Accent color picker
|
||||
- Custom brand colors
|
||||
- Save theme presets
|
||||
- Files: extend themeStore
|
||||
|
||||
- [ ] **Zoom/Font Size** (30 min)
|
||||
- Adjust UI scale
|
||||
- Adjust text size
|
||||
- Adjust message density
|
||||
- Files: Add scale settings
|
||||
|
||||
---
|
||||
|
||||
## PHASE 10: ADVANCED FEATURES (10 hours) - POLISH
|
||||
|
||||
### 10.1 Search & Discovery
|
||||
- [ ] **Advanced Message Search** (1.5 hours)
|
||||
- Search by author
|
||||
- Search by date range
|
||||
- Search by file type
|
||||
- Save searches
|
||||
- Files: Extend search UI
|
||||
|
||||
- [ ] **Server Directory** (1 hour)
|
||||
- Browse public servers
|
||||
- Search by category/name
|
||||
- Show member count
|
||||
- Quick join
|
||||
- Files: `ServerDirectory.jsx`
|
||||
|
||||
### 10.2 Integrations
|
||||
- [ ] **Webhook Support** (1.5 hours)
|
||||
- Create webhooks
|
||||
- Post via webhooks
|
||||
- Delete webhooks
|
||||
- Test webhook
|
||||
- Files: `WebhookModal.jsx`
|
||||
|
||||
- [ ] **Bot Commands** (1.5 hours)
|
||||
- Command parser
|
||||
- Bot command registry
|
||||
- Help command
|
||||
- Admin commands
|
||||
- Files: Add commandService.js
|
||||
|
||||
### 10.3 Analytics & Admin
|
||||
- [ ] **Server Stats Dashboard** (1.5 hours)
|
||||
- Member growth chart
|
||||
- Message activity chart
|
||||
- Most active channels
|
||||
- Most active members
|
||||
- Files: `StatsModal.jsx`
|
||||
|
||||
- [ ] **Moderation Dashboard** (1.5 hours)
|
||||
- View reported messages
|
||||
- Approve/reject reports
|
||||
- Ban/mute history
|
||||
- Action logs
|
||||
- Files: `ModerationPanel.jsx`
|
||||
|
||||
### 10.4 Export & Reporting
|
||||
- [ ] **Message Export** (1 hour)
|
||||
- Export channel as JSON/CSV
|
||||
- Export with attachments
|
||||
- Download as HTML report
|
||||
- Files: Add exportService.js
|
||||
|
||||
- [ ] **User Reports** (1 hour)
|
||||
- Report message
|
||||
- Report user
|
||||
- View submissions
|
||||
- Admin panel for reports
|
||||
- Files: `ReportModal.jsx`
|
||||
|
||||
---
|
||||
|
||||
## PHASE 11: MONETIZATION (6 hours) - REVENUE
|
||||
|
||||
### 11.1 Premium Features
|
||||
- [ ] **Premium Tiers** (1 hour)
|
||||
- Free tier
|
||||
- Premium tier ($4.99/mo)
|
||||
- Pro tier ($9.99/mo)
|
||||
- Define features per tier
|
||||
- Files: Add subscriptionStore
|
||||
|
||||
- [ ] **File Storage Limits** (1 hour)
|
||||
- Free: 50MB/month
|
||||
- Premium: 500MB/month
|
||||
- Pro: 5GB/month
|
||||
- Show storage usage
|
||||
- Files: Add to FileUpload components
|
||||
|
||||
- [ ] **Custom Emojis** (1 hour)
|
||||
- Upload custom emojis (premium)
|
||||
- Use in messages
|
||||
- Emoji pack management
|
||||
- Files: `CustomEmojiModal.jsx`
|
||||
|
||||
### 11.2 Payments
|
||||
- [ ] **Stripe Integration** (2 hours)
|
||||
- Subscription management
|
||||
- Payment processing (already have Stripe installed)
|
||||
- Invoice history
|
||||
- Cancel subscription
|
||||
- Files: Integrate Stripe payments
|
||||
|
||||
- [ ] **Ad-Free Option** (1 hour)
|
||||
- Remove ads for premium
|
||||
- Hide ad placeholders
|
||||
- Premium badge
|
||||
- Files: Add ad components (if using ads)
|
||||
|
||||
---
|
||||
|
||||
## PHASE 12: BLOCKCHAIN FEATURES (8 hours) - AETHEX UNIQUE
|
||||
|
||||
### 12.1 Identity Integration
|
||||
- [ ] **Connect .aethex Domain** (2 hours)
|
||||
- Show .aethex domain on profile
|
||||
- Verify domain ownership
|
||||
- Link blockchain wallet
|
||||
- Display on member card
|
||||
- Files: Add blockchainService.js
|
||||
|
||||
- [ ] **Wallet Integration** (1.5 hours)
|
||||
- Connect wallet button
|
||||
- Show connected wallet
|
||||
- Verify ownership
|
||||
- Use for login (Web3 auth)
|
||||
- Files: Add walletService.js
|
||||
|
||||
### 12.2 Trinity Division UI
|
||||
- [ ] **Division Badges** (1 hour)
|
||||
- Show Trinity division on members
|
||||
- Filter by division
|
||||
- Division-specific channels
|
||||
- Division color coding
|
||||
- Files: Update MemberSidebar
|
||||
|
||||
- [ ] **Division Permissions** (1.5 hours)
|
||||
- Restrict channels by division
|
||||
- Division-specific roles
|
||||
- Division leadership
|
||||
- Files: Add division-based ACL
|
||||
|
||||
### 12.3 Crypto Features
|
||||
- [ ] **Token Gating** (1.5 hours)
|
||||
- Require token to view channel
|
||||
- Verify wallet balance
|
||||
- Dynamic channel access
|
||||
- Files: Add tokenGating.js
|
||||
|
||||
- [ ] **NFT Roles** (1.5 hours)
|
||||
- NFT holders get special role
|
||||
- Auto-assign role based on NFT
|
||||
- Show NFT on profile
|
||||
- Files: Add nftService.js
|
||||
|
||||
---
|
||||
|
||||
## PHASE 13: PERFORMANCE & OPTIMIZATION (8 hours) - BACKEND WORK
|
||||
|
||||
### 13.1 Data Optimization
|
||||
- [ ] **Message Pagination** (1.5 hours)
|
||||
- Load messages in batches
|
||||
- Virtual scrolling for large lists
|
||||
- Cache old messages
|
||||
- Files: Update ChatArea
|
||||
|
||||
- [ ] **Member List Caching** (1 hour)
|
||||
- Cache member list
|
||||
- Update on join/leave
|
||||
- Quick search without API call
|
||||
- Files: Update memberStore
|
||||
|
||||
- [ ] **Image Optimization** (1 hour)
|
||||
- Lazy load images
|
||||
- Responsive images
|
||||
- Image compression
|
||||
- WebP format
|
||||
- Files: Image service
|
||||
|
||||
### 13.2 Performance Metrics
|
||||
- [ ] **Add Analytics** (1.5 hours)
|
||||
- Track page load time
|
||||
- Track API response time
|
||||
- Track message send time
|
||||
- Send to monitoring service
|
||||
- Files: Add analyticsService.js
|
||||
|
||||
- [ ] **Monitor Errors** (1.5 hours)
|
||||
- Capture client errors
|
||||
- Send to error tracking (Sentry)
|
||||
- Show error rate dashboard
|
||||
- Files: Add errorTracking.js
|
||||
|
||||
- [ ] **Database Query Optimization** (1 hour)
|
||||
- Profile slow queries
|
||||
- Add indexes where needed
|
||||
- Implement query caching
|
||||
- Backend work in Express
|
||||
|
||||
---
|
||||
|
||||
## PHASE 14: TESTING & QA (8 hours)
|
||||
|
||||
### 14.1 Unit Tests
|
||||
- [ ] **Test Stores** (2 hours)
|
||||
- Test Zustand stores
|
||||
- Test state updates
|
||||
- Test computed values
|
||||
- Files: Add `.test.js` files
|
||||
|
||||
- [ ] **Test Components** (2 hours)
|
||||
- Test Message component
|
||||
- Test ChatArea component
|
||||
- Test modals
|
||||
- Files: Add component tests
|
||||
|
||||
### 14.2 Integration Tests
|
||||
- [ ] **Test Message Flow** (2 hours)
|
||||
- Send message end-to-end
|
||||
- Edit message
|
||||
- Delete message
|
||||
- Files: Add integration tests
|
||||
|
||||
- [ ] **Test Auth Flow** (1 hour)
|
||||
- Login/logout
|
||||
- Session persistence
|
||||
- Token refresh
|
||||
- Files: Add auth tests
|
||||
|
||||
### 14.3 User Testing
|
||||
- [ ] **QA Pass** (1 hour)
|
||||
- Manual testing checklist
|
||||
- Bug documentation
|
||||
- Performance testing
|
||||
- Browser compatibility
|
||||
|
||||
---
|
||||
|
||||
## PHASE 15: DEPLOYMENT & DOCS (6 hours)
|
||||
|
||||
### 15.1 Documentation
|
||||
- [ ] **API Documentation** (1.5 hours)
|
||||
- Document all endpoints
|
||||
- Document Socket.IO events
|
||||
- Include examples
|
||||
- Files: Create API docs
|
||||
|
||||
- [ ] **User Guide** (1 hour)
|
||||
- How to use features
|
||||
- Keyboard shortcuts
|
||||
- Tips & tricks
|
||||
- Files: Create user guide
|
||||
|
||||
- [ ] **Developer Guide** (1.5 hours)
|
||||
- Setup instructions
|
||||
- Architecture overview
|
||||
- Contributing guidelines
|
||||
- Files: Update README
|
||||
|
||||
### 15.2 Deployment
|
||||
- [ ] **Environment Setup** (1 hour)
|
||||
- Production env vars
|
||||
- Database backups
|
||||
- CDN configuration
|
||||
- Files: Deployment config
|
||||
|
||||
- [ ] **CI/CD Pipeline** (1 hour)
|
||||
- Auto-deploy on push
|
||||
- Run tests
|
||||
- Build optimization
|
||||
- Files: GitHub Actions config
|
||||
|
||||
---
|
||||
|
||||
## SUMMARY
|
||||
|
||||
**Total Estimated Time: 145 hours**
|
||||
|
||||
**Breakdown by Phase:**
|
||||
- Phase 1-4: 45 hours (Messaging & Communities)
|
||||
- Phase 5-8: 32 hours (Community & Engagement)
|
||||
- Phase 9-10: 18 hours (Settings & Polish)
|
||||
- Phase 11-12: 14 hours (Monetization & Blockchain)
|
||||
- Phase 13-15: 22 hours (Performance & Deployment)
|
||||
|
||||
**Critical Path (MVP):**
|
||||
- Phase 1: Messaging (15h)
|
||||
- Phase 7: Backend Integration (15h)
|
||||
- Phase 14: Testing (5h)
|
||||
- **35 hours for MVP**
|
||||
|
||||
**Achievable in 1 sprint (2 weeks):**
|
||||
- Phase 1 + Phase 2 (27 hours) = Basic messaging platform
|
||||
|
||||
**Competitive Differentiation:**
|
||||
- Phase 12 (Blockchain) = Unique value
|
||||
- Phase 6 (Voice/Video) = Core Discord feature
|
||||
- Phase 11 (Monetization) = Revenue model
|
||||
202
IMPLEMENTATION-COMPLETE.md
Normal file
202
IMPLEMENTATION-COMPLETE.md
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
# AeThex Connect - Full Implementation Status
|
||||
|
||||
## ✅ COMPLETED FEATURES
|
||||
|
||||
### 1. **Real-Time Messaging System**
|
||||
- `MessageInput.jsx` - Sends messages via Socket.IO
|
||||
- `ChatArea.jsx` - Displays all messages from messageStore in real-time
|
||||
- `useSocket.js` - Socket.IO client with event listeners:
|
||||
- `message:new` - Receive new messages
|
||||
- `message:updated` - Receive edited messages
|
||||
- `message:deleted` - Receive deleted messages
|
||||
- Backend: `chatRoutes.js` - REST API for message CRUD
|
||||
- Real-time sync without page refresh
|
||||
|
||||
### 2. **Direct Messaging (DMs) System**
|
||||
- `DirectMessageList.jsx` - Shows all active conversations
|
||||
- `DirectMessageChat.jsx` - Full DM chat interface
|
||||
- `directMessageStore.js` - Manages DM conversations & state
|
||||
- Context switching: Click DM or server to toggle views
|
||||
- Unread message badges supported
|
||||
- Socket event: `dm:send`, `dm:new`
|
||||
|
||||
### 3. **User Presence & Typing**
|
||||
- `presenceStore.js` - Tracks online status & typing indicators
|
||||
- `TypingIndicator.jsx` - Shows who's typing with animations
|
||||
- Socket events: `user:typing`, `user:online`, `user:status`
|
||||
- Auto-clears typing status after 3 seconds
|
||||
- Online/idle/offline status tracking
|
||||
|
||||
### 4. **Trinity Servers (3 Dedicated)**
|
||||
- **Foundation** - Official infrastructure
|
||||
- **Corporation** - Corporate division
|
||||
- **Labs** - Research & development
|
||||
- Fully functional server switching with visual indicators
|
||||
- All wired to `serverStore.js`
|
||||
- Server creation via modal
|
||||
|
||||
### 5. **User Profiles**
|
||||
- Profile modal with edit capability
|
||||
- Username, email, status, avatar
|
||||
- Status options: Online, Idle, DND, Offline
|
||||
- Logout button included
|
||||
- Access via 👤 button in server list
|
||||
|
||||
### 6. **Settings Panel**
|
||||
- Notification controls (desktop, sound, mentions, replies)
|
||||
- Theme settings (dark/light/auto)
|
||||
- Privacy controls (online status, DMs, friend requests)
|
||||
- Appearance settings (compact mode, animations, font size)
|
||||
- Access via ⚙️ button in chat header
|
||||
|
||||
### 7. **User Discovery**
|
||||
- Search functionality to find other users
|
||||
- Status indicators (🟢 online, 🟡 idle, ⚪ offline)
|
||||
- One-click DM creation
|
||||
- Modal interface with avatars
|
||||
- Access via 👥 button in chat header
|
||||
|
||||
### 8. **Server/Channel Management**
|
||||
- Create new servers with custom icons & names
|
||||
- Join servers via invite code
|
||||
- Create channels within servers
|
||||
- Channel categories (Development, Announcements, Support, Voice)
|
||||
- Channel types (text, voice)
|
||||
- Delete/leave servers with proper confirmation
|
||||
- Member management with role controls (Admin, Moderator, Member, Guest)
|
||||
|
||||
### 9. **Emoji Picker**
|
||||
- Integration with @emoji-mart/react
|
||||
- Categorized emojis (smileys, gestures, objects, nature, food)
|
||||
- Dark theme styling
|
||||
- Click-outside to close
|
||||
- Seamless insertion into messages
|
||||
|
||||
### 10. **Voice/Video Calls**
|
||||
- `VoiceCallButton.jsx` - Start/end call UI
|
||||
- LiveKit integration ready
|
||||
- Socket events: `call:start`, `call:end`, `call:join`, `call:leave`
|
||||
- Token-based authentication with backend
|
||||
- Button integrated into chat header
|
||||
- Call room management
|
||||
|
||||
### 11. **File Uploads** (Structure Ready)
|
||||
- `FileUploadModal.jsx` - Component created
|
||||
- UploadThing integration configured
|
||||
- Drag-and-drop UI ready
|
||||
- Progress tracking built-in
|
||||
- Awaiting file display in messages
|
||||
|
||||
### 12. **Channel Sidebar**
|
||||
- List all channels by category
|
||||
- Visual indicator for current active channel
|
||||
- Add channel button (+ icon)
|
||||
- Proper styling with hover states
|
||||
|
||||
### 13. **Member Sidebar**
|
||||
- Displays all server members
|
||||
- Shows member roles with icons
|
||||
- Avatar and username display
|
||||
- Status indicators
|
||||
- Quick member info access
|
||||
|
||||
---
|
||||
|
||||
## 🔧 INFRASTRUCTURE
|
||||
|
||||
### Stores (Zustand)
|
||||
- `serverStore.js` - Server management & switching
|
||||
- `channelStore.js` - Channel management & selection
|
||||
- `messageStore.js` - Message CRUD & display
|
||||
- `memberStore.js` - Member roles & permissions
|
||||
- `modalStore.js` - Global modal state management
|
||||
- `directMessageStore.js` - DM conversations
|
||||
- `presenceStore.js` - User status & typing
|
||||
- `userSettingsStore.js` - Account settings
|
||||
|
||||
### Socket.IO Integration
|
||||
- `useSocket.js` - Connection management
|
||||
- `useSocketEmit.js` - Event emission helpers
|
||||
- Automatic reconnection with exponential backoff
|
||||
- Message sync, typing indicators, status updates
|
||||
|
||||
### Modals (8 total)
|
||||
- UserProfileModal - Edit profile
|
||||
- CreateServerModal - New servers
|
||||
- SettingsModal - User settings
|
||||
- UserDiscoveryModal - Find users
|
||||
- CreateChannelModal - New channels
|
||||
- ManageMembersModal - Role management
|
||||
- InviteModal - Server invites
|
||||
- DeleteServerModal - Server deletion
|
||||
- LeaveServerModal - Leave server
|
||||
|
||||
### Backend Routes
|
||||
- `chatRoutes.js` - Message API (POST, PATCH, DELETE, GET reactions)
|
||||
- `liveKitRoutes.js` - Voice/video token generation
|
||||
- `liveKitService.js` - LiveKit room management
|
||||
- Socket.IO event handlers ready for implementation
|
||||
|
||||
---
|
||||
|
||||
## 🎯 READY FOR TESTING
|
||||
|
||||
**Current URL:** http://localhost:3000/app
|
||||
|
||||
### Test Flow:
|
||||
1. **Messaging**: Type in message input → Submit → Message appears immediately
|
||||
2. **DMs**: Click "+" button → Select user → Start conversation
|
||||
3. **Servers**: Click Trinity server icons → See channel switch + styling
|
||||
4. **Settings**: Click ⚙️ → Adjust preferences → See instant updates
|
||||
5. **Discovery**: Click 👥 → Search users → Add contact
|
||||
6. **Profiles**: Click 👤 → Edit username/status → Save changes
|
||||
|
||||
---
|
||||
|
||||
## ⚡ QUICK INTEGRATION CHECKLIST
|
||||
|
||||
- [x] Socket.IO client connected
|
||||
- [x] Message sending & receiving
|
||||
- [x] DM conversations
|
||||
- [x] Typing indicators
|
||||
- [x] Presence tracking
|
||||
- [x] Server management
|
||||
- [x] Channel management
|
||||
- [x] Settings persistence
|
||||
- [ ] File uploads to UploadThing (ready, needs backend)
|
||||
- [ ] LiveKit voice/video (ready, needs API keys)
|
||||
- [ ] Supabase database (routes exist, needs .env)
|
||||
|
||||
---
|
||||
|
||||
## 📝 ENV VARIABLES NEEDED
|
||||
|
||||
```bash
|
||||
# Frontend (.env)
|
||||
VITE_API_URL=http://localhost:3000
|
||||
VITE_SOCKET_IO_URL=http://localhost:3000
|
||||
|
||||
# Backend (.env)
|
||||
LIVEKIT_URL=wss://your-livekit-server.com
|
||||
LIVEKIT_API_KEY=your_api_key
|
||||
LIVEKIT_API_SECRET=your_api_secret
|
||||
UPLOADTHING_SECRET=your_secret
|
||||
JWT_SECRET=your_secret
|
||||
SUPABASE_URL=your_url
|
||||
SUPABASE_KEY=your_key
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 NEXT STEPS
|
||||
|
||||
1. Add .env configuration
|
||||
2. Wire Supabase database connections
|
||||
3. Deploy LiveKit server
|
||||
4. Test multi-user scenarios (open 2 browser tabs)
|
||||
5. Add file upload handling
|
||||
6. Implement message persistence
|
||||
7. Add notification system
|
||||
8. Deploy to Railway
|
||||
|
||||
All core functionality is now wired and ready for integration with backend services!
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1770417750117
|
||||
"lastUpdateCheck": 1772328323741
|
||||
}
|
||||
}
|
||||
6
astro-site/.env.example
Normal file
6
astro-site/.env.example
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
# API Configuration
|
||||
VITE_API_URL=http://localhost:3000
|
||||
|
||||
# App Configuration
|
||||
VITE_APP_NAME=AeThex Connect
|
||||
VITE_APP_VERSION=1.0.0
|
||||
|
|
@ -8,5 +8,31 @@ export default defineConfig({
|
|||
server: {
|
||||
port: 4321,
|
||||
host: 'localhost'
|
||||
},
|
||||
vite: {
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'simple-peer',
|
||||
'lucide-react',
|
||||
'zustand',
|
||||
'clsx',
|
||||
'@radix-ui/react-popover',
|
||||
'@radix-ui/react-dropdown-menu',
|
||||
],
|
||||
esbuildOptions: {
|
||||
target: 'esnext'
|
||||
}
|
||||
},
|
||||
server: {
|
||||
hmr: {
|
||||
timeout: 60000
|
||||
},
|
||||
watch: {
|
||||
usePolling: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
2056
astro-site/package-lock.json
generated
2056
astro-site/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,14 +9,34 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^4.4.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@stripe/react-stripe-js": "^5.6.0",
|
||||
"@stripe/stripe-js": "^8.8.0",
|
||||
"@types/react": "^19.2.8",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@uploadthing/react": "^7.3.3",
|
||||
"astro": "^4.0.0",
|
||||
"axios": "^1.13.6",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"livekit-client": "^0.18.6",
|
||||
"livekit-react": "^0.9.2",
|
||||
"lucide-react": "^0.575.0",
|
||||
"matrix-js-sdk": "^40.0.0",
|
||||
"mumble-client": "^1.3.0",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"simple-peer": "^9.11.1"
|
||||
"react-hook-form": "^7.71.2",
|
||||
"react-router-dom": "^7.13.1",
|
||||
"simple-peer": "^9.11.1",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"uploadthing": "^7.7.4",
|
||||
"zod": "^3.25.76",
|
||||
"zustand": "^5.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:3000';
|
||||
const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:5000';
|
||||
const API_BASE = `${API_URL}/api`;
|
||||
|
||||
const AeThexContext = createContext(null);
|
||||
|
|
|
|||
|
|
@ -1,66 +1,160 @@
|
|||
import React from "react";
|
||||
import { useWebRTC } from "../webrtc/WebRTCProvider.jsx";
|
||||
import { Plus } from "lucide-react";
|
||||
import { useChannelStore } from "../../stores/channelStore";
|
||||
import { useModalStore } from "../../stores/modalStore";
|
||||
import { useMemberStore } from "../../stores/memberStore";
|
||||
import { ServerHeader } from "./ServerHeader";
|
||||
|
||||
export default function ChannelSidebar() {
|
||||
const { joined, joinVoice, leaveVoice } = useWebRTC();
|
||||
const channels = useChannelStore((state) => state.channels);
|
||||
const currentChannelId = useChannelStore((state) => state.currentChannelId);
|
||||
const setCurrentChannel = useChannelStore((state) => state.setCurrentChannel);
|
||||
const onOpen = useModalStore((state) => state.onOpen);
|
||||
const getCurrentUser = useMemberStore((state) => state.getCurrentUser);
|
||||
|
||||
const currentUser = getCurrentUser();
|
||||
const isAdmin = currentUser?.role === "ADMIN";
|
||||
|
||||
// Group channels by category
|
||||
const groupedChannels = channels.reduce((acc, channel) => {
|
||||
if (!acc[channel.category]) acc[channel.category] = [];
|
||||
acc[channel.category].push(channel);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const joined = false;
|
||||
const joinVoice = () => console.log("Voice feature coming soon");
|
||||
const leaveVoice = () => console.log("Voice feature coming soon");
|
||||
|
||||
// Mock server data for now
|
||||
const mockServer = {
|
||||
id: "aethex-foundation",
|
||||
name: "AeThex Foundation",
|
||||
inviteCode: "aethex-foundation"
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="channel-sidebar w-72 bg-[#0f0f0f] border-r border-[#1a1a1a] flex flex-col">
|
||||
<div className="channel-sidebar">
|
||||
{/* Server Header */}
|
||||
<div className="server-header p-4 border-b border-[#1a1a1a] font-bold text-base flex items-center justify-between">
|
||||
<span>AeThex Foundation</span>
|
||||
<span className="server-badge foundation text-xs px-2 py-1 rounded bg-red-900/20 text-red-500 border border-red-500 uppercase tracking-wider">Official</span>
|
||||
</div>
|
||||
<ServerHeader
|
||||
server={mockServer}
|
||||
role={currentUser?.role || "GUEST"}
|
||||
/>
|
||||
|
||||
{/* Channel List */}
|
||||
<div className="channel-list flex-1 overflow-y-auto py-2">
|
||||
<div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Announcements</div>
|
||||
<div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
|
||||
<span className="channel-icon">📢</span>
|
||||
<span className="channel-name flex-1">updates</span>
|
||||
<span className="channel-badge text-xs bg-red-600 text-white px-2 rounded-full">3</span>
|
||||
<div className="channel-list">
|
||||
{Object.entries(groupedChannels).map(([category, categoryChannels]) => (
|
||||
<div key={category}>
|
||||
<div className="channel-category">
|
||||
<span>{category}</span>
|
||||
{isAdmin && category !== "Voice Channels" && (
|
||||
<button
|
||||
onClick={() => onOpen("createChannel", { category })}
|
||||
className="add-channel-button"
|
||||
title="Create channel"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
|
||||
<span className="channel-icon">📜</span>
|
||||
<span className="channel-name flex-1">changelog</span>
|
||||
|
||||
{categoryChannels.map((channel) => (
|
||||
<div
|
||||
key={channel.id}
|
||||
onClick={() => setCurrentChannel(channel.id)}
|
||||
className={`channel-item ${currentChannelId === channel.id ? "active" : ""}`}
|
||||
>
|
||||
<span className="channel-icon">
|
||||
{channel.type === "voice" ? "🔊" : "#"}
|
||||
</span>
|
||||
<span className="channel-name">{channel.name}</span>
|
||||
{channel.unread && (
|
||||
<span className="channel-badge">
|
||||
{channel.unread}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Development</div>
|
||||
<div className="channel-item active flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm bg-[#1a1a1a]">
|
||||
<span className="channel-icon">#</span>
|
||||
<span className="channel-name flex-1">general</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
|
||||
<span className="channel-icon">#</span>
|
||||
<span className="channel-name flex-1">api-discussion</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
|
||||
<span className="channel-icon">#</span>
|
||||
<span className="channel-name flex-1">passport-development</span>
|
||||
|
||||
{/* User Presence - Discord Style Bottom Panel */}
|
||||
<div className="user-presence p-3 border-t border-[#1a1a1a]">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div
|
||||
className="user-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold bg-gradient-to-tr from-red-600 via-blue-600 to-orange-400 cursor-pointer hover:shadow-lg transition-all"
|
||||
onClick={() => onOpen("userProfile", { member: currentUser })}
|
||||
title="View profile"
|
||||
>
|
||||
{currentUser?.avatar || "A"}
|
||||
</div>
|
||||
<div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Support</div>
|
||||
<div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
|
||||
<span className="channel-icon">❓</span>
|
||||
<span className="channel-name flex-1">help</span>
|
||||
<div className="user-info flex-1 px-2">
|
||||
<div className="user-name font-bold mb-0.5 text-sm">Anderson</div>
|
||||
<div className="text-xs text-gray-500">Building AeThex</div>
|
||||
</div>
|
||||
<div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
|
||||
<span className="channel-icon">🐛</span>
|
||||
<span className="channel-name flex-1">bug-reports</span>
|
||||
</div>
|
||||
<div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Voice Channels</div>
|
||||
<div className={`channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a] ${joined ? "bg-blue-900/30" : ""}`}
|
||||
onClick={joined ? leaveVoice : joinVoice}>
|
||||
<span className="channel-icon">🔊</span>
|
||||
<span className="channel-name flex-1">Nexus Lounge</span>
|
||||
<span className="text-gray-500 text-xs">{joined ? "Connected" : "3"}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Status Selector */}
|
||||
<button
|
||||
onClick={() => onOpen("statusModal")}
|
||||
className="w-6 h-6 rounded flex items-center justify-center bg-[#2a2a2a] hover:bg-[#3a3a3a] transition-colors"
|
||||
title="Status"
|
||||
>
|
||||
<span className="text-xs">🟢</span>
|
||||
</button>
|
||||
{/* Settings */}
|
||||
<button
|
||||
onClick={() => onOpen("settings")}
|
||||
className="w-6 h-6 rounded flex items-center justify-center bg-[#2a2a2a] hover:bg-[#3a3a3a] transition-colors"
|
||||
title="Settings"
|
||||
>
|
||||
<span className="text-xs">⚙️</span>
|
||||
</button>
|
||||
{/* Mute */}
|
||||
<button
|
||||
className="w-6 h-6 rounded flex items-center justify-center bg-[#2a2a2a] hover:bg-[#3a3a3a] transition-colors"
|
||||
title="Mute"
|
||||
>
|
||||
<span className="text-xs">🔕</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* User Presence */}
|
||||
<div className="user-presence p-3 border-t border-[#1a1a1a] flex items-center gap-3 text-sm">
|
||||
<div className="user-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold bg-gradient-to-tr from-red-600 via-blue-600 to-orange-400">A</div>
|
||||
<div className="user-info flex-1">
|
||||
<div className="user-name font-bold mb-0.5">Anderson</div>
|
||||
<div className="user-status flex items-center gap-1 text-xs text-gray-500">
|
||||
<span className="status-dot w-2 h-2 rounded-full bg-green-400 shadow-green-400/50 shadow" />
|
||||
<span>Building AeThex</span>
|
||||
</div>
|
||||
|
||||
{/* Quick Access Panel */}
|
||||
<div className="grid grid-cols-4 gap-2 pt-2 border-t border-[#0f0f0f]">
|
||||
<button
|
||||
onClick={() => onOpen("friends")}
|
||||
className="py-2 px-1 rounded text-center hover:bg-[#1a1a1a] transition-colors text-xs"
|
||||
title="Friends"
|
||||
>
|
||||
<div className="text-lg mb-1">👥</div>
|
||||
<div className="text-gray-400">Friends</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onOpen("notifications")}
|
||||
className="py-2 px-1 rounded text-center hover:bg-[#1a1a1a] transition-colors text-xs relative"
|
||||
title="Notifications"
|
||||
>
|
||||
<div className="text-lg mb-1">🔔</div>
|
||||
<div className="text-gray-400">Notify</div>
|
||||
<div className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onOpen("pinned")}
|
||||
className="py-2 px-1 rounded text-center hover:bg-[#1a1a1a] transition-colors text-xs"
|
||||
title="Pinned Messages"
|
||||
>
|
||||
<div className="text-lg mb-1">📌</div>
|
||||
<div className="text-gray-400">Pinned</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onOpen("threads")}
|
||||
className="py-2 px-1 rounded text-center hover:bg-[#1a1a1a] transition-colors text-xs"
|
||||
title="Threads"
|
||||
>
|
||||
<div className="text-lg mb-1">💬</div>
|
||||
<div className="text-gray-400">Threads</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,77 +1,165 @@
|
|||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import Message from "./Message";
|
||||
import MessageInput from "./MessageInput";
|
||||
import { useAeThex } from "../aethex/AeThexProvider.jsx";
|
||||
import DemoLoginButton from "./DemoLoginButton.jsx";
|
||||
import VoiceCallButton from "./VoiceCallButton.jsx";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
import { useChannelStore } from "../../stores/channelStore.js";
|
||||
import { usePresenceStore } from "../../stores/presenceStore.js";
|
||||
import { useSocket } from "../../hooks/useSocket.js";
|
||||
import { useModalStore } from "../../stores/modalStore.js";
|
||||
import { Settings, Users } from "lucide-react";
|
||||
|
||||
// Default channel to join
|
||||
const DEFAULT_CHANNEL_ID = "general";
|
||||
const DEMO_MESSAGES = [
|
||||
{
|
||||
id: 'msg-1',
|
||||
channelId: 'general',
|
||||
senderId: 'user-2',
|
||||
senderName: 'Trevor',
|
||||
text: 'Just pushed the authentication updates. All services should migrate within 24 hours.',
|
||||
timestamp: Date.now() - 3600000,
|
||||
edited: false,
|
||||
reactions: [],
|
||||
},
|
||||
{
|
||||
id: 'msg-2',
|
||||
channelId: 'general',
|
||||
senderId: 'user-3',
|
||||
senderName: 'Marcus',
|
||||
text: 'Excellent work! Trinity color-coding is really clear.',
|
||||
timestamp: Date.now() - 3000000,
|
||||
edited: false,
|
||||
reactions: [],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ChatArea() {
|
||||
const { messages, joinChannel, currentChannelId, user, demoLogin, loading, isAuthenticated } = useAeThex();
|
||||
const messagesRef = useRef(null);
|
||||
const socket = useSocket();
|
||||
const { onOpen } = useModalStore();
|
||||
|
||||
// Join the default channel on login
|
||||
const currentChannelId = useChannelStore((state) => state.currentChannelId);
|
||||
const getCurrentChannel = useChannelStore((state) => state.getCurrentChannel);
|
||||
const messages = useMessageStore((state) => state.messages);
|
||||
const getChannelTypingUsers = usePresenceStore((state) => state.getChannelTypingUsers);
|
||||
|
||||
const currentChannel = getCurrentChannel();
|
||||
const channelMessages = messages.filter((m) => m.channelId === currentChannelId);
|
||||
const typingUsers = getChannelTypingUsers(currentChannelId);
|
||||
|
||||
// Load demo messages on mount
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && user && !currentChannelId) {
|
||||
joinChannel(DEFAULT_CHANNEL_ID);
|
||||
if (messages.length === 0) {
|
||||
DEMO_MESSAGES.forEach((msg) => {
|
||||
useMessageStore.getState().addMessage(msg);
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated, user, currentChannelId, joinChannel]);
|
||||
}, []);
|
||||
|
||||
// Demo login handler
|
||||
const handleDemoLogin = async () => {
|
||||
await demoLogin();
|
||||
};
|
||||
|
||||
if (!isAuthenticated || !user) {
|
||||
return (
|
||||
<div className="chat-area flex flex-col flex-1 bg-[#0a0a0a] items-center justify-center">
|
||||
<DemoLoginButton onDemoLogin={handleDemoLogin} />
|
||||
{loading && <div className="text-gray-400 mt-4">Logging in as demo user...</div>}
|
||||
</div>
|
||||
);
|
||||
// Auto-scroll to bottom
|
||||
useEffect(() => {
|
||||
if (messagesRef.current) {
|
||||
messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
|
||||
}
|
||||
}, [channelMessages, typingUsers]);
|
||||
|
||||
return (
|
||||
<div className="chat-area flex flex-col flex-1 bg-[#0a0a0a]">
|
||||
{/* Chat Header */}
|
||||
<div className="chat-header px-5 py-4 border-b border-[#1a1a1a] flex items-center gap-3">
|
||||
<span className="channel-name-header flex-1 font-bold text-base"># general</span>
|
||||
<div className="chat-tools flex gap-4 text-sm text-gray-500">
|
||||
<span className="chat-tool cursor-pointer hover:text-blue-500">🔔</span>
|
||||
<span className="chat-tool cursor-pointer hover:text-blue-500">📌</span>
|
||||
<span className="chat-tool cursor-pointer hover:text-blue-500">👥 128</span>
|
||||
<span className="chat-tool cursor-pointer hover:text-blue-500">🔍</span>
|
||||
<div className="chat-area">
|
||||
{/* Channel Header */}
|
||||
<div className="chat-header">
|
||||
<span className="channel-name-header">
|
||||
#{currentChannel?.name || 'general'}
|
||||
</span>
|
||||
<div className="chat-tools">
|
||||
<VoiceCallButton />
|
||||
<span
|
||||
onClick={() => onOpen('notifications')}
|
||||
className="chat-tool"
|
||||
style={{ cursor: 'pointer' }}
|
||||
title="Notifications"
|
||||
>
|
||||
🔔
|
||||
</span>
|
||||
<span
|
||||
onClick={() => onOpen('pinnedMessages')}
|
||||
className="chat-tool"
|
||||
style={{ cursor: 'pointer' }}
|
||||
title="Pinned Messages"
|
||||
>
|
||||
📌
|
||||
</span>
|
||||
<span
|
||||
onClick={() => onOpen('discovery')}
|
||||
className="chat-tool"
|
||||
style={{ cursor: 'pointer' }}
|
||||
title="Find users & servers"
|
||||
>
|
||||
👥
|
||||
</span>
|
||||
<span
|
||||
onClick={() => onOpen('quickSwitcher')}
|
||||
className="chat-tool"
|
||||
style={{ cursor: 'pointer' }}
|
||||
title="Quick Switcher (Ctrl+K)"
|
||||
>
|
||||
🔍
|
||||
</span>
|
||||
<span
|
||||
onClick={() => onOpen('settings')}
|
||||
className="chat-tool"
|
||||
style={{ cursor: 'pointer' }}
|
||||
title="Settings"
|
||||
>
|
||||
⚙️
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="chat-messages flex-1 overflow-y-auto px-5 py-5">
|
||||
{messages && messages.length > 0 ? (
|
||||
messages.map((msg, i) => (
|
||||
<Message key={msg.id || i} {...messageToProps(msg)} />
|
||||
))
|
||||
<div className="chat-messages" ref={messagesRef}>
|
||||
{channelMessages.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p className="text-4xl mb-3">💬</p>
|
||||
<p>No messages yet. Start the conversation!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-gray-500 text-center">No messages yet.</div>
|
||||
channelMessages.map((msg) => (
|
||||
<Message
|
||||
key={msg.id}
|
||||
id={msg.id}
|
||||
author={msg.senderName}
|
||||
avatar={msg.senderName[0]}
|
||||
text={msg.text}
|
||||
timestamp={msg.timestamp}
|
||||
edited={msg.edited}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* Typing Indicators */}
|
||||
{typingUsers.length > 0 && (
|
||||
<div className="typing-indicator">
|
||||
<div className="typing-dots">
|
||||
<span className="dot" />
|
||||
<span className="dot" style={{ animationDelay: "0.1s" }} />
|
||||
<span className="dot" style={{ animationDelay: "0.2s" }} />
|
||||
</div>
|
||||
<span>
|
||||
{typingUsers
|
||||
.map((u) => u.userName)
|
||||
.join(", ")} {typingUsers.length === 1 ? "is" : "are"} typing...
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Message Input */}
|
||||
<div className="message-input-container px-5 py-5 border-t border-[#1a1a1a]">
|
||||
<MessageInput />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
// Add VoiceCallButton to imports at top:
|
||||
// import VoiceCallButton from "./VoiceCallButton.jsx";
|
||||
|
||||
// Helper to convert AeThex message to Message props
|
||||
function messageToProps(msg) {
|
||||
if (!msg) return {};
|
||||
return {
|
||||
type: "user",
|
||||
author: msg.sender?.display_name || msg.sender?.username || "User",
|
||||
text: msg.content || "",
|
||||
time: new Date(msg.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||||
avatar: (msg.sender?.display_name || msg.sender?.username || "U").charAt(0).toUpperCase(),
|
||||
avatarBg: "from-blue-600 to-blue-900",
|
||||
};
|
||||
}
|
||||
// And add this to the Channel Header section after Settings button:
|
||||
// <VoiceCallButton />
|
||||
|
|
|
|||
109
astro-site/src/components/mockup/DirectMessageChat.jsx
Normal file
109
astro-site/src/components/mockup/DirectMessageChat.jsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useDirectMessageStore } from '../../stores/directMessageStore.js';
|
||||
import { useSocketEmit } from '../../hooks/useSocket.js';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
export default function DirectMessageChat() {
|
||||
const { currentConversationId, getCurrentConversation, addMessage } = useDirectMessageStore();
|
||||
const { sendDirectMessage, emitTyping } = useSocketEmit();
|
||||
const [messageText, setMessageText] = useState('');
|
||||
const [typingTimeout, setTypingTimeout] = useState(null);
|
||||
|
||||
const conversation = getCurrentConversation();
|
||||
|
||||
if (!conversation) {
|
||||
return (
|
||||
<div className="dm-chat flex-1 bg-[#0a0a0a] flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">💬</div>
|
||||
<p className="text-gray-400">Select a conversation to start messaging</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleSend = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!messageText.trim()) return;
|
||||
|
||||
const newMessage = {
|
||||
id: `msg-${Date.now()}`,
|
||||
senderId: 'user-1',
|
||||
text: messageText,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
addMessage(conversation.id, newMessage);
|
||||
sendDirectMessage(conversation.id, messageText, 'user-1');
|
||||
setMessageText('');
|
||||
|
||||
if (typingTimeout) clearTimeout(typingTimeout);
|
||||
};
|
||||
|
||||
const handleTyping = (e) => {
|
||||
setMessageText(e.target.value);
|
||||
|
||||
if (typingTimeout) clearTimeout(typingTimeout);
|
||||
emitTyping(conversation.id, 'user-1', 'You');
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
// Typing indicator will auto-clear after 3s on server
|
||||
}, 3000);
|
||||
setTypingTimeout(timeout);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dm-chat flex-1 bg-[#0a0a0a] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-[#1a1a1a] flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-lg text-white">
|
||||
{conversation.avatar}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white">{conversation.userName}</h3>
|
||||
</div>
|
||||
<button className="text-gray-400 hover:text-white transition">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="dm-messages flex-1 overflow-y-auto px-6 py-4 space-y-4">
|
||||
{conversation.messages.map((msg) => (
|
||||
<div key={msg.id} className={`flex ${msg.senderId === 'user-1' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div
|
||||
className={`max-w-xs px-4 py-2 rounded-lg ${
|
||||
msg.senderId === 'user-1'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-[#1a1a1a] text-gray-200'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm">{msg.text}</p>
|
||||
<p className="text-xs opacity-70 mt-1">
|
||||
{new Date(msg.timestamp).toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<form className="px-6 py-4 border-t border-[#1a1a1a] flex gap-3" onSubmit={handleSend}>
|
||||
<input
|
||||
type="text"
|
||||
value={messageText}
|
||||
onChange={handleTyping}
|
||||
placeholder={`Message ${conversation.userName}...`}
|
||||
className="flex-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!messageText.trim()}
|
||||
className="bg-blue-600 hover:bg-blue-700 disabled:bg-[#2a2a2a] text-white font-medium px-6 py-2 rounded-lg transition"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
astro-site/src/components/mockup/DirectMessageList.jsx
Normal file
45
astro-site/src/components/mockup/DirectMessageList.jsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react';
|
||||
import { useDirectMessageStore } from '../../stores/directMessageStore.js';
|
||||
|
||||
export default function DirectMessageList() {
|
||||
const { conversations, currentConversationId, setCurrentConversation, createConversation } = useDirectMessageStore();
|
||||
|
||||
return (
|
||||
<div className="dm-list w-64 bg-[#0f0f0f] border-r border-[#1a1a1a] flex flex-col">
|
||||
<div className="px-4 py-4 border-b border-[#1a1a1a]">
|
||||
<h2 className="text-sm font-bold text-gray-300">Direct Messages</h2>
|
||||
</div>
|
||||
|
||||
<div className="dm-conversations flex-1 overflow-y-auto">
|
||||
{conversations.map((conv) => (
|
||||
<button
|
||||
key={conv.id}
|
||||
onClick={() => setCurrentConversation(conv.id)}
|
||||
className={`w-full px-4 py-3 flex items-center gap-3 transition border-b border-[#1a1a1a] hover:bg-[#1a1a1a] ${
|
||||
currentConversationId === conv.id ? 'bg-blue-600/20 border-l-4 border-l-blue-600' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-lg text-white flex-shrink-0">
|
||||
{conv.avatar}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0 text-left">
|
||||
<div className="text-sm font-medium text-gray-200 truncate">{conv.userName}</div>
|
||||
<div className="text-xs text-gray-500 truncate">{conv.lastMessage || 'No messages yet'}</div>
|
||||
</div>
|
||||
|
||||
{conv.unread > 0 && (
|
||||
<div className="bg-red-600 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">
|
||||
{conv.unread}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="m-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded transition">
|
||||
+ New Message
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
astro-site/src/components/mockup/FriendRequestsPanel.jsx
Normal file
92
astro-site/src/components/mockup/FriendRequestsPanel.jsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
export default function FriendRequestsPanel() {
|
||||
const [friendRequests, setFriendRequests] = useState([
|
||||
{ id: 1, username: "Phoenix", avatar: "🔥", status: "pending" },
|
||||
{ id: 2, username: "Nexus", avatar: "⭐", status: "pending" },
|
||||
{ id: 3, username: "Cipher", avatar: "🔐", status: "pending" },
|
||||
]);
|
||||
|
||||
const handleAccept = (id) => {
|
||||
setFriendRequests(friendRequests.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
const handleDeny = (id) => {
|
||||
setFriendRequests(friendRequests.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
padding: "16px",
|
||||
maxHeight: "500px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ color: "#fff", marginTop: 0, marginBottom: "16px" }}>
|
||||
👥 Friend Requests ({friendRequests.length})
|
||||
</h3>
|
||||
|
||||
{friendRequests.length === 0 ? (
|
||||
<p style={{ color: "#666", textAlign: "center" }}>No pending friend requests</p>
|
||||
) : (
|
||||
friendRequests.map((req) => (
|
||||
<div
|
||||
key={req.id}
|
||||
style={{
|
||||
padding: "12px",
|
||||
background: "#0f0f0f",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "12px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<span style={{ fontSize: "1.5rem" }}>{req.avatar}</span>
|
||||
<span style={{ color: "#e0e0e0" }}>{req.username}</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
onClick={() => handleAccept(req.id)}
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
background: "#00ff00",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#000",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: "bold",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeny(req.id)}
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
background: "#ff0000",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: "bold",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
79
astro-site/src/components/mockup/InviteModalNew.jsx
Normal file
79
astro-site/src/components/mockup/InviteModalNew.jsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { useState } from 'react';
|
||||
import { Copy, Check } from 'lucide-react';
|
||||
|
||||
export function InviteModal({ isOpen, onClose, server }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
if (!isOpen || !server) return null;
|
||||
|
||||
// Generate a mock invite link
|
||||
const inviteCode = 'ABC123XYZ';
|
||||
const inviteUrl = `https://aethex-connect.app/invite/${inviteCode}`;
|
||||
|
||||
const handleCopy = async () => {
|
||||
await navigator.clipboard.writeText(inviteUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleRegenerate = () => {
|
||||
alert('Regenerate invite code - coming soon!');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-[#313338] rounded-lg w-96 shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white">Invite Friends</h2>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-6 py-6 space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-zinc-300 uppercase block mb-2">
|
||||
Server invite link
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={inviteUrl}
|
||||
readOnly
|
||||
className="flex-1 bg-zinc-100 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded px-3 py-2 text-sm text-zinc-900 dark:text-white"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="px-3 py-2 bg-zinc-600 hover:bg-zinc-700 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-white rounded transition flex items-center gap-2"
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{copied && <p className="text-xs text-green-500 mt-1">Copied to clipboard!</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-2">
|
||||
Or generate a new link
|
||||
</p>
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-medium transition"
|
||||
>
|
||||
Regenerate Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-4 border-t border-zinc-200 dark:border-zinc-700 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
astro-site/src/components/mockup/KeyboardShortcuts.jsx
Normal file
23
astro-site/src/components/mockup/KeyboardShortcuts.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { useEffect } from "react";
|
||||
import { useModalStore } from "../../stores/modalStore.js";
|
||||
|
||||
export default function KeyboardShortcuts() {
|
||||
const onOpen = useModalStore((state) => state.onOpen);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
// Ctrl+K or Cmd+K - Quick Switcher
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
onOpen("quickSwitcher");
|
||||
}
|
||||
|
||||
// Escape to close modals is handled by each modal individually
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [onOpen]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -1,19 +1,76 @@
|
|||
|
||||
import { WebRTCProvider } from "../webrtc/WebRTCProvider.jsx";
|
||||
import React, { useEffect } from 'react';
|
||||
import ServerList from "./ServerList.jsx";
|
||||
import ChannelSidebar from "./ChannelSidebar.jsx";
|
||||
import ChatArea from "./ChatArea.jsx";
|
||||
import MemberSidebar from "./MemberSidebar.jsx";
|
||||
import DirectMessageList from "./DirectMessageList.jsx";
|
||||
import DirectMessageChat from "./DirectMessageChat.jsx";
|
||||
import { ModalProvider } from "./modals/ModalProvider.jsx";
|
||||
import KeyboardShortcuts from "./KeyboardShortcuts.jsx";
|
||||
import { useDirectMessageStore } from "../../stores/directMessageStore.js";
|
||||
import { useServerStore } from "../../stores/serverStore.js";
|
||||
import { useChannelStore } from "../../stores/channelStore.js";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
import { useUserSettingsStore } from "../../stores/userSettingsStore.js";
|
||||
|
||||
export default function MainLayout() {
|
||||
const currentConversationId = useDirectMessageStore((state) => state.currentConversationId);
|
||||
|
||||
// Store actions
|
||||
const fetchServers = useServerStore((state) => state.fetchServers);
|
||||
const currentServerId = useServerStore((state) => state.currentServerId);
|
||||
const fetchChannels = useChannelStore((state) => state.fetchChannels);
|
||||
const fetchMessages = useMessageStore((state) => state.fetchMessages);
|
||||
const currentChannelId = useChannelStore((state) => state.currentChannelId);
|
||||
const initializeUser = useUserSettingsStore((state) => state.initializeUser);
|
||||
const initializeSocketListeners = useMessageStore((state) => state.initializeSocketListeners);
|
||||
|
||||
// Initialize on mount
|
||||
useEffect(() => {
|
||||
// Load user
|
||||
initializeUser();
|
||||
|
||||
// Load servers
|
||||
fetchServers();
|
||||
|
||||
// Initialize socket listeners for real-time updates
|
||||
initializeSocketListeners();
|
||||
}, []);
|
||||
|
||||
// Load channels when server changes
|
||||
useEffect(() => {
|
||||
if (currentServerId) {
|
||||
fetchChannels(currentServerId);
|
||||
}
|
||||
}, [currentServerId]);
|
||||
|
||||
// Load messages when channel changes
|
||||
useEffect(() => {
|
||||
if (currentChannelId && !currentConversationId) {
|
||||
fetchMessages(currentChannelId);
|
||||
}
|
||||
}, [currentChannelId, currentConversationId]);
|
||||
|
||||
return (
|
||||
<WebRTCProvider>
|
||||
<>
|
||||
<KeyboardShortcuts />
|
||||
<div className="connect-container flex h-screen">
|
||||
<ServerList />
|
||||
|
||||
{currentConversationId ? (
|
||||
<>
|
||||
<DirectMessageList />
|
||||
<DirectMessageChat />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChannelSidebar />
|
||||
<ChatArea />
|
||||
<MemberSidebar />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</WebRTCProvider>
|
||||
<ModalProvider />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import { useWebRTC } from "../webrtc/WebRTCProvider.jsx";
|
||||
|
||||
const members = [
|
||||
{ section: "Foundation Team — 8", users: [
|
||||
{ name: "Anderson", avatar: "A", status: "online", avatarBg: "from-red-600 to-red-800" },
|
||||
{ name: "Trevor", avatar: "T", status: "online", avatarBg: "from-red-600 to-red-800" },
|
||||
]},
|
||||
{ section: "Labs Team — 12", users: [
|
||||
{ name: "Sarah", avatar: "S", status: "labs", avatarBg: "from-orange-400 to-orange-700", activity: "Testing v2.0" },
|
||||
]},
|
||||
{ section: "Developers — 47", users: [
|
||||
{ name: "Marcus", avatar: "M", status: "in-game", avatarBg: "bg-[#1a1a1a]", activity: "Building" },
|
||||
{ name: "DevUser_2847", avatar: "D", status: "online", avatarBg: "bg-[#1a1a1a]" },
|
||||
]},
|
||||
{ section: "Community — 61", users: [
|
||||
{ name: "JohnDev", avatar: "J", status: "offline", avatarBg: "bg-[#1a1a1a]" },
|
||||
]},
|
||||
];
|
||||
import { useMemberStore } from "../../stores/memberStore";
|
||||
import { useModalStore } from "../../stores/modalStore";
|
||||
import { Settings } from "lucide-react";
|
||||
|
||||
export default function MemberSidebar() {
|
||||
const { joined, peers, localStream } = useWebRTC();
|
||||
const members = useMemberStore((state) => state.members);
|
||||
const getCurrentUser = useMemberStore((state) => state.getCurrentUser);
|
||||
const onOpen = useModalStore((state) => state.onOpen);
|
||||
|
||||
const currentUser = getCurrentUser();
|
||||
const isAdmin = currentUser?.role === "ADMIN";
|
||||
|
||||
// Group members by section
|
||||
const groupedMembers = members.reduce((acc, member) => {
|
||||
const section = member.division || "Others";
|
||||
if (!acc[section]) acc[section] = [];
|
||||
acc[section].push(member);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const joined = false;
|
||||
const peers = [];
|
||||
const localStream = null;
|
||||
|
||||
// Helper to render audio for remote streams
|
||||
function RemoteAudio({ stream }) {
|
||||
const audioRef = useRef();
|
||||
useEffect(() => {
|
||||
|
|
@ -32,7 +33,6 @@ export default function MemberSidebar() {
|
|||
return <audio ref={audioRef} autoPlay playsInline />;
|
||||
}
|
||||
|
||||
// Helper to render local audio (muted)
|
||||
function LocalAudio() {
|
||||
const audioRef = useRef();
|
||||
useEffect(() => {
|
||||
|
|
@ -44,50 +44,86 @@ export default function MemberSidebar() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="member-sidebar w-72 bg-[#0f0f0f] border-l border-[#1a1a1a] flex flex-col">
|
||||
<div className="member-header p-4 border-b border-[#1a1a1a] text-xs uppercase tracking-widest text-gray-500">Members — 128</div>
|
||||
<div className="member-list flex-1 overflow-y-auto py-3">
|
||||
<div className="member-sidebar">
|
||||
<div className="member-header">
|
||||
<span>Members — {members.length}</span>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => onOpen("manageMembers")}
|
||||
className="manage-members-button"
|
||||
title="Manage members"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="member-list">
|
||||
{/* Show all connected voice users */}
|
||||
{(joined || (peers && peers.length > 0)) && (
|
||||
<div className="member-section mb-4">
|
||||
<div className="member-section-title px-4 py-2 text-xs uppercase tracking-wider text-blue-400 font-bold">Voice Channel — Nexus Lounge</div>
|
||||
{/* Local user */}
|
||||
{joined && (
|
||||
<div className="member-item flex items-center gap-3 px-4 py-1.5 cursor-pointer bg-blue-900/20">
|
||||
<div className="member-avatar-small w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm relative bg-gradient-to-tr from-blue-600 to-blue-900">
|
||||
<span role="img" aria-label="mic">🎤</span>
|
||||
<div className="online-indicator absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[#0f0f0f] bg-blue-400"></div>
|
||||
<div className="member-section">
|
||||
<div className="member-section-title" style={{ color: '#0066ff' }}>
|
||||
Voice Channel — Nexus Lounge
|
||||
</div>
|
||||
<div className="member-name flex-1 text-sm">You (Voice Connected)</div>
|
||||
<div className="member-activity text-xs text-blue-400">Live</div>
|
||||
{joined && (
|
||||
<div className="member-item voice-active">
|
||||
<div className="member-avatar-small">
|
||||
<span role="img" aria-label="mic">🎤</span>
|
||||
<div className="online-indicator"></div>
|
||||
</div>
|
||||
<div className="member-name">You (Voice Connected)</div>
|
||||
<div className="member-activity">Live</div>
|
||||
<LocalAudio />
|
||||
</div>
|
||||
)}
|
||||
{/* Remote peers */}
|
||||
{peers && peers.map(({ peerId, stream }) => (
|
||||
<div key={peerId} className="member-item flex items-center gap-3 px-4 py-1.5 cursor-pointer bg-blue-900/10">
|
||||
<div className="member-avatar-small w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm relative bg-gradient-to-tr from-blue-600 to-blue-900">
|
||||
<div key={peerId} className="member-item voice-peer">
|
||||
<div className="member-avatar-small">
|
||||
<span role="img" aria-label="mic">🎤</span>
|
||||
<div className="online-indicator absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[#0f0f0f] bg-blue-400"></div>
|
||||
<div className="online-indicator"></div>
|
||||
</div>
|
||||
<div className="member-name flex-1 text-sm">{peerId}</div>
|
||||
<div className="member-activity text-xs text-blue-400">Live</div>
|
||||
<div className="member-name">{peerId}</div>
|
||||
<div className="member-activity">Live</div>
|
||||
<RemoteAudio stream={stream} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{members.map((section, i) => (
|
||||
<div key={i} className="member-section mb-4">
|
||||
<div className="member-section-title px-4 py-2 text-xs uppercase tracking-wider text-gray-500 font-bold">{section.section}</div>
|
||||
{section.users.map((user, j) => (
|
||||
<div key={j} className="member-item flex items-center gap-3 px-4 py-1.5 cursor-pointer hover:bg-[#1a1a1a]">
|
||||
<div className={`member-avatar-small w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm relative bg-gradient-to-tr ${user.avatarBg}`}>
|
||||
{user.avatar}
|
||||
<div className={`online-indicator absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[#0f0f0f] ${user.status === "online" ? "bg-green-400" : user.status === "in-game" ? "bg-blue-500" : user.status === "labs" ? "bg-orange-400" : "bg-gray-700"}`}></div>
|
||||
|
||||
{/* Members by division */}
|
||||
{Object.entries(groupedMembers).map(([section, sectionMembers]) => (
|
||||
<div key={section} className="member-section">
|
||||
<div className="member-section-title">
|
||||
{section} — {sectionMembers.length}
|
||||
</div>
|
||||
{sectionMembers.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="member-item"
|
||||
onClick={() => onOpen("userProfile", { member })}
|
||||
>
|
||||
<div className={`member-avatar-small ${member.avatarBg}`}>
|
||||
{member.avatar}
|
||||
{member.status !== "offline" && (
|
||||
<div
|
||||
className={`online-indicator ${
|
||||
member.status === "online"
|
||||
? "online"
|
||||
: member.status === "in-game"
|
||||
? "in-game"
|
||||
: member.status === "labs"
|
||||
? "labs"
|
||||
: "idle"
|
||||
}`}
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
<div className="member-info">
|
||||
<div className="member-name">{member.name}</div>
|
||||
{member.activity && (
|
||||
<div className="member-activity">{member.activity}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="member-name flex-1 text-sm">{user.name}</div>
|
||||
{user.activity && <div className="member-activity text-xs text-gray-500">{user.activity}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,130 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useMessageStore } from "../../stores/messageStore";
|
||||
import { useMemberStore } from "../../stores/memberStore";
|
||||
import { useModalStore } from "../../stores/modalStore";
|
||||
import { Edit2, Trash2 } from "lucide-react";
|
||||
|
||||
export default function Message(props) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editedContent, setEditedContent] = useState(props.text);
|
||||
|
||||
const saveEditedMessage = useMessageStore((state) => state.saveEditedMessage);
|
||||
const deleteMessage = useMessageStore((state) => state.deleteMessage);
|
||||
const getCurrentUser = useMemberStore((state) => state.getCurrentUser);
|
||||
const onOpen = useModalStore((state) => state.onOpen);
|
||||
|
||||
const currentUser = getCurrentUser();
|
||||
const isOwnMessage = props.author === currentUser?.name;
|
||||
|
||||
const handleEdit = () => {
|
||||
if (editedContent.trim()) {
|
||||
saveEditedMessage(props.id, editedContent);
|
||||
setIsEditing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (confirm("Delete this message?")) {
|
||||
deleteMessage(props.id);
|
||||
}
|
||||
};
|
||||
|
||||
if (props.type === "system") {
|
||||
return (
|
||||
<div className={`message-system ${props.className} bg-[#0f0f0f] border-l-4 pl-4 pr-4 py-3 mb-4 text-sm`}>
|
||||
<div className={`system-label ${props.className} text-xs uppercase tracking-wider font-bold mb-1`}>[{props.label}] System Announcement</div>
|
||||
<div className={`message-system ${props.className}`}>
|
||||
<div className="system-label">[{props.label}] System Announcement</div>
|
||||
<div>{props.text}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="message flex gap-4 mb-5 p-3 rounded transition hover:bg-[#0f0f0f]">
|
||||
<div className={`message-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold text-base flex-shrink-0 bg-gradient-to-tr ${props.avatarBg}`}>{props.avatar}</div>
|
||||
<div className="message-content flex-1">
|
||||
<div className="message-header flex items-baseline gap-3 mb-1">
|
||||
<span className="message-author font-bold">{props.author}</span>
|
||||
<div
|
||||
className="message"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<div
|
||||
className={`message-avatar ${props.avatarBg}`}
|
||||
onClick={() => onOpen("userProfile", { username: props.author })}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{props.avatar}
|
||||
</div>
|
||||
<div className="message-content">
|
||||
<div className="message-header">
|
||||
<span className="message-author">{props.author}</span>
|
||||
{props.badge && (
|
||||
<span className={`message-badge ${props.className} text-xs px-2 py-1 rounded uppercase tracking-wider font-bold`}>{props.badge}</span>
|
||||
<span className={`message-badge ${props.className}`}>
|
||||
{props.badge}
|
||||
</span>
|
||||
)}
|
||||
<span className="message-time text-xs text-gray-500">{props.time}</span>
|
||||
<span className="message-time">{props.time}</span>
|
||||
{props.isEdited && <span className="message-edited">(edited)</span>}
|
||||
</div>
|
||||
<div className="message-text leading-relaxed text-gray-300">{props.text}</div>
|
||||
|
||||
{isEditing ? (
|
||||
<div className="message-edit">
|
||||
<input
|
||||
type="text"
|
||||
value={editedContent}
|
||||
onChange={(e) => setEditedContent(e.target.value)}
|
||||
className="message-edit-input"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={handleEdit}
|
||||
className="message-edit-save"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsEditing(false);
|
||||
setEditedContent(props.text);
|
||||
}}
|
||||
className="message-edit-cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="message-text">{editedContent}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{isHovered && !isEditing && (
|
||||
<div className="message-actions">
|
||||
<button
|
||||
onClick={() => onOpen("thread", { message: props })}
|
||||
className="message-action-edit"
|
||||
title="Reply in thread"
|
||||
style={{ marginRight: '4px' }}
|
||||
>
|
||||
💬
|
||||
</button>
|
||||
{isOwnMessage && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="message-action-edit"
|
||||
title="Edit message"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="message-action-delete"
|
||||
title="Delete message"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,93 @@
|
|||
import React, { useState } from "react";
|
||||
import { useAeThex } from "../aethex/AeThexProvider.jsx";
|
||||
|
||||
const DEFAULT_CHANNEL_ID = "general";
|
||||
import React, { useState, useRef } from "react";
|
||||
import { useChannelStore } from "../../stores/channelStore.js";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
import { useUserSettingsStore } from "../../stores/userSettingsStore.js";
|
||||
import { useSocketEmit } from "../../hooks/useSocket.js";
|
||||
import { messageService } from "../../react-app/services/apiService.js";
|
||||
import EmojiPicker from "../../react-app/components/Chat/EmojiPicker.jsx";
|
||||
|
||||
export default function MessageInput() {
|
||||
const [text, setText] = useState("");
|
||||
const { sendMessage, user, currentChannelId, isAuthenticated } = useAeThex();
|
||||
const [sending, setSending] = useState(false);
|
||||
const typingTimeoutRef = useRef(null);
|
||||
|
||||
const currentChannelId = useChannelStore((state) => state.currentChannelId);
|
||||
const addMessage = useMessageStore((state) => state.addMessage);
|
||||
const { sendMessage, emitTyping } = useSocketEmit();
|
||||
const user = useUserSettingsStore((state) => state.user);
|
||||
|
||||
const handleSend = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!text.trim() || !user || !isAuthenticated) return;
|
||||
await sendMessage(currentChannelId || DEFAULT_CHANNEL_ID, text);
|
||||
if (!text.trim() || sending) return;
|
||||
|
||||
setSending(true);
|
||||
if (!currentChannelId || !user?.id) {
|
||||
setSending(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Send via API
|
||||
const response = await messageService.create(currentChannelId, text.trim());
|
||||
const newMessage = response.data || response;
|
||||
|
||||
// Add to store
|
||||
addMessage(newMessage);
|
||||
|
||||
// Also emit via socket for real-time updates if available
|
||||
sendMessage(currentChannelId, text.trim(), user.id, user.username);
|
||||
|
||||
setText("");
|
||||
} catch (error) {
|
||||
console.error('Failed to send message:', error);
|
||||
alert('Failed to send message. Please try again.');
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTyping = (e) => {
|
||||
setText(e.target.value);
|
||||
|
||||
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
|
||||
|
||||
if (currentChannelId && user?.id) {
|
||||
emitTyping(currentChannelId, user.id, user.username);
|
||||
|
||||
typingTimeoutRef.current = setTimeout(() => {
|
||||
// Auto-clears on server side
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="flex items-center gap-2" onSubmit={handleSend}>
|
||||
<button type="button" className="attachButton w-10 h-10 flex items-center justify-center rounded bg-[#1a1a1a] text-xl text-gray-400 mr-2">+</button>
|
||||
<div className="message-input-container">
|
||||
<form className="message-input-form" onSubmit={handleSend}>
|
||||
<button
|
||||
type="button"
|
||||
className="attach-button"
|
||||
title="Attach file"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
className="message-input flex-1 bg-[#0f0f0f] border border-[#1a1a1a] rounded-lg px-4 py-3 text-gray-200 text-sm focus:outline-none focus:border-blue-500 placeholder:text-gray-500"
|
||||
placeholder="Message #general (Foundation infrastructure channel)"
|
||||
className="message-input"
|
||||
placeholder={`Message #${(currentChannelId || 'general')}`}
|
||||
maxLength={2000}
|
||||
value={text}
|
||||
onChange={e => setText(e.target.value)}
|
||||
disabled={!user || !isAuthenticated}
|
||||
onChange={handleTyping}
|
||||
disabled={sending}
|
||||
/>
|
||||
<button type="submit" className="sendButton w-10 h-10 flex items-center justify-center rounded bg-blue-600 text-xl text-white ml-2"> 3a4</button>
|
||||
<EmojiPicker onChange={(emoji) => setText(text + emoji)} />
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!text.trim() || sending}
|
||||
className="send-button"
|
||||
>
|
||||
{sending ? '⏳' : '➤'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
76
astro-site/src/components/mockup/NotificationsPanel.jsx
Normal file
76
astro-site/src/components/mockup/NotificationsPanel.jsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import React from "react";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
|
||||
export default function NotificationsPanel() {
|
||||
const messages = useMessageStore((state) => state.messages);
|
||||
const unreadMessages = messages.filter((m) => m.unread);
|
||||
const mentions = messages.filter((m) => m.isMention && m.unread);
|
||||
|
||||
const handleClearAll = () => {
|
||||
messages.forEach((m) => (m.unread = false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
padding: "16px",
|
||||
maxWidth: "400px",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
||||
<h3 style={{ color: "#fff", margin: 0 }}>Notifications</h3>
|
||||
{unreadMessages.length > 0 && (
|
||||
<button
|
||||
onClick={handleClearAll}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#0066ff",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.85rem",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{mentions.length > 0 && (
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<h4 style={{ color: "#ff0000", fontSize: "0.85rem", textTransform: "uppercase", margin: "0 0 8px 0" }}>
|
||||
Mentions ({mentions.length})
|
||||
</h4>
|
||||
{mentions.slice(0, 3).map((m) => (
|
||||
<div key={m.id} style={{ padding: "8px", background: "#0f0f0f", borderRadius: "4px", marginBottom: "8px", fontSize: "0.85rem", color: "#ccc" }}>
|
||||
<strong style={{ color: "#ff0000" }}>{m.author}:</strong> {m.content.substring(0, 50)}...
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{unreadMessages.length > mentions.length && (
|
||||
<div>
|
||||
<h4 style={{ color: "#0066ff", fontSize: "0.85rem", textTransform: "uppercase", margin: "0 0 8px 0" }}>
|
||||
Unread ({unreadMessages.length - mentions.length})
|
||||
</h4>
|
||||
{unreadMessages
|
||||
.filter((m) => !m.isMention)
|
||||
.slice(0, 3)
|
||||
.map((m) => (
|
||||
<div key={m.id} style={{ padding: "8px", background: "#0f0f0f", borderRadius: "4px", marginBottom: "8px", fontSize: "0.85rem", color: "#ccc" }}>
|
||||
<strong>{m.author}:</strong> {m.content.substring(0, 50)}...
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{unreadMessages.length === 0 && (
|
||||
<p style={{ color: "#666", textAlign: "center", margin: 0 }}>All caught up! ✓</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
astro-site/src/components/mockup/PinnedMessagesPanel.jsx
Normal file
53
astro-site/src/components/mockup/PinnedMessagesPanel.jsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React from "react";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
|
||||
export default function PinnedMessagesPanel() {
|
||||
const messages = useMessageStore((state) => state.messages);
|
||||
const pinMessage = useMessageStore((state) => state.pinMessage);
|
||||
const unpinMessage = useMessageStore((state) => state.unpinMessage);
|
||||
|
||||
const pinnedMessages = messages.filter((m) => m.pinned);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
padding: "16px",
|
||||
maxHeight: "600px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ color: "#fff", marginTop: 0, marginBottom: "16px", display: "flex", gap: "8px" }}>
|
||||
📌 Pinned Messages ({pinnedMessages.length})
|
||||
</h3>
|
||||
|
||||
{pinnedMessages.length === 0 ? (
|
||||
<p style={{ color: "#666", textAlign: "center" }}>No pinned messages</p>
|
||||
) : (
|
||||
pinnedMessages.map((m) => (
|
||||
<div key={m.id} style={{ padding: "12px", background: "#0f0f0f", borderRadius: "4px", marginBottom: "12px" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", marginBottom: "4px" }}>
|
||||
<strong style={{ color: "#0066ff" }}>{m.author}</strong>
|
||||
<button
|
||||
onClick={() => unpinMessage(m.id)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<p style={{ color: "#ccc", margin: "0 0 4px 0", fontSize: "0.9rem" }}>{m.content}</p>
|
||||
<p style={{ color: "#666", margin: 0, fontSize: "0.75rem" }}>{m.timestamp}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
128
astro-site/src/components/mockup/QuickSwitcher.jsx
Normal file
128
astro-site/src/components/mockup/QuickSwitcher.jsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useChannelStore } from "../../stores/channelStore.js";
|
||||
import { useDirectMessageStore } from "../../stores/directMessageStore.js";
|
||||
|
||||
export default function QuickSwitcher() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const channels = useChannelStore((state) => state.channels);
|
||||
const setCurrentChannel = useChannelStore((state) => state.setCurrentChannel);
|
||||
const conversations = useDirectMessageStore((state) => state.conversations);
|
||||
const setCurrentConversation = useDirectMessageStore((state) => state.setCurrentConversation);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyPress);
|
||||
return () => window.removeEventListener("keydown", handleKeyPress);
|
||||
}, [isOpen]);
|
||||
|
||||
const filteredChannels = channels.filter((c) => c.name.toLowerCase().includes(query.toLowerCase())).slice(0, 5);
|
||||
const filteredConversations = conversations
|
||||
.filter((c) => c.participantName.toLowerCase().includes(query.toLowerCase()))
|
||||
.slice(0, 5);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
paddingTop: "100px",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "500px",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Jump to channel or DM... (Ctrl+K)"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
autoFocus
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
padding: "16px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
fontSize: "1rem",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ maxHeight: "400px", overflowY: "auto" }}>
|
||||
{filteredChannels.map((c) => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => {
|
||||
setCurrentChannel(c.id);
|
||||
setIsOpen(false);
|
||||
setQuery("");
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px 16px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #0f0f0f",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
# {c.name}
|
||||
</button>
|
||||
))}
|
||||
{filteredConversations.map((c) => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => {
|
||||
setCurrentConversation(c.id);
|
||||
setIsOpen(false);
|
||||
setQuery("");
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px 16px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #0f0f0f",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
💬 {c.participantName}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
astro-site/src/components/mockup/ServerHeader.jsx
Normal file
91
astro-site/src/components/mockup/ServerHeader.jsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import React from "react";
|
||||
import { UserPlus, Settings, PlusCircle, Trash, LogOut, ChevronDown } from "lucide-react";
|
||||
import { useModalStore } from "../../stores/modalStore";
|
||||
import { useServerStore } from "../../stores/serverStore";
|
||||
import { useMemberStore } from "../../stores/memberStore";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
|
||||
export function ServerHeader({ server, role }) {
|
||||
const onOpen = useModalStore((state) => state.onOpen);
|
||||
const currentServer = useServerStore((state) => state.getCurrentServer());
|
||||
const getCurrentUser = useMemberStore((state) => state.getCurrentUser);
|
||||
|
||||
const displayServer = currentServer || server;
|
||||
const currentUser = getCurrentUser();
|
||||
const isAdmin = (role || currentUser?.role) === "ADMIN";
|
||||
const isModerator = isAdmin || (role || currentUser?.role) === "MODERATOR";
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="focus:outline-none" asChild>
|
||||
<button className="w-full text-md font-semibold px-3 flex items-center h-12 border-neutral-200 dark:border-neutral-800 border-b-2 hover:bg-zinc-700/10 dark:hover:bg-zinc-700/50 transition">
|
||||
{displayServer?.name}
|
||||
<ChevronDown className="h-5 w-5 ml-auto" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56 text-xs font-medium text-black dark:text-neutral-400 space-y-[2px]">
|
||||
{isModerator && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpen("invite", { server: displayServer })}
|
||||
className="text-indigo-600 dark:text-indigo-400 px-3 py-2 text-sm cursor-pointer"
|
||||
>
|
||||
Invite People
|
||||
<UserPlus className="h-4 w-4 ml-auto" />
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpen("editServer", { server: displayServer })}
|
||||
className="px-3 py-2 text-sm cursor-pointer"
|
||||
>
|
||||
Server Settings
|
||||
<Settings className="h-4 w-4 ml-auto" />
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpen("members", { server: displayServer })}
|
||||
className="px-3 py-2 text-sm cursor-pointer"
|
||||
>
|
||||
Manage Members
|
||||
<Settings className="h-4 w-4 ml-auto" />
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{isModerator && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpen("createChannel", { server: displayServer })}
|
||||
className="px-3 py-2 text-sm cursor-pointer"
|
||||
>
|
||||
Create Channel
|
||||
<PlusCircle className="h-4 w-4 ml-auto" />
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{isModerator && <DropdownMenuSeparator />}
|
||||
{isAdmin && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpen("deleteServer", { server: displayServer })}
|
||||
className="text-rose-500 px-3 py-2 text-sm cursor-pointer"
|
||||
>
|
||||
Delete Server
|
||||
<Trash className="h-4 w-4 ml-auto" />
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{!isAdmin && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpen("leaveServer", { server: displayServer })}
|
||||
className="text-rose-500 px-3 py-2 text-sm cursor-pointer"
|
||||
>
|
||||
Leave Server
|
||||
<LogOut className="h-4 w-4 ml-auto" />
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,30 +1,59 @@
|
|||
import React from "react";
|
||||
|
||||
const servers = [
|
||||
{ id: "foundation", label: "F", active: true, className: "foundation" },
|
||||
{ id: "corporation", label: "C", active: false, className: "corporation" },
|
||||
{ id: "labs", label: "L", active: false, className: "labs" },
|
||||
{ id: "divider" },
|
||||
{ id: "community1", label: "AG", active: false, className: "community" },
|
||||
{ id: "community2", label: "RD", active: false, className: "community" },
|
||||
{ id: "add", label: "+", active: false, className: "community" },
|
||||
];
|
||||
import { useServerStore } from "../../stores/serverStore.js";
|
||||
import { useModalStore } from "../../stores/modalStore.js";
|
||||
|
||||
export default function ServerList() {
|
||||
const { servers, currentServerId, setCurrentServer } = useServerStore();
|
||||
const { onOpen } = useModalStore();
|
||||
|
||||
const handleServerClick = (serverId) => {
|
||||
if (serverId === "profile") {
|
||||
// Open profile modal
|
||||
} else if (serverId === "add") {
|
||||
onOpen("createServer");
|
||||
} else {
|
||||
setCurrentServer(serverId);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="server-list flex flex-col items-center py-3 gap-3 w-20 bg-[#0d0d0d] border-r border-[#1a1a1a]">
|
||||
{servers.map((srv, i) =>
|
||||
srv.id === "divider" ? (
|
||||
<div key={i} className="server-divider w-10 h-0.5 bg-[#1a1a1a] my-1" />
|
||||
) : (
|
||||
<div className="server-list">
|
||||
{/* Trinity Servers */}
|
||||
{servers.slice(0, 3).map((srv) => (
|
||||
<div
|
||||
key={srv.id}
|
||||
className={`server-icon ${srv.className} ${srv.active ? "active" : ""} w-14 h-14 rounded-xl flex items-center justify-center font-bold text-lg cursor-pointer transition-all relative`}
|
||||
onClick={() => handleServerClick(srv.id)}
|
||||
className={`server-icon ${srv.id} ${currentServerId === srv.id ? "active" : ""}`}
|
||||
title={srv.name}
|
||||
>
|
||||
{srv.label}
|
||||
{srv.icon}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="server-divider" />
|
||||
|
||||
{/* Community Servers */}
|
||||
{servers.slice(3).map((srv) => (
|
||||
<div
|
||||
key={srv.id}
|
||||
onClick={() => handleServerClick(srv.id)}
|
||||
className={`server-icon community ${currentServerId === srv.id ? "active" : ""}`}
|
||||
title={srv.name}
|
||||
>
|
||||
{srv.icon}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="server-divider" />
|
||||
|
||||
{/* Add Server Button */}
|
||||
<div
|
||||
onClick={() => handleServerClick("add")}
|
||||
className="server-icon community"
|
||||
title="Create or join server"
|
||||
>
|
||||
+
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
94
astro-site/src/components/mockup/ServerSearchBar.jsx
Normal file
94
astro-site/src/components/mockup/ServerSearchBar.jsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import React, { useState, useMemo } from "react";
|
||||
import { useChannelStore } from "../../stores/channelStore.js";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
|
||||
export default function ServerSearchBar() {
|
||||
const [query, setQuery] = useState("");
|
||||
const [results, setResults] = useState([]);
|
||||
const channels = useChannelStore((state) => state.channels);
|
||||
const messages = useMessageStore((state) => state.messages);
|
||||
const setCurrentChannel = useChannelStore((state) => state.setCurrentChannel);
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setQuery(value);
|
||||
if (!value.trim()) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const q = value.toLowerCase();
|
||||
const matchedChannels = channels.filter((c) => c.name.toLowerCase().includes(q));
|
||||
const matchedMessages = messages.filter((m) => m.content.toLowerCase().includes(q)).slice(0, 5);
|
||||
|
||||
setResults([
|
||||
...matchedChannels.map((c) => ({ type: "channel", ...c })),
|
||||
...matchedMessages.map((m) => ({ type: "message", ...m })),
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative", marginBottom: "12px" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search server..."
|
||||
value={query}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
padding: "8px 12px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
/>
|
||||
|
||||
{results.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
right: 0,
|
||||
marginTop: "4px",
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto",
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{results.map((r) => (
|
||||
<button
|
||||
key={r.id}
|
||||
onClick={() => {
|
||||
if (r.type === "channel") {
|
||||
setCurrentChannel(r.id);
|
||||
}
|
||||
setQuery("");
|
||||
setResults([]);
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px 12px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #2a2a2a",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
textAlign: "left",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
{r.type === "channel" ? `# ${r.name}` : `💬 ${r.author}: ${r.content.substring(0, 30)}...`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
astro-site/src/components/mockup/StatusSelector.jsx
Normal file
104
astro-site/src/components/mockup/StatusSelector.jsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import React, { useState } from "react";
|
||||
import { usePresenceStore } from "../../stores/presenceStore.js";
|
||||
|
||||
export default function StatusSelector() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const status = usePresenceStore((state) => state.status);
|
||||
const setStatus = usePresenceStore((state) => state.setStatus);
|
||||
const customStatus = usePresenceStore((state) => state.customStatus);
|
||||
const setCustomStatus = usePresenceStore((state) => state.setCustomStatus);
|
||||
|
||||
const statuses = [
|
||||
{ id: "online", name: "Online", icon: "🟢", color: "#00ff00" },
|
||||
{ id: "idle", name: "Idle", icon: "🟡", color: "#ffa500" },
|
||||
{ id: "dnd", name: "Do Not Disturb", icon: "🔴", color: "#ff0000" },
|
||||
{ id: "invisible", name: "Invisible", icon: "⚫", color: "#666" },
|
||||
];
|
||||
|
||||
const currentStatus = statuses.find((s) => s.id === status);
|
||||
|
||||
return (
|
||||
<div className="status-selector" style={{ position: "relative" }}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
padding: "8px 12px",
|
||||
cursor: "pointer",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
<span>{currentStatus?.icon}</span>
|
||||
<span>{currentStatus?.name}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
marginTop: "8px",
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
minWidth: "200px",
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{statuses.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
onClick={() => {
|
||||
setStatus(s.id);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px 16px",
|
||||
background: status === s.id ? "#0066ff" : "transparent",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #2a2a2a",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
fontSize: "0.9rem",
|
||||
}}
|
||||
>
|
||||
<span>{s.icon}</span>
|
||||
<span>{s.name}</span>
|
||||
</button>
|
||||
))}
|
||||
<div style={{ padding: "12px", borderTop: "1px solid #2a2a2a" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Set custom status..."
|
||||
value={customStatus}
|
||||
onChange={(e) => setCustomStatus(e.target.value)}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "6px 8px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
106
astro-site/src/components/mockup/ThreadPanel.jsx
Normal file
106
astro-site/src/components/mockup/ThreadPanel.jsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import React, { useState } from "react";
|
||||
import { useMessageStore } from "../../stores/messageStore.js";
|
||||
|
||||
export default function ThreadPanel({ messageId }) {
|
||||
const [replyText, setReplyText] = useState("");
|
||||
const messages = useMessageStore((state) => state.messages);
|
||||
const addMessage = useMessageStore((state) => state.addMessage);
|
||||
|
||||
const parentMessage = messages.find((m) => m.id === messageId);
|
||||
const threadReplies = messages.filter((m) => m.threadId === messageId);
|
||||
|
||||
const handleReply = () => {
|
||||
if (!replyText.trim()) return;
|
||||
|
||||
const newReply = {
|
||||
id: `msg-${Date.now()}`,
|
||||
channelId: parentMessage.channelId,
|
||||
senderId: "user-1",
|
||||
senderName: "ShadowForce",
|
||||
text: replyText,
|
||||
timestamp: new Date().toLocaleTimeString(),
|
||||
threadId: messageId,
|
||||
edited: false,
|
||||
};
|
||||
|
||||
addMessage(newReply);
|
||||
setReplyText("");
|
||||
};
|
||||
|
||||
if (!parentMessage) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "6px",
|
||||
padding: "16px",
|
||||
maxHeight: "600px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ color: "#fff", margin: "0 0 16px 0" }}>Thread</h3>
|
||||
|
||||
{/* Parent Message */}
|
||||
<div style={{ padding: "12px", background: "#0f0f0f", borderRadius: "4px", marginBottom: "16px", borderLeft: "3px solid #0066ff" }}>
|
||||
<strong style={{ color: "#0066ff" }}>{parentMessage.author}</strong>
|
||||
<p style={{ color: "#e0e0e0", margin: "4px 0" }}>{parentMessage.content}</p>
|
||||
<p style={{ color: "#666", fontSize: "0.75rem", margin: 0 }}>{parentMessage.timestamp}</p>
|
||||
</div>
|
||||
|
||||
{/* Replies */}
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
{threadReplies.length === 0 ? (
|
||||
<p style={{ color: "#666" }}>No replies yet</p>
|
||||
) : (
|
||||
threadReplies.map((reply) => (
|
||||
<div key={reply.id} style={{ padding: "8px", marginBottom: "8px", borderLeft: "2px solid #666", paddingLeft: "12px" }}>
|
||||
<strong style={{ color: "#999" }}>{reply.senderName}</strong>
|
||||
<p style={{ color: "#ccc", margin: "2px 0", fontSize: "0.9rem" }}>{reply.text}</p>
|
||||
<p style={{ color: "#666", fontSize: "0.75rem", margin: 0 }}>{reply.timestamp}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Reply Input */}
|
||||
<div style={{ borderTop: "1px solid #2a2a2a", paddingTop: "12px", marginTop: "12px" }}>
|
||||
<textarea
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
placeholder="Reply in thread..."
|
||||
rows={2}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "8px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
fontSize: "0.85rem",
|
||||
marginBottom: "8px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={handleReply}
|
||||
disabled={!replyText.trim()}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px",
|
||||
background: replyText.trim() ? "#0066ff" : "#2a2a2a",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: replyText.trim() ? "pointer" : "not-allowed",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
astro-site/src/components/mockup/VoiceCallButton.jsx
Normal file
67
astro-site/src/components/mockup/VoiceCallButton.jsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useModalStore } from '../../stores/modalStore.js';
|
||||
import { useSocketEmit } from '../../hooks/useSocket.js';
|
||||
import { Phone, PhoneOff } from 'lucide-react';
|
||||
|
||||
export default function VoiceCallButton() {
|
||||
const [isInCall, setIsInCall] = useState(false);
|
||||
const { onOpen } = useModalStore();
|
||||
const { startCall, endCall } = useSocketEmit();
|
||||
|
||||
const handleStartCall = async () => {
|
||||
const roomName = `call-${Date.now()}`;
|
||||
setIsInCall(true);
|
||||
|
||||
try {
|
||||
// Fetch token from backend
|
||||
const response = await fetch('http://localhost:3000/api/livekit/token', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
roomName,
|
||||
participantName: 'ShadowForce',
|
||||
role: 'participant',
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
startCall(roomName, 'user-1', 'ShadowForce');
|
||||
onOpen('voiceCall', { roomName, token: data.token, liveKitUrl: data.url });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to start call:', error);
|
||||
setIsInCall(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndCall = () => {
|
||||
setIsInCall(false);
|
||||
endCall(`call-${Date.now()}`);
|
||||
// Also close the modal if it's open
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={isInCall ? handleEndCall : handleStartCall}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition ${
|
||||
isInCall
|
||||
? 'bg-red-600 hover:bg-red-700 text-white'
|
||||
: 'bg-green-600 hover:bg-green-700 text-white'
|
||||
}`}
|
||||
title={isInCall ? 'End call' : 'Start voice call'}
|
||||
>
|
||||
{isInCall ? (
|
||||
<>
|
||||
<PhoneOff size={18} />
|
||||
End Call
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Phone size={18} />
|
||||
Start Call
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -7,15 +13,17 @@ html, body, #root {
|
|||
font-family: 'Roboto Mono', monospace;
|
||||
background: #0a0a0a;
|
||||
color: #e0e0e0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Scanline effect */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
|
|
@ -27,31 +35,754 @@ body::before {
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
.connect-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.server-icon, .user-avatar, .member-avatar-small {
|
||||
background: rgba(26,26,26,0.85);
|
||||
backdrop-filter: blur(6px);
|
||||
/* Server Sidebar */
|
||||
.server-list {
|
||||
width: 80px;
|
||||
background: #0d0d0d;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.channel-item.active, .channel-item:hover, .member-item:hover {
|
||||
background: rgba(26,26,26,0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
.server-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-input, .message-input-container {
|
||||
background: rgba(15,15,15,0.95);
|
||||
backdrop-filter: blur(4px);
|
||||
.server-icon:hover {
|
||||
border-radius: 12px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.server-icon.active {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.server-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
width: 4px;
|
||||
height: 0;
|
||||
transition: height 0.3s;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.server-icon.active::before {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.server-icon.foundation {
|
||||
background: linear-gradient(135deg, #ff0000 0%, #990000 100%);
|
||||
}
|
||||
|
||||
.server-icon.foundation.active::before {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.server-icon.corporation {
|
||||
background: linear-gradient(135deg, #0066ff 0%, #003380 100%);
|
||||
}
|
||||
|
||||
.server-icon.corporation.active::before {
|
||||
background: #0066ff;
|
||||
}
|
||||
|
||||
.server-icon.labs {
|
||||
background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
|
||||
}
|
||||
|
||||
.server-icon.labs.active::before {
|
||||
background: #ffa500;
|
||||
}
|
||||
|
||||
.server-icon.community {
|
||||
background: #1a1a1a;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.server-divider {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #1a1a1a;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Channel Sidebar */
|
||||
.channel-sidebar {
|
||||
width: 280px;
|
||||
background: #0f0f0f;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.server-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.server-badge {
|
||||
font-size: 0.7em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.server-badge.foundation {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
color: #ff0000;
|
||||
border: 1px solid #ff0000;
|
||||
}
|
||||
|
||||
.server-badge.corporation {
|
||||
background: rgba(0, 102, 255, 0.2);
|
||||
color: #0066ff;
|
||||
border: 1px solid #0066ff;
|
||||
}
|
||||
|
||||
.server-badge.labs {
|
||||
background: rgba(255, 165, 0, 0.2);
|
||||
color: #ffa500;
|
||||
border: 1px solid #ffa500;
|
||||
}
|
||||
|
||||
.channel-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.channel-category {
|
||||
padding: 16px 16px 8px 16px;
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.add-channel-button {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel-category:hover .add-channel-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.add-channel-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.channel-item {
|
||||
padding: 8px 16px;
|
||||
margin: 2px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.95em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.channel-item:hover {
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.channel-item.active {
|
||||
background: #1a1a1a;
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.channel-icon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.channel-badge {
|
||||
font-size: 0.75em;
|
||||
background: #ff0000;
|
||||
color: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* User Presence Panel */
|
||||
.user-presence {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #00ff00;
|
||||
box-shadow: 0 0 8px #00ff00;
|
||||
}
|
||||
|
||||
/* Chat Area */
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.channel-name-header {
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.chat-tools {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-tool {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.chat-tool:hover {
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message-edited {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.message-badge {
|
||||
font-size: 0.65em;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-badge.foundation {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.message-badge.corporation {
|
||||
background: rgba(0, 102, 255, 0.2);
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.message-badge.labs {
|
||||
background: rgba(255, 165, 0, 0.2);
|
||||
color: #ffa500;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.message:hover .message-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-action-edit,
|
||||
.message-action-delete {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-action-edit:hover {
|
||||
background: rgba(0, 102, 255, 0.2);
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.message-action-delete:hover {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.message-edit {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-edit-input {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #0066ff;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.message-edit-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.message-edit-save,
|
||||
.message-edit-cancel {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.message-edit-save {
|
||||
background: #0066ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-edit-save:hover {
|
||||
background: #0052cc;
|
||||
}
|
||||
|
||||
.message-edit-cancel {
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-edit-cancel:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.message-system {
|
||||
background: #0f0f0f;
|
||||
border-left: 3px solid;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.message-system.foundation {
|
||||
border-color: #ff0000;
|
||||
}
|
||||
|
||||
.message-system.corporation {
|
||||
border-color: #0066ff;
|
||||
}
|
||||
|
||||
.message-system.labs {
|
||||
border-color: #ffa500;
|
||||
}
|
||||
|
||||
.system-label {
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.system-label.foundation { color: #ff0000; }
|
||||
.system-label.corporation { color: #0066ff; }
|
||||
.system-label.labs { color: #ffa500; }
|
||||
|
||||
/* Message Input */
|
||||
.message-input-container {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.message-input-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.attach-button,
|
||||
.send-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #1a1a1a;
|
||||
color: #666;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.attach-button:hover {
|
||||
background: #2a2a2a;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: #0066ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: #0052cc;
|
||||
}
|
||||
|
||||
.send-button:disabled {
|
||||
background: #2a2a2a;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
background: #0f0f0f;
|
||||
border: 1px solid #1a1a1a;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.95em;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.message-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066ff;
|
||||
}
|
||||
|
||||
.message-input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: #666;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #666;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Member Sidebar */
|
||||
.member-sidebar {
|
||||
width: 280px;
|
||||
background: #0f0f0f;
|
||||
border-left: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.member-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-size: 0.85em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.manage-members-button {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.manage-members-button:hover {
|
||||
background: #1a1a1a;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.member-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.member-section-title {
|
||||
padding: 8px 16px;
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
padding: 6px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.member-item.voice-active {
|
||||
background: rgba(0, 102, 255, 0.1);
|
||||
}
|
||||
|
||||
.member-item.voice-peer {
|
||||
background: rgba(0, 102, 255, 0.05);
|
||||
}
|
||||
|
||||
.member-avatar-small {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8em;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0f0f0f;
|
||||
}
|
||||
|
||||
.online-indicator.online { background: #00ff00; }
|
||||
.online-indicator.in-game { background: #0066ff; }
|
||||
.online-indicator.labs { background: #ffa500; }
|
||||
.online-indicator.idle { background: #666; }
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.member-activity {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #111;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #222;
|
||||
background: #1a1a1a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #2a2a2a;}
|
||||
107
astro-site/src/components/mockup/modals/CreateChannelModal.jsx
Normal file
107
astro-site/src/components/mockup/modals/CreateChannelModal.jsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import React, { useState } from "react";
|
||||
import { useChannelStore } from "../../../stores/channelStore";
|
||||
import { useModalStore } from "../../../stores/modalStore";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
export function CreateChannelModal() {
|
||||
const isOpen = useModalStore((state) => state.isOpen && state.type === "createChannel");
|
||||
const onClose = useModalStore((state) => state.onClose);
|
||||
const addChannel = useChannelStore((state) => state.addChannel);
|
||||
|
||||
const [channelName, setChannelName] = useState("");
|
||||
const [channelCategory, setChannelCategory] = useState("Development");
|
||||
const [channelType, setChannelType] = useState("text");
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleCreate = () => {
|
||||
if (!channelName.trim()) return;
|
||||
|
||||
const newChannel = {
|
||||
id: channelName.toLowerCase().replace(/\s+/g, "-"),
|
||||
name: channelName,
|
||||
category: channelCategory,
|
||||
type: channelType,
|
||||
};
|
||||
|
||||
addChannel(newChannel);
|
||||
setChannelName("");
|
||||
setChannelCategory("Development");
|
||||
setChannelType("text");
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-[#313338] rounded-lg p-0 w-full max-w-md flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[#1a1a1a]">
|
||||
<h2 className="text-lg font-bold">Create Channel</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 hover:bg-[#2c2f33] rounded transition"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Channel Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={channelName}
|
||||
onChange={(e) => setChannelName(e.target.value)}
|
||||
placeholder="e.g., announcements"
|
||||
className="w-full bg-[#1a1a1a] border border-[#404249] rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Category</label>
|
||||
<select
|
||||
value={channelCategory}
|
||||
onChange={(e) => setChannelCategory(e.target.value)}
|
||||
className="w-full bg-[#1a1a1a] border border-[#404249] rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="Announcements">Announcements</option>
|
||||
<option value="Development">Development</option>
|
||||
<option value="Support">Support</option>
|
||||
<option value="Voice Channels">Voice Channels</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Type</label>
|
||||
<select
|
||||
value={channelType}
|
||||
onChange={(e) => setChannelType(e.target.value)}
|
||||
className="w-full bg-[#1a1a1a] border border-[#404249] rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="text">Text</option>
|
||||
<option value="voice">Voice</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-3 p-4 border-t border-[#1a1a1a]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-gray-400 hover:text-white transition text-sm font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={!channelName.trim()}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white rounded transition text-sm font-medium"
|
||||
>
|
||||
Create Channel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
156
astro-site/src/components/mockup/modals/CreateServerModal.jsx
Normal file
156
astro-site/src/components/mockup/modals/CreateServerModal.jsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { useServerStore } from "../../../stores/serverStore.js";
|
||||
|
||||
export default function CreateServerModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const { addServer, setCurrentServer } = useServerStore();
|
||||
const [serverName, setServerName] = useState("");
|
||||
const [serverIcon, setServerIcon] = useState("🎮");
|
||||
const [mode, setMode] = useState("create"); // 'create' or 'join'
|
||||
const [joinCode, setJoinCode] = useState("");
|
||||
|
||||
if (!isOpen || type !== "createServer") return null;
|
||||
|
||||
const handleCreate = () => {
|
||||
if (!serverName.trim()) return;
|
||||
|
||||
const newServer = {
|
||||
id: `server-${Date.now()}`,
|
||||
name: serverName,
|
||||
icon: serverIcon,
|
||||
description: `${serverName} community server`,
|
||||
active: false,
|
||||
};
|
||||
|
||||
addServer(newServer);
|
||||
setCurrentServer(newServer.id);
|
||||
setServerName("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleJoin = () => {
|
||||
if (!joinCode.trim()) return;
|
||||
// In a real app, this would validate the code against a backend
|
||||
alert("Joining server with code: " + joinCode);
|
||||
setJoinCode("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div
|
||||
className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-8 w-full max-w-md max-h-96 overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">Create or Join Server</h2>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white text-2xl">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mode Tabs */}
|
||||
<div className="flex gap-2 mb-6">
|
||||
<button
|
||||
onClick={() => setMode("create")}
|
||||
className={`flex-1 py-2 rounded font-medium transition ${
|
||||
mode === "create"
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-[#2a2a2a] text-gray-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode("join")}
|
||||
className={`flex-1 py-2 rounded font-medium transition ${
|
||||
mode === "join"
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-[#2a2a2a] text-gray-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create Server Tab */}
|
||||
{mode === "create" && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm text-gray-400">Server Icon</label>
|
||||
<div className="flex gap-2 mt-2 flex-wrap">
|
||||
{["🎮", "⚔️", "🎯", "🚀", "💎", "👑", "🏰", "⭐", "🌟", "🔥"].map((icon) => (
|
||||
<button
|
||||
key={icon}
|
||||
onClick={() => setServerIcon(icon)}
|
||||
className={`text-2xl p-2 rounded transition ${
|
||||
serverIcon === icon ? "bg-blue-600 scale-110" : "bg-[#2a2a2a] hover:bg-[#3a3a3a]"
|
||||
}`}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm text-gray-400">Server Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={serverName}
|
||||
onChange={(e) => setServerName(e.target.value)}
|
||||
placeholder="My Awesome Server"
|
||||
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white mt-1 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={!serverName.trim()}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-[#2a2a2a] disabled:text-gray-600 text-white font-medium py-2 rounded transition"
|
||||
>
|
||||
Create Server
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Join Server Tab */}
|
||||
{mode === "join" && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm text-gray-400">Invite Link or Code</label>
|
||||
<input
|
||||
type="text"
|
||||
value={joinCode}
|
||||
onChange={(e) => setJoinCode(e.target.value)}
|
||||
placeholder="aethex-connect/abc123xyz"
|
||||
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white mt-1 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
You'll need an invite link or code from a server admin to join a server.
|
||||
</p>
|
||||
|
||||
<button
|
||||
onClick={handleJoin}
|
||||
disabled={!joinCode.trim()}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-[#2a2a2a] disabled:text-gray-600 text-white font-medium py-2 rounded transition"
|
||||
>
|
||||
Join Server
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cancel */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full mt-4 bg-[#2a2a2a] hover:bg-[#3a3a3a] text-white font-medium py-2 rounded transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
187
astro-site/src/components/mockup/modals/CustomStatusModal.jsx
Normal file
187
astro-site/src/components/mockup/modals/CustomStatusModal.jsx
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { usePresenceStore } from "../../../stores/presenceStore.js";
|
||||
|
||||
export function CustomStatusModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const { customStatus, setCustomStatus } = usePresenceStore();
|
||||
|
||||
const [statusText, setStatusText] = useState(customStatus || "");
|
||||
const [emoji, setEmoji] = useState("😎");
|
||||
|
||||
const isModalOpen = isOpen && type === "customStatus";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const quickStatuses = [
|
||||
{ emoji: "💼", text: "Working" },
|
||||
{ emoji: "🎮", text: "Gaming" },
|
||||
{ emoji: "🍕", text: "Eating" },
|
||||
{ emoji: "💤", text: "Sleeping" },
|
||||
{ emoji: "🎵", text: "Listening to music" },
|
||||
{ emoji: "📚", text: "Studying" },
|
||||
];
|
||||
|
||||
const handleSave = () => {
|
||||
setCustomStatus(`${emoji} ${statusText}`);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "500px",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "20px", borderBottom: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff" }}>Set Custom Status</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "20px" }}>
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
<label style={{ display: "block", fontSize: "0.875rem", color: "#999", marginBottom: "8px" }}>
|
||||
Status Message
|
||||
</label>
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={emoji}
|
||||
onChange={(e) => setEmoji(e.target.value)}
|
||||
style={{
|
||||
width: "60px",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "12px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
textAlign: "center",
|
||||
fontSize: "1.5rem",
|
||||
}}
|
||||
maxLength={2}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={statusText}
|
||||
onChange={(e) => setStatusText(e.target.value)}
|
||||
placeholder="What's on your mind?"
|
||||
maxLength={128}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "12px 16px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
<label style={{ display: "block", fontSize: "0.875rem", color: "#999", marginBottom: "12px" }}>
|
||||
Quick Select
|
||||
</label>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "8px" }}>
|
||||
{quickStatuses.map((status) => (
|
||||
<button
|
||||
key={status.text}
|
||||
onClick={() => {
|
||||
setEmoji(status.emoji);
|
||||
setStatusText(status.text);
|
||||
}}
|
||||
style={{
|
||||
padding: "12px",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
textAlign: "left",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "#2a2a2a";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "#0f0f0f";
|
||||
}}
|
||||
>
|
||||
{status.emoji} {status.text}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setStatusText("");
|
||||
setCustomStatus("");
|
||||
onClose();
|
||||
}}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
background: "none",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Clear Status
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
background: "#0066ff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore";
|
||||
|
||||
export function DeleteServerModal() {
|
||||
const { type, isOpen, onClose, data } = useModalStore();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const isModalOpen = isOpen && type === "deleteServer";
|
||||
const { server } = data || {};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
// TODO: Call API to delete server
|
||||
console.log("Deleting server...", server);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
onClose();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md p-6">
|
||||
<h2 className="text-2xl font-bold text-center mb-2">Delete Server</h2>
|
||||
<p className="text-center text-zinc-500 dark:text-zinc-400 mb-6">
|
||||
Are you sure you want to delete{" "}
|
||||
<span className="font-semibold text-indigo-500">{server?.name}</span>?
|
||||
<br />
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-between gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-4 py-2 bg-rose-500 hover:bg-rose-600 text-white rounded transition"
|
||||
>
|
||||
{isLoading ? "Deleting..." : "Confirm"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
astro-site/src/components/mockup/modals/EditServerModal.jsx
Normal file
146
astro-site/src/components/mockup/modals/EditServerModal.jsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { useServerStore } from "../../../stores/serverStore.js";
|
||||
|
||||
export function EditServerModal() {
|
||||
const { isOpen, type, data, onClose } = useModalStore();
|
||||
const updateServer = useServerStore((state) => state.updateServer);
|
||||
|
||||
const [serverName, setServerName] = useState(data?.server?.name || "");
|
||||
const [serverDescription, setServerDescription] = useState(data?.server?.description || "");
|
||||
|
||||
const isModalOpen = isOpen && type === "editServer";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const handleSave = () => {
|
||||
if (!serverName.trim()) return;
|
||||
|
||||
updateServer(data.server.id, {
|
||||
name: serverName,
|
||||
description: serverDescription,
|
||||
});
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "24px",
|
||||
width: "90%",
|
||||
maxWidth: "500px",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff" }}>Edit Server</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<label style={{ display: "block", fontSize: "0.875rem", color: "#999", marginBottom: "8px" }}>
|
||||
Server Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={serverName}
|
||||
onChange={(e) => setServerName(e.target.value)}
|
||||
placeholder="Enter server name"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "12px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "24px" }}>
|
||||
<label style={{ display: "block", fontSize: "0.875rem", color: "#999", marginBottom: "8px" }}>
|
||||
Description (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={serverDescription}
|
||||
onChange={(e) => setServerDescription(e.target.value)}
|
||||
placeholder="What's this server about?"
|
||||
rows={3}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "12px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
resize: "vertical",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
background: "#2a2a2a",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!serverName.trim()}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
background: serverName.trim() ? "#0066ff" : "#2a2a2a",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: serverName.trim() ? "pointer" : "not-allowed",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
|
||||
export function EnhancedSettingsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const [tab, setTab] = useState("general");
|
||||
const [blockedUsers, setBlockedUsers] = useState([
|
||||
{ id: 1, username: "Troll123" },
|
||||
{ id: 2, username: "Spammer" },
|
||||
]);
|
||||
const [channelNotifications, setChannelNotifications] = useState({
|
||||
general: { muted: false, mentions: true },
|
||||
announcements: { muted: true, mentions: true },
|
||||
support: { muted: false, mentions: false },
|
||||
});
|
||||
|
||||
const isModalOpen = isOpen && type === "enhancedSettings";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const handleUnblockUser = (id) => {
|
||||
setBlockedUsers(blockedUsers.filter((u) => u.id !== id));
|
||||
};
|
||||
|
||||
const handleToggleMuted = (channel) => {
|
||||
setChannelNotifications({
|
||||
...channelNotifications,
|
||||
[channel]: {
|
||||
...channelNotifications[channel],
|
||||
muted: !channelNotifications[channel].muted,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "600px",
|
||||
maxHeight: "80vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ padding: "20px", borderBottom: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h2 style={{ margin: 0, color: "#fff" }}>Settings</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style={{ display: "flex", borderBottom: "1px solid #2a2a2a", background: "#0f0f0f" }}>
|
||||
{["general", "notifications", "blocked", "privacy"].map((tabName) => (
|
||||
<button
|
||||
key={tabName}
|
||||
onClick={() => setTab(tabName)}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "12px",
|
||||
background: tab === tabName ? "#0066ff" : "transparent",
|
||||
border: "none",
|
||||
color: tab === tabName ? "#fff" : "#666",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
{tabName}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: "20px" }}>
|
||||
{tab === "general" && (
|
||||
<div>
|
||||
<h3 style={{ color: "#fff", marginTop: 0 }}>General Settings</h3>
|
||||
<label style={{ display: "block", marginBottom: "16px", color: "#e0e0e0" }}>
|
||||
<input type="checkbox" defaultChecked /> Compact Mode
|
||||
</label>
|
||||
<label style={{ display: "block", marginBottom: "16px", color: "#e0e0e0" }}>
|
||||
<input type="checkbox" defaultChecked /> Show Timestamps
|
||||
</label>
|
||||
<label style={{ display: "block", color: "#e0e0e0" }}>
|
||||
<input type="checkbox" /> Developer Mode
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "notifications" && (
|
||||
<div>
|
||||
<h3 style={{ color: "#fff", marginTop: 0 }}>Channel Notifications</h3>
|
||||
{Object.entries(channelNotifications).map(([channel, settings]) => (
|
||||
<div key={channel} style={{ marginBottom: "16px", padding: "12px", background: "#0f0f0f", borderRadius: "4px" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<span style={{ color: "#e0e0e0", textTransform: "capitalize" }}>#{channel}</span>
|
||||
<button
|
||||
onClick={() => handleToggleMuted(channel)}
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
background: settings.muted ? "#ff0000" : "#00ff00",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#000",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{settings.muted ? "Muted" : "Unmuted"}
|
||||
</button>
|
||||
</div>
|
||||
<label style={{ display: "block", marginTop: "8px", color: "#999", fontSize: "0.85rem" }}>
|
||||
<input type="checkbox" checked={settings.mentions} readOnly /> Notify on mentions
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "blocked" && (
|
||||
<div>
|
||||
<h3 style={{ color: "#fff", marginTop: 0 }}>Blocked Users</h3>
|
||||
{blockedUsers.length === 0 ? (
|
||||
<p style={{ color: "#666" }}>No blocked users</p>
|
||||
) : (
|
||||
blockedUsers.map((user) => (
|
||||
<div key={user.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px", background: "#0f0f0f", marginBottom: "8px", borderRadius: "4px" }}>
|
||||
<span style={{ color: "#e0e0e0" }}>{user.username}</span>
|
||||
<button
|
||||
onClick={() => handleUnblockUser(user.id)}
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
background: "#0066ff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.75rem",
|
||||
}}
|
||||
>
|
||||
Unblock
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "privacy" && (
|
||||
<div>
|
||||
<h3 style={{ color: "#fff", marginTop: 0 }}>Privacy Settings</h3>
|
||||
<label style={{ display: "block", marginBottom: "16px", color: "#e0e0e0" }}>
|
||||
<input type="checkbox" defaultChecked /> Allow friend requests
|
||||
</label>
|
||||
<label style={{ display: "block", marginBottom: "16px", color: "#e0e0e0" }}>
|
||||
<input type="checkbox" defaultChecked /> Show online status
|
||||
</label>
|
||||
<label style={{ display: "block", color: "#e0e0e0" }}>
|
||||
<input type="checkbox" /> Show activity status
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{ padding: "16px", borderTop: "1px solid #2a2a2a", display: "flex", justifyContent: "flex-end" }}>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
background: "#0066ff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
163
astro-site/src/components/mockup/modals/FriendRequestsModal.jsx
Normal file
163
astro-site/src/components/mockup/modals/FriendRequestsModal.jsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
|
||||
export function FriendRequestsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
|
||||
const isModalOpen = isOpen && type === "friendRequests";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const requests = [
|
||||
{ id: 1, username: "CyberNinja", avatar: "🥷", status: "online", mutualServers: 2, received: "2 hours ago" },
|
||||
{ id: 2, username: "QuantumDev", avatar: "⚛️", status: "idle", mutualServers: 1, received: "1 day ago" },
|
||||
];
|
||||
|
||||
const handleAccept = (id) => {
|
||||
console.log("Accept friend request:", id);
|
||||
};
|
||||
|
||||
const handleDecline = (id) => {
|
||||
console.log("Decline friend request:", id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "600px",
|
||||
maxHeight: "80vh",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "20px", borderBottom: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff" }}>Friend Requests</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: "auto" }}>
|
||||
{requests.length === 0 ? (
|
||||
<div style={{ padding: "60px 20px", textAlign: "center", color: "#666" }}>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "16px" }}>👥</div>
|
||||
<p>No pending friend requests</p>
|
||||
</div>
|
||||
) : (
|
||||
requests.map((request) => (
|
||||
<div
|
||||
key={request.id}
|
||||
style={{
|
||||
padding: "20px",
|
||||
borderBottom: "1px solid #0f0f0f",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
|
||||
<div style={{ position: "relative" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "60px",
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, #0066ff, #00ccff)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "2rem",
|
||||
}}
|
||||
>
|
||||
{request.avatar}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
borderRadius: "50%",
|
||||
background: request.status === "online" ? "#00ff00" : "#ffaa00",
|
||||
border: "2px solid #1a1a1a",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h3 style={{ color: "#fff", fontWeight: "bold", marginBottom: "4px" }}>
|
||||
{request.username}
|
||||
</h3>
|
||||
<p style={{ fontSize: "0.875rem", color: "#666", margin: 0 }}>
|
||||
{request.mutualServers} mutual server{request.mutualServers !== 1 ? "s" : ""}
|
||||
</p>
|
||||
<p style={{ fontSize: "0.75rem", color: "#666", marginTop: "4px" }}>
|
||||
Received {request.received}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "8px", flexDirection: "column" }}>
|
||||
<button
|
||||
onClick={() => handleAccept(request.id)}
|
||||
style={{
|
||||
padding: "8px 20px",
|
||||
background: "#00ff00",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#000",
|
||||
fontWeight: "bold",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDecline(request.id)}
|
||||
style={{
|
||||
padding: "8px 20px",
|
||||
background: "none",
|
||||
border: "1px solid #ff0000",
|
||||
borderRadius: "4px",
|
||||
color: "#ff0000",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
astro-site/src/components/mockup/modals/FriendsModal.jsx
Normal file
23
astro-site/src/components/mockup/modals/FriendsModal.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import FriendRequestsPanel from "../FriendRequestsPanel.jsx";
|
||||
|
||||
export function FriendsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
|
||||
if (!isOpen || type !== "friends") return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,0.3)",
|
||||
zIndex: 998,
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<FriendRequestsPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
astro-site/src/components/mockup/modals/InviteModal.jsx
Normal file
84
astro-site/src/components/mockup/modals/InviteModal.jsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import React, { useState } from "react";
|
||||
import { Check, Copy, RefreshCw } from "lucide-react";
|
||||
import { useModalStore } from "../../../stores/modalStore";
|
||||
|
||||
export function InviteModal() {
|
||||
const { type, isOpen, onClose, data } = useModalStore();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const isModalOpen = isOpen && type === "invite";
|
||||
const { server } = data || {};
|
||||
|
||||
// Mock origin - in real app would use window.location.origin
|
||||
const origin = typeof window !== 'undefined' ? window.location.origin : '';
|
||||
const inviteUrl = `${origin}/invite/${server?.inviteCode || 'abc123'}`;
|
||||
|
||||
const onCopy = () => {
|
||||
navigator.clipboard.writeText(inviteUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const onGenerate = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
// TODO: Call API to regenerate invite code
|
||||
console.log("Regenerating invite code...");
|
||||
setTimeout(() => setIsLoading(false), 1000);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md p-6">
|
||||
<h2 className="text-2xl font-bold text-center mb-2">Invite Friends</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="uppercase text-xs font-bold text-zinc-500 dark:text-zinc-400">
|
||||
Server invite link
|
||||
</label>
|
||||
<div className="flex items-center mt-2 gap-x-2">
|
||||
<input
|
||||
readOnly
|
||||
disabled={isLoading}
|
||||
value={inviteUrl}
|
||||
className="flex-1 bg-zinc-300/50 border-0 focus:ring-0 text-black dark:text-white rounded px-3 py-2"
|
||||
/>
|
||||
<button
|
||||
onClick={onCopy}
|
||||
disabled={isLoading}
|
||||
className="px-3 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded transition"
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
disabled={isLoading}
|
||||
className="text-xs text-zinc-500 dark:text-zinc-400 hover:underline flex items-center gap-1"
|
||||
>
|
||||
Generate a new link
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
astro-site/src/components/mockup/modals/LeaveServerModal.jsx
Normal file
55
astro-site/src/components/mockup/modals/LeaveServerModal.jsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore";
|
||||
|
||||
export function LeaveServerModal() {
|
||||
const { type, isOpen, onClose, data } = useModalStore();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const isModalOpen = isOpen && type === "leaveServer";
|
||||
const { server } = data || {};
|
||||
|
||||
const handleLeave = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
// TODO: Call API to leave server
|
||||
console.log("Leaving server...", server);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
onClose();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md p-6">
|
||||
<h2 className="text-2xl font-bold text-center mb-2">Leave Server</h2>
|
||||
<p className="text-center text-zinc-500 dark:text-zinc-400 mb-6">
|
||||
Are you sure you want to leave{" "}
|
||||
<span className="font-semibold text-indigo-500">{server?.name}</span>?
|
||||
</p>
|
||||
<div className="flex justify-between gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLeave}
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded transition"
|
||||
>
|
||||
{isLoading ? "Leaving..." : "Confirm"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
astro-site/src/components/mockup/modals/ManageMembersModal.jsx
Normal file
101
astro-site/src/components/mockup/modals/ManageMembersModal.jsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import React, { useState } from "react";
|
||||
import { useMemberStore } from "../../../stores/memberStore";
|
||||
import { useModalStore } from "../../../stores/modalStore";
|
||||
import { Shield, ShieldAlert, ShieldCheck, Trash2, X } from "lucide-react";
|
||||
|
||||
const roleIcons = {
|
||||
ADMIN: <ShieldAlert className="w-4 h-4 text-rose-500" />,
|
||||
MODERATOR: <ShieldCheck className="w-4 h-4 text-indigo-500" />,
|
||||
MEMBER: null,
|
||||
GUEST: null,
|
||||
};
|
||||
|
||||
export function ManageMembersModal() {
|
||||
const isOpen = useModalStore((state) => state.isOpen && state.type === "manageMembers");
|
||||
const onClose = useModalStore((state) => state.onClose);
|
||||
const members = useMemberStore((state) => state.members);
|
||||
const updateMemberRole = useMemberStore((state) => state.updateMemberRole);
|
||||
const kickMember = useMemberStore((state) => state.kickMember);
|
||||
const getCurrentUser = useMemberStore((state) => state.getCurrentUser);
|
||||
|
||||
const currentUser = getCurrentUser();
|
||||
const isAdmin = currentUser?.role === "ADMIN";
|
||||
|
||||
const [selectedMember, setSelectedMember] = useState(null);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleRoleChange = (memberId, newRole) => {
|
||||
if (!isAdmin) return;
|
||||
updateMemberRole(memberId, newRole);
|
||||
};
|
||||
|
||||
const handleKickMember = (memberId) => {
|
||||
if (!isAdmin) return;
|
||||
kickMember(memberId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-[#313338] rounded-lg p-0 w-full max-w-md max-h-96 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[#1a1a1a]">
|
||||
<h2 className="text-lg font-bold">Manage Members</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 hover:bg-[#2c2f33] rounded transition"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Members List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{members.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="flex items-center gap-3 p-4 hover:bg-[#2c2f33] transition border-b border-[#1a1a1a] last:border-b-0"
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs bg-gradient-to-tr ${member.avatarBg}`}
|
||||
>
|
||||
{member.avatar}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-sm">{member.name}</span>
|
||||
{roleIcons[member.role]}
|
||||
</div>
|
||||
<span className="text-xs text-gray-400">{member.status}</span>
|
||||
</div>
|
||||
|
||||
{isAdmin && member.id !== currentUser?.id && (
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={(e) => handleRoleChange(member.id, e.target.value)}
|
||||
className="bg-[#1a1a1a] text-xs text-white border border-[#404249] rounded px-2 py-1 focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="GUEST">Guest</option>
|
||||
<option value="MEMBER">Member</option>
|
||||
<option value="MODERATOR">Moderator</option>
|
||||
<option value="ADMIN">Admin</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={() => handleKickMember(member.id)}
|
||||
className="p-1 hover:bg-red-600/20 text-red-500 rounded transition"
|
||||
title="Kick member"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
astro-site/src/components/mockup/modals/ModalProvider.jsx
Normal file
42
astro-site/src/components/mockup/modals/ModalProvider.jsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import React from "react";
|
||||
import { ManageMembersModal } from "./ManageMembersModal";
|
||||
import { CreateChannelModal } from "./CreateChannelModal";
|
||||
import { InviteModal } from "./InviteModal";
|
||||
import { DeleteServerModal } from "./DeleteServerModal";
|
||||
import { LeaveServerModal } from "./LeaveServerModal";
|
||||
import { EditServerModal } from "./EditServerModal";
|
||||
import { VoiceCallModal } from "./VoiceCallModal";
|
||||
import { EnhancedSettingsModal } from "./EnhancedSettingsModal";
|
||||
import { NotificationsModal } from "./NotificationsModal";
|
||||
import { PinnedModal } from "./PinnedModal";
|
||||
import { ThreadsModal } from "./ThreadsModal";
|
||||
import { FriendsModal } from "./FriendsModal";
|
||||
import { StatusModal } from "./StatusModal";
|
||||
import UserProfileModal from "./UserProfileModal";
|
||||
import CreateServerModal from "./CreateServerModal";
|
||||
import SettingsModal from "./SettingsModal";
|
||||
import UserDiscoveryModal from "./UserDiscoveryModal";
|
||||
|
||||
export function ModalProvider() {
|
||||
return (
|
||||
<>
|
||||
<ManageMembersModal />
|
||||
<CreateChannelModal />
|
||||
<InviteModal />
|
||||
<DeleteServerModal />
|
||||
<LeaveServerModal />
|
||||
<EditServerModal />
|
||||
<VoiceCallModal />
|
||||
<EnhancedSettingsModal />
|
||||
<NotificationsModal />
|
||||
<PinnedModal />
|
||||
<ThreadsModal />
|
||||
<FriendsModal />
|
||||
<StatusModal />
|
||||
<UserProfileModal />
|
||||
<CreateServerModal />
|
||||
<SettingsModal />
|
||||
<UserDiscoveryModal />
|
||||
</>
|
||||
);
|
||||
}
|
||||
155
astro-site/src/components/mockup/modals/NotificationsModal.jsx
Normal file
155
astro-site/src/components/mockup/modals/NotificationsModal.jsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
|
||||
export function NotificationsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
|
||||
const isModalOpen = isOpen && type === "notifications";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const notifications = [
|
||||
{ id: 1, type: "mention", server: "Foundation", channel: "general", author: "Trevor", message: "@you check this out", time: "2m ago", unread: true },
|
||||
{ id: 2, type: "reply", server: "Labs", channel: "experiments", author: "Marcus", message: "Replied to your message", time: "15m ago", unread: true },
|
||||
{ id: 3, type: "dm", author: "ShadowForce", message: "Hey, are you available?", time: "1h ago", unread: false },
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "600px",
|
||||
maxHeight: "80vh",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "20px", borderBottom: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff" }}>Notifications</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: "auto" }}>
|
||||
{notifications.length === 0 ? (
|
||||
<div style={{ padding: "60px 20px", textAlign: "center", color: "#666" }}>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "16px" }}>🔔</div>
|
||||
<p>No new notifications</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((notif) => (
|
||||
<div
|
||||
key={notif.id}
|
||||
style={{
|
||||
padding: "16px 20px",
|
||||
borderBottom: "1px solid #0f0f0f",
|
||||
background: notif.unread ? "#0066ff10" : "transparent",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = notif.unread ? "#0066ff15" : "#0f0f0f";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = notif.unread ? "#0066ff10" : "transparent";
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "12px", alignItems: "flex-start" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, #0066ff, #00ccff)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "1.25rem",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{notif.type === "mention" ? "@" : notif.type === "reply" ? "💬" : "📩"}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "4px" }}>
|
||||
<span style={{ color: "#fff", fontWeight: "bold" }}>
|
||||
{notif.author}
|
||||
{notif.server && <span style={{ color: "#666", fontWeight: "normal" }}> in #{notif.channel}</span>}
|
||||
</span>
|
||||
<span style={{ fontSize: "0.75rem", color: "#666" }}>{notif.time}</span>
|
||||
</div>
|
||||
<p style={{ color: "#ccc", fontSize: "0.875rem", margin: 0 }}>{notif.message}</p>
|
||||
{notif.server && (
|
||||
<span style={{ fontSize: "0.75rem", color: "#0066ff", marginTop: "4px", display: "inline-block" }}>
|
||||
{notif.server}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "16px 20px", borderTop: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between" }}>
|
||||
<button
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
background: "none",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Mark All Read
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
background: "#0066ff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
astro-site/src/components/mockup/modals/PinnedMessagesModal.jsx
Normal file
143
astro-site/src/components/mockup/modals/PinnedMessagesModal.jsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
|
||||
export function PinnedMessagesModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
|
||||
const isModalOpen = isOpen && type === "pinnedMessages";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const pinnedMessages = [
|
||||
{ id: 1, author: "Trevor", avatar: "T", time: "2 days ago", content: "Foundation authentication services upgraded to v2.1.0", pinned: "by Anderson" },
|
||||
{ id: 2, author: "Marcus", avatar: "M", time: "1 week ago", content: "Weekly dev sync: Fridays at 3pm UTC in #nexus-lounge", pinned: "by Trevor" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "700px",
|
||||
maxHeight: "80vh",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "20px", borderBottom: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff" }}>Pinned Messages</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "20px" }}>
|
||||
{pinnedMessages.length === 0 ? (
|
||||
<div style={{ padding: "60px 20px", textAlign: "center", color: "#666" }}>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "16px" }}>📌</div>
|
||||
<p>No pinned messages yet</p>
|
||||
</div>
|
||||
) : (
|
||||
pinnedMessages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
style={{
|
||||
padding: "16px",
|
||||
background: "#0f0f0f",
|
||||
borderRadius: "8px",
|
||||
marginBottom: "12px",
|
||||
border: "1px solid #2a2a2a",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "12px", marginBottom: "12px" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, #ff0000, #990000)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "1.25rem",
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{msg.avatar}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: "flex", gap: "8px", alignItems: "baseline", marginBottom: "4px" }}>
|
||||
<span style={{ color: "#fff", fontWeight: "bold" }}>{msg.author}</span>
|
||||
<span style={{ fontSize: "0.75rem", color: "#666" }}>{msg.time}</span>
|
||||
</div>
|
||||
<p style={{ color: "#ccc", margin: 0, lineHeight: 1.6 }}>{msg.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "12px", borderTop: "1px solid #2a2a2a" }}>
|
||||
<span style={{ fontSize: "0.75rem", color: "#666" }}>📌 Pinned {msg.pinned}</span>
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
background: "none",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
color: "#e0e0e0",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
Jump
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
background: "none",
|
||||
border: "1px solid #ff0000",
|
||||
borderRadius: "4px",
|
||||
color: "#ff0000",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
Unpin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
astro-site/src/components/mockup/modals/PinnedModal.jsx
Normal file
23
astro-site/src/components/mockup/modals/PinnedModal.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import PinnedMessagesPanel from "../PinnedMessagesPanel.jsx";
|
||||
|
||||
export function PinnedModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
|
||||
if (!isOpen || type !== "pinned") return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,0.3)",
|
||||
zIndex: 998,
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<PinnedMessagesPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
156
astro-site/src/components/mockup/modals/QuickSwitcherModal.jsx
Normal file
156
astro-site/src/components/mockup/modals/QuickSwitcherModal.jsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { useChannelStore } from "../../../stores/channelStore.js";
|
||||
import { useServerStore } from "../../../stores/serverStore.js";
|
||||
import { useDirectMessageStore } from "../../../stores/directMessageStore.js";
|
||||
|
||||
export function QuickSwitcherModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const channels = useChannelStore((state) => state.channels);
|
||||
const servers = useServerStore((state) => state.servers);
|
||||
const conversations = useDirectMessageStore((state) => state.conversations);
|
||||
const setCurrentChannel = useChannelStore((state) => state.setCurrentChannel);
|
||||
const setCurrentServer = useServerStore((state) => state.setCurrentServer);
|
||||
const setCurrentConversation = useDirectMessageStore((state) => state.setCurrentConversation);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [selected, setSelected] = useState(0);
|
||||
|
||||
const isModalOpen = isOpen && type === "quickSwitcher";
|
||||
|
||||
useEffect(() => {
|
||||
if (!isModalOpen) {
|
||||
setSearch("");
|
||||
setSelected(0);
|
||||
}
|
||||
}, [isModalOpen]);
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const allItems = [
|
||||
...channels.map((ch) => ({ type: "channel", id: ch.id, name: `#${ch.name}`, category: ch.category })),
|
||||
...servers.map((srv) => ({ type: "server", id: srv.id, name: srv.name, badge: srv.id })),
|
||||
...conversations.map((conv) => ({ type: "dm", id: conv.id, name: conv.userName, status: "online" })),
|
||||
];
|
||||
|
||||
const filtered = allItems.filter((item) =>
|
||||
item.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
const handleSelect = (item) => {
|
||||
if (item.type === "channel") {
|
||||
setCurrentChannel(item.id);
|
||||
} else if (item.type === "server") {
|
||||
setCurrentServer(item.id);
|
||||
} else if (item.type === "dm") {
|
||||
setCurrentConversation(item.id);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setSelected((prev) => Math.min(prev + 1, filtered.length - 1));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setSelected((prev) => Math.max(prev - 1, 0));
|
||||
} else if (e.key === "Enter" && filtered[selected]) {
|
||||
e.preventDefault();
|
||||
handleSelect(filtered[selected]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.8)",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
paddingTop: "15vh",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "600px",
|
||||
boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "16px" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Quick jump to channel or DM..."
|
||||
autoFocus
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "12px 16px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ maxHeight: "400px", overflow: "auto" }}>
|
||||
{filtered.length === 0 ? (
|
||||
<div style={{ padding: "40px 16px", textAlign: "center", color: "#666" }}>
|
||||
<p>No results found</p>
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((item, idx) => (
|
||||
<div
|
||||
key={`${item.type}-${item.id}`}
|
||||
onClick={() => handleSelect(item)}
|
||||
style={{
|
||||
padding: "12px 16px",
|
||||
background: selected === idx ? "#2a2a2a" : "transparent",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.2s",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "12px",
|
||||
}}
|
||||
onMouseEnter={() => setSelected(idx)}
|
||||
>
|
||||
<span style={{ fontSize: "1.25rem" }}>
|
||||
{item.type === "channel" ? "#" : item.type === "server" ? "🖥️" : "👤"}
|
||||
</span>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ color: "#e0e0e0", fontWeight: "500" }}>{item.name}</div>
|
||||
{item.category && (
|
||||
<div style={{ fontSize: "0.75rem", color: "#666" }}>{item.category}</div>
|
||||
)}
|
||||
</div>
|
||||
{item.type === "server" && (
|
||||
<span style={{ fontSize: "0.75rem", color: "#666" }}>{item.badge}</span>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "12px 16px", borderTop: "1px solid #2a2a2a", fontSize: "0.75rem", color: "#666" }}>
|
||||
<span>↑↓ Navigate</span> <span style={{ marginLeft: "16px" }}>↵ Select</span> <span style={{ marginLeft: "16px" }}>Esc Close</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
201
astro-site/src/components/mockup/modals/SettingsModal-clean.jsx
Normal file
201
astro-site/src/components/mockup/modals/SettingsModal-clean.jsx
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { useUserSettingsStore } from "../../../stores/userSettingsStore.js";
|
||||
|
||||
export default function SettingsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const { settings, toggleNotification, setTheme } = useUserSettingsStore();
|
||||
const [activeTab, setActiveTab] = useState("notifications");
|
||||
|
||||
if (!isOpen || type !== "settings") return null;
|
||||
|
||||
const blockedUsers = [
|
||||
{ id: 1, username: "SpamBot", avatar: "🤖", blockedDate: "2 weeks ago" },
|
||||
];
|
||||
|
||||
const channelSettings = [
|
||||
{ id: "general", name: "general", muted: false, mentions: "all" },
|
||||
{ id: "announcements", name: "announcements", muted: false, mentions: "mentions" },
|
||||
{ id: "random", name: "random", muted: true, mentions: "none" },
|
||||
];
|
||||
|
||||
const tabs = [
|
||||
{ id: "notifications", label: "🔔 Notifications" },
|
||||
{ id: "privacy", label: "🔒 Privacy" },
|
||||
{ id: "blocked", label: "🚫 Blocked Users" },
|
||||
{ id: "channels", label: "#️⃣ Channel Settings" },
|
||||
{ id: "appearance", label: "🎨 Appearance" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg w-96 max-h-96 overflow-hidden flex flex-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ fontFamily: "'Roboto Mono', monospace" }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-[#2a2a2a] flex justify-between items-center">
|
||||
<h2 className="text-xl font-bold text-white">Settings</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-white text-2xl"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 p-3 border-b border-[#2a2a2a] overflow-x-auto">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`px-3 py-1 rounded text-sm whitespace-nowrap transition ${
|
||||
activeTab === tab.id
|
||||
? "bg-[#0066ff] text-white"
|
||||
: "bg-[#0f0f0f] text-gray-400 hover:bg-[#1a1a1a]"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{activeTab === "notifications" && (
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.notifications.desktop}
|
||||
onChange={() => toggleNotification("desktop")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Desktop Notifications</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.notifications.sound}
|
||||
onChange={() => toggleNotification("sound")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Sound</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.notifications.mentions}
|
||||
onChange={() => toggleNotification("mentions")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Mentions Only</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "privacy" && (
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center gap-3">
|
||||
<input type="checkbox" defaultChecked className="w-4 h-4" />
|
||||
<span className="text-sm text-gray-300">Show Online Status</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3">
|
||||
<input type="checkbox" defaultChecked className="w-4 h-4" />
|
||||
<span className="text-sm text-gray-300">Allow Friend Requests</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3">
|
||||
<input type="checkbox" className="w-4 h-4" />
|
||||
<span className="text-sm text-gray-300">Allow DMs</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "blocked" && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-gray-500 mb-3">You won't receive DMs or see messages from blocked users</p>
|
||||
{blockedUsers.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<p className="text-sm">No blocked users</p>
|
||||
</div>
|
||||
) : (
|
||||
blockedUsers.map((user) => (
|
||||
<div key={user.id} className="flex items-center justify-between p-2 bg-[#0f0f0f] rounded">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{user.avatar}</span>
|
||||
<div>
|
||||
<p className="text-sm text-white">{user.username}</p>
|
||||
<p className="text-xs text-gray-500">{user.blockedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs text-red-500 hover:text-red-400">
|
||||
Unblock
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "channels" && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-gray-500 mb-3">Customize notification settings for individual channels</p>
|
||||
{channelSettings.map((channel) => (
|
||||
<div key={channel.id} className="p-2 bg-[#0f0f0f] rounded">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm text-white">#{channel.name}</span>
|
||||
<label className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Muted</span>
|
||||
<input type="checkbox" checked={channel.muted} className="w-3 h-3" />
|
||||
</label>
|
||||
</div>
|
||||
<select className="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded px-2 py-1 text-xs text-gray-300">
|
||||
<option>All Messages</option>
|
||||
<option>@Mentions Only</option>
|
||||
<option>Nothing</option>
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "appearance" && (
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => setTheme("dark")}
|
||||
className="w-full p-2 bg-[#0f0f0f] hover:bg-[#1a1a1a] rounded text-sm text-left text-gray-300"
|
||||
>
|
||||
🌙 Dark
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme("light")}
|
||||
className="w-full p-2 bg-[#0f0f0f] hover:bg-[#1a1a1a] rounded text-sm text-left text-gray-300"
|
||||
>
|
||||
☀️ Light
|
||||
</button>
|
||||
<label className="flex items-center gap-3 p-2">
|
||||
<input type="checkbox" className="w-4 h-4" />
|
||||
<span className="text-sm text-gray-300">Compact Mode</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-[#2a2a2a]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full px-4 py-2 bg-[#0066ff] hover:bg-[#0052cc] text-white rounded text-sm transition"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
astro-site/src/components/mockup/modals/SettingsModal.jsx
Normal file
66
astro-site/src/components/mockup/modals/SettingsModal.jsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { useUserSettingsStore } from "../../../stores/userSettingsStore.js";
|
||||
|
||||
export default function SettingsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const { settings, toggleNotification } = useUserSettingsStore();
|
||||
|
||||
if (!isOpen || type !== "settings") return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg w-96 max-h-96 overflow-hidden flex flex-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-4 border-b border-[#2a2a2a] flex justify-between items-center">
|
||||
<h2 className="text-lg font-bold text-white">Settings</h2>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white">✕</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings?.notifications?.desktop ?? true}
|
||||
onChange={() => toggleNotification?.("desktop")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Desktop Notifications</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings?.notifications?.sound ?? true}
|
||||
onChange={() => toggleNotification?.("sound")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Sound</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings?.notifications?.mentions ?? true}
|
||||
onChange={() => toggleNotification?.("mentions")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Mentions Only</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-[#2a2a2a]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full px-4 py-2 bg-[#0066ff] hover:bg-[#0052cc] text-white rounded text-sm transition"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
100
astro-site/src/components/mockup/modals/StatusModal.jsx
Normal file
100
astro-site/src/components/mockup/modals/StatusModal.jsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { usePresenceStore } from "../../../stores/presenceStore.js";
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ id: "online", label: "Online", emoji: "🟢" },
|
||||
{ id: "idle", label: "Idle", emoji: "🟡" },
|
||||
{ id: "dnd", label: "Do Not Disturb", emoji: "🔴" },
|
||||
{ id: "invisible", label: "Invisible", emoji: "⚫" },
|
||||
];
|
||||
|
||||
export function StatusModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const currentStatus = usePresenceStore((state) => state.currentStatus);
|
||||
const setStatus = usePresenceStore((state) => state.setStatus);
|
||||
const customStatus = usePresenceStore((state) => state.customStatus);
|
||||
const setCustomStatus = usePresenceStore((state) => state.setCustomStatus);
|
||||
const [tempStatus, setTempStatus] = useState(customStatus);
|
||||
|
||||
if (!isOpen || type !== "statusModal") return null;
|
||||
|
||||
const handleStatusChange = (statusId) => {
|
||||
setStatus(statusId);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCustomStatusSave = () => {
|
||||
setCustomStatus(tempStatus);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-6 w-96"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold text-white">Set Status</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-white text-2xl"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status Options */}
|
||||
<div className="space-y-2 mb-6">
|
||||
{STATUS_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => handleStatusChange(option.id)}
|
||||
className={`w-full flex items-center gap-3 p-3 rounded transition ${
|
||||
currentStatus === option.id
|
||||
? "bg-[#0066ff] text-white"
|
||||
: "bg-[#0f0f0f] text-gray-300 hover:bg-[#1a1a1a]"
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{option.emoji}</span>
|
||||
<span>{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Custom Status */}
|
||||
<div className="border-t border-[#2a2a2a] pt-4">
|
||||
<label className="block text-sm text-gray-400 mb-2">
|
||||
Custom Status
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={tempStatus}
|
||||
onChange={(e) => setTempStatus(e.target.value)}
|
||||
placeholder="What's your status?"
|
||||
maxLength={50}
|
||||
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500 text-sm"
|
||||
/>
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-[#2a2a2a] hover:bg-[#3a3a3a] rounded text-white text-sm transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCustomStatusSave}
|
||||
className="px-4 py-2 bg-[#0066ff] hover:bg-[#0052cc] rounded text-white text-sm transition"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
128
astro-site/src/components/mockup/modals/StatusSelectorModal.jsx
Normal file
128
astro-site/src/components/mockup/modals/StatusSelectorModal.jsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { usePresenceStore } from "../../../stores/presenceStore.js";
|
||||
|
||||
export function StatusSelectorModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const { currentStatus, setStatus } = usePresenceStore();
|
||||
|
||||
const isModalOpen = isOpen && type === "statusSelector";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const statuses = [
|
||||
{ value: "online", label: "Online", icon: "🟢", description: "Available to chat" },
|
||||
{ value: "idle", label: "Idle", icon: "🟡", description: "Away from keyboard" },
|
||||
{ value: "dnd", label: "Do Not Disturb", icon: "🔴", description: "Focused - no notifications" },
|
||||
{ value: "invisible", label: "Invisible", icon: "⚫", description: "Appear offline" },
|
||||
];
|
||||
|
||||
const handleStatusChange = (status) => {
|
||||
setStatus(status);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "transparent",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "flex-start",
|
||||
zIndex: 1000,
|
||||
padding: "60px 0 0 80px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "280px",
|
||||
boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "12px 16px", borderBottom: "1px solid #2a2a2a" }}>
|
||||
<h3 style={{ fontSize: "0.875rem", fontWeight: "bold", color: "#999", textTransform: "uppercase", letterSpacing: "1px" }}>
|
||||
Set Status
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px" }}>
|
||||
{statuses.map((status) => (
|
||||
<div
|
||||
key={status.value}
|
||||
onClick={() => handleStatusChange(status.value)}
|
||||
style={{
|
||||
padding: "12px",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
background: currentStatus === status.value ? "#0066ff20" : "transparent",
|
||||
transition: "background 0.2s",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (currentStatus !== status.value) {
|
||||
e.currentTarget.style.background = "#2a2a2a";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (currentStatus !== status.value) {
|
||||
e.currentTarget.style.background = "transparent";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "4px" }}>
|
||||
<span style={{ fontSize: "1.25rem" }}>{status.icon}</span>
|
||||
<span style={{ color: "#e0e0e0", fontWeight: currentStatus === status.value ? "bold" : "normal" }}>
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#666", marginLeft: "36px" }}>
|
||||
{status.description}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Custom Status Button */}
|
||||
<div
|
||||
onClick={() => {
|
||||
onClose();
|
||||
setTimeout(() => {
|
||||
const { onOpen } = useModalStore.getState();
|
||||
onOpen("customStatus");
|
||||
}, 100);
|
||||
}}
|
||||
style={{
|
||||
padding: "12px",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
background: "transparent",
|
||||
borderTop: "1px solid #2a2a2a",
|
||||
marginTop: "8px",
|
||||
paddingTop: "16px",
|
||||
color: "#0066ff",
|
||||
fontWeight: "500",
|
||||
textAlign: "center",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "#2a2a2a";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "transparent";
|
||||
}}
|
||||
>
|
||||
✏️ Set Custom Status
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
150
astro-site/src/components/mockup/modals/ThreadModal.jsx
Normal file
150
astro-site/src/components/mockup/modals/ThreadModal.jsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import Message from "../Message.jsx";
|
||||
|
||||
export function ThreadModal() {
|
||||
const { isOpen, type, data, onClose } = useModalStore();
|
||||
const [reply, setReply] = useState("");
|
||||
|
||||
const isModalOpen = isOpen && type === "thread";
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const thread = {
|
||||
original: {
|
||||
id: "msg-1",
|
||||
author: "Trevor",
|
||||
avatar: "T",
|
||||
text: "Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.",
|
||||
timestamp: "10:34 AM",
|
||||
},
|
||||
replies: [
|
||||
{ id: "reply-1", author: "Marcus", avatar: "M", text: "Excellent work! Testing now.", timestamp: "10:41 AM" },
|
||||
{ id: "reply-2", author: "Anderson", avatar: "A", text: "Looks good on my end 👍", timestamp: "10:45 AM" },
|
||||
],
|
||||
};
|
||||
|
||||
const handleSendReply = (e) => {
|
||||
e.preventDefault();
|
||||
if (!reply.trim()) return;
|
||||
// Add reply logic here
|
||||
setReply("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
width: "90%",
|
||||
maxWidth: "700px",
|
||||
height: "80vh",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: "20px", borderBottom: "1px solid #2a2a2a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<div>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff" }}>Thread</h2>
|
||||
<p style={{ fontSize: "0.875rem", color: "#666", marginTop: "4px" }}>
|
||||
#{data?.channel || "general"} • {thread.replies.length} replies
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "20px" }}>
|
||||
{/* Original Message */}
|
||||
<div style={{ marginBottom: "20px", paddingBottom: "20px", borderBottom: "2px solid #2a2a2a" }}>
|
||||
<Message
|
||||
id={thread.original.id}
|
||||
author={thread.original.author}
|
||||
avatar={thread.original.avatar}
|
||||
text={thread.original.text}
|
||||
time={thread.original.timestamp}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Replies */}
|
||||
<div style={{ marginLeft: "20px", borderLeft: "2px solid #2a2a2a", paddingLeft: "20px" }}>
|
||||
{thread.replies.map((reply) => (
|
||||
<div key={reply.id} style={{ marginBottom: "16px" }}>
|
||||
<Message
|
||||
id={reply.id}
|
||||
author={reply.author}
|
||||
avatar={reply.avatar}
|
||||
text={reply.text}
|
||||
time={reply.timestamp}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reply Input */}
|
||||
<div style={{ padding: "16px", borderTop: "1px solid #2a2a2a" }}>
|
||||
<form onSubmit={handleSendReply} style={{ display: "flex", gap: "8px" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={reply}
|
||||
onChange={(e) => setReply(e.target.value)}
|
||||
placeholder="Reply to thread..."
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "#0f0f0f",
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "4px",
|
||||
padding: "12px 16px",
|
||||
color: "#e0e0e0",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!reply.trim()}
|
||||
style={{
|
||||
padding: "12px 24px",
|
||||
background: reply.trim() ? "#0066ff" : "#2a2a2a",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: reply.trim() ? "pointer" : "not-allowed",
|
||||
fontFamily: "'Roboto Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
astro-site/src/components/mockup/modals/ThreadsModal.jsx
Normal file
23
astro-site/src/components/mockup/modals/ThreadsModal.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import ThreadPanel from "../ThreadPanel.jsx";
|
||||
|
||||
export function ThreadsModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
|
||||
if (!isOpen || type !== "threads") return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,0.3)",
|
||||
zIndex: 998,
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<ThreadPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
astro-site/src/components/mockup/modals/UserDiscoveryModal.jsx
Normal file
105
astro-site/src/components/mockup/modals/UserDiscoveryModal.jsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
import { useDirectMessageStore } from "../../../stores/directMessageStore.js";
|
||||
import { Search, UserPlus } from "lucide-react";
|
||||
|
||||
const AVAILABLE_USERS = [
|
||||
{ id: 'user-2', name: 'Alex Rivera', avatar: '🎮', status: 'online' },
|
||||
{ id: 'user-3', name: 'Jordan Smith', avatar: '⚔️', status: 'idle' },
|
||||
{ id: 'user-4', name: 'Casey Lee', avatar: '🚀', status: 'offline' },
|
||||
{ id: 'user-5', name: 'Morgan Taylor', avatar: '💎', status: 'online' },
|
||||
];
|
||||
|
||||
export default function UserDiscoveryModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const { createConversation, setCurrentConversation } = useDirectMessageStore();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedTab, setSelectedTab] = useState("users"); // 'users' or 'servers'
|
||||
|
||||
if (!isOpen || type !== "discovery") return null;
|
||||
|
||||
const filteredUsers = AVAILABLE_USERS.filter(user =>
|
||||
user.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
const handleStartDM = (user) => {
|
||||
createConversation(user.id, user.name, user.avatar);
|
||||
const convId = `dm-${user.id}`;
|
||||
setCurrentConversation(convId);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-6 w-full max-w-md max-h-96"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold text-white">Find Friends & Servers</h2>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white text-2xl">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative mb-4">
|
||||
<Search size={18} className="absolute left-3 top-2.5 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search users..."
|
||||
className="w-full pl-10 pr-3 py-2 bg-[#0f0f0f] border border-[#2a2a2a] rounded text-white placeholder-gray-500 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{filteredUsers.length > 0 ? (
|
||||
filteredUsers.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex items-center justify-between p-3 bg-[#2a2a2a] rounded hover:bg-[#3a3a3a] transition"
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-lg text-white">
|
||||
{user.avatar}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">{user.name}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
🟢 {user.status === 'online' ? 'Online' : user.status === 'idle' ? 'Idle' : 'Offline'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleStartDM(user)}
|
||||
className="flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium px-3 py-1 rounded transition"
|
||||
>
|
||||
<UserPlus size={14} />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<p>No users found</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full mt-4 bg-[#2a2a2a] hover:bg-[#3a3a3a] text-white font-medium py-2 rounded transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
astro-site/src/components/mockup/modals/UserProfileModal.jsx
Normal file
92
astro-site/src/components/mockup/modals/UserProfileModal.jsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import React, { useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
|
||||
export default function UserProfileModal() {
|
||||
const { isOpen, type, onClose } = useModalStore();
|
||||
const [profile, setProfile] = useState({
|
||||
username: "ShadowForce",
|
||||
status: "online",
|
||||
email: "user@aethex.dev",
|
||||
avatar: "👤",
|
||||
});
|
||||
|
||||
if (!isOpen || type !== "userProfile") return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-6 w-96 max-h-96 overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold text-white">User Profile</h2>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white text-2xl">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Profile Avatar */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-4xl text-white shadow-lg">
|
||||
{profile.avatar}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile Info */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<div>
|
||||
<label className="text-sm text-gray-400">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={profile.username}
|
||||
onChange={(e) => setProfile({ ...profile, username: e.target.value })}
|
||||
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white mt-1 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm text-gray-400">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={profile.email}
|
||||
onChange={(e) => setProfile({ ...profile, email: e.target.value })}
|
||||
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white mt-1 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm text-gray-400">Status</label>
|
||||
<select
|
||||
value={profile.status}
|
||||
onChange={(e) => setProfile({ ...profile, status: e.target.value })}
|
||||
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white mt-1 focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="online">🟢 Online</option>
|
||||
<option value="idle">🟡 Idle</option>
|
||||
<option value="dnd">🔴 Do Not Disturb</option>
|
||||
<option value="offline">⚪ Offline</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
// Save profile changes
|
||||
onClose();
|
||||
}}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded transition"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button onClick={onClose} className="flex-1 bg-[#2a2a2a] hover:bg-[#3a3a3a] text-white font-medium py-2 rounded transition">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Logout */}
|
||||
<button className="w-full mt-4 bg-red-600/20 hover:bg-red-600/30 text-red-400 font-medium py-2 rounded transition border border-red-600/30">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
243
astro-site/src/components/mockup/modals/VoiceCallModal.jsx
Normal file
243
astro-site/src/components/mockup/modals/VoiceCallModal.jsx
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useModalStore } from "../../../stores/modalStore.js";
|
||||
|
||||
export function VoiceCallModal() {
|
||||
const { isOpen, type, data, onClose } = useModalStore();
|
||||
const [isConnecting, setIsConnecting] = useState(true);
|
||||
const [participants, setParticipants] = useState([]);
|
||||
const videoRef = useRef(null);
|
||||
|
||||
const isModalOpen = isOpen && type === "voiceCall";
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen) {
|
||||
// Simulate connection
|
||||
setTimeout(() => {
|
||||
setIsConnecting(false);
|
||||
setParticipants([
|
||||
{ id: 1, name: "You", isMuted: false, isVideoOff: false },
|
||||
]);
|
||||
}, 1500);
|
||||
}
|
||||
}, [isModalOpen]);
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
const handleEndCall = () => {
|
||||
setIsConnecting(true);
|
||||
setParticipants([]);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.9)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
style={{
|
||||
background: "#0a0a0a",
|
||||
border: "1px solid #1a1a1a",
|
||||
borderRadius: "12px",
|
||||
padding: "24px",
|
||||
width: "90%",
|
||||
maxWidth: "900px",
|
||||
height: "80vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
|
||||
<div>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#fff", marginBottom: "4px" }}>
|
||||
{data?.roomName || "Voice Channel"}
|
||||
</h2>
|
||||
<p style={{ fontSize: "0.875rem", color: "#666" }}>
|
||||
{isConnecting ? "Connecting..." : `${participants.length} participant(s)`}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Video Grid */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "16px",
|
||||
marginBottom: "20px",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#0f0f0f",
|
||||
borderRadius: "8px",
|
||||
minHeight: "200px",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center", color: "#666" }}>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "12px" }}>🔊</div>
|
||||
<p>Connecting to voice channel...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
participants.map((participant) => (
|
||||
<div
|
||||
key={participant.id}
|
||||
style={{
|
||||
background: "#0f0f0f",
|
||||
border: "2px solid #1a1a1a",
|
||||
borderRadius: "8px",
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: "200px",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "80px",
|
||||
height: "80px",
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, #0066ff, #00ccff)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "2rem",
|
||||
marginBottom: "12px",
|
||||
}}
|
||||
>
|
||||
{participant.name[0]}
|
||||
</div>
|
||||
<p style={{ color: "#fff", fontWeight: "bold", marginBottom: "4px" }}>
|
||||
{participant.name}
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: "8px", fontSize: "0.875rem", color: "#666" }}>
|
||||
{participant.isMuted && <span>🔇 Muted</span>}
|
||||
{participant.isVideoOff && <span>📹 Video Off</span>}
|
||||
{!participant.isMuted && !participant.isVideoOff && <span>🎤 Speaking</span>}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: "16px",
|
||||
padding: "16px",
|
||||
background: "#0f0f0f",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
borderRadius: "50%",
|
||||
background: "#2a2a2a",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
fontSize: "1.25rem",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
title="Toggle Microphone"
|
||||
>
|
||||
🎤
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
borderRadius: "50%",
|
||||
background: "#2a2a2a",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
fontSize: "1.25rem",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
title="Toggle Video"
|
||||
>
|
||||
📹
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
borderRadius: "50%",
|
||||
background: "#2a2a2a",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
fontSize: "1.25rem",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
title="Share Screen"
|
||||
>
|
||||
🖥️
|
||||
</button>
|
||||
<button
|
||||
onClick={handleEndCall}
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
borderRadius: "50%",
|
||||
background: "#ff0000",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
fontSize: "1.25rem",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.2s",
|
||||
}}
|
||||
title="End Call"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* LiveKit Debug Info */}
|
||||
{data?.token && (
|
||||
<div style={{ marginTop: "12px", padding: "8px", background: "#0f0f0f", borderRadius: "4px", fontSize: "0.75rem", color: "#666" }}>
|
||||
<p>LiveKit URL: {data.liveKitUrl}</p>
|
||||
<p>Room: {data.roomName}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
astro-site/src/components/ui/action-tooltip.jsx
Normal file
15
astro-site/src/components/ui/action-tooltip.jsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
|
||||
|
||||
export function ActionTooltip({ children, label, side = "top", align = "center" }) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip delayDuration={50}>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
<TooltipContent side={side} align={align}>
|
||||
<p className="font-semibold text-sm capitalize">{label?.toLowerCase()}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
157
astro-site/src/components/ui/dropdown-menu.jsx
Normal file
157
astro-site/src/components/ui/dropdown-menu.jsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
import { cn } from "../../utils/cn"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({ className, ...props }) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
25
astro-site/src/components/ui/popover.jsx
Normal file
25
astro-site/src/components/ui/popover.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
import { cn } from "../../utils/cn"
|
||||
|
||||
const Popover = PopoverPrimitive.Root
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger
|
||||
|
||||
const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
))
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent }
|
||||
24
astro-site/src/components/ui/tooltip.jsx
Normal file
24
astro-site/src/components/ui/tooltip.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
import { cn } from "../../utils/cn"
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
|
||||
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
|
||||
import React, { createContext, useContext, useRef, useState, useEffect, useCallback } from "react";
|
||||
import Peer from "simple-peer";
|
||||
import * as SimplePeer from "simple-peer";
|
||||
import { useAeThex } from "../aethex/AeThexProvider.jsx";
|
||||
|
||||
// simple-peer doesn't have a default export in ESM
|
||||
const Peer = SimplePeer.default || SimplePeer;
|
||||
|
||||
const WebRTCContext = createContext(null);
|
||||
|
||||
export function useWebRTC() {
|
||||
|
|
|
|||
132
astro-site/src/hooks/useSocket.js
Normal file
132
astro-site/src/hooks/useSocket.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
import io from 'socket.io-client';
|
||||
import { useMessageStore } from '../stores/messageStore.js';
|
||||
import { usePresenceStore } from '../stores/presenceStore.js';
|
||||
import { useDirectMessageStore } from '../stores/directMessageStore.js';
|
||||
|
||||
let socket = null;
|
||||
|
||||
export function useSocket() {
|
||||
const socketRef = useRef(socket);
|
||||
|
||||
useEffect(() => {
|
||||
if (!socket) {
|
||||
// Connect to backend Socket.IO server
|
||||
socket = io('http://localhost:3000', {
|
||||
transports: ['websocket', 'polling'],
|
||||
reconnection: true,
|
||||
reconnectionDelay: 1000,
|
||||
reconnectionDelayMax: 5000,
|
||||
reconnectionAttempts: 5,
|
||||
});
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('✓ Socket.IO connected');
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('✗ Socket.IO disconnected');
|
||||
});
|
||||
|
||||
socket.on('message:new', (message) => {
|
||||
console.log('📨 New message:', message);
|
||||
useMessageStore.getState().addMessage(message);
|
||||
});
|
||||
|
||||
socket.on('message:updated', (message) => {
|
||||
console.log('✏️ Message updated:', message);
|
||||
useMessageStore.getState().updateMessage(message.id, message);
|
||||
});
|
||||
|
||||
socket.on('message:deleted', ({ messageId }) => {
|
||||
console.log('🗑️ Message deleted:', messageId);
|
||||
useMessageStore.getState().removeMessage(messageId);
|
||||
});
|
||||
|
||||
socket.on('user:typing', ({ channelId, userId, userName }) => {
|
||||
usePresenceStore.getState().setUserTyping(channelId, userId, userName);
|
||||
});
|
||||
|
||||
socket.on('user:online', ({ userId, status }) => {
|
||||
usePresenceStore.getState().setUserStatus(userId, status);
|
||||
});
|
||||
|
||||
socket.on('dm:new', ({ conversationId, message }) => {
|
||||
useDirectMessageStore.getState().addMessage(conversationId, message);
|
||||
});
|
||||
|
||||
socketRef.current = socket;
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Don't disconnect - keep socket alive
|
||||
};
|
||||
}, []);
|
||||
|
||||
return socket;
|
||||
}
|
||||
|
||||
export function useSocketEmit() {
|
||||
const socket = useSocket();
|
||||
|
||||
return {
|
||||
sendMessage: (channelId, text, userId, userName) => {
|
||||
if (socket) {
|
||||
socket.emit('message:send', {
|
||||
channelId,
|
||||
text,
|
||||
userId,
|
||||
userName,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
emitTyping: (channelId, userId, userName) => {
|
||||
if (socket) {
|
||||
socket.emit('user:typing', { channelId, userId, userName });
|
||||
}
|
||||
},
|
||||
|
||||
setUserStatus: (userId, status) => {
|
||||
if (socket) {
|
||||
socket.emit('user:status', { userId, status });
|
||||
}
|
||||
},
|
||||
|
||||
sendDirectMessage: (conversationId, text, userId) => {
|
||||
if (socket) {
|
||||
socket.emit('dm:send', {
|
||||
conversationId,
|
||||
text,
|
||||
userId,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
startCall: (roomName, userId, userName) => {
|
||||
if (socket) {
|
||||
socket.emit('call:start', { roomName, userId, userName });
|
||||
}
|
||||
},
|
||||
|
||||
endCall: (roomName) => {
|
||||
if (socket) {
|
||||
socket.emit('call:end', { roomName });
|
||||
}
|
||||
},
|
||||
|
||||
joinCallRoom: (roomName, userId, userName) => {
|
||||
if (socket) {
|
||||
socket.emit('call:join', { roomName, userId, userName });
|
||||
}
|
||||
},
|
||||
|
||||
leaveCallRoom: (roomName, userId) => {
|
||||
if (socket) {
|
||||
socket.emit('call:leave', { roomName, userId });
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -1,6 +1,32 @@
|
|||
|
||||
---
|
||||
import ReactAppIsland from '../components/ReactAppIsland.jsx';
|
||||
import MainLayout from '../components/mockup/MainLayout.jsx';
|
||||
import { AeThexProvider } from '../components/aethex/AeThexProvider.jsx';
|
||||
import '../components/mockup/global.css';
|
||||
---
|
||||
|
||||
<ReactAppIsland client:load />
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AeThex Connect - Platform</title>
|
||||
<meta name="description" content="Next-generation communication platform for gamers" />
|
||||
<script is:inline>
|
||||
// Polyfill for simple-peer
|
||||
window.global = window;
|
||||
|
||||
// Check if user is authenticated, redirect to login if not
|
||||
(function() {
|
||||
const token = localStorage.getItem('aethex_token');
|
||||
if (!token) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<AeThexProvider client:only="react">
|
||||
<MainLayout client:only="react" />
|
||||
</AeThexProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
<!-- AeThex Connect Mockup merged as Astro page -->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AeThex Connect - Metaverse Communication</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* All CSS from mockup HTML here */
|
||||
</style>
|
||||
</head>
|
||||
---
|
||||
import MainLayout from '../components/mockup/MainLayout.jsx';
|
||||
import { AeThexProvider } from '../components/aethex/AeThexProvider.jsx';
|
||||
import { WebRTCProvider } from '../components/webrtc/WebRTCProvider.jsx';
|
||||
import '../components/mockup/global.css';
|
||||
---
|
||||
|
||||
<div class="connect-container">
|
||||
<!-- ...existing mockup HTML content... -->
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AeThex Connect - Platform (React)</title>
|
||||
<script is:inline>
|
||||
// Polyfill for simple-peer
|
||||
window.global = window;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<AeThexProvider client:only="react">
|
||||
<MainLayout client:only="react" />
|
||||
</AeThexProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
75
astro-site/src/react-app/components/Chat/CallButton.css
Normal file
75
astro-site/src/react-app/components/Chat/CallButton.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
* CallButton CSS
|
||||
*/
|
||||
|
||||
.call-button-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-start-call {
|
||||
background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
|
||||
color: #000000;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-start-call:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-start-call:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.call-error {
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border: 1px solid #f43636;
|
||||
color: #f43636;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.call-error button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #f43636;
|
||||
cursor: pointer;
|
||||
font-size: 1.25rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.call-error button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn-start-call {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.call-error {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
87
astro-site/src/react-app/components/Chat/CallButton.jsx
Normal file
87
astro-site/src/react-app/components/Chat/CallButton.jsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/**
|
||||
* CallButton Component
|
||||
* Button to initiate voice/video calls
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import VoiceCallUI from './VoiceCallUI';
|
||||
import './CallButton.css';
|
||||
|
||||
export default function CallButton({ channelId, channelName, userName, userToken }) {
|
||||
const [isInCall, setIsInCall] = useState(false);
|
||||
const [callToken, setCallToken] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleStartCall = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
|
||||
// Request LiveKit token from backend
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/livekit/token`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${userToken}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
roomName: `channel-${channelId}`,
|
||||
canPublish: true
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get call token');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setCallToken(data.token);
|
||||
setIsInCall(true);
|
||||
} catch (err) {
|
||||
console.error('Call start error:', err);
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndCall = () => {
|
||||
setIsInCall(false);
|
||||
setCallToken(null);
|
||||
};
|
||||
|
||||
if (isInCall && callToken) {
|
||||
return (
|
||||
<VoiceCallUI
|
||||
roomName={`channel-${channelId}`}
|
||||
userName={userName}
|
||||
token={callToken}
|
||||
onClose={handleEndCall}
|
||||
onError={(error) => {
|
||||
console.error('Call error:', error);
|
||||
setError(error.message);
|
||||
handleEndCall();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="call-button-container">
|
||||
<button
|
||||
className="btn-start-call"
|
||||
onClick={handleStartCall}
|
||||
title={`Start voice call in ${channelName}`}
|
||||
>
|
||||
🎤 Start Call
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div className="call-error">
|
||||
<span>{error}</span>
|
||||
<button onClick={() => setError(null)}>×</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
astro-site/src/react-app/components/Chat/EmojiPicker.css
Normal file
54
astro-site/src/react-app/components/Chat/EmojiPicker.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* EmojiPicker CSS
|
||||
*/
|
||||
|
||||
.emoji-picker-wrapper {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji-picker) {
|
||||
background: #2c2f33;
|
||||
border: 1px solid #23272a;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji-picker-header) {
|
||||
background: #23272a;
|
||||
border-bottom: 1px solid #1a1d1f;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji-picker-search input) {
|
||||
background: #23272a !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #1a1d1f !important;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji-picker-search input::placeholder) {
|
||||
color: #72767d !important;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-category-button) {
|
||||
color: #72767d;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-category-button.active) {
|
||||
color: #7289da;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji) {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji:hover) {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.emoji-picker-wrapper :global(.em-emoji-category) {
|
||||
scroll-margin-top: 40px;
|
||||
}
|
||||
82
astro-site/src/react-app/components/Chat/EmojiPicker.jsx
Normal file
82
astro-site/src/react-app/components/Chat/EmojiPicker.jsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import React, { useState, useRef, useEffect } from "react";
|
||||
import "./EmojiPicker.css";
|
||||
|
||||
const EMOJI_GROUPS = {
|
||||
smileys: ["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘"],
|
||||
gestures: ["👋", "🤚", "🖐️", "✋", "🖖", "👌", "🤌", "🤏", "✌️", "🤞", "🫰", "🤟", "🤘", "🤙", "👍", "👎"],
|
||||
objects: ["⚽", "🏀", "🏈", "⚾", "🥎", "🎾", "🏐", "🏉", "🥏", "🎱", "🪀", "🏓", "🏸", "🏒", "🏑", "🥍"],
|
||||
nature: ["🌀", "🌈", "☀️", "🌤️", "⛅", "🌥️", "☁️", "🌦️", "🌧️", "⛈️", "🌩️", "🌨️", "❄️", "☃️", "⛄", "🌬️"],
|
||||
food: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🍈", "🍒", "🍑", "🍍", "🥭", "🥥", "🍅"],
|
||||
};
|
||||
|
||||
export default function EmojiPicker({ onChange }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeGroup, setActiveGroup] = useState("smileys");
|
||||
const pickerRef = useRef(null);
|
||||
|
||||
// Close picker when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleEmojiClick = (emoji) => {
|
||||
onChange(emoji);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="emoji-picker-container" ref={pickerRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="emoji-picker-button w-10 h-10 flex items-center justify-center rounded bg-[#1a1a1a] text-xl text-gray-400 hover:text-gray-200 transition"
|
||||
title="Emoji picker"
|
||||
>
|
||||
😊
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="emoji-picker-panel absolute bottom-12 right-0 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-3 shadow-lg z-50 w-72">
|
||||
{/* Group tabs */}
|
||||
<div className="flex gap-1 mb-3 pb-2 border-b border-[#2a2a2a]">
|
||||
{Object.keys(EMOJI_GROUPS).map((group) => (
|
||||
<button
|
||||
key={group}
|
||||
onClick={() => setActiveGroup(group)}
|
||||
className={`px-2 py-1 rounded text-sm capitalize transition ${
|
||||
activeGroup === group
|
||||
? "bg-blue-600 text-white"
|
||||
: "text-gray-400 hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
{group.slice(0, 3)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Emoji grid */}
|
||||
<div className="grid grid-cols-6 gap-2">
|
||||
{EMOJI_GROUPS[activeGroup].map((emoji, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => handleEmojiClick(emoji)}
|
||||
className="text-2xl hover:bg-[#2a2a2a] p-2 rounded transition"
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
264
astro-site/src/react-app/components/Chat/FileUploadModal.css
Normal file
264
astro-site/src/react-app/components/Chat/FileUploadModal.css
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
/**
|
||||
* FileUploadModal CSS
|
||||
*/
|
||||
|
||||
.file-upload-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
animation: fadeIn 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.file-upload-modal {
|
||||
background: #2c2f33;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-modal-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #23272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #23272a;
|
||||
}
|
||||
|
||||
.file-upload-modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #72767d;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.file-upload-modal-content {
|
||||
flex: 1;
|
||||
padding: 2rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.file-upload-container {
|
||||
border: 2px dashed #7289da;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background: rgba(114, 137, 218, 0.05);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-upload-container:hover {
|
||||
background: rgba(114, 137, 218, 0.1);
|
||||
border-color: #00d9ff;
|
||||
}
|
||||
|
||||
.file-upload-button {
|
||||
background: linear-gradient(135deg, #7289da 0%, #00d9ff 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.file-upload-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(114, 137, 218, 0.4);
|
||||
}
|
||||
|
||||
.file-upload-allowed {
|
||||
color: #b5bac1;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.upload-error {
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border: 1px solid #f43636;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #f43636;
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.error-dismiss {
|
||||
background: #f43636;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.error-dismiss:hover {
|
||||
background: #d63030;
|
||||
}
|
||||
|
||||
.upload-complete {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
color: #43b581;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0.5rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.uploaded-files-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.uploaded-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(0, 217, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #b5bac1;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.8125rem;
|
||||
color: #72767d;
|
||||
}
|
||||
|
||||
.file-upload-modal-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #23272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #2c2f33;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: #424549;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
color: #72767d;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.file-upload-modal {
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.file-upload-modal-header h2 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.file-upload-modal-content {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.file-upload-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
106
astro-site/src/react-app/components/Chat/FileUploadModal.jsx
Normal file
106
astro-site/src/react-app/components/Chat/FileUploadModal.jsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
/**
|
||||
* FileUploadModal Component
|
||||
* Modal for uploading files to messages using UploadThing
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { UploadDropzone } from '@uploadthing/react';
|
||||
import './FileUploadModal.css';
|
||||
|
||||
export default function FileUploadModal({ onFileUpload, onClose, isOpen }) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadedFiles, setUploadedFiles] = useState([]);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleUploadComplete = useCallback(
|
||||
(res) => {
|
||||
if (res && res.length > 0) {
|
||||
setUploadedFiles(res);
|
||||
res.forEach((file) => {
|
||||
onFileUpload({
|
||||
url: file.url,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
});
|
||||
});
|
||||
setUploading(false);
|
||||
// Close modal after a short delay
|
||||
setTimeout(onClose, 500);
|
||||
}
|
||||
},
|
||||
[onFileUpload, onClose]
|
||||
);
|
||||
|
||||
const handleUploadError = (error) => {
|
||||
setError(error.message);
|
||||
setUploading(false);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="file-upload-modal-overlay" onClick={onClose}>
|
||||
<div className="file-upload-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="file-upload-modal-header">
|
||||
<h2>Upload Files</h2>
|
||||
<button className="modal-close-btn" onClick={onClose} aria-label="Close">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="file-upload-modal-content">
|
||||
{error && (
|
||||
<div className="upload-error">
|
||||
<p className="error-icon">⚠️</p>
|
||||
<p className="error-text">{error}</p>
|
||||
<button className="error-dismiss" onClick={() => setError(null)}>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadedFiles.length === 0 ? (
|
||||
<UploadDropzone
|
||||
endpoint="messageUpload"
|
||||
onClientUploadComplete={handleUploadComplete}
|
||||
onUploadError={handleUploadError}
|
||||
onUploadBegin={() => setUploading(true)}
|
||||
className="uploadthing-dropzone"
|
||||
appearance={{
|
||||
button: 'file-upload-button',
|
||||
container: 'file-upload-container',
|
||||
allowedContent: 'file-upload-allowed',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="upload-complete">
|
||||
<p className="success-icon">✓</p>
|
||||
<p className="success-text">Files uploaded successfully!</p>
|
||||
<div className="uploaded-files-list">
|
||||
{uploadedFiles.map((file, idx) => (
|
||||
<div key={idx} className="uploaded-file-item">
|
||||
<span className="file-icon">📄</span>
|
||||
<span className="file-name">{file.name}</span>
|
||||
<span className="file-size">
|
||||
{(file.size / 1024).toFixed(2)} KB
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="file-upload-modal-footer">
|
||||
<button className="btn-cancel" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
{uploadedFiles.length === 0 && (
|
||||
<p className="upload-hint">Drag files here or click to browse</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
/**
|
||||
* InfiniteScrollMessages CSS
|
||||
* Scrollable container with loading indicators
|
||||
*/
|
||||
|
||||
.infinite-scroll-messages-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Loading indicator at top */
|
||||
.scroll-loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
color: #72767d;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* Animated spinner */
|
||||
.spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(114, 137, 218, 0.2);
|
||||
border-top: 3px solid #7289da;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sentinel element for intersection observer */
|
||||
.scroll-sentinel {
|
||||
height: 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* End of messages indicator */
|
||||
.scroll-end-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
color: #72767d;
|
||||
font-size: 0.8125rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-end-indicator::before,
|
||||
.scroll-end-indicator::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#72767d,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.scroll-end-indicator::before {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.scroll-end-indicator::after {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.scroll-end-indicator span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.infinite-scroll-messages-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.infinite-scroll-messages-container::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.infinite-scroll-messages-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.infinite-scroll-messages-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 217, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
.infinite-scroll-messages-container {
|
||||
scrollbar-color: rgba(0, 217, 255, 0.2) rgba(0, 0, 0, 0.1);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.scroll-loading-indicator {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.scroll-end-indicator {
|
||||
padding: 1.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.scroll-end-indicator::before {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.scroll-end-indicator::after {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* InfiniteScrollMessages Component
|
||||
* Wrapper around MessageList that implements infinite scroll
|
||||
* Detects when user scrolls to top and loads more messages
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef, useCallback } from 'react';
|
||||
import MessageList from './MessageList';
|
||||
import './InfiniteScrollMessages.css';
|
||||
|
||||
export default function InfiniteScrollMessages({
|
||||
messages,
|
||||
typingUsers,
|
||||
onLoadMore,
|
||||
hasMore = true,
|
||||
isLoading = false,
|
||||
threshold = 300, // Pixels from top to trigger load
|
||||
}) {
|
||||
const scrollContainerRef = useRef(null);
|
||||
const sentinelRef = useRef(null);
|
||||
const intersectionObserverRef = useRef(null);
|
||||
|
||||
// Intersection Observer for infinite scroll detection
|
||||
useEffect(() => {
|
||||
if (!hasMore || isLoading) return;
|
||||
|
||||
const options = {
|
||||
root: scrollContainerRef.current,
|
||||
rootMargin: `${threshold}px 0px 0px 0px`,
|
||||
threshold: 0.01,
|
||||
};
|
||||
|
||||
intersectionObserverRef.current = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && hasMore && !isLoading) {
|
||||
onLoadMore?.();
|
||||
}
|
||||
});
|
||||
}, options);
|
||||
|
||||
if (sentinelRef.current) {
|
||||
intersectionObserverRef.current.observe(sentinelRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (intersectionObserverRef.current) {
|
||||
intersectionObserverRef.current.disconnect();
|
||||
}
|
||||
};
|
||||
}, [hasMore, isLoading, onLoadMore, threshold]);
|
||||
|
||||
return (
|
||||
<div className="infinite-scroll-messages-container" ref={scrollContainerRef}>
|
||||
{/* Loading indicator at top */}
|
||||
{isLoading && (
|
||||
<div className="scroll-loading-indicator">
|
||||
<div className="spinner"></div>
|
||||
<span>Loading messages...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sentinel element - triggers load when visible */}
|
||||
<div ref={sentinelRef} className="scroll-sentinel" />
|
||||
|
||||
{/* Messages */}
|
||||
<MessageList messages={messages} typingUsers={typingUsers} />
|
||||
|
||||
{/* End of messages indicator */}
|
||||
{!hasMore && messages.length > 0 && (
|
||||
<div className="scroll-end-indicator">
|
||||
<span>Beginning of conversation</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
117
astro-site/src/react-app/components/Chat/MentionSuggestions.css
Normal file
117
astro-site/src/react-app/components/Chat/MentionSuggestions.css
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
/**
|
||||
* MentionSuggestions CSS
|
||||
*/
|
||||
|
||||
.mention-suggestions {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
background: #2c2f33;
|
||||
border: 1px solid #23272a;
|
||||
border-radius: 8px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
|
||||
animation: slideUp 0.2s ease-out;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #b5bac1;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #23272a;
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestion-item:hover,
|
||||
.suggestion-item.selected {
|
||||
background: rgba(114, 137, 218, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.suggestion-avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.suggestion-avatar img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #7289da 0%, #00d9ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.suggestion-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.suggestion-username {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.suggestion-status {
|
||||
font-size: 0.75rem;
|
||||
color: #72767d;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.mention-suggestions::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.mention-suggestions::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mention-suggestions::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mention-suggestions::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 217, 255, 0.4);
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* MentionSuggestions Component
|
||||
* Shows suggestions for @mentions
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import UserStatus from './UserStatus';
|
||||
import './MentionSuggestions.css';
|
||||
|
||||
export default function MentionSuggestions({
|
||||
users = [],
|
||||
query = '',
|
||||
onMentionSelect,
|
||||
isOpen = false,
|
||||
}) {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const suggestionsRef = useRef(null);
|
||||
|
||||
// Filter users based on query
|
||||
const suggestions = query
|
||||
? users.filter((user) => user.username.toLowerCase().startsWith(query.toLowerCase()))
|
||||
: users;
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [query]);
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev + 1) % suggestions.length);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev - 1 + suggestions.length) % suggestions.length);
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (suggestions[selectedIndex]) {
|
||||
onMentionSelect?.(suggestions[selectedIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
onMentionSelect?.(null);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen || suggestions.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mention-suggestions" ref={suggestionsRef} onKeyDown={handleKeyDown}>
|
||||
{suggestions.map((user, idx) => (
|
||||
<button
|
||||
key={user.id}
|
||||
className={`suggestion-item ${idx === selectedIndex ? 'selected' : ''}`}
|
||||
onClick={() => onMentionSelect?.(user)}
|
||||
>
|
||||
<div className="suggestion-avatar">
|
||||
{user.avatar ? (
|
||||
<img src={user.avatar} alt={user.username} />
|
||||
) : (
|
||||
<div className="avatar-placeholder">{user.username[0]?.toUpperCase()}</div>
|
||||
)}
|
||||
<UserStatus status={user.status} size="sm" />
|
||||
</div>
|
||||
<div className="suggestion-info">
|
||||
<div className="suggestion-username">{user.username}</div>
|
||||
{user.status && <div className="suggestion-status">{user.status}</div>}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -33,15 +33,26 @@
|
|||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-emoji.active {
|
||||
background: rgba(0, 217, 255, 0.3);
|
||||
box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-attach:disabled,
|
||||
.btn-emoji:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Textarea Wrapper for Emoji Picker positioning */
|
||||
.textarea-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Textarea */
|
||||
.message-textarea {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
max-height: 120px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
/**
|
||||
* MessageInput Component
|
||||
* Input field for sending messages
|
||||
* Input field for sending messages with emoji picker and file upload
|
||||
*/
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import EmojiPicker from './EmojiPicker';
|
||||
import FileUploadModal from './FileUploadModal';
|
||||
import './MessageInput.css';
|
||||
|
||||
export default function MessageInput({ onSend, onTyping, onStopTyping }) {
|
||||
const [message, setMessage] = useState('');
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileInputRef = useRef(null);
|
||||
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
|
||||
const [showFileUpload, setShowFileUpload] = useState(false);
|
||||
const typingTimeoutRef = useRef(null);
|
||||
const textareaRef = useRef(null);
|
||||
|
||||
const handleChange = (e) => {
|
||||
setMessage(e.target.value);
|
||||
|
|
@ -50,73 +53,59 @@ export default function MessageInput({ onSend, onTyping, onStopTyping }) {
|
|||
}
|
||||
};
|
||||
|
||||
const handleFileUpload = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
const handleEmojiSelect = (emoji) => {
|
||||
const newMessage = message + emoji;
|
||||
setMessage(newMessage);
|
||||
textareaRef.current?.focus();
|
||||
};
|
||||
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/files/upload`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
},
|
||||
body: formData
|
||||
}
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
const handleFileUpload = (file) => {
|
||||
// Send message with file attachment
|
||||
onSend(`📎 ${file.name}`, [data.file]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('File upload failed:', error);
|
||||
alert('Failed to upload file');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
const attachmentMessage = `📎 ${file.name}`;
|
||||
onSend(attachmentMessage, [file]);
|
||||
setShowFileUpload(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FileUploadModal
|
||||
isOpen={showFileUpload}
|
||||
onClose={() => setShowFileUpload(false)}
|
||||
onFileUpload={handleFileUpload}
|
||||
/>
|
||||
|
||||
<form className="message-input" onSubmit={handleSubmit}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-attach"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
onClick={() => setShowFileUpload(true)}
|
||||
title="Attach file"
|
||||
>
|
||||
{uploading ? '⏳' : '📎'}
|
||||
📎
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileUpload}
|
||||
style={{ display: 'none' }}
|
||||
<div className="textarea-wrapper">
|
||||
{showEmojiPicker && (
|
||||
<EmojiPicker
|
||||
onEmojiSelect={handleEmojiSelect}
|
||||
onClose={() => setShowEmojiPicker(false)}
|
||||
/>
|
||||
|
||||
)}
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={message}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyPress}
|
||||
placeholder="Type a message..."
|
||||
rows={1}
|
||||
disabled={uploading}
|
||||
className="message-textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn-emoji"
|
||||
className={`btn-emoji ${showEmojiPicker ? 'active' : ''}`}
|
||||
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
|
||||
title="Add emoji"
|
||||
>
|
||||
😊
|
||||
|
|
@ -125,10 +114,11 @@ export default function MessageInput({ onSend, onTyping, onStopTyping }) {
|
|||
<button
|
||||
type="submit"
|
||||
className="btn-send"
|
||||
disabled={!message.trim() || uploading}
|
||||
disabled={!message.trim()}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
/**
|
||||
* MessageList Component
|
||||
* Displays messages in a conversation
|
||||
* Displays messages in a conversation with improved timestamps
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import {
|
||||
formatMessageTime,
|
||||
formatDateDivider,
|
||||
formatEditedBadge,
|
||||
shouldShowDateDivider,
|
||||
} from '../../utils/dateFormat';
|
||||
import TypingIndicator from './TypingIndicator';
|
||||
import './MessageList.css';
|
||||
|
||||
export default function MessageList({ messages, typingUsers }) {
|
||||
|
|
@ -14,15 +21,6 @@ export default function MessageList({ messages, typingUsers }) {
|
|||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
const formatTime = (timestamp) => {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
});
|
||||
};
|
||||
|
||||
const getCurrentUserId = () => {
|
||||
// In a real app, get this from auth context
|
||||
return localStorage.getItem('userId');
|
||||
|
|
@ -49,14 +47,14 @@ export default function MessageList({ messages, typingUsers }) {
|
|||
const showAvatar = index === messages.length - 1 ||
|
||||
messages[index + 1]?.senderId !== message.senderId;
|
||||
|
||||
const showTimestamp = index === 0 ||
|
||||
new Date(message.createdAt) - new Date(messages[index - 1].createdAt) > 300000; // 5 mins
|
||||
const previousMessage = index > 0 ? messages[index - 1] : null;
|
||||
const showDateDivider = shouldShowDateDivider(message, previousMessage);
|
||||
|
||||
return (
|
||||
<div key={message.id}>
|
||||
{showTimestamp && (
|
||||
{showDateDivider && (
|
||||
<div className="message-timestamp-divider">
|
||||
{new Date(message.createdAt).toLocaleDateString()}
|
||||
{formatDateDivider(message.createdAt)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -101,8 +99,14 @@ export default function MessageList({ messages, typingUsers }) {
|
|||
)}
|
||||
|
||||
<div className="message-footer">
|
||||
<span className="message-time">{formatTime(message.createdAt)}</span>
|
||||
{message.editedAt && <span className="edited-indicator">edited</span>}
|
||||
<span className="message-time">
|
||||
{formatMessageTime(message.createdAt)}
|
||||
</span>
|
||||
{message.editedAt && (
|
||||
<span className="edited-indicator">
|
||||
{formatEditedBadge(message.editedAt)}
|
||||
</span>
|
||||
)}
|
||||
{message._sending && <span className="sending-indicator">sending...</span>}
|
||||
</div>
|
||||
|
||||
|
|
@ -123,14 +127,7 @@ export default function MessageList({ messages, typingUsers }) {
|
|||
})}
|
||||
|
||||
{typingUsers.length > 0 && (
|
||||
<div className="typing-indicator">
|
||||
<div className="typing-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<span className="typing-text">Someone is typing...</span>
|
||||
</div>
|
||||
<TypingIndicator typingUsers={typingUsers} />
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
* MessageReactions CSS
|
||||
* Displays emoji reactions on messages
|
||||
*/
|
||||
|
||||
.message-reactions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reactions-list {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.reaction-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border: 1px solid #7289da;
|
||||
background: rgba(114, 137, 218, 0.15);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.reaction-button:hover {
|
||||
background: rgba(114, 137, 218, 0.25);
|
||||
border-color: #00d9ff;
|
||||
}
|
||||
|
||||
.reaction-button.user-reacted {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
border-color: #00d9ff;
|
||||
}
|
||||
|
||||
.reaction-button.user-reacted:hover {
|
||||
background: rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
|
||||
.reaction-emoji {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.reaction-count {
|
||||
font-size: 0.75rem;
|
||||
color: #b5bac1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-reaction-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-add-reaction {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #7289da;
|
||||
background: rgba(114, 137, 218, 0.15);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-add-reaction:hover {
|
||||
background: rgba(114, 137, 218, 0.25);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.message-reactions-container {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.reaction-button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.btn-add-reaction {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* MessageReactions Component
|
||||
* Displays and manages emoji reactions on messages
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import ReactionPicker from './ReactionPicker';
|
||||
import './MessageReactions.css';
|
||||
|
||||
export default function MessageReactions({
|
||||
reactions = [],
|
||||
onAddReaction,
|
||||
onRemoveReaction,
|
||||
currentUserId,
|
||||
messageId,
|
||||
}) {
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
|
||||
const handleReactionClick = (emoji) => {
|
||||
// Check if user already reacted with this emoji
|
||||
const existingReaction = reactions.find((r) => r.emoji === emoji);
|
||||
|
||||
if (existingReaction?.users?.includes(currentUserId)) {
|
||||
// Remove reaction
|
||||
onRemoveReaction?.(messageId, emoji, currentUserId);
|
||||
} else {
|
||||
// Add reaction
|
||||
onAddReaction?.(messageId, emoji, currentUserId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddReaction = (emoji) => {
|
||||
onAddReaction?.(messageId, emoji, currentUserId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="message-reactions-container">
|
||||
<div className="reactions-list">
|
||||
{reactions.map((reaction, idx) => {
|
||||
const userReacted = reaction.users?.includes(currentUserId);
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
className={`reaction-button ${userReacted ? 'user-reacted' : ''}`}
|
||||
onClick={() => handleReactionClick(reaction.emoji)}
|
||||
title={reaction.users?.join(', ') || 'Add reaction'}
|
||||
>
|
||||
<span className="reaction-emoji">{reaction.emoji}</span>
|
||||
{reaction.users?.length > 0 && (
|
||||
<span className="reaction-count">{reaction.users.length}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="add-reaction-container">
|
||||
{showPicker && (
|
||||
<ReactionPicker
|
||||
onReactionSelect={handleAddReaction}
|
||||
onClose={() => setShowPicker(false)}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
className="btn-add-reaction"
|
||||
onClick={() => setShowPicker(!showPicker)}
|
||||
title="Add reaction"
|
||||
>
|
||||
➕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
astro-site/src/react-app/components/Chat/ReactionPicker.css
Normal file
45
astro-site/src/react-app/components/Chat/ReactionPicker.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* ReactionPicker CSS
|
||||
*/
|
||||
|
||||
.reaction-picker-wrapper {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: -10px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-emoji-picker) {
|
||||
background: #2c2f33;
|
||||
border: 1px solid #23272a;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-emoji-picker-header) {
|
||||
background: #23272a;
|
||||
border-bottom: 1px solid #1a1d1f;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-emoji-picker-search input) {
|
||||
background: #23272a !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #1a1d1f !important;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-category-button) {
|
||||
color: #72767d;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-category-button.active) {
|
||||
color: #7289da;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-emoji) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reaction-picker-wrapper :global(.em-emoji:hover) {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
252
astro-site/src/react-app/components/Chat/SearchMessages.css
Normal file
252
astro-site/src/react-app/components/Chat/SearchMessages.css
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
/**
|
||||
* SearchMessages CSS
|
||||
*/
|
||||
|
||||
.search-messages-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
z-index: 2000;
|
||||
animation: fadeIn 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.search-messages-panel {
|
||||
background: #2c2f33;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.search-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #23272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #23272a;
|
||||
}
|
||||
|
||||
.search-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #72767d;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
padding: 1rem 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
border: 1px solid #7289da;
|
||||
background: rgba(114, 137, 218, 0.1);
|
||||
color: #ffffff;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9375rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #00d9ff;
|
||||
background: rgba(0, 217, 255, 0.05);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #72767d;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #72767d;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.5rem 1rem 1.5rem;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #7289da;
|
||||
background: transparent;
|
||||
color: #b5bac1;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
background: rgba(114, 137, 218, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #7289da;
|
||||
color: #ffffff;
|
||||
border-color: #7289da;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
flex: 1;
|
||||
padding: 1rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: #72767d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.results-count {
|
||||
color: #b5bac1;
|
||||
font-size: 0.8125rem;
|
||||
margin: 0 0 1rem 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
background: rgba(114, 137, 218, 0.1);
|
||||
border-left: 3px solid #7289da;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
background: rgba(114, 137, 218, 0.2);
|
||||
border-left-color: #00d9ff;
|
||||
}
|
||||
|
||||
.result-sender {
|
||||
font-size: 0.8125rem;
|
||||
color: #7289da;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
font-size: 0.875rem;
|
||||
color: #b5bac1;
|
||||
margin-bottom: 0.5rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.result-attachments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.attachment-badge {
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
border: 1px solid #00d9ff;
|
||||
color: #00d9ff;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.search-results::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.search-results::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-results::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.search-results::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 217, 255, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-messages-panel {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.search-input-group,
|
||||
.filter-buttons {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
144
astro-site/src/react-app/components/Chat/SearchMessages.jsx
Normal file
144
astro-site/src/react-app/components/Chat/SearchMessages.jsx
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
/**
|
||||
* SearchMessages Component
|
||||
* Search and filter messages by content, sender, or date
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import './SearchMessages.css';
|
||||
|
||||
export default function SearchMessages({
|
||||
messages = [],
|
||||
onFilterMessages,
|
||||
onClose,
|
||||
isOpen,
|
||||
}) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [filterType, setFilterType] = useState('all'); // all, text, attachments, mentions
|
||||
const [results, setResults] = useState([]);
|
||||
|
||||
// Filter messages based on search query and filter type
|
||||
const filteredMessages = useMemo(() => {
|
||||
if (!searchQuery.trim()) return [];
|
||||
|
||||
const query = searchQuery.toLowerCase();
|
||||
|
||||
return messages.filter((msg) => {
|
||||
// Check filter type
|
||||
if (filterType === 'attachments' && (!msg.metadata?.attachments || msg.metadata.attachments.length === 0)) {
|
||||
return false;
|
||||
}
|
||||
if (filterType === 'mentions' && !msg.content.includes('@')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Search in content
|
||||
if (msg.content.toLowerCase().includes(query)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Search in sender
|
||||
if (msg.senderUsername?.toLowerCase().includes(query)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Search in attachments
|
||||
if (msg.metadata?.attachments?.some((att) => att.filename.toLowerCase().includes(query))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}, [messages, searchQuery, filterType]);
|
||||
|
||||
useEffect(() => {
|
||||
setResults(filteredMessages);
|
||||
onFilterMessages?.(filteredMessages);
|
||||
}, [filteredMessages, onFilterMessages]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="search-messages-overlay" onClick={onClose}>
|
||||
<div className="search-messages-panel" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="search-header">
|
||||
<h3>Search Messages</h3>
|
||||
<button className="close-btn" onClick={onClose}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="search-input-group">
|
||||
<input
|
||||
type="text"
|
||||
className="search-input"
|
||||
placeholder="Search messages..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<span className="search-icon">🔍</span>
|
||||
</div>
|
||||
|
||||
<div className="filter-buttons">
|
||||
<button
|
||||
className={`filter-btn ${filterType === 'all' ? 'active' : ''}`}
|
||||
onClick={() => setFilterType('all')}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
className={`filter-btn ${filterType === 'text' ? 'active' : ''}`}
|
||||
onClick={() => setFilterType('text')}
|
||||
>
|
||||
Text
|
||||
</button>
|
||||
<button
|
||||
className={`filter-btn ${filterType === 'attachments' ? 'active' : ''}`}
|
||||
onClick={() => setFilterType('attachments')}
|
||||
>
|
||||
📎 Files
|
||||
</button>
|
||||
<button
|
||||
className={`filter-btn ${filterType === 'mentions' ? 'active' : ''}`}
|
||||
onClick={() => setFilterType('mentions')}
|
||||
>
|
||||
@Mentions
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="search-results">
|
||||
{results.length === 0 ? (
|
||||
<div className="no-results">
|
||||
{searchQuery ? '🔍 No messages found' : '📝 Type to search'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="results-count">{results.length} result(s)</p>
|
||||
<div className="results-list">
|
||||
{results.map((msg, idx) => (
|
||||
<div key={idx} className="result-item">
|
||||
<div className="result-sender">{msg.senderUsername}</div>
|
||||
<div className="result-content">
|
||||
{msg.content.length > 100
|
||||
? msg.content.substring(0, 100) + '...'
|
||||
: msg.content}
|
||||
</div>
|
||||
{msg.metadata?.attachments?.length > 0 && (
|
||||
<div className="result-attachments">
|
||||
{msg.metadata.attachments.map((att, i) => (
|
||||
<span key={i} className="attachment-badge">
|
||||
📎 {att.filename}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
astro-site/src/react-app/components/Chat/TypingIndicator.css
Normal file
86
astro-site/src/react-app/components/Chat/TypingIndicator.css
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* TypingIndicator CSS
|
||||
* Animated typing indicator with pulsing dots
|
||||
*/
|
||||
|
||||
.typing-indicator-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.typing-indicator-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #7289da 0%, #00d9ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.typing-indicator-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.typing-dots span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #7289da;
|
||||
animation: typing-pulse 1.4s infinite;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(1) {
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(2) {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(3) {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
@keyframes typing-pulse {
|
||||
0%, 60%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
.typing-text {
|
||||
color: #b5bac1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
45
astro-site/src/react-app/components/Chat/TypingIndicator.jsx
Normal file
45
astro-site/src/react-app/components/Chat/TypingIndicator.jsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* TypingIndicator Component
|
||||
* Shows animated typing indicator with user names
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import './TypingIndicator.css';
|
||||
|
||||
export default function TypingIndicator({ typingUsers, maxDisplay = 3 }) {
|
||||
if (!typingUsers || typingUsers.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const displayUsers = typingUsers.slice(0, maxDisplay);
|
||||
const hiddenCount = typingUsers.length - maxDisplay;
|
||||
|
||||
const getTypingText = () => {
|
||||
if (displayUsers.length === 1) {
|
||||
return `${displayUsers[0]} is typing`;
|
||||
}
|
||||
if (displayUsers.length === 2) {
|
||||
return `${displayUsers[0]} and ${displayUsers[1]} are typing`;
|
||||
}
|
||||
if (displayUsers.length === 3) {
|
||||
return `${displayUsers[0]}, ${displayUsers[1]}, and ${displayUsers[2]} are typing`;
|
||||
}
|
||||
return `${displayUsers.join(', ')}, and ${hiddenCount} more are typing`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="typing-indicator-container">
|
||||
<div className="typing-indicator-avatar">
|
||||
{displayUsers[0]?.[0]?.toUpperCase() || '?'}
|
||||
</div>
|
||||
<div className="typing-indicator-content">
|
||||
<div className="typing-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<span className="typing-text">{getTypingText()}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
astro-site/src/react-app/components/Chat/UserStatus.css
Normal file
66
astro-site/src/react-app/components/Chat/UserStatus.css
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* UserStatus CSS
|
||||
*/
|
||||
|
||||
.user-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 1rem;
|
||||
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.user-status.size-sm .status-icon {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.user-status.size-md .status-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.user-status.size-lg .status-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Animations for online status */
|
||||
.user-status.status-online {
|
||||
animation: pulse-online 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-online {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Badge positioning for avatars */
|
||||
.user-status-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #2c2f33;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #2c2f33;
|
||||
}
|
||||
|
||||
.user-status-badge .user-status {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user-status-badge .status-icon {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
26
astro-site/src/react-app/components/Chat/UserStatus.jsx
Normal file
26
astro-site/src/react-app/components/Chat/UserStatus.jsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* UserStatus Component
|
||||
* Displays user online/offline/idle/dnd status
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import './UserStatus.css';
|
||||
|
||||
export default function UserStatus({ status = 'offline', size = 'md' }) {
|
||||
const statusConfig = {
|
||||
online: { label: 'Online', color: '#43b581', icon: '🟢' },
|
||||
idle: { label: 'Idle', color: '#faa61a', icon: '🟡' },
|
||||
dnd: { label: 'Do Not Disturb', color: '#f04747', icon: '🔴' },
|
||||
offline: { label: 'Offline', color: '#747f8d', icon: '⚫' },
|
||||
};
|
||||
|
||||
const config = statusConfig[status] || statusConfig.offline;
|
||||
|
||||
return (
|
||||
<div className={`user-status status-${status} size-${size}`}>
|
||||
<span className="status-icon" title={config.label}>
|
||||
{config.icon}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
astro-site/src/react-app/components/Chat/VoiceCallUI.css
Normal file
158
astro-site/src/react-app/components/Chat/VoiceCallUI.css
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
/**
|
||||
* VoiceCallUI CSS
|
||||
*/
|
||||
|
||||
.voice-call-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #1a1d1f;
|
||||
z-index: 5000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.voice-call-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #2c2f33;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(114, 137, 218, 0.2);
|
||||
border-top: 4px solid #7289da;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.voice-call-container > :global(.livekit-room) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.voice-call-container > :global(.livekit-video-conference) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Controls Footer */
|
||||
.voice-call-footer {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
border: 2px solid #00d9ff;
|
||||
color: #00d9ff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.control-btn.muted,
|
||||
.control-btn.off {
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border-color: #f43636;
|
||||
color: #f43636;
|
||||
}
|
||||
|
||||
.control-btn.muted:hover,
|
||||
.control-btn.off:hover {
|
||||
background: rgba(244, 54, 54, 0.2);
|
||||
}
|
||||
|
||||
.control-btn.end-call {
|
||||
background: rgba(244, 54, 54, 0.2);
|
||||
border-color: #f43636;
|
||||
color: #f43636;
|
||||
}
|
||||
|
||||
.control-btn.end-call:hover {
|
||||
background: rgba(244, 54, 54, 0.4);
|
||||
}
|
||||
|
||||
/* Participant tiles */
|
||||
.voice-call-container > :global(.livekit-grid) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.voice-call-container > :global(.livekit-participant-tile) {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 2px solid rgba(0, 217, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Screen share support */
|
||||
.voice-call-container > :global(.screen-share-container) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.voice-call-container > :global(.screen-share-video) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.control-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.voice-call-footer {
|
||||
bottom: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.control-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.voice-call-footer {
|
||||
bottom: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
74
astro-site/src/react-app/components/Chat/VoiceCallUI.jsx
Normal file
74
astro-site/src/react-app/components/Chat/VoiceCallUI.jsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* VoiceCallUI Component
|
||||
* Real-time voice/video call interface with LiveKit
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { LiveKitRoom, VideoConference } from 'livekit-react';
|
||||
import './VoiceCallUI.css';
|
||||
|
||||
export default function VoiceCallUI({ roomName, userName, token, onClose, onError }) {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [isVideoOff, setIsVideoOff] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
if (!token || !roomName) {
|
||||
return (
|
||||
<div className="voice-call-loading">
|
||||
<div className="spinner"></div>
|
||||
<p>Initializing call...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="voice-call-container">
|
||||
<LiveKitRoom
|
||||
video={!isVideoOff}
|
||||
audio={!isMuted}
|
||||
token={token}
|
||||
serverUrl={import.meta.env.VITE_LIVEKIT_URL || 'ws://localhost:7880'}
|
||||
roomName={roomName}
|
||||
onError={onError}
|
||||
options={{
|
||||
adaptiveStream: true,
|
||||
dynacast: true,
|
||||
}}
|
||||
>
|
||||
<VideoConference />
|
||||
</LiveKitRoom>
|
||||
|
||||
<div className="voice-call-footer">
|
||||
<button
|
||||
className={`control-btn ${isMuted ? 'muted' : ''}`}
|
||||
onClick={() => setIsMuted(!isMuted)}
|
||||
title={isMuted ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
{isMuted ? '🔇' : '🎤'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${isVideoOff ? 'off' : ''}`}
|
||||
onClick={() => setIsVideoOff(!isVideoOff)}
|
||||
title={isVideoOff ? 'Turn on camera' : 'Turn off camera'}
|
||||
>
|
||||
{isVideoOff ? '📹' : '🎥'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="control-btn end-call"
|
||||
onClick={onClose}
|
||||
title="End call"
|
||||
>
|
||||
❌
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
199
astro-site/src/react-app/components/Chat/VoiceVideoCall.css
Normal file
199
astro-site/src/react-app/components/Chat/VoiceVideoCall.css
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
/**
|
||||
* VoiceVideoCall CSS
|
||||
* Styling for video call interface
|
||||
*/
|
||||
|
||||
.voice-video-call-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #1a1d1f;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.voice-video-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #2c2f33;
|
||||
color: #f43636;
|
||||
font-size: 1.125rem;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.call-connecting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 1.5rem;
|
||||
color: #b5bac1;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(114, 137, 218, 0.2);
|
||||
border-top: 3px solid #7289da;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* LiveKit Room Styles */
|
||||
.lk-room {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lk-video-conference {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #1a1d1f;
|
||||
}
|
||||
|
||||
.lk-grid-layout {
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: #23272a;
|
||||
}
|
||||
|
||||
.lk-participant-tile {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #2c2f33;
|
||||
border: 1px solid rgba(0, 217, 255, 0.1);
|
||||
}
|
||||
|
||||
.lk-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Call Controls */
|
||||
.call-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
|
||||
border-top: 1px solid rgba(0, 217, 255, 0.1);
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
color: #00d9ff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
background: #7289da;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.control-btn.disabled {
|
||||
background: #f43636;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.control-btn.leave-btn {
|
||||
background: #f43636;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.control-btn.leave-btn:hover {
|
||||
background: #d63030;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.call-controls {
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.lk-grid-layout {
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Screen Share Indicator */
|
||||
.screen-share-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(114, 137, 218, 0.9);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.screen-share-indicator::before {
|
||||
content: '🖥️';
|
||||
}
|
||||
|
||||
/* Participant Name Label */
|
||||
.participant-name {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
z-index: 5;
|
||||
}
|
||||
129
astro-site/src/react-app/components/Chat/VoiceVideoCall.jsx
Normal file
129
astro-site/src/react-app/components/Chat/VoiceVideoCall.jsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* VoiceVideoCall Component
|
||||
* Displays voice/video call interface with participant videos and controls
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
LiveKitRoom,
|
||||
VideoConference,
|
||||
GridLayout,
|
||||
ParticipantTile,
|
||||
useRemoteParticipant,
|
||||
useLocalParticipant,
|
||||
} from 'livekit-react';
|
||||
import './VoiceVideoCall.css';
|
||||
|
||||
export default function VoiceVideoCall({
|
||||
roomName,
|
||||
userName,
|
||||
token,
|
||||
serverUrl,
|
||||
onLeave,
|
||||
}) {
|
||||
const [callState, setCallState] = useState('connecting'); // connecting, connected, ended
|
||||
|
||||
if (!token || !serverUrl) {
|
||||
return (
|
||||
<div className="voice-video-error">
|
||||
<p>Missing required configuration for video call</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="voice-video-call-container">
|
||||
<LiveKitRoom
|
||||
video={{ resolution: { width: 640, height: 480 } }}
|
||||
audio={true}
|
||||
token={token}
|
||||
serverUrl={serverUrl}
|
||||
onConnected={() => setCallState('connected')}
|
||||
onDisconnected={() => {
|
||||
setCallState('ended');
|
||||
onLeave?.();
|
||||
}}
|
||||
options={{
|
||||
adaptiveStream: true,
|
||||
dynacast: true,
|
||||
}}
|
||||
>
|
||||
{callState === 'connecting' && (
|
||||
<div className="call-connecting">
|
||||
<div className="spinner"></div>
|
||||
<p>Connecting to {roomName}...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{callState === 'connected' && (
|
||||
<>
|
||||
<VideoConference />
|
||||
<CallControls onLeave={onLeave} />
|
||||
</>
|
||||
)}
|
||||
</LiveKitRoom>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* CallControls Component
|
||||
* Displays microphone, camera, screen share, and leave buttons
|
||||
*/
|
||||
function CallControls({ onLeave }) {
|
||||
const { localParticipant } = useLocalParticipant();
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [isCameraOff, setIsCameraOff] = useState(false);
|
||||
const [isScreenSharing, setIsScreenSharing] = useState(false);
|
||||
|
||||
const handleToggleMicrophone = async () => {
|
||||
await localParticipant?.setMicrophoneEnabled(isMuted);
|
||||
setIsMuted(!isMuted);
|
||||
};
|
||||
|
||||
const handleToggleCamera = async () => {
|
||||
await localParticipant?.setCameraEnabled(isCameraOff);
|
||||
setIsCameraOff(!isCameraOff);
|
||||
};
|
||||
|
||||
const handleToggleScreenShare = async () => {
|
||||
await localParticipant?.setScreenShareEnabled(!isScreenSharing);
|
||||
setIsScreenSharing(!isScreenSharing);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="call-controls">
|
||||
<button
|
||||
className={`control-btn ${isMuted ? 'disabled' : ''}`}
|
||||
onClick={handleToggleMicrophone}
|
||||
title={isMuted ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
{isMuted ? '🔇' : '🎤'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${isCameraOff ? 'disabled' : ''}`}
|
||||
onClick={handleToggleCamera}
|
||||
title={isCameraOff ? 'Turn on camera' : 'Turn off camera'}
|
||||
>
|
||||
{isCameraOff ? '📹' : '📷'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${isScreenSharing ? 'active' : ''}`}
|
||||
onClick={handleToggleScreenShare}
|
||||
title={isScreenSharing ? 'Stop sharing' : 'Share screen'}
|
||||
>
|
||||
🖥️
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="control-btn leave-btn"
|
||||
onClick={onLeave}
|
||||
title="Leave call"
|
||||
>
|
||||
☎️
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
305
astro-site/src/react-app/components/Voice/CallRoom.css
Normal file
305
astro-site/src/react-app/components/Voice/CallRoom.css
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
/**
|
||||
* CallRoom CSS
|
||||
* Voice/video call interface styling
|
||||
*/
|
||||
|
||||
.call-room {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #0a0e17;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.call-room.loading {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.call-loading-content {
|
||||
text-align: center;
|
||||
color: #b5bac1;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(0, 217, 255, 0.2);
|
||||
border-top: 4px solid #00d9ff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Call header */
|
||||
.call-header {
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(0, 217, 255, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.call-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.call-info h2 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.participant-count {
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
color: #00d9ff;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.call-duration {
|
||||
color: #72767d;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Video grid */
|
||||
.call-video-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 217, 255, 0.05) 100%);
|
||||
}
|
||||
|
||||
.participant-video {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(0, 217, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16 / 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.participant-video.empty {
|
||||
grid-column: 1 / -1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.video-placeholder {
|
||||
color: #72767d;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Control bar */
|
||||
.call-controls {
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-top: 1px solid rgba(0, 217, 255, 0.1);
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 1px solid rgba(0, 217, 255, 0.3);
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
color: #00d9ff;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
border-color: rgba(0, 217, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
background: rgba(114, 137, 218, 0.3);
|
||||
border-color: #7289da;
|
||||
color: #7289da;
|
||||
}
|
||||
|
||||
.control-btn.inactive {
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border-color: rgba(244, 54, 54, 0.3);
|
||||
color: #f43636;
|
||||
}
|
||||
|
||||
.control-btn.end-call {
|
||||
background: rgba(244, 54, 54, 0.2);
|
||||
border-color: #f43636;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.control-btn.end-call:hover {
|
||||
background: rgba(244, 54, 54, 0.3);
|
||||
box-shadow: 0 0 16px rgba(244, 54, 54, 0.3);
|
||||
}
|
||||
|
||||
/* Error message */
|
||||
.call-error {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border: 1px solid #f43636;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
color: #ffffff;
|
||||
z-index: 1000;
|
||||
max-width: 400px;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.call-error p {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: #f43636;
|
||||
}
|
||||
|
||||
.call-error button {
|
||||
background: #f43636;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.call-error button:hover {
|
||||
background: #d63030;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.call-video-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.call-info {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.call-info h2 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.call-controls {
|
||||
padding: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.participant-video {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.call-room {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.call-info {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.call-info h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.participant-count,
|
||||
.call-duration {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.participant-video {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.call-error {
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
left: 0.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
210
astro-site/src/react-app/components/Voice/CallRoom.jsx
Normal file
210
astro-site/src/react-app/components/Voice/CallRoom.jsx
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/**
|
||||
* CallRoom Component
|
||||
* Voice/video call interface using LiveKit
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import liveKitService from '../../services/livekitService';
|
||||
import './CallRoom.css';
|
||||
|
||||
export default function CallRoom({ token, url, roomName, onClose }) {
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [audioEnabled, setAudioEnabled] = useState(true);
|
||||
const [videoEnabled, setVideoEnabled] = useState(true);
|
||||
const [screenShareEnabled, setScreenShareEnabled] = useState(false);
|
||||
const [participants, setParticipants] = useState([]);
|
||||
const [error, setError] = useState(null);
|
||||
const [callDuration, setCallDuration] = useState(0);
|
||||
|
||||
// Initialize room connection
|
||||
useEffect(() => {
|
||||
const initializeRoom = async () => {
|
||||
try {
|
||||
await liveKitService.connect(url, token, roomName);
|
||||
setConnected(true);
|
||||
updateParticipants();
|
||||
|
||||
// Setup event listeners
|
||||
liveKitService.on('participant_joined', () => updateParticipants());
|
||||
liveKitService.on('participant_left', () => updateParticipants());
|
||||
liveKitService.on('connection_error', (err) => {
|
||||
console.error('Connection error:', err);
|
||||
setError(err.message);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to initialize room:', err);
|
||||
setError('Failed to join call');
|
||||
}
|
||||
};
|
||||
|
||||
if (token && url && roomName) {
|
||||
initializeRoom();
|
||||
}
|
||||
|
||||
return () => {
|
||||
liveKitService.off('participant_joined', updateParticipants);
|
||||
liveKitService.off('participant_left', updateParticipants);
|
||||
};
|
||||
}, [token, url, roomName]);
|
||||
|
||||
// Call duration timer
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCallDuration((prev) => prev + 1);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Update participants list
|
||||
const updateParticipants = useCallback(() => {
|
||||
const allParticipants = liveKitService.getAllParticipants();
|
||||
setParticipants(allParticipants);
|
||||
}, []);
|
||||
|
||||
// Toggle audio
|
||||
const handleToggleAudio = async () => {
|
||||
try {
|
||||
await liveKitService.toggleAudio(!audioEnabled);
|
||||
setAudioEnabled(!audioEnabled);
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle audio:', error);
|
||||
setError('Failed to toggle audio');
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle video
|
||||
const handleToggleVideo = async () => {
|
||||
try {
|
||||
await liveKitService.toggleVideo(!videoEnabled);
|
||||
setVideoEnabled(!videoEnabled);
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle video:', error);
|
||||
setError('Failed to toggle video');
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle screen share
|
||||
const handleToggleScreenShare = async () => {
|
||||
try {
|
||||
await liveKitService.toggleScreenShare(!screenShareEnabled);
|
||||
setScreenShareEnabled(!screenShareEnabled);
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle screen share:', error);
|
||||
setError('Failed to toggle screen share');
|
||||
}
|
||||
};
|
||||
|
||||
// End call
|
||||
const handleEndCall = async () => {
|
||||
try {
|
||||
await liveKitService.disconnect();
|
||||
onClose?.();
|
||||
} catch (error) {
|
||||
console.error('Failed to end call:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Format call duration
|
||||
const formatDuration = (seconds) => {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
||||
}
|
||||
return `${minutes}:${String(secs).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
if (!connected) {
|
||||
return (
|
||||
<div className="call-room loading">
|
||||
<div className="call-loading-content">
|
||||
<div className="spinner"></div>
|
||||
<p>Connecting to call...</p>
|
||||
{error && <p className="error">{error}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="call-room">
|
||||
{/* Call header */}
|
||||
<div className="call-header">
|
||||
<div className="call-info">
|
||||
<h2>{roomName}</h2>
|
||||
<span className="participant-count">{participants.length} participant(s)</span>
|
||||
<span className="call-duration">{formatDuration(callDuration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video grid */}
|
||||
<div className="call-video-grid">
|
||||
{participants.map((participant) => (
|
||||
<div key={participant.sid} className="participant-video">
|
||||
<div className="participant-name">
|
||||
{participant.identity || 'Unknown'}
|
||||
</div>
|
||||
<div className="video-placeholder">
|
||||
📹 {participant.identity}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Empty state */}
|
||||
{participants.length === 0 && (
|
||||
<div className="participant-video empty">
|
||||
<div className="video-placeholder">
|
||||
Waiting for participants...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Control bar */}
|
||||
<div className="call-controls">
|
||||
<button
|
||||
className={`control-btn ${audioEnabled ? 'active' : 'inactive'}`}
|
||||
onClick={handleToggleAudio}
|
||||
title="Toggle audio"
|
||||
>
|
||||
🎤 {audioEnabled ? 'Mute' : 'Unmute'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${videoEnabled ? 'active' : 'inactive'}`}
|
||||
onClick={handleToggleVideo}
|
||||
title="Toggle video"
|
||||
>
|
||||
📹 {videoEnabled ? 'Stop Video' : 'Start Video'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${screenShareEnabled ? 'active' : 'inactive'}`}
|
||||
onClick={handleToggleScreenShare}
|
||||
title="Toggle screen share"
|
||||
>
|
||||
🖥️ {screenShareEnabled ? 'Stop Share' : 'Share Screen'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="control-btn end-call"
|
||||
onClick={handleEndCall}
|
||||
title="End call"
|
||||
>
|
||||
☎️ End Call
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<div className="call-error">
|
||||
<p>{error}</p>
|
||||
<button onClick={() => setError(null)}>Dismiss</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
219
astro-site/src/react-app/components/VoiceCall/VoiceCallModal.css
Normal file
219
astro-site/src/react-app/components/VoiceCall/VoiceCallModal.css
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
/**
|
||||
* VoiceCallModal CSS
|
||||
*/
|
||||
|
||||
.voice-call-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
animation: fadeIn 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-call-modal {
|
||||
background: #2c2f33;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #23272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #23272a;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #72767d;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
flex: 1;
|
||||
padding: 2rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.call-info {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.8125rem;
|
||||
text-transform: uppercase;
|
||||
color: #72767d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 1rem;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border: 1px solid #f43636;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
color: #f43636;
|
||||
}
|
||||
|
||||
.error-message span {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.error-message p {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.call-features {
|
||||
background: rgba(114, 137, 218, 0.1);
|
||||
border-left: 3px solid #7289da;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.call-features h3 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.9375rem;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.call-features ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.call-features li {
|
||||
font-size: 0.875rem;
|
||||
color: #b5bac1;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #23272a;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
background: #2c2f33;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: #424549;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.btn-call {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #7289da 0%, #00d9ff 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-call:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(114, 137, 218, 0.3);
|
||||
}
|
||||
|
||||
.btn-call:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.voice-call-modal {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-cancel,
|
||||
.btn-call {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
140
astro-site/src/react-app/components/VoiceCall/VoiceCallModal.jsx
Normal file
140
astro-site/src/react-app/components/VoiceCall/VoiceCallModal.jsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
/**
|
||||
* VoiceCallModal Component
|
||||
* Modal for initiating and managing voice/video calls
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import VoiceCallUI from './VoiceCallUI';
|
||||
import './VoiceCallModal.css';
|
||||
|
||||
export default function VoiceCallModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
channelId,
|
||||
channelName,
|
||||
userId,
|
||||
userName,
|
||||
}) {
|
||||
const [inCall, setInCall] = useState(false);
|
||||
const [token, setToken] = useState(null);
|
||||
const [serverUrl, setServerUrl] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !channelId) {
|
||||
setInCall(false);
|
||||
setToken(null);
|
||||
return;
|
||||
}
|
||||
}, [isOpen, channelId]);
|
||||
|
||||
const handleStartCall = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
||||
|
||||
// Request LiveKit token from backend
|
||||
const response = await fetch(`${apiUrl}/api/calls/token`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
room: `channel-${channelId}`,
|
||||
user_name: userName,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get call token');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setToken(data.token);
|
||||
setServerUrl(data.serverUrl);
|
||||
setInCall(true);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
console.error('Error starting call:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndCall = () => {
|
||||
setInCall(false);
|
||||
setToken(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
if (inCall && token && serverUrl) {
|
||||
return (
|
||||
<VoiceCallUI
|
||||
token={token}
|
||||
serverUrl={serverUrl}
|
||||
roomName={channelName}
|
||||
onClose={handleEndCall}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="voice-call-modal-overlay" onClick={onClose}>
|
||||
<div className="voice-call-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>Start Voice Call</h2>
|
||||
<button className="modal-close" onClick={onClose}>✕</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-content">
|
||||
<div className="call-info">
|
||||
<p className="info-label">Channel</p>
|
||||
<p className="info-value">{channelName}</p>
|
||||
</div>
|
||||
|
||||
<div className="call-info">
|
||||
<p className="info-label">Participant</p>
|
||||
<p className="info-value">{userName}</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
<span>⚠️</span>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="call-features">
|
||||
<h3>Features</h3>
|
||||
<ul>
|
||||
<li>✓ Crystal-clear audio and HD video</li>
|
||||
<li>✓ Screen sharing</li>
|
||||
<li>✓ Multi-participant support</li>
|
||||
<li>✓ Automatic recording (optional)</li>
|
||||
<li>✓ Low-latency performance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button className="btn-cancel" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="btn-call"
|
||||
onClick={handleStartCall}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Connecting...' : 'Start Call'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
187
astro-site/src/react-app/components/VoiceCall/VoiceCallUI.css
Normal file
187
astro-site/src/react-app/components/VoiceCall/VoiceCallUI.css
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/**
|
||||
* VoiceCallUI CSS
|
||||
* Video call interface styling
|
||||
*/
|
||||
|
||||
.voice-call-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #0a0a0f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 3000;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.call-header {
|
||||
padding: 1rem 1.5rem;
|
||||
background: rgba(23, 39, 58, 0.8);
|
||||
border-bottom: 1px solid rgba(0, 217, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.call-header h3 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.call-stats {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
color: #b5bac1;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.video-grid :global(.lk-grid-layout) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-grid :global(.lk-participant-tile) {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #1a1d1f;
|
||||
}
|
||||
|
||||
.call-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(23, 39, 58, 0.8);
|
||||
border-top: 1px solid rgba(0, 217, 255, 0.1);
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
color: #00d9ff;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
background: rgba(0, 217, 255, 0.3);
|
||||
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.2);
|
||||
}
|
||||
|
||||
.control-btn.inactive {
|
||||
background: rgba(244, 54, 54, 0.2);
|
||||
color: #f43636;
|
||||
}
|
||||
|
||||
.control-btn.end-call {
|
||||
background: rgba(244, 54, 54, 0.2);
|
||||
color: #f43636;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.control-btn.end-call:hover {
|
||||
background: rgba(244, 54, 54, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.call-error {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(244, 54, 54, 0.1);
|
||||
border: 1px solid #f43636;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.5rem;
|
||||
color: #f43636;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.voice-call-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: #0a0a0f;
|
||||
color: #b5bac1;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.voice-call-error button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: #7289da;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.voice-call-error button:hover {
|
||||
background: #5a6fc1;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.video-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.call-header {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.call-controls {
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
117
astro-site/src/react-app/components/VoiceCall/VoiceCallUI.jsx
Normal file
117
astro-site/src/react-app/components/VoiceCall/VoiceCallUI.jsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
/**
|
||||
* VoiceCallUI Component
|
||||
* Voice/video call interface with LiveKit
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
LiveKitRoom,
|
||||
VideoConference,
|
||||
GridLayout,
|
||||
ParticipantTile,
|
||||
RoomAudioRenderer,
|
||||
useLocalParticipant,
|
||||
useRemoteParticipants,
|
||||
} from 'livekit-react';
|
||||
import './VoiceCallUI.css';
|
||||
|
||||
export default function VoiceCallUI({ token, serverUrl, roomName, onClose }) {
|
||||
const [videoEnabled, setVideoEnabled] = useState(true);
|
||||
const [audioEnabled, setAudioEnabled] = useState(true);
|
||||
const [screenSharing, setScreenSharing] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const localParticipant = useLocalParticipant();
|
||||
const remoteParticipants = useRemoteParticipants();
|
||||
|
||||
if (!token || !serverUrl) {
|
||||
return (
|
||||
<div className="voice-call-error">
|
||||
<p>Missing LiveKit credentials</p>
|
||||
<button onClick={onClose}>Close</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleScreenShare = async () => {
|
||||
try {
|
||||
if (!screenSharing) {
|
||||
await localParticipant?.localParticipant?.setScreenShareEnabled(true);
|
||||
setScreenSharing(true);
|
||||
} else {
|
||||
await localParticipant?.localParticipant?.setScreenShareEnabled(false);
|
||||
setScreenSharing(false);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to toggle screen share');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="voice-call-container">
|
||||
<LiveKitRoom
|
||||
video={videoEnabled}
|
||||
audio={audioEnabled}
|
||||
token={token}
|
||||
serverUrl={serverUrl}
|
||||
onError={(err) => setError(err.message)}
|
||||
>
|
||||
<div className="call-header">
|
||||
<h3>{roomName}</h3>
|
||||
<div className="call-stats">
|
||||
<span>{remoteParticipants.length + 1} participants</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="video-grid">
|
||||
<GridLayout tracks={[localParticipant?.videoTrack, ...remoteParticipants.map(p => p.videoTrack)]}>
|
||||
{/* Video tiles rendered automatically */}
|
||||
</GridLayout>
|
||||
</div>
|
||||
|
||||
<div className="call-controls">
|
||||
<button
|
||||
className={`control-btn ${videoEnabled ? 'active' : 'inactive'}`}
|
||||
onClick={() => setVideoEnabled(!videoEnabled)}
|
||||
title="Toggle video"
|
||||
>
|
||||
{videoEnabled ? '📹' : '📹❌'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${audioEnabled ? 'active' : 'inactive'}`}
|
||||
onClick={() => setAudioEnabled(!audioEnabled)}
|
||||
title="Toggle audio"
|
||||
>
|
||||
{audioEnabled ? '🎤' : '🔇'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`control-btn ${screenSharing ? 'active' : 'inactive'}`}
|
||||
onClick={handleScreenShare}
|
||||
title="Share screen"
|
||||
>
|
||||
🖥️
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="control-btn end-call"
|
||||
onClick={onClose}
|
||||
title="End call"
|
||||
>
|
||||
☎️
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="call-error">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<RoomAudioRenderer />
|
||||
</LiveKitRoom>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
89
astro-site/src/react-app/hooks/useLiveKit.js
vendored
Normal file
89
astro-site/src/react-app/hooks/useLiveKit.js
vendored
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* useLiveKit - Hook for LiveKit room management
|
||||
* Handles room connection, participant tracking, and media controls
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useCallback, useState } from 'react';
|
||||
import { useRoom, useParticipants, useLocalParticipant } from '@livekit/react';
|
||||
|
||||
export function useLiveKit(roomName, userName, token) {
|
||||
const { room, isConnecting, isConnected } = useRoom();
|
||||
const participants = useParticipants();
|
||||
const { localParticipant } = useLocalParticipant();
|
||||
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [isCameraOff, setIsCameraOff] = useState(false);
|
||||
const [isScreenSharing, setIsScreenSharing] = useState(false);
|
||||
const trackSubscriptionRef = useRef([]);
|
||||
|
||||
// Toggle microphone
|
||||
const toggleMicrophone = useCallback(async () => {
|
||||
if (localParticipant) {
|
||||
await localParticipant.setMicrophoneEnabled(!isMuted);
|
||||
setIsMuted(!isMuted);
|
||||
}
|
||||
}, [isMuted, localParticipant]);
|
||||
|
||||
// Toggle camera
|
||||
const toggleCamera = useCallback(async () => {
|
||||
if (localParticipant) {
|
||||
await localParticipant.setCameraEnabled(isCameraOff);
|
||||
setIsCameraOff(!isCameraOff);
|
||||
}
|
||||
}, [isCameraOff, localParticipant]);
|
||||
|
||||
// Start screen share
|
||||
const startScreenShare = useCallback(async () => {
|
||||
try {
|
||||
if (localParticipant) {
|
||||
await localParticipant.setScreenShareEnabled(true);
|
||||
setIsScreenSharing(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to start screen share:', error);
|
||||
}
|
||||
}, [localParticipant]);
|
||||
|
||||
// Stop screen share
|
||||
const stopScreenShare = useCallback(async () => {
|
||||
try {
|
||||
if (localParticipant) {
|
||||
await localParticipant.setScreenShareEnabled(false);
|
||||
setIsScreenSharing(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to stop screen share:', error);
|
||||
}
|
||||
}, [localParticipant]);
|
||||
|
||||
// Toggle screen share
|
||||
const toggleScreenShare = useCallback(async () => {
|
||||
if (isScreenSharing) {
|
||||
await stopScreenShare();
|
||||
} else {
|
||||
await startScreenShare();
|
||||
}
|
||||
}, [isScreenSharing, startScreenShare, stopScreenShare]);
|
||||
|
||||
// Leave room
|
||||
const leaveRoom = useCallback(async () => {
|
||||
if (room) {
|
||||
await room.disconnect();
|
||||
}
|
||||
}, [room]);
|
||||
|
||||
return {
|
||||
room,
|
||||
isConnecting,
|
||||
isConnected,
|
||||
participants,
|
||||
localParticipant,
|
||||
isMuted,
|
||||
isCameraOff,
|
||||
isScreenSharing,
|
||||
toggleMicrophone,
|
||||
toggleCamera,
|
||||
toggleScreenShare,
|
||||
leaveRoom,
|
||||
};
|
||||
}
|
||||
119
astro-site/src/react-app/hooks/useSocket.js
vendored
Normal file
119
astro-site/src/react-app/hooks/useSocket.js
vendored
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* useSocket Hook
|
||||
* Manages Socket.IO connection and message sync
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useCallback } from 'react';
|
||||
import io from 'socket.io-client';
|
||||
|
||||
export function useSocket(userId, token) {
|
||||
const socketRef = useRef(null);
|
||||
const isConnectedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!userId || !token) return;
|
||||
|
||||
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
||||
|
||||
// Connect to Socket.IO server
|
||||
socketRef.current = io(apiUrl, {
|
||||
auth: { token },
|
||||
reconnectionDelay: 1000,
|
||||
reconnection: true,
|
||||
reconnectionAttempts: 10,
|
||||
});
|
||||
|
||||
// Connection events
|
||||
socketRef.current.on('connect', () => {
|
||||
console.log('Socket.IO connected:', socketRef.current.id);
|
||||
isConnectedRef.current = true;
|
||||
});
|
||||
|
||||
socketRef.current.on('disconnect', () => {
|
||||
console.log('Socket.IO disconnected');
|
||||
isConnectedRef.current = false;
|
||||
});
|
||||
|
||||
socketRef.current.on('error', (error) => {
|
||||
console.error('Socket.IO error:', error);
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (socketRef.current) {
|
||||
socketRef.current.disconnect();
|
||||
}
|
||||
};
|
||||
}, [userId, token]);
|
||||
|
||||
const emit = useCallback((event, data) => {
|
||||
if (socketRef.current && isConnectedRef.current) {
|
||||
socketRef.current.emit(event, data);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const on = useCallback((event, handler) => {
|
||||
if (socketRef.current) {
|
||||
socketRef.current.on(event, handler);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const off = useCallback((event, handler) => {
|
||||
if (socketRef.current) {
|
||||
socketRef.current.off(event, handler);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const joinChannel = useCallback((channelId) => {
|
||||
emit('join_conversation', { conversation_id: channelId });
|
||||
}, [emit]);
|
||||
|
||||
const leaveChannel = useCallback((channelId) => {
|
||||
emit('leave_conversation', { conversation_id: channelId });
|
||||
}, [emit]);
|
||||
|
||||
const sendMessage = useCallback((channelId, content, metadata = {}) => {
|
||||
emit('message:send', {
|
||||
conversation_id: channelId,
|
||||
content,
|
||||
metadata,
|
||||
});
|
||||
}, [emit]);
|
||||
|
||||
const editMessage = useCallback((messageId, content) => {
|
||||
emit('message:edit', { id: messageId, content });
|
||||
}, [emit]);
|
||||
|
||||
const deleteMessage = useCallback((messageId) => {
|
||||
emit('message:delete', { id: messageId });
|
||||
}, [emit]);
|
||||
|
||||
const addReaction = useCallback((messageId, emoji) => {
|
||||
emit('message:reaction', { id: messageId, emoji });
|
||||
}, [emit]);
|
||||
|
||||
const startTyping = useCallback((channelId) => {
|
||||
emit('typing:start', { conversation_id: channelId });
|
||||
}, [emit]);
|
||||
|
||||
const stopTyping = useCallback((channelId) => {
|
||||
emit('typing:stop', { conversation_id: channelId });
|
||||
}, [emit]);
|
||||
|
||||
return {
|
||||
socket: socketRef.current,
|
||||
isConnected: isConnectedRef.current,
|
||||
emit,
|
||||
on,
|
||||
off,
|
||||
joinChannel,
|
||||
leaveChannel,
|
||||
sendMessage,
|
||||
editMessage,
|
||||
deleteMessage,
|
||||
addReaction,
|
||||
startTyping,
|
||||
stopTyping,
|
||||
};
|
||||
}
|
||||
|
||||
export default useSocket;
|
||||
56
astro-site/src/react-app/hooks/useSocketEvents.js
vendored
Normal file
56
astro-site/src/react-app/hooks/useSocketEvents.js
vendored
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* useSocketEvents Hook
|
||||
* Manages Socket.IO real-time event handling for messages
|
||||
*/
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useSocket } from './useSocket';
|
||||
import { messageStore } from '../stores/messageStore';
|
||||
|
||||
export function useSocketEvents(token, channelId) {
|
||||
const { socket } = useSocket(token);
|
||||
|
||||
useEffect(() => {
|
||||
if (!socket || !channelId) return;
|
||||
|
||||
// New message received
|
||||
const handleNewMessage = (message) => {
|
||||
messageStore.addMessage(message);
|
||||
};
|
||||
|
||||
// Message edited
|
||||
const handleMessageUpdated = (data) => {
|
||||
messageStore.updateMessage(data.id, { content: data.content, editedAt: data.editedAt });
|
||||
};
|
||||
|
||||
// Message deleted
|
||||
const handleMessageDeleted = (data) => {
|
||||
messageStore.deleteMessage(data.id);
|
||||
};
|
||||
|
||||
// Message reactions updated
|
||||
const handleReactionsUpdated = (data) => {
|
||||
messageStore.updateMessage(data.id, { reactions: data.reactions });
|
||||
};
|
||||
|
||||
// Register listeners
|
||||
socket.on('message:new', handleNewMessage);
|
||||
socket.on('message:updated', handleMessageUpdated);
|
||||
socket.on('message:deleted', handleMessageDeleted);
|
||||
socket.on('message:reactions_updated', handleReactionsUpdated);
|
||||
|
||||
// Join channel
|
||||
socket.emit('join_conversation', { conversationId: channelId });
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
socket.off('message:new', handleNewMessage);
|
||||
socket.off('message:updated', handleMessageUpdated);
|
||||
socket.off('message:deleted', handleMessageDeleted);
|
||||
socket.off('message:reactions_updated', handleReactionsUpdated);
|
||||
socket.emit('leave_conversation', { conversationId: channelId });
|
||||
};
|
||||
}, [socket, channelId]);
|
||||
|
||||
return socket;
|
||||
}
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -7,15 +13,17 @@ html, body, #root {
|
|||
font-family: 'Roboto Mono', monospace;
|
||||
background: #0a0a0a;
|
||||
color: #e0e0e0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Scanline effect */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
|
|
@ -27,31 +35,754 @@ body::before {
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
.connect-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.server-icon, .user-avatar, .member-avatar-small {
|
||||
background: rgba(26,26,26,0.85);
|
||||
backdrop-filter: blur(6px);
|
||||
/* Server Sidebar */
|
||||
.server-list {
|
||||
width: 80px;
|
||||
background: #0d0d0d;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.channel-item.active, .channel-item:hover, .member-item:hover {
|
||||
background: rgba(26,26,26,0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
.server-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-input, .message-input-container {
|
||||
background: rgba(15,15,15,0.95);
|
||||
backdrop-filter: blur(4px);
|
||||
.server-icon:hover {
|
||||
border-radius: 12px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.server-icon.active {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.server-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
width: 4px;
|
||||
height: 0;
|
||||
transition: height 0.3s;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.server-icon.active::before {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.server-icon.foundation {
|
||||
background: linear-gradient(135deg, #ff0000 0%, #990000 100%);
|
||||
}
|
||||
|
||||
.server-icon.foundation.active::before {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.server-icon.corporation {
|
||||
background: linear-gradient(135deg, #0066ff 0%, #003380 100%);
|
||||
}
|
||||
|
||||
.server-icon.corporation.active::before {
|
||||
background: #0066ff;
|
||||
}
|
||||
|
||||
.server-icon.labs {
|
||||
background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
|
||||
}
|
||||
|
||||
.server-icon.labs.active::before {
|
||||
background: #ffa500;
|
||||
}
|
||||
|
||||
.server-icon.community {
|
||||
background: #1a1a1a;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.server-divider {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #1a1a1a;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Channel Sidebar */
|
||||
.channel-sidebar {
|
||||
width: 280px;
|
||||
background: #0f0f0f;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.server-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.server-badge {
|
||||
font-size: 0.7em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.server-badge.foundation {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
color: #ff0000;
|
||||
border: 1px solid #ff0000;
|
||||
}
|
||||
|
||||
.server-badge.corporation {
|
||||
background: rgba(0, 102, 255, 0.2);
|
||||
color: #0066ff;
|
||||
border: 1px solid #0066ff;
|
||||
}
|
||||
|
||||
.server-badge.labs {
|
||||
background: rgba(255, 165, 0, 0.2);
|
||||
color: #ffa500;
|
||||
border: 1px solid #ffa500;
|
||||
}
|
||||
|
||||
.channel-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.channel-category {
|
||||
padding: 16px 16px 8px 16px;
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.add-channel-button {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel-category:hover .add-channel-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.add-channel-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.channel-item {
|
||||
padding: 8px 16px;
|
||||
margin: 2px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.95em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.channel-item:hover {
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.channel-item.active {
|
||||
background: #1a1a1a;
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.channel-icon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.channel-badge {
|
||||
font-size: 0.75em;
|
||||
background: #ff0000;
|
||||
color: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* User Presence Panel */
|
||||
.user-presence {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #00ff00;
|
||||
box-shadow: 0 0 8px #00ff00;
|
||||
}
|
||||
|
||||
/* Chat Area */
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.channel-name-header {
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.chat-tools {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-tool {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.chat-tool:hover {
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message-edited {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.message-badge {
|
||||
font-size: 0.65em;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-badge.foundation {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.message-badge.corporation {
|
||||
background: rgba(0, 102, 255, 0.2);
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.message-badge.labs {
|
||||
background: rgba(255, 165, 0, 0.2);
|
||||
color: #ffa500;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.message:hover .message-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-action-edit,
|
||||
.message-action-delete {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-action-edit:hover {
|
||||
background: rgba(0, 102, 255, 0.2);
|
||||
color: #0066ff;
|
||||
}
|
||||
|
||||
.message-action-delete:hover {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.message-edit {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-edit-input {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #0066ff;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.message-edit-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.message-edit-save,
|
||||
.message-edit-cancel {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.message-edit-save {
|
||||
background: #0066ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-edit-save:hover {
|
||||
background: #0052cc;
|
||||
}
|
||||
|
||||
.message-edit-cancel {
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-edit-cancel:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.message-system {
|
||||
background: #0f0f0f;
|
||||
border-left: 3px solid;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.message-system.foundation {
|
||||
border-color: #ff0000;
|
||||
}
|
||||
|
||||
.message-system.corporation {
|
||||
border-color: #0066ff;
|
||||
}
|
||||
|
||||
.message-system.labs {
|
||||
border-color: #ffa500;
|
||||
}
|
||||
|
||||
.system-label {
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.system-label.foundation { color: #ff0000; }
|
||||
.system-label.corporation { color: #0066ff; }
|
||||
.system-label.labs { color: #ffa500; }
|
||||
|
||||
/* Message Input */
|
||||
.message-input-container {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.message-input-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.attach-button,
|
||||
.send-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #1a1a1a;
|
||||
color: #666;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.attach-button:hover {
|
||||
background: #2a2a2a;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: #0066ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: #0052cc;
|
||||
}
|
||||
|
||||
.send-button:disabled {
|
||||
background: #2a2a2a;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
background: #0f0f0f;
|
||||
border: 1px solid #1a1a1a;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.95em;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.message-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066ff;
|
||||
}
|
||||
|
||||
.message-input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: #666;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #666;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Member Sidebar */
|
||||
.member-sidebar {
|
||||
width: 280px;
|
||||
background: #0f0f0f;
|
||||
border-left: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.member-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-size: 0.85em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.manage-members-button {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.manage-members-button:hover {
|
||||
background: #1a1a1a;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.member-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.member-section-title {
|
||||
padding: 8px 16px;
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
padding: 6px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.member-item.voice-active {
|
||||
background: rgba(0, 102, 255, 0.1);
|
||||
}
|
||||
|
||||
.member-item.voice-peer {
|
||||
background: rgba(0, 102, 255, 0.05);
|
||||
}
|
||||
|
||||
.member-avatar-small {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8em;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0f0f0f;
|
||||
}
|
||||
|
||||
.online-indicator.online { background: #00ff00; }
|
||||
.online-indicator.in-game { background: #0066ff; }
|
||||
.online-indicator.labs { background: #ffa500; }
|
||||
.online-indicator.idle { background: #666; }
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.member-activity {
|
||||
font-size: 0.75em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #111;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #222;
|
||||
background: #1a1a1a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #2a2a2a;
|
||||
|
|
|
|||
253
astro-site/src/react-app/services/apiService.js
vendored
Normal file
253
astro-site/src/react-app/services/apiService.js
vendored
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
import axios from 'axios';
|
||||
|
||||
const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:3000';
|
||||
const API_BASE = `${API_URL}/api`;
|
||||
|
||||
// Create axios instance with default config
|
||||
const apiClient = axios.create({
|
||||
baseURL: API_BASE,
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Add auth interceptor
|
||||
apiClient.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('aethex_token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// Handle responses
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => response.data,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
localStorage.removeItem('aethex_token');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// ============== AUTH ==============
|
||||
export const authService = {
|
||||
login: (email, password) =>
|
||||
apiClient.post('/auth/login', { email, password }),
|
||||
|
||||
register: (email, password, username, displayName) =>
|
||||
apiClient.post('/auth/register', { email, password, username, displayName }),
|
||||
|
||||
demo: () =>
|
||||
apiClient.post('/auth/demo'),
|
||||
|
||||
getMe: () =>
|
||||
apiClient.get('/auth/me'),
|
||||
|
||||
logout: () => {
|
||||
localStorage.removeItem('aethex_token');
|
||||
},
|
||||
};
|
||||
|
||||
// ============== SERVERS ==============
|
||||
export const serverService = {
|
||||
list: () =>
|
||||
apiClient.get('/servers'),
|
||||
|
||||
get: (serverId) =>
|
||||
apiClient.get(`/servers/${serverId}`),
|
||||
|
||||
create: (data) =>
|
||||
apiClient.post('/servers', data),
|
||||
|
||||
update: (serverId, data) =>
|
||||
apiClient.put(`/servers/${serverId}`, data),
|
||||
|
||||
delete: (serverId) =>
|
||||
apiClient.delete(`/servers/${serverId}`),
|
||||
|
||||
join: (serverId) =>
|
||||
apiClient.post(`/servers/${serverId}/join`),
|
||||
|
||||
leave: (serverId) =>
|
||||
apiClient.post(`/servers/${serverId}/leave`),
|
||||
|
||||
members: (serverId) =>
|
||||
apiClient.get(`/servers/${serverId}/members`),
|
||||
|
||||
invite: (serverId, inviteCode) =>
|
||||
apiClient.post(`/servers/${serverId}/invite`, { inviteCode }),
|
||||
};
|
||||
|
||||
// ============== CHANNELS ==============
|
||||
export const channelService = {
|
||||
list: (serverId) =>
|
||||
apiClient.get(`/channels?serverId=${serverId}`),
|
||||
|
||||
get: (channelId) =>
|
||||
apiClient.get(`/channels/${channelId}`),
|
||||
|
||||
create: (serverId, data) =>
|
||||
apiClient.post('/channels', { ...data, serverId }),
|
||||
|
||||
update: (channelId, data) =>
|
||||
apiClient.put(`/channels/${channelId}`, data),
|
||||
|
||||
delete: (channelId) =>
|
||||
apiClient.delete(`/channels/${channelId}`),
|
||||
};
|
||||
|
||||
// ============== MESSAGES ==============
|
||||
export const messageService = {
|
||||
list: (channelId, limit = 50, offset = 0) =>
|
||||
apiClient.get(`/messages?channelId=${channelId}&limit=${limit}&offset=${offset}`),
|
||||
|
||||
get: (messageId) =>
|
||||
apiClient.get(`/messages/${messageId}`),
|
||||
|
||||
create: (channelId, content) =>
|
||||
apiClient.post('/messages', { channelId, content }),
|
||||
|
||||
update: (messageId, content) =>
|
||||
apiClient.put(`/messages/${messageId}`, { content }),
|
||||
|
||||
delete: (messageId) =>
|
||||
apiClient.delete(`/messages/${messageId}`),
|
||||
|
||||
pin: (messageId) =>
|
||||
apiClient.post(`/messages/${messageId}/pin`),
|
||||
|
||||
unpin: (messageId) =>
|
||||
apiClient.post(`/messages/${messageId}/unpin`),
|
||||
|
||||
react: (messageId, emoji) =>
|
||||
apiClient.post(`/messages/${messageId}/react`, { emoji }),
|
||||
|
||||
unreact: (messageId, emoji) =>
|
||||
apiClient.delete(`/messages/${messageId}/react/${emoji}`),
|
||||
|
||||
search: (query, channelId) =>
|
||||
apiClient.get(`/messages/search?q=${query}&channelId=${channelId}`),
|
||||
};
|
||||
|
||||
// ============== DIRECT MESSAGES ==============
|
||||
export const directMessageService = {
|
||||
list: () =>
|
||||
apiClient.get('/direct-messages'),
|
||||
|
||||
conversations: () =>
|
||||
apiClient.get('/direct-messages/conversations'),
|
||||
|
||||
getConversation: (userId) =>
|
||||
apiClient.get(`/direct-messages/conversations/${userId}`),
|
||||
|
||||
messages: (conversationId, limit = 50, offset = 0) =>
|
||||
apiClient.get(`/direct-messages/${conversationId}?limit=${limit}&offset=${offset}`),
|
||||
|
||||
send: (userId, content) =>
|
||||
apiClient.post('/direct-messages', { userId, content }),
|
||||
};
|
||||
|
||||
// ============== USERS ==============
|
||||
export const userService = {
|
||||
get: (userId) =>
|
||||
apiClient.get(`/users/${userId}`),
|
||||
|
||||
search: (query) =>
|
||||
apiClient.get(`/users/search?q=${query}`),
|
||||
|
||||
getFriends: () =>
|
||||
apiClient.get('/users/friends'),
|
||||
|
||||
getFriendRequests: () =>
|
||||
apiClient.get('/users/friend-requests'),
|
||||
|
||||
sendFriendRequest: (userId) =>
|
||||
apiClient.post('/users/friend-requests', { targetUserId: userId }),
|
||||
|
||||
acceptFriendRequest: (requestId) =>
|
||||
apiClient.post(`/users/friend-requests/${requestId}/accept`),
|
||||
|
||||
rejectFriendRequest: (requestId) =>
|
||||
apiClient.delete(`/users/friend-requests/${requestId}`),
|
||||
|
||||
removeFriend: (userId) =>
|
||||
apiClient.delete(`/users/friends/${userId}`),
|
||||
|
||||
getBlockedUsers: () =>
|
||||
apiClient.get('/users/blocked'),
|
||||
|
||||
blockUser: (userId) =>
|
||||
apiClient.post('/users/block', { targetUserId: userId }),
|
||||
|
||||
unblockUser: (userId) =>
|
||||
apiClient.delete(`/users/block/${userId}`),
|
||||
|
||||
updateProfile: (data) =>
|
||||
apiClient.put('/users/profile', data),
|
||||
|
||||
updateStatus: (status) =>
|
||||
apiClient.put('/users/status', { status }),
|
||||
};
|
||||
|
||||
// ============== CALLS ==============
|
||||
export const callService = {
|
||||
initiate: (userId) =>
|
||||
apiClient.post('/calls', { userId }),
|
||||
|
||||
accept: (callId) =>
|
||||
apiClient.post(`/calls/${callId}/accept`),
|
||||
|
||||
reject: (callId) =>
|
||||
apiClient.post(`/calls/${callId}/reject`),
|
||||
|
||||
end: (callId) =>
|
||||
apiClient.post(`/calls/${callId}/end`),
|
||||
|
||||
getActive: () =>
|
||||
apiClient.get('/calls/active'),
|
||||
};
|
||||
|
||||
// ============== NOTIFICATIONS ==============
|
||||
export const notificationService = {
|
||||
list: () =>
|
||||
apiClient.get('/notifications'),
|
||||
|
||||
markAsRead: (notificationId) =>
|
||||
apiClient.put(`/notifications/${notificationId}/read`),
|
||||
|
||||
markAllAsRead: () =>
|
||||
apiClient.post('/notifications/mark-all-read'),
|
||||
|
||||
clear: (notificationId) =>
|
||||
apiClient.delete(`/notifications/${notificationId}`),
|
||||
|
||||
clearAll: () =>
|
||||
apiClient.post('/notifications/clear-all'),
|
||||
};
|
||||
|
||||
// ============== ADMIN ==============
|
||||
export const adminService = {
|
||||
listUsers: () =>
|
||||
apiClient.get('/admin/users'),
|
||||
|
||||
listServers: () =>
|
||||
apiClient.get('/admin/servers'),
|
||||
|
||||
getStats: () =>
|
||||
apiClient.get('/admin/stats'),
|
||||
|
||||
banUser: (userId, reason) =>
|
||||
apiClient.post('/admin/users/ban', { userId, reason }),
|
||||
|
||||
unbanUser: (userId) =>
|
||||
apiClient.post('/admin/users/unban', { userId }),
|
||||
|
||||
deleteServer: (serverId) =>
|
||||
apiClient.delete(`/admin/servers/${serverId}`),
|
||||
};
|
||||
|
||||
export default apiClient;
|
||||
119
astro-site/src/react-app/services/livekit.js
vendored
Normal file
119
astro-site/src/react-app/services/livekit.js
vendored
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* LiveKit Integration Service
|
||||
* Handles voice/video calls with screen sharing support
|
||||
*/
|
||||
|
||||
import { AccessToken } from 'livekit-server-sdk';
|
||||
|
||||
/**
|
||||
* Generate LiveKit token for user
|
||||
* Called from backend
|
||||
*/
|
||||
export async function generateLiveKitToken(userId, userName, roomName) {
|
||||
try {
|
||||
const at = new AccessToken(
|
||||
process.env.LIVEKIT_API_KEY,
|
||||
process.env.LIVEKIT_API_SECRET
|
||||
);
|
||||
|
||||
at.addGrant({
|
||||
roomJoin: true,
|
||||
room: roomName,
|
||||
canPublish: true,
|
||||
canPublishData: true,
|
||||
canSubscribe: true,
|
||||
canPublishSources: ['camera', 'microphone', 'screen_share'],
|
||||
});
|
||||
|
||||
at.identity = userId;
|
||||
at.name = userName;
|
||||
at.metadata = JSON.stringify({
|
||||
userId,
|
||||
userName,
|
||||
joinedAt: new Date().toISOString(),
|
||||
});
|
||||
|
||||
return at.toJwt();
|
||||
} catch (error) {
|
||||
console.error('Error generating LiveKit token:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get LiveKit connection URL
|
||||
*/
|
||||
export function getLiveKitUrl() {
|
||||
return process.env.VITE_LIVEKIT_URL || process.env.LIVEKIT_WS_URL || 'ws://localhost:7880';
|
||||
}
|
||||
|
||||
/**
|
||||
* Create room on LiveKit server
|
||||
*/
|
||||
export async function createLiveKitRoom(roomName, maxParticipants = 10) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${process.env.VITE_LIVEKIT_API_URL}/twirp/livekit.RoomService/CreateRoom`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.LIVEKIT_API_KEY}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
room: roomName,
|
||||
max_participants: maxParticipants,
|
||||
empty_timeout: 300,
|
||||
metadata: JSON.stringify({
|
||||
created_at: new Date().toISOString(),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to create room: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Error creating LiveKit room:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete room from LiveKit server
|
||||
*/
|
||||
export async function deleteLiveKitRoom(roomName) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${process.env.VITE_LIVEKIT_API_URL}/twirp/livekit.RoomService/DeleteRoom`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.LIVEKIT_API_KEY}`,
|
||||
},
|
||||
body: JSON.stringify({ room: roomName }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to delete room: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error deleting LiveKit room:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
generateLiveKitToken,
|
||||
getLiveKitUrl,
|
||||
createLiveKitRoom,
|
||||
deleteLiveKitRoom,
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue