From 6b2208f0aef590795e91c0ecf204aba59839eae6 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Thu, 8 Jan 2026 13:58:09 +0700
Subject: [PATCH] Add KYC translations, AI button, improve chat, swap homepage
 sections

- Add missing kycOverview.list translations (en + ru)
- Add AI assistant button to navigation (left of globe)
- Improve AI chat layout: fixed textarea at bottom, full width
- Swap homepage sections: How it works before Who it's for
---
 app/components/navigation/MainNavigation.vue |  7 ++-
 app/pages/clientarea/ai/index.vue            | 12 ++--
 app/pages/index.vue                          | 60 ++++++++++----------
 i18n/locales/en/kycOverview.json             | 11 ++++
 i18n/locales/ru/kycOverview.json             | 11 ++++
 5 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 388df02..779ed25 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -21,8 +21,13 @@
         </NuxtLink>
       </nav>
 
-      <!-- Right: Globe + Team + User -->
+      <!-- Right: AI + Globe + Team + User -->
       <div class="flex items-center gap-2 ml-auto">
+        <!-- AI Assistant button -->
+        <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle">
+          <Icon name="lucide:bot" size="20" />
+        </NuxtLink>
+
         <!-- Globe (language/currency) dropdown -->
         <div class="dropdown dropdown-end">
           <button tabindex="0" class="btn btn-ghost btn-circle">
diff --git a/app/pages/clientarea/ai/index.vue b/app/pages/clientarea/ai/index.vue
index 51ff083..2adf3ba 100644
--- a/app/pages/clientarea/ai/index.vue
+++ b/app/pages/clientarea/ai/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-4rem)]">
+  <div class="flex flex-col h-[calc(100vh-8rem)]">
     <!-- Chat messages area -->
-    <div ref="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-3">
+    <div ref="chatContainer" class="flex-1 overflow-y-auto p-4 pb-24 space-y-3">
       <div
         v-for="(message, idx) in chat"
         :key="idx"
@@ -9,7 +9,7 @@
         :class="message.role === 'user' ? 'justify-end' : 'justify-start'"
       >
         <div
-          class="max-w-[80%] lg:max-w-[60%] rounded-2xl px-4 py-3 shadow-sm"
+          class="max-w-[80%] lg:max-w-[70%] rounded-2xl px-4 py-3 shadow-sm"
           :class="message.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-100 text-base-content'"
         >
           <Text weight="semibold" class="mb-1">
@@ -25,9 +25,9 @@
       </div>
     </div>
 
-    <!-- Input area pinned to bottom -->
-    <div class="border-t border-base-300 bg-base-100 p-4">
-      <form class="flex items-end gap-3 max-w-4xl mx-auto" @submit.prevent="handleSend">
+    <!-- Input area fixed to bottom -->
+    <div class="fixed bottom-0 left-0 right-0 border-t border-base-300 bg-base-100 p-4 z-30">
+      <form class="flex items-end gap-3 px-4 lg:px-6" @submit.prevent="handleSend">
         <div class="flex-1">
           <Textarea
             v-model="input"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1f0587f..2f8a0b6 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,36 @@
 <template>
   <Stack gap="12">
+    <!-- How it works -->
+    <Section variant="plain">
+      <Stack gap="6" align="center">
+          <Heading :level="2">{{ $t('howto.title') }}</Heading>
+          <Grid :cols="1" :md="3" :gap="6">
+            <Card padding="lg">
+              <Stack gap="3" align="center">
+                <IconCircle tone="primary">🔍</IconCircle>
+                <Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
+                <Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
+              </Stack>
+            </Card>
+            <Card padding="lg">
+              <Stack gap="3" align="center">
+                <IconCircle tone="primary">🤝</IconCircle>
+                <Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
+                <Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
+              </Stack>
+            </Card>
+            <Card padding="lg">
+              <Stack gap="3" align="center">
+                <IconCircle tone="primary">⚡</IconCircle>
+                <Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
+                <Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
+              </Stack>
+            </Card>
+          </Grid>
+        </Stack>
+    </Section>
+
+    <!-- Who it's for -->
     <Section variant="plain">
       <Stack gap="8" align="center">
           <Heading :level="2">{{ $t('roles.title') }}</Heading>
@@ -53,35 +84,6 @@
           </Grid>
         </Stack>
     </Section>
-
-    <Section variant="plain">
-      <Stack gap="6" align="center">
-          <Heading :level="2">{{ $t('howto.title') }}</Heading>
-          <Grid :cols="1" :md="3" :gap="6">
-            <Card padding="lg">
-              <Stack gap="3" align="center">
-                <IconCircle tone="primary">🔍</IconCircle>
-                <Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
-              </Stack>
-            </Card>
-            <Card padding="lg">
-              <Stack gap="3" align="center">
-                <IconCircle tone="primary">🤝</IconCircle>
-                <Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
-              </Stack>
-            </Card>
-            <Card padding="lg">
-              <Stack gap="3" align="center">
-                <IconCircle tone="primary">⚡</IconCircle>
-                <Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
-                <Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
-              </Stack>
-            </Card>
-          </Grid>
-        </Stack>
-    </Section>
   </Stack>
 </template>
 
diff --git a/i18n/locales/en/kycOverview.json b/i18n/locales/en/kycOverview.json
index 7ec0e4a..0bdbccb 100644
--- a/i18n/locales/en/kycOverview.json
+++ b/i18n/locales/en/kycOverview.json
@@ -3,6 +3,17 @@
     "header": {
       "title": "KYC verification"
     },
+    "list": {
+      "title": "My applications",
+      "unnamed": "Unnamed company",
+      "submitted": "Submitted",
+      "inn": "INN",
+      "status": {
+        "approved": "Approved",
+        "rejected": "Rejected",
+        "pending": "Pending"
+      }
+    },
     "errors": {
       "title": "Error",
       "retry": "Retry",
diff --git a/i18n/locales/ru/kycOverview.json b/i18n/locales/ru/kycOverview.json
index 5723f40..c701761 100644
--- a/i18n/locales/ru/kycOverview.json
+++ b/i18n/locales/ru/kycOverview.json
@@ -3,6 +3,17 @@
     "header": {
       "title": "Верификация KYC"
     },
+    "list": {
+      "title": "Мои заявки",
+      "unnamed": "Без названия",
+      "submitted": "Подано",
+      "inn": "ИНН",
+      "status": {
+        "approved": "Одобрено",
+        "rejected": "Отклонено",
+        "pending": "На рассмотрении"
+      }
+    },
     "errors": {
       "title": "Ошибка",
       "retry": "Повторить",