Skip to content

chore: visual updates #174

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
Sep 19, 2025
Merged

chore: visual updates #174

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
2 changes: 1 addition & 1 deletion apps/atrium-telegram/app/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
8 changes: 7 additions & 1 deletion apps/atrium-telegram/app/components/ActiveCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<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()"
>
Comment on lines +2 to +6
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 19, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

Don’t declare class as a prop; rely on Vue’s native class merging.

class is special in Vue and auto‑merges to the root; declaring it as a prop is unnecessary and can cause surprises. Drop the prop and binding.

Apply:

-  <button
-    class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0"
-    :class="props.class"
-    @click="vibrate()"
-  >
+  <button
+    class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0"
+    type="button"
+    @click="vibrate()"
+  >

And:

-const props = defineProps<{ class?: string }>()
-
 const { vibrate } = useFeedback()
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button
class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0"
:class="props.class"
@click="vibrate()"
>
const { vibrate } = useFeedback()
<button
class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0"
type="button"
@click="vibrate()"
>
🤖 Prompt for AI Agents 
In apps/atrium-telegram/app/components/ActiveCard.vue around lines 2–6, the
template declares and binds a `class` prop (":class=\"props.class\"") which is
unnecessary because Vue automatically merges classes on the root element; remove
the `class` prop declaration from the component props and delete the
`:class="props.class"` binding in the template so parent classes merge natively;
if the component needs to forward other attributes, ensure it uses
v-bind="$attrs" (or enable inheritAttrs) so other attributes still pass through.

<Section>
<slot />
</Section>
</button>
</template>

<script setup lang="ts">
const props = defineProps<{ class?: string }>()

const { vibrate } = useFeedback()
</script>
33 changes: 18 additions & 15 deletions apps/atrium-telegram/app/components/ticket/MessageFile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Comment on lines +3 to +17
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 19, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

No way to open/download the attachment after removing the button.

Add a click handler (or link) to open message.fileUrl; keep vibrate via ActiveCard.

Apply:

-    <ActiveCard>
+    <ActiveCard
+      @click="handleOpenAttachment"
+      :aria-label="getFileData(message.fileType).label"
+    >

Add handler:

 ]>()
 
 function getFileData(type: TicketMessage['fileType']) {
   switch (type) {
@@
   }
 }
+
+function handleOpenAttachment() {
+  if (message?.fileUrl) {
+    window.open(message.fileUrl, '_blank', 'noopener,noreferrer')
+  }
+}
🤖 Prompt for AI Agents 
In apps/atrium-telegram/app/components/ticket/MessageFile.vue around lines 3-17,
the attachment UI no longer offers any way to open or download the file after
the button was removed; add an interactive handler on the card (or wrap the file
area in an anchor) that opens message.fileUrl. Implement by wiring a click
handler on the ActiveCard container (or using an <a> with target="_blank"
rel="noopener noreferrer" and download when appropriate) that opens
message.fileUrl in a new tab; keep the existing ActiveCard vibrate behavior and
ensure the click is accessible (cursor pointer, aria-label) and guards against
missing URL before opening.

</div>
</template>

Expand All @@ -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: 'Загружен файл',
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion apps/atrium-telegram/app/components/ticket/MessageImage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) }}
Expand Down
2 changes: 1 addition & 1 deletion apps/atrium-telegram/app/components/ticket/MessageText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
4 changes: 2 additions & 2 deletions apps/atrium-telegram/app/pages/tasks/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>

Expand All @@ -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',
]"
Expand Down
52 changes: 34 additions & 18 deletions apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand All @@ -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()"
Expand Down Expand Up @@ -94,4 +106,8 @@ function handleClickShowMore() {
vibrate('success')
shownMessages.value += 10
}

function handleEdit() {
vibrate()
}
</script>
27 changes: 17 additions & 10 deletions apps/atrium-telegram/app/pages/ticket/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Expand Down