feat(settings): added snap to grid slider to settings

[waleedlatif1]

Summary

• added snap to grid slider to settings, allows user to set it from anywhere between 0px and 50px for how snappy they want the canvas to be

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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-apps]

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

Filename	Overview
packages/db/schema.ts	Added snapToGridSize integer column with default 0, properly typed and constrained
apps/sim/app/api/users/me/settings/route.ts	Added snapToGridSize validation (0-50), default value, and API handling; removed unnecessary comments
apps/sim/components/emcn/components/slider/slider.tsx	New EMCN Slider component with Radix UI, clean implementation following component patterns
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx	Added snap-to-grid slider UI with optimistic local state, removed disabled props from switches
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Integrated snap-to-grid using Zustand store, dynamic snapGrid calculation with useMemo
apps/sim/hooks/queries/general-settings.ts	Added snapToGridSize to settings interface, improved sync logic with shallow comparison

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

Loading

[greptile-apps]

_{12 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@greptile

[greptile-apps]

_{12 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}