Add files.js

files.js

@@ -0,0 +1,40 @@
+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() {}
+};
+                                                                        })
+                                    }
+                            }
+}