diff --git a/docs/FORKING.md b/docs/FORKING.md index 57ed1cb3..37d4ee25 100644 --- a/docs/FORKING.md +++ b/docs/FORKING.md @@ -158,6 +158,8 @@ The deployment automatically detects your repository name and sets the correct b ## Supabase Setup +While Supabase env vars are unset, you'll see a yellow "Setup required" banner on every page of the running app. This is intentional — it disappears automatically once `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` are populated. The banner is also dismissible via the × button if you want to focus on non-Supabase features first. + ### 1. Create Supabase Project 1. Go to [supabase.com](https://supabase.com) and create a new project diff --git a/src/components/SetupBanner/SetupBanner.test.tsx b/src/components/SetupBanner/SetupBanner.test.tsx index 6e07c49f..1d6d953b 100644 --- a/src/components/SetupBanner/SetupBanner.test.tsx +++ b/src/components/SetupBanner/SetupBanner.test.tsx @@ -61,10 +61,21 @@ describe('SetupBanner', () => { const link = screen.getByText('View setup guide'); expect(link).toHaveAttribute( 'href', - 'https://github.com/TortoiseWolfe/ScriptHammer#supabase-setup' + 'https://github.com/TortoiseWolfe/ScriptHammer/blob/main/docs/FORKING.md#supabase-setup' ); }); + it('should name both required env vars in default message', () => { + // Fork users seeing the banner need to know exactly which two + // NEXT_PUBLIC_* vars to populate. Pin both names so a future copy + // refactor doesn't drop one. + render(); + expect(screen.getByText(/NEXT_PUBLIC_SUPABASE_URL/)).toBeInTheDocument(); + expect( + screen.getByText(/NEXT_PUBLIC_SUPABASE_ANON_KEY/) + ).toBeInTheDocument(); + }); + it('should render setup guide link with custom URL', () => { render(); diff --git a/src/components/SetupBanner/SetupBanner.tsx b/src/components/SetupBanner/SetupBanner.tsx index f0a56d1c..5597d087 100644 --- a/src/components/SetupBanner/SetupBanner.tsx +++ b/src/components/SetupBanner/SetupBanner.tsx @@ -20,8 +20,8 @@ const STORAGE_KEY = 'supabase_setup_banner_dismissed'; * Auto-detects Supabase configuration status when show prop is not provided. */ export function SetupBanner({ - message = 'Supabase is not configured. Some features may be unavailable.', - docsUrl = 'https://github.com/TortoiseWolfe/ScriptHammer#supabase-setup', + message = 'Supabase is not configured: set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in your .env file.', + docsUrl = 'https://github.com/TortoiseWolfe/ScriptHammer/blob/main/docs/FORKING.md#supabase-setup', show, }: SetupBannerProps) { const [isDismissed, setIsDismissed] = useState(true); // Start hidden to avoid flash