From 851da166576dec0a75e22e84374603391a396532 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Fri, 19 Sep 2025 11:00:16 +0200
Subject: [PATCH 1/2] feat: show tickets page

---
 apps/atrium-telegram/app/app.vue              |   8 +-
 .../app/components/TicketCard.vue             |  38 +++++
 .../app/components/TicketMessage.vue          | 135 ++++++++++++++++++
 .../app/composables/useNavigation.ts          |   8 +-
 apps/atrium-telegram/app/pages/index.vue      |   4 +
 apps/atrium-telegram/app/pages/startapp.vue   |   3 +
 .../app/pages/ticket/[ticketId]/index.vue     |  79 ++++++++++
 .../app/pages/ticket/index.vue                |  22 +++
 apps/atrium-telegram/app/stores/ticket.ts     |  44 ++++++
 apps/atrium-telegram/i18n/locales/ru-RU.json  |   4 +-
 .../server/api/ticket/list.get.ts             |   5 +
 packages/database/src/repository/ticket.ts    |   5 +-
 12 files changed, 345 insertions(+), 10 deletions(-)
 create mode 100644 apps/atrium-telegram/app/components/TicketCard.vue
 create mode 100644 apps/atrium-telegram/app/components/TicketMessage.vue
 create mode 100644 apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
 create mode 100644 apps/atrium-telegram/app/pages/ticket/index.vue
 create mode 100644 apps/atrium-telegram/app/stores/ticket.ts
 create mode 100644 apps/atrium-telegram/server/api/ticket/list.get.ts

diff --git a/apps/atrium-telegram/app/app.vue b/apps/atrium-telegram/app/app.vue
index 2209e0b3..907f0ce6 100644
--- a/apps/atrium-telegram/app/app.vue
+++ b/apps/atrium-telegram/app/app.vue
@@ -60,7 +60,7 @@ watch(colorMode, () => {
 // Init Stores
 const user = useUserStore()
 const task = useTaskStore()
-const epic = useEpicStore()
+const ticket = useTicketStore()
 const kitchen = useKitchenStore()
 const flow = useFlowStore()
 
@@ -79,7 +79,7 @@ onMounted(async () => {
     user.updateOnline(),
     user.update(),
     task.update(),
-    epic.update(),
+    ticket.update(),
     kitchen.update(),
     flow.update(),
   ])
@@ -89,11 +89,11 @@ onMounted(async () => {
       user.updateOnline(),
       user.update(),
       task.update(),
-      epic.update(),
+      ticket.update(),
       kitchen.update(),
       flow.update(),
     ])
-  }, 30000)
+  }, 20000)
 })
 
 onUnmounted(() => {
diff --git a/apps/atrium-telegram/app/components/TicketCard.vue b/apps/atrium-telegram/app/components/TicketCard.vue
new file mode 100644
index 00000000..beeac332
--- /dev/null
+++ b/apps/atrium-telegram/app/components/TicketCard.vue
@@ -0,0 +1,38 @@
+<template>
+  <ActiveCard>
+    <UIcon name="i-lucide-mail-question-mark" class="size-8 text-primary" />
+
+    <h3 class="text-xl/5 font-bold">
+      {{ ticket.title }}
+    </h3>
+
+    <div class="w-full text-base/5 font-normal whitespace-pre-wrap break-words line-clamp-5">
+      {{ ticket.description }}
+    </div>
+
+    <div class="flex justify-between items-center">
+      <div class="flex flex-row gap-4">
+        <div class="flex flex-row gap-1.5 items-center text-muted">
+          <UIcon name="i-lucide-message-circle" class="size-5" />
+          <p>{{ ticket?.messages.length }}</p>
+        </div>
+      </div>
+
+      <time
+        :datetime="ticket.updatedAt"
+        class="text-sm text-muted"
+        v-text="format(new Date(ticket.updatedAt), 'обновлен d MMMM yyyy', { locale: ru })"
+      />
+    </div>
+  </ActiveCard>
+</template>
+
+<script setup lang="ts">
+import type { TicketWithData } from '~/stores/ticket'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+defineProps<{
+  ticket: TicketWithData
+}>()
+</script>
diff --git a/apps/atrium-telegram/app/components/TicketMessage.vue b/apps/atrium-telegram/app/components/TicketMessage.vue
new file mode 100644
index 00000000..9ff1f27d
--- /dev/null
+++ b/apps/atrium-telegram/app/components/TicketMessage.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="flex flex-row gap-2 items-start">
+    <div class="mt-2.5">
+      <UAvatar :src="user?.avatarUrl ?? undefined" />
+    </div>
+    <div class="w-full flex flex-col gap-1.5">
+      <UDropdownMenu
+        :items="items"
+        :ui="{
+          content: 'w-56',
+          item: 'p-2 motion-preset-slide-left motion-duration-200',
+        }"
+        :content="{
+          sideOffset: -32,
+        }"
+      >
+        <ActiveCard>
+          <div class="w-full relative flex flex-col justify-between gap-2">
+            <div class="flex flex-col gap-1">
+              <div class="text-base/5 whitespace-break-spaces text-default font-medium">
+                {{ message?.text }}
+              </div>
+
+              <div v-if="message?.fileUrl">
+                <UButton
+                  variant="solid"
+                  color="secondary"
+                  :icon="getFileIcon(message.fileType)"
+                  @click="handleFileClick(message.fileUrl)"
+                >
+                  Прикрепленный файл
+                </UButton>
+              </div>
+
+              <div v-if="message?.createdAt" class="mt-1 flex justify-end text-xs text-muted">
+                {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
+              </div>
+            </div>
+          </div>
+        </ActiveCard>
+      </UDropdownMenu>
+
+      <!-- <div v-if="message?.notifications?.length" class="-mt-4 ml-4 flex flex-row flex-wrap gap-1">
+        <UserBeacon
+          v-for="notification in comment.notifications"
+          :key="notification.id"
+          :notification="notification"
+        />
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+const { ticketId, messageId } = defineProps<{
+  ticketId: string
+  messageId: string
+}>()
+
+// const overlay = useOverlay()
+// const modalCreateEpicCommentBeacon = overlay.create(ModalCreateEpicCommentBeacon)
+
+const ticketStore = useTicketStore()
+const userStore = useUserStore()
+
+const ticket = computed(() => ticketStore.tickets.find((t) => t.id === ticketId))
+const message = computed(() => ticket.value?.messages.find((m) => m.id === messageId))
+const user = computed(() => userStore.find(message.value?.userId ?? ''))
+
+const items = computed<DropdownMenuItem[]>(() => {
+  const menuItems: DropdownMenuItem[] = [
+    {
+      label: 'Скопировать сообщение',
+      icon: 'i-lucide-copy',
+      color: 'neutral',
+      disabled: false,
+      onSelect: () => navigator.clipboard.writeText(message.value?.text ?? ''),
+      condition: true,
+    },
+    // {
+    //   label: 'Маякнуть (будет позже)',
+    //   icon: 'i-lucide-users-round',
+    //   color: 'neutral',
+    //   disabled: true,
+    //   onSelect: () => modalCreateEpicCommentBeacon.open({ messageId }),
+    //   condition: true,
+    // },
+    {
+      label: 'Лайкнуть (будет позже)',
+      icon: 'i-lucide-thumbs-up',
+      color: 'neutral',
+      disabled: true,
+      onSelect: () => {},
+      condition: user.value?.id !== userStore.id,
+    },
+    {
+      label: 'Редактировать',
+      icon: 'i-lucide-edit',
+      disabled: true,
+      onSelect: () => {},
+      condition: user.value?.id === userStore.id,
+    },
+    {
+      label: 'Удалить',
+      icon: 'i-lucide-trash-2',
+      disabled: true,
+      onSelect: () => {},
+      condition: user.value?.id === userStore.id,
+    },
+  ]
+
+  return menuItems.filter((item) => item.condition)
+})
+
+function getFileIcon(type: 'image' | 'video' | 'document' | null) {
+  switch (type) {
+    case 'image':
+      return 'i-lucide-image'
+    case 'video':
+      return 'i-lucide-video'
+    case 'document':
+      return 'i-lucide-file'
+    default:
+      return 'i-lucide-file'
+  }
+}
+
+function handleFileClick(fileUrl: string) {
+  window.open(fileUrl, '_blank')
+}
+</script>
diff --git a/apps/atrium-telegram/app/composables/useNavigation.ts b/apps/atrium-telegram/app/composables/useNavigation.ts
index cb9b8deb..793314b0 100644
--- a/apps/atrium-telegram/app/composables/useNavigation.ts
+++ b/apps/atrium-telegram/app/composables/useNavigation.ts
@@ -16,10 +16,10 @@ function _useNavigation() {
       badge: flowStore.nowViewedItemsCount.toString(),
     },
     {
-      path: '/epic',
-      names: ['epic', 'epic-epicId'],
-      title: t('app.epics'),
-      icon: 'i-lucide-crown',
+      path: '/ticket',
+      names: ['ticket', 'ticket-ticketId'],
+      title: t('app.tickets'),
+      icon: 'i-lucide-mail-question-mark',
     },
     {
       path: '/tasks',
diff --git a/apps/atrium-telegram/app/pages/index.vue b/apps/atrium-telegram/app/pages/index.vue
index 6e5e115a..d2eca897 100644
--- a/apps/atrium-telegram/app/pages/index.vue
+++ b/apps/atrium-telegram/app/pages/index.vue
@@ -34,6 +34,10 @@
         </NuxtLink>
       </div>
     </div>
+
+    <div class="mt-16 flex flex-row justify-center">
+      <UIcon name="i-lucide-route" class="size-8 text-dimmed/25" />
+    </div>
   </PageContainer>
 </template>
 
diff --git a/apps/atrium-telegram/app/pages/startapp.vue b/apps/atrium-telegram/app/pages/startapp.vue
index ed7a950f..a9bd5623 100644
--- a/apps/atrium-telegram/app/pages/startapp.vue
+++ b/apps/atrium-telegram/app/pages/startapp.vue
@@ -27,6 +27,9 @@ if (tgWebAppStartParam?.length && tgWebAppStartParam.includes(separator)) {
     case 'epic':
       await navigateTo({ path: `/epic/${value}`, query })
       break
+    case 'ticket':
+      await navigateTo({ path: `/ticket/${value}`, query })
+      break
     default:
       await navigateTo('/')
   }
diff --git a/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue b/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
new file mode 100644
index 00000000..b548881e
--- /dev/null
+++ b/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <PageContainer>
+    <Section>
+      <div class="flex flex-row items-start justify-between gap-2.5">
+        <UIcon name="i-lucide-mail-question-mark" class="size-10 text-primary" />
+      </div>
+
+      <h1 class="text-2xl/6 font-bold">
+        {{ ticket?.title }}
+      </h1>
+
+      <div class="w-full text-base/5 whitespace-pre-wrap break-words">
+        {{ ticket?.description }}
+      </div>
+    </Section>
+
+    <Section class="flex flex-row justify-between items-center">
+      <div class="flex flex-row items-center gap-2">
+        <UIcon name="i-lucide-message-circle" class="size-5" />
+        {{ ticket?.messages.length }} {{ pluralizationRu(ticket?.messages.length ?? 0, ['сообщение', 'сообщения', 'сообщений']) }}
+      </div>
+    </Section>
+
+    <div class="w-full flex flex-col gap-3.5 flex-1 last-of-type:mb-20">
+      <TicketMessage
+        v-for="message in messages"
+        :key="message.id"
+        :ticket-id="message.ticketId"
+        :message-id="message.id"
+      />
+
+      <UButton
+        v-if="isShowMore"
+        variant="solid"
+        color="secondary"
+        size="xl"
+        class="w-full items-center justify-center"
+        icon="i-lucide-message-circle"
+        :label="$t('common.show-more')"
+        @click="shownMessages += 10"
+      />
+    </div>
+
+    <!-- <UDrawer v-model:open="isDrawerOpened">
+      <CreateCard
+        v-if="epic?.id"
+        :label="$t('app.create.epic-comment.button')"
+        icon="i-lucide-message-circle"
+      />
+
+      <template #body>
+        <FormCreateEpicComment
+          :epic-id="epic?.id ?? ''"
+          @submitted="isDrawerOpened = false"
+          @success="isDrawerOpened = false"
+        />
+      </template>
+    </UDrawer> -->
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  name: 'ticket-ticketId',
+  canReturn: true,
+})
+
+const { params } = useRoute('ticket-ticketId')
+
+const ticketStore = useTicketStore()
+const ticket = computed(() => ticketStore.tickets.find((e) => e.id === params.ticketId))
+
+// On load show last 10 messages. On button click = show more 10 messages
+const shownMessages = ref(10)
+const messages = computed(() => ticket.value?.messages.slice(0, shownMessages.value))
+const isShowMore = computed<boolean>(() => messages.value?.length && ticket.value?.messages.length ? messages.value.length < ticket.value.messages.length : false)
+
+// const isDrawerOpened = ref(false)
+</script>
diff --git a/apps/atrium-telegram/app/pages/ticket/index.vue b/apps/atrium-telegram/app/pages/ticket/index.vue
new file mode 100644
index 00000000..1d61b447
--- /dev/null
+++ b/apps/atrium-telegram/app/pages/ticket/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <PageContainer>
+    <NuxtLink
+      v-for="ticket of ticketStore.tickets"
+      :key="ticket.id"
+      :to="`/ticket/${ticket.id}`"
+      class="motion-preset-slide-left"
+    >
+      <TicketCard :ticket="ticket">
+        {{ ticket.title }}
+      </TicketCard>
+    </NuxtLink>
+
+    <div class="mt-16 flex flex-row justify-center">
+      <UIcon name="i-lucide-route" class="size-8 text-dimmed/25" />
+    </div>
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+const ticketStore = useTicketStore()
+</script>
diff --git a/apps/atrium-telegram/app/stores/ticket.ts b/apps/atrium-telegram/app/stores/ticket.ts
new file mode 100644
index 00000000..c665e257
--- /dev/null
+++ b/apps/atrium-telegram/app/stores/ticket.ts
@@ -0,0 +1,44 @@
+import type { Ticket, TicketMessage, User } from '@roll-stack/database'
+import { initDataRaw as _initDataRaw, useSignal } from '@telegram-apps/sdk-vue'
+
+export type TicketWithData = Ticket & {
+  messages: TicketMessage[]
+  lastMessage: TicketMessage | null
+  user: User
+}
+
+export const useTicketStore = defineStore('ticket', () => {
+  const tickets = ref<TicketWithData[]>([])
+
+  const initDataRaw = useSignal(_initDataRaw)
+
+  async function update() {
+    try {
+      const data = await $fetch('/api/ticket/list', {
+        headers: {
+          Authorization: `tma ${initDataRaw.value}`,
+        },
+      })
+      if (!data) {
+        return
+      }
+
+      tickets.value = data
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message.includes('401')) {
+          // No session
+        }
+        if (error.message.includes('404')) {
+          // Not found
+        }
+      }
+    }
+  }
+
+  return {
+    tickets,
+
+    update,
+  }
+})
diff --git a/apps/atrium-telegram/i18n/locales/ru-RU.json b/apps/atrium-telegram/i18n/locales/ru-RU.json
index f0d89a6f..8a52519d 100644
--- a/apps/atrium-telegram/i18n/locales/ru-RU.json
+++ b/apps/atrium-telegram/i18n/locales/ru-RU.json
@@ -17,11 +17,13 @@
     "send": "Отправить",
     "upload": "Загрузить",
     "detach": "Открепить",
-    "select": "Выберите"
+    "select": "Выберите",
+    "show-more": "Показать еще"
   },
   "app": {
     "flow": "Поток",
     "epics": "Эпики",
+    "tickets": "Тикеты",
     "my-tasks": "Мои задачи",
     "resolution": "Резолюция",
     "report": "Небольшой отчет",
diff --git a/apps/atrium-telegram/server/api/ticket/list.get.ts b/apps/atrium-telegram/server/api/ticket/list.get.ts
new file mode 100644
index 00000000..bf99512d
--- /dev/null
+++ b/apps/atrium-telegram/server/api/ticket/list.get.ts
@@ -0,0 +1,5 @@
+import { repository } from '@roll-stack/database'
+
+export default defineEventHandler(async () => {
+  return repository.ticket.listOpened()
+})
diff --git a/packages/database/src/repository/ticket.ts b/packages/database/src/repository/ticket.ts
index 7199bb91..74bacfb5 100644
--- a/packages/database/src/repository/ticket.ts
+++ b/packages/database/src/repository/ticket.ts
@@ -17,8 +17,11 @@ export class Ticket {
   static async listOpened() {
     return useDatabase().query.tickets.findMany({
       where: (tickets, { eq }) => eq(tickets.status, 'opened'),
+      orderBy: (tickets, { desc }) => desc(tickets.updatedAt),
       with: {
-        messages: true,
+        messages: {
+          orderBy: (ticketMessages, { desc }) => desc(ticketMessages.createdAt),
+        },
         lastMessage: true,
         user: true,
       },

From 461b98f6f5944cfac41c769c41ff904ba1b66088 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Fri, 19 Sep 2025 11:08:53 +0200
Subject: [PATCH 2/2] chore: update

---
 .../app/components/TicketMessage.vue                | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/atrium-telegram/app/components/TicketMessage.vue b/apps/atrium-telegram/app/components/TicketMessage.vue
index 9ff1f27d..a5da2611 100644
--- a/apps/atrium-telegram/app/components/TicketMessage.vue
+++ b/apps/atrium-telegram/app/components/TicketMessage.vue
@@ -21,7 +21,7 @@
                 {{ message?.text }}
               </div>
 
-              <div v-if="message?.fileUrl">
+              <div v-if="message?.fileUrl && message.fileType !== 'image'">
                 <UButton
                   variant="solid"
                   color="secondary"
@@ -31,6 +31,14 @@
                   Прикрепленный файл
                 </UButton>
               </div>
+              <div v-else-if="message?.fileUrl && message.fileType === 'image'">
+                <img
+                  :src="message.fileUrl"
+                  alt=""
+                  class="w-full h-full object-contain rounded-lg"
+                  @click="handleFileClick(message.fileUrl)"
+                >
+              </div>
 
               <div v-if="message?.createdAt" class="mt-1 flex justify-end text-xs text-muted">
                 {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
@@ -53,6 +61,7 @@
 
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
+import type { TicketMessage } from '@roll-stack/database'
 import { format } from 'date-fns'
 import { ru } from 'date-fns/locale/ru'
 
@@ -116,7 +125,7 @@ const items = computed<DropdownMenuItem[]>(() => {
   return menuItems.filter((item) => item.condition)
 })
 
-function getFileIcon(type: 'image' | 'video' | 'document' | null) {
+function getFileIcon(type: TicketMessage['fileType']) {
   switch (type) {
     case 'image':
       return 'i-lucide-image'