IRC_Client/components/buffer-header.js

import { html, Component } from "../lib/index.js";
import linkify from "../lib/linkify.js";
import { strip as stripANSI } from "../lib/ansi.js";
import { BufferType, ServerStatus, getServerName } from "../state.js";

const UserStatus = {
	HERE: "here",
	GONE: "gone",
	OFFLINE: "offline",
};

function NickStatus(props) {
	let textMap = {
		[UserStatus.HERE]: "User is online",
		[UserStatus.GONE]: "User is away",
		[UserStatus.OFFLINE]: "User is offline",
	};
	let text = textMap[props.status];
	return html`<span class="status status-${props.status}" title=${text}>●</span>`;
}

export default function BufferHeader(props) {
	function handleCloseClick(event) {
		event.preventDefault();
		props.onClose();
	}
	function handleJoinClick(event) {
		event.preventDefault();
		props.onJoin();
	}
	function handleAddNetworkClick(event) {
		event.preventDefault();
		props.onAddNetwork();
	}
	function handleManageNetworkClick(event) {
		event.preventDefault();
		props.onManageNetwork();
	}

	let description = null, actions = null;
	switch (props.buffer.type) {
	case BufferType.SERVER:
		switch (props.server.status) {
		case ServerStatus.DISCONNECTED:
			description = "Disconnected";
			break;
		case ServerStatus.CONNECTING:
			description = "Connecting...";
			break;
		case ServerStatus.REGISTERING:
			description = "Logging in...";
			break;
		case ServerStatus.REGISTERED:
			if (props.bouncerNetwork) {
				switch (props.bouncerNetwork.state) {
				case "disconnected":
					description = "Bouncer disconnected from network";
					break;
				case "connecting":
					description = "Bouncer connecting to network...";
					break;
				case "connected":
					// host can be undefined e.g. when using UNIX domain sockets
					description = `Connected to ${props.bouncerNetwork.host || "network"}`;
					break;
				}
			} else if (props.buffer.serverInfo) {
				let serverInfo = props.buffer.serverInfo;
				description = `Connected to ${serverInfo.name}`;
			} else {
				description = "Connected";
			}
			break;
		}

		if (props.isBouncer) {
			if (props.server.isupport.get("BOUNCER_NETID")) {
				actions = html`
					<button
						key="join"
						onClick=${handleJoinClick}
					>Join channel</button>
					<button
						key="manage"
						onClick=${handleManageNetworkClick}
					>Manage network</button>
				`;
			} else {
				actions = html`
					<button
						key="add"
						onClick=${handleAddNetworkClick}
					>Add network</button>
					<button
						key="disconnect"
						class="danger"
						onClick=${handleCloseClick}
					>Disconnect</button>
				`;
			}
		} else {
			actions = html`
				<button
					key="join"
					onClick=${handleJoinClick}
				>Join channel</button>
				<button
					key="disconnect"
					class="danger"
					onClick=${handleCloseClick}
				>Disconnect</button>
			`;
		}
		break;
	case BufferType.CHANNEL:
		if (props.buffer.topic) {
			description = linkify(stripANSI(props.buffer.topic), props.onChannelClick);
		}
		actions = html`
			<button
				key="part"
				class="danger"
				onClick=${handleCloseClick}
			>Leave</button>
		`;
		break;
	case BufferType.NICK:
		if (props.user) {
			let status = UserStatus.HERE;
			if (props.user.offline) {
				status = UserStatus.OFFLINE;
			} else if (props.user.away) {
				status = UserStatus.GONE;
			}

			let realname = props.buffer.name;
			if (props.user.realname) {
				realname = stripANSI(props.user.realname || "");
			}

			let mask = null;
			if (props.user.username && props.user.hostname) {
				mask = `(${props.user.username}@${props.user.hostname})`;
			}

			description = html`<${NickStatus} status=${status}/> ${realname} ${mask}`;
		}

		actions = html`
			<button
				key="close"
				class="danger"
				onClick=${handleCloseClick}
			>Close</button>
		`;
		break;
	}

	let name = props.buffer.name;
	if (props.buffer.type == BufferType.SERVER) {
		name = getServerName(props.server, props.bouncerNetwork, props.isBouncer);
	}

	return html`
		<div class="title">${name}</div>
		${description ? html`<div class="description">${description}</div>` : null}
		<div class="actions">${actions}</div>
	`;
}