feat: prospective points on user (#256)

Author: hmbanan666

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <NuxtLink to="/points">
+      <ActiveCard>
+        <ProspectivePoints :points="userStore.prospectivePoints" />
+      </ActiveCard>
+    </NuxtLink>
+    <ProspectiveDays :created-at="userStore.createdAt as string" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const userStore = useUserStore()
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <Section class="motion-preset-slide-down motion-delay-400">
+    <div class="flex flex-col gap-2">
+      <UIcon name="i-lucide-calendar-check-2" class="size-8 text-primary" />
+      <p class="text-base/5">
+        Вы с нами уже <span class="font-bold">{{ days }} {{ pluralizationRu(days, ['день', 'дня', 'дней']) }}</span>
+      </p>
+    </div>
+  </Section>
+</template>
+
+<script setup lang="ts">
+const { createdAt } = defineProps<{ createdAt: string }>()
+
+const date = computed(() => new Date(createdAt))
+const days = computed(() => Math.floor((Date.now() - date.value.getTime()) / 86400000))
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <Section class="motion-preset-slide-down motion-delay-100">
+    <div class="flex flex-col gap-2">
+      <UIcon name="i-lucide-coins" class="size-8 text-primary" />
+      <p class="text-base/5">
+        На данный момент у вас <span class="font-bold">{{ points }} {{ pluralizationRu(points, ['Балл', 'Балла', 'Баллов']) }}</span>
+      </p>
+    </div>
+  </Section>
+</template>
+
+<script setup lang="ts">
+defineProps<{ points: number }>()
+</script>

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

@@ -13,10 +13,10 @@ function _useNavigation() {
       // badge: flowStore.nowViewedItemsCount > 10 ? '10+' : flowStore.nowViewedItemsCount.toString(),
     },
     {
-      path: '#',
-      names: [],
-      title: 'Позже',
-      icon: 'i-lucide-lock',
+      path: '/points',
+      names: ['points'],
+      title: 'Награды',
+      icon: 'i-lucide-coins',
     },
     {
       path: '#',

apps/hub-telegram/app/pages/flow/[itemId]/index.vue

@@ -27,7 +27,12 @@
       </div>
 
       <div class="mt-6 flex justify-between items-center">
-        <div class="flex flex-row gap-4" />
+        <div class="flex flex-row gap-4">
+          <div class="flex flex-row gap-1 items-center text-sm text-muted">
+            <UIcon name="i-lucide-eye" class="size-4" />
+            {{ item?.views.length }}
+          </div>
+        </div>
 
         <time
           v-if="item?.createdAt"
@@ -38,21 +43,6 @@
       </div>
     </Section>
 
-    <Section class="flex flex-col">
-      <h3 class="text-muted">
-        Посмотрели
-      </h3>
-
-      <div class="flex flex-row flex-wrap gap-1">
-        <UAvatar
-          v-for="view in item?.views"
-          :key="view.id"
-          :src="userStore.getAvatarUrl(view.userId)"
-          size="lg"
-        />
-      </div>
-    </Section>
-
     <div class="flex flex-col gap-2.5">
       <div class="flex flex-row gap-2.5 items-center">
         <SectionTitle title="Комментарии" />

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

@@ -4,12 +4,12 @@
       <img
         :src="userAvatar"
         alt=""
-        class="size-14 rounded-full"
+        class="size-16 rounded-full border-3 border-primary"
       >
 
       <SectionTitle :title="`Привет, ${userStore.name}!`" />
 
-      Ты 1 уровня
+      <ProspectiveBlock />
     </div>
 
     <div class="flex flex-col gap-2.5">

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

@@ -0,0 +1,16 @@
+<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="Награды за Баллы" />
+
+      <p>Будет чуть позже</p>
+    </Section>
+  </PageContainer>
+</template>

apps/hub-telegram/app/stores/user.ts

@@ -16,6 +16,8 @@ export const useUserStore = defineStore('user', () => {
   const phone = ref<string | null>(null)
   const avatarUrl = ref<string | null>(null)
   const focusedTaskId = ref<string | null>(null)
+  const createdAt = ref<string | null>(null)
+  const prospectivePoints = ref(0)
 
   const initDataRaw = useSignal(initData.raw)
   const initDataState = useSignal(initData.state)
@@ -49,6 +51,8 @@ export const useUserStore = defineStore('user', () => {
       phone.value = data.phone
       avatarUrl.value = data.avatarUrl
       focusedTaskId.value = data.focusedTaskId
+      createdAt.value = data.createdAt
+      prospectivePoints.value = data.prospectivePoints
     } catch (error) {
       if (error instanceof Error) {
         if (error.message.includes('401')) {
@@ -99,6 +103,8 @@ export const useUserStore = defineStore('user', () => {
     email,
     avatarUrl,
     focusedTaskId,
+    createdAt,
+    prospectivePoints,
 
     fullName,
 

apps/hub-telegram/shared/utils/helpers.ts

@@ -1,5 +1,21 @@
 import type { FlowItemWithData } from '#shared/types'
 
+export function pluralizationRu(int: number, array: [string, string, string]): string {
+  const n = Math.abs(int)
+
+  let idx: 1 | 2 | 0
+  // @see http://docs.translatehouse.org/projects/localization-guide/en/latest/l10n/pluralforms.html
+  if (n % 10 === 1 && n % 100 !== 11) {
+    idx = 0 // one
+  } else if (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) {
+    idx = 1 // few
+  } else {
+    idx = 2 // many
+  }
+
+  return array[idx]
+}
+
 export function getIconNameForFlowItem(type: FlowItemWithData['type']): string {
   switch (type) {
     case 'user_post':

packages/database/src/tables.ts

@@ -26,6 +26,7 @@ export const users = pgTable('users', {
   phone: varchar('phone').unique(),
   avatarUrl: varchar('avatar_url'),
   focusedTaskId: cuid2('focused_task_id'),
+  prospectivePoints: integer('prospective_points').notNull().default(0),
   permissions: jsonb('permissions').notNull().default([]).$type<entities.PermissionCode[]>(),
   notifications: jsonb('notifications').notNull().default([]).$type<entities.NotificationOption[]>(),
   partnerId: cuid2('partner_id').references(() => partners.id),