feat: reward cards, menu

apps/hub-telegram/app/components/ProspectiveBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="grid grid-cols-2 gap-2">
-    <NuxtLink to="/points">
+    <NuxtLink to="/point">
       <ActiveCard>
         <ProspectivePoints :points="userStore.prospectivePoints" />
       </ActiveCard>

apps/hub-telegram/app/components/RewardCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <ActiveCard class="motion-preset-slide-left">
+    <Section>
+      <div class="flex flex-row justify-between">
+        <div class="flex flex-col gap-1">
+          <h3 class="text-xl/6 font-bold">
+            {{ reward.name }}
+          </h3>
+
+          <div
+            v-if="reward.description"
+            class="w-full text-base/5 font-normal whitespace-pre-wrap wrap-break-word line-clamp-8"
+          >
+            {{ reward.description }}
+          </div>
+        </div>
+
+        <UButton
+          variant="solid"
+          size="xl"
+          class="text-xl/5 font-bold justify-center min-w-24"
+          trailing-icon="i-lucide-coins"
+          :label="reward.points.toString()"
+        />
+      </div>
+    </Section>
+  </ActiveCard>
+</template>
+
+<script setup lang="ts">
+import type { Reward } from '#shared/types'
+
+defineProps<{ reward: Reward }>()
+</script>

apps/hub-telegram/app/composables/useNavigation.ts

@@ -13,23 +13,23 @@ function _useNavigation() {
       // badge: flowStore.nowViewedItemsCount > 10 ? '10+' : flowStore.nowViewedItemsCount.toString(),
     },
     {
-      path: '/points',
-      names: ['points'],
-      title: 'Награды',
+      path: '/point',
+      names: ['point'],
+      title: t('app.rewards'),
       icon: 'i-lucide-coins',
     },
     {
-      path: '#',
-      names: [],
-      title: 'Позже',
-      icon: 'i-lucide-lock',
+      path: '/task',
+      names: ['task'],
+      title: t('app.tasks'),
+      icon: 'i-lucide-check-check',
+    },
+    {
+      path: '/navigation',
+      names: ['navigation'],
+      title: t('app.navigation'),
+      icon: 'i-lucide-menu',
     },
-    // {
-    //   path: '/navigation',
-    //   names: ['navigation'],
-    //   title: t('app.navigation'),
-    //   icon: 'i-lucide-menu',
-    // },
   ])
 
   const isNavigationShown = ref(true)

apps/hub-telegram/app/pages/navigation.vue

@@ -0,0 +1,52 @@
+<template>
+  <PageContainer>
+    <div class="flex flex-col gap-2.5 motion-preset-slide-left">
+      <NuxtLink
+        v-for="item in items"
+        :key="item.label"
+        :to="item.to"
+        :target="item.target"
+        @click="item.onClick"
+      >
+        <ActiveCard>
+          <Section>
+            <div class="flex flex-row gap-2.5 items-center">
+              <UIcon :name="item.icon" class="size-5 shrink-0" />
+              <h3 class="text-2xl/6 font-bold">
+                {{ item.label }}
+              </h3>
+            </div>
+          </Section>
+        </ActiveCard>
+      </NuxtLink>
+    </div>
+  </PageContainer>
+</template>
+
+<script lang="ts" setup>
+const { vibrate } = useFeedback()
+
+const items = ref([
+  {
+    label: 'Помощь в WhatsApp',
+    to: 'https://wa.me/message/DRMTOEKLZU2FJ1',
+    target: '_blank',
+    icon: 'i-lucide-heart-handshake',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Наш Telegram канал',
+    to: 'https://t.me/franshizasushi',
+    target: '_blank',
+    icon: 'simple-icons:telegram',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Наша VK группа',
+    to: 'https://vk.com/franshizasushi',
+    target: '_blank',
+    icon: 'simple-icons:vk',
+    onClick: () => vibrate(),
+  },
+])
+</script>

apps/hub-telegram/app/pages/point/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <PageContainer>
+    <Section class="motion-preset-slide-left">
+      <div class="flex flex-row gap-2 items-center">
+        <UIcon
+          name="i-lucide-coins"
+          class="size-10 text-primary"
+        />
+      </div>
+
+      <SectionTitle :title="`У вас ${userStore.prospectivePoints} ${pluralizationRu(userStore.prospectivePoints, ['Балл', 'Балла', 'Баллов'])}`" />
+
+      <p class="text-base/5">
+        Выбирайте награду! Список регулярно обновляется.
+      </p>
+
+      <UButton
+        to="/task"
+        variant="solid"
+        size="xl"
+        class="font-bold w-full justify-center"
+        label="Хочу еще"
+      />
+    </Section>
+
+    <div class="flex flex-col gap-3.5">
+      <RewardCard
+        v-for="reward of rewards"
+        :key="reward.id"
+        :reward="reward"
+      />
+    </div>
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+import type { Reward } from '#shared/types'
+
+const userStore = useUserStore()
+
+const rewards = ref<Reward[]>([
+  {
+    id: '1',
+    name: 'Первая награда',
+    description: 'Описание награды',
+    points: 5,
+  },
+  {
+    id: '2',
+    name: 'Вторая награда',
+    description: 'Описание награды',
+    points: 15,
+  },
+  {
+    id: '3',
+    name: 'Третья награда',
+    description: 'Описание награды',
+    points: 25,
+  },
+])
+</script>

apps/hub-telegram/app/pages/task/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <PageContainer>
+    <SectionTitle title="Задания" />
+
+    <div class="flex flex-col gap-3.5">
+      <p class="text-muted">
+        Активных нет
+      </p>
+    </div>
+  </PageContainer>
+</template>

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

@@ -21,7 +21,10 @@
     "show-more": "Показать еще"
   },
   "app": {
-    "flow": "Поток"
+    "flow": "Поток",
+    "navigation": "Меню",
+    "rewards": "Награды",
+    "tasks": "Задания"
   },
   "error": {
     "common": "Неверное значение",

apps/hub-telegram/shared/types/index.ts

@@ -17,3 +17,10 @@ export type FlowItemWithData = FlowItem & {
   comments: FlowItemCommentWithUser[]
   views: FlowItemView[]
 }
+
+export type Reward = {
+  id: string
+  name: string
+  description: string
+  points: number
+}

package.json

@@ -43,9 +43,6 @@
     "vitest": "catalog:test",
     "vitest-browser-vue": "catalog:test"
   },
-  "resolutions": {
-    "unimport": "4.1.1"
-  },
   "lint-staged": {
     "*.{js,ts,tsx,vue,md,json}": [
       "eslint --cache --fix"