new applet structure for apps.billboard, incl. My Scrolls, Contacts & Most Recent applets; completely revamped _billboard.scss, tho some styling inconsistencies persist; ensured #id_billboard_applets_container inherited base styles found in _applets.scss; a pair of new migrations in apps.applets to support new applet models & fields; billboard gets its first ITs, new urls & views; pair of new FT classes in FTs.test_billboard

src/templates/apps/billboard/_partials/_applet-billboard-most-recent.html

@@ -0,0 +1,14 @@
+<section
+    id="id_applet_billboard_most_recent"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2>Most Recent</h2>
+    {% if recent_room %}
+        <a href="{% url 'billboard:scroll' recent_room.id %}" class="most-recent-room-link">{{ recent_room.name }}</a>
+        {% with events=recent_events %}
+            {% include "core/_partials/_scroll.html" %}
+        {% endwith %}
+    {% else %}
+        <p><small>No recent activity.</small></p>
+    {% endif %}
+</section>

src/templates/apps/billboard/_partials/_applet-billboard-my-contacts.html

@@ -0,0 +1,7 @@
+<section
+    id="id_applet_billboard_my_contacts"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2>Contacts</h2>
+    <p><small>Coming soon.</small></p>
+</section>

src/templates/apps/billboard/_partials/_applet-billboard-my-scrolls.html

@@ -0,0 +1,15 @@
+<section
+    id="id_applet_billboard_my_scrolls"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2>My Scrolls</h2>
+    <ul class="scroll-list">
+        {% for room in my_rooms %}
+            <li>
+                <a href="{% url 'billboard:scroll' room.id %}">{{ room.name }}</a>
+            </li>
+        {% empty %}
+            <li><small>No scrolls yet.</small></li>
+        {% endfor %}
+    </ul>
+</section>

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

@@ -0,0 +1,4 @@
+<section id="id_applet_billboard_scroll" class="applet-billboard-scroll">
+    <h2>{{ room.name }}</h2>
+    {% include "core/_partials/_scroll.html" %}
+</section>

src/templates/apps/billboard/_partials/_applets.html

@@ -0,0 +1,27 @@
+<div id="id_billboard_applets_container">
+    <div id="id_billboard_applet_menu" style="display:none;">
+        <form
+            hx-post="{% url "billboard:toggle_applets" %}"
+            hx-target="#id_billboard_applets_container"
+            hx-swap="outerHTML"
+        >
+            {% csrf_token %}
+            {% for entry in applets %}
+                <label>
+                    <input
+                        type="checkbox"
+                        name="applets"
+                        value="{{ entry.applet.slug }}"
+                        {% if entry.visible %}checked{% endif %}
+                    >
+                    {{ entry.applet.name }}
+                </label>
+            {% endfor %}
+            <div class="menu-btns">
+                <button type="submit" class="btn btn-confirm">OK</button>
+                <button type="button" class="btn btn-cancel applet-menu-cancel">NVM</button>
+            </div>
+        </form>
+    </div>
+    {% include "apps/applets/_partials/_applets.html" %}
+</div>

src/templates/apps/billboard/billboard.html

@@ -5,15 +5,7 @@
 
 {% block content %}
 <div class="billboard-page">
-    <h2>My Scrolls</h2>
-    <ul class="game-list">
-        {% for room in my_rooms %}
-            <li>
-                <a href="{% url 'billboard:scroll' room.id %}">{{ room.name }}</a>
-            </li>
-        {% empty %}
-            <li><small>No scrolls yet.</small></li>
-        {% endfor %}
-    </ul>
+    {% include "apps/applets/_partials/_gear.html" with menu_id="id_billboard_applet_menu" %}
+    {% include "apps/billboard/_partials/_applets.html" %}
 </div>
 {% endblock %}

src/templates/apps/billboard/room_scroll.html

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