feat(FN-1943): add post-onboarding setup recommendations panel

- Add a PostOnboardingRecommendations component that detects incomplete AI provider, default model, and GitHub setup and offers direct actions
- Persist post-onboarding dismissal state in model-onboarding-state with new helpers for dismiss, check, and clear flows
- Integrate recommendations into App rendering so they appear after completed onboarding when resume onboarding is not active
- Add dashboard styles and focused tests for recommendation rendering/actions plus onboarding dismissal state coverage
- Add a changeset for @gsxdsm/fusion patch release describing the post-onboarding recommendations
This commit is contained in:
Fusion
2026-04-17 05:36:02 -07:00
committed by gsxdsm
parent c3661c39e7
commit 24f0bf8d36
7 changed files with 711 additions and 2 deletions

View File

@@ -24758,6 +24758,129 @@ html .column.drag-over * {
}
}
/* === Post-Onboarding Recommendations === */
.post-onboarding-recommendations {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--surface);
border-bottom: var(--btn-border-width) solid var(--border);
border-radius: var(--radius-md);
}
.post-onboarding-recommendations__main {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
min-width: 0;
flex: 1;
}
.post-onboarding-recommendations__icon {
display: flex;
align-items: center;
justify-content: center;
width: calc(var(--space-lg) * 2 + var(--space-xs));
height: calc(var(--space-lg) * 2 + var(--space-xs));
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--primary) 15%, var(--surface));
color: var(--primary);
flex-shrink: 0;
}
.post-onboarding-recommendations__content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.post-onboarding-recommendations__title {
margin: 0;
font-size: calc(var(--space-md) + (var(--space-xs) / 2));
font-weight: 600;
color: var(--text);
}
.post-onboarding-recommendations__description {
margin: 0;
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
color: var(--text-muted);
line-height: 1.4;
}
.post-onboarding-recommendations__list {
margin: var(--space-xs) 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.post-onboarding-recommendations__item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}
.post-onboarding-recommendations__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--space-sm) * 2);
height: calc(var(--space-sm) * 2);
color: var(--color-warning);
flex-shrink: 0;
}
.post-onboarding-recommendations__item-text {
display: flex;
flex-direction: column;
gap: calc(var(--space-xs) / 2);
font-size: calc(var(--space-md) + (var(--space-xs) / 4));
color: var(--text-muted);
flex: 1;
min-width: 0;
}
.post-onboarding-recommendations__item-text strong {
color: var(--text);
font-weight: 600;
}
.post-onboarding-recommendations__dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--space-lg) * 2 + var(--space-xs));
height: calc(var(--space-lg) * 2 + var(--space-xs));
border: var(--btn-border-width) solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
flex-shrink: 0;
}
.post-onboarding-recommendations__dismiss:hover {
color: var(--text);
background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.post-onboarding-recommendations__dismiss:focus-visible,
.post-onboarding-recommendations .btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
/* Complete step */
.model-onboarding-complete {
display: flex;
@@ -34835,4 +34958,31 @@ html .column.drag-over * {
.insight-item-actions {
align-self: flex-end;
}
.post-onboarding-recommendations {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
padding: var(--space-md);
}
.post-onboarding-recommendations__main {
width: 100%;
}
.post-onboarding-recommendations__item {
align-items: flex-start;
flex-wrap: wrap;
}
.post-onboarding-recommendations .btn.btn-sm {
margin-left: auto;
min-height: calc(var(--space-lg) * 2 + var(--space-xs));
}
.post-onboarding-recommendations__dismiss {
align-self: flex-end;
min-width: calc(var(--space-lg) * 2 + var(--space-xs));
min-height: calc(var(--space-lg) * 2 + var(--space-xs));
}
}