- AeThex Foundation
- Official
-
- {/* Channel List */}
-
-
Announcements
-
- š¢
- updates
- 3
+interface ChannelSidebarProps {
+ onOpenSettings?: () => void;
+}
+
+const ChannelSidebar: React.FC = ({ onOpenSettings }) => {
+ const { currentServer, channels, currentChannel, selectChannel, loadingChannels } = useApp();
+ const { user, logout } = useAuth();
+ const [showSettings, setShowSettings] = useState(false);
+ const [statusMenu, setStatusMenu] = useState(false);
+
+ const textChannels = channels.filter(c => c.channel_type === 'text' || c.channel_type === 'announcement');
+ const voiceChannels = channels.filter(c => c.channel_type === 'voice' || c.channel_type === 'stage');
+
+ const getChannelIcon = (type: string) => {
+ switch (type) {
+ case 'voice': return 'š';
+ case 'announcement': return 'š¢';
+ case 'stage': return 'š';
+ default: return '#';
+ }
+ };
+
+ if (!currentServer) {
+ return (
+
- {/* User Presence */}
-
+ {/* Home Header */}
+
-
+
+
+ {/* Quick Access */}
+
+
+
+ A
+
+
+
+ AeThex Connect
+ Home
+
+
+
+ {/* User Panel */}
+ Quick Access
+
+
+
+
+
+
- š
- changelog
-
- Development
-
- #
- general
-
-
- #
- api-discussion
-
-
- #
- passport-development
-
- Support
-
- ā
- help
-
-
- š
- bug-reports
-
- Voice Channels
-
- š
- Nexus Lounge
- 3
-
-
-
A
-
-
Anderson
-
-
- Building AeThex
+ );
+ }
+
+ return (
+
-);
+ );
+};
+
+// Channel Group Component
+const ChannelGroup: React.FC<{
+ title: string;
+ channels: any[];
+ currentChannel: any;
+ selectChannel: (channel: any) => void;
+ getChannelIcon: (type: string) => string;
+}> = ({ title, channels, currentChannel, selectChannel, getChannelIcon }) => {
+ const [collapsed, setCollapsed] = useState(false);
+
+ return (
+
+ {/* Server Header with Banner */}
+
-
+ {currentServer.banner_url ? (
+
+
+ {/* Server Stats Bar */}
+
+
+
+ ) : (
+
+ )}
+
+
+ {currentServer.name}
+ {currentServer.is_public && (
+
+ PUBLIC
+
+ )}
+
+
+
+
+ {/* Channel List */}
+
+
+ {currentServer.member_count || 1}
+
+ {currentServer.invite_code && (
+
+ )}
+
+ {loadingChannels ? (
+
+
+ {/* User Panel */}
+
+
+ Loading channels...
+
+ ) : (
+ <>
+ {textChannels.length > 0 && (
+
+
+ )}
+
+ )}
+ š
+ No channels yet
+Create one to get started!
+
+
+
+ {!collapsed && channels.map(channel => (
+
+ );
+};
+
+// User Panel Component
+const UserPanel: React.FC<{
+ user: any;
+ logout: () => void;
+ statusMenu: boolean;
+ setStatusMenu: (v: boolean) => void;
+ onOpenSettings?: () => void;
+}> = ({ user, logout, statusMenu, setStatusMenu, onOpenSettings }) => {
+ const statuses = [
+ { id: 'online', label: 'Online', color: 'bg-emerald-500' },
+ { id: 'idle', label: 'Idle', color: 'bg-amber-500' },
+ { id: 'dnd', label: 'Do Not Disturb', color: 'bg-rose-500' },
+ { id: 'offline', label: 'Invisible', color: 'bg-gray-500' },
+ ];
+
+ return (
+ selectChannel(channel)}
+ className={`channel-item flex items-center gap-2 px-2 py-1.5 mx-1 rounded-md cursor-pointer text-sm transition-all group ${
+ currentChannel?.id === channel.id
+ ? 'bg-white/10 text-white'
+ : 'text-white/50 hover:bg-white/5 hover:text-white/80'
+ }`}
+ >
+
+ {getChannelIcon(channel.channel_type)}
+
+ {channel.name}
+
+ ))}
+
+
+
+
+
+ );
+};
export default ChannelSidebar;
diff --git a/packages/desktop/src/renderer/components/ChatArea.tsx b/packages/desktop/src/renderer/components/ChatArea.tsx
index 00954e6..3c45d55 100644
--- a/packages/desktop/src/renderer/components/ChatArea.tsx
+++ b/packages/desktop/src/renderer/components/ChatArea.tsx
@@ -1,41 +1,182 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { useApp } from "../context/AppContext";
import Message from "./Message";
import MessageInput from "./MessageInput";
-const messages = [
- { type: "system", label: "FOUNDATION", text: "Foundation authentication services upgraded to v2.1.0. Enhanced security protocols now active across all AeThex infrastructure.", className: "foundation" },
- { type: "user", author: "Trevor", badge: "Foundation", time: "10:34 AM", text: "Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.", avatar: "T", avatarBg: "from-red-600 to-red-800" },
- { type: "user", author: "Marcus", time: "10:41 AM", text: "Excellent work! I've been testing the new Passport integration and it's incredibly smooth. The Trinity color-coding in the UI makes it really clear which division is handling what.", avatar: "M", avatarBg: "from-blue-600 to-blue-900" },
- { type: "system", label: "LABS", text: "Nexus Engine v2.0-beta now available for testing. New cross-platform sync reduces latency by 40%. Join #labs-testing to participate.", className: "labs" },
- { type: "user", author: "Sarah", badge: "Labs", time: "11:15 AM", text: "The Nexus v2 parallel compilation is insane. Cut my build time from 3 minutes to under 2. Still some edge cases with complex state synchronization but wow... ā ļø", avatar: "S", avatarBg: "from-orange-400 to-orange-700" },
- { type: "user", author: "Anderson", badge: "Founder", time: "11:47 AM", text: "Love seeing the Trinity infrastructure working in harmony. Foundation keeping everything secure, Labs pushing the boundaries, Corporation delivering production-ready tools. This is exactly the vision.", avatar: "A", avatarBg: "from-red-600 via-blue-600 to-orange-400" },
- { type: "user", author: "DevUser_2847", time: "12:03 PM", text: "Quick question - when using AeThex Studio, does the Terminal automatically connect to all three Trinity divisions, or do I need to configure that?", avatar: "D", avatarBg: "bg-[#1a1a1a]" },
- { type: "system", label: "CORPORATION", text: "AeThex Studio Pro users: New Railway deployment templates available. Optimized configurations for Foundation APIs, Corporation services, and Labs experiments.", className: "corporation" },
-];
+interface ChatAreaProps {
+ onToggleMembers?: () => void;
+ onToggleActivity?: () => void;
+ showMembers?: boolean;
+ showActivity?: boolean;
+ onOpenQuickSwitcher?: () => void;
+}
-const ChatArea: React.FC = () => (
-
+
+
+ {/* Status Menu */}
+ {statusMenu && (
+
+
+
+ {user?.avatarUrl ? (
+ 
+ ) : (
+ {user?.username?.charAt(0).toUpperCase() || 'U'}
+ )}
+
+
+
+ {user?.displayName || user?.username}
+ @{user?.username}
+
+
+
+
+
+
+ {statuses.map(status => (
+
+ ))}
+
+
+
+ )}
+
- {/* Chat Header */}
-
- # general
- = ({ items, position, onClose }) => {
+ const menuRef = useRef(null);
+ const [adjustedPosition, setAdjustedPosition] = useState(position);
+ const [activeSubmenu, setActiveSubmenu] = useState(null);
+
+ useEffect(() => {
+ if (!position || !menuRef.current) return;
+
+ const rect = menuRef.current.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ let x = position.x;
+ let y = position.y;
+
+ // Adjust horizontal position
+ if (x + rect.width > viewportWidth) {
+ x = viewportWidth - rect.width - 10;
+ }
+
+ // Adjust vertical position
+ if (y + rect.height > viewportHeight) {
+ y = viewportHeight - rect.height - 10;
+ }
+
+ setAdjustedPosition({ x, y });
+ }, [position]);
+
+ useEffect(() => {
+ const handleClickOutside = (e: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+ onClose();
+ }
+ };
+
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ onClose();
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ document.addEventListener('keydown', handleEscape);
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ document.removeEventListener('keydown', handleEscape);
+ };
+ }, [onClose]);
+
+ if (!position) return null;
+
+ const handleItemClick = (item: ContextMenuItem) => {
+ if (item.disabled || item.submenu) return;
+ item.onClick?.();
+ onClose();
+ };
+
+ return (
+ ({ position: null, items: [] });
+
+ const showContextMenu = (e: React.MouseEvent, items: ContextMenuItem[]) => {
+ e.preventDefault();
+ setState({
+ position: { x: e.clientX, y: e.clientY },
+ items,
+ });
+ };
+
+ const hideContextMenu = () => {
+ setState({ position: null, items: [] });
+ };
+
+ return {
+ contextMenu: state,
+ showContextMenu,
+ hideContextMenu,
+ };
+};
+
+// Pre-defined menu item sets
+export const messageContextMenuItems = (params: {
+ onReply?: () => void;
+ onEdit?: () => void;
+ onDelete?: () => void;
+ onCopy?: () => void;
+ onPin?: () => void;
+ isOwner?: boolean;
+}): ContextMenuItem[] => [
+ {
+ id: 'reply',
+ label: 'Reply',
+ icon: ,
+ onClick: params.onReply,
+ },
+ {
+ id: 'copy',
+ label: 'Copy Text',
+ icon: ,
+ shortcut: 'Ctrl+C',
+ onClick: params.onCopy,
+ },
+ {
+ id: 'pin',
+ label: 'Pin Message',
+ icon: ,
+ onClick: params.onPin,
+ },
+ { id: 'divider1', label: '', divider: true },
+ ...(params.isOwner ? [
+ {
+ id: 'edit',
+ label: 'Edit Message',
+ icon: ,
+ onClick: params.onEdit,
+ },
+ {
+ id: 'delete',
+ label: 'Delete Message',
+ icon: ,
+ danger: true,
+ onClick: params.onDelete,
+ },
+ ] : []),
+];
+
+export const userContextMenuItems = (params: {
+ onProfile?: () => void;
+ onMessage?: () => void;
+ onCall?: () => void;
+ onMute?: () => void;
+ onBlock?: () => void;
+}): ContextMenuItem[] => [
+ {
+ id: 'profile',
+ label: 'View Profile',
+ icon: ,
+ onClick: params.onProfile,
+ },
+ {
+ id: 'message',
+ label: 'Send Message',
+ icon: ,
+ onClick: params.onMessage,
+ },
+ {
+ id: 'call',
+ label: 'Start Voice Call',
+ icon: ,
+ onClick: params.onCall,
+ },
+ { id: 'divider1', label: '', divider: true },
+ {
+ id: 'mute',
+ label: 'Mute',
+ icon: ,
+ onClick: params.onMute,
+ },
+ {
+ id: 'block',
+ label: 'Block',
+ icon: ,
+ danger: true,
+ onClick: params.onBlock,
+ },
+];
+
+export const channelContextMenuItems = (params: {
+ onEdit?: () => void;
+ onMute?: () => void;
+ onInvite?: () => void;
+ onDelete?: () => void;
+ canManage?: boolean;
+}): ContextMenuItem[] => [
+ {
+ id: 'invite',
+ label: 'Invite People',
+ icon: ,
+ onClick: params.onInvite,
+ },
+ {
+ id: 'mute',
+ label: 'Mute Channel',
+ icon: ,
+ onClick: params.onMute,
+ },
+ ...(params.canManage ? [
+ { id: 'divider1', label: '', divider: true },
+ {
+ id: 'edit',
+ label: 'Edit Channel',
+ icon: ,
+ onClick: params.onEdit,
+ },
+ {
+ id: 'delete',
+ label: 'Delete Channel',
+ icon: ,
+ danger: true,
+ onClick: params.onDelete,
+ },
+ ] as ContextMenuItem[] : []),
+];
+
+export default ContextMenu;
diff --git a/packages/desktop/src/renderer/components/CreateServerModal.tsx b/packages/desktop/src/renderer/components/CreateServerModal.tsx
new file mode 100644
index 0000000..1352dc3
--- /dev/null
+++ b/packages/desktop/src/renderer/components/CreateServerModal.tsx
@@ -0,0 +1,291 @@
+import React, { useState } from 'react';
+
+interface CreateServerModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onCreateServer: (name: string, icon?: string) => Promise;
+}
+
+const serverTemplates = [
+ { id: 'gaming', name: 'Gaming', icon: 'š®', description: 'For gaming communities' },
+ { id: 'friends', name: 'Friends', icon: 'š„', description: 'A place to hang out' },
+ { id: 'study', name: 'Study Group', icon: 'š', description: 'For learning together' },
+ { id: 'creators', name: 'Creators', icon: 'šØ', description: 'For content creators' },
+ { id: 'local', name: 'Local Community', icon: 'š ', description: 'For local groups' },
+ { id: 'custom', name: 'Custom', icon: 'āļø', description: 'Start from scratch' },
+];
+
+const CreateServerModal: React.FC = ({ isOpen, onClose, onCreateServer }) => {
+ const [step, setStep] = useState<'select' | 'customize' | 'invite'>('select');
+ const [selectedTemplate, setSelectedTemplate] = useState('');
+ const [serverName, setServerName] = useState('');
+ const [serverIcon, setServerIcon] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ if (!isOpen) return null;
+
+ const handleTemplateSelect = (templateId: string) => {
+ setSelectedTemplate(templateId);
+ const template = serverTemplates.find(t => t.id === templateId);
+ if (template) {
+ setServerName(`${template.name} Server`);
+ }
+ setStep('customize');
+ };
+
+ const handleCreate = async () => {
+ if (!serverName.trim()) {
+ setError('Server name is required');
+ return;
+ }
+
+ setLoading(true);
+ setError('');
+
+ try {
+ await onCreateServer(serverName, serverIcon);
+ setStep('invite');
+ } catch (err: any) {
+ setError(err.message || 'Failed to create server');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleClose = () => {
+ setStep('select');
+ setSelectedTemplate('');
+ setServerName('');
+ setServerIcon('');
+ setError('');
+ onClose();
+ };
+
+ const renderStep = () => {
+ switch (step) {
+ case 'select':
+ return (
+
- š
- š
- š„ 128
- š
+const ChatArea: React.FC = ({
+ onToggleMembers,
+ onToggleActivity,
+ showMembers = true,
+ showActivity = true,
+ onOpenQuickSwitcher
+}) => {
+ const { currentChannel, messages, loadingMessages } = useApp();
+ const messagesEndRef = useRef(null);
+ const [typingUsers] = useState(['PixelArt']); // Mock typing indicator
+
+ // Auto-scroll to bottom on new messages
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [messages]);
+
+ if (!currentChannel) {
+ return (
+
-);
+ );
+};
export default ChatArea;
diff --git a/packages/desktop/src/renderer/components/ContextMenu.tsx b/packages/desktop/src/renderer/components/ContextMenu.tsx
new file mode 100644
index 0000000..b13a898
--- /dev/null
+++ b/packages/desktop/src/renderer/components/ContextMenu.tsx
@@ -0,0 +1,319 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface ContextMenuItem {
+ id: string;
+ label: string;
+ icon?: React.ReactNode;
+ shortcut?: string;
+ danger?: boolean;
+ disabled?: boolean;
+ divider?: boolean;
+ submenu?: ContextMenuItem[];
+ onClick?: () => void;
+}
+
+interface ContextMenuProps {
+ items: ContextMenuItem[];
+ position: { x: number; y: number } | null;
+ onClose: () => void;
+}
+
+const ContextMenu: React.FC
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ š¬
+
+
+ No Channel Selected
++ Select a text or voice channel from the sidebar to start chatting with your community. +
+
+ {/* Enhanced Chat Header */}
+
- {/* Messages */}
-
+
+
+ {/* Messages Area */}
+
+
+
+
+ #
+
+
+
+ {currentChannel.name}
+ {currentChannel.description && (
+ {currentChannel.description}
+ )}
+
+
+
+
+
+
+
+
+
+
+ {loadingMessages ? (
+
+
+ {/* Typing Indicator */}
+ {typingUsers.length > 0 && (
+
+
+ ) : messages.length === 0 ? (
+
+
+
+ Loading messages...
+
+
+ ) : (
+
+
+
+ š
+
+ Welcome to #{currentChannel.name}!
++ This is the start of the #{currentChannel.name} channel. Send your first message to get the conversation going! +
+
+ {/* Channel Start Header */}
+
+ )}
+
+
+
+ {messages.map((msg, index) => {
+ const prevMsg = messages[index - 1];
+ const showAvatar = !prevMsg ||
+ prevMsg.user_id !== msg.user_id ||
+ new Date(msg.created_at).getTime() - new Date(prevMsg.created_at).getTime() > 300000;
+
+ return (
+
+ #
+
+ Welcome to #{currentChannel.name}!
+This is the beginning of the #{currentChannel.name} channel.
+
+
+ )}
+
+ {/* Message Input */}
+
+
+
+
+
+ {typingUsers.join(', ')} is typing...
+
+
- {messages.map((msg, i) => (
-
- {/* Message Input */}
-
-
-
+ {items.map((item, index) => {
+ if (item.divider) {
+ return ;
+ }
+
+ return (
+
+ );
+};
+
+// Context Menu Hook
+interface ContextMenuState {
+ position: { x: number; y: number } | null;
+ items: ContextMenuItem[];
+}
+
+export const useContextMenu = () => {
+ const [state, setState] = useState item.submenu && setActiveSubmenu(item.id)}
+ onMouseLeave={() => setActiveSubmenu(null)}
+ >
+
+
+ {/* Submenu */}
+ {item.submenu && activeSubmenu === item.id && (
+
+ );
+ })}
+
+ {item.submenu.map((subitem) => (
+
+ ))}
+
+ )}
+
+ {/* Header */}
+
+ );
+
+ case 'customize':
+ return (
+
+
+
+ {/* Templates Grid */}
+ Create Your Server
+Your server is where you and your friends hang out. Make yours and start talking.
+
+ {serverTemplates.map((template) => (
+
+ ))}
+
+
+ {/* Join Server Option */}
+
+
+ Have an invite already?
+ +
+ {/* Back Button */}
+
+
+ {/* Header */}
+
+ );
+
+ case 'invite':
+ return (
+
+
+
+ {/* Server Icon Upload */}
+ Customize Your Server
+Give your new server a personality with a name and an icon. You can always change it later.
+
+
+
+ {/* Server Name Input */}
+
+
+
+ {serverIcon ? (
+ 
+ ) : (
+
+
+
+ Upload
+
+ )}
+
+
+
+
+
+ setServerName(e.target.value)}
+ className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500/50 focus:ring-2 focus:ring-indigo-500/20 transition-all"
+ placeholder="Enter server name"
+ />
+ {error &&
+
+ {/* Guidelines */}
+ {error}
} ++ By creating a server, you agree to AeThex's Community Guidelines. +
+ + {/* Create Button */} + +
+ {/* Success Animation */}
+
+ );
+ }
+ };
+
+ return (
+
+
+
+ {/* Invite Link */}
+
+
+
+ Server Created!
+"{serverName}" is ready to go. Invite your friends to start chatting.
+
+
+
+
+ {/* Share Options */}
+
+
+
+
+
+ {['Twitter', 'Discord', 'Reddit', 'More'].map((platform) => (
+
+ ))}
+
+
+ {/* Done Button */}
+
+
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ {/* Background Glow */}
+
+
+
+ {/* Close Button */}
+
+
+ {/* Content */}
+
+ );
+};
+
+export default CreateServerModal;
diff --git a/packages/desktop/src/renderer/components/LoginScreen.tsx b/packages/desktop/src/renderer/components/LoginScreen.tsx
new file mode 100644
index 0000000..7f85e30
--- /dev/null
+++ b/packages/desktop/src/renderer/components/LoginScreen.tsx
@@ -0,0 +1,356 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+
+const LoginScreen: React.FC = () => {
+ const { login, register, demoLogin } = useAuth();
+ const [isRegister, setIsRegister] = useState(false);
+ const [username, setUsername] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [displayName, setDisplayName] = useState('');
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [showQR, setShowQR] = useState(false);
+ const [passwordStrength, setPasswordStrength] = useState(0);
+
+ // Calculate password strength
+ useEffect(() => {
+ let strength = 0;
+ if (password.length >= 8) strength++;
+ if (/[A-Z]/.test(password)) strength++;
+ if (/[0-9]/.test(password)) strength++;
+ if (/[^A-Za-z0-9]/.test(password)) strength++;
+ setPasswordStrength(strength);
+ }, [password]);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+ setLoading(true);
+
+ try {
+ if (isRegister) {
+ await register(username, password, displayName || undefined);
+ } else {
+ await login(username, password);
+ }
+ } catch (err: any) {
+ setError(err.message || 'Authentication failed');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleDemoLogin = async () => {
+ setError('');
+ setLoading(true);
+ try {
+ await demoLogin();
+ } catch (err: any) {
+ setError(err.message || 'Demo login failed');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const strengthColors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500'];
+ const strengthLabels = ['Weak', 'Fair', 'Good', 'Strong'];
+
+ return (
+
+ {renderStep()}
+
+
+ {/* Progress Indicator */}
+
+ {['select', 'customize', 'invite'].map((s, i) => (
+
+ i ? 'bg-indigo-500/50' :
+ 'bg-white/10'
+ }`}
+ />
+ ))}
+
+
+ {/* Animated Background */}
+
+ );
+};
+
+export default LoginScreen;
diff --git a/packages/desktop/src/renderer/components/MainLayout.tsx b/packages/desktop/src/renderer/components/MainLayout.tsx
index deb571f..5d13395 100644
--- a/packages/desktop/src/renderer/components/MainLayout.tsx
+++ b/packages/desktop/src/renderer/components/MainLayout.tsx
@@ -1,16 +1,156 @@
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
import ServerList from "./ServerList";
import ChannelSidebar from "./ChannelSidebar";
import ChatArea from "./ChatArea";
import MemberSidebar from "./MemberSidebar";
+import ActivityPanel from "./ActivityPanel";
+import SettingsPanel from "./SettingsPanel";
+import QuickSwitcher from "./QuickSwitcher";
+import CreateServerModal from "./CreateServerModal";
+import { useApp } from "../context/AppContext";
+import { useToast } from "./ToastProvider";
const MainLayout: React.FC = () => {
+ const [showActivity, setShowActivity] = useState(true);
+ const [showMembers, setShowMembers] = useState(true);
+ const [showSettings, setShowSettings] = useState(false);
+ const [showQuickSwitcher, setShowQuickSwitcher] = useState(false);
+ const [showCreateServer, setShowCreateServer] = useState(false);
+
+ const { servers, channels, createServer, selectServer, selectChannel } = useApp();
+ const { addToast } = useToast();
+
+ // Global keyboard shortcuts
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ // Ctrl+K or Cmd+K - Quick Switcher
+ if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+ e.preventDefault();
+ setShowQuickSwitcher(true);
+ }
+
+ // Ctrl+, or Cmd+, - Settings
+ if ((e.ctrlKey || e.metaKey) && e.key === ',') {
+ e.preventDefault();
+ setShowSettings(true);
+ }
+
+ // Escape - Close any modal
+ if (e.key === 'Escape') {
+ if (showSettings) setShowSettings(false);
+ if (showQuickSwitcher) setShowQuickSwitcher(false);
+ if (showCreateServer) setShowCreateServer(false);
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [showSettings, showQuickSwitcher, showCreateServer]);
+
+ const handleCreateServer = useCallback(async (name: string, icon?: string) => {
+ try {
+ await createServer(name, icon);
+ addToast({
+ type: 'success',
+ title: 'Server Created',
+ message: `"${name}" is ready to go!`,
+ });
+ } catch (error: any) {
+ addToast({
+ type: 'error',
+ title: 'Failed to Create Server',
+ message: error.message || 'Something went wrong',
+ });
+ throw error;
+ }
+ }, [createServer, addToast]);
+
return (
-
+
+
+
+
+ {/* Grid pattern */}
+
+
+
+ {/* Left Side - Branding */}
+
+
+
+ {/* Right Side - Form */}
+
+ {/* Logo Animation */}
+
+
+
+
+
+
+
+ A
+
+ + Welcome to AeThex +
++ The next generation communication platform for gamers, creators, and communities. +
+ + {/* Features */} +
+ {[
+ { icon: 'š®', label: 'GameForge' },
+ { icon: 'š', label: 'HD Calls' },
+ { icon: 'š', label: 'E2E Encryption' },
+ ].map((feature, i) => (
+
+
+
+ ))}
+ {feature.icon}
+ {feature.label}
+
+
+
+ {/* Mobile Logo */}
+
+
+
+
+ {/* Form Card */}
+
+ A
+
+ AeThex Connect
+
+
+
+
+
+
+ {error && (
+ + {showQR ? 'Scan to Login' : isRegister ? 'Create Account' : 'Welcome Back'} +
++ {showQR ? 'Use the AeThex mobile app to scan' : isRegister ? 'Join millions of users worldwide' : 'Sign in to continue to AeThex'} +
+
+
+ {error}
+
+ )}
+
+ {showQR ? (
+ /* QR Code View */
+
+
+ ) : (
+
+ )}
+
+ {/* Fake QR pattern */}
+
+
+ + Open the AeThex app and scan this code +
+ ++ By signing in, you agree to AeThex's Terms of Service and Privacy Policy +
+
-
+ {/* Ambient glow effects */}
+
+
+
+
+ setShowCreateServer(true)}
+ />
+ setShowSettings(true)}
+ />
+ setShowMembers(!showMembers)}
+ onToggleActivity={() => setShowActivity(!showActivity)}
+ showMembers={showMembers}
+ showActivity={showActivity}
+ onOpenQuickSwitcher={() => setShowQuickSwitcher(true)}
+ />
+ {showMembers && setShowSettings(false)}
+ />
+
+ setShowQuickSwitcher(false)}
+ servers={servers}
+ channels={channels}
+ onSelectServer={selectServer}
+ onSelectChannel={selectChannel}
+ onOpenSettings={() => {
+ setShowQuickSwitcher(false);
+ setShowSettings(true);
+ }}
+ />
+
+ setShowCreateServer(false)}
+ onCreateServer={handleCreateServer}
+ />
+
+ {/* Keyboard shortcut hints - show briefly on load */}
+
+ );
+};
+
+// Component to show keyboard hints briefly
+const KeyboardHints: React.FC = () => {
+ const [show, setShow] = useState(true);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setShow(false), 5000);
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (!show) return null;
+
+ return (
+
+
);
};
diff --git a/packages/desktop/src/renderer/components/MemberSidebar.tsx b/packages/desktop/src/renderer/components/MemberSidebar.tsx
index cd386e2..9e87e6e 100644
--- a/packages/desktop/src/renderer/components/MemberSidebar.tsx
+++ b/packages/desktop/src/renderer/components/MemberSidebar.tsx
@@ -1,43 +1,114 @@
import React from "react";
+import { useApp } from "../context/AppContext";
-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]" },
- ]},
-];
+const MemberSidebar: React.FC = () => {
+ const { members, currentServer } = useApp();
-const MemberSidebar: React.FC = () => (
-
+ Ctrl
+ +
+ K
+ Quick Switcher
+
+
+
+ Ctrl
+ +
+ ,
+ Settings
+
+
-
Members ā 128
-
- {members.map((section, i) => (
- = (props) => {
+ const [showActions, setShowActions] = useState(false);
+ const { showAvatar = true, compact = false } = props;
+
if (props.type === "system") {
return (
-
- );
+
+ const roleOrder = ['owner', 'admin', 'moderator', 'member'];
+ const roleLabels: Record = {
+ owner: 'š Owner',
+ admin: 'ā” Admins',
+ moderator: 'š”ļø Moderators',
+ member: 'Members'
+ };
+
+ const roleColors: Record = {
+ owner: 'text-amber-400',
+ admin: 'text-rose-400',
+ moderator: 'text-emerald-400',
+ member: 'text-white/70'
+ };
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'online': return 'bg-emerald-500';
+ case 'away': return 'bg-amber-500';
+ case 'dnd': return 'bg-rose-500';
+ default: return 'bg-gray-600';
+ }
+ };
+
+ const getGradient = (role: string) => {
+ switch (role) {
+ case 'owner': return 'from-amber-600 to-orange-600';
+ case 'admin': return 'from-rose-600 to-pink-600';
+ case 'moderator': return 'from-emerald-600 to-cyan-600';
+ default: return 'from-indigo-600 to-violet-600';
+ }
+ };
+
+ return (
+
-);
+ );
+};
export default MemberSidebar;
diff --git a/packages/desktop/src/renderer/components/Message.tsx b/packages/desktop/src/renderer/components/Message.tsx
index 2c6a544..ca54f82 100644
--- a/packages/desktop/src/renderer/components/Message.tsx
+++ b/packages/desktop/src/renderer/components/Message.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
interface MessageProps {
type: "system" | "user";
@@ -9,33 +9,94 @@ interface MessageProps {
time?: string;
text: string;
avatar?: string;
+ avatarUrl?: string;
avatarBg?: string;
+ showAvatar?: boolean;
+ compact?: boolean;
}
const Message: React.FC{section.section}
- {section.users.map((user, j) => (
-
-
- ))}
+ if (!currentServer) {
+ return null;
+ }
+
+ // Group members by role
+ const grouped = members.reduce((acc, member) => {
+ const role = member.role || 'member';
+ if (!acc[role]) acc[role] = [];
+ acc[role].push(member);
+ return acc;
+ }, {} as Record
- {user.avatar}
-
-
- {user.name}
- {user.activity && {user.activity}
}
-
+
-
+
+
+
+ Members ā {members.length}
- ))}
+
+ {roleOrder.map(role => {
+ const roleMembers = grouped[role];
+ if (!roleMembers || roleMembers.length === 0) return null;
+
+ return (
+
+
+ );
+ })}
+
+ {members.length === 0 && (
+
+ {roleLabels[role]} ā {roleMembers.length}
+
+ {roleMembers.map((member) => (
+
+
+ ))}
+
+ {member.avatar_url ? (
+ 
+ ) : (
+ {member.username?.charAt(0).toUpperCase() || 'U'}
+ )}
+
+
+
+
+ {/* Hover Actions */}
+
+ {member.nickname || member.display_name || member.username}
+
+ {member.custom_status && (
+ {member.custom_status}
+ )}
+
+
+
+
+
+ )}
+ š„
+ No members yet
+
-
[{props.label}] System Announcement
- {props.text}
+
+
+
+ {props.label || 'System'}: {props.text}
+
+
);
}
- return (
-
-
{props.avatar}
-
-
- {props.author}
- {props.badge && (
- {props.badge}
- )}
- {props.time}
+
+ if (compact) {
+ return (
+ (null);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!message.trim() || sending) return;
+
+ setSending(true);
+ try {
+ await sendMessage(message);
+ setMessage('');
+ } catch (error) {
+ console.error('Failed to send message:', error);
+ } finally {
+ setSending(false);
+ }
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmit(e);
+ }
+ };
+
+ const addEmoji = (emoji: string) => {
+ setMessage(prev => prev + emoji);
+ setShowEmojiPicker(false);
+ inputRef.current?.focus();
+ };
+
+ const quickEmojis = ['š', 'š', 'ā¤ļø', 'š', 'š„', 'āØ', 'š', 'šÆ'];
+
+ return (
+
setShowActions(true)}
+ onMouseLeave={() => setShowActions(false)}
+ >
+
+ );
+ }
+
+ return (
+
+
+ {props.time}
+
- {props.text}
+ {props.text}
+ {showActions && setShowActions(true)}
+ onMouseLeave={() => setShowActions(false)}
+ >
+ {showAvatar && (
+
);
};
+const MessageActions: React.FC = () => (
+
+ {props.avatarUrl ? (
+ 
+ ) : (
+ {props.avatar}
+ )}
+
+ )}
+
+
+ {showActions &&
+
+ {props.author}
+
+ {props.badge && (
+
+ {props.badge}
+
+ )}
+ {props.time}
+
+
+ {props.text}
+
+
+
+
+
+
+);
+
export default Message;
diff --git a/packages/desktop/src/renderer/components/MessageInput.tsx b/packages/desktop/src/renderer/components/MessageInput.tsx
index aefe163..3c85202 100644
--- a/packages/desktop/src/renderer/components/MessageInput.tsx
+++ b/packages/desktop/src/renderer/components/MessageInput.tsx
@@ -1,16 +1,136 @@
-import React from "react";
+import React, { useState, useRef } from "react";
+import { useApp } from "../context/AppContext";
-const MessageInput: React.FC = () => (
-
-
-
-
-
-);
+const MessageInput: React.FC = () => {
+ const { currentChannel, sendMessage } = useApp();
+ const [message, setMessage] = useState('');
+ const [sending, setSending] = useState(false);
+ const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+ const inputRef = useRef
+