Introduce primary actions

[bosiraphael]

• These actions are displayed in the accent color
• Added new context store state contextStoreIsPageInEditModeComponentState
• Reverted the order in which the actions are displayed (the first action should appear to the right of the top bar action menu)

https://github.com/user-attachments/assets/3a0769cf-61ed-4619-8c4d-e3a01765b63c

[greptile-apps[bot]]

Greptile Overview

Greptile Summary

This PR introduces primary actions that are displayed with accent colors (blue) in the action menu. It adds the isPrimaryCTA flag to action configurations and implements a new PAGE_EDIT_MODE view type for filtering actions when pages are in edit mode.

Key changes:

• Added isPrimaryCTA optional field to ActionConfig type to enable blue accent styling for primary actions
• Introduced new contextStoreIsPageInEditModeComponentState to track page edit mode globally
• Refactored useSetIsPageLayoutInEditMode to use the new context store state instead of manually managing individual action visibility
• Updated useRegisteredActions to filter actions based on edit mode and PAGE_EDIT_MODE view type
• Reversed action display order in PageHeaderActionMenuButtons so the first action appears rightmost
• Applied primary CTA styling to Save actions in dashboards and Activate Workflow action
• Reorganized action positions across multiple configuration files for consistent ordering
• Added reset logic to clear edit mode state on page navigation

Issue found:

• ActionViewType.ts uses an enum instead of string literal union type, which violates the TypeScript guidelines that specify string literals over enums (except for GraphQL enums)

Confidence Score: 4/5

• This PR is safe to merge with one minor guideline violation that should be addressed
• The implementation is well-structured and follows good patterns for state management and component composition. The refactoring from manual action visibility management to a context store state is cleaner and more maintainable. However, there's one syntax issue where ActionViewType uses an enum instead of string literal union, which violates the codebase's TypeScript guidelines
• Pay attention to packages/twenty-front/src/modules/action-menu/actions/types/ActionViewType.ts which needs to be converted from enum to string literal union type

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/action-menu/actions/types/ActionViewType.ts	3/5	Added PAGE_EDIT_MODE enum value, but uses enum instead of string literal union as recommended by codebase guidelines
packages/twenty-front/src/modules/action-menu/actions/display/components/ActionButton.tsx	5/5	Updated to conditionally apply blue accent based on isPrimaryCTA flag, replacing hardcoded 'default' accent
packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts	5/5	Refactored to use new context store state instead of manually managing individual action visibility via forceRegisteredActionsByKey
packages/twenty-front/src/modules/action-menu/hooks/useRegisteredActions.ts	5/5	Updated action filtering to check edit mode state and filter by PAGE_EDIT_MODE view type when in edit mode
packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DashboardActionsConfig.tsx	5/5	Added isPrimaryCTA: true to Save action and updated positions across all dashboard actions

Sequence Diagram

sequenceDiagram
    participant User
    participant PageLayout
    participant useSetIsPageLayoutInEditMode
    participant ContextStore as contextStoreIsPageInEditMode
    participant useRegisteredActions
    participant ActionConfig
    participant PageHeaderActionMenuButtons
    participant ActionButton

    User->>PageLayout: Toggle Edit Mode
    PageLayout->>useSetIsPageLayoutInEditMode: setIsPageLayoutInEditMode(true)
    useSetIsPageLayoutInEditMode->>ContextStore: Set edit mode state
    
    Note over useRegisteredActions: On next render
    useRegisteredActions->>ContextStore: Read isFullTabWidgetInEditMode
    ContextStore-->>useRegisteredActions: true
    useRegisteredActions->>ActionConfig: Filter actions
    Note over useRegisteredActions,ActionConfig: Only include actions with<br/>PAGE_EDIT_MODE in availableOn
    ActionConfig-->>useRegisteredActions: Filtered actions (Save, Cancel)
    
    useRegisteredActions->>PageHeaderActionMenuButtons: Provide filtered actions
    PageHeaderActionMenuButtons->>PageHeaderActionMenuButtons: Reverse action order
    Note over PageHeaderActionMenuButtons: First action appears rightmost
    
    PageHeaderActionMenuButtons->>ActionButton: Render each action
    ActionButton->>ActionButton: Check isPrimaryCTA flag
    alt isPrimaryCTA is true
        ActionButton->>User: Display with blue accent
    else isPrimaryCTA is false
        ActionButton->>User: Display with default accent
    end
    
    User->>PageLayout: Navigate away
    PageLayout->>ContextStore: Reset edit mode to false
    Note over useRegisteredActions: Actions filter back to normal

[github-actions[bot]]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:20341

This environment will automatically shut down when the PR is closed or after 5 hours.

[lucasbordeau]