chore: inputs rework#100
Conversation
WalkthroughUI configuration and component sizes were updated across the app. Input-related UI slots gained a base ring style. Toast container received an additional CSS class. Date pickers in create/update forms were restructured into UPopover. A navigation route label/icon changed. A create-card is now conditionally hidden. CompleteTask removed toast usage. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant CompleteTask as CompleteTask.vue
participant API as Tasks API
participant Stores as Pinia Stores
User->>CompleteTask: Submit form
CompleteTask->>API: PATCH /tasks/:id complete
alt success
API-->>CompleteTask: 200 OK (task updated)
CompleteTask->>Stores: Update task/taskList state
CompleteTask->>User: Emit success + vibrate
else error
API-->>CompleteTask: 4xx/5xx
CompleteTask->>User: Emit error + vibrate
end
note over CompleteTask: Toast notifications removed
sequenceDiagram
autonumber
actor User
participant Form as Create/UpdateTask.vue
participant Popover as UPopover
participant Calendar as UCalendar
User->>Form: Focus date input
Form->>Popover: Open
Popover->>Calendar: Show calendar
User->>Calendar: Pick date / Clear via trailing button
Calendar-->>Form: selectedDate updated
Form->>Popover: Close on selection
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/atrium-telegram/app/components/form/CreateTask.vue (1)
105-106: Unify Chat Member DTO Shape Across Front-end and APIThere’s an inconsistency in how you access the member’s user ID in Vue components versus the server/API code. In some places you use the nested property (
m.user.id), and elsewhere you use the flattened property (member.userId), which will lead to silent filtering bugs.• Front-end components filtering by nested ID (needs updating):
– apps/atrium-telegram/app/components/form/CreateTask.vue (lines 105–106)
– apps/atrium-telegram/app/components/form/UpdateTask.vue (lines 117–118)
– apps/web-app/app/components/form/CreateTask.vue (line 106)
– apps/web-app/app/components/form/UpdateTask.vue (line 120)• Front-end components already using flat ID (may need aligning):
– apps/atrium-telegram/app/components/form/UpdateTaskList.vue (lines 86–87)
– apps/atrium-telegram/app/components/form/UpdateTask.vue (line 138)
– apps/web-app/app/components/form/UpdateTaskList.vue (line 88)
– apps/web-app/app/components/form/UpdateTask.vue (line 141)• Server/API guards and mutations using flat ID:
– apps/atrium-telegram/server/api/**.patch.ts & .delete.ts (multiple files)
– apps/web-app/server/api/.patch.ts & **.delete.ts (multiple files)Please choose one shape for the
ChatMemberDTO—either flatten touserId: stringor nest underuser: { id: string }—and update both the API interfaces and all front-end references accordingly to prevent silent mismatches.apps/atrium-telegram/app/components/form/UpdateTask.vue (1)
117-118: Ensure consistent member ID property across all filtersThe RG audit confirms that in several components you’re filtering chat members by the nested
m.user.id, while elsewhere you’re using the flatmember.userId. This divergence can lead to edge-case bugs if one of those properties is ever missing or out-of-sync. Please normalize on a single property throughout the codebase:• apps/atrium-telegram/app/components/form/UpdateTask.vue (lines 117, 138)
• apps/atrium-telegram/app/components/form/CreateTask.vue (line 105)
• apps/web-app/app/components/form/UpdateTask.vue (lines 120, 141)
• apps/web-app/app/components/form/CreateTask.vue (line 106)
• apps/web-app/app/components/TaskList.vue, TaskCard.vue, UpdateTaskList.vue
• apps/web-app/app/pages/index.vue, pages/staff/[id].vueRecommended fix:
– Decide whether the API should exposeuserIdon the member object, or always include the nesteduser.id.
– Update all frontend filters to use the chosen property (and, if necessary, adjust the API/data-layer to populate both for backward compatibility).This refactor is mandatory to prevent subtle authorization or filtering errors.
🧹 Nitpick comments (10)
apps/atrium-telegram/app/components/Navigation.vue (1)
48-49: Localize the hardcoded title to align with i18n usage in this fileUse t('app.epics') instead of a literal. Also ensure the key exists in locale files.
- title: 'Эпики', + title: t('app.epics'),apps/atrium-telegram/app/pages/index.vue (1)
47-52: Prefer v-show to avoid unmounting CreateCard on togglev-show preserves DOM state and focus when flipping isTodayOnly, reducing churn.
- <CreateCard - v-if="!taskStore.isTodayOnly" + <CreateCard + v-show="!taskStore.isTodayOnly" :label="$t('app.create.task-list.button')" icon="i-lucide-list-todo" @click="modalCreateTaskList.open()" />apps/atrium-telegram/app/app.vue (1)
5-8: Account for device safe areas in toaster offsetStatic mt-16 may overlap system UI on some devices. Consider safe-area-aware margin.
- :toaster="{ - position: 'top-center', - class: 'mt-16', - }" + :toaster="{ + position: 'top-center', + class: 'mt-[env(safe-area-inset-top)] md:mt-16', + }"apps/atrium-telegram/app/app.config.ts (2)
3-22: Confirm intent of global '!ring-muted' on input-like basesApplying a forced ring color at the base slot for input, inputMenu, selectMenu, and textarea may override focus/invalid/hover variants from Nuxt UI. Validate that:
- Disabled/invalid states still present correct ring colors.
- Focus-visible styles aren’t unintentionally muted.
If the goal is focus-only color, consider scoping to focus-visible instead of forcing on base.
51-51: Modal title size removed — double-check visual regressionTitle now drops the size token. If unintentional, restore previous size to maintain hierarchy.
- title: 'font-semibold', + title: 'text-lg/5 font-semibold',apps/atrium-telegram/app/components/form/CreateTask.vue (1)
44-68: Date input should be readonly and localized; add basic a11y hintsPrevent typing into a controlled date display and localize the placeholder. Also add a simple aria hint for the popover trigger.
- <UInput + <UInput :value="selectedDate ? df.format(selectedDate.toDate(getLocalTimeZone())) : ''" - placeholder="Выберите дату" + :placeholder="$t('common.select-date')" size="xl" class="w-full items-center justify-center cursor-pointer" :ui="{ trailing: 'pe-2' }" + readonly + aria-readonly="true" + aria-haspopup="dialog" >apps/atrium-telegram/app/components/form/UpdateTaskList.vue (1)
50-57: Icon-only Delete button lacks accessible nameProvide an accessible label (and optional title) for screen readers.
<UButton variant="soft" color="error" size="xl" icon="i-lucide-trash-2" class="aspect-square justify-center" + :aria-label="$t('common.delete')" + :title="$t('common.delete')" @click="onDelete" />apps/atrium-telegram/app/components/form/CompleteTask.vue (1)
63-86: Toast removal: confirm UX intent for task completionOther forms still use actionToast; this one now relies on vibration only. If intentional, all good. If not, consider restoring a minimal success/error toast for parity.
apps/atrium-telegram/app/components/form/UpdateTask.vue (2)
40-64: Date input: make readonly, localize placeholder, add a11y hintSame rationale as CreateTask.vue.
- <UInput + <UInput :value="selectedDate ? df.format(selectedDate.toDate(getLocalTimeZone())) : ''" - placeholder="Выберите дату" + :placeholder="$t('common.select-date')" size="xl" class="w-full items-center justify-center cursor-pointer" :ui="{ trailing: 'pe-2' }" + readonly + aria-readonly="true" + aria-haspopup="dialog" >
183-206: Toast consistency across formsThis component still uses actionToast, while CompleteTask.vue no longer does. Decide on a consistent pattern (toasts everywhere vs. inline/none) for predictable UX.
Also applies to: 208-230
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (10)
apps/atrium-telegram/app/app.config.ts(2 hunks)apps/atrium-telegram/app/app.vue(1 hunks)apps/atrium-telegram/app/components/Navigation.vue(1 hunks)apps/atrium-telegram/app/components/form/CompleteTask.vue(2 hunks)apps/atrium-telegram/app/components/form/CreateTask.vue(3 hunks)apps/atrium-telegram/app/components/form/CreateTaskList.vue(4 hunks)apps/atrium-telegram/app/components/form/UpdateTask.vue(4 hunks)apps/atrium-telegram/app/components/form/UpdateTaskList.vue(4 hunks)apps/atrium-telegram/app/components/form/UploadUserAvatar.vue(2 hunks)apps/atrium-telegram/app/pages/index.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 (6)
apps/atrium-telegram/app/components/form/UploadUserAvatar.vue (1)
13-13: UI size bump looks consistentSwitching input and button to size="xl" aligns with the PR’s sizing pass. No logic impact.
Also applies to: 23-23
apps/atrium-telegram/app/components/form/CreateTaskList.vue (1)
11-11: LGTM on size upgradesAll four controls moved to size="xl" consistently; matches broader rework.
Also applies to: 20-20, 35-35, 44-44
apps/atrium-telegram/app/components/form/CreateTask.vue (1)
16-16: LGTM: size uplift to xl aligns with the UI scale changeThe control sizing updates are consistent and cohesive across the form.
Also applies to: 25-25, 39-39, 74-74
apps/atrium-telegram/app/components/form/UpdateTaskList.vue (1)
11-11: LGTM: unified xl sizing for list form controlsConsistent with the PR’s global scale changes.
Also applies to: 21-21, 35-35, 45-45, 53-53
apps/atrium-telegram/app/components/form/CompleteTask.vue (1)
21-21: LGTM: xl sizing aligns with the updated design languageTextarea and submit button scale changes look good.
Also applies to: 30-30
apps/atrium-telegram/app/components/form/UpdateTask.vue (1)
15-15: LGTM: xl sizing applied consistently across controlsMatches the broader inputs rework.
Also applies to: 25-25, 35-35, 71-71, 81-81, 89-89
1 participant
Summary by CodeRabbit
Style
Refactor