fix

src/components/Badge.vue

@@ -21,7 +21,7 @@ import { computed } from 'vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 
 const props = defineProps({
-  /** @type {import('vue').PropType<'neutral' | 'success' | 'danger' | 'warning' | 'primary' | 'info' | 'cyan'>} */
+  /** @type {import('vue').PropType<'neutral' | 'success' | 'danger' | 'warning' | 'primary' | 'info' | 'cyan' | 'blue'>} */
   variant: { type: String, default: 'neutral' },
   /** @type {import('vue').PropType<'sm' | 'md' | 'lg'>} */
   size: { type: String, default: 'md' },
@@ -138,5 +138,10 @@ const onClick = (event) => {
     background: rgba(104, 104, 104, 10%);
     color: #686868;
   }
+
+  &--blue {
+    background: rgba(0, 72, 255, 8%);
+    color: #0048ff;
+  }
 }
 </style>

src/components/DropdownMenu.vue

@@ -29,7 +29,7 @@
                 v-if="item.icon"
                 :name="item.icon"
                 :size="16"
-                :color="item.iconColor ?? item.color"
+                :color="item.iconColor ?? item.color ?? 'currentColor'"
                 class="dropdown-menu__icon"
               />
               <span class="dropdown-menu__label">{{ item.label }}</span>

src/components/HeaderBlock.vue

@@ -11,7 +11,10 @@
       </div>
       <div class="header-block__title">
         <slot>
-          <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
+          <div v-if="pageTitle || pageSubtitle" class="header-block__heading">
+            <span v-if="pageSubtitle" class="header-block__heading-eyebrow">{{ pageTitle }}</span>
+            <span>{{ pageSubtitle || pageTitle }}</span>
+          </div>
         </slot>
       </div>
       <div class="header-block__icons">
@@ -27,7 +30,10 @@
     </div>
     <div class="header-block__title-mobile">
       <slot>
-        <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
+        <div v-if="pageTitle || pageSubtitle" class="header-block__heading">
+          <span v-if="pageSubtitle" class="header-block__heading-eyebrow">{{ pageTitle }}</span>
+          <span>{{ pageSubtitle || pageTitle }}</span>
+        </div>
       </slot>
     </div>
 
@@ -43,22 +49,20 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUIStore } from '@/store/ui'
 import { gallery } from '@/utils/gallery'
 import useAuth from '@/composables/useAuth'
-import { computed, ref, useSlots } from 'vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import { useLogoutMutation } from '@/services/query/auth'
 
 defineProps({
   pageTitle: { type: String, default: '' },
+  pageSubtitle: { type: String, default: '' },
 })
 
-const slots = useSlots()
-const hasSlotContent = computed(() => !!slots.default)
-
 const ui = useUIStore()
 const router = useRouter()
 const { clearSession } = useAuth()
@@ -176,6 +180,18 @@ const iconList = [
     }
   }
 
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__heading-eyebrow {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: #a7a7a7;
+  }
+
   &__icons {
     flex-basis: 33.33%;
 

src/components/blocks/MessageAttachments.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="message-attachments">
+    <template v-for="item in media" :key="item.id">
+      <a
+        v-if="isImage(item)"
+        :href="item.url"
+        target="_blank"
+        rel="noopener"
+        class="message-attachments__image-link"
+      >
+        <img :src="item.url" :alt="item.fileName" class="message-attachments__image" />
+      </a>
+      <a
+        v-else
+        :href="item.downloadUrl || item.url"
+        target="_blank"
+        rel="noopener"
+        class="message-attachments__file"
+      >
+        <SvgIcon name="file" :size="18" color="currentColor" />
+        <span class="message-attachments__name">{{ item.fileName }}</span>
+        <span class="message-attachments__size">{{ formatFileSize(item.fileSize) }}</span>
+      </a>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+
+defineProps({
+  media: { type: Array, default: () => [] },
+})
+
+const isImage = (item) =>
+  (item.mimeType || '').startsWith('image/') || /\.(jpe?g|png|gif|webp)$/i.test(item.fileName || '')
+
+const formatFileSize = (bytes) => {
+  if (!bytes) return ''
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+}
+</script>
+
+<style lang="scss" scoped>
+.message-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+
+  &__image-link {
+    display: block;
+    max-width: 16rem;
+  }
+
+  &__image {
+    display: block;
+    width: 100%;
+    max-height: 12rem;
+    object-fit: cover;
+    border-radius: 0.625rem;
+  }
+
+  &__file {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    border-radius: 0.625rem;
+    background: rgba(0, 0, 0, 8%);
+    color: inherit;
+    text-decoration: none;
+    max-width: 100%;
+
+    &:hover {
+      background: rgba(0, 0, 0, 14%);
+    }
+  }
+
+  &__name {
+    font-family: var(--font-family-fa);
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__size {
+    font-family: var(--font-family-en);
+    font-size: 0.65rem;
+    opacity: 0.75;
+    white-space: nowrap;
+  }
+}
+</style>

src/components/blocks/TabsBlock.vue

@@ -126,7 +126,7 @@ const onActionClick = (tab) => {
     gap: 0.375rem;
     background: rgba(255, 255, 255, 80%);
     box-shadow: 0 10px 15px -3px rgba(241, 241, 241, 100%);
-    padding: 0.875rem;
+    padding: 0.775rem;
     border-radius: 0.75rem;
   }
 
@@ -144,7 +144,8 @@ const onActionClick = (tab) => {
     &--desktop {
       display: none;
       min-width: fit-content;
-      margin-block-end: 0.625rem;
+
+      // margin-block-end: 0.625rem;
 
       @media (min-width: 768px) {
         display: flex;
@@ -162,7 +163,7 @@ const onActionClick = (tab) => {
   }
 
   &__action-btn {
-    padding: 0 1.25rem;
+    height: 100%;
     min-width: fit-content;
   }
 

src/components/form/DatePickerField.vue

@@ -14,7 +14,7 @@
       @click="toggle"
     >
       <span class="datepicker-field__value">{{ displayValue }}</span>
-      <SvgIcon name="calendar" :size="20" class="datepicker-field__icon" />
+      <SvgIcon name="calendar" :size="20" color="#DDDDDD" class="datepicker-field__icon" />
     </div>
 
     <div v-if="error" class="datepicker-field__error" :class="{ 'animate-shake': vibration }">
@@ -377,6 +377,7 @@ export default {
         this.$emit('change', gregorian)
         this.close()
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error('Error in handleConfirm:', error)
       }
     },

src/components/form/ImageCropper.vue

@@ -325,8 +325,7 @@ onBeforeUnmount(cleanup)
       margin: 0;
 
       @media (min-width: 1024px) {
-        font-size: 0.75rem;
-        line-height: 1.85rem;
+        font-size: 0.7rem;
       }
     }
   }

src/components/icons/icon-names.d.ts

@@ -36,13 +36,16 @@ export type IconName =
   | 'map-pin-simple-area'
   | 'menu'
   | 'microphone'
+  | 'monitor'
   | 'mood'
+  | 'newspaper'
   | 'paper-plane'
   | 'paper-plane-right'
   | 'pencil'
   | 'phone'
   | 'play'
   | 'plus'
+  | 'power'
   | 'scroll'
   | 'shopping-bag'
   | 'smiley-sad'