feat: new visual for task card#229
Conversation
WalkthroughUpdates UI layout and motion presets across task and staff components, replaces inline task controls with TaskInfoCard, adds a shared useConfetti composable and integrates it (trigger + overlay) into the complete-task flow and app layout, and removes avatar upload UI from the profile page. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant CompleteTask
participant Stores as "Task & User Stores"
participant ConfettiCompo as "useConfetti"
participant Layout
User->>CompleteTask: Submit complete action
activate CompleteTask
CompleteTask->>Stores: update task & user state
Stores-->>CompleteTask: update success
CompleteTask->>ConfettiCompo: pop()
ConfettiCompo-->>Layout: isShown = true (shared)
Layout->>Layout: render ClientOnly confetti overlay (v-confetti)
Note right of Layout: confetti auto-resets after 5s
deactivate CompleteTask
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/atrium-telegram/app/components/TaskList.vue (1)
16-47: Consider optimizing empty avatar container.The
h-8container on line 18 renders even when there are no chat members, creating an empty fixed-height element. While this may be intentional for layout consistency, consider wrapping the entire avatar section in a conditional:<div v-if="activeChatMembers?.length" class="h-8"> <UAvatarGroup :max="3" size="md" ... >This would avoid rendering an empty container when no avatars are displayed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/atrium-telegram/app/components/SectionTitle.vue(1 hunks)apps/atrium-telegram/app/components/StaffBlock.vue(1 hunks)apps/atrium-telegram/app/components/TaskActiveCard.vue(4 hunks)apps/atrium-telegram/app/components/TaskInfoCard.vue(2 hunks)apps/atrium-telegram/app/components/TaskList.vue(2 hunks)apps/atrium-telegram/app/pages/task/[taskId]/index.vue(1 hunks)apps/atrium-telegram/app/pages/task/my.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (12)
apps/atrium-telegram/app/components/StaffBlock.vue (1)
7-7: LGTM! Animation direction update looks good.The change from
motion-preset-slide-righttomotion-preset-slide-upaligns with the broader visual updates in this PR.apps/atrium-telegram/app/pages/task/my.vue (1)
55-55: LGTM! Import cleanup is correct.The removal of
ModalUploadUserAvatarimport aligns with the removal of avatar upload functionality from this page.apps/atrium-telegram/app/components/SectionTitle.vue (1)
2-2: LGTM! Line height adjustment improves readability.The change from
text-2xl/6totext-2xl/7provides better vertical spacing for the heading.apps/atrium-telegram/app/pages/task/[taskId]/index.vue (2)
46-51: LGTM! Vertical alignment improvement.Changing from
items-starttoitems-centerbetter aligns the calendar icon with the date text.
53-58: LGTM! Vertical alignment improvement.Changing from
items-starttoitems-centerbetter aligns the book icon with the task list name.apps/atrium-telegram/app/components/TaskInfoCard.vue (2)
2-2: LGTM! Motion animation added.The
motion-preset-slide-leftclass provides a consistent entrance animation for the task card.
41-46: LGTM! Date display implementation is correct.The date block follows the same pattern as other info blocks and uses consistent formatting with the rest of the app.
apps/atrium-telegram/app/components/TaskActiveCard.vue (2)
2-15: LGTM! Clean refactor to use TaskInfoCard component.The simplified structure delegates task rendering to
TaskInfoCard, reducing duplication and improving maintainability.
78-83: LGTM! Good UX for completed tasks.The disabled "Задача закрыта" menu item provides clear feedback that the task is completed and no longer actionable.
apps/atrium-telegram/app/components/TaskList.vue (3)
2-14: LGTM! Clean header structure.The simplified header with
SectionTitleand conditional Create button is much more maintainable than the previous UPopover-based approach.
53-57: LGTM! TaskActiveCard integration.The switch from
TaskCardtoTaskActiveCardproperly integrates the newTaskInfoCard-based rendering.
60-62: LGTM! Centered empty state improves UX.Adding
text-centerto the empty state message provides better visual balance.
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/atrium-telegram/app/layouts/default.vue (1)
8-8: Minor timing mismatch between confetti duration and auto-hide.The confetti
durationis set to 4500ms, but the composable'spop()function resetsisShownafter 5000ms. This 500ms gap is minor but could be aligned for consistency.Consider aligning the durations:
- Either adjust the directive duration to 5000ms, or
- Update the composable timeout to match 4500ms
apps/atrium-telegram/app/composables/useConfetti.ts (1)
4-9: Consider handling rapid successive calls to pop().If
pop()is called multiple times in quick succession, multiple overlapping timeouts will be created. This could cause the confetti to hide prematurely or behave unexpectedly.Apply this diff to clear any pending timeout before starting a new one:
function _useConfetti() { const isShown = ref(false) + let timeoutId: ReturnType<typeof setTimeout> | null = null function pop() { + if (timeoutId !== null) { + clearTimeout(timeoutId) + } isShown.value = true - setTimeout(() => { + timeoutId = setTimeout(() => { isShown.value = false + timeoutId = null }, 5000) } return { isShown, pop } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/atrium-telegram/app/components/form/CompleteTask.vue(2 hunks)apps/atrium-telegram/app/composables/useConfetti.ts(1 hunks)apps/atrium-telegram/app/layouts/default.vue(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (2)
apps/atrium-telegram/app/components/form/CompleteTask.vue (1)
52-52: LGTM: Clean confetti integration.The confetti trigger is properly placed after successful task completion and before user feedback.
Also applies to: 81-81
apps/atrium-telegram/app/layouts/default.vue (1)
2-10: No issues found. The code correctly handles template ref availability through Vue 3's reactivity system.When
isShownisfalse, the confetti div is not rendered (v-if prevents DOM creation). WhenisShownbecomestrue, both the ref element and the directive mount in the same lifecycle phase. Vue's reactivity system ensures template expressions likeconfetti?.clientHeightare tracked as dependencies, so the binding value updates when the ref is assigned. @neoconfetti/vue treats the v-confetti binding reactively — when options change, the directive destroys the current confetti and creates a new one. The optional chaining operator (?.) provides defensive protection. This pattern is used across multiple production apps without issues.
1 participant
Summary by CodeRabbit
New Features
UI/UX Improvements
Removed Features
Bug Fixes