From b74fb90d47e649dcbfd5417417193f14a96d24f9 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Mon, 29 Jun 2020 10:12:46 +0200
Subject: [PATCH] Add button to join new channel

---
 components/app.js | 14 ++++++++++++++
 style.css         | 16 ++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/components/app.js b/components/app.js
index 7d556c9..bce9797 100644
--- a/components/app.js
+++ b/components/app.js
@@ -54,6 +54,7 @@ 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);
 
 		if (window.localStorage && localStorage.getItem("autoconnect")) {
 			var connectParams = JSON.parse(localStorage.getItem("autoconnect"));
@@ -516,6 +517,16 @@ export default class App extends Component {
 		this.switchBuffer(name);
 	}
 
+	handleJoinClick(event) {
+		event.preventDefault();
+
+		var channel = prompt("Join channel:");
+		if (!channel) {
+			return;
+		}
+		this.client.send({ command: "JOIN", params: [channel] });
+	}
+
 	componentDidMount() {
 		if (this.state.connectParams.autoconnect) {
 			this.connect(this.state.connectParams);
@@ -560,6 +571,9 @@ export default class App extends Component {
 		return html`
 			<section id="buffer-list">
 				<${BufferList} buffers=${this.state.buffers} 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}>
diff --git a/style.css b/style.css
index 4afc663..3886bae 100644
--- a/style.css
+++ b/style.css
@@ -22,12 +22,16 @@ body {
 	background-color: #e3e3e3;
 	grid-column: 1;
 	grid-row: 1 / 4;
+
+	display: flex;
+	flex-direction: column;
 }
 
 #buffer-list ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
+	flex: 1 0 auto;
 }
 #buffer-list li a {
 	display: inline-block;
@@ -42,6 +46,14 @@ body {
 #buffer-list li.unread-message a {
 	color: #b37400;
 }
+#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;
@@ -133,11 +145,11 @@ body {
 a {
 	color: green;
 }
-#buffer-list a, a.timestamp, a.nick {
+#buffer-list li a, a.timestamp, a.nick {
 	color: #4a4a4a;
 	text-decoration: none;
 }
-#buffer-list a:hover, #buffer-list a:active,
+#buffer-list li a:hover, #buffer-list li a:active,
 a.timestamp:hover, a.timestamp:active,
 a.nick:hover, a.nick:active {
 	text-decoration: underline;