Move join button to buffer header

components/app.js

@@ -168,7 +168,6 @@ export default class App extends Component {
 		this.handleBufferListClick = this.handleBufferListClick.bind(this);
 		this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
 		this.handleNickClick = this.handleNickClick.bind(this);
-		this.handleJoinClick = this.handleJoinClick.bind(this);
 		this.autocomplete = this.autocomplete.bind(this);
 		this.handleBufferScrollTop = this.handleBufferScrollTop.bind(this);
 		this.dismissError = this.dismissError.bind(this);
@@ -824,15 +823,12 @@ export default class App extends Component {
 		this.switchBuffer(id);
 	}
 
-	handleJoinClick(event) {
+	handleJoinClick(netID) {
-		event.preventDefault();
-
 		var channel = prompt("Join channel:");
 		if (!channel) {
 			return;
 		}
 
-		var netID = getActiveNetworkID(this.state);
 		var client = this.clients.get(netID);
 
 		client.send({ command: "JOIN", params: [channel] });
@@ -925,7 +921,7 @@ export default class App extends Component {
 		if (activeBuffer) {
 			bufferHeader = html`
 				<section id="buffer-header">
-					<${BufferHeader} buffer=${activeBuffer} network=${activeNetwork} onClose=${() => this.close(activeBuffer)}/>
+					<${BufferHeader} buffer=${activeBuffer} network=${activeNetwork} onClose=${() => this.close(activeBuffer)} onJoin=${() => this.handleJoinClick(activeBuffer.network)}/>
 				</section>
 			`;
 		}
@@ -945,9 +941,6 @@ export default class App extends Component {
 		return html`
 			<section id="buffer-list">
 				<${BufferList} buffers=${this.state.buffers} networks=${this.state.networks} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
-				<div class="actions">
-					<a href="#" onClick=${this.handleJoinClick}>Join channel</a>
-				</div>
 			</section>
 			${bufferHeader}
 			<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer} onScrollTop=${this.handleBufferScrollTop}>

components/buffer-header.js

@@ -24,6 +24,10 @@ export default function BufferHeader(props) {
 		event.preventDefault();
 		props.onClose();
 	}
+	function handleJoinClick(event) {
+		event.preventDefault();
+		props.onJoin();
+	}
 
 	var description = null;
 	if (props.buffer.serverInfo) {
@@ -63,9 +67,11 @@ export default function BufferHeader(props) {
 		description = html`<${NickStatus} status=${UserStatus.OFFLINE}/> ${props.buffer.name}`;
 	}
 
+	var actions = null;
 	var closeText = "Close";
 	switch (props.buffer.type) {
 	case BufferType.SERVER:
+		actions = html`<a href="#" onClick=${handleJoinClick}>Join</a>`;
 		closeText = "Disconnect";
 		break;
 	case BufferType.CHANNEL:
@@ -76,6 +82,8 @@ export default function BufferHeader(props) {
 	return html`
 		<span class="description">${description}</span>
 		<span class="actions">
+			${actions}
+			${" "}
 			<a href="#" onClick=${handlePartClick}>${closeText}</a>
 		</span>
 	`;

style.css

@@ -50,14 +50,6 @@ body {
 #buffer-list li.unread-highlight a {
 	color: #22009b;
 }
-#buffer-list .actions {
-	flex-shrink: 0;
-	text-align: center;
-}
-#buffer-list .actions a {
-	display: block;
-	padding: 10px;
-}
 
 #buffer-header, #member-list-header {
 	box-sizing: border-box;