Reply GUI

.dist/channel.js

@@ -404,6 +404,38 @@ class Channel {
             headers: this.headers
         });
     }
+    setReplying(message) {
+        if (this.replyingto) {
+            this.replyingto.div.classList.remove("replying");
+        }
+        this.replyingto = message;
+        console.log(message);
+        this.replyingto.div.classList.add("replying");
+        this.makereplybox();
+    }
+    makereplybox() {
+        const replybox = document.getElementById("replybox");
+        if (this.replyingto) {
+            replybox.innerHTML = "";
+            const span = document.createElement("span");
+            span.textContent = "Replying to " + this.replyingto.author.username;
+            const X = document.createElement("button");
+            X.onclick = _ => {
+                this.replyingto.div.classList.remove("replying");
+                replybox.classList.add("hideReplyBox");
+                this.replyingto = null;
+                replybox.innerHTML = "";
+            };
+            replybox.classList.remove("hideReplyBox");
+            X.textContent = "⦻";
+            X.classList.add("cancelReply");
+            replybox.append(span);
+            replybox.append(X);
+        }
+        else {
+            replybox.classList.add("hideReplyBox");
+        }
+    }
     async getmessage(id) {
         if (this.messageids[id]) {
             return this.messageids[id];
@@ -427,6 +459,7 @@ class Channel {
         const prom = Message.wipeChanel();
         await this.putmessages();
         await prom;
+        this.makereplybox();
         this.buildmessages();
         history.pushState(null, null, "/channels/" + this.guild_id + "/" + this.id);
         document.getElementById("channelname").textContent = "#" + this.name;

.dist/index.js

@@ -11,14 +11,14 @@ async function waitforload() {
 }
 await waitforload();
 function setDynamicHeight() {
-    var servertdHeight = document.getElementById('servertd').offsetHeight + document.getElementById('typebox').offsetHeight + document.getElementById('pasteimage').offsetHeight;
+    var servertdHeight = document.getElementById('servertd').offsetHeight + document.getElementById('typediv').offsetHeight + document.getElementById('pasteimage').offsetHeight;
     document.documentElement.style.setProperty('--servertd-height', servertdHeight + 'px');
 }
 const resizeObserver = new ResizeObserver(() => {
     setDynamicHeight();
 });
 resizeObserver.observe(document.getElementById('servertd'));
-resizeObserver.observe(document.getElementById('typebox'));
+resizeObserver.observe(document.getElementById('replybox'));
 resizeObserver.observe(document.getElementById('pasteimage'));
 setDynamicHeight();
 const users = getBulkUsers();
@@ -129,15 +129,16 @@ async function enter(event) {
         }
         else {
             replyingto = thisuser.channelfocus.replyingto;
-            let replying = replyingto?.all;
+            let replying = replyingto;
             if (replyingto) {
-                replyingto.classList.remove("replying");
+                replyingto.div.classList.remove("replying");
             }
             thisuser.channelfocus.replyingto = null;
             channel.sendMessage(typebox.value, {
                 attachments: images,
                 replyingto: replying,
             });
+            thisuser.channelfocus.makereplybox();
         }
         while (images.length != 0) {
             images.pop();

.dist/message.js

@@ -36,12 +36,7 @@ class Message {
             navigator.clipboard.writeText(this.content);
         });
         Message.contextmenu.addbutton("Reply", function (div) {
-            if (this.channel.replyingto) {
+            this.channel.setReplying(this);
-                this.channel.replyingto.classList.remove("replying");
-            }
-            this.channel.replyingto = div;
-            console.log(div);
-            this.channel.replyingto.classList.add("replying");
         });
         Message.contextmenu.addbutton("Copy message id", function () {
             navigator.clipboard.writeText(this.id);
@@ -163,6 +158,9 @@ class Message {
             premessage = this.channel.messages[this.channel.messages.indexOf(this) + 1];
         }
         const div = this.div;
+        if (this === this.channel.replyingto) {
+            div.classList.add("replying");
+        }
         div.innerHTML = "";
         const build = document.createElement('table');
         if (this.message_reference) {

webpage/channel.ts

@@ -39,7 +39,7 @@ class Channel{
     message_notifications:number;
     allthewayup:boolean;
     static contextmenu=new Contextmenu("channel menu");
-    replyingto:HTMLDivElement;
+    replyingto:Message;
     static setupcontextmenu(){
         Channel.contextmenu.addbutton("Copy channel id",function(){
             console.log(this)
@@ -412,6 +412,38 @@ class Channel{
             headers:this.headers
         })
     }
+    setReplying(message:Message){
+            if(this.replyingto){
+                this.replyingto.div.classList.remove("replying");
+            }
+            this.replyingto=message;
+            console.log(message);
+            this.replyingto.div.classList.add("replying");
+            this.makereplybox();
+
+    }
+    makereplybox(){
+        const replybox=document.getElementById("replybox");
+        if(this.replyingto){
+            replybox.innerHTML="";
+            const span=document.createElement("span");
+            span.textContent="Replying to "+this.replyingto.author.username;
+            const X=document.createElement("button");
+            X.onclick=_=>{
+                this.replyingto.div.classList.remove("replying");
+                replybox.classList.add("hideReplyBox");
+                this.replyingto=null;
+                replybox.innerHTML="";
+            }
+            replybox.classList.remove("hideReplyBox");
+            X.textContent="⦻";
+            X.classList.add("cancelReply");
+            replybox.append(span);
+            replybox.append(X);
+        }else{
+            replybox.classList.add("hideReplyBox");
+        }
+    }
     async getmessage(id:string):Promise<Message>{
         if(this.messageids[id]){
             return this.messageids[id];
@@ -434,6 +466,7 @@ class Channel{
         const prom=Message.wipeChanel();
         await this.putmessages();
         await prom;
+        this.makereplybox();
         this.buildmessages();
         history.pushState(null, null,"/channels/"+this.guild_id+"/"+this.id);
         document.getElementById("channelname").textContent="#"+this.name;

webpage/index.html

@@ -57,6 +57,7 @@
                 </div>
                 <div id="pasteimage"></div>
                 <div id="typediv">
+                    <div id="replybox" class="hideReplyBox"></div>
                     <textarea id="typebox"></textarea>
                     <div id="typing" class="hidden">
                         <p id="typingtext">typing</p>

webpage/index.ts

@@ -12,14 +12,14 @@ async function waitforload(){
 await waitforload();
 
 function setDynamicHeight() {
-    var servertdHeight = document.getElementById('servertd').offsetHeight+document.getElementById('typebox').offsetHeight+document.getElementById('pasteimage').offsetHeight;
+    var servertdHeight = document.getElementById('servertd').offsetHeight+document.getElementById('typediv').offsetHeight+document.getElementById('pasteimage').offsetHeight;
     document.documentElement.style.setProperty('--servertd-height', servertdHeight + 'px');
 }
 const resizeObserver = new ResizeObserver(() => {
     setDynamicHeight();
 });
 resizeObserver.observe(document.getElementById('servertd'));
-resizeObserver.observe(document.getElementById('typebox'));
+resizeObserver.observe(document.getElementById('replybox'));
 resizeObserver.observe(document.getElementById('pasteimage'));
 setDynamicHeight();
 
@@ -143,15 +143,16 @@ async function enter(event){
             channel.editing=null;
         }else{
             replyingto= thisuser.channelfocus.replyingto;
-            let replying=replyingto?.all;
+            let replying=replyingto;
             if(replyingto){
-                replyingto.classList.remove("replying");
+                replyingto.div.classList.remove("replying");
             }
             thisuser.channelfocus.replyingto=null;
             channel.sendMessage(typebox.value,{
                 attachments:images,
                 replyingto:replying,
             })
+            thisuser.channelfocus.makereplybox();
         }
         while(images.length!=0){
             images.pop();

webpage/message.ts

@@ -40,13 +40,8 @@ class Message{
         Message.contextmenu.addbutton("Copy raw text",function(){
             navigator.clipboard.writeText(this.content);
         });
-        Message.contextmenu.addbutton("Reply",function(div){
+        Message.contextmenu.addbutton("Reply",function(this:Message,div:HTMLDivElement){
-            if(this.channel.replyingto){
+            this.channel.setReplying(this);
-                this.channel.replyingto.classList.remove("replying");
-            }
-            this.channel.replyingto=div;
-            console.log(div);
-            this.channel.replyingto.classList.add("replying");
         });
         Message.contextmenu.addbutton("Copy message id",function(){
             navigator.clipboard.writeText(this.id);
@@ -168,6 +163,9 @@ class Message{
             premessage=this.channel.messages[this.channel.messages.indexOf(this)+1];
         }
         const div=this.div;
+        if(this===this.channel.replyingto){
+            div.classList.add("replying");
+        }
         div.innerHTML="";
         const build = document.createElement('table');
         if(this.message_reference){

webpage/style.css

@@ -404,6 +404,7 @@ p {
 	/* Move down out of view */
 	opacity: 0;
 	/* Fade out */
+	display: none;
 }
 
 @keyframes fade {
@@ -1054,3 +1055,31 @@ span {
 	width: fit-content;
 	box-shadow:.02in .02in .05in black;
 }
+#replybox{
+	display:flex;
+	background:var(--reply-bg);
+	height:.25in;
+	transition: height .2s, padding .2s;
+	border-radius:.1in .1in 0 0;
+	padding-left:.05in;
+	justify-content: space-between;
+	flex-direction: row;
+	align-items: flex-end;
+	padding-top: .05in;
+}
+#replybox span{
+	align-self:stretch;
+}
+.cancelReply{
+	align-self:flex-start;
+	color:red;
+	margin-right: .1in;
+	height: .25in;
+	width: .25in;
+	text-align: center;
+	padding: 0in;
+}
+#replybox.hideReplyBox{
+	height: 0in;
+	padding: 0in;
+}