feat: epic pages and cards

apps/atrium-telegram/app/app.vue

@@ -57,6 +57,7 @@ watch(colorMode, () => {
 // Init Stores
 const user = useUserStore()
 const task = useTaskStore()
+const epic = useEpicStore()
 
 // Guard
 await user.update()
@@ -72,13 +73,15 @@ onMounted(async () => {
     user.updateOnline(),
     user.update(),
     task.update(),
+    epic.update(),
   ])
 
   interval = setInterval(async () => {
     await Promise.all([
       user.updateOnline(),
       user.update(),
       task.update(),
+      epic.update(),
     ])
   }, 30000)
 })

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="relative active:scale-90 duration-200 motion-preset-slide-left" @click="vibrate()">
+    <Section>
+      <slot />
+    </Section>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { vibrate } = useFeedback()
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 justify-center items-center h-full min-h-40 border-2 border-default border-dashed rounded-lg">
+  <div class="flex flex-col gap-4 justify-center items-center h-full min-h-32 border-2 border-default border-dashed rounded-lg">
     <UIcon :name="icon" class="size-10 text-muted/50" />
 
     <UButton

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

@@ -0,0 +1,38 @@
+<template>
+  <ActiveCard class="w-full flex flex-col gap-3.5">
+    <UIcon name="i-lucide-crown" class="size-8 text-primary" />
+
+    <h3 class="text-lg/5 font-bold">
+      {{ epic.title }}
+    </h3>
+
+    <div class="w-full text-base/5 text-muted/50 whitespace-pre-wrap break-words line-clamp-3">
+      {{ epic.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>{{ epic?.comments.length }}</p>
+        </div>
+      </div>
+
+      <time
+        :datetime="epic.createdAt"
+        class="text-sm text-muted"
+        v-text="format(new Date(epic.createdAt), 'от d MMMM yyyy', { locale: ru })"
+      />
+    </div>
+  </ActiveCard>
+</template>
+
+<script setup lang="ts">
+import type { EpicWithData } from '~/stores/epic'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+defineProps<{
+  epic: EpicWithData
+}>()
+</script>

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

@@ -0,0 +1,106 @@
+<template>
+  <UDropdownMenu
+    :items="items"
+    :ui="{
+      content: 'w-48',
+    }"
+    :content="{
+      sideOffset: -12,
+    }"
+  >
+    <UButton
+      color="neutral"
+      variant="link"
+      active
+      :ui="{
+        base: 'p-0',
+      }"
+      class="group/message relative text-left scroll-mt-4 motion-preset-slide-down-right"
+    >
+      <div class="min-w-[60%] relative flex items-start gap-2 pb-2 rtl:justify-end">
+        <div class="inline-flex items-center justify-center min-h-6 mt-1.5">
+          <UAvatar :src="user?.avatarUrl ?? undefined" />
+        </div>
+
+        <div class="min-h-12 w-full bg-elevated/25 px-3.5 py-2 flex flex-col gap-2.5 rounded-lg ring ring-default">
+          <div class="flex flex-col gap-1">
+            <div v-if="comment?.createdAt" class="mt-1 flex justify-start text-xs text-dimmed">
+              {{ format(new Date(comment.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
+            </div>
+
+            <div class="text-sm/4 whitespace-break-spaces text-default text-pretty font-medium">
+              {{ comment?.text }}
+            </div>
+          </div>
+
+          <div v-if="comment?.notifications?.length" class="flex flex-row flex-wrap gap-1">
+            <UserBeacon
+              v-for="notification in comment.notifications"
+              :key="notification.id"
+              :notification="notification"
+            />
+          </div>
+        </div>
+      </div>
+    </UButton>
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { ModalCreateEpicCommentBeacon } from '#components'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+const { epicId, commentId } = defineProps<{
+  epicId: string
+  commentId: string
+}>()
+
+const overlay = useOverlay()
+const modalCreateEpicCommentBeacon = overlay.create(ModalCreateEpicCommentBeacon)
+
+const epicStore = useEpicStore()
+const userStore = useUserStore()
+
+const epic = computed(() => epicStore.epics.find((epic) => epic.id === epicId))
+const comment = computed(() => epic.value?.comments.find((comment) => comment.id === commentId))
+const user = computed(() => userStore.find(comment.value?.userId ?? ''))
+
+const items = computed<DropdownMenuItem[]>(() => {
+  const menuItems: DropdownMenuItem[] = [
+    {
+      label: 'Маякнуть',
+      icon: 'i-lucide-users-round',
+      color: 'neutral',
+      disabled: false,
+      onSelect: () => modalCreateEpicCommentBeacon.open({ commentId }),
+      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)
+})
+</script>

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

@@ -11,15 +11,15 @@
           <div
             class="relative py-1 w-full rounded-2xl flex flex-row items-center justify-center"
             :class="[
-              router.currentRoute.value.path === route.path && 'tg-bg-button tg-text-button motion-translate-y-in',
+              (route.exact ? router.currentRoute.value.path === route.path : router.currentRoute.value.path.startsWith(route.path)) && 'tg-bg-button tg-text-button motion-translate-y-in',
             ]"
           >
             <UIcon :name="route.icon" class="size-6" />
           </div>
           <p
             class="text-xs font-medium"
             :class="[
-              router.currentRoute.value.path === route.path && 'tg-text',
+              (route.exact ? router.currentRoute.value.path === route.path : router.currentRoute.value.path.startsWith(route.path)) && 'tg-text',
             ]"
           >
             {{ route.title }}
@@ -41,6 +41,7 @@ const mainRoutes = computed(() => [
     name: 'home',
     title: t('app.home'),
     icon: 'i-lucide-layout-dashboard',
+    exact: true,
   },
   {
     path: '/epic',

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

@@ -1,6 +1,6 @@
 <template>
   <div class="z-30 overflow-hidden h-full min-h-dvh w-full tg-content-safe-area">
-    <div class="px-4 py-2 max-w-[28rem] mx-auto flex flex-col gap-y-6">
+    <div class="px-4 py-2 max-w-[28rem] mx-auto mb-20 flex flex-col gap-y-6">
       <slot />
     </div>
   </div>

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

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

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

@@ -36,7 +36,7 @@
       }"
       :ui="{
         content: 'w-48',
-        item: 'p-2',
+        item: 'p-2 motion-preset-slide-left motion-duration-200',
       }"
     >
       <UButton

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 rounded-lg tg-bg-section group/list space-y-3.5">
+  <Section>
     <div class="flex flex-row gap-2 items-center justify-between">
       <div class="flex flex-row gap-2.5 items-center">
         <UPopover
@@ -87,7 +87,7 @@
         Активных задач нет
       </p>
     </template>
-  </div>
+  </Section>
 </template>
 
 <script setup lang="ts">

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

@@ -0,0 +1,71 @@
+<template>
+  <UCard
+    variant="subtle"
+    class="mt-auto bg-elevated/25"
+  >
+    <form
+      class="flex flex-col gap-4"
+      @submit.prevent="onCommentSubmit"
+    >
+      <UTextarea
+        v-model="text"
+        color="neutral"
+        variant="none"
+        size="xl"
+        required
+        autoresize
+        placeholder="Напишите свою мысль..."
+        :rows="3"
+        :disabled="loading"
+        class="w-full"
+        :ui="{ base: 'p-1' }"
+      />
+
+      <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>
+</template>
+
+<script setup lang="ts">
+const { epicId } = defineProps<{ epicId: string }>()
+
+const { vibrate } = useFeedback()
+const epicStore = useEpicStore()
+
+const text = ref('')
+const loading = ref(false)
+
+async function onCommentSubmit() {
+  const trimmed = text.value.trim()
+  if (!trimmed) {
+    return
+  }
+
+  loading.value = true
+
+  try {
+    await epicStore.addComment(epicId, trimmed)
+    text.value = ''
+    vibrate('success')
+  } catch (e) {
+    console.error(e)
+    vibrate('error')
+  } finally {
+    loading.value = false
+  }
+}
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <UModal :title="$t('app.create.epic.title')">
+    <template #body>
+      <FormCreateEpic @submitted="overlay.closeAll" @success="overlay.closeAll" />
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const overlay = useOverlay()
+</script>

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

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

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

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