Redesign proof page with marketing content and CTAs#452
Redesign proof page with marketing content and CTAs#452
Conversation
Add data flow diagram, privacy spectrum comparison cards, security team facts section, FAQ, contact modal with copyable fields, and AI agent introduction modal with llms-full.txt integration.
Deploying maple with
|
| Latest commit: |
c2909b4
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6d459e9b.maple-ca8.pages.dev |
| Branch Preview URL: | https://feature-update-proof-page.maple-ca8.pages.dev |
📝 WalkthroughWalkthroughThis pull request adds comprehensive UI components and content sections to the proof page, including a data flow diagram, interactive modals (contact and agent), feature cards, security facts, and an FAQ section. The layout is restructured to emphasize privacy features and self-verification with improved visual presentation and user interactivity. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| const handleCopy = async () => { | ||
| await navigator.clipboard.writeText(text); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }; |
There was a problem hiding this comment.
🟡 Missing try/catch on navigator.clipboard.writeText causes unhandled rejection
The CopyButton component's handleCopy function at line 256 calls await navigator.clipboard.writeText(text) without any error handling. If the clipboard API throws (e.g., document not focused, permission denied, non-secure context, or on certain mobile browsers), this produces an unhandled promise rejection and the setCopied(true) / setTimeout on lines 257-258 are never reached.
Existing codebase pattern violated
Every other usage of navigator.clipboard.writeText() in the codebase wraps the call in a try/catch:
frontend/src/routes/_auth.chat.$chatId.tsx:27-33— try/catch withconsole.errorfrontend/src/components/UnifiedChat.tsx:162-169— try/catch withconsole.errorfrontend/src/components/apikeys/CreateApiKeyDialog.tsx:82-88— try/catch withconsole.errorfrontend/src/components/GuestCredentialsDialog.tsx:33-39— try/catch withconsole.errorfrontend/src/components/markdown.tsx:17-23— try/catch withconsole.error
The new CopyButton component breaks this established pattern. On browsers/platforms where clipboard access fails, the button will silently break with an unhandled promise rejection instead of gracefully degrading.
Impact: The copy buttons in both the Contact modal and Agent modal (used ~7 times across both modals) will throw unhandled errors on any platform where clipboard access is restricted, causing a poor user experience on the security-focused proof page.
| const handleCopy = async () => { | |
| await navigator.clipboard.writeText(text); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }; | |
| const handleCopy = async () => { | |
| try { | |
| await navigator.clipboard.writeText(text); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| } catch (error) { | |
| console.error("Failed to copy text: ", error); | |
| } | |
| }; |
Was this helpful? React with 👍 or 👎 to provide feedback.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/routes/proof.tsx (1)
255-259: Add error handling for clipboard API.
navigator.clipboard.writeText()can reject if the clipboard API is unavailable or permission is denied. Currently, failures are silently ignored.♻️ Suggested improvement with error handling
const handleCopy = async () => { - await navigator.clipboard.writeText(text); - setCopied(true); - setTimeout(() => setCopied(false), 2000); + try { + await navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { + // Clipboard access denied or unavailable - fail silently or add user feedback + } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/routes/proof.tsx` around lines 255 - 259, The handleCopy function currently calls navigator.clipboard.writeText(text) without handling rejections; wrap the writeText call in a try/catch inside handleCopy, call setCopied(true) only on successful await, and in the catch log or surface the error (e.g., console.error or show a toast) and ensure setCopied(false) is used to clear any state; also consider a fallback behavior (e.g., select-and-execCommand or a user-visible error) when navigator.clipboard is unavailable before calling navigator.clipboard.writeText.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/routes/proof.tsx`:
- Around line 255-259: The handleCopy function currently calls
navigator.clipboard.writeText(text) without handling rejections; wrap the
writeText call in a try/catch inside handleCopy, call setCopied(true) only on
successful await, and in the catch log or surface the error (e.g., console.error
or show a toast) and ensure setCopied(false) is used to clear any state; also
consider a fallback behavior (e.g., select-and-execCommand or a user-visible
error) when navigator.clipboard is unavailable before calling
navigator.clipboard.writeText.
| <div className="flex flex-col gap-4 mt-2"> | ||
| {/* To field */} | ||
| <div className="flex flex-col gap-1.5"> | ||
| <label className="text-sm font-medium text-muted-foreground">To</label> | ||
| <div className="flex items-center justify-between gap-2 px-3 py-2 rounded-md border border-input bg-[hsl(var(--muted))]/50"> | ||
| <span className="text-sm font-mono">{CONTACT_EMAIL}</span> | ||
| <CopyButton text={CONTACT_EMAIL} label="Copy" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Subject field */} | ||
| <div className="flex flex-col gap-1.5"> | ||
| <label className="text-sm font-medium text-muted-foreground">Subject</label> | ||
| <div className="flex items-center justify-between gap-2 px-3 py-2 rounded-md border border-input bg-[hsl(var(--muted))]/50"> | ||
| <span className="text-sm">{CONTACT_SUBJECT}</span> | ||
| <CopyButton text={CONTACT_SUBJECT} label="Copy" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Body field */} | ||
| <div className="flex flex-col gap-1.5"> | ||
| <div className="flex items-center justify-between"> | ||
| <label className="text-sm font-medium text-muted-foreground">Message</label> | ||
| <CopyButton text={CONTACT_BODY} label="Copy message" /> | ||
| </div> | ||
| <div className="px-3 py-2 rounded-md border border-input bg-[hsl(var(--muted))]/50"> | ||
| <pre className="text-sm whitespace-pre-wrap font-sans text-foreground/80"> | ||
| {CONTACT_BODY} | ||
| </pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Copy all */} | ||
| <div className="flex justify-end pt-2"> | ||
| <CopyButton | ||
| text={`To: ${CONTACT_EMAIL}\nSubject: ${CONTACT_SUBJECT}\n\n${CONTACT_BODY}`} | ||
| label="Copy all" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
the copy pasting for email sending here is very strange. there's standard email client popups that should be used instead
2 participants
Summary
/proofpage with 6 sections: hero, data flow diagram, live attestation, privacy spectrum comparison, security team facts, and FAQllms-full.txtTest plan
Summary by CodeRabbit