Add disabled 'Generate with AI' UI to subtasks#584
Open
arifulhoque7 wants to merge 3 commits intoweDevsOfficial:developfrom
Open
Add disabled 'Generate with AI' UI to subtasks#584arifulhoque7 wants to merge 3 commits intoweDevsOfficial:developfrom
arifulhoque7 wants to merge 3 commits intoweDevsOfficial:developfrom
Conversation
Introduce a 'Generate with AI' Pro button to the Subtasks header (UI-only preview) with SVG icon and Pro badge; reorganize header into a flex row and adjust title margins. Add styles for the disabled button state (opacity, cursor, pointer-events) and nested Pro badge. Also update AI Settings: add an explanatory description about the AI provider and clarify the max_tokens help text to mention both project and subtask generation.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdds a subtask header row with a disabled "Generate with AI" button and Pro badge to the subtask lists component, and clarifies AI provider usage plus Max Tokens description in the AI settings component. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
arifulhoque7
added
Needs Dev Review
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
views/assets/src/components/pro-task-lists/subtask-lists.vue (1)
66-88: Consider removingpointer-events: noneif switching to a native disabled button.The
pointer-events: nonerule is a workaround for the anchor element. If you switch to a<button disabled>, you can remove this line since disabled buttons natively prevent interaction. Theopacity: 0.6andcursor: not-allowedstyles are appropriate for the visual disabled state.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@views/assets/src/components/pro-task-lists/subtask-lists.vue` around lines 66 - 88, The CSS rule .pm-btn-ai-subtask--preview uses pointer-events: none as a workaround for disabling an anchor; switch the markup to a native <button disabled> (and keep opacity: 0.6 and cursor: not-allowed for visuals) and remove pointer-events: none from the .pm-btn-ai-subtask--preview rule; ensure the nested .pm-ai-pro-badge styling remains unchanged and verify keyboard accessibility and focus styles for the disabled button.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@views/assets/src/components/pro-task-lists/subtask-lists.vue`:
- Around line 8-16: Replace the anchor element carrying class "pm-btn pm-btn-ai
pm-btn-ai-subtask--preview" with a <button> so it can receive a native disabled
state and proper semantics; keep the `@click.prevent` handler (or use `@click` with
type="button"), remove the href attribute, add type="button" and when disabled
set the disabled attribute (and optionally aria-disabled) instead of relying on
pointer-events. Update any CSS selectors or rules that target the old anchor
(e.g., change selectors like .pm-btn-ai-subtask--preview a or
a.pm-btn-ai-subtask--preview to just .pm-btn-ai-subtask--preview and add button
reset styles such as border: none) so styling is preserved for the new button
element. Ensure the inner content (SVG, text, and .pm-ai-pro-badge span) remains
unchanged.
---
Nitpick comments:
In `@views/assets/src/components/pro-task-lists/subtask-lists.vue`:
- Around line 66-88: The CSS rule .pm-btn-ai-subtask--preview uses
pointer-events: none as a workaround for disabling an anchor; switch the markup
to a native <button disabled> (and keep opacity: 0.6 and cursor: not-allowed for
visuals) and remove pointer-events: none from the .pm-btn-ai-subtask--preview
rule; ensure the nested .pm-ai-pro-badge styling remains unchanged and verify
keyboard accessibility and focus styles for the disabled button.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
views/assets/src/components/pro-task-lists/subtask-lists.vueviews/assets/src/components/settings/ai-settings.vue
Replace the anchor used for the "Generate with AI" control with a semantic, disabled <button> and add aria-disabled for accessibility. Update the SVG to use an icon class and remove the non-breaking space. Adjust styles for the disabled control: add gap, padding, border, border-radius, line-height, and icon layout rules; remove text-decoration and pointer-events, while preserving the disabled visual (opacity and not-allowed cursor). These changes improve semantics, accessibility, and visual spacing.
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.
PR Description
Summary
Adds AI-powered subtask generation to the Pro plugin. A "Generate with AI" button appears in the subtask header row of any active task. Clicking it opens a modal that fetches 3–10 AI-suggested subtasks based on the task title, description, and project context. Users can review, edit, uncheck, or individually accept suggestions before adding them.
wedevs-project-manager(Free plugin)views/assets/src/components/settings/ai-settings.vueviews/assets/src/components/pro-task-lists/subtask-lists.vueHow It Works
POST /pm-pro/v2/tasks/{task_id}/sub-tasks/ai/generateis called withproject_id{ title, description? }objectsPOST /pm-pro/v2/tasks/{task_id}/sub-tasksendpointAI Provider Support
Provider, model, API key, max tokens, and temperature are all read from the existing Settings → AI configuration (free plugin).
Accessibility & Code Quality
role="dialog",aria-modal="true",aria-labelledbytype="button"andaria-labelwhere neededrel="noopener noreferrer":aria-labelbound to the subtask title<a href="#">to<button>with:disabledbindingvar self = this)Test Plan
Esc→ modal closes without creating subtasksclose 292 , related PR PRO
Summary by CodeRabbit
New Features
Documentation