make channel topic editable from user interface

client/components/Chat.vue

@@ -20,7 +20,16 @@
 				<div class="header">
 					<button class="lt" aria-label="Toggle channel list" />
 					<span class="title">{{ channel.name }}</span>
-					<span :title="channel.topic" class="topic"
+					<input
+						v-if="channel.editTopic === true"
+						:value="channel.topic"
+						class="topic-edit"
+						placeholder="Set channel topic"
+						@keyup.enter="saveTopic"
+						@keyup.esc="channel.editTopic = false"
+						@blur="channel.editTopic = false"
+					/>
+					<span v-else :title="channel.topic" class="topic" @dblclick="editTopic"
 						><ParsedMessage
 							v-if="channel.topic"
 							:network="network"
@@ -77,6 +86,7 @@
 </template>
 
 <script>
+const socket = require("../js/socket");
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageList from "./MessageList.vue";
 import ChatInput from "./ChatInput.vue";
@@ -118,6 +128,25 @@ export default {
 		hideUserVisibleError() {
 			this.$root.currentUserVisibleError = null;
 		},
+		editTopic() {
+			if (this.channel.type === "channel") {
+				this.channel.editTopic = true;
+
+				this.$nextTick(() => {
+					document.querySelector(`#chan-${this.channel.id} .topic-edit`).focus();
+				});
+			}
+		},
+		saveTopic(event) {
+			this.channel.editTopic = false;
+			const newTopic = event.target.value;
+
+			if (this.channel.topic !== newTopic) {
+				const target = this.channel.id;
+				const text = `/raw TOPIC ${this.channel.name} :${newTopic}`;
+				socket.emit("input", {target, text});
+			}
+		},
 	},
 };
 </script>

client/css/style.css

@@ -978,6 +978,19 @@ background on hover (unless active) */
 	font-size: 14px;
 }
 
+#windows .header .topic-edit {
+	color: inherit;
+	background: transparent;
+	border: 1px solid #cdd3da;
+	border-radius: 2px;
+	margin: 2px 0 2px 8px;
+	padding: 0 10px;
+	flex-grow: 1;
+	overflow: hidden;
+	font-size: 14px;
+	outline: none;
+}
+
 #chat {
 	overflow: hidden;
 	flex: 1 0 auto;

client/js/contextMenuFactory.js

@@ -6,7 +6,7 @@ const utils = require("./utils");
 const ContextMenu = require("./contextMenu");
 const contextMenuActions = [];
 const contextMenuItems = [];
-const {findChannel} = require("./vue");
+const {vueApp, findChannel} = require("./vue");
 
 module.exports = {
 	addContextMenuItem,
@@ -316,6 +316,25 @@ function addChannelListItem() {
 	});
 }
 
+function addEditTopicItem() {
+	function setEditTopic(itemData) {
+		findChannel(Number(itemData)).channel.editTopic = true;
+		document.querySelector(`#sidebar .chan[data-id="${Number(itemData)}"]`).click();
+
+		vueApp.$nextTick(() => {
+			document.querySelector(`#chan-${Number(itemData)} .topic-edit`).focus();
+		});
+	}
+
+	addContextMenuItem({
+		check: (target) => target.hasClass("channel"),
+		className: "edit",
+		displayName: "Edit topic",
+		data: (target) => target.attr("data-id"),
+		callback: setEditTopic,
+	});
+}
+
 function addBanListItem() {
 	function banlist(itemData) {
 		socket.emit("input", {
@@ -376,6 +395,7 @@ function addDefaultItems() {
 	addEditNetworkItem();
 	addJoinItem();
 	addChannelListItem();
+	addEditTopicItem();
 	addBanListItem();
 	addIgnoreListItem();
 	addConnectItem();

client/js/vue.js

@@ -76,6 +76,7 @@ function initChannel(channel) {
 	channel.inputHistory = [""];
 	channel.historyLoading = false;
 	channel.scrolledToBottom = true;
+	channel.editTopic = false;
 
 	if (channel.type === "channel") {
 		channel.usersOutdated = true;