billscroll should now remember user's position across devices

src/templates/apps/billboard/_partials/_applet-billboard-scroll.html

@@ -2,3 +2,30 @@
     <h2>{{ room.name }}</h2>
     {% include "core/_partials/_scroll.html" %}
 </section>
+<script>
+(function() {
+    var scroll = document.getElementById('id_drama_scroll');
+    if (!scroll) return;
+
+    // Restore saved position
+    scroll.scrollTop = {{ scroll_position }};
+
+    // Debounced save on scroll
+    var saveTimer;
+    scroll.addEventListener('scroll', function() {
+        clearTimeout(saveTimer);
+        saveTimer = setTimeout(function() {
+            var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
+            var token = csrfToken ? csrfToken.value : '';
+            fetch("{% url 'billboard:save_scroll_position' room.id %}", {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-CSRFToken': token,
+                },
+                body: 'position=' + Math.round(scroll.scrollTop),
+            });
+        }, 800);
+    });
+})();
+</script>

src/templates/apps/billboard/room_scroll.html

@@ -4,6 +4,7 @@
 {% block header_text %}<span>Bill</span>scroll{% endblock header_text %}
 
 {% block content %}
+{% csrf_token %}
 <div class="billscroll-page">
     {% include "apps/billboard/_partials/_applet-billboard-scroll.html" %}
 </div>

src/templates/core/_partials/_scroll.html

@@ -1,5 +1,5 @@
 {% load lyric_extras %}
-<section id="id_drama_scroll" class="drama-scroll">
+<section id="id_drama_scroll" class="drama-scroll" data-scroll-position="{{ scroll_position|default:0 }}">
     {% for event in events %}
         <div class="drama-event {% if event.actor == viewer %}mine{% else %}theirs{% endif %}">
             <span class="event-body">