feat: feedback service (#95)

Author: hmbanan666

apps/atrium-telegram/app/assets/css/styles.css

@@ -3,6 +3,7 @@
   --ui-secondary: var(--tg-theme-link-color);
   --ui-border: var(--tg-theme-section-separator-color);
   --ui-text: var(--tg-theme-text-color);
+  --ui-text-muted: var(--tg-theme-hint-color);
   --ui-bg: var(--tg-theme-section-bg-color);
 
   --ui-color-neutral-400: var(--tg-theme-subtitle-text-color);

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

@@ -1,18 +1,12 @@
 <template>
   <button
     class="p-3 tg-bg-button w-full rounded-2xl font-medium cursor-pointer active:scale-95 duration-200"
-    @click="handleClick"
+    @click="vibrate"
   >
     <slot />
   </button>
 </template>
 
 <script setup lang="ts">
-import { hapticFeedback } from '@telegram-apps/sdk-vue'
-
-function handleClick() {
-  if (hapticFeedback.impactOccurred.isAvailable()) {
-    hapticFeedback.impactOccurred('light')
-  }
-}
+const { vibrate } = useFeedback()
 </script>

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

@@ -1,16 +1,22 @@
 <template>
-  <div class="flex flex-col gap-4 justify-center items-center h-full min-h-40 border-2 border-default border-dashed rounded-lg">
+  <div class="flex flex-col gap-4 justify-center items-center h-full min-h-40 border border-default border-dashed rounded-lg">
     <UIcon :name="icon" class="size-10 text-muted/50" />
 
     <UButton
       size="md"
       variant="solid"
       color="secondary"
       :label="label"
+      :ui="{
+        label: 'font-medium',
+      }"
+      @click="vibrate"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 defineProps<{ label: string, icon: string }>()
+
+const { vibrate } = useFeedback()
 </script>

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

@@ -31,9 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { hapticFeedback } from '@telegram-apps/sdk-vue'
-
 const { t } = useI18n()
+const { vibrate } = useFeedback()
 const router = useRouter()
 
 const mainRoutes = computed(() => [
@@ -64,10 +63,7 @@ const mainRoutes = computed(() => [
 ])
 
 function handleClick(path: string) {
-  if (hapticFeedback.impactOccurred.isAvailable()) {
-    hapticFeedback.impactOccurred('light')
-  }
-
+  vibrate()
   router.push(path)
 }
 </script>

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

@@ -24,17 +24,16 @@
         </template>
       </UPopover>
     </template>
-    <UTooltip v-else-if="canComplete" text="Задача выполнена?">
-      <UCheckbox
-        v-model="checkbox"
-        color="secondary"
-        variant="list"
-        size="xl"
-        icon="i-lucide-check"
-        class="mt-1.5 duration-200 motion-preset-bounce"
-        @change="onStartCompleting"
-      />
-    </UTooltip>
+    <UCheckbox
+      v-else-if="canComplete"
+      v-model="checkbox"
+      color="secondary"
+      variant="list"
+      size="xl"
+      icon="i-lucide-check"
+      class="mt-1.5 duration-200 motion-preset-bounce"
+      @change="onStartCompleting"
+    />
     <UCheckbox
       v-else
       v-model="checkbox"
@@ -65,8 +64,9 @@
         }"
         class="group/task duration-200 motion-preset-bounce cursor-pointer"
         :class="[
-          isFocused && 'border border-secondary',
+          isFocused && 'border border-secondary/25',
         ]"
+        @click="vibrate"
       >
         <div class="flex flex-col gap-2 items-start">
           <div class="flex flex-col gap-1 items-start text-left">
@@ -116,7 +116,7 @@ const { task } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const toast = useToast()
+const { vibrate } = useFeedback()
 const actionToast = useActionToast()
 const taskStore = useTaskStore()
 const userStore = useUserStore()
@@ -140,7 +140,6 @@ const canFocus = computed(() => task.performerId === userStore.id && !isComplete
 const isFocused = computed(() => task.id === performer.value?.focusedTaskId)
 
 const checkbox = ref(false)
-const toastId = ref(`task-close-${task.id}`)
 
 const items = computed<DropdownMenuItem[]>(() => {
   const menuItems: DropdownMenuItem[] = [
@@ -195,21 +194,14 @@ async function onUnfocus() {
 }
 
 function onStartCompleting() {
+  vibrate()
+
   if (!checkbox.value) {
     return
   }
 
   modalCompleteTask.open({ taskId: task.id })
 
   checkbox.value = false
-
-  toast.add({
-    id: toastId.value,
-    title: 'Закрываем задачу?',
-    description: 'Сразу как успешную или есть что добавить? Заполните форму.',
-    color: 'secondary',
-    type: 'foreground',
-    duration: 5000,
-  })
 }
 </script>

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

@@ -54,25 +54,21 @@
       </div>
 
       <div v-if="canEdit" class="flex flex-row gap-2">
-        <UTooltip :text="`Редактировать проект «${list?.name}»`">
-          <UButton
-            variant="outline"
-            color="neutral"
-            size="md"
-            icon="i-lucide-pencil"
-            @click="modalUpdateTaskList.open({ listId })"
-          />
-        </UTooltip>
+        <UButton
+          variant="outline"
+          color="neutral"
+          size="md"
+          icon="i-lucide-pencil"
+          @click="handleEditTaskList"
+        />
 
-        <UTooltip :text="`${$t('app.create.task.button')} в проекте «${list?.name}»`">
-          <UButton
-            variant="solid"
-            color="secondary"
-            size="md"
-            icon="i-lucide-plus"
-            @click="modalCreateTask.open({ performerId: userStore.id, listId })"
-          />
-        </UTooltip>
+        <UButton
+          variant="solid"
+          color="secondary"
+          size="md"
+          icon="i-lucide-plus"
+          @click="handleCreateTask"
+        />
       </div>
     </div>
 
@@ -103,6 +99,7 @@ const { listId, currentUserId } = defineProps<{
   currentUserId: string
 }>()
 
+const { vibrate } = useFeedback()
 const userStore = useUserStore()
 const taskStore = useTaskStore()
 
@@ -129,4 +126,14 @@ const canEdit = computed(() => list.value?.chat?.members.some((member) => member
 const overlay = useOverlay()
 const modalCreateTask = overlay.create(ModalCreateTask)
 const modalUpdateTaskList = overlay.create(ModalUpdateTaskList)
+
+function handleEditTaskList() {
+  vibrate()
+  modalUpdateTaskList.open({ listId })
+}
+
+function handleCreateTask() {
+  vibrate()
+  modalCreateTask.open({ performerId: userStore.id, listId })
+}
 </script>

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

@@ -9,9 +9,11 @@
       root: 'flex-row-reverse items-center',
       label: 'mr-3 text-base/5 md:text-lg/5 font-semibold',
     }"
+    @change="vibrate"
   />
 </template>
 
 <script setup lang="ts">
+const { vibrate } = useFeedback()
 const taskStore = useTaskStore()
 </script>

apps/atrium-telegram/app/composables/useFeedback.ts

@@ -0,0 +1,15 @@
+import { hapticFeedback } from '@telegram-apps/sdk-vue'
+
+function _useFeedback() {
+  function vibrate() {
+    if (hapticFeedback.impactOccurred.isAvailable()) {
+      hapticFeedback.impactOccurred('light')
+    }
+  }
+
+  return {
+    vibrate,
+  }
+}
+
+export const useFeedback = createSharedComposable(_useFeedback)

apps/atrium-telegram/app/pages/index.vue

@@ -2,13 +2,11 @@
   <PageContainer :back="false">
     <div class="flex flex-col md:flex-row gap-6 md:gap-2 md:items-center md:justify-between">
       <div class="flex flex-row gap-3.5 items-center">
-        <UTooltip :text="$t('app.update.user-photo.button')">
-          <UAvatar
-            :src="userStore?.avatarUrl ?? undefined"
-            class="size-14 cursor-pointer hover:scale-95 active:scale-90 duration-200"
-            @click="modalUploadUserAvatar.open()"
-          />
-        </UTooltip>
+        <UAvatar
+          :src="userStore?.avatarUrl ?? undefined"
+          class="size-14 cursor-pointer hover:scale-95 active:scale-90 duration-200"
+          @click="handleUploadUserAvatar"
+        />
 
         <div class="flex flex-col gap-1">
           <h2 class="text-xl/6 md:text-2xl lg:text-3xl font-bold tracking-tight">
@@ -42,7 +40,7 @@
       </div>
     </div>
 
-    <div class="mb-32 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
+    <div class="mb-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
       <TaskList
         v-for="taskList in myLists"
         :key="taskList.id"
@@ -63,6 +61,8 @@
 import { ModalCreateTaskList, ModalUploadUserAvatar } from '#components'
 import { getLocalTimeZone, isToday, parseDate } from '@internationalized/date'
 
+const { vibrate } = useFeedback()
+
 const overlay = useOverlay()
 const modalCreateTaskList = overlay.create(ModalCreateTaskList)
 const modalUploadUserAvatar = overlay.create(ModalUploadUserAvatar)
@@ -77,6 +77,11 @@ const myLists = computed(() =>
 )
 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()
+}
+
 useHead({
   title: 'Суши Атриум',
 })

apps/atrium-telegram/i18n/locales/ru-RU.json

@@ -7,6 +7,10 @@
   "app": {
     "home": "Пространство",
     "create": {
+      "task": {
+        "button": "Создать задачу",
+        "title": "Создание задачи"
+      },
       "task-list": {
         "button": "Создать проект",
         "title": "Создание проекта"
@@ -16,6 +20,16 @@
       "user-photo": {
         "button": "Обновить фото",
         "title": "Обновление фото пользователя"
+      },
+      "task": {
+        "button": "Обновить задачу",
+        "title": "Обновление задачи",
+        "completion": "Закрытие задачи",
+        "close": "Закрыть задачу"
+      },
+      "task-list": {
+        "button": "Обновить проект",
+        "title": "Обновление проекта"
       }
     }
   }