# 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