Skip to content

feat: confetti on task complete #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hmbanan666 merged 1 commit into from
Oct 16, 2025
Merged

feat: confetti on task complete #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/atrium-telegram/app/components/TaskInfoCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down
1 change: 1 addition & 0 deletions apps/atrium-telegram/app/composables/useNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function _useNavigation() {
names: ['navigation'],
title: t('app.navigation'),
icon: 'i-lucide-menu',
badge: '+1',
},
])

Expand Down
9 changes: 8 additions & 1 deletion apps/atrium-telegram/app/pages/all-tasks/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
:items="[
{ label: 'Все задачи', value: 'all' },
{ label: 'Только выполненные', value: 'completed' },
{ label: 'Только в процессе', value: 'inProgress' },
]"
class="motion-preset-slide-up"
/>
Expand Down Expand Up @@ -115,7 +116,7 @@ function chooseSortFunction() {
}
}

const filteredBy = ref<'all' | 'completed'>('all')
const filteredBy = ref<'all' | 'completed' | 'inProgress'>('all')

function filterByAll() {
return true
Expand All @@ -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
}
}

Expand Down
13 changes: 13 additions & 0 deletions apps/atrium-telegram/app/pages/navigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -48,6 +60,7 @@ const items = ref([
label: 'Задачи',
to: '/all-tasks',
icon: 'i-lucide-list-checks',
badge: 'апдейт',
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Use i18n for the badge text.

The hardcoded Russian text 'апдейт' bypasses the internationalization system used elsewhere in the app.

Apply this diff to use i18n:

   {
     label: 'Задачи',
     to: '/all-tasks',
     icon: 'i-lucide-list-checks',
-    badge: 'апдейт',
+    badge: t('app.navigation.tasks.badge'),
     onClick: () => vibrate(),
   },

Then add the corresponding translation key to your locale files.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
badge: 'апдейт',
{
label: 'Задачи',
to: '/all-tasks',
icon: 'i-lucide-list-checks',
badge: t('app.navigation.tasks.badge'),
onClick: () => vibrate(),
},
🤖 Prompt for AI Agents 
In apps/atrium-telegram/app/pages/navigation.vue around line 63, the badge
property is using hardcoded Russian text "апдейт"; replace it with an i18n key
reference (e.g., $t('navigation.badge.update') or use the component/composable
translation helper used in the project) and update the callsite accordingly so
the badge reads from translations instead of a literal string; then add the
corresponding translation key "navigation.badge.update" (and translations for
other supported locales) to the project's locale files.

onClick: () => vibrate(),
},
])
Expand Down
2 changes: 2 additions & 0 deletions apps/web-app/app/components/form/CompleteTask.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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)
Expand Down
14 changes: 14 additions & 0 deletions apps/web-app/app/composables/useConfetti.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
14 changes: 14 additions & 0 deletions apps/web-app/app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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)
Expand Down