From 3e339996193124eb2f1c1673af95ef095b61640e Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Thu, 25 Jun 2020 18:28:54 +0200
Subject: [PATCH] Add buffer header

Only for channels for now
---
 components/app.js | 42 ++++++++++++++++++++++++++++++++----------
 style.css         | 23 +++++++++++++++++++++--
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/components/app.js b/components/app.js
index d314d28..c2275e6 100644
--- a/components/app.js
+++ b/components/app.js
@@ -2,6 +2,7 @@ import * as irc from "/lib/irc.js";
 import Client from "/lib/client.js";
 import Buffer from "/components/buffer.js";
 import BufferList from "/components/buffer-list.js";
+import BufferHeader from "/components/buffer-header.js";
 import Connect from "/components/connect.js";
 import Composer from "/components/composer.js";
 import ScrollManager from "/components/scroll-manager.js";
@@ -148,7 +149,10 @@ export default class App extends Component {
 			msgUnread = Unread.MESSAGE;
 		}
 
-		this.createBuffer(bufName);
+		if (msg.prefix.name != this.client.nick && msg.command != "PART") {
+			this.createBuffer(bufName);
+		}
+
 		this.setBufferState(bufName, (buf, state) => {
 			var unread = buf.unread;
 			if (state.activeBuffer != buf.name) {
@@ -311,6 +315,22 @@ export default class App extends Component {
 		return irc.STD_CHANNEL_TYPES.indexOf(name[0]) >= 0;
 	}
 
+	close(target) {
+		if (target == SERVER_BUFFER) {
+			this.client.close();
+			return;
+		}
+		if (this.isChannel(target)) {
+			this.client.send({ command: "PART", params: [target] });
+		}
+		this.switchBuffer(SERVER_BUFFER);
+		this.setState((state) => {
+			var buffers = new Map(state.buffers);
+			buffers.delete(target);
+			return { buffers };
+		});
+	}
+
 	executeCommand(s) {
 		var parts = s.split(" ");
 		var cmd = parts[0].toLowerCase().slice(1);
@@ -328,15 +348,7 @@ export default class App extends Component {
 				console.error("Not in a user or channel buffer");
 				return;
 			}
-			if (this.isChannel(target)) {
-				this.client.send({ command: "PART", params: [channel] });
-			}
-			this.switchBuffer(SERVER_BUFFER);
-			this.setState((state) => {
-				var buffers = new Map(state.buffers);
-				buffers.delete(target);
-				return { buffers };
-			});
+			this.close(target);
 			break;
 		case "join":
 			var channel = args[0];
@@ -416,10 +428,20 @@ export default class App extends Component {
 			activeBuffer = this.state.buffers.get(this.state.activeBuffer);
 		}
 
+		var topbar = null;
+		if (activeBuffer && this.isChannel(activeBuffer.name)) {
+			topbar = html`
+				<section id="topbar">
+					<${BufferHeader} buffer=${activeBuffer} onClose=${() => this.close(activeBuffer.name)}/>
+				</section>
+			`;
+		}
+
 		return html`
 			<section id="sidebar">
 				<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
 			</section>
+			${topbar}
 			<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer}>
 				<section id="buffer" ref=${this.buffer}>
 					<${Buffer} buffer=${activeBuffer}/>
diff --git a/style.css b/style.css
index 25c9949..b1c86e9 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,7 @@ html, body {
 
 body {
 	display: grid;
-	grid-template-rows: 1fr max-content;
+	grid-template-rows: auto 1fr max-content;
 	grid-template-columns: max-content auto;
 	font-family: monospace;
 }
@@ -20,7 +20,8 @@ body {
 
 #sidebar {
 	background-color: #e3e3e3;
-	grid-row: 1 / 3;
+	grid-column: 1;
+	grid-row: 1 / 4;
 }
 
 #sidebar ul {
@@ -42,8 +43,26 @@ body {
 	color: #b37400;
 }
 
+#topbar {
+	grid-row: 1;
+	grid-column: 2;
+	box-sizing: border-box;
+	padding: 5px 10px;
+	border-bottom: 1px solid #e3e3e3;
+}
+
+#topbar .actions {
+	float: right;
+}
+
+#buffer {
+	grid-row: 2;
+	grid-column: 2;
+}
+
 #composer {
 	grid-column: 2;
+	grid-row: 3;
 	border-top: 1px solid #e3e3e3;
 }
 #composer input {