From 4429c914d6f86fad0917a830262133b91e5af9e4 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Fri, 19 Sep 2025 16:07:14 +0200
Subject: [PATCH] chore: visual updates

---
 apps/atrium-telegram/app/app.config.ts        |  2 +-
 .../app/components/ActiveCard.vue             |  8 ++-
 .../app/components/ticket/MessageFile.vue     | 33 ++++++------
 .../app/components/ticket/MessageImage.vue    |  2 +-
 .../app/components/ticket/MessageText.vue     |  2 +-
 .../atrium-telegram/app/pages/tasks/index.vue |  4 +-
 .../app/pages/ticket/[ticketId]/index.vue     | 52 ++++++++++++-------
 .../app/pages/ticket/index.vue                | 27 ++++++----
 8 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/apps/atrium-telegram/app/app.config.ts b/apps/atrium-telegram/app/app.config.ts
index 85d985d7..60c80d10 100644
--- a/apps/atrium-telegram/app/app.config.ts
+++ b/apps/atrium-telegram/app/app.config.ts
@@ -60,7 +60,7 @@ export default defineAppConfig({
       slots: {
         header: 'text-xl/6 font-bold font-headers',
         body: 'mb-12 hide-scroll',
-        content: '!max-h-10/12 ring-default hide-scroll',
+        content: '!max-h-10/12 ring-default/50 hide-scroll',
       },
     },
     navigationMenu: {
diff --git a/apps/atrium-telegram/app/components/ActiveCard.vue b/apps/atrium-telegram/app/components/ActiveCard.vue
index c58a0aba..17c597cf 100644
--- a/apps/atrium-telegram/app/components/ActiveCard.vue
+++ b/apps/atrium-telegram/app/components/ActiveCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <button class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0" @click="vibrate()">
+  <button
+    class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0"
+    :class="props.class"
+    @click="vibrate()"
+  >
     <Section>
       <slot />
     </Section>
@@ -7,5 +11,7 @@
 </template>
 
 <script setup lang="ts">
+const props = defineProps<{ class?: string }>()
+
 const { vibrate } = useFeedback()
 </script>
diff --git a/apps/atrium-telegram/app/components/ticket/MessageFile.vue b/apps/atrium-telegram/app/components/ticket/MessageFile.vue
index 15624625..4bd91b47 100644
--- a/apps/atrium-telegram/app/components/ticket/MessageFile.vue
+++ b/apps/atrium-telegram/app/components/ticket/MessageFile.vue
@@ -1,17 +1,20 @@
 <template>
   <div class="w-2/3 relative flex flex-col justify-between gap-1.5">
-    <div class="py-4 flex flex-col gap-2 items-center justify-center border border-default rounded-lg">
-      <UIcon :name="getFileData(message.fileType).icon" class="size-10 text-primary" />
+    <ActiveCard>
+      <div class="w-full relative flex flex-col justify-between gap-2">
+        <div class="p-2 w-16 h-10 flex flex-row items-center justify-center bg-primary rounded-md">
+          <UIcon :name="getFileData(message.fileType).icon" class="size-6 tg-text-button" />
+        </div>
 
-      <UButton
-        variant="soft"
-        color="secondary"
-        :label="getFileData(message.fileType).label"
-      />
-    </div>
-    <div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
-      {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
-    </div>
+        <div class="text-base/5 whitespace-break-spaces text-default font-medium">
+          {{ getFileData(message.fileType).label }}
+        </div>
+
+        <div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
+          {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
+        </div>
+      </div>
+    </ActiveCard>
   </div>
 </template>
 
@@ -29,22 +32,22 @@ function getFileData(type: TicketMessage['fileType']) {
     case 'image':
       return {
         icon: 'i-lucide-image',
-        label: 'Прикреплено фото',
+        label: 'Загружено фото',
       }
     case 'video':
       return {
         icon: 'i-lucide-video',
-        label: 'Прикреплено видео',
+        label: 'Загружено видео',
       }
     case 'document':
       return {
         icon: 'i-lucide-file',
-        label: 'Прикреплен документ',
+        label: 'Загружен документ',
       }
     default:
       return {
         icon: 'i-lucide-file',
-        label: 'Прикреплен файл',
+        label: 'Загружен файл',
       }
   }
 }
diff --git a/apps/atrium-telegram/app/components/ticket/MessageImage.vue b/apps/atrium-telegram/app/components/ticket/MessageImage.vue
index 02696934..73ff83fb 100644
--- a/apps/atrium-telegram/app/components/ticket/MessageImage.vue
+++ b/apps/atrium-telegram/app/components/ticket/MessageImage.vue
@@ -3,7 +3,7 @@
     <img
       :src="message.fileUrl"
       alt=""
-      class="w-full h-full object-contain rounded-lg"
+      class="w-full h-full object-contain rounded-lg active:scale-95 duration-200"
     >
     <div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
       {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
diff --git a/apps/atrium-telegram/app/components/ticket/MessageText.vue b/apps/atrium-telegram/app/components/ticket/MessageText.vue
index 48e760d9..eccfccee 100644
--- a/apps/atrium-telegram/app/components/ticket/MessageText.vue
+++ b/apps/atrium-telegram/app/components/ticket/MessageText.vue
@@ -1,5 +1,5 @@
 <template>
-  <ActiveCard>
+  <ActiveCard class="!w-fit min-w-2/3">
     <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">
diff --git a/apps/atrium-telegram/app/pages/tasks/index.vue b/apps/atrium-telegram/app/pages/tasks/index.vue
index 096fd760..7672676a 100644
--- a/apps/atrium-telegram/app/pages/tasks/index.vue
+++ b/apps/atrium-telegram/app/pages/tasks/index.vue
@@ -3,7 +3,7 @@
     <div class="flex flex-row gap-3.5 items-center">
       <UAvatar
         :src="userStore?.avatarUrl ?? undefined"
-        class="size-14 cursor-pointer hover:scale-95 active:scale-90 duration-200"
+        class="size-14 border-2 border-primary hover:scale-95 active:scale-90 duration-200"
         @click="handleUploadUserAvatar"
       />
 
@@ -16,7 +16,7 @@
             Сегодня по плану еще
             <ULink
               as="button"
-              class="font-semibold underline underline-offset-4 decoration-dashed decoration-1 cursor-pointer"
+              class="font-semibold underline underline-offset-4 decoration-dashed decoration-1"
               :class="[
                 taskStore.isTodayOnly ? 'tg-text' : 'text-secondary',
               ]"
diff --git a/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue b/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
index 5f166681..688b15a15 100644
--- a/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
+++ b/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
@@ -3,6 +3,14 @@
     <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" />
+
+        <UButton
+          variant="soft"
+          color="primary"
+          size="xl"
+          icon="i-lucide-pencil"
+          @click="handleEdit()"
+        />
       </div>
 
       <h1 class="text-2xl/6 font-bold">
@@ -30,23 +38,27 @@
       </div>
     </Section>
 
-    <div class="w-full flex flex-col gap-3.5 flex-1">
-      <UDrawer v-model:open="isDrawerOpened">
-        <CreateCard
-          label="Написать сообщение"
-          icon="i-lucide-message-circle"
-          class="mb-4"
-        />
+    <UDrawer v-model:open="isDrawerOpened">
+      <UButton
+        variant="solid"
+        color="secondary"
+        size="xl"
+        block
+        class="items-center justify-center"
+        icon="i-lucide-message-circle"
+        label="Написать сообщение"
+      />
 
-        <template #body>
-          <FormCreateTicketMessage
-            :ticket-id="ticket?.id ?? ''"
-            @submitted="isDrawerOpened = false"
-            @success="isDrawerOpened = false"
-          />
-        </template>
-      </UDrawer>
+      <template #body>
+        <FormCreateTicketMessage
+          :ticket-id="ticket?.id ?? ''"
+          @submitted="isDrawerOpened = false"
+          @success="isDrawerOpened = false"
+        />
+      </template>
+    </UDrawer>
 
+    <div class="w-full flex flex-col gap-3.5 flex-1">
       <TicketMessage
         v-for="message in messages"
         :key="message.id"
@@ -56,10 +68,10 @@
 
       <UButton
         v-if="isShowMore"
-        variant="soft"
-        color="primary"
+        variant="solid"
+        color="secondary"
         size="xl"
-        class="mt-6 mx-auto w-fit items-center justify-center"
+        class="mt-6 mx-auto px-8 w-fit items-center justify-center"
         icon="i-lucide-message-circle-more"
         :label="$t('common.show-more')"
         @click="handleClickShowMore()"
@@ -94,4 +106,8 @@ function handleClickShowMore() {
   vibrate('success')
   shownMessages.value += 10
 }
+
+function handleEdit() {
+  vibrate()
+}
 </script>
diff --git a/apps/atrium-telegram/app/pages/ticket/index.vue b/apps/atrium-telegram/app/pages/ticket/index.vue
index 23dc49cb..584d4aad 100644
--- a/apps/atrium-telegram/app/pages/ticket/index.vue
+++ b/apps/atrium-telegram/app/pages/ticket/index.vue
@@ -1,15 +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="flex flex-col gap-2.5">
+      <div class="text-2xl/6 font-bold tracking-tight">
+        Активные тикеты
+      </div>
+      <div class="flex flex-col gap-4">
+        <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>
+    </div>
   </PageContainer>
 </template>