Skip to content

feat: drawer on new epic comment #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hmbanan666 merged 1 commit into from
Aug 29, 2025
Merged

feat: drawer on new epic comment #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/atrium-telegram/app/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ export default defineAppConfig({
ui: {
input: {
slots: {
base: '!ring-muted placeholder:text-muted/25',
base: '!ring-muted placeholder:text-muted/50',
},
},
inputMenu: {
slots: {
base: '!ring-muted placeholder:text-muted/25',
base: '!ring-muted placeholder:text-muted/50',
},
},
selectMenu: {
slots: {
base: '!ring-muted placeholder:text-muted/25',
base: '!ring-muted placeholder:text-muted/50',
},
},
textarea: {
slots: {
base: '!ring-muted placeholder:text-muted/25',
base: '!ring-muted placeholder:text-muted/50',
},
},
button: {
Expand Down
1 change: 0 additions & 1 deletion apps/atrium-telegram/app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
position: 'top-center',
class: 'mt-20',
}"
class="min-h-svh"
>
<NuxtLoadingIndicator :color="false" class="bg-primary h-[2px]" />
<NuxtLayout>
Expand Down
2 changes: 1 addition & 1 deletion apps/atrium-telegram/app/assets/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
}

html, body {
background: transparent !important;
background: var(--tg-theme-secondary-bg-color, transparent) !important;
}

::-webkit-scrollbar {
Expand Down
3 changes: 2 additions & 1 deletion apps/atrium-telegram/app/components/form/CreateEpicComment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
class="flex flex-col gap-3"
@submit="onSubmit"
>
<UFormField label="Комментарий" name="text">
<UFormField label="Ваш комментарий" name="text">
<UTextarea
v-model="state.text"
placeholder="Напишите свою мысль..."
:rows="5"
autoresize
size="xl"
class="w-full"
Expand Down
2 changes: 1 addition & 1 deletion apps/atrium-telegram/app/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<main class="tg-bg-secondary tg-text tg-safe-area">
<main class="tg-text tg-safe-area">
<slot />
</main>

Expand Down
26 changes: 18 additions & 8 deletions apps/atrium-telegram/app/pages/epic/[epicId]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,28 @@
/>
</div>

<CreateCard
v-if="epic?.id"
:label="$t('app.create.epic-comment.button')"
icon="i-lucide-message-circle"
@click="modalCreateEpicComment.open({ epicId: 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>
Comment on lines +41 to +57
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

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.

</PageContainer>
</template>

<script setup lang="ts">
import { ModalCreateEpicComment, ModalUpdateEpic } from '#components'
import { ModalUpdateEpic } from '#components'

const { params } = useRoute('epic-epicId')

Expand All @@ -58,7 +69,6 @@ const epic = computed(() => epicStore.epics.find((e) => e.id === params.epicId))

const overlay = useOverlay()
const modalUpdateEpic = overlay.create(ModalUpdateEpic)
const modalCreateEpicComment = overlay.create(ModalCreateEpicComment)

function handleEditEpic() {
if (!epic.value?.id) {
Expand Down
5 changes: 5 additions & 0 deletions apps/atrium-telegram/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ export default defineNuxtConfig({
coreApiUrl: '',
},
},
app: {
rootAttrs: {
'data-vaul-drawer-wrapper': '',
},
},
ui: {
colorMode: true,
fonts: false,
Expand Down