jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(shell): improve onboarding page for empty module state 

Add card background, glow effect, and contextual hint explaining
the empty state. Rename "Get Started" to "Load Sample Data" with
+ icon for clarity.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-11 18:02:07 -07:00
parent 988fc4f893
commit a93d124d4b
1 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
server/shell.ts
View File

@ -1619,11 +1619,16 @@ export function renderOnboarding(opts: OnboardingOptions): string {
const body = `
<div class="onboarding">
<div class="onboarding__card">
<div class="onboarding__glow"></div>
<span class="onboarding__icon">${moduleIcon}</span>
<h1 class="onboarding__title">${escapeHtml(moduleName)}</h1>
<p class="onboarding__desc">${escapeHtml(moduleDescription)}</p>
<p class="onboarding__hint">This app hasn't been used in <strong>${escapeHtml(spaceSlug)}</strong> yet. Load sample data to explore, or jump into the public demo.</p>
<div class="onboarding__ctas">
<a href="${escapeAttr(templateUrl)}" class="onboarding__btn onboarding__btn--primary">Get Started</a>
<a href="${escapeAttr(templateUrl)}" class="onboarding__btn onboarding__btn--primary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M8 3v10M3 8h10"/></svg>
Load Sample Data
</a>
<a href="${escapeAttr(demoUrl)}" class="onboarding__btn onboarding__btn--secondary">Try Demo</a>
</div>
</div>
@ -1646,25 +1651,44 @@ const ONBOARDING_CSS = `
min-height: calc(80vh - 56px); padding: 3rem 1.5rem 2rem;
}
.onboarding__card {
text-align: center; max-width: 520px; width: 100%;
position: relative; text-align: center; max-width: 520px; width: 100%;
padding: 2.5rem 2rem; margin-bottom: 2rem;
background: var(--rs-bg-surface); border: 1px solid var(--rs-border);
border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.onboarding__icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.onboarding__glow {
position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
width: 300px; height: 300px; border-radius: 50%;
background: radial-gradient(circle, rgba(20,184,166,0.08) 0%, transparent 70%);
pointer-events: none;
}
.onboarding__icon { position: relative; font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.onboarding__title {
position: relative;
font-size: 2rem; margin: 0 0 0.75rem; font-weight: 700;
background: var(--rs-gradient-brand);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.onboarding__desc {
position: relative;
font-size: 1.05rem; color: var(--rs-text-secondary);
line-height: 1.6; margin: 0 0 2rem;
line-height: 1.6; margin: 0 0 1rem;
}
.onboarding__hint {
position: relative;
font-size: 0.8125rem; color: var(--rs-text-muted);
line-height: 1.5; margin: 0 0 1.75rem;
}
.onboarding__hint strong { color: var(--rs-text-secondary); font-weight: 600; }
.onboarding__ctas {
position: relative;
display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
}
.onboarding__btn {
display: inline-block; padding: 0.75rem 1.75rem; border-radius: 0.5rem;
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.75rem 1.75rem; border-radius: 0.5rem;
font-size: 0.95rem; font-weight: 600; text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}