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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 21, 2025 0:51am

Greptile Summary

This PR adds a configurable snap-to-grid feature for the workflow canvas, allowing users to set grid snapping from 0px (off) to 50px through a slider control in settings.

Key changes:

• Created new EMCN Slider component following Radix UI patterns with proper accessibility
• Added snapToGridSize field to database schema, API validation (0-50), and Zustand store
• Integrated slider into settings modal with optimistic local state for smooth UX
• Connected snap-to-grid behavior to ReactFlow using useMemo for dynamic grid calculation
• Improved settings sync logic with shallow comparison to prevent unnecessary updates
• Removed disabled={updateSetting.isPending} from Switch components (intentional UX change)

Minor issues:

• Database schema comment mentions "10-50" range but implementation allows 1-50 (comment should be updated for clarity)
• Previous thread noted mismatch between schema max (100) and UI max (50), but this appears resolved in current code

Confidence Score: 4/5

• This PR is safe to merge with minor documentation improvements recommended
• The implementation is solid with proper type safety, validation, and state management. The snap-to-grid feature is well-integrated across the stack (DB → API → Store → UI → Canvas). Code follows established patterns for EMCN components, Zustand stores, and React Query hooks. The only issue is a misleading comment in the schema that suggests a 10-50 range when 1-50 is actually allowed. The removal of disabled props from switches appears intentional based on the previous thread response about UX consistency.
• Only packages/db/schema.ts needs minor attention to clarify the comment on line 452

Important Files Changed

Sequence Diagram

sequenceDiagram
    participant User
    participant SettingsUI as Settings Modal
    participant Slider as Slider Component
    participant Hook as useUpdateGeneralSetting
    participant API as Settings API
    participant DB as Database
    participant Store as Zustand Store
    participant Workflow as Workflow Component

    User->>SettingsUI: Opens settings modal
    SettingsUI->>Hook: useGeneralSettings()
    Hook->>API: GET request
    API->>DB: SELECT from settings table
    DB-->>API: Return user settings
    API-->>Hook: Return settings data
    Hook->>Store: syncSettingsToZustand()
    Store-->>SettingsUI: Display current value
    
    User->>Slider: Drags slider to 20px
    Slider->>SettingsUI: onValueChange([20])
    SettingsUI->>SettingsUI: setLocalSnapValue(20)
    Note over SettingsUI,Slider: Optimistic UI update

    User->>Slider: Releases slider
    Slider->>SettingsUI: onValueCommit([20])
    SettingsUI->>Hook: mutateAsync with new value
    Hook->>API: PATCH request
    API->>API: Validate with Zod
    API->>DB: INSERT or UPDATE settings
    DB-->>API: Confirmation
    API-->>Hook: Response
    Hook->>Store: syncSettingsToZustand()
    Store->>Store: Update snapToGridSize
    SettingsUI->>SettingsUI: setLocalSnapValue(null)
    
    Store-->>Workflow: snapToGridSize updated
    Workflow->>Workflow: useMemo recalculates snapGrid
    Workflow->>Workflow: snapToGrid enabled
    Note over Workflow: ReactFlow now snaps nodes to grid

@greptile

@greptile