add reaction button

src/webpage/icons/emoji.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="red" d="M60 0A60 60 0 0 0 0 60a60 60 0 0 0 60 60 60 60 0 0 0 60-60A60 60 0 0 0 60 0ZM47.7 12.2a7.6 7.6 0 0 1 2.5.9 7.6 7.6 0 0 1 3.9 6.5l.1 38.3a7.6 7.6 0 0 1-15.2 0l-.2-38.3a7.6 7.6 0 0 1 3.8-6.5 7.6 7.6 0 0 1 5.1-.9zm26 .1a7.6 7.6 0 0 1 2.5.9 7.6 7.6 0 0 1 3.9 6.5l.1 38.3a7.6 7.6 0 0 1-3.8 6.5A7.6 7.6 0 0 1 64.9 58l-.1-38.3a7.6 7.6 0 0 1 3.8-6.5 7.6 7.6 0 0 1 5.1-.9zm-52 58.2a7.6 7.6 0 0 1 7.6 3.8 35 35 0 0 0 12.9 13c16.3 9.4 38 3.5 47.4-12.9a7.6 7.6 0 0 1 4.7-3.5 7.6 7.6 0 0 1 5.7.7 7.6 7.6 0 0 1 3 10.4 50.4 50.4 0 0 1-87 0 7.6 7.6 0 0 1 3-10.5 7.6 7.6 0 0 1 2.8-1zM47.6 23l.1 35zm23.8 0 .1 35.2z"/></svg>

src/webpage/message.ts

@@ -641,6 +641,18 @@ class Message extends SnowFlake{
 							this.channel.setReplying(this);
 						};
 					}
+					if(this.channel.hasPermission("ADD_REACTIONS")){
+						const container = document.createElement("button");
+						const reply = document.createElement("span");
+						reply.classList.add("svg-emoji", "svgicon");
+						container.append(reply);
+						buttons.append(container);
+						container.onclick = e=>{
+							Emoji.emojiPicker(e.x, e.y, this.localuser).then(_=>{
+								this.reactionToggle(_);
+							});
+						};
+					}
 					if(this.author === this.localuser.user){
 						const container = document.createElement("button");
 						const edit = document.createElement("span");

src/webpage/style.css

@@ -210,6 +210,9 @@ textarea {
 .svg-announce {
 	mask: url(/icons/announce.svg);
 }
+.svg-emoji {
+	mask: url(/icons/emoji.svg);
+}
 .svg-edit {
 	mask: url(/icons/edit.svg);
 }