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/static_src/scss/_applets.scss

@@ -205,6 +205,7 @@
     }
 }
 
-#id_applets_container      { @extend %applets-grid; }
-#id_game_applets_container { @extend %applets-grid; }
-#id_wallet_applets_container { @extend %applets-grid; }
+#id_applets_container           { @extend %applets-grid; }
+#id_game_applets_container      { @extend %applets-grid; }
+#id_wallet_applets_container    { @extend %applets-grid; }
+#id_billboard_applets_container { @extend %applets-grid; }

src/static_src/scss/_billboard.scss

@@ -1,8 +1,21 @@
-html:has(body.page-billboard) {
+// ── Shared aperture fill for both billboard pages ──────────────────────────
+
+%billboard-page-base {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+    position: relative;
+    padding: 0.75rem;
+}
+
+html:has(body.page-billboard),
+html:has(body.page-billscroll) {
     overflow: hidden;
 }
 
-body.page-billboard {
+body.page-billboard,
+body.page-billscroll {
     overflow: hidden;
 
     .container {
@@ -19,10 +32,61 @@ body.page-billboard {
     }
 }
 
+// ── Billboard page (three-applet grid) ─────────────────────────────────────
+
 .billboard-page {
-    flex: 1;
-    min-width: 0;
-    overflow-y: auto;
-    position: relative;
-    padding: 0.75rem;
+    @extend %billboard-page-base;
+
+    // Gear btn positioning mirrors dashboard/wallet pattern
+    > .gear-btn {
+        position: fixed;
+        bottom: calc(var(--footer-w, 4rem) + 0.75rem);
+        right: calc(var(--footer-w, 4rem) + 0.75rem);
+        z-index: 10;
+    }
+}
+
+// ── Billscroll page (single full-aperture applet) ──────────────────────────
+
+.billscroll-page {
+    @extend %billboard-page-base;
+    display: flex;
+    flex-direction: column;
+    padding: 0.75rem;
+
+    // The single scroll applet stretches to fill the remaining aperture
+    .applet-billboard-scroll {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        // Override grid-row span — this applet fills height via flex, not grid rows
+        grid-row: unset;
+
+        #id_drama_scroll {
+            flex: 1;
+            min-height: 0;
+            overflow-y: auto;
+        }
+    }
+}
+
+// ── My Scrolls list ────────────────────────────────────────────────────────
+
+#id_applet_billboard_my_scrolls {
+    .scroll-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        overflow-y: auto;
+
+        li {
+            padding: 0.25rem 0;
+            border-bottom: 1px solid rgba(var(--priUser), 0.15);
+
+            &:last-child { border-bottom: none; }
+
+            a { text-decoration: none; }
+        }
+    }
 }