feat(FN-2154): show dismissible setup warning on project page

- Render SetupWarningBanner from App only in project view when setup readiness reports warnings
- Persist dismiss state per project via scoped storage and restore it when switching projects
- Add optional dismiss action to SetupWarningBanner with close button UI and responsive styles
- Remove inline banner from QuickEntryBox and add tests covering dismiss button behavior
This commit is contained in:
Fusion
2026-04-19 13:49:18 -07:00
committed by gsxdsm
parent 1e8bb8345d
commit b052f17bd1
5 changed files with 174 additions and 17 deletions

View File

@@ -1,3 +1,5 @@
import { X } from "lucide-react";
interface SetupWarningBannerProps {
/** Whether an AI provider is connected */
hasAiProvider: boolean;
@@ -5,6 +7,8 @@ interface SetupWarningBannerProps {
hasGithub: boolean;
/** Optional: compact mode for inline use (QuickEntryBox) */
compact?: boolean;
/** Optional callback to dismiss the banner */
onDismiss?: () => void;
}
interface WarningItem {
@@ -17,21 +21,34 @@ export function SetupWarningBanner({
hasAiProvider,
hasGithub,
compact = false,
onDismiss,
}: SetupWarningBannerProps) {
if (hasAiProvider && hasGithub) {
return null;
}
const dismissButton = onDismiss ? (
<button
type="button"
className="setup-warning-banner__dismiss touch-target"
aria-label="Dismiss setup warning"
onClick={onDismiss}
>
<X size={16} aria-hidden="true" />
</button>
) : null;
if (compact) {
return (
<div
className="setup-warning-banner setup-warning-banner--compact"
className={`setup-warning-banner setup-warning-banner--compact${onDismiss ? " setup-warning-banner--dismissible" : ""}`}
role="status"
aria-live="polite"
>
<p className="setup-warning-banner__compact-text">
Setup incomplete AI and/or GitHub features will be limited.
</p>
{dismissButton}
</div>
);
}
@@ -57,7 +74,12 @@ export function SetupWarningBanner({
}
return (
<div className="setup-warning-banner" role="status" aria-live="polite">
<div
className={`setup-warning-banner${onDismiss ? " setup-warning-banner--dismissible" : ""}`}
role="status"
aria-live="polite"
>
{dismissButton}
{warningItems.map((warning) => (
<div key={warning.key} className="setup-warning-banner__item">
<strong className="setup-warning-banner__title">{warning.title}</strong>