AI-First Starting UX: Templates path#4912
Draft
lmac-1 wants to merge 6 commits into
Draft
Conversation
Clicking "Browse templates" on the /new landing screen opens a modal listing base templates (webhook + cron) plus any user-created templates. Clicking a template creates the workflow immediately and dismisses the landing screen — no separate confirm step. - Add showTemplateBrowserModal state + open/close actions to UIStore - Add WorkflowTemplateBrowserModal component (lazy fetch on open, one-click create, Escape to close, responsive grid + panel width) - Connect LandingScreen.onBrowseTemplates to the new modal
…e on new workflows
…nd description display
… UI and Lightning wrapper The original component mixed UI rendering with Phoenix channel fetching, Y.Doc workflow imports, and global store hooks — making it impossible to render or iterate on in isolation (Storybook, tests, or a plain React context) without standing up the full collaborative editor infrastructure. Split into two components: - TemplateBrowserModal: pure presentational modal, takes only plain props, no Lightning dependencies. Product can open this file and iterate freely. - TemplateBrowserModalWrapper: thin wiring layer that connects the modal to the Phoenix channel, Y.Doc workflow store, and global UI state. Also fixes isSaving not being reset on successful template selection, and clears the search query each time the modal opens.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR wires up the "Browse templates" flow for the AI-first epic. When a user clicks "Browse templates" on the landing screen, a modal opens showing base templates and any saved user templates. Clicking a template card closes the modal, navigates to the canvas and creates a new workflow in the database - unlike the existing templates flow which only populates the editor client-side to preview.
The modal is built as two components by design:
TemplateBrowserModal(pure presentational, plain props) andTemplateBrowserModalWrapper(Phoenix channel + store wiring). This keeps the UI easy to iterate on without needing the full Lightning infrastructure. Product has requested to make this part of the app as decoupled as possible so that they can easily iterate on templates and improve the UI very easily.Key decisions
Closes #__
Validation steps
Additional notes for the reviewer
TemplateBrowserModalhas no Lightning imports — it can be rendered in isolation (Storybook, tests) without a Phoenix channel or Y.Doc store.TemplateBrowserModalWrapperis the only place that touches hooks/store, following theAIAssistantPanel/AIAssistantPanelWrapperpattern already in the codebase.AI Usage
Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):
You can read more details in our
Responsible AI Policy
Pre-submission checklist
/reviewwith Claude Code)
(e.g.,
:owner,:admin,:editor,:viewer)