Update.

src/snek/static/message-list.js

@@ -15,14 +15,14 @@ class MessageListElement extends HTMLElement {
         super()
         this.attachShadow({ mode: 'open' });
         this.component = document.createElement('div')
-        this.shadowRoot.appendChild(this.component )
+        this.shadowRoot.appendChild(this.component)
     }
     linkifyText(text) {
-            const urlRegex = /https?:\/\/[^\s]+/g;
+        const urlRegex = /https?:\/\/[^\s]+/g;
 
-            return text.replace(urlRegex, (url) => {
-                return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
-            });
+        return text.replace(urlRegex, (url) => {
+            return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+        });
 
     }
     timeAgo(date1, date2) {
@@ -32,28 +32,37 @@ class MessageListElement extends HTMLElement {
         const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
         const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
         const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
-        if(days){
-            return `${days} days ago`
+        if (days) {
+            if (days > 1)
+                return `${days} days ago`
+            else
+                return `${days} day ago`
         }
-        if(hours){
-            return `${hours} hours ago`
+        if (hours) {
+            if (hours > 1)
+                return `${hours} hours ago`
+            else
+                return `${hours} hour ago`
         }
         if (minutes)
-            return `${minutes} minutes ago`
+            if (minutes > 1)
+                return `${minutes} minutes ago`
+            else
+                return `${minutes} minute ago`
 
         return `just now`
     }
-    timeDescription(isoDate){
-        if(!isoDate.endsWith("Z"))
+    timeDescription(isoDate) {
+        if (!isoDate.endsWith("Z"))
             isoDate += "Z"
-        const date =  new Date(isoDate)
+        const date = new Date(isoDate)
         const hours = String(date.getHours()).padStart(2, "0");
         const minutes = String(date.getMinutes()).padStart(2, "0");
         let timeStr = `${hours}:${minutes}`
         timeStr += ", " + this.timeAgo(new Date(isoDate), Date.now())
         return timeStr
     }
-    createElement(message){
+    createElement(message) {
         const element = document.createElement("div")
         element.dataset.uid = message.uid
         element.dataset.color = message.color
@@ -64,15 +73,15 @@ class MessageListElement extends HTMLElement {
         element.dataset.message = message.message
 
         element.classList.add("message")
-        if(!this.messages.length){
+        if (!this.messages.length) {
             element.classList.add("switch-user")
-        }else if (this.messages[this.messages.length-1].user_uid != message.user_uid){
+        } else if (this.messages[this.messages.length - 1].user_uid != message.user_uid) {
             element.classList.add("switch-user")
         }
         const avatar = document.createElement("div")
         avatar.classList.add("avatar")
         avatar.style.backgroundColor = message.color
-        avatar.style.color= "black"
+        avatar.style.color = "black"
         avatar.innerText = message.user_nick[0]
         const messageContent = document.createElement("div")
         messageContent.classList.add("message-content")
@@ -82,7 +91,7 @@ class MessageListElement extends HTMLElement {
         author.textContent = message.user_nick
         const text = document.createElement("div")
         text.classList.add("text")
-        if(message.html)
+        if (message.html)
             text.innerHTML = message.html
         const time = document.createElement("div")
         time.classList.add("time")
@@ -101,7 +110,7 @@ class MessageListElement extends HTMLElement {
 
         return element
     }
-    addMessage(message){
+    addMessage(message) {
 
         const obj = new models.Message(
             message.uid,
@@ -120,14 +129,14 @@ class MessageListElement extends HTMLElement {
         const me = this
 
         this.messageEventSchedule.delay(() => {
-            me.dispatchEvent(new CustomEvent("message", {detail:obj,bubbles:true}))
+            me.dispatchEvent(new CustomEvent("message", { detail: obj, bubbles: true }))
 
         })
 
 
         return obj
     }
-    scrollBottom(){
+    scrollBottom() {
         this.container.scrollTop = this.container.scrollHeight;
     }
     connectedCallback() {
@@ -146,17 +155,17 @@ class MessageListElement extends HTMLElement {
         app.addEventListener(this.channel_uid, (data) => {
             me.addMessage(data)
         })
-        this.dispatchEvent(new CustomEvent("rendered", {detail:this,bubbles:true}))
+        this.dispatchEvent(new CustomEvent("rendered", { detail: this, bubbles: true }))
 
-        this.timeUpdateInterval = setInterval(()=>{
-            me.messages.forEach((message)=>{
+        this.timeUpdateInterval = setInterval(() => {
+            me.messages.forEach((message) => {
                 const newText = me.timeDescription(message.created_at)
 
-                if(newText != message.element.innerText){
-                message.element.querySelector(".time").innerText = newText
+                if (newText != message.element.innerText) {
+                    message.element.querySelector(".time").innerText = newText
                 }
             })
-        },30000)
+        }, 30000)
 
     }
 }