Add dismiss button to progress widget completion state

Shows an × button in the top-right of the completion card so users can
permanently hide the widget once they've seen the success message. Dismissal
is stored in localStorage (same pattern as the collapse state) so it persists
across page loads without requiring a DB migration. The widget hides itself
on the next load before any layout is shown, avoiding a flash.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-28 21:37:53 -04:00
parent 45441c1d07
commit 73df72ab97
2 changed files with 36 additions and 11 deletions
@@ -19,13 +19,20 @@
<div id="shopProgressBody"> <div id="shopProgressBody">
@if (Model.AllDone) @if (Model.AllDone)
{ {
<div class="px-4 py-4 text-center"> <div class="px-4 py-4 d-flex align-items-center justify-content-between gap-3">
<div>
<div class="fw-semibold mb-1" style="font-size:1rem;color:var(--pcl-ink);">Your shop is fully set up 🎉</div> <div class="fw-semibold mb-1" style="font-size:1rem;color:var(--pcl-ink);">Your shop is fully set up 🎉</div>
<div class="text-muted mb-3" style="font-size:0.85rem;">You're ready to run everything from here.</div> <div class="text-muted mb-3" style="font-size:0.85rem;">You're ready to run everything from here.</div>
<a href="@Url.Action("Create", "Jobs")" class="btn btn-primary btn-sm"> <a href="@Url.Action("Create", "Jobs")" class="btn btn-primary btn-sm">
Create job <i class="bi bi-arrow-right ms-1"></i> Create job <i class="bi bi-arrow-right ms-1"></i>
</a> </a>
</div> </div>
<button id="shopProgressDismiss" type="button"
class="btn btn-link btn-sm text-muted p-0 flex-shrink-0 align-self-start"
title="Dismiss" style="font-size:1.1rem;line-height:1;">
<i class="bi bi-x-lg"></i>
</button>
</div>
} }
else else
{ {
@@ -1,8 +1,17 @@
(function () { (function () {
var STORAGE_KEY = 'shopProgressCollapsed'; var STORAGE_KEY = 'shopProgressCollapsed';
var DISMISSED_KEY = 'shopProgressDismissed';
var widget = document.getElementById('shopProgressWidget'); var widget = document.getElementById('shopProgressWidget');
if (!widget) return; if (!widget) return;
// Hide permanently if user dismissed the completion state
try {
if (localStorage.getItem(DISMISSED_KEY) === '1') {
widget.style.display = 'none';
return;
}
} catch (e) { }
var body = document.getElementById('shopProgressBody'); var body = document.getElementById('shopProgressBody');
var toggle = document.getElementById('shopProgressToggle'); var toggle = document.getElementById('shopProgressToggle');
var chevron = document.getElementById('shopProgressChevron'); var chevron = document.getElementById('shopProgressChevron');
@@ -14,7 +23,7 @@
try { localStorage.setItem(STORAGE_KEY, collapsed ? '1' : '0'); } catch (e) { } try { localStorage.setItem(STORAGE_KEY, collapsed ? '1' : '0'); } catch (e) { }
} }
// Restore on load // Restore collapse state on load
try { try {
if (localStorage.getItem(STORAGE_KEY) === '1') setCollapsed(true); if (localStorage.getItem(STORAGE_KEY) === '1') setCollapsed(true);
} catch (e) { } } catch (e) { }
@@ -22,4 +31,13 @@
toggle.addEventListener('click', function () { toggle.addEventListener('click', function () {
setCollapsed(body.style.display === 'none' ? false : true); setCollapsed(body.style.display === 'none' ? false : true);
}); });
// Dismiss button — completion state only
var dismiss = document.getElementById('shopProgressDismiss');
if (dismiss) {
dismiss.addEventListener('click', function () {
widget.style.display = 'none';
try { localStorage.setItem(DISMISSED_KEY, '1'); } catch (e) { }
});
}
}()); }());