recognition: seed billboard-recognition applet 4×4; vertical title link; placement in billboard grid

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/apps/applets/migrations/0010_recognition_applet.py

@@ -0,0 +1,25 @@
+from django.db import migrations
+
+
+def seed_recognition_applet(apps, schema_editor):
+    Applet = apps.get_model("applets", "Applet")
+    Applet.objects.get_or_create(
+        slug="billboard-recognition",
+        defaults={
+            "name": "Recognition",
+            "grid_cols": 4,
+            "grid_rows": 4,
+            "context": "billboard",
+        },
+    )
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("applets", "0009_my_sky_applet"),
+    ]
+
+    operations = [
+        migrations.RunPython(seed_recognition_applet, migrations.RunPython.noop),
+    ]

src/static_src/scss/_billboard.scss

@@ -87,17 +87,20 @@ body.page-billscroll {
 }
 
 // ── Billboard applet placement ─────────────────────────────────────────────
-// Explicit placement: My Scrolls + Contacts stack left, Most Recent fills right.
+// Left column (4-wide): My Scrolls → Contacts → Recognition stacked.
+// Right column (8-wide): Most Recent spans full height.
 // Portrait override (container query) restores stacked full-width layout.
 
 #id_billboard_applets_container {
-    #id_applet_billboard_my_scrolls  { grid-column: 1 / span 4; grid-row: 1 / span 3; }
+    #id_applet_billboard_my_scrolls  { grid-column: 1 / span 4; grid-row:  1 / span 3; }
-    #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row: 4 / span 3; }
+    #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row:  4 / span 3; }
-    #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row: 1 / span 6; }
+    #id_applet_billboard_recognition { grid-column: 1 / span 4; grid-row:  7 / span 4; }
+    #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row:  1 / span 10; }
 
     @container (max-width: 550px) {
         #id_applet_billboard_my_scrolls,
         #id_applet_billboard_my_contacts,
+        #id_applet_billboard_recognition,
         #id_applet_billboard_most_recent {
             grid-column: 1 / span 12;
             grid-row: span var(--applet-rows, 3);
@@ -105,6 +108,20 @@ body.page-billscroll {
     }
 }
 
+// ── Recognition applet — vertical title ───────────────────────────────────
+
+#id_applet_billboard_recognition {
+    h2 {
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        margin: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
 // ── Most Recent applet — scrollable drama feed ─────────────────────────────
 
 #id_applet_billboard_most_recent {

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

@@ -0,0 +1,6 @@
+<section
+    id="id_applet_billboard_recognition"
+    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
+>
+    <h2><a href="/billboard/recognition/">Recognition</a></h2>
+</section>