chore: feedback rework (#99)

* chore: feedback rework

* chore: update

Author: hmbanan666

apps/atrium-telegram/app/app.config.ts

@@ -26,7 +26,7 @@ export default defineAppConfig({
     },
     modal: {
       slots: {
-        content: 'divide-y-0',
+        content: 'divide-y-0 !ring-muted/50',
         header: 'pb-0 min-h-12',
         title: 'text-lg/5 font-semibold',
       },

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

@@ -1,7 +1,7 @@
 <template>
   <button
     class="p-3 tg-bg-button w-full rounded-2xl font-medium cursor-pointer active:scale-95 duration-200"
-    @click="vibrate"
+    @click="vibrate()"
   >
     <slot />
   </button>

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

@@ -11,7 +11,7 @@
         base: 'px-3 rounded-full',
         label: 'font-medium',
       }"
-      @click="vibrate"
+      @click="vibrate()"
     />
   </div>
 </template>

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

@@ -2,6 +2,6 @@
   <img
     src="/sushi-heart.svg"
     alt=""
-    class="w-12 grayscale-100 opacity-10 motion-preset-pulse motion-duration-1000"
+    class="w-12 opacity-50 invert-50 motion-preset-pulse motion-duration-1000"
   >
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <nav class="z-50 touch-pan-x fixed bottom-0 left-0 right-0 w-full h-25 tg-bg-bottom-bar border-t border-default rounded-t-lg">
+  <nav class="z-50 touch-pan-x fixed bottom-0 left-0 right-0 w-full h-25 tg-bg-bottom-bar border-t border-default rounded-t-lg motion-preset-slide-up">
     <div class="max-w-[28rem] mx-auto">
       <div class="mt-3 grid grid-cols-4">
         <button
@@ -11,7 +11,7 @@
           <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',
+              router.currentRoute.value.path === route.path && 'tg-bg-button tg-text-button motion-translate-y-in',
             ]"
           >
             <UIcon :name="route.icon" class="size-6" />

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

@@ -43,7 +43,7 @@
           ],
         }"
         class="group/task duration-200 motion-preset-bounce"
-        @click="vibrate"
+        @click="vibrate()"
       >
         <div class="w-full flex flex-col gap-2 items-start">
           <div class="flex flex-col gap-1 items-start text-left">
@@ -90,9 +90,7 @@ const { task } = defineProps<{
   task: Task
 }>()
 
-const { t } = useI18n()
 const { vibrate } = useFeedback()
-const actionToast = useActionToast()
 const taskStore = useTaskStore()
 const userStore = useUserStore()
 
@@ -154,32 +152,28 @@ const items = computed<DropdownMenuItem[]>(() => {
 })
 
 async function onFocus() {
-  const toastId = actionToast.start()
-
   try {
     await taskStore.setAsFocused(task.id)
     await taskStore.update()
     await userStore.update()
 
-    actionToast.success(toastId, t('toast.task-focused'))
+    vibrate('success')
   } catch (error) {
     console.error(error)
-    actionToast.error(toastId)
+    vibrate('error')
   }
 }
 
 async function onUnfocus() {
-  const toastId = actionToast.start()
-
   try {
     await taskStore.setAsUnfocused(task.id)
     await taskStore.update()
     await userStore.update()
 
-    actionToast.success(toastId, t('toast.task-unfocused'))
+    vibrate('success')
   } catch (error) {
     console.error(error)
-    actionToast.error(toastId)
+    vibrate('error')
   }
 }
 

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

@@ -3,13 +3,12 @@
     v-model="taskStore.isTodayOnly"
     size="xl"
     color="secondary"
-    :label="taskStore.isTodayOnly ? 'Сегодня' : 'Все задачи'"
-    :default-value="taskStore.isTodayOnly"
+    :label="taskStore.isTodayOnly ? 'Задачи на сегодня' : 'Показаны все задачи'"
     :ui="{
-      root: 'flex-row-reverse items-center',
-      label: 'mr-3 text-base/5 font-semibold',
+      root: 'items-center',
+      label: 'ml-1.5 text-base/5 font-semibold',
     }"
-    @change="vibrate"
+    @change="vibrate()"
   />
 </template>
 

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

@@ -50,6 +50,7 @@ const { taskId } = defineProps<{
 const emit = defineEmits(['success', 'submitted'])
 
 const { t } = useI18n()
+const { vibrate } = useFeedback()
 const actionToast = useActionToast()
 const userStore = useUserStore()
 const taskStore = useTaskStore()
@@ -80,10 +81,12 @@ async function onSubmit(event: FormSubmitEvent<CompleteTask>) {
     ])
 
     actionToast.success(toastId, t('toast.task-completed'))
+    vibrate('success')
     emit('success')
   } catch (error) {
     console.error(error)
     actionToast.error(toastId)
+    vibrate('error')
   }
 }
 </script>

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

@@ -96,6 +96,7 @@ const { performerId, listId } = defineProps<{
 const emit = defineEmits(['success', 'submitted'])
 
 const { t } = useI18n()
+const { vibrate } = useFeedback()
 const actionToast = useActionToast()
 
 const taskStore = useTaskStore()
@@ -170,10 +171,12 @@ async function onSubmit(event: FormSubmitEvent<CreateTask>) {
     await taskStore.update()
 
     actionToast.success(toastId, t('toast.task-created'))
+    vibrate('success')
     emit('success')
   } catch (error) {
     console.error(error)
     actionToast.error(toastId)
+    vibrate('error')
   }
 }
 </script>

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

@@ -59,6 +59,7 @@ const emit = defineEmits(['success', 'submitted'])
 type FormMember = { label: string, value: string, avatar: { src: string | undefined, alt: string } }
 
 const { t } = useI18n()
+const { vibrate } = useFeedback()
 const actionToast = useActionToast()
 
 const userStore = useUserStore()
@@ -103,10 +104,12 @@ async function onSubmit(event: FormSubmitEvent<CreateTaskList>) {
     ])
 
     actionToast.success(toastId, t('toast.task-list-created'))
+    vibrate('success')
     emit('success')
   } catch (error) {
     console.error(error)
     actionToast.error(toastId)
+    vibrate('error')
   }
 }
 </script>