feat: Implement draft recovery banner with autosave functionality#483
feat: Implement draft recovery banner with autosave functionality#483vestor-dev wants to merge 1 commit into
Conversation
|
@vestor-dev is attempting to deploy a commit to the ritik4ever's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughCreateStreamForm now persists form state via autosave every 2 seconds. When a draft exists, an inline recovery banner displays with a discard option that confirms deletion and resets form state. The legacy discard button is removed, and new CSS styles the banner and its controls. ChangesDraft Recovery Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
|
@vestor-dev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/CreateStreamForm.tsx`:
- Around line 236-260: The banner is shown whenever hasDraft is true (including
autosaves) and performs a destructive discard; change the logic to only show the
banner when a draft was actually restored (introduce or use an explicit flag
like isDraftRestored or restoredDraftTimestamp instead of hasDraft), replace the
discard button with a non-destructive "Dismiss" action that only hides the
banner (e.g., setRestoredDraftVisible(false)) and does not call clearDraft/
setTouched/ setSubmitAttempted, and add a human-readable "created X ago" context
using the restoredDraftTimestamp to render the age; keep the existing disabled
handling via isSubmitting for the dismiss button.
In `@frontend/src/index.css`:
- Around line 223-232: The .draft-recovery-banner__discard-link rule sets font:
inherit which resets font-weight and overrides the intended semibold weight;
update the rule to stop resetting the entire font shorthand—remove font: inherit
or replace it with font-family: inherit so font-weight: 600 on
.draft-recovery-banner__discard-link remains effective and the link renders
semibold.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2e8af361-8930-42e6-8a58-ffd9970043b2
📒 Files selected for processing (2)
frontend/src/components/CreateStreamForm.tsxfrontend/src/index.css
| {hasDraft && ( | ||
| <div | ||
| className="draft-recovery-banner" | ||
| role="status" | ||
| aria-live="polite" | ||
| aria-label="Draft recovered" | ||
| > | ||
| ✓ Your unsaved draft has been recovered. You can{" "} | ||
| <button | ||
| type="button" | ||
| className="draft-recovery-banner__discard-link" | ||
| onClick={() => { | ||
| if (window.confirm("Discard your unsaved stream draft?")) { | ||
| clearDraft(); | ||
| setTouched({}); | ||
| setSubmitAttempted(false); | ||
| } | ||
| }} | ||
| disabled={isSubmitting} | ||
| > | ||
| discard it | ||
| </button>{" "} | ||
| if you prefer to start over. | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Recovery banner semantics don’t match restored-draft behavior.
Line 236 uses hasDraft as the trigger, but hasDraft also becomes true for newly autosaved edits (not only restored drafts). This can show a misleading “recovered” banner. Also, Line 244-Line 257 implements destructive discard, while the requirement calls for a non-destructive dismiss and “created X ago” context.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/CreateStreamForm.tsx` around lines 236 - 260, The
banner is shown whenever hasDraft is true (including autosaves) and performs a
destructive discard; change the logic to only show the banner when a draft was
actually restored (introduce or use an explicit flag like isDraftRestored or
restoredDraftTimestamp instead of hasDraft), replace the discard button with a
non-destructive "Dismiss" action that only hides the banner (e.g.,
setRestoredDraftVisible(false)) and does not call clearDraft/ setTouched/
setSubmitAttempted, and add a human-readable "created X ago" context using the
restoredDraftTimestamp to render the age; keep the existing disabled handling
via isSubmitting for the dismiss button.
| .draft-recovery-banner__discard-link { | ||
| background: none; | ||
| border: none; | ||
| color: #166534; | ||
| text-decoration: underline; | ||
| cursor: pointer; | ||
| font-weight: 600; | ||
| padding: 0; | ||
| font: inherit; | ||
| } |
There was a problem hiding this comment.
font: inherit overrides the intended bold discard-link weight.
Line 231 resets font-weight set on Line 229, so the link won’t render as semibold.
Proposed fix
.draft-recovery-banner__discard-link {
background: none;
border: none;
color: `#166534`;
text-decoration: underline;
cursor: pointer;
- font-weight: 600;
padding: 0;
font: inherit;
+ font-weight: 600;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .draft-recovery-banner__discard-link { | |
| background: none; | |
| border: none; | |
| color: #166534; | |
| text-decoration: underline; | |
| cursor: pointer; | |
| font-weight: 600; | |
| padding: 0; | |
| font: inherit; | |
| } | |
| .draft-recovery-banner__discard-link { | |
| background: none; | |
| border: none; | |
| color: `#166534`; | |
| text-decoration: underline; | |
| cursor: pointer; | |
| padding: 0; | |
| font: inherit; | |
| font-weight: 600; | |
| } |
🧰 Tools
🪛 Stylelint (17.12.0)
[error] 231-231: Overridden property "font-weight" by shorthand "font" (declaration-block-no-shorthand-property-overrides)
(declaration-block-no-shorthand-property-overrides)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/index.css` around lines 223 - 232, The
.draft-recovery-banner__discard-link rule sets font: inherit which resets
font-weight and overrides the intended semibold weight; update the rule to stop
resetting the entire font shorthand—remove font: inherit or replace it with
font-family: inherit so font-weight: 600 on .draft-recovery-banner__discard-link
remains effective and the link renders semibold.
1 participant
closes #393
closes #394
closes #410
closes #395
Summary by CodeRabbit
Release Notes