Correctly handling the server side bar

shared/js/SideBarManager.ts

@@ -42,6 +42,10 @@ export class SideBarManager {
         this.setSideBarContent("channel");
     }
 
+    showServer() {
+        this.setSideBarContent("server");
+    }
+
     showClientInfo(client: ClientEntry) {
         this.connection.getSelectedClientInfo().setClient(client);
         this.setSideBarContent("client-info");

shared/js/tree/ChannelTree.tsx

@@ -189,7 +189,7 @@ export class ChannelTree {
             if(settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT)) {
                 const conversation = this.client.getChannelConversations().findOrCreateConversation(0);
                 this.client.getChannelConversations().setSelectedConversation(conversation);
-                this.client.getSideBar().showChannel();
+                this.client.getSideBar().showServer();
             }
         }
     }

shared/js/tree/Server.ts

@@ -193,7 +193,7 @@ export class ServerEntry extends ChannelTreeEntry<ServerEvents> {
                 name: tr("Join server text channel"),
                 callback: () => {
                     this.channelTree.client.getChannelConversations().setSelectedConversation(this.channelTree.client.getChannelConversations().findOrCreateConversation(0));
-                    this.channelTree.client.getSideBar().showChannel();
+                    this.channelTree.client.getSideBar().showServer();
                 },
                 visible: !settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT)
             }, {

shared/js/ui/frames/SideBarController.ts

@@ -118,6 +118,16 @@ export class SideBarController {
                 });
                 break;
 
+            case "server":
+                this.uiEvents.fire_react("notify_content_data", {
+                    content: "server",
+                    data: this.currentConnection ? {
+                        chatEvents: this.channelBar.getChannelConversationController().getUiEvents(),
+                        handlerId: this.currentConnection.handlerId
+                    } : undefined
+                });
+                break;
+
             case "private-chat":
                 if(!this.currentConnection) {
                     logWarn(LogCategory.GENERAL, tr("Received private chat content data request without an active connection."));

shared/js/ui/frames/SideBarDefinitions.ts

@@ -5,10 +5,11 @@ import {SideHeaderEvents} from "tc-shared/ui/frames/side/HeaderDefinitions";
 import {ChannelBarUiEvents} from "tc-shared/ui/frames/side/ChannelBarDefinitions";
 import {MusicBotUiEvents} from "tc-shared/ui/frames/side/MusicBotDefinitions";
 import {MusicPlaylistUiEvents} from "tc-shared/ui/frames/side/MusicPlaylistDefinitions";
+import {ChannelConversationUiEvents} from "tc-shared/ui/frames/side/ChannelConversationDefinitions";
 
 /* TODO: Somehow outsource the event registries to IPC? */
 
-export type SideBarType = "none" | "channel" | "private-chat" | "client-info" | "music-manage";
+export type SideBarType = "none" | "server" | "channel" | "private-chat" | "client-info" | "music-manage";
 export interface SideBarTypeData {
     "none": {},
     "channel": {
@@ -24,6 +25,10 @@ export interface SideBarTypeData {
     "music-manage": {
         botEvents: Registry<MusicBotUiEvents>,
         playlistEvents: Registry<MusicPlaylistUiEvents>
+    },
+    "server": {
+        handlerId: string,
+        chatEvents: Registry<ChannelConversationUiEvents>
     }
 }
 

shared/js/ui/frames/SideBarRenderer.tsx

@@ -10,6 +10,7 @@ import {LogCategory, logWarn} from "tc-shared/log";
 import React = require("react");
 import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary";
 import {MusicBotRenderer} from "tc-shared/ui/frames/side/MusicBotRenderer";
+import {ConversationPanel} from "tc-shared/ui/frames/side/AbstractConversationRenderer";
 
 const cssStyle = require("./SideBarRenderer.scss");
 
@@ -38,6 +39,21 @@ const ContentRendererChannel = () => {
     );
 };
 
+const ContentRendererServer = () => {
+    const contentData = useContentData("server");
+    if(!contentData) { return null; }
+
+    return (
+        <ConversationPanel
+            key={"server"}
+            events={contentData.chatEvents}
+            handlerId={contentData.handlerId}
+            messagesDeletable={true}
+            noFirstMessageOverlay={false}
+        />
+    );
+};
+
 const ContentRendererPrivateConversation = () => {
     const contentData = useContentData("private-chat");
     if(!contentData) { return null; }
@@ -75,6 +91,12 @@ const ContentRendererMusicManage = () => {
 
 const SideBarFrame = (props: { type: SideBarType }) => {
     switch (props.type) {
+        case "server":
+            return (
+                <ErrorBoundary key={props.type}>
+                    <ContentRendererServer />
+                </ErrorBoundary>
+            )
         case "channel":
             return (
                 <ErrorBoundary key={props.type}>
@@ -116,6 +138,10 @@ const SideBarHeader = (props: { type: SideBarType, eventsHeader: Registry<SideHe
             headerState = { state: "none" };
             break;
 
+        case "server":
+            headerState = { state: "conversation", mode: "server" };
+            break;
+
         case "channel":
             headerState = { state: "conversation", mode: "channel" };
             break;

shared/js/ui/frames/side/ChannelBarController.ts

@@ -56,6 +56,10 @@ export class ChannelBarController {
         this.uiEvents.destroy();
     }
 
+    getChannelConversationController() : ChannelConversationController {
+        return this.channelConversations;
+    }
+
     setConnectionHandler(handler: ConnectionHandler) {
         if(this.currentConnection === handler) {
             return;

shared/js/ui/frames/side/HeaderController.ts

@@ -89,6 +89,7 @@ export class SideHeaderController {
         this.uiEvents.on("query_current_channel_state", event => this.sendChannelState(event.mode));
         this.uiEvents.on("query_private_conversations", () => this.sendPrivateConversationInfo());
         this.uiEvents.on("query_ping", () => this.sendPing());
+        this.uiEvents.on("query_server_info", () => this.sendServerInfo());
     }
 
     private initializeConnection() {
@@ -144,6 +145,11 @@ export class SideHeaderController {
         this.listenerConnection.push(this.connection.getPrivateConversations().events.on("notify_unread_count_changed", () => this.sendPrivateConversationInfo()));
         this.listenerConnection.push(this.connection.getPrivateConversations().events.on(["notify_conversation_destroyed", "notify_conversation_destroyed"], () => this.sendPrivateConversationInfo()));
         this.listenerConnection.push(this.connection.getSelectedClientInfo().events.on("notify_client_changed", () => this.sendClientInfoOwnClient()));
+        this.listenerConnection.push(this.connection.channelTree.server.events.on("notify_properties_updated", event => {
+            if("virtualserver_icon_id" in event.updated_properties || "virtualserver_name" in event.updated_properties) {
+                this.sendServerInfo();
+            }
+        }));
     }
 
     setConnectionHandler(connection: ConnectionHandler) {
@@ -303,4 +309,21 @@ export class SideHeaderController {
             this.uiEvents.fire_react("notify_client_info_own_client", { isOwnClient: false });
         }
     }
+
+    private sendServerInfo() {
+        if(this.connection?.connected) {
+            this.uiEvents.fire_react("notify_server_info", {
+                info: {
+                    name: this.connection.channelTree.server.properties.virtualserver_name,
+                    icon: {
+                        handlerId: this.connection.handlerId,
+                        serverUniqueId: this.connection.getCurrentServerUniqueId(),
+                        iconId: this.connection.channelTree.server.properties.virtualserver_icon_id
+                    }
+                }
+            })
+        } else {
+            this.uiEvents.fire_react("notify_server_info", { info: undefined });
+        }
+    }
 }

shared/js/ui/frames/side/HeaderDefinitions.ts

@@ -7,7 +7,7 @@ export type SideHeaderStateNone = {
 
 export type SideHeaderStateConversation = {
     state: "conversation",
-    mode: "channel" | "private"
+    mode: "channel" | "private" | "server"
 };
 
 export type SideHeaderStateClient = {
@@ -38,12 +38,18 @@ export type PrivateConversationInfo = {
     open: number
 };
 
+export type SideHeaderServerInfo = {
+    name: string,
+    icon: RemoteIconInfo
+}
+
 export interface SideHeaderEvents {
     action_bot_manage: {},
     action_bot_add_song: {},
     action_switch_channel_chat: {},
     action_open_conversation: {},
 
+    query_server_info: {},
     query_current_channel_state: { mode: "voice" | "text" },
     query_private_conversations: {},
     query_client_info_own_client: {},
@@ -61,5 +67,8 @@ export interface SideHeaderEvents {
     },
     notify_client_info_own_client: {
         isOwnClient: boolean
+    },
+    notify_server_info: {
+        info: SideHeaderServerInfo | undefined
     }
 }

shared/js/ui/frames/side/HeaderRenderer.tsx

@@ -4,7 +4,7 @@ import {
     SideHeaderEvents,
     SideHeaderState,
     SideHeaderChannelState,
-    SideHeaderPingInfo, PrivateConversationInfo
+    SideHeaderPingInfo, PrivateConversationInfo, SideHeaderServerInfo
 } from "tc-shared/ui/frames/side/HeaderDefinitions";
 import {Translatable, VariadicTranslatable} from "tc-shared/ui/react-elements/i18n";
 import {useContext, useState} from "react";
@@ -74,6 +74,38 @@ const BlockChannelState = (props: { mode: "voice" | "text" }) => {
     );
 }
 
+const ServerInfoRenderer = React.memo((props: { info: SideHeaderServerInfo | undefined }) => {
+    if(!props.info) {
+        return <div className={cssStyle.value} key={"not-connected"}><Translatable>Not connected</Translatable></div>;
+    }
+
+    let icon;
+    if(props.info.icon.iconId !== 0) {
+        const remoteIcon = getIconManager().resolveIcon(props.info.icon.iconId, props.info.icon.serverUniqueId, props.info.icon.handlerId);
+        icon = <RemoteIconRenderer icon={remoteIcon} className={cssStyle.icon} key={"icon-" + props.info.icon.iconId} />;
+    }
+
+    return (
+        <div className={cssStyle.value} key={"connected"}>{icon}{props.info.name}</div>
+    );
+});
+
+const BlockServerState = () => {
+    const events = useContext(EventsContext);
+    const [ info, setInfo ] = useState<SideHeaderServerInfo | undefined>(() => {
+        events.fire("query_server_info");
+        return undefined;
+    });
+
+    events.reactUse("notify_server_info", event => setInfo(event.info));
+    return (
+        <Block target={"left"}>
+            <Translatable>You're chatting on Server</Translatable>
+            <ServerInfoRenderer info={info} />
+        </Block>
+    );
+}
+
 const BlockPing = () => {
     const events = useContext(EventsContext);
     const [ pingInfo, setPingInfo ] = useState<SideHeaderPingInfo>(() => {
@@ -221,6 +253,8 @@ const BlockBottomLeft = () => {
         case "conversation":
             if(state.mode === "private") {
                 return <BlockButtonSwitchToChannelChat key={"switch-channel-chat"} />;
+            } else if(state.mode === "server") {
+                return <BlockServerState key={"server"} />
             } else {
                 return <BlockChannelState mode={"text"} key={"text-state"} />;
             }