feat: flow item view (#153)

hmbanan666 · web-flow · commit d2bc6b2fce83 · 2025-09-15T11:18:53.000+02:00
* feat: flow item view

* fix: rollup
diff --git a/apps/atrium-telegram/app/components/EpicCard.vue b/apps/atrium-telegram/app/components/EpicCard.vue
@@ -2,11 +2,11 @@
   <ActiveCard>
     <UIcon name="i-lucide-crown" class="size-8 text-primary" />
 
-    <h3 class="text-lg/5 font-bold">
+    <h3 class="text-xl/5 font-bold">
       {{ epic.title }}
     </h3>
 
-    <div class="w-full text-sm/4 text-muted font-normal whitespace-pre-wrap break-words line-clamp-4">
+    <div class="w-full text-base/5 font-normal whitespace-pre-wrap break-words line-clamp-5">
       {{ epic.description }}
     </div>
 
diff --git a/apps/atrium-telegram/app/components/Navigation.vue b/apps/atrium-telegram/app/components/Navigation.vue
@@ -1,5 +1,20 @@
 <template>
-  <div class="z-50 touch-pan-x sticky inset-0 h-24">
+  <div class="z-50 touch-pan-x sticky inset-0 h-38">
+    <div class="w-full h-14 px-4 py-0 flex flex-row flex-nowrap gap-0 items-start justify-center transition-all duration-200 ease-in-out">
+      <UButton
+        v-if="isMainPage"
+        variant="solid"
+        color="secondary"
+        size="xl"
+        class="transition-all duration-200 ease-in-out motion-preset-slide-down motion-duration-200"
+        icon="i-lucide-plus"
+        :ui="{
+          base: 'size-12 font-bold rounded-full',
+          leadingIcon: 'size-6 mx-auto',
+        }"
+      />
+    </div>
+
     <nav
       v-if="isNavigationShown"
       class="w-full h-24 tg-bg-bottom-bar border-t border-default rounded-t-lg motion-preset-slide-up"
@@ -16,5 +31,5 @@
 </template>
 
 <script setup lang="ts">
-const { isNavigationShown, mainRoutes } = useNavigation()
+const { isNavigationShown, mainRoutes, isMainPage } = useNavigation()
 </script>
diff --git a/apps/atrium-telegram/app/components/NavigationButton.vue b/apps/atrium-telegram/app/components/NavigationButton.vue
@@ -22,7 +22,8 @@
       <UChip
         v-else
         size="3xl"
-        :show="!!route.badge"
+        color="error"
+        :show="!!route.badge && route.badge !== '0'"
         :text="route.badge"
         :ui="{
           base: '-right-1 px-1.5 py-2 ring-2 tg-text-button font-bold motion-translate-y-loop-25 motion-duration-3500',
diff --git a/apps/atrium-telegram/app/components/flow/FeedbackAverage.vue b/apps/atrium-telegram/app/components/flow/FeedbackAverage.vue
@@ -5,10 +5,10 @@
         <UIcon name="i-lucide-users-round" class="size-8 text-primary" />
 
         <div class="flex flex-row items-end gap-1 font-bold">
-          <h3 class="text-3xl/5">
+          <h3 class="text-2xl/5 font-bold">
             {{ averageFeedback }}
           </h3>
-          <p class="text-xl/4">
+          <p class="text-lg/4">
             из 5
           </p>
         </div>
diff --git a/apps/atrium-telegram/app/components/flow/ItemCard.vue b/apps/atrium-telegram/app/components/flow/ItemCard.vue
@@ -1,8 +1,20 @@
 <template>
   <ActiveCard>
-    <UIcon name="i-lucide-clipboard-check" class="size-8 text-primary" />
+    <div class="flex flex-row gap-2 items-center">
+      <UIcon name="i-lucide-clipboard-check" class="size-8 text-primary" />
 
-    <h3 class="text-2xl/5 font-bold">
+      <div v-if="!isViewed" class="flex flex-row items-center gap-1.5 text-error">
+        <UIcon
+          name="i-lucide-pointer"
+          class="size-8 motion-translate-y-loop-25 motion-preset-seesaw motion-duration-2000"
+        />
+        <p class="max-w-22 text-sm/4 font-bold">
+          Не просмотрено
+        </p>
+      </div>
+    </div>
+
+    <h3 class="text-xl/5 font-bold">
       {{ item.title }}
     </h3>
 
@@ -31,7 +43,10 @@
 import { format } from 'date-fns'
 import { ru } from 'date-fns/locale/ru'
 
-defineProps<{
+const { item } = defineProps<{
   item: FlowItemWithData
 }>()
+
+const userStore = useUserStore()
+const isViewed = computed(() => item.views.some((view) => view.userId === userStore?.id))
 </script>
diff --git a/apps/atrium-telegram/app/components/flow/KitchensOnline.vue b/apps/atrium-telegram/app/components/flow/KitchensOnline.vue
@@ -10,7 +10,7 @@
         >
           <UIcon name="i-lucide-store" class="size-8 text-primary" />
         </UChip>
-        <h3 class="text-3xl/5 font-bold">
+        <h3 class="text-2xl/5 font-bold">
           {{ kitchensOnline }}
         </h3>
       </div>
diff --git a/apps/atrium-telegram/app/components/flow/OrderAmountAverage.vue b/apps/atrium-telegram/app/components/flow/OrderAmountAverage.vue
@@ -4,10 +4,10 @@
       <div class="flex flex-row gap-2 items-center">
         <UIcon name="i-lucide-receipt-text" class="size-8 text-primary" />
         <div class="flex flex-row items-end gap-1 font-bold">
-          <h3 class="text-3xl/5">
+          <h3 class="text-2xl/5 font-bold">
             {{ averageToday }}
           </h3>
-          <p class="text-xl/4">
+          <p class="text-lg/4">
             ₽
           </p>
         </div>
diff --git a/apps/atrium-telegram/app/components/flow/OrdersOnline.vue b/apps/atrium-telegram/app/components/flow/OrdersOnline.vue
@@ -3,7 +3,7 @@
     <div class="flex flex-col gap-2">
       <div class="flex flex-row gap-2 items-center">
         <UIcon name="i-lucide-shopping-bag" class="size-8 text-primary" />
-        <h3 class="text-3xl/5 font-bold">
+        <h3 class="text-2xl/5 font-bold">
           {{ kitchenStore.todayData?.ordersForNow }}
         </h3>
       </div>
diff --git a/apps/atrium-telegram/app/composables/useNavigation.ts b/apps/atrium-telegram/app/composables/useNavigation.ts
@@ -4,6 +4,7 @@ function _useNavigation() {
   const { y } = useWindowScroll()
 
   const taskStore = useTaskStore()
+  const flowStore = useFlowStore()
 
   const mainRoutes = computed<NavigationRoute[]>(() => [
     {
@@ -12,6 +13,7 @@ function _useNavigation() {
       title: t('app.flow'),
       icon: 'i-lucide-waves',
       exact: true,
+      badge: flowStore.nowViewedItemsCount.toString(),
     },
     {
       path: '/epic',
diff --git a/apps/atrium-telegram/app/pages/epic/[epicId]/index.vue b/apps/atrium-telegram/app/pages/epic/[epicId]/index.vue
@@ -13,9 +13,9 @@
         />
       </div>
 
-      <h2 class="text-xl font-bold">
+      <h1 class="text-2xl/6 font-bold">
         {{ epic?.title }}
-      </h2>
+      </h1>
 
       <div class="w-full text-base/5 whitespace-pre-wrap break-words">
         {{ epic?.description }}
diff --git a/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue b/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue
@@ -5,14 +5,28 @@
         <UIcon name="i-lucide-clipboard-check" class="size-10 text-primary" />
       </div>
 
-      <h2 class="text-2xl/6 font-bold">
+      <h1 class="text-2xl/6 font-bold">
         {{ item?.title }}
-      </h2>
+      </h1>
 
       <div class="w-full text-base/5 whitespace-pre-wrap break-words">
         {{ item?.description }}
       </div>
     </Section>
+
+    <Section class="flex flex-col">
+      <h3 class="text-muted">
+        Посмотрели
+      </h3>
+
+      <div class="flex flex-row gap-2">
+        <UAvatar
+          v-for="view in item?.views"
+          :key="view.id"
+          :src="userStore.getAvatarUrl(view.userId)"
+        />
+      </div>
+    </Section>
   </PageContainer>
 </template>
 
@@ -24,6 +38,15 @@ definePageMeta({
 
 const { params } = useRoute('flow-itemId')
 
+const userStore = useUserStore()
 const flowStore = useFlowStore()
 const item = computed(() => flowStore.items.find((item) => item.id === params.itemId))
+
+const isViewed = computed(() => item.value?.views.some((view) => view.userId === userStore?.id))
+
+watch(isViewed, () => {
+  if (!isViewed.value && item.value?.id) {
+    flowStore.addView(item.value.id)
+  }
+}, { immediate: true })
 </script>
diff --git a/apps/atrium-telegram/app/pages/tasks/index.vue b/apps/atrium-telegram/app/pages/tasks/index.vue
@@ -8,9 +8,9 @@
       />
 
       <div class="flex flex-col gap-1">
-        <h2 class="text-lg/5 font-bold">
+        <h1 class="text-2xl/6 font-bold tracking-tight">
           {{ userStore.name }}, привет!
-        </h2>
+        </h1>
         <p class="text-base/5">
           <template v-if="taskStore.myTodayTasks.length">
             Сегодня по плану еще
diff --git a/apps/atrium-telegram/app/stores/flow.ts b/apps/atrium-telegram/app/stores/flow.ts
@@ -3,6 +3,8 @@ import { initDataRaw as _initDataRaw, useSignal } from '@telegram-apps/sdk-vue'
 export const useFlowStore = defineStore('flow', () => {
   const items = ref<FlowItemWithData[]>([])
 
+  const nowViewedItemsCount = computed(() => items.value.filter((item) => !item.views.some((view) => view.userId === useUserStore().id)).length)
+
   const initDataRaw = useSignal(_initDataRaw)
 
   async function update() {
@@ -29,9 +31,34 @@ export const useFlowStore = defineStore('flow', () => {
     }
   }
 
+  async function addView(itemId: string) {
+    try {
+      await $fetch(`/api/flow/id/${itemId}/view`, {
+        method: 'POST',
+        headers: {
+          Authorization: `tma ${initDataRaw.value}`,
+        },
+      })
+
+      await update()
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message.includes('401')) {
+          // No
+        }
+        if (error.message.includes('404')) {
+          // Not found
+        }
+      }
+    }
+  }
+
   return {
     items,
 
+    nowViewedItemsCount,
+
     update,
+    addView,
   }
 })
diff --git a/apps/atrium-telegram/app/stores/user.ts b/apps/atrium-telegram/app/stores/user.ts
@@ -111,6 +111,11 @@ export const useUserStore = defineStore('user', () => {
     return users.value.find((user) => user.id === userId)
   }
 
+  function getAvatarUrl(userId: string): string | undefined {
+    const user = users.value.find((user) => user.id === userId)
+    return user?.avatarUrl ?? undefined
+  }
+
   return {
     id,
     name,
@@ -131,5 +136,6 @@ export const useUserStore = defineStore('user', () => {
     update,
     updateOnline,
     find,
+    getAvatarUrl,
   }
 })
diff --git a/apps/atrium-telegram/server/api/flow/id/[itemId]/view.post.ts b/apps/atrium-telegram/server/api/flow/id/[itemId]/view.post.ts
@@ -0,0 +1,39 @@
+import { repository } from '@roll-stack/database'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const itemId = getRouterParam(event, 'itemId')
+    if (!itemId) {
+      throw createError({
+        statusCode: 400,
+        message: 'Id is required',
+      })
+    }
+
+    // Guards:
+    // If not exist
+    // If already viewed
+    const item = await repository.flow.findItem(itemId)
+    if (!item) {
+      throw createError({
+        statusCode: 404,
+        message: 'Item not found',
+      })
+    }
+    if (item.views.some((view) => view.userId === event.context.user.id)) {
+      throw createError({
+        statusCode: 400,
+        message: 'Already viewed',
+      })
+    }
+
+    await repository.flow.createItemView({
+      itemId,
+      userId: event.context.user.id,
+    })
+
+    return { ok: true }
+  } catch (error) {
+    throw errorResolver(error)
+  }
+})
diff --git a/apps/atrium-telegram/shared/types/index.ts b/apps/atrium-telegram/shared/types/index.ts
@@ -1,4 +1,4 @@
-import type { FeedbackPoint, FlowItem, FlowItemComment, Kitchen, PartnerAgreement } from '@roll-stack/database'
+import type { FeedbackPoint, FlowItem, FlowItemComment, FlowItemView, Kitchen, PartnerAgreement } from '@roll-stack/database'
 
 export type KitchenWithData = Kitchen & {
   openTime: number
@@ -10,6 +10,7 @@ export type KitchenWithData = Kitchen & {
 
 export type FlowItemWithData = FlowItem & {
   comments: FlowItemComment[]
+  views: FlowItemView[]
 }
 
 export type NavigationRoute = {
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "vitest-browser-vue": "catalog:"
   },
   "resolutions": {
+    "rollup": "^4.50.2",
     "unimport": "4.1.1"
   },
   "lint-staged": {
diff --git a/packages/database/src/repository/flow.ts b/packages/database/src/repository/flow.ts
@@ -1,12 +1,15 @@
-import type { FlowItemDraft } from '../types'
+import type { FlowItemDraft, FlowItemViewDraft } from '../types'
 import { eq, sql } from 'drizzle-orm'
 import { useDatabase } from '../database'
-import { flowItems } from '../tables'
+import { flowItems, flowItemViews } from '../tables'
 
 export class Flow {
   static async findItem(id: string) {
     return useDatabase().query.flowItems.findFirst({
       where: (item, { eq }) => eq(item.id, id),
+      with: {
+        views: true,
+      },
     })
   }
 
@@ -18,6 +21,7 @@ export class Flow {
         comments: {
           orderBy: (comments, { desc }) => desc(comments.createdAt),
         },
+        views: true,
       },
     })
   }
@@ -27,6 +31,11 @@ export class Flow {
     return item
   }
 
+  static async createItemView(data: FlowItemViewDraft) {
+    const [view] = await useDatabase().insert(flowItemViews).values(data).returning()
+    return view
+  }
+
   static async updateItem(id: string, data: Partial<FlowItemDraft>) {
     const [item] = await useDatabase()
       .update(flowItems)
diff --git a/packages/database/src/tables.ts b/packages/database/src/tables.ts
diff --git a/packages/database/src/types.ts b/packages/database/src/types.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`>`
`11`	`11`	`<UIcon name="i-lucide-store" class="size-8 text-primary" />`
`12`	`12`	`</UChip>`
`13`		`- <h3 class="text-3xl/5 font-bold">`
	`13`	`+ <h3 class="text-2xl/5 font-bold">`
`14`	`14`	`{{ kitchensOnline }}`
`15`	`15`	`</h3>`
`16`	`16`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ function _useNavigation() {`
`4`	`4`	`const { y } = useWindowScroll()`
`5`	`5`
`6`	`6`	`const taskStore = useTaskStore()`
	`7`	`+ const flowStore = useFlowStore()`
`7`	`8`
`8`	`9`	`const mainRoutes = computed<NavigationRoute[]>(() => [`
`9`	`10`	`{`
`@@ -12,6 +13,7 @@ function _useNavigation() {`
`12`	`13`	`title: t('app.flow'),`
`13`	`14`	`icon: 'i-lucide-waves',`
`14`	`15`	`exact: true,`
	`16`	`+ badge: flowStore.nowViewedItemsCount.toString(),`
`15`	`17`	`},`
`16`	`18`	`{`
`17`	`19`	`path: '/epic',`