feat: UX polish — onboarding, AiSection CSS, magic link resend by tomymaritano · Pull Request #218 · dripnex/readide

tomymaritano · 2026-04-23T23:26:48Z

Summary

Onboarding

4th feature card: "Import Your Notes" (Obsidian, Markdown, other apps)
Keyboard shortcut hint: "Press Cmd+K for command palette"
Friendlier skip text: "I'll explore on my own"

Auth

"Resend magic link" button with 60s cooldown timer in MagicLinkFlow
Countdown display + spinner feedback

AiSection CSS Migration

All remaining inline styles → CSS module classes with design tokens
rgba(16,185,129,0.08) → var(--success-muted), etc.

Already Implemented (verified during audit)

Spellcheck: toggle in settings, CodeMirror integration via contentAttributes
Image paste: clipboard handler + asset save + ![[filename]] insert
Image drag & drop: same pipeline

Test plan

pnpm typecheck — 17/17 pass
pnpm test — 16/16 pass

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

New Features
- Added resend functionality for magic link emails with a 60-second cooldown timer
- Introduced notes import feature card in onboarding flow
- Added on-screen hint for opening the command palette with Cmd+K
Style
- Refined onboarding animation timing and card sequences
- Updated secondary CTA text from "Skip" to "I'll explore on my own"
- Enhanced AI settings UI styling and layout consistency

…resend Onboarding: - Add 4th feature card: "Import Your Notes" (Obsidian, Markdown folders) - Add keyboard shortcut hint: "Press Cmd+K for command palette" - Change "Skip" to "I'll explore on my own" Auth: - Add "Resend magic link" button with 60s cooldown timer - Shows countdown ("Resend in 45s"), spinner while sending AiSection: - Migrate all remaining inline styles to CSS tokens - Map hardcoded rgba colors to --success-muted, --danger-muted, etc. - 15+ new CSS classes in Section.module.css Note: Spellcheck and image paste were already implemented in the codebase. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel · 2026-04-23T23:26:50Z

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

Project	Deployment	Actions	Updated (UTC)
readide	Error		Apr 23, 2026 11:27pm

coderabbitai · 2026-04-23T23:27:00Z

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The changes update the desktop onboarding UI with a new card and user hint, add a resend mechanism with cooldown to the magic link authentication flow, and refactor the AI settings component to use CSS modules instead of inline styles.

Changes

Cohort / File(s)	Summary
Onboarding UI Updates `apps/desktop/src/renderer/components/Welcome.module.css`, `apps/desktop/src/renderer/components/Welcome.tsx`	Extends card stagger animation to 4 cards (400ms delay), shifts `.actions` delay to 500ms, adds new `.hint` and `.kbd` CSS classes for styling instructions. Updates CTA text from "Skip" to "I'll explore on my own" and includes new on-screen hint prompting `Cmd+K` for command palette.
Magic Link Resend Flow `apps/desktop/src/renderer/components/auth/MagicLinkFlow.module.css`, `apps/desktop/src/renderer/components/auth/MagicLinkFlow.tsx`	Implements resend mechanism with 60-second cooldown state tracking and interval-driven countdown. Adds `handleResend` callback with cooldown validation, in-flight status management, and error handling. Introduces `.resendContent` and `.spinnerInline` CSS utility classes. UI now displays resend button with dynamic states: "Resending...", "Resend in Ns", or "Resend magic link".
AI Settings Style Refactoring `apps/desktop/src/renderer/pages/settings/sections/AiSection.tsx`, `apps/desktop/src/renderer/pages/settings/sections/Section.module.css`	Migrates inline styles to CSS modules for connection state UI (connected box, config box, error alert) and command list presentation. Adds 21 new CSS classes in `Section.module.css` covering connection wrapper, connected/connect boxes, input styling, Ollama info, error messaging, and command list layout. Reduces `AiSection.tsx` by 78 lines through style extraction.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant MagicLinkFlow
    participant RequestMagicLink as requestMagicLink()
    participant IntervalEffect as Cooldown Effect

    rect rgba(200, 150, 255, 0.5)
        User->>MagicLinkFlow: Click "Resend magic link"
        MagicLinkFlow->>MagicLinkFlow: Check cooldown active?
        alt Cooldown Active
            MagicLinkFlow->>User: Button disabled
        else Cooldown Inactive
            MagicLinkFlow->>MagicLinkFlow: Set resending=true
            MagicLinkFlow->>RequestMagicLink: Call with email
            RequestMagicLink->>MagicLinkFlow: Return success/error
            alt Success
                MagicLinkFlow->>MagicLinkFlow: Start 60s cooldown
                MagicLinkFlow->>IntervalEffect: Initialize countdown interval
                IntervalEffect->>MagicLinkFlow: Decrement remaining seconds
                MagicLinkFlow->>User: Display "Resend in Ns"
            else Failure
                MagicLinkFlow->>MagicLinkFlow: Set error message
                MagicLinkFlow->>User: Display error
            end
            MagicLinkFlow->>MagicLinkFlow: Set resending=false
        end
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

feat: AI providers, dashboard, settings refresh, production fixes #172: Modifies the same AI settings UI files (AiSection.tsx and Section.module.css) with related provider and connection feature implementations.
feat(sync): connect auth → payment → sync flow with license gating #154: Modifies the same magic link authentication flow component (MagicLinkFlow.tsx and .module.css) with related verification and error handling behavior.

Suggested labels

app:desktop

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main changes: onboarding UX updates, AiSection CSS migration, and magic link resend functionality across multiple components.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/ux-polish-and-quick-wins

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.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 60bdc4a3e2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-04-23T23:30:27Z

+    try {
+      await requestMagicLink(email);
+      startCooldown();
+    } catch {
+      setError('Failed to resend magic link. Please try again.');


Ignore stale resend results after leaving sent step

The resend handler always applies post-request state updates (startCooldown() on success and setError(...) on failure) after await requestMagicLink(email), even if the user has already clicked “Use different email” and moved back to the email step while that request is in flight. In that case, stale results from the old email can leak into the new flow (e.g., showing a resend failure for the wrong attempt or reintroducing cooldown unexpectedly). Please gate these updates on the current step/request instance, or cancel/ignore the in-flight resend when retrying.

Useful? React with 👍 / 👎.

github-actions Bot enabled auto-merge (squash) April 23, 2026 23:26

github-actions Bot added the app:desktop label Apr 23, 2026

github-actions Bot added the size/L label Apr 23, 2026

vercel Bot had a problem deploying to Preview April 23, 2026 23:27 Failure

github-actions Bot merged commit d58dbf8 into develop Apr 23, 2026
13 of 15 checks passed

chatgpt-codex-connector Bot reviewed Apr 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: UX polish — onboarding, AiSection CSS, magic link resend#218

feat: UX polish — onboarding, AiSection CSS, magic link resend#218
github-actions[bot] merged 1 commit into
developfrom
feature/ux-polish-and-quick-wins

tomymaritano commented Apr 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Apr 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 23, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Apr 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

tomymaritano commented Apr 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Onboarding

Auth

AiSection CSS Migration

Already Implemented (verified during audit)

Test plan

Summary by CodeRabbit

Release Notes

Uh oh!

vercel Bot commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tomymaritano commented Apr 23, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Apr 23, 2026 •

edited

Loading

coderabbitai Bot commented Apr 23, 2026 •

edited

Loading