Skip to content

Home: Add Sign In CTA, Chat History; fix signed-out generation flow#95

Merged
Jackson57279 merged 4 commits intoopen-lovablefrom
capy/cap-3-b7e88eb1
Sep 11, 2025
Merged

Home: Add Sign In CTA, Chat History; fix signed-out generation flow#95
Jackson57279 merged 4 commits intoopen-lovablefrom
capy/cap-3-b7e88eb1

Conversation

@Jackson57279
Copy link
Owner

@Jackson57279 Jackson57279 commented Sep 11, 2025

Summary

Adds a clear Sign In path on the home page, fixes the signed-out generation flow, and surfaces a chat/project history using Convex so users can continue work. Clerk and Convex remain integrated via the existing providers and middleware.

Changes

  • Home page
    • Added a prominent Sign In CTA (uses Clerk modal when configured, falls back to /sign-in link otherwise)
    • Toast on submit when signed out now includes a working Clerk Sign In button; preserves the pending submission and resumes automatically after sign-in
    • Inserted a new Chat History section that lists recent projects (Convex chats.getUserChats) with title, updated time, optional screenshot, and Continue link
  • Generation page
    • Redirect to /sign-in only when Clerk keys are present, preventing dead-end navigation in environments without Clerk configured

Files

  • app/page.tsx — add Sign In CTA, upgrade sign-in toast, render
  • app/generation/page.tsx — guard redirect behind hasClerkKeys()
  • components/app/(home)/sections/chat-history/ChatHistory.tsx — new Convex-backed chat list

Why

  • Users reported “no sign in button” and “not generating” behavior. The flow was blocked by sign-in requirements without a clear entry point. This change makes the auth path explicit and allows pending submissions to continue post sign-in. It also brings project continuity to the home page via chat history.

Impact

  • Better first-run and signed-out UX
  • Fewer dead-ends when Clerk isn’t configured yet
  • Immediate value on home via recent projects

How to test

  1. Signed out, with Clerk keys set:
    • Visit home → see Sign In button in hero and in header.
    • Type a URL and submit → toast shows Sign In button → click it (modal opens) → after sign in, generation continues automatically.
  2. Without Clerk keys set:
    • Home and generation pages work without redirecting to /sign-in.
  3. With existing Convex chats:
    • Home page shows project cards with title/screenshot/updated time.
    • Click Continue → opens builder, passing sandbox when available.

Configuration

Ensure these env vars are configured in your deployment:

  • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  • CLERK_JWT_ISSUER_DOMAIN (used by convex/auth.config.js)
  • NEXT_PUBLIC_CONVEX_URL

Notes

  • Clerk + Convex integration already wrapped by providers; this PR only wires UX to them.
  • No breaking API changes; UI additions are self-contained.

₍ᐢ•(ܫ)•ᐢ₎ Generated by Capy (view task)

Summary by CodeRabbit

  • New Features

    • Added ChatHistory on the home page with recent projects, loading/empty states, and “Continue”/“Open preview” actions.
    • Sign-in modal prompts appear when actions require authentication.
  • Improvements

    • Smarter auth flow: redirect/sign-in only when authentication is configured.
  • Style

    • Updated Sign In button to a compact orange design for better visual consistency.
  • Chores

    • Introduced CI to lint and typecheck PRs.
    • Added PR size labeling workflow.

…r generation. Adds Clerk modal on home/Toast, guards generation redirect behind keys, and surfaces Convex user chats as project history.
@Jackson57279 Jackson57279 added the capy PR created by Capy label Sep 11, 2025
@vercel
Copy link

vercel bot commented Sep 11, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
zapdev Ready Ready Preview Comment Sep 11, 2025 8:58pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 11, 2025

Warning

Rate limit exceeded

@otdoges has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 50 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 5ecd3d3 and 92cff99.

📒 Files selected for processing (6)
  • .github/workflows/ci.yml (1 hunks)
  • .github/workflows/pr-size.yml (1 hunks)
  • app/generation/page.tsx (2 hunks)
  • app/page.tsx (3 hunks)
  • components/app/(home)/sections/chat-history/ChatHistory.tsx (1 hunks)
  • components/shared/header/UserAuth/UserAuth.tsx (2 hunks)

Walkthrough

Adds CI workflows for linting/typechecking and PR size labeling. Introduces Clerk-aware guards: conditionally redirect on generation page, adds ChatHistory section to home page with signed-in flow, and updates sign-in button styles. New ChatHistory component fetches and displays recent projects with links. Minor UI adjustments and auth prompts integrated.

Changes

Cohort / File(s) Summary
CI: Lint & Typecheck
.github/workflows/ci.yml
New GitHub Actions workflow running Bun-based install, ESLint, and TypeScript typecheck on PR events.
CI: PR Size Labeling
.github/workflows/pr-size.yml
New workflow labeling PRs by size using codelytv/pr-size-labeler with configured thresholds and labels.
Generation Page Auth Guard
app/generation/page.tsx
Imports hasClerkKeys and makes redirect conditional on presence of Clerk keys, not solely sign-in state.
Home Page Updates
app/page.tsx
Adds SignInButton usage for modal sign-in prompts and includes ChatHistory section on the page.
Chat History Feature
components/app/(home)/sections/chat-history/ChatHistory.tsx
New client React component rendering recent projects; Clerk-key guard, signed-out prompt, loading/empty states, list of chat cards with links.
Auth Button Styling
components/shared/header/UserAuth/UserAuth.tsx
Updates sign-in button styles to compact orange variant in header and modal contexts.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Home as Home Page
  participant ChatHistory as ChatHistory
  participant Clerk as Clerk Hooks
  participant API as Chats API

  User->>Home: Visit /
  Home->>ChatHistory: Render component
  ChatHistory->>Clerk: hasClerkKeys() & useSafeUser()
  alt No Clerk keys
    ChatHistory-->>Home: Render null
  else Clerk keys present
    alt User not signed in
      ChatHistory-->>User: Show SignInButton (modal)
    else Signed in
      ChatHistory->>API: getUserChats(limit=10)
      alt Loading
        ChatHistory-->>User: "Loading your projects..."
      else No chats
        ChatHistory-->>User: "No projects yet" + CTA
      else Chats available
        ChatHistory-->>User: Grid of project cards (Continue/Open preview)
      end
    end
  end
Loading
sequenceDiagram
  autonumber
  actor User
  participant Gen as /generation Page
  participant Clerk as Clerk Hooks

  User->>Gen: Navigate to /generation
  Gen->>Clerk: hasClerkKeys() & useSafeUser()
  alt Clerk keys present AND user not signed in
    Gen-->>User: Redirect to sign-in
  else Otherwise
    Gen-->>User: Render sandbox page
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • Scout/enhanced ai chat gui #66 — Also introduces conditional behavior based on presence of Clerk publishable key, aligning with this PR’s hasClerkKeys() gating and auth UI guards.

Suggested reviewers

  • dogesman098

Poem

A rabbit taps the CI drum—bun bun bun!
Labels size the PR crumb by crumb.
Keys in paw, I guard the gate,
Sign-in pops—no need to wait.
Chats now bloom in tidy rows,
Orange buttons—off it goes!
Hippity hop, to /generation we nose.

✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch capy/cap-3-b7e88eb1

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

…below-hero CTA so primary Sign In lives in header corner; update toast and ChatHistory sign-in styles.
@Jackson57279 Jackson57279 merged commit dd7e1d7 into open-lovable Sep 11, 2025
4 of 6 checks passed
@Jackson57279 Jackson57279 deleted the capy/cap-3-b7e88eb1 branch September 11, 2025 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

capy PR created by Capy

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant