chat2web frontend: several small adjustments, fixes, refactor

* moving the frontend gfd code into its own file
* refactoring the rest of the js code
* new "more messages"/scroll indicator
* autoscroll fixes in both javascript and css
* adjustments to mobile layout to use space more effectively
* make sure view keeps being scrolled to bottom on viewport changes
  (mobile keyboard show/hide)

ChatTwo/Http/static/start.css

@@ -120,17 +120,6 @@ section#messages {
         height: 100%;
         overflow-y: scroll;
         scrollbar-color: var(--fg-scrollbar) var(--bg);
-
-        &.more-messages::before {
-            content: '';
-            position: absolute;
-            bottom: -20px;
-            left: 100px;
-            width: calc(100% - 200px);
-            height: 200px;
-            background-image: radial-gradient(50% 20% at 50% 100%, #60a0ff40, transparent);
-            pointer-events: none;
-        }
     }
 
     ol {
@@ -152,6 +141,22 @@ section#messages {
             white-space: pre-wrap;
         }
     }
+
+    #more-messages-indicator {
+        position: absolute;
+        display: none;
+        right: 30px;
+        bottom: 0;
+        pointer-events: none;
+
+        svg {
+            filter: drop-shadow(0 0 5px #60a0ff) drop-shadow(0 0 15px #60a0ff);
+        }
+    }
+
+    &.more-messages #more-messages-indicator {
+        display: block;
+    }
 }
 
 #timestamp-width-probe {
@@ -259,9 +264,14 @@ section#input {
             position: absolute;
             top: -1.2em;
             left: 23px;
+            max-width: 100%;
+            overflow: hidden;
             font-size: 1.1rem;
             font-weight: 550;
+            white-space: nowrap;
+            text-overflow: ellipsis;
             pointer-events: none;
+
         }
     }
 }
@@ -297,6 +307,7 @@ section#input {
         top: 0;
         left: 0;
         width: 2rem;
+        height: 2rem;
         transform: translateY(-50%);
         pointer-events: none;
     }
@@ -308,11 +319,27 @@ section#input {
         padding: 0;
     }
 
-    body > main {
+    body > main.chat {
         border-radius: 0;
         box-shadow: none;
     }
 
+    section#messages {
+        font-size: 0.9rem;
+
+        li {
+            align-items: baseline;
+
+            .timestamp {
+                font-size: 0.8rem;
+            }
+        }
+    }
+
+    #timestamp-width-probe {
+        font-size: 0.8rem;
+    }
+
     section#input {
         button {
             max-width: 0;
@@ -325,5 +352,19 @@ section#input {
             left: 50%;
             transform: translateX(-50%) translateY(-50%);
         }
+
+        .input-container #channel-hint {
+            font-size: 0.9rem;
+        }
+    }
+
+    .gfd-icon { zoom: 0.65; }
+    .emote-icon {
+        width: 1.5rem;
+
+        img {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
     }
 }