feat(sync): connect auth → payment → sync flow with license gating by tomymaritano · Pull Request #154 · dripnex/readide

tomymaritano · 2026-03-13T22:18:07Z

Summary

License-gated auto-sync: Prevents 403 errors for free/expired users by checking license state before starting sync
Smart EnableSyncModal: License-aware step routing — computes initial step based on auth × license state (skips pricing for trial users, skips auth for already-signed-in users)
Stripe checkout integration: Monthly (€2/mo) and annual (€20/year) plan selection with real Stripe checkout flow
Sidebar drag-and-drop fixes: Grip handle for intentional drags, circular reference prevention, recursive child depth update on move
SyncStatusIndicator: Replaced hardcoded hex colors with design token CSS classes
Product-config pricing alignment: Updated from USD placeholders to actual EUR Stripe prices
CI/CD: Auto-deploy API to Cloudflare Workers on push to main

Files changed

Area	Files
Auth/Sync	`authStore.ts`, `useSyncOnboarding.ts`, `EnableSyncModal.tsx`
UI	`LoginModal.module.css`, `SyncStatusIndicator.tsx/.module.css`, `global.css`
Sidebar	`NotebookItem.tsx`, `index.ts` (main process)
Config	`product-config/facade.ts`
CI/CD	`.github/workflows/deploy-api.yml`

Test plan

New user (trial active, not auth'd) → Enable Sync → value-prop → email → success
Trial expired, not auth'd → Enable Sync → value-prop → email → pricing → checkout → success
Authenticated + free → Enable Sync → pricing → checkout → success
Authenticated + pro → Enable Sync → shows "already syncing" success
Drag notebooks via grip handle only — text selection still works
Move parent folder with children — all children depths update correctly
pnpm typecheck passes
pnpm test passes

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features
- Added drag-and-drop support for organizing notebooks with visual feedback.
- Enhanced sync onboarding with license-aware capability checks and subscription options.
- Improved magic link authentication with real-time verification feedback.
Bug Fixes
- Fixed circular reference issues when reorganizing notebook hierarchies.
- Enhanced auto-sync activation with license state validation.
Style
- Unified design token system with dark/light theme support.
- Updated error messaging UI in authentication flow.
Chores
- Updated pricing to EUR.
- Consolidated design system infrastructure.

…token system - Delete packages/design-system (unused — zero imports across the app) - Create apps/desktop/src/renderer/ui/ architecture (tokens, primitives, patterns, components) - Create canonical ui/tokens/tokens.css as single source of truth - Define all previously-undefined CSS variables (--surface-hover, --surface-elevated, --text-normal, --link, --error, --error-bg/border/fg, --border-primary, --status-error) - Add --color-* compatibility aliases for sync/auth CSS modules - Update docs references (README, CONTRIBUTING, LICENSE, CODEOWNERS) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add scrollable .sidebar-content wrapper between header and footer - Increase section spacing (4px → 8px/12px between sections) - Add subtle border separator below quick filters - Improve section header padding and margin-bottom - Fix footer cramped padding (4px → 8px) and add flex-column gap - Replace hardcoded sync status colors with semantic tokens - Improve sync prompt with border and better radius - Add thin scrollbar styling for sidebar overflow - Increase header height for better macOS traffic light alignment Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add native HTML5 drag events to NotebookItem (draggable, dragOver, drop) - Support three drop zones: above (reorder before), inside (move into parent), below (reorder after) - Wire moveNotebook and reorderNotebooks mutations from useNotebookMutations into NotebookList - Pass siblingIds down the tree for same-parent reorder calculations - Inbox accepts drop-inside (move into) but is not draggable - Add CSS drop indicators: accent line for above/below, accent outline for inside - Expand parent folder on drop-inside for immediate feedback Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- authStore now checks IPC result.success before proceeding - EnableSyncModal watches authError from store during sent step - MagicLinkFlow watches isAuthenticated to auto-complete on deep link - MagicLinkFlow shows verification errors in the sent step - Replace hardcoded colors with design token variables Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Gate auto-sync behind license check (prevents 403 for free users) - Rewrite EnableSyncModal with license-aware step routing (value-prop → pricing → email → success) - Add pricing step with monthly/annual plan selection via Stripe checkout - Make useSyncOnboarding license-aware - Replace hardcoded colors in SyncStatusIndicator with design tokens - Fix sidebar drag-and-drop: add grip handle, prevent circular refs, update child depths - Align product-config pricing with Stripe (EUR: €2/mo, €20/year) - Add CI/CD workflow for automatic API deployment to Cloudflare Workers Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel · 2026-03-13T22:18:12Z

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

Project	Deployment	Actions	Updated (UTC)
readide	Building	Preview, Comment	Mar 13, 2026 10:18pm

chatgpt-codex-connector · 2026-03-13T22:18:12Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

coderabbitai · 2026-03-13T22:18:24Z

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The pull request migrates design tokens from packages/design-system to apps/desktop/src/renderer/ui/tokens, implements drag-and-drop notebook reordering with circular reference prevention, adds license-aware sync/auth flows with pricing steps, introduces a GitHub Actions deployment workflow, removes the design-system package, reorganizes package ownership metadata, and updates pricing from USD to EUR.

Changes

Cohort / File(s)	Summary
Package Ownership Reorganization `.github/CODEOWNERS`, `CONTRIBUTING.md`, `LICENSE`, `README.md`	Reassigns design-system ownership to plugin-api and updates Open Source Packages tables across metadata files to reflect plugin-api instead of design-system.
CI/CD Workflow `.github/workflows/deploy-api.yml`	Introduces new GitHub Actions workflow for API deployment with test and deploy jobs, triggered on main branch changes under packages/api/\* or manual dispatch with environment selection (staging/production).
Notebook Drag-and-Drop `apps/desktop/src/main/index.ts`, `apps/desktop/src/renderer/components/sidebar/NotebookItem.tsx`, `apps/desktop/src/renderer/components/sidebar/NotebookList.tsx`	Implements drag-and-drop notebook reordering with circular reference detection and depth synchronization; adds onMove, onReorder, and siblingIds props to NotebookItem and integrates moveNotebook/reorderNotebooks mutations.
Design Token Migration `apps/desktop/src/renderer/styles/tokens.css`, `apps/desktop/src/renderer/ui/tokens/tokens.css`, `apps/desktop/src/renderer/styles/global.css`, `apps/desktop/src/renderer/ui/README.md`	Removes legacy tokens from packages/design-system and establishes new centralized token system in ui/tokens with dark/light theme support; updates global.css import path and adds comprehensive drag-and-drop, sidebar, and layout styling.
License-Aware Sync & Auth Flows `apps/desktop/src/renderer/stores/authStore.ts`, `apps/desktop/src/renderer/components/auth/MagicLinkFlow.tsx`, `apps/desktop/src/renderer/components/auth/MagicLinkFlow.module.css`, `apps/desktop/src/renderer/components/sync/EnableSyncModal.tsx`, `apps/desktop/src/renderer/components/sync/LoginModal.module.css`, `apps/desktop/src/renderer/hooks/useSyncOnboarding.ts`	Adds license checks to sync capability detection; introduces multi-step pricing and payment-waiting flows in EnableSyncModal; adds error handling and useEffect listeners in MagicLinkFlow; updates sync prompt logic to depend on license state rather than authentication alone; adds plan selection UI styling.
Sync Status & Styling Updates `apps/desktop/src/renderer/components/sync/SyncStatusIndicator.module.css`, `apps/desktop/src/renderer/components/sync/SyncStatusIndicator.tsx`, `apps/desktop/src/renderer/components/sidebar/Sidebar.tsx`	Refactors SyncStatusIndicator to use CSS module classes instead of inline colors; removes deprecated icon color rules and adds status-based color classes; wraps sidebar content in container div.
Design System Package Removal `packages/design-system/\\` (package.json, LICENSE, tsconfig.json, src/\)	Deletes the entire design-system package including components (Button, Card, Input), exports, tokens, and configuration files.
Pricing Update `packages/product-config/src/facade.ts`	Updates Pro plan pricing from USD (\$2.99/mo, \$29/year) to EUR (€2/mo, €20/year) and adjusts annual savings from 19% to 17%.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant NotebookItem
    participant NotebookList
    participant Desktop as Desktop API

    User->>NotebookItem: dragStart on notebook
    NotebookItem->>NotebookItem: collect descendant IDs
    
    User->>NotebookItem: dragOver target notebook
    NotebookItem->>NotebookItem: detect drop position (above/inside/below)
    NotebookItem->>NotebookItem: check for circular reference
    
    alt Circular Reference Detected
        NotebookItem->>User: reject drop
    else Valid Drop
        User->>NotebookItem: drop on target
        NotebookItem->>NotebookList: onMove(id, newParentId)
        NotebookList->>Desktop: moveNotebook(id, newParentId)
        Desktop->>Desktop: update notebook depth recursively
        Desktop->>NotebookList: return updated tree
        NotebookList->>NotebookItem: trigger re-render
    end

sequenceDiagram
    participant User
    participant EnableSyncModal
    participant AuthStore
    participant License as License Service
    participant Checkout as Checkout API

    User->>EnableSyncModal: open sync modal
    EnableSyncModal->>License: check license state
    
    alt Not Authenticated
        License->>EnableSyncModal: return state
        EnableSyncModal->>User: show magic link step
    else Authenticated + Not Sync Capable
        License->>EnableSyncModal: return non-capable status
        EnableSyncModal->>User: show pricing step
        User->>EnableSyncModal: select plan (annual/monthly)
        EnableSyncModal->>Checkout: open subscription checkout
        EnableSyncModal->>User: show waiting-payment step
        Checkout->>License: process payment
        License->>AuthStore: update license state
        AuthStore->>EnableSyncModal: license state changed
        EnableSyncModal->>User: transition to success
    else Authenticated + Sync Capable
        License->>EnableSyncModal: return capable status
        EnableSyncModal->>User: show success
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

PR #148: Modifies the same EnableSyncModal, useSyncOnboarding, and sync/auth integration flows for deep-link verification and onboarding prompt logic.
PR #149: Touches overlapping code areas including plugin-api exports, design-system removal, and desktop UI sync integrations.
PR #122: Restructures design tokens and introduces theme system infrastructure (useThemeOverrides, theme registry) that parallels the token migration in this PR.

Suggested labels

app:desktop, package:plugin-api, ci, size/XL

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main feature: license-gated sync flow connecting auth, payment, and sync with license restrictions as a primary focus.

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

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/ui-system-migration

📝 Coding Plan

Generate coding plan for human review comments

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

## Release v0.9.0 ### Highlights - **Auth → Payment → Sync flow**: License-gated sync with smart step routing in EnableSyncModal - **Stripe checkout**: Monthly (€2/mo) and annual (€20/year) plan selection - **Sidebar drag-and-drop**: Grip handle, circular reference prevention, child depth propagation - **CI/CD**: Auto-deploy API — develop → staging, main → production - **Design tokens**: SyncStatusIndicator uses CSS variables instead of hardcoded colors - **AI features**: Command execution, plugin bridge, knowledge system (Phase 4-5) - **UI cleanup**: Tailwind v4 canonical classes, removed dead design-system package ### Changes since v0.8.0 - feat(sync): connect auth → payment → sync flow with license gating (#154) - chore: Tailwind v4 canonical classes + tsconfig cleanup (#151) - feat(ai): complete Phase 4-5 — AI command execution + plugin bridge (#150) - feat(ai,plugins): complete Phase 4-5 — AI knowledge & extensibility - feat(desktop,api): complete Phase 1-3 roadmap implementation ### Checklist - [x] `pnpm typecheck` passes - [x] `pnpm test` passes - [x] `package.json` version is `0.9.0` - [x] All features merged to develop first - [x] API production secrets configured (Stripe, Resend) 🤖 Generated with [Claude Code](https://claude.com/claude-code)  ## Summary by CodeRabbit # Release Notes * **New Features** * Added AI-powered text commands (summarize, rewrite, tweet) with plugin integration. * Introduced drag-and-drop notebook reordering with automatic circular reference protection. * Enhanced sync onboarding with license-based feature gating. * Improved magic link authentication with automatic verification. * **Bug Fixes** * Fixed token refresh infinite loop handling. * Added URL encoding for verification links. * Improved cleanup for animated UI components. * **Improvements** * Enhanced error handling for authentication and sync failures. * Added accessibility attributes (ARIA labels, semantic HTML). * Updated visual styling with new token-driven design system. * **Refactor** * Migrated from design-system package to plugin-api package. * Consolidated design tokens and theme system. * **Chores** * Updated GitHub Actions release automation. * Refreshed project documentation and contribution guidelines.  --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

tomymaritano and others added 5 commits March 13, 2026 17:31

github-actions Bot enabled auto-merge (squash) March 13, 2026 22:18

github-actions Bot added dependencies Pull requests that update a dependency file ci app:desktop size/XL labels Mar 13, 2026

github-actions Bot merged commit 8a1f5c8 into develop Mar 13, 2026
13 of 15 checks passed

vercel Bot deployed to Preview March 13, 2026 22:45 View deployment

tomymaritano mentioned this pull request Mar 14, 2026

chore: release v0.9.0 #155

Merged

5 tasks

coderabbitai Bot mentioned this pull request Apr 23, 2026

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

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(sync): connect auth → payment → sync flow with license gating#154

feat(sync): connect auth → payment → sync flow with license gating#154
github-actions[bot] merged 5 commits into
developfrom
feature/ui-system-migration

tomymaritano commented Mar 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Mar 13, 2026

Uh oh!

chatgpt-codex-connector Bot commented Mar 13, 2026

Uh oh!

coderabbitai Bot commented Mar 13, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

Summary

Files changed

Test plan

Summary by CodeRabbit

Uh oh!

vercel Bot commented Mar 13, 2026

Uh oh!

chatgpt-codex-connector Bot commented Mar 13, 2026

Uh oh!

coderabbitai Bot commented Mar 13, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tomymaritano commented Mar 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 13, 2026 •

edited

Loading