From 79f4745ab67928864b60b159aa08d43b19405a53 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Thu, 29 Aug 2024 14:48:00 +0200
Subject: [PATCH] chore: all forms reworked (#240)

* chore: feed

* chore: all forms reworked

* chore: a href fixes
---
 apps/website/app/app.vue                      |  43 +++-
 apps/website/app/components/MainFeed.vue      | 184 ++++++++++++++++++
 apps/website/app/components/MainLogo.vue      |   2 +-
 apps/website/app/components/MenuProfile.vue   |  27 ++-
 .../app/components/TransactionBlock.vue       |  74 +++++++
 apps/website/app/pages/character/[id].vue     |  92 ++++++---
 apps/website/app/pages/character/index.vue    |  24 ++-
 apps/website/app/pages/coupon/index.vue       |  30 ++-
 apps/website/app/pages/index.vue              |  37 ++--
 apps/website/app/pages/p/[username].vue       |  30 ++-
 apps/website/app/pages/quest/[id].vue         |   9 +-
 apps/website/app/pages/trophy/[id].vue        |   8 +-
 apps/website/app/pages/trophy/index.vue       |  28 ++-
 apps/website/app/pages/trophy/new.vue         |   6 +-
 .../api/character/[id]/activate/index.post.ts |  13 +-
 .../api/character/[id]/post/index.post.ts     |  16 +-
 .../api/character/[id]/unlock/index.post.ts   |  10 +-
 apps/website/server/api/coupon/index.post.ts  |  15 +-
 .../website/server/api/post/[id]/like.post.ts |  13 +-
 .../server/api/transaction/index.get.ts       |   9 +-
 apps/website/server/api/trophy/index.post.ts  |  27 ++-
 21 files changed, 554 insertions(+), 143 deletions(-)
 create mode 100644 apps/website/app/components/MainFeed.vue
 create mode 100644 apps/website/app/components/TransactionBlock.vue

diff --git a/apps/website/app/app.vue b/apps/website/app/app.vue
index df5a0e3a..5b88ab2d 100644
--- a/apps/website/app/app.vue
+++ b/apps/website/app/app.vue
@@ -1,10 +1,39 @@
 <template>
-  <ActiveStreamBanner />
-  <MainHeader />
-  <main>
-    <nuxt-page />
-  </main>
-  <MainFooter />
+  <div class="app" :class="{ overflow: !isFeedOpened }">
+    <div class="content">
+      <ActiveStreamBanner />
+      <MainHeader />
+      <main>
+        <nuxt-page />
+      </main>
+      <MainFooter />
+    </div>
+
+    <MainFeed v-if="loggedIn" />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { isFeedOpened } = useApp()
+const { loggedIn } = useUserSession()
+</script>
+
+<style scoped>
+  .app {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+
+    &.overflow {
+      overflow: hidden;
+    }
+
+    .content {
+      position: relative;
+      flex-grow: 1;
+      flex-basis: 0;
+      width: 80vw;
+    }
+  }
+</style>
diff --git a/apps/website/app/components/MainFeed.vue b/apps/website/app/components/MainFeed.vue
new file mode 100644
index 00000000..6c6b7294
--- /dev/null
+++ b/apps/website/app/components/MainFeed.vue
@@ -0,0 +1,184 @@
+<template>
+  <aside :class="{ opened: isFeedOpened }">
+    <div class="inner-block">
+      <div class="top-block">
+        <div class="profile-block">
+          <a :href="localePath(`/p/${profile?.userName}`)" class="name">
+            {{ profile?.userName }}
+          </a>
+
+          <div class="currency-block">
+            <div v-if="profile && profile?.mana > 0" class="currency">
+              <div class="counter">
+                {{ profile.mana }}
+              </div>
+              <img src="~/assets/img/icons/mana/64.png" alt="" width="36" height="36">
+            </div>
+
+            <div v-if="profile && profile?.coins > 0" class="currency">
+              <div class="counter">
+                {{ profile.coins }}
+              </div>
+              <img src="~/assets/img/icons/coin/64.png" alt="" width="36" height="36">
+            </div>
+
+            <div v-if="profile && profile?.coupons > 0" class="currency">
+              <div class="counter">
+                {{ profile.coupons }}
+              </div>
+              <img src="~/assets/img/icons/coupon/64.png" alt="" width="36" height="36">
+            </div>
+          </div>
+          <button class="sign-out" @click="clear">
+            Выйти
+          </button>
+        </div>
+
+        <button class="close" @click="() => isFeedOpened = false">
+          <X :size="38" />
+        </button>
+      </div>
+
+      <div class="feed">
+        <div class="block-title">
+          Последние события
+        </div>
+
+        <TransactionBlock v-for="transaction in transactions" :key="transaction.id" :transaction="transaction" />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+
+const { isFeedOpened } = useApp()
+const localePath = useLocalePath()
+const { user, clear } = useUserSession()
+const { data: profile } = await useFetch(`/api/profile/userName/${user.value?.userName}`)
+const { data: transactions } = await useFetch('/api/transaction')
+</script>
+
+<style scoped>
+  aside {
+    background-color: var(--orange-1);
+    position: relative;
+    width: 0;
+    visibility: hidden;
+    display: block;
+    transition: 0.2s all;
+
+    &.opened {
+      visibility: visible;
+      width: 24em;
+      border-left: 0.15em solid var(--brown-4);
+    }
+
+    @media (max-width: 1024px) {
+      & {
+        display: none;
+      }
+    }
+
+    .inner-block {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+
+      .top-block {
+        position: sticky;
+        top: 0;
+        padding: 1em 1em;
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+        gap: 0.5em;
+        background-color: var(--orange-1);
+
+        .close {
+          transition: 0.2s all;
+          color: var(--brown-9);
+
+          &:hover {
+            scale: 1.2;
+            color: var(--brown-8);
+          }
+        }
+
+        .profile-block {
+          background-color: var(--brown-3);
+          color: var(--brown-11);
+          flex-grow: 1;
+          padding: 0.5em 0.75em;
+          border-radius: 0.5em;
+          border-left: 0.15em solid var(--brown-5);
+          border-bottom: 0.15em solid var(--brown-5);
+
+          .name {
+            width: 100%;
+            display: block;
+            color: inherit;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.3rem;
+            margin-bottom: 0.25em;
+            transition: 0.2s all;
+
+            &:hover {
+              text-decoration: none;
+              color: var(--green-9);
+            }
+          }
+
+          .sign-out {
+            font-weight: 600;
+            transition: 0.2s all;
+
+            &:hover {
+              color: var(--green-9);
+            }
+          }
+
+          .currency-block {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 0.5em;
+            margin-bottom: 0.75em;
+
+            .currency {
+              position: relative;
+              display: inline-block;
+
+              & .counter {
+                position: absolute;
+                bottom: -4px;
+                left: 50%;
+                transform: translateX(-50%);
+                color: var(--brown-2);
+                font-weight: 700;
+                font-size: 0.8rem;
+                background: var(--brown-10);
+                padding: 0 0.4em;
+                border-radius: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .block-title {
+    color: var(--brown-10);
+  }
+
+  .feed {
+    padding: 0 1em 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+  }
+</style>
diff --git a/apps/website/app/components/MainLogo.vue b/apps/website/app/components/MainLogo.vue
index 4e23c30e..bddb0e98 100644
--- a/apps/website/app/components/MainLogo.vue
+++ b/apps/website/app/components/MainLogo.vue
@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div v-if="$route.path === '/'" class="logo" :style="{ backgroundImage: randomCharUrl }" />
+    <div v-if="$route.path === localePath('/')" class="logo" :style="{ backgroundImage: randomCharUrl }" />
     <NuxtLink v-else :to="localePath('/')">
       <div class="logo shake" :style="{ backgroundImage: randomCharUrl }" />
     </NuxtLink>
diff --git a/apps/website/app/components/MenuProfile.vue b/apps/website/app/components/MenuProfile.vue
index 86f4bfb9..a10a5f41 100644
--- a/apps/website/app/components/MenuProfile.vue
+++ b/apps/website/app/components/MenuProfile.vue
@@ -13,11 +13,10 @@
 
 <script setup lang="ts">
 const { isFeedOpened } = useApp()
-const { loggedIn, user, clear } = useUserSession()
+const { loggedIn, user } = useUserSession()
 
 function handleMenuClick() {
   isFeedOpened.value = !isFeedOpened.value
-  clear()
 }
 </script>
 
@@ -51,7 +50,14 @@ function handleMenuClick() {
   transition: all 0.2s;
 
   &:hover {
-    opacity: 0.8;
+    animation-name: skewRandom;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+    animation-direction: alternate-reverse;
+    transform-origin: 50% 50%;
+    scale: 1.1;
+    opacity: 0.9;
   }
 
   img {
@@ -60,4 +66,19 @@ function handleMenuClick() {
     border-radius: 50%;
   }
 }
+
+@keyframes skewRandom {
+  0% {
+    transform: skewX(0);
+  }
+  50% {
+    transform: skewX(-3deg);
+  }
+  75% {
+    transform: skewX(3deg);
+  }
+  100% {
+    transform: skewX(0);
+  }
+}
 </style>
diff --git a/apps/website/app/components/TransactionBlock.vue b/apps/website/app/components/TransactionBlock.vue
new file mode 100644
index 00000000..5d7c6d72
--- /dev/null
+++ b/apps/website/app/components/TransactionBlock.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="item">
+    <div class="name">
+      <NuxtLink :to="localePath(`/p/${transaction.profile.userName}`)">
+        {{ transaction.profile.userName }}
+      </NuxtLink>
+    </div>
+    <div class="type">
+      {{ formatType(transaction.type, transaction.amount) }}
+    </div>
+
+    <time>{{ useLocaleTimeAgo(new Date(transaction.createdAt)) }}</time>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TransactionWithProfile } from '@chat-game/types'
+
+defineProps<{
+  transaction: TransactionWithProfile
+}>()
+const localePath = useLocalePath()
+
+function formatType(type: TransactionWithProfile['type'], amount: number) {
+  switch (type) {
+    case 'COIN_FROM_LVL_UP':
+      return 'Получил(а) +1 Монету за новый уровень Персонажа'
+    case 'CHARACTER_UNLOCK':
+      return 'Разблокировал(а) нового Персонажа'
+    case 'COINS_FROM_COUPON':
+      return 'Получил(а) 2 монеты за Купон'
+    case 'POINTS_FROM_LEVEL_UP':
+      return 'Получил(а) 5 очков "Коллекционера" за новый уровень Персонажа'
+    case 'POINTS_FROM_CHARACTER_UNLOCK':
+      return `Получил(а) ${amount} очков "Коллекционера" за разблокировку Персонажа`
+  }
+}
+</script>
+
+<style scoped>
+  .item {
+    padding: 0.5em;
+    background-color: var(--brown-2);
+    color: var(--brown-11);
+    border-radius: 0.5em;
+    border: 0.15em solid var(--brown-4);
+
+    .name {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 0.15em;
+
+      a {
+        color: var(--brown-11);
+        transition: 0.2s all;
+
+        &:hover {
+          color: var(--green-9);
+          text-decoration: none;
+        }
+      }
+    }
+
+    .type {
+      font-size: 0.8rem;
+      margin-bottom: 0.25em;
+    }
+
+    time {
+      font-size: 0.8rem;
+      color: var(--brown-9)
+    }
+  }
+</style>
diff --git a/apps/website/app/pages/character/[id].vue b/apps/website/app/pages/character/[id].vue
index 3c1c3fc9..34d0c9f9 100644
--- a/apps/website/app/pages/character/[id].vue
+++ b/apps/website/app/pages/character/[id].vue
@@ -18,12 +18,9 @@
       <div v-if="profileData?.activeEditionId === alreadyHaveCharacter?.id" class="active-character">
         Это твой активный Персонаж {{ alreadyHaveCharacter.level }} уровня
       </div>
-      <form v-else method="POST" action="?/activate">
-        <input type="hidden" name="characterId" :value="character.id">
-        <button formaction="?/activate" type="submit" class="submit-button">
-          <div>Активировать Персонажа</div>
-        </button>
-      </form>
+      <button v-else class="submit-button" @click="activateCharacter">
+        <div>Активировать Персонажа</div>
+      </button>
 
       <div class="bonus">
         + 1 Монета за новый уровень
@@ -34,22 +31,21 @@
     </div>
 
     <div v-else>
-      <form v-if="character.unlockedBy === 'COINS'" method="POST" action="?/unlock">
-        <input type="hidden" name="characterId" :value="character.id">
-        <button formaction="?/unlock" type="submit" class="submit-button" :disabled="!isEnoughCoins">
+      <div v-if="character.unlockedBy === 'COINS'">
+        <button type="submit" class="submit-button" :disabled="!isEnoughCoins" @click="unlockCharacter">
           <div>Разблокировать персонажа</div>
           <div class="price">
             Стоимость: {{ character.price }} Монет <img src="~/assets/img/icons/coin/64.png" alt="" width="22" height="22">
           </div>
         </button>
 
-        <div v-if="character.id === 'staoqh419yy3k22cbtm9wquc'" class="bonus">
+        <div v-if="character.id === twitchyId" class="bonus">
           Стартовый Персонаж
         </div>
         <div v-else class="bonus">
           + {{ character.price }} очков "Коллекционера"
         </div>
-      </form>
+      </div>
       <div v-else>
         Персонажа нельзя разблокировать за Монеты
       </div>
@@ -99,9 +95,9 @@
 
     <div v-if="topEditions?.length" class="block">
       <div v-for="edition in topEditions" :key="edition.id">
-        <a :href="localePath(`/p/${edition.profile.userName}`)">
+        <NuxtLink :to="localePath(`/p/${edition.profile.userName}`)">
           <p>{{ edition.profile.userName }}</p>
-        </a>
+        </NuxtLink>
         <p class="level">
           {{ edition.level }} уровень
         </p>
@@ -119,18 +115,17 @@
     </p>
 
     <div class="feed">
-      <form v-if="profileData" method="POST" action="?/add-post" class="add-post">
-        <input type="hidden" name="characterId" :value="character?.id">
+      <div v-if="profileData" class="add-post">
         <div class="content">
           <div class="action">
             Добавить новый пост
           </div>
 
           <div class="form-control">
-            <textarea name="text" :value="postText" placeholder="Пиши, не стесняйся. Максимум 1500 символов" rows="4" maxlength="1500" />
+            <textarea v-model="postText" name="text" placeholder="Пиши, не стесняйся. Максимум 1500 символов" rows="4" maxlength="1500" />
           </div>
 
-          <button formaction="?/add-post" class="submit-button" :disabled="!isReadyToPost">
+          <button class="submit-button" :disabled="!isReadyToPost" @click="addPost">
             <div>Отправить сообщение</div>
             <div class="price">
               Стоимость: 5 Маны <img src="~/assets/img/icons/mana/64.png" alt="" width="22" height="22">
@@ -144,7 +139,7 @@
             + 1 очко "Рассказчика" за каждый Лайк
           </div>
         </div>
-      </form>
+      </div>
 
       <p v-if="!posts?.length" class="empty">
         Пока нет постов
@@ -155,7 +150,9 @@
         <div class="content">
           <div class="info">
             <div class="desc">
-              <a :href="localePath(`/p/${post.profile.userName}`)">{{ post.profile.userName }}</a> добавил(а) новую заметку
+              <NuxtLink :to="localePath(`/p/${post.profile.userName}`)">
+                {{ post.profile.userName }}
+              </NuxtLink> добавил(а) новую заметку
             </div>
             <time>
               {{ useLocaleTimeAgo(new Date(post.createdAt)) }}
@@ -164,13 +161,12 @@
           <div class="message">
             {{ post.text }}
 
-            <form method="POST" action="?/add-like" class="likes-block">
-              <input type="hidden" name="postId" :value="post.id">
-              <button formaction="?/add-like" type="submit" :data-liked="post.likes.some(l => l.profileId === profileData?.id)">
+            <div class="likes-block">
+              <button :data-liked="post.likes.some(l => l.profileId === profileData?.id)" @click="addLike(post.id)">
                 <ThumbsUp :size="30" />
                 {{ post.rating }}
               </button>
-            </form>
+            </div>
           </div>
         </div>
       </div>
@@ -197,12 +193,58 @@ const { data: posts } = await useFetch(`/api/character/${route.params.id}/post`)
 const { user } = useUserSession()
 const { data: profileData } = await useFetch(`/api/profile/userName/${user.value?.userName}`)
 
+const twitchyId = 'staoqh419yy3k22cbtm9wquc'
 const alreadyHaveCharacter = profileData.value?.characterEditions.find((e) => e.characterId === character.value?.id)
 const coins = profileData.value?.coins ?? 0
+const mana = profileData.value?.mana ?? 0
 const price = character.value?.price ?? 0
 const isEnoughCoins = profileData ? coins >= price : false
-const isReadyToPost = false
-const postText = ''
+
+const postText = ref('')
+const isReadyToPost = computed(() => postText.value.length > 10 && mana >= 5)
+
+async function activateCharacter() {
+  const { data } = await useFetch(`/api/character/${route.params.id}/activate`, {
+    method: 'POST',
+  })
+
+  if (data.value) {
+    location.reload()
+  }
+}
+
+async function unlockCharacter() {
+  const { data } = await useFetch(`/api/character/${route.params.id}/unlock`, {
+    method: 'POST',
+  })
+
+  if (data.value) {
+    location.reload()
+  }
+}
+
+async function addLike(postId: string) {
+  const { data } = await useFetch(`/api/post/${postId}/like`, {
+    method: 'POST',
+  })
+
+  if (data.value) {
+    location.reload()
+  }
+}
+
+async function addPost() {
+  const { data } = await useFetch(`/api/character/${route.params.id}/post`, {
+    method: 'POST',
+    body: {
+      text: postText.value,
+    },
+  })
+
+  if (data.value) {
+    location.reload()
+  }
+}
 </script>
 
 <style scoped>
diff --git a/apps/website/app/pages/character/index.vue b/apps/website/app/pages/character/index.vue
index a64f3bf0..5bb5f043 100644
--- a/apps/website/app/pages/character/index.vue
+++ b/apps/website/app/pages/character/index.vue
@@ -26,7 +26,9 @@
         </div>
       </div>
 
-      <a :href="localePath('/shop')">Купить монеты</a>
+      <NuxtLink :to="localePath('/shop')">
+        Купить монеты
+      </NuxtLink>
     </div>
   </section>
 
@@ -41,16 +43,20 @@
         :class="{ active: !!char.editions.find(e => e.id === profile?.activeEditionId) }"
         class="cell"
       >
-        <a :href="localePath(`/character/${char.id}`)">
+        <NuxtLink :to="localePath(`/character/${char.id}`)">
           <img :src="`/units/${char.codename}/128.png`" alt="" class="avatar static">
           <img :src="`/units/${char.codename}/idle.gif`" alt="" class="avatar animated">
-          <p class="nickname">{{ char.nickname }}</p>
-          <div class="level">{{ char.editions.find(e => e.profileId === profile?.id)?.level }} уровень</div>
+          <p class="nickname">
+            {{ char.nickname }}
+          </p>
+          <div class="level">
+            {{ char.editions.find(e => e.profileId === profile?.id)?.level }} уровень
+          </div>
 
           <div v-if="char.price > 0" class="price">
             <img src="~/assets/img/icons/coin/32.png" alt="" width="18" height="18"> {{ char.price }}
           </div>
-        </a>
+        </NuxtLink>
       </div>
     </div>
   </section>
@@ -60,9 +66,11 @@
 
     <div class="collection-block">
       <div v-for="char in notReadyCharacters" :key="char.id" class="cell" :data-owned="!!char.editions.find(e => e.profileId === profile?.id)">
-        <a :href="localePath(`/character/${char.id}`)">
-          <p class="nickname">{{ char.nickname }}</p>
-        </a>
+        <NuxtLink :to="localePath(`/character/${char.id}`)">
+          <p class="nickname">
+            {{ char.nickname }}
+          </p>
+        </NuxtLink>
       </div>
     </div>
   </section>
diff --git a/apps/website/app/pages/coupon/index.vue b/apps/website/app/pages/coupon/index.vue
index 23e5ef5b..8db66d46 100644
--- a/apps/website/app/pages/coupon/index.vue
+++ b/apps/website/app/pages/coupon/index.vue
@@ -30,7 +30,9 @@
           </div>
         </div>
         <div>
-          <a :href="localePath(`/p/${coupon.profile?.userName}`)">{{ coupon.profile?.userName }}</a>
+          <NuxtLink :to="localePath(`/p/${coupon.profile?.userName}`)">
+            {{ coupon.profile?.userName }}
+          </NuxtLink>
         </div>
         <time>{{ useLocaleTimeAgo(new Date(coupon.createdAt)) }}</time>
       </div>
@@ -61,11 +63,9 @@
             <img src="~/assets/img/icons/coin/64.png" alt="" width="32" height="32">
           </div>
 
-          <form method="POST" action="?/coupon-to-coins">
-            <button formaction="?/coupon-to-coins" class="submit-button" :disabled="!isEnoughCoupons">
-              Активировать купон
-            </button>
-          </form>
+          <button class="submit-button" :disabled="!isEnoughCoupons" @click="activateCouponToCoins">
+            Активировать купон
+          </button>
         </div>
       </div>
 
@@ -79,7 +79,23 @@
 <script setup lang="ts">
 const localePath = useLocalePath()
 const { data: coupons } = await useFetch('/api/coupon/latest')
-const isEnoughCoupons = false
+
+const { user } = useUserSession()
+const { data: profileData } = await useFetch(`/api/profile/userName/${user.value?.userName}`)
+const isEnoughCoupons = profileData.value && profileData.value?.coupons > 0
+
+async function activateCouponToCoins() {
+  const { data } = await useFetch('/api/coupon', {
+    method: 'POST',
+    body: {
+      type: 'COINS',
+    },
+  })
+
+  if (data.value) {
+    location.reload()
+  }
+}
 </script>
 
 <style scoped>
diff --git a/apps/website/app/pages/index.vue b/apps/website/app/pages/index.vue
index 483550f0..eea32a82 100644
--- a/apps/website/app/pages/index.vue
+++ b/apps/website/app/pages/index.vue
@@ -8,6 +8,12 @@
       </h2>
     </section>
 
+    <div class="wagon-block">
+      <div class="wagon">
+        <img src="~/assets/img/wagon-full.png" alt="">
+      </div>
+    </div>
+
     <section>
       <p>
         Стример играет вместе со своей аудиторией. Либо он делает перерыв, пока зрители развлекаются
@@ -85,19 +91,6 @@ const profileCount = data.value?.count ?? 0
   transform: scale(1.05);
 }
 
-section {
-  text-align: center;
-  padding: 2em 1em;
-  margin: 0 auto;
-  max-width: 42em;
-}
-
-.hero {
-  padding-top: 4em;
-  padding-bottom: 4em;
-  max-width: 64em;
-}
-
 h1 {
   width: 100%;
   margin-bottom: 0.25em;
@@ -114,4 +107,22 @@ h2 {
 .mt-2 {
   margin-top: 1em;
 }
+
+.wagon-block {
+    width: 100%;
+    margin: 2em 0;
+    padding: 4em 0;
+    background-image: url(~/assets/img/background-green.webp);
+  }
+
+  .wagon {
+    margin: 0 auto;
+    width: fit-content;
+    text-align: center;
+  }
+
+  .wagon img {
+    width: 60vw;
+    max-width: fit-content;
+  }
 </style>
diff --git a/apps/website/app/pages/p/[username].vue b/apps/website/app/pages/p/[username].vue
index 8a6f0e88..2c27ffbf 100644
--- a/apps/website/app/pages/p/[username].vue
+++ b/apps/website/app/pages/p/[username].vue
@@ -33,7 +33,11 @@
     </div>
 
     <div class="active-character">
-      <div>Активный Персонаж: <a :href="localePath(`/character/${activeCharacter?.character.id}`)">{{ activeCharacter?.character.nickname }}</a></div>
+      <div>
+        Активный Персонаж: <NuxtLink :to="localePath(`/character/${activeCharacter?.character.id}`)">
+          {{ activeCharacter?.character.nickname }}
+        </NuxtLink>
+      </div>
       <div class="level">
         {{ activeCharacter?.level }} уровень <span class="xp">{{ activeCharacter?.xp }} опыта</span>
       </div>
@@ -107,12 +111,16 @@
 
     <div class="collection-block">
       <div v-for="char in pageProfile?.characterEditions" :key="char.id" class="cell" :class="{ active: char.id === activeCharacter?.id }">
-        <a :href="localePath(`/character/${char.character.id}`)">
+        <NuxtLink :to="localePath(`/character/${char.character.id}`)">
           <img :src="`/units/${char.character.codename}/128.png`" alt="" class="avatar static">
           <img :src="`/units/${char.character.codename}/idle.gif`" alt="" class="avatar animated">
-          <p class="nickname">{{ char.character.nickname }}</p>
-          <div class="level">{{ char.level }} уровень</div>
-        </a>
+          <p class="nickname">
+            {{ char.character.nickname }}
+          </p>
+          <div class="level">
+            {{ char.level }} уровень
+          </div>
+        </NuxtLink>
       </div>
     </div>
   </section>
@@ -126,11 +134,15 @@
 
     <div class="collection-block">
       <div v-for="trophyEdition in trophies" :key="trophyEdition.id" class="cell" :data-rarity="trophyEdition.trophy.rarity">
-        <a :href="localePath(`/trophy/${trophyEdition.trophy.id}`)">
+        <NuxtLink :to="localePath(`/trophy/${trophyEdition.trophy.id}`)">
           <img src="/trophies/default/64.png" alt="" width="64" height="64">
-          <div class="name">{{ trophyEdition.trophy.name }}</div>
-          <div class="points">{{ trophyEdition.trophy.points }} очков</div>
-        </a>
+          <div class="name">
+            {{ trophyEdition.trophy.name }}
+          </div>
+          <div class="points">
+            {{ trophyEdition.trophy.points }} очков
+          </div>
+        </NuxtLink>
       </div>
     </div>
   </section>
diff --git a/apps/website/app/pages/quest/[id].vue b/apps/website/app/pages/quest/[id].vue
index 77457e78..8e235775 100644
--- a/apps/website/app/pages/quest/[id].vue
+++ b/apps/website/app/pages/quest/[id].vue
@@ -2,7 +2,10 @@
   <section class="hero">
     <h1>{{ quest?.name }}</h1>
     <h2>
-      Задание, созданное <a :href="localePath(`/p/${quest?.profile.userName}`)">{{ quest?.profile.userName }}</a>
+      Задание, созданное
+      <NuxtLink :to="localePath(`/p/${quest?.profile.userName}`)">
+        {{ quest?.profile.userName }}
+      </NuxtLink>
     </h2>
   </section>
 
@@ -52,7 +55,9 @@
           <img src="/units/twitchy/128.png" alt="" width="64" height="64">
         </div>
         <div>
-          <a :href="localePath(`/p/${edition.profile.userName}`)">{{ edition.profile.userName }}</a>
+          <NuxtLink :to="localePath(`/p/${edition.profile.userName}`)">
+            {{ edition.profile.userName }}
+          </NuxtLink>
         </div>
         <time v-if="edition.completedAt">
           {{ useLocaleTimeAgo(new Date(edition.completedAt)) }}
diff --git a/apps/website/app/pages/trophy/[id].vue b/apps/website/app/pages/trophy/[id].vue
index 026d0191..af2924eb 100644
--- a/apps/website/app/pages/trophy/[id].vue
+++ b/apps/website/app/pages/trophy/[id].vue
@@ -2,7 +2,9 @@
   <section class="hero">
     <h1>{{ trophy?.name }}</h1>
     <h2>
-      Трофей, созданный <a :href="localePath(`/p/${trophy?.profile.userName}`)">{{ trophy?.profile.userName }}</a>
+      Трофей, созданный <NuxtLink :to="localePath(`/p/${trophy?.profile.userName}`)">
+        {{ trophy?.profile.userName }}
+      </NuxtLink>
     </h2>
   </section>
 
@@ -41,7 +43,9 @@
           <img src="/units/twitchy/128.png" alt="" width="64" height="64">
         </div>
         <div>
-          <a :href="localePath(`/p/${progress.profile.userName}`)">{{ progress.profile.userName }}</a>
+          <NuxtLink :to="localePath(`/p/${progress.profile.userName}`)">
+            {{ progress.profile.userName }}
+          </NuxtLink>
         </div>
         <time>{{ useLocaleTimeAgo(new Date(progress.createdAt)) }}</time>
       </div>
diff --git a/apps/website/app/pages/trophy/index.vue b/apps/website/app/pages/trophy/index.vue
index 624f6a9c..1e06dec7 100644
--- a/apps/website/app/pages/trophy/index.vue
+++ b/apps/website/app/pages/trophy/index.vue
@@ -4,18 +4,24 @@
     <h2>Придумываем вместе награды за особые активности на стримах</h2>
 
     <div class="create-new">
-      <a :href="localePath('/trophy/new')">Создать новый <img src="~/assets/img/icons/mana/64.png" alt="" width="32" height="32"></a>
+      <NuxtLink :to="localePath('/trophy/new')">
+        Создать новый <img src="~/assets/img/icons/mana/64.png" alt="" width="32" height="32">
+      </NuxtLink>
     </div>
   </section>
 
   <section class="trophies-block">
     <div class="trophies">
       <div v-for="trophy in readyTrophies" :key="trophy.id" class="cell" :data-rarity="trophy.rarity">
-        <a :href="localePath(`/trophy/${trophy.id}`)">
+        <NuxtLink :to="localePath(`/trophy/${trophy.id}`)">
           <img src="/trophies/default/64.png" alt="" width="64" height="64">
-          <div class="name">{{ trophy.name }}</div>
-          <div class="points">{{ trophy.points }} очков</div>
-        </a>
+          <div class="name">
+            {{ trophy.name }}
+          </div>
+          <div class="points">
+            {{ trophy.points }} очков
+          </div>
+        </NuxtLink>
       </div>
     </div>
   </section>
@@ -25,11 +31,15 @@
 
     <div class="trophies">
       <div v-for="trophy in inWorkTrophies" :key="trophy.id" class="cell" :data-rarity="trophy.rarity">
-        <a :href="localePath(`/trophy/${trophy.id}`)">
+        <NuxtLink :to="localePath(`/trophy/${trophy.id}`)">
           <img src="/trophies/default/64.png" alt="" width="64" height="64">
-          <div class="name">{{ trophy.name }}</div>
-          <div class="points">{{ trophy.points }} очков</div>
-        </a>
+          <div class="name">
+            {{ trophy.name }}
+          </div>
+          <div class="points">
+            {{ trophy.points }} очков
+          </div>
+        </NuxtLink>
       </div>
     </div>
   </section>
diff --git a/apps/website/app/pages/trophy/new.vue b/apps/website/app/pages/trophy/new.vue
index 9cd2af0b..fc7b3978 100644
--- a/apps/website/app/pages/trophy/new.vue
+++ b/apps/website/app/pages/trophy/new.vue
@@ -5,7 +5,7 @@
   </section>
 
   <section class="form">
-    <form method="post" action="?/create">
+    <form method="POST" action="/api/trophy">
       <div class="form-control">
         <input type="text" name="name" placeholder="Название трофея" maxlength="35">
       </div>
@@ -43,7 +43,9 @@
 </template>
 
 <script setup lang="ts">
-const isEnoughMana = false
+const { user } = useUserSession()
+const { data: profile } = await useFetch(`/api/profile/userName/${user.value?.userName}`)
+const isEnoughMana = profile.value && profile.value.mana >= 5
 
 const isCheckedTerms = ref(false)
 const isCheckedAgreed = ref(false)
diff --git a/apps/website/server/api/character/[id]/activate/index.post.ts b/apps/website/server/api/character/[id]/activate/index.post.ts
index 95631c4e..101f449e 100644
--- a/apps/website/server/api/character/[id]/activate/index.post.ts
+++ b/apps/website/server/api/character/[id]/activate/index.post.ts
@@ -1,19 +1,16 @@
-import type { EventHandlerRequest } from 'h3'
-
-export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>(async (event) => {
+export default defineEventHandler(async (event) => {
   const id = getRouterParam(event, 'id')
+  const session = await getUserSession(event)
 
-  const body = await readBody(event)
-
-  if (!body.profileId) {
+  if (!session?.user) {
     throw createError({
       statusCode: 400,
-      message: 'You must provide profileId',
+      message: 'Invalid data',
     })
   }
 
   const profile = await prisma.profile.findUnique({
-    where: { id: body.profileId },
+    where: { id: session?.user.id },
     include: {
       characterEditions: true,
     },
diff --git a/apps/website/server/api/character/[id]/post/index.post.ts b/apps/website/server/api/character/[id]/post/index.post.ts
index 732adbae..7d3bf741 100644
--- a/apps/website/server/api/character/[id]/post/index.post.ts
+++ b/apps/website/server/api/character/[id]/post/index.post.ts
@@ -1,26 +1,26 @@
-import type { EventHandlerRequest } from 'h3'
 import { createId } from '@paralleldrive/cuid2'
 
-export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>(async (event) => {
+export default defineEventHandler(async (event) => {
   const characterId = getRouterParam(event, 'id')
 
+  const session = await getUserSession(event)
   const body = await readBody(event)
 
-  if (!characterId || !body.profileId || !body.text) {
+  if (!characterId || !session?.user || !body.text) {
     throw createError({
       statusCode: 400,
-      message: 'You must provide profileId and text',
+      message: 'You must provide text',
     })
   }
 
-  // Check if not have a coin
+  // Check if not have mana
   const profile = await prisma.profile.findFirst({
-    where: { id: body.profileId, mana: { gte: 5 } },
+    where: { id: session.user.id, mana: { gte: 5 } },
   })
   if (!profile?.id) {
     throw createError({
       status: 400,
-      message: 'You do not have mana',
+      message: 'You do not have enough mana',
     })
   }
 
@@ -41,7 +41,7 @@ export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>
       id: createId(),
       text,
       characterId,
-      profileId: body.profileId,
+      profileId: profile.id,
       type: 'NOTE',
     },
   })
diff --git a/apps/website/server/api/character/[id]/unlock/index.post.ts b/apps/website/server/api/character/[id]/unlock/index.post.ts
index 04ff9f8f..fd7308d4 100644
--- a/apps/website/server/api/character/[id]/unlock/index.post.ts
+++ b/apps/website/server/api/character/[id]/unlock/index.post.ts
@@ -1,12 +1,10 @@
-import type { EventHandlerRequest } from 'h3'
 import { createId } from '@paralleldrive/cuid2'
 
-export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>(async (event) => {
+export default defineEventHandler(async (event) => {
   const id = getRouterParam(event, 'id')
+  const session = await getUserSession(event)
 
-  const body = await readBody(event)
-
-  if (!body.profileId) {
+  if (!session.user) {
     throw createError({
       statusCode: 400,
       message: 'You must provide profileId',
@@ -14,7 +12,7 @@ export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>
   }
 
   const profile = await prisma.profile.findUnique({
-    where: { id: body.profileId },
+    where: { id: session.user.id },
     include: {
       characterEditions: true,
     },
diff --git a/apps/website/server/api/coupon/index.post.ts b/apps/website/server/api/coupon/index.post.ts
index 1f3be629..e9155488 100644
--- a/apps/website/server/api/coupon/index.post.ts
+++ b/apps/website/server/api/coupon/index.post.ts
@@ -1,26 +1,29 @@
-import type { EventHandlerRequest } from 'h3'
 import { createId } from '@paralleldrive/cuid2'
 
-export default defineEventHandler<EventHandlerRequest, Promise<{ ok: true }>>(async (event) => {
+export default defineEventHandler(async (event) => {
   const body = await readBody(event)
+  const session = await getUserSession(event)
 
-  if (!body.profileId || !body.type) {
+  if (!session?.user || !body.type) {
     throw createError({
       statusCode: 400,
-      message: 'You must provide profileId and type',
+      message: 'Invalid data',
     })
   }
 
+  const type = body.type as string
+
   const profile = await prisma.profile.findFirst({
-    where: { id: body.profileId },
+    where: { id: session.user.id, coupons: { gte: 1 } },
   })
   if (!profile) {
     throw createError({
       status: 404,
+      message: 'You do not have enough coupons',
     })
   }
 
-  if (body.type === 'COINS' && profile.coupons > 0) {
+  if (type === 'COINS') {
     await prisma.profile.update({
       where: { id: profile.id },
       data: {
diff --git a/apps/website/server/api/post/[id]/like.post.ts b/apps/website/server/api/post/[id]/like.post.ts
index 7bcc34fd..4387c424 100644
--- a/apps/website/server/api/post/[id]/like.post.ts
+++ b/apps/website/server/api/post/[id]/like.post.ts
@@ -1,14 +1,13 @@
-import type { EventHandlerRequest } from 'h3'
 import { createId } from '@paralleldrive/cuid2'
 
-export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>(async (event) => {
+export default defineEventHandler(async (event) => {
   const postId = getRouterParam(event, 'id')
-  const body = await readBody(event)
+  const session = await getUserSession(event)
 
-  if (!body.profileId) {
+  if (!session?.user) {
     throw createError({
       statusCode: 400,
-      message: 'You must provide profileId',
+      message: 'Invalid data',
     })
   }
 
@@ -22,7 +21,7 @@ export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>
   }
 
   const profile = await prisma.profile.findUnique({
-    where: { id: body.profileId },
+    where: { id: session.user.id },
   })
   if (!profile) {
     throw createError({
@@ -32,7 +31,7 @@ export default defineEventHandler<EventHandlerRequest, Promise<{ ok: boolean }>>
 
   // Check if already have like
   const like = await prisma.like.findFirst({
-    where: { profileId: body.profileId, postId: post.id },
+    where: { profileId: profile.id, postId: post.id },
   })
   if (like?.id) {
     throw createError({
diff --git a/apps/website/server/api/transaction/index.get.ts b/apps/website/server/api/transaction/index.get.ts
index ce95bbe1..3fe2b6bc 100644
--- a/apps/website/server/api/transaction/index.get.ts
+++ b/apps/website/server/api/transaction/index.get.ts
@@ -1,7 +1,4 @@
-import type { EventHandlerRequest } from 'h3'
-import type { TransactionWithProfile } from '@chat-game/types'
-
-export default defineEventHandler<EventHandlerRequest, Promise<TransactionWithProfile[]>>(
+export default defineEventHandler(
   async () => {
     const transactions = await prisma.transaction.findMany({
       include: {
@@ -10,9 +7,9 @@ export default defineEventHandler<EventHandlerRequest, Promise<TransactionWithPr
       orderBy: {
         createdAt: 'desc',
       },
-      take: 50,
+      take: 15,
     })
 
-    return transactions as TransactionWithProfile[]
+    return transactions
   },
 )
diff --git a/apps/website/server/api/trophy/index.post.ts b/apps/website/server/api/trophy/index.post.ts
index f32ea641..95f6f7b8 100644
--- a/apps/website/server/api/trophy/index.post.ts
+++ b/apps/website/server/api/trophy/index.post.ts
@@ -1,20 +1,22 @@
-import type { EventHandlerRequest } from 'h3'
 import { createId } from '@paralleldrive/cuid2'
-import type { TrophyCreateResponse } from '@chat-game/types'
 
-export default defineEventHandler<EventHandlerRequest, Promise<TrophyCreateResponse>>(
+export default defineEventHandler(
   async (event) => {
-    const body = await readBody(event)
+    const formData = await readFormData(event)
+    const session = await getUserSession(event)
 
-    if (!body.profileId || !body.name || !body.description) {
+    if (!session?.user || !formData.has('name') || !formData.has('description')) {
       throw createError({
         statusCode: 400,
-        message: 'You must provide data',
+        message: 'Invalid data',
       })
     }
 
+    let name = formData.get('name') as string
+    let description = formData.get('description') as string
+
     const profile = await prisma.profile.findUnique({
-      where: { id: body.profileId, mana: { gte: 5 } },
+      where: { id: session?.user.id, mana: { gte: 5 } },
     })
     if (!profile) {
       throw createError({
@@ -31,23 +33,20 @@ export default defineEventHandler<EventHandlerRequest, Promise<TrophyCreateRespo
     })
 
     // sanitize, max chars
-    const name = body.name.trim().substring(0, 35)
-    const description = body.description.trim().substring(0, 140)
+    name = name.trim().substring(0, 35)
+    description = description.trim().substring(0, 140)
 
     const trophy = await prisma.trophy.create({
       data: {
         id: createId(),
         name,
         description,
-        profileId: body.profileId,
+        profileId: profile.id,
         points: 10,
         rarity: 0,
       },
     })
 
-    return {
-      ok: true,
-      result: trophy,
-    }
+    return sendRedirect(event, `/trophy/${trophy.id}`)
   },
 )