chore: navigation rework (#152)

hmbanan666 · web-flow · commit 612b2357e06b · 2025-09-12T16:37:06.000+02:00
* chore: navigation rework

* chore: badge
diff --git a/apps/atrium-telegram/app/components/NavigationButton.vue b/apps/atrium-telegram/app/components/NavigationButton.vue
@@ -6,7 +6,7 @@
     <div
       class="relative py-1 w-full rounded-2xl flex flex-row items-center justify-center"
       :class="[
-        isThisRoute && 'tg-bg-button tg-text-button motion-translate-y-in',
+        (isThisRoute || isThisName) && 'tg-bg-button tg-text-button motion-translate-y-in',
       ]"
     >
       <UIcon
@@ -15,20 +15,29 @@
         class="size-6 motion-preset-shake"
       />
       <UIcon
-        v-else-if="isFlowInnerPage && canReturnToMain && route.name === 'flow'"
+        v-else-if="router.currentRoute.value.meta.canReturn && isThisName"
         name="i-lucide-undo-2"
         class="size-6 motion-preset-shake"
       />
-      <UIcon
+      <UChip
         v-else
-        :name="route.icon"
-        class="size-6 motion-preset-shake"
-      />
+        size="3xl"
+        :show="!!route.badge"
+        :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',
+        }"
+      >
+        <UIcon
+          :name="route.icon"
+          class="size-6 motion-preset-shake"
+        />
+      </UChip>
     </div>
     <p
       class="text-xs font-medium"
       :class="[
-        isThisRoute && 'tg-text',
+        (isThisRoute || isThisName) && 'tg-text',
       ]"
     >
       {{ route.title }}
@@ -40,10 +49,11 @@
 const { route } = defineProps<{ route: NavigationRoute }>()
 
 const { vibrate } = useFeedback()
-const { canScrollToTop, isMainPage, isFlowInnerPage, canReturnToMain } = useNavigation()
+const { canScrollToTop, isMainPage } = useNavigation()
 const router = useRouter()
 
 const isThisRoute = computed(() => route.exact ? router.currentRoute.value.path === route.path : router.currentRoute.value.path.startsWith(route.path))
+const isThisName = computed(() => route.names.includes(router.currentRoute.value.name))
 
 function handleScrollToTop() {
   vibrate()
diff --git a/apps/atrium-telegram/app/components/flow/FeedbackAverage.vue b/apps/atrium-telegram/app/components/flow/FeedbackAverage.vue
@@ -1,5 +1,5 @@
 <template>
-  <Section>
+  <Section class="motion-preset-slide-down motion-delay-600">
     <div class="flex flex-col gap-2">
       <div class="flex flex-row gap-2 items-center">
         <UIcon name="i-lucide-users-round" class="size-8 text-primary" />
diff --git a/apps/atrium-telegram/app/components/flow/ItemCard.vue b/apps/atrium-telegram/app/components/flow/ItemCard.vue
@@ -2,11 +2,11 @@
   <ActiveCard>
     <UIcon name="i-lucide-clipboard-check" class="size-8 text-primary" />
 
-    <h3 class="text-lg/5 font-bold">
+    <h3 class="text-2xl/5 font-bold">
       {{ item.title }}
     </h3>
 
-    <div class="w-full text-sm/4 font-normal whitespace-pre-wrap break-words line-clamp-16">
+    <div class="w-full text-base/5 font-normal whitespace-pre-wrap break-words line-clamp-12">
       {{ item.description }}
     </div>
 
diff --git a/apps/atrium-telegram/app/components/flow/KitchensOnline.vue b/apps/atrium-telegram/app/components/flow/KitchensOnline.vue
@@ -1,5 +1,5 @@
 <template>
-  <Section v-if="kitchensOnline">
+  <Section v-if="kitchensOnline" class="motion-preset-slide-down motion-delay-100">
     <div class="flex flex-col gap-2">
       <div class="flex flex-row gap-2 items-center">
         <UChip
@@ -20,7 +20,7 @@
     </div>
   </Section>
 
-  <Section v-else>
+  <Section v-else class="motion-preset-slide-down motion-delay-100">
     <div class="flex flex-col gap-2">
       <div class="flex flex-row gap-2 items-center">
         <UIcon name="i-lucide-store" class="size-8 text-primary" />
diff --git a/apps/atrium-telegram/app/components/flow/OrderAmountAverage.vue b/apps/atrium-telegram/app/components/flow/OrderAmountAverage.vue
@@ -1,5 +1,5 @@
 <template>
-  <Section>
+  <Section class="motion-preset-slide-down motion-delay-400">
     <div class="flex flex-col gap-2">
       <div class="flex flex-row gap-2 items-center">
         <UIcon name="i-lucide-receipt-text" class="size-8 text-primary" />
diff --git a/apps/atrium-telegram/app/components/flow/OrdersOnline.vue b/apps/atrium-telegram/app/components/flow/OrdersOnline.vue
@@ -1,5 +1,5 @@
 <template>
-  <Section>
+  <Section class="motion-preset-slide-down motion-delay-200">
     <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" />
diff --git a/apps/atrium-telegram/app/composables/useNavigation.ts b/apps/atrium-telegram/app/composables/useNavigation.ts
@@ -3,25 +3,28 @@ function _useNavigation() {
   const { t } = useI18n()
   const { y } = useWindowScroll()
 
+  const taskStore = useTaskStore()
+
   const mainRoutes = computed<NavigationRoute[]>(() => [
     {
       path: '/',
-      name: 'flow',
+      names: ['index', 'flow-itemId'],
       title: t('app.flow'),
       icon: 'i-lucide-waves',
       exact: true,
     },
     {
       path: '/epic',
-      name: 'epic',
+      names: ['epic', 'epic-epicId'],
       title: t('app.epics'),
       icon: 'i-lucide-crown',
     },
     {
       path: '/tasks',
-      name: 'tasks',
+      names: ['tasks'],
       title: t('app.my-tasks'),
       icon: 'i-lucide-layout-dashboard',
+      badge: taskStore.myTodayTasks.length.toString(),
     },
   ])
 
@@ -30,15 +33,9 @@ function _useNavigation() {
   const isMainPage = computed(() => router.currentRoute.value.path === '/')
   const canScrollToTop = computed(() => y.value > 650)
 
-  const isFlowInnerPage = computed(() => router.currentRoute.value.path.startsWith('/flow'))
-  const canReturnToMain = computed(() => isFlowInnerPage.value && router.currentRoute.value.path !== '/')
-
   return {
     isNavigationShown,
 
-    isFlowInnerPage,
-    canReturnToMain,
-
     isMainPage,
     canScrollToTop,
 
diff --git a/apps/atrium-telegram/app/pages/epic/[epicId]/index.vue b/apps/atrium-telegram/app/pages/epic/[epicId]/index.vue
@@ -59,6 +59,11 @@
 <script setup lang="ts">
 import { ModalUpdateEpic } from '#components'
 
+definePageMeta({
+  name: 'epic-epicId',
+  canReturn: true,
+})
+
 const { params } = useRoute('epic-epicId')
 
 const { vibrate } = useFeedback()
diff --git a/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue b/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue
@@ -5,7 +5,7 @@
         <UIcon name="i-lucide-clipboard-check" class="size-10 text-primary" />
       </div>
 
-      <h2 class="text-xl font-bold">
+      <h2 class="text-2xl/6 font-bold">
         {{ item?.title }}
       </h2>
 
@@ -17,6 +17,11 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  name: 'flow-itemId',
+  canReturn: true,
+})
+
 const { params } = useRoute('flow-itemId')
 
 const flowStore = useFlowStore()
diff --git a/apps/atrium-telegram/app/pages/index.vue b/apps/atrium-telegram/app/pages/index.vue
@@ -10,7 +10,7 @@
       <FlowFeedbackAverage />
     </div>
 
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-4">
       <NuxtLink
         v-for="item in flowStore.items"
         :key="item.id"
@@ -24,6 +24,10 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  name: 'index',
+})
+
 const flowStore = useFlowStore()
 
 useHead({
diff --git a/apps/atrium-telegram/app/pages/tasks/index.vue b/apps/atrium-telegram/app/pages/tasks/index.vue
@@ -12,7 +12,7 @@
           {{ userStore.name }}, привет!
         </h2>
         <p class="text-base/5">
-          <template v-if="myTodayTasks.length">
+          <template v-if="taskStore.myTodayTasks.length">
             Сегодня по плану еще
             <ULink
               as="button"
@@ -22,7 +22,7 @@
               ]"
               @click="taskStore.isTodayOnly = !taskStore.isTodayOnly"
             >
-              {{ myTodayTasks.length }} {{ pluralizationRu(myTodayTasks.length, ['задача', 'задачи', 'задач']) }}
+              {{ taskStore.myTodayTasks.length }} {{ pluralizationRu(taskStore.myTodayTasks.length, ['задача', 'задачи', 'задач']) }}
             </ULink>.
           </template>
           <span>
@@ -38,7 +38,7 @@
       </Section>
 
       <TaskList
-        v-for="taskList in myLists"
+        v-for="taskList in taskStore.myLists"
         :key="taskList.id"
         :list-id="taskList.id"
         :current-user-id="userStore.id as string"
@@ -61,7 +61,6 @@
 
 <script setup lang="ts">
 import { ModalCreateTaskList, ModalUploadUserAvatar } from '#components'
-import { getLocalTimeZone, isToday, parseDate } from '@internationalized/date'
 
 const { vibrate } = useFeedback()
 
@@ -72,13 +71,6 @@ const modalUploadUserAvatar = overlay.create(ModalUploadUserAvatar)
 const userStore = useUserStore()
 const taskStore = useTaskStore()
 
-const myLists = computed(() =>
-  taskStore.lists.filter(
-    (taskList) => taskList.chat?.members.some((member) => member.userId === userStore.id),
-  ).filter((taskList) => taskStore.isTodayOnly ? taskList.tasks.filter((task) => !task.completedAt && task.date && isToday(parseDate(task.date), getLocalTimeZone())).length : true),
-)
-const myTodayTasks = computed(() => myLists.value.flatMap((taskList) => taskList.tasks.filter((task) => !task.completedAt && task.date && isToday(parseDate(task.date), getLocalTimeZone()))))
-
 function handleUploadUserAvatar() {
   vibrate()
   modalUploadUserAvatar.open()
diff --git a/apps/atrium-telegram/app/stores/task.ts b/apps/atrium-telegram/app/stores/task.ts
@@ -1,4 +1,5 @@
 import type { Chat, ChatMember, Task, TaskList, User } from '@roll-stack/database'
+import { getLocalTimeZone, isToday, parseDate } from '@internationalized/date'
 import { initDataRaw as _initDataRaw, useSignal } from '@telegram-apps/sdk-vue'
 
 type ChatWithData = Chat & {
@@ -15,6 +16,15 @@ export const useTaskStore = defineStore('task', () => {
   const isTodayOnly = ref(false)
   const isInitialized = ref(false)
 
+  const userStore = useUserStore()
+
+  const myLists = computed(() =>
+    lists.value.filter(
+      (taskList) => taskList.chat?.members.some((member) => member.userId === userStore.id),
+    ).filter((taskList) => isTodayOnly.value ? taskList.tasks.filter((task) => !task.completedAt && task.date && isToday(parseDate(task.date), getLocalTimeZone())).length : true),
+  )
+  const myTodayTasks = computed(() => myLists.value.flatMap((taskList) => taskList.tasks.filter((task) => !task.completedAt && task.date && isToday(parseDate(task.date), getLocalTimeZone()))))
+
   const initDataRaw = useSignal(_initDataRaw)
 
   async function update() {
@@ -82,6 +92,9 @@ export const useTaskStore = defineStore('task', () => {
     isTodayOnly,
     isInitialized,
 
+    myLists,
+    myTodayTasks,
+
     update,
     setAsFocused,
     setAsUnfocused,
diff --git a/apps/atrium-telegram/shared/types/index.ts b/apps/atrium-telegram/shared/types/index.ts
@@ -14,8 +14,9 @@ export type FlowItemWithData = FlowItem & {
 
 export type NavigationRoute = {
   path: string
-  name: string
+  names: string[]
   title: string
   icon: string
   exact?: boolean
+  badge?: string
 }
diff --git a/apps/web-app/server/tasks/ai/daily-report.ts b/apps/web-app/server/tasks/ai/daily-report.ts
@@ -57,7 +57,7 @@ export default defineTask({
       const date = format(new Date(), 'd MMMM', { locale: ru })
       await repository.flow.createItem({
         type: 'daily_task_report',
-        title: date,
+        title: `Задачи ${date}`,
         description: finalMessage,
       })
 
