Update static/index.html

static/index.html

@@ -156,9 +156,14 @@
                     </div>
                 </div>
             </div>
-            <button id="scroll-bottom-btn" class="scroll-bottom-btn hidden">
-                <i class="fas fa-chevron-down"></i>
-            </button>
+<button id="scroll-bottom-btn" class="scroll-bottom-btn hidden">
+    <i class="fas fa-chevron-down"></i>
+</button>
+<div id="latest-message-bar" class="latest-message-bar hidden">
+    <div class="lmb-avatar" id="lmb-avatar"></div>
+    <span class="lmb-name" id="lmb-name"></span>
+    <span class="lmb-text" id="lmb-text"></span>
+</div>
         </div>
 
         <div id="typing-indicator" class="typing-indicator hidden">
@@ -324,10 +329,42 @@
                             </div>
                         </div>
                     </div>
-                </section>
-
-                <section class="settings-section">
-                    <h3>About</h3>
+</section>
+<section class="settings-section">
+    <h3>Behaviour</h3>
+    <div class="settings-toggle-row">
+        <div>
+            <label for="toggle-autoscroll">Auto-scroll to bottom</label>
+            <div class="toggle-hint">Automatically scroll down when new messages arrive</div>
+        </div>
+        <label class="toggle-switch">
+            <input type="checkbox" id="toggle-autoscroll">
+            <span class="toggle-slider"></span>
+        </label>
+    </div>
+    <div class="settings-toggle-row">
+        <div>
+            <label for="toggle-scroll-btn">Show scroll-to-bottom button</label>
+            <div class="toggle-hint">Show arrow button when not at bottom</div>
+        </div>
+        <label class="toggle-switch">
+            <input type="checkbox" id="toggle-scroll-btn" checked>
+            <span class="toggle-slider"></span>
+        </label>
+    </div>
+    <div class="settings-toggle-row">
+        <div>
+            <label for="toggle-latest-bar">Show latest message bar</label>
+            <div class="toggle-hint">Show new message preview when scrolled up</div>
+        </div>
+        <label class="toggle-switch">
+            <input type="checkbox" id="toggle-latest-bar" checked>
+            <span class="toggle-slider"></span>
+        </label>
+    </div>
+</section>
+<section class="settings-section">
+    <h3>About</h3>
                     <div class="about-info">
                         <div class="about-row">
                             <span>Version</span>