chore: epic comment add action rework

apps/atrium-telegram/app/components/ActiveCard.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="relative active:scale-95 duration-200" @click="vibrate()">
+  <button class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0" @click="vibrate()">
     <Section>
       <slot />
     </Section>
-  </div>
+  </button>
 </template>
 
 <script setup lang="ts">

apps/atrium-telegram/app/components/Section.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 tg-bg-section group/section space-y-3.5 rounded-lg">
+  <div class="relative p-4 tg-bg-section group/section space-y-3.5 rounded-lg">
     <slot />
   </div>
 </template>

apps/atrium-telegram/app/components/form/CreateEpicComment.vue

@@ -1,71 +1,73 @@
 <template>
-  <UCard
-    variant="subtle"
-    class="mt-auto bg-elevated/25"
+  <UForm
+    :validate="createValidator(createEpicCommentSchema)"
+    :state="state"
+    class="flex flex-col gap-3"
+    @submit="onSubmit"
   >
-    <form
-      class="flex flex-col gap-4"
-      @submit.prevent="onCommentSubmit"
-    >
+    <UFormField label="Комментарий" name="text">
       <UTextarea
-        v-model="text"
-        color="neutral"
-        variant="none"
-        size="xl"
-        required
-        autoresize
+        v-model="state.text"
         placeholder="Напишите свою мысль..."
-        :rows="3"
-        :disabled="loading"
+        autoresize
+        size="xl"
         class="w-full"
-        :ui="{ base: 'p-1' }"
       />
+    </UFormField>
 
-      <div class="flex items-center justify-end gap-2">
-        <UButton
-          type="submit"
-          color="secondary"
-          size="md"
-          :loading="loading"
-          :disabled="!text"
-          label="Добавить комментарий"
-          icon="i-lucide-send"
-          :ui="{
-            base: 'px-3 rounded-full',
-            label: 'font-medium',
-          }"
-        />
-      </div>
-    </form>
-  </UCard>
+    <UButton
+      type="submit"
+      variant="solid"
+      color="secondary"
+      size="xl"
+      icon="i-lucide-send"
+      block
+      class="mt-3"
+      :disabled="!state.text"
+      :label="$t('common.send')"
+    />
+  </UForm>
 </template>
 
 <script setup lang="ts">
+import type { CreateEpicComment } from '#shared/services/epic'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { createEpicCommentSchema } from '#shared/services/epic'
+
 const { epicId } = defineProps<{ epicId: string }>()
 
+const emit = defineEmits(['success', 'submitted'])
+
 const { vibrate } = useFeedback()
+const userStore = useUserStore()
 const epicStore = useEpicStore()
 
-const text = ref('')
-const loading = ref(false)
-
-async function onCommentSubmit() {
-  const trimmed = text.value.trim()
-  if (!trimmed) {
-    return
-  }
+const state = ref<Partial<CreateEpicComment>>({
+  text: undefined,
+})
 
-  loading.value = true
+async function onSubmit(event: FormSubmitEvent<CreateEpicComment>) {
+  emit('submitted')
 
   try {
-    await epicStore.addComment(epicId, trimmed)
-    text.value = ''
+    await $fetch(`/api/epic/id/${epicId}/comment`, {
+      method: 'POST',
+      headers: {
+        Authorization: `tma ${userStore.initDataRaw}`,
+      },
+      body: event.data,
+    })
+
+    await Promise.all([
+      epicStore.update(),
+      userStore.update(),
+    ])
+
     vibrate('success')
-  } catch (e) {
-    console.error(e)
+    emit('success')
+  } catch (error) {
+    console.error(error)
     vibrate('error')
-  } finally {
-    loading.value = false
   }
 }
 </script>

apps/atrium-telegram/app/components/modal/CreateEpicComment.vue

@@ -0,0 +1,19 @@
+<template>
+  <UModal :title="$t('app.create.epic-comment.title')">
+    <template #body>
+      <FormCreateEpicComment
+        :epic-id="epicId"
+        @submitted="overlay.closeAll"
+        @success="overlay.closeAll"
+      />
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  epicId: string
+}>()
+
+const overlay = useOverlay()
+</script>

apps/atrium-telegram/app/pages/epic/[epicId]/index.vue

@@ -38,12 +38,17 @@
       />
     </div>
 
-    <FormCreateEpicComment v-if="epic?.id" :epic-id="epic.id" />
+    <CreateCard
+      v-if="epic?.id"
+      :label="$t('app.create.epic-comment.button')"
+      icon="i-lucide-message-circle"
+      @click="modalCreateEpicComment.open({ epicId: epic.id })"
+    />
   </PageContainer>
 </template>
 
 <script setup lang="ts">
-import { ModalUpdateEpic } from '#components'
+import { ModalCreateEpicComment, ModalUpdateEpic } from '#components'
 
 const { params } = useRoute('epic-epicId')
 
@@ -53,6 +58,7 @@ 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) {

apps/atrium-telegram/app/stores/epic.ts

@@ -38,31 +38,6 @@ export const useEpicStore = defineStore('epic', () => {
     }
   }
 
-  async function addComment(epicId: string, text: string) {
-    try {
-      await $fetch(`/api/epic/id/${epicId}/comment`, {
-        method: 'POST',
-        headers: {
-          Authorization: `tma ${initDataRaw.value}`,
-        },
-        body: {
-          text,
-        },
-      })
-
-      await update()
-    } catch (error) {
-      if (error instanceof Error) {
-        if (error.message.includes('401')) {
-          // No
-        }
-        if (error.message.includes('404')) {
-          // Not found
-        }
-      }
-    }
-  }
-
   async function removeComment(id: string) {
     try {
       await $fetch(`/api/epic/comment/id/${id}`, {
@@ -89,7 +64,6 @@ export const useEpicStore = defineStore('epic', () => {
     epics,
 
     update,
-    addComment,
     removeComment,
   }
 })

apps/atrium-telegram/i18n/locales/ru-RU.json

@@ -40,6 +40,10 @@
         "button": "Создать эпик",
         "title": "Создание эпика"
       },
+      "epic-comment": {
+        "button": "Создать комментарий",
+        "title": "Создание комментария"
+      },
       "beacon": {
         "button": "Создать маяк",
         "title": "Создание маяка"

apps/atrium-telegram/server/api/epic/id/[epicId]/comment.post.ts

@@ -19,7 +19,7 @@ export default defineEventHandler(async (event) => {
     }
 
     const comment = await repository.epic.createComment({
-      ...data,
+      text: data.text.trim(),
       userId: event.context.user.id,
       epicId,
     })