From f4fd1a3330b82d81a3279bc2247bc9045dfb581a Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Thu, 16 Oct 2025 13:07:33 +0200
Subject: [PATCH] feat: confetti on task complete

---
 .../app/components/TaskInfoCard.vue                |  2 +-
 .../app/composables/useNavigation.ts               |  1 +
 apps/atrium-telegram/app/pages/all-tasks/index.vue |  9 ++++++++-
 apps/atrium-telegram/app/pages/navigation.vue      | 13 +++++++++++++
 apps/web-app/app/components/form/CompleteTask.vue  |  2 ++
 apps/web-app/app/composables/useConfetti.ts        | 14 ++++++++++++++
 apps/web-app/app/pages/index.vue                   | 14 ++++++++++++++
 7 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-app/app/composables/useConfetti.ts

diff --git a/apps/atrium-telegram/app/components/TaskInfoCard.vue b/apps/atrium-telegram/app/components/TaskInfoCard.vue
index 91b34c29..fc0ec0c9 100644
--- a/apps/atrium-telegram/app/components/TaskInfoCard.vue
+++ b/apps/atrium-telegram/app/components/TaskInfoCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <ActiveCard>
+  <ActiveCard class="motion-preset-slide-left">
     <Section>
       <div class="flex flex-row gap-2 items-center">
         <UAvatar :src="performer?.avatarUrl ?? undefined" class="size-8" />
diff --git a/apps/atrium-telegram/app/composables/useNavigation.ts b/apps/atrium-telegram/app/composables/useNavigation.ts
index dc8d690b..79e7b8a8 100644
--- a/apps/atrium-telegram/app/composables/useNavigation.ts
+++ b/apps/atrium-telegram/app/composables/useNavigation.ts
@@ -35,6 +35,7 @@ function _useNavigation() {
       names: ['navigation'],
       title: t('app.navigation'),
       icon: 'i-lucide-menu',
+      badge: '+1',
     },
   ])
 
diff --git a/apps/atrium-telegram/app/pages/all-tasks/index.vue b/apps/atrium-telegram/app/pages/all-tasks/index.vue
index afea33db..17bb9162 100644
--- a/apps/atrium-telegram/app/pages/all-tasks/index.vue
+++ b/apps/atrium-telegram/app/pages/all-tasks/index.vue
@@ -30,6 +30,7 @@
         :items="[
           { label: 'Все задачи', value: 'all' },
           { label: 'Только выполненные', value: 'completed' },
+          { label: 'Только в процессе', value: 'inProgress' },
         ]"
         class="motion-preset-slide-up"
       />
@@ -115,7 +116,7 @@ function chooseSortFunction() {
   }
 }
 
-const filteredBy = ref<'all' | 'completed'>('all')
+const filteredBy = ref<'all' | 'completed' | 'inProgress'>('all')
 
 function filterByAll() {
   return true
@@ -125,12 +126,18 @@ function filterByCompleted(task: Task) {
   return task.completedAt
 }
 
+function filterByInProgress(task: Task) {
+  return !task.completedAt
+}
+
 function chooseFilterFunction() {
   switch (filteredBy.value) {
     case 'all':
       return filterByAll
     case 'completed':
       return filterByCompleted
+    case 'inProgress':
+      return filterByInProgress
   }
 }
 
diff --git a/apps/atrium-telegram/app/pages/navigation.vue b/apps/atrium-telegram/app/pages/navigation.vue
index d00a5c78..4e95a67a 100644
--- a/apps/atrium-telegram/app/pages/navigation.vue
+++ b/apps/atrium-telegram/app/pages/navigation.vue
@@ -14,6 +14,18 @@
               <h3 class="text-2xl/6 font-bold">
                 {{ item.label }}
               </h3>
+
+              <div v-if="item?.badge">
+                <div class="flex flex-row items-center gap-1.5 text-primary">
+                  <UIcon
+                    name="i-lucide-pointer"
+                    class="size-5 motion-translate-y-loop-25 motion-preset-seesaw motion-duration-2000"
+                  />
+                  <p class="text-base/5 font-bold">
+                    {{ item.badge }}
+                  </p>
+                </div>
+              </div>
             </div>
           </Section>
         </ActiveCard>
@@ -48,6 +60,7 @@ const items = ref([
     label: 'Задачи',
     to: '/all-tasks',
     icon: 'i-lucide-list-checks',
+    badge: 'апдейт',
     onClick: () => vibrate(),
   },
 ])
diff --git a/apps/web-app/app/components/form/CompleteTask.vue b/apps/web-app/app/components/form/CompleteTask.vue
index 982b10f2..efdd57ac 100644
--- a/apps/web-app/app/components/form/CompleteTask.vue
+++ b/apps/web-app/app/components/form/CompleteTask.vue
@@ -64,6 +64,7 @@ const { taskId } = defineProps<{
 const emit = defineEmits(['success', 'submitted'])
 
 const { t } = useI18n()
+const { pop } = useConfetti()
 const actionToast = useActionToast()
 const userStore = useUserStore()
 const taskStore = useTaskStore()
@@ -99,6 +100,7 @@ async function onSubmit(event: FormSubmitEvent<CompleteTask>) {
     ])
 
     actionToast.success(toastId, t('toast.task-completed'))
+    pop()
     emit('success')
   } catch (error) {
     console.error(error)
diff --git a/apps/web-app/app/composables/useConfetti.ts b/apps/web-app/app/composables/useConfetti.ts
new file mode 100644
index 00000000..62ada123
--- /dev/null
+++ b/apps/web-app/app/composables/useConfetti.ts
@@ -0,0 +1,14 @@
+function _useConfetti() {
+  const isShown = ref(false)
+
+  function pop() {
+    isShown.value = true
+    setTimeout(() => {
+      isShown.value = false
+    }, 5000)
+  }
+
+  return { isShown, pop }
+}
+
+export const useConfetti = createSharedComposable(_useConfetti)
diff --git a/apps/web-app/app/pages/index.vue b/apps/web-app/app/pages/index.vue
index 8acde415..9fc58399 100644
--- a/apps/web-app/app/pages/index.vue
+++ b/apps/web-app/app/pages/index.vue
@@ -1,4 +1,14 @@
 <template>
+  <ClientOnly>
+    <div
+      v-if="isShown"
+      ref="confetti"
+      class="z-40 mx-auto h-dvh w-dvw fixed inset-0 overflow-y-hidden overscroll-y-none"
+    >
+      <div v-confetti="{ particleCount: 240, duration: 4500, stageHeight: confetti?.clientHeight, stageWidth: confetti?.clientWidth, force: 0.4 }" />
+    </div>
+  </ClientOnly>
+
   <Header :title="$t('app.menu.my-space')" />
 
   <Content>
@@ -74,11 +84,15 @@
 <script setup lang="ts">
 import { ModalCreateTaskList, ModalUploadUserAvatar } from '#components'
 import { getLocalTimeZone, isToday, parseDate } from '@internationalized/date'
+import { vConfetti } from '@neoconfetti/vue'
 
 definePageMeta({
   middleware: ['01-auth-only'],
 })
 
+const confetti = ref<HTMLElement | null>(null)
+const { isShown } = useConfetti()
+
 const overlay = useOverlay()
 const modalCreateTaskList = overlay.create(ModalCreateTaskList)
 const modalUploadUserAvatar = overlay.create(ModalUploadUserAvatar)