window.ChatterCustomChannel = {
        name: "User Status",
            version: "1.0.0",
                description: "View online users",
                    icon: "👥",
                        
                            init: function(container, socket, utils) {
                                        container.innerHTML = `
                                                    <div style="padding: 1rem;">
                                                                    <h3>Online Users</h3>
                                                                                    <div id="user-list"></div>
                                                                                                </div>
                                                                                                        `;
                                                                                                                
                                                                                                                        socket.on('user_list_refresh', () => this.loadUsers());
                                                                                                                                this.loadUsers();
                            },
                                
                                    loadUsers: function() {
                                                fetch('/api/users/online')
                                                            .then(r => r.json())
                                                                        .then(data => {
                                                                                            const list = document.getElementById('user-list');
                                                                                                            list.innerHTML = data.users.map(u => `
                                                                                                                                <div style="padding: 0.5rem; margin: 0.25rem 0; 
                                                                                                                                                                display: flex; align-items: center; gap: 0.5rem;">
                                                                                                                                                                                        <span style="width: 8px; height: 8px; 
                                                                                                                                                                                                                            background: #10b981; border-radius: 50%;"></span>
                                                                                                                                                                                                                                                    <strong>${u.username}</strong>
                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                        `).join('');
                                                                        });
                                    },
                                        
                                            destroy: function() {}
};
                                                                        })
                                    }
                            }
}