v0.28.78

Perf: improve messages scrolling using debouncing

css/main.css

@@ -1456,7 +1456,7 @@ sm-button.danger {
 
 #chat_footer .flex {
   align-items: flex-end;
-  padding: 1rem 1rem 1rem 0.4rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
 #chat_footer sm-textarea::part(textarea) {
   padding-right: 3rem;
@@ -1526,6 +1526,8 @@ sm-button.danger {
   --input-border-color: rgba(var(--text-color), 0.6);
   --input-padding: 0.4rem 1rem;
   --outline-color: var(--accent-color);
+  --input-font-color: var(--text-color);
+  --input-placeholder-color: rgba(var(--text-color), 0.6);
   user-select: none;
   width: 100%;
   max-height: 40vh;
@@ -1615,6 +1617,9 @@ sm-panel {
 .has-bg-image .date-card {
   background: rgba(var(--foreground-color), 0.6);
 }
+.has-bg-image .received::after {
+  border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent;
+}
 .has-bg-image #emoji_picker {
   --background: rgba(var(--foreground-color), 0.6);
 }
@@ -1859,6 +1864,7 @@ sm-panel {
   #settings_page #settings_header {
     position: sticky;
     top: 0;
+    z-index: 1;
     padding: 1rem 1.5rem;
     margin-bottom: 0.5rem;
     background: rgba(var(--foreground-color), 1);
@@ -1997,7 +2003,7 @@ sm-panel {
 }
 @media only screen and (min-width: 1080px) {
   #chat #messages_container {
-    padding: 1rem 5rem;
+    padding: 1rem 4rem;
   }
 }
 @media only screen and (min-width: 1280px) {

css/main.scss

@@ -1373,7 +1373,7 @@ sm-button.danger{
 #chat_footer{
     .flex{
         align-items: flex-end;
-        padding: 1rem 1rem 1rem 0.4rem;
+        padding: 0.5rem 1rem 0.5rem 0.5rem;
     }
     sm-textarea::part(textarea){
         padding-right: 3rem;
@@ -1438,6 +1438,8 @@ sm-button.danger{
     --input-border-color: rgba(var(--text-color), 0.6);
     --input-padding: 0.4rem 1rem;
     --outline-color: var(--accent-color);
+    --input-font-color: var(--text-color);
+    --input-placeholder-color: rgba(var(--text-color), 0.6);
     user-select: none;
     width: 100%;
     max-height: 40vh;
@@ -1521,6 +1523,9 @@ sm-panel{
     .date-card{
         background: rgba(var(--foreground-color), 0.6);
     }
+    .received::after{
+        border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent;
+    } 
     #emoji_picker{
         --background: rgba(var(--foreground-color), 0.6);
     }
@@ -1757,6 +1762,7 @@ sm-panel{
         #settings_header{
             position: sticky;
             top: 0;
+            z-index: 1;
             padding: 1rem 1.5rem;
             margin-bottom: 0.5rem;
             background: rgba(var(--foreground-color), 1);
@@ -1882,7 +1888,7 @@ sm-panel{
 @media only screen and (min-width: 1080px){
     #chat{
         #messages_container{
-            padding: 1rem 5rem;
+            padding: 1rem 4rem;
         }
     }
 }

index.html

@@ -1874,17 +1874,23 @@
         })
 
         const chatScrollInfo = {};
+        let debounceTimer
         getRef('chat_middle').addEventListener('scroll', function() {
-            chatScrollInfo['scrollTop'] = this.scrollTop
+            if(debounceTimer){
-            chatScrollInfo['scrollheight'] = this.scrollHeight
+                window.clearTimeout(debounceTimer)
-            if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
-                chatScrollInfo['isScrolledUp'] = true
-                getRef('scroll_to_bottom').classList.add('no-transformations')
-            }
-            else{
-                chatScrollInfo['isScrolledUp'] = false
-                getRef('scroll_to_bottom').classList.remove('no-transformations', 'new-message')
             }
+            debounceTimer = setTimeout(e => {
+                chatScrollInfo['scrollTop'] = this.scrollTop
+                chatScrollInfo['scrollheight'] = this.scrollHeight
+                if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
+                    chatScrollInfo['isScrolledUp'] = true
+                    getRef('scroll_to_bottom').classList.add('no-transformations')
+                }
+                else{
+                    chatScrollInfo['isScrolledUp'] = false
+                    getRef('scroll_to_bottom').classList.remove('no-transformations', 'new-message')
+                }
+            }, 100)
         }, {passive: true})
 
         getRef('send_mail_to').addEventListener('input', function() {