feat: drawer on new epic comment#114
Conversation
WalkthroughSwitches epic comment creation from a modal to a Drawer-driven form, adjusts Telegram-themed background and placeholder opacities, tweaks minor classes and labels, and adds a root attribute via Nuxt config to support the Drawer wrapper. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant C as CreateCard
participant D as UDrawer
participant F as FormCreateEpicComment
participant O as Overlay
U->>C: Tap "Add comment"
C->>D: Open Drawer
D->>F: Mount form (epicId = epic?.id ?? "")
U->>F: Fill & submit
F-->>O: Emit success/close
O-->>D: closeAll()
D-->>U: Drawer closed
note over D,F: Drawer replaces previous modal flow
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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/atrium-telegram/app/components/form/CreateEpicComment.vue (1)
19-29: Prevent duplicate submissions and ignore whitespace-only input.Users can tap Send multiple times; button only checks truthy text, so whitespace passes and double posts can occur. Disable during submit and require trimmed content.
Apply:
- <UButton + <UButton type="submit" variant="solid" color="secondary" size="xl" icon="i-lucide-send" block class="mt-3" - :disabled="!state.text" + :loading="submitting" + :disabled="submitting || !state.text?.trim()" :label="$t('common.send')" />And in <script setup>:
const state = ref<Partial<CreateEpicComment>>({ text: undefined, }) +const submitting = ref(false) + async function onSubmit(event: FormSubmitEvent<CreateEpicComment>) { emit('submitted') try { - await $fetch(`/api/epic/id/${epicId}/comment`, { + submitting.value = true + const body = { ...event.data, text: event.data.text.trim() } + await $fetch(`/api/epic/id/${epicId}/comment`, { method: 'POST', headers: { Authorization: `tma ${userStore.initDataRaw}`, + 'Content-Type': 'application/json', }, - body: event.data, + body, }) @@ vibrate('success') emit('success') } catch (error) { console.error(error) vibrate('error') + } finally { + submitting.value = false } }
🧹 Nitpick comments (1)
apps/atrium-telegram/app/components/form/CreateEpicComment.vue (1)
54-60: Guard missing auth and surface an actionable error.If initDataRaw is absent/expired, request will 401. Consider a quick guard to notify and abort before the call.
Example:
- await $fetch(`/api/epic/id/${epicId}/comment`, { + if (!userStore.initDataRaw) { + vibrate('error') + return + } + await $fetch(`/api/epic/id/${epicId}/comment`, {
📜 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 (7)
apps/atrium-telegram/app/app.config.ts(1 hunks)apps/atrium-telegram/app/app.vue(0 hunks)apps/atrium-telegram/app/assets/css/styles.css(1 hunks)apps/atrium-telegram/app/components/form/CreateEpicComment.vue(1 hunks)apps/atrium-telegram/app/layouts/default.vue(1 hunks)apps/atrium-telegram/app/pages/epic/[epicId]/index.vue(1 hunks)apps/atrium-telegram/nuxt.config.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/atrium-telegram/app/app.vue
⏰ 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 (7)
apps/atrium-telegram/app/components/form/CreateEpicComment.vue (1)
8-13: Copy & UX tweak looks good.Label update and fixed initial height via rows improve clarity and stability with autoresize.
apps/atrium-telegram/app/layouts/default.vue (1)
2-2: Background source changed — verify page fill and Drawer overlay.Dropping tg-bg-secondary relies on html/body bg (styles.css). Ensure short pages still render full-height background behind the Drawer and content (no “striped” areas). If gaps appear, add min-h-dvh on main.
apps/atrium-telegram/app/app.config.ts (1)
5-21: Placeholder opacity change acknowledged.The /50 opacity improves readability; aligns across inputs/menus/textarea. No action needed.
apps/atrium-telegram/app/assets/css/styles.css (1)
108-110: Good move to theme-driven background.Using var(--tg-theme-secondary-bg-color, transparent) on html, body centralizes theming and matches the layout change.
apps/atrium-telegram/nuxt.config.ts (1)
31-35: Confirm Nuxt support for app.rootAttrs; fallback to app.vue if not.Some Nuxt versions don’t render app.rootAttrs. If unsupported, Vaul won’t find data-vaul-drawer-wrapper and body scroll locking can break. Alternative: set the attribute on the root element in app.vue.
Proposed fallback in app.vue (template):
<template> <UApp> <div data-vaul-drawer-wrapper> <NuxtLayout /> </div> </UApp> </template>Or attach directly on the root wrapper you control.
apps/atrium-telegram/app/pages/epic/[epicId]/index.vue (2)
62-62: LGTM: keep only ModalUpdateEpic importImport cleanup aligned with Drawer-based creation flow.
41-57: Verify UDrawer API and Vaul wrapper configuration
- UDrawer isn’t defined in this repo—please confirm (against your UI library/docs) that it exposes a #trigger slot and properly handles the should-scale-background and set-background-color-on-scale props.
- The
data-vaul-drawer-wrapperentry inapps/atrium-telegram/nuxt.config.tsunderapp.rootAttrsis present.
| <UDrawer should-scale-background :set-background-color-on-scale="false"> | ||
| <CreateCard | ||
| v-if="epic?.id" | ||
| :label="$t('app.create.epic-comment.button')" | ||
| icon="i-lucide-message-circle" | ||
| /> | ||
|
|
||
| <template #content> | ||
| <div class="p-4"> | ||
| <FormCreateEpicComment | ||
| :epic-id="epic?.id ?? ''" | ||
| @submitted="overlay.closeAll" | ||
| @success="overlay.closeAll" | ||
| /> | ||
| </div> | ||
| </template> | ||
| </UDrawer> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Close only this drawer and guard epic-id; avoid overlay.closeAll side effects
Using overlay.closeAll may not close this Drawer and can nuke unrelated overlays. Also, passing '' to epic-id risks invalid submissions. Control the Drawer locally and gate the form on epic.id.
- <UDrawer should-scale-background :set-background-color-on-scale="false">
- <CreateCard
- v-if="epic?.id"
- :label="$t('app.create.epic-comment.button')"
- icon="i-lucide-message-circle"
- />
-
- <template #content>
- <div class="p-4">
- <FormCreateEpicComment
- :epic-id="epic?.id ?? ''"
- @submitted="overlay.closeAll"
- @success="overlay.closeAll"
- />
- </div>
- </template>
- </UDrawer>
+ <UDrawer v-model:open="isCreateOpen" should-scale-background :set-background-color-on-scale="false">
+ <template #trigger>
+ <CreateCard
+ v-if="epic?.id"
+ :label="$t('app.create.epic-comment.button')"
+ icon="i-lucide-message-circle"
+ />
+ </template>
+ <template #content>
+ <div class="p-4">
+ <FormCreateEpicComment
+ v-if="epic?.id"
+ :epic-id="epic.id"
+ @submitted="isCreateOpen = false"
+ @success="isCreateOpen = false"
+ />
+ </div>
+ </template>
+ </UDrawer>Add in <script setup>:
const isCreateOpen = ref(false)🤖 Prompt for AI Agents
In apps/atrium-telegram/app/pages/epic/[epicId]/index.vue around lines 41–57,
avoid using overlay.closeAll and passing an empty string for epic-id; add a
local boolean ref (e.g., isCreateOpen) in <script setup> and bind it to the
UDrawer open prop, toggle it from the CreateCard click handler to open/close
this drawer only, replace @submitted and @success handlers to set
isCreateOpen.value = false (instead of overlay.closeAll), and guard the form by
rendering FormCreateEpicComment only when epic?.id is truthy (or pass
:epic-id="epic.id" without falling back to ''), so invalid submissions are
prevented and only this drawer is closed.
1 participant
Summary by CodeRabbit
New Features
Style