From 6de509f72385eab08e76129ac3bc1b0f089e1669 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Fri, 12 Nov 2021 21:28:29 -0800
Subject: [PATCH] Split up user lists into tabs

---
 web/pages/chat/users.tsx | 25 +++++++++++++------------
 web/styles/globals.scss  | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/web/pages/chat/users.tsx b/web/pages/chat/users.tsx
index 147f7a8f8..7e0569bd3 100644
--- a/web/pages/chat/users.tsx
+++ b/web/pages/chat/users.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Typography } from 'antd';
+import { Typography, Tabs } from 'antd';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis';
 import UserTable from '../../components/user-table';
 import ClientTable from '../../components/client-table';
 
 const { Title } = Typography;
+const { TabPane } = Tabs;
 
 export const FETCH_INTERVAL = 10 * 1000; // 10 sec
 
@@ -74,16 +75,16 @@ export default function ChatUsers() {
   );
 
   return (
-    <>
-      <Title>Connected Chat Participants {online ? `(${clients.length})` : null}</Title>
-      {connectedUsers}
-      <br />
-      <br />
-      <Title>Banned Users {online ? `(${disabledUsers.length})` : null}</Title>
-      <UserTable data={disabledUsers} />
-
-      <Title>Moderators {online ? `(${moderators.length})` : null}</Title>
-      <UserTable data={moderators} />
-    </>
+    <Tabs defaultActiveKey="1">
+      <TabPane tab={<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>} key="1">
+        {connectedUsers}
+      </TabPane>
+      <TabPane tab={<span>Banned {online ? `(${disabledUsers.length})` : null}</span>} key="2">
+        <UserTable data={disabledUsers} />
+      </TabPane>
+      <TabPane tab={<span>Moderators {online ? `(${moderators.length})` : null}</span>} key="3">
+        <UserTable data={moderators} />
+      </TabPane>
+    </Tabs>
   );
 }
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index f4c214f31..da24f5afd 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -142,3 +142,19 @@ input {
     text-align: right;
   }
 }
+
+.ant-tabs-tab {
+  color:var(--owncast-purple);
+
+  .ant-tabs-tab-active {
+    border-color: var(--nav-selected-text);
+  }
+}
+
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: var(--nav-selected-text);
+}
+
+.ant-tabs-ink-bar {
+  background: var(--nav-selected-text);
+}
\ No newline at end of file