112 lines
4 KiB
JavaScript
112 lines
4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import UserSettingsBar from './UserSettingsBar';
|
|
import VoiceChannel from './VoiceChannel';
|
|
|
|
const channels = [
|
|
{ category: 'Announcements', items: [
|
|
{ id: 'updates', icon: '📢', name: 'updates', badge: 3 },
|
|
{ id: 'changelog', icon: '📜', name: 'changelog' },
|
|
]},
|
|
{ category: 'Development', items: [
|
|
{ id: 'general', icon: '#', name: 'general' },
|
|
{ id: 'api-discussion', icon: '#', name: 'api-discussion' },
|
|
{ id: 'passport-development', icon: '#', name: 'passport-development' },
|
|
]},
|
|
{ category: 'Support', items: [
|
|
{ id: 'help', icon: '❓', name: 'help' },
|
|
{ id: 'bug-reports', icon: '🐛', name: 'bug-reports' },
|
|
]},
|
|
];
|
|
|
|
const voiceChannels = [
|
|
{ id: 'nexus-lounge', name: 'Nexus Lounge', users: [
|
|
{ id: 1, name: 'Trevor', avatar: 'T', color: '#ff0000', speaking: true, muted: false },
|
|
{ id: 2, name: 'Sarah', avatar: 'S', color: '#ffa500', speaking: false, muted: true },
|
|
{ id: 3, name: 'DevUser_2847', avatar: 'D', color: '#666', speaking: false, muted: false, streaming: true },
|
|
]},
|
|
{ id: 'collab-space', name: 'Collab Space', users: [] },
|
|
];
|
|
|
|
export default function ChannelSidebar({ onCreateChannel, onSettingsClick, onJoinVoice }) {
|
|
const [activeChannel, setActiveChannel] = useState('general');
|
|
const [expandedVoice, setExpandedVoice] = useState(['nexus-lounge']);
|
|
const [hoveredCategory, setHoveredCategory] = useState(null);
|
|
|
|
return (
|
|
<div className="channel-sidebar">
|
|
<div className="server-header">
|
|
<span>AeThex Foundation</span>
|
|
<span className="server-badge foundation">Official</span>
|
|
</div>
|
|
|
|
<div className="channel-list">
|
|
{channels.map((category) => (
|
|
<div key={category.category}>
|
|
<div
|
|
className="channel-category"
|
|
onMouseEnter={() => setHoveredCategory(category.category)}
|
|
onMouseLeave={() => setHoveredCategory(null)}
|
|
>
|
|
{category.category}
|
|
{hoveredCategory === category.category && onCreateChannel && (
|
|
<button
|
|
className="category-add-btn"
|
|
onClick={(e) => { e.stopPropagation(); onCreateChannel(); }}
|
|
title="Create Channel"
|
|
>
|
|
+
|
|
</button>
|
|
)}
|
|
</div>
|
|
{category.items.map((channel) => (
|
|
<div
|
|
key={channel.id}
|
|
className={`channel-item${activeChannel === channel.id ? ' active' : ''}`}
|
|
onClick={() => setActiveChannel(channel.id)}
|
|
>
|
|
<span className="channel-icon">{channel.icon}</span>
|
|
<span className="channel-name">{channel.name}</span>
|
|
{channel.badge && <span className="channel-badge">{channel.badge}</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
|
|
{/* Voice Channels */}
|
|
<div
|
|
className="channel-category"
|
|
onMouseEnter={() => setHoveredCategory('voice')}
|
|
onMouseLeave={() => setHoveredCategory(null)}
|
|
>
|
|
Voice Channels
|
|
{hoveredCategory === 'voice' && onCreateChannel && (
|
|
<button
|
|
className="category-add-btn"
|
|
onClick={(e) => { e.stopPropagation(); onCreateChannel(); }}
|
|
title="Create Channel"
|
|
>
|
|
+
|
|
</button>
|
|
)}
|
|
</div>
|
|
{voiceChannels.map((vc) => (
|
|
<VoiceChannel
|
|
key={vc.id}
|
|
channel={vc}
|
|
expanded={expandedVoice.includes(vc.id)}
|
|
onToggle={() => {
|
|
setExpandedVoice((prev) =>
|
|
prev.includes(vc.id)
|
|
? prev.filter((id) => id !== vc.id)
|
|
: [...prev, vc.id]
|
|
);
|
|
}}
|
|
onJoin={onJoinVoice}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<UserSettingsBar onSettingsClick={onSettingsClick} />
|
|
</div>
|
|
);
|
|
}
|