sky.html: DEL btn at wheel center; async SAVE SKY transitions into saved state without reload; pre-save hides wheel-col so form+SAVE SKY stay centered — TDD

DEL btn (.btn-danger, "Forget sky?" data-confirm wired to the global #id_guard_portal) sits absolutely centered inside .sky-wheel-col; OK submits a POST to the new sky_delete view, which clears every sky_* field on the User model & redirects back to /dashboard/sky/.

The sky.html aperture is now uniform across saved/unsaved: form-col is always flex-column align-center justify-center so the fields + SAVE SKY pair sits visually centered. body.sky-saved adds *only* the snap-binary scroll layer (scroll-snap-type:y, modal-body display:contents, cols min-height:100% scroll-snap-align:start, wheel-col aspect-ratio cap released, form-col flex:0 0 auto so the snap basis wins) — the column-stacking is no longer gated.

Async save: SAVE SKY's success branch now calls _activateSavedState(), which adds body.sky-saved, draws the wheel from _lastChartData, pins overlay.scrollTop to the form section's offsetTop, then runs the existing _scrollApertureToTop ease-out so the wheel reveals from above instead of replacing the form with a hard cut. The wheel preview that previously redrew during typing is now gated on _savedSky — pre-first-save typing fetches the chart data (so SAVE SKY enables) but does not render the wheel, mirroring the My Sky applet's "no wheel until saved" UX. The in-room PICK SKY overlay (_sky_overlay.html) still previews live, deliberately untouched.

Pre-save the wheel-col is hidden via `body:not(.sky-saved) .sky-page .sky-wheel-col { display: none }`, so the empty SVG can't shunt the form below the fold (& the DEL btn rides the same selector since it lives inside .sky-wheel-col).

Tests: SkyDeleteTest IT class (5: clears fields, redirects, 405 on GET, login required, preserves unrelated user fields). MySkyDeleteFlowTest FT class (3: DEL btn visibility gated on sky data, NVM dismisses w. data intact, OK clears + reverts body class). MySkyAsyncSaveTest FT (1: fresh user → SAVE SKY → body picks up sky-saved, wheel SVG populates, DEL btn becomes visible — all without a page reload). All 13 sky FTs + sky ITs green; existing MySkyApertureSnapScrollTest & MySkyTimezoneRefreshTest still pass.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/templates/apps/dashboard/sky.html

@@ -79,9 +79,15 @@
             </button>
         </div>
 
-        {# ── Wheel column ────────────────────────────────────────────────── #}
+        {# Wheel column always renders so async SAVE SKY can populate it without a #}
+        {# refresh — visibility (incl. the DEL btn) is gated by body.sky-saved.    #}
         <div class="sky-wheel-col">
             <svg id="id_sky_svg" class="sky-svg"></svg>
+            <form id="id_sky_delete_form" method="POST" action="{% url 'sky_delete' %}">
+                {% csrf_token %}
+                <button type="submit" class="btn btn-danger"
+                        data-confirm="Forget sky?">DEL</button>
+            </form>
         </div>
 
     </div>{# /.sky-modal-body #}
@@ -265,10 +271,17 @@
         }
         setStatus('');
         confirmBtn.disabled = false;
-        if (svgEl.querySelector('*')) {
-          SkyWheel.redraw(data);
-        } else {
-          SkyWheel.draw(svgEl, data);
+        // Only redraw the wheel when a saved sky already exists on the page —
+        // pre-first-save we suppress the live wheel preview so it doesn't
+        // shunt the form (and SAVE SKY) below the fold. Mirrors the My Sky
+        // applet's "no wheel until saved" UX. The in-room PICK SKY overlay
+        // intentionally still previews live.
+        if (_savedSky) {
+          if (svgEl.querySelector('*')) {
+            SkyWheel.redraw(data);
+          } else {
+            SkyWheel.draw(svgEl, data);
+          }
         }
       })
       .catch(err => {
@@ -307,7 +320,7 @@
       .then(data => {
         setStatus('Sky saved!');
         Note.handleSaveResponse(data);
-        _scrollApertureToTop();
+        _activateSavedState();
       })
       .catch(err => {
         setStatus(`Save failed: ${err.message}`, 'error');
@@ -315,6 +328,31 @@
       });
   });
 
+  // ── Async save activation ──────────────────────────────────────────────
+  // After SAVE SKY succeeds we transition into the saved state without a page
+  // refresh: add body.sky-saved (reveals the wheel-col + DEL btn, switches
+  // the aperture into snap-binary mode), draw the wheel from _lastChartData,
+  // and pin the aperture to the form section so _scrollApertureToTop()'s
+  // ease-out reveals the wheel sliding in from above.
+
+  function _activateSavedState() {
+    if (!_lastChartData) return;
+    const wasAlreadySaved = document.body.classList.contains('sky-saved');
+    document.body.classList.add('sky-saved');
+    if (svgEl.querySelector('*')) {
+      SkyWheel.redraw(_lastChartData);
+    } else {
+      SkyWheel.draw(svgEl, _lastChartData);
+    }
+    if (!wasAlreadySaved) {
+      // First-time save: pin scroll to the form section so the wheel reveal
+      // animates in instead of replacing the form with a hard cut.
+      const formCol = document.querySelector('.sky-page .sky-form-col');
+      if (formCol) overlay.scrollTop = formCol.offsetTop;
+    }
+    _scrollApertureToTop();
+  }
+
   // ── Snap-back scroll on save ────────────────────────────────────────────
   // .sky-page is scroll-snap-y-mandatory (post-save). After SAVE SKY the user
   // should land back on the wheel section even if they clicked from the form