v2

src/pages/AccountPage.vue

@@ -3,43 +3,63 @@
     <template #title>
       <div class="flex justify-between items-center text-white q-pa-sm w100">
         <div class="flex items-center justify-center row">
-          <q-avatar size="48px" class="q-mr-xs">
-            <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+          <q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
+            <q-img :src="tgUser.photo_url"/>
           </q-avatar>
           <div class="flex column">
             <span class="q-ml-xs text-h5">
-              Alex mart
+              {{
+                tgUser?.first_name + 
+                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+                tgUser?.last_name
+              }}
             </span>
             <span class="q-ml-xs text-caption">
-              @alexmart80
+              {{ tgUser?.username }}
             </span>
           </div>
-
         </div>
-        <q-btn
-          @click = "goProjects()"
-          flat round
-          icon="mdi-check"
-        />
       </div>
     </template>
 
     <pn-scroll-list>
       <div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
-        <div class="text-caption text-bold self-start q-pl-sm q-pb-sm">
-          {{ $t('account__user_settings') }}
-        </div>
-        <div class="flex w100">
-        <q-input
-          v-model="company"
-          dense
-          filled
-          class = "q-mb-md q-mr-md col-grow"
-          :label = "$t('account__your_company')"
-        />
-        <pn-image-selector v-if="company" :size="40" :iconsize="40"/>
-        
+        <div class="flex w100 justify-between items-center q-pl-sm">
+          <div class="text-caption text-bold">
+            {{ $t('account__user_settings') }}</div>
+          <q-btn
+            @click = "goProjects()"
+            flat round
+            color="primary"
+            icon="mdi-check"
+          />
         </div>
+        <q-transition-group
+          tag="div"
+          class="flex w100 company-container"
+          enter-active-class="animate__animated animate__fadeIn"
+          leave-active-class="animate__animated animate__fadeOut"
+          appear
+          >
+          <template v-if="company">
+            <pn-image-selector
+              key="image"
+              class="q-mr-sm company-logo"
+              :size="40"
+              :iconsize="40"
+            />
+          </template>
+
+          <q-input
+            key="input"
+            v-model="company"
+            dense
+            filled
+            class="q-mb-md col-grow company-input"
+            :label="$t('account__your_company')"
+            :style="{ marginLeft: !company ? '0' : '48px', transition: 'all 0.3s' }"
+          />
+        </q-transition-group>
         <q-expansion-item
           dense
           id="warning"
@@ -78,7 +98,6 @@
         <div id="qty_chats" class="flex column q-pt-lg w100 q-pl-sm">
           <div class="text-caption text-bold flex items-center">
             <span>{{ $t('account__chats') }}</span>
-            <q-icon name = "mdi-message-outline" class="q-ma-xs"/>
           </div>
           <div class="flex row justify-between">
             <qty-chat-card
@@ -95,54 +114,42 @@
           <div class="text-caption text-bold">
             {{ $t('account__subscribe') }}
           </div>
-          <div 
-            class="bg-info q-pa-sm text-white"
-            :style="{ borderRadius: '5px' }"
-            >
-            <q-item class="q-pa-none q-ma-none">
+
+            <q-item class="q-pa-sm text-caption">
               <q-item-section
                 avatar
                 class="q-pr-none"
                 :style="{ minWidth: 'inherit !important' }"
                 >
-                <q-icon name = "mdi-message-plus-outline"  size="md"/>
+                <q-icon name = "mdi-crown-circle-outline" color="orange" size="md"/>
               </q-item-section>
               <q-item-section class="q-pl-sm">
                 <span>{{ $t('account__subscribe_info') }}</span>
+                <span>{{ $t('account__subscribe_select_payment_1') }}</span>
+              <q-icon name = "mdi-star" class="text-orange" size="sm"/>
+              <span>{{ $t('account__subscribe_select_payment_2') }}</span>
               </q-item-section>
             </q-item>
-          </div>
-
           
           <div class="flex w100 justify-between items-center no-wrap q-pt-sm">
             <div class="flex column">
               <div>
                 {{ $t('account__subscribe_current_balance') }}
               </div>
-              <div class="text-caption text-grey">
-                {{ $t('account__subscribe_about') }} 3 {{ $t('months') }}
-              </div>
             </div>
 
             <div class="flex items-center">
-              <div class="text-bold q-pa-sm text-h6">
+              <q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
+              <div class="text-bold q-pa-xs text-h6">
                 50
               </div>
-              <span class="text-grey">
-                <q-icon name = "mdi-message-outline"/>
-                <q-icon name = "mdi-close"/>
-                <span>
-                  {{ $t('month') }}
-                </span>
-              </span>
+              
             </div>
           </div>
       
           <div id="payment-selector">
             <div class="q-py-sm">
-              <span>{{ $t('account__subscribe_select_payment_1') }}</span>
-              <q-icon name = "mdi-star" class="text-orange" size="sm"/>
-              <span>{{ $t('account__subscribe_select_payment_2') }}</span>
+              
             </div>
             <q-list>
               <q-item
@@ -199,16 +206,21 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref, inject } from 'vue'
   import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
   import optionPayment from 'components/admin/account-page/optionPayment.vue'
   import { useRouter } from 'vue-router'
+  import { useAuthStore } from 'stores/auth'
+  import type { WebApp } from '@twa-dev/types'
 
   const router = useRouter()
+  const authStore = useAuthStore()
 
+  const tg = inject('tg') as WebApp
+  const tgUser = tg.initDataUnsafe.user
   const company = ref<string>('')
   const showChangeAuthDialog = ref<boolean>(false)
-  
+
   const chats = ref([
     { title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
     { title: 'account__chats_archive', qty: 2, color: 'grey' },
@@ -225,6 +237,7 @@
 
   async function change_auth () {
     console.log('update')
+    console.log(authStore)
     await router.push({ name: 'login' })
   }
 
@@ -232,7 +245,6 @@
     await router.push({ name: 'projects' })
   }
 
-
 </script>
 
 <style lang="scss">
@@ -241,6 +253,24 @@
       padding: 0 !important;
     }
   }
-
-
 </style>
+
+<style scoped>
+  .company-container {
+    position: relative;
+    overflow: hidden;
+    min-height: 60px;
+  }
+
+  .company-logo {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+  }
+
+
+  :deep(.animate__animated) {
+    --animate-duration: 0.4s;
+    animation-fill-mode: both;
+  }
+</style>

src/pages/CompanyInfoPage.vue

@@ -6,35 +6,69 @@
           {{$t('company_info__title_card')}}
         </div>
         <q-btn
-          v-if="!isObjEqual<Company | undefined>(companyFromStore, companyMod)"
-          @click = "companiesStore.updateCompany(companyId, companyMod)"
+          v-if="isFormValid && isDirty()"
+          @click = "updateCompany()"
           flat round
           icon="mdi-check"
         />
       </div>
     </template>
     <pn-scroll-list>
-      <company-info-block v-model="companyMod"/>
+      <company-info-block
+        v-if="company"  
+        v-model="company"
+        @valid="isFormValid = $event"
+      />
       <company-info-persons/>
     </pn-scroll-list>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { useRoute } from 'vue-router'
+  import { ref, onMounted } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
   import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
   import companyInfoPersons from 'components/admin/companyInfoPersons.vue'
   import { useCompaniesStore } from 'stores/companies'
   import type { Company } from 'src/types'
-  import { isObjEqual } from 'boot/helpers'
+  import { parseIntString, isObjEqual } from 'boot/helpers'
 
+  const router = useRouter()
   const route = useRoute()
   const companiesStore = useCompaniesStore()
 
-  const companyId = Number(route.params.id)
-  const companyFromStore = companiesStore.companyById(companyId)
-  const companyMod = ref({...(companyFromStore ? companyFromStore  : <Company>{})})
+  const company = ref<Company>()
+  const companyId = parseIntString(route.params.companyId)
+
+  const isFormValid = ref(false)
+
+  const originalCompany = ref<Company>({} as Company)
+
+  const isDirty = () => {
+    return company.value && !isObjEqual(originalCompany.value, company.value)
+  }
+
+  onMounted(async () => {
+    if (companyId && companiesStore.companyById(companyId)) {
+      const initial = companiesStore.companyById(companyId)
+      
+      company.value = { ...initial } as Company
+      originalCompany.value = JSON.parse(JSON.stringify(company.value))
+    } else {
+      await abort()
+    }
+  })
+
+  function updateCompany () {
+    if (companyId && company.value) {
+      companiesStore.updateCompany(companyId, company.value)
+      router.back()
+    }
+  }
+
+  async function abort () {
+    await router.replace({name: 'projects'})
+  }
   
 </script>
 

src/pages/CreateAccountPage.vue

@@ -2,10 +2,12 @@
   <pn-page-card>
     <template #title>
       <div class="col-grow">
-        {{$t('create_account')}}
+        {{$t('login__register')}}
       </div>
     </template>
-    <account-helper :type />
+    <pn-scroll-list>
+      <account-helper :type />
+    </pn-scroll-list>
   </pn-page-card>
 </template>
 

src/pages/CreateProjectPage.vue

@@ -6,7 +6,7 @@
           {{$t('project_card__add_project')}}
         </div>
         <q-btn
-          v-if="(Object.keys(project).length !== 0)"
+          v-if="isFormValid && isDirty"
           @click = "addProject(project)"
           flat round
           icon="mdi-check"
@@ -14,13 +14,16 @@
       </div>
     </template>
     <pn-scroll-list>
-      <project-info-block v-model="project"/>
+      <project-info-block
+        v-model="project"
+        @valid="isFormValid = $event"
+      />
     </pn-scroll-list>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref, computed } from 'vue'
   import { useRouter } from 'vue-router'
   import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
   import { useProjectsStore } from 'stores/projects'
@@ -29,13 +32,26 @@
 
   const router = useRouter()
   const projectsStore = useProjectsStore()
-  const project = ref<ProjectParams>({
+  
+  const initialProject: ProjectParams = {
     name: '',
     logo: '',
     description: '',
     logo_as_bg: false
-  })
+  }
 
+  const project = ref<ProjectParams>({ ...initialProject })
+  const isFormValid = ref(false)
+
+  const isDirty = computed(() => {
+    return (
+      project.value.name !== initialProject.name ||
+      project.value.logo !== initialProject.logo ||
+      project.value.description !== initialProject.description ||
+      project.value.logo_as_bg !== initialProject.logo_as_bg
+    )
+  })
+  
  async function addProject (data: ProjectParams) {
     const newProject = projectsStore.addProject(data)
     await router.push({name: 'chats', params: { id: newProject.id}})

src/pages/ForgotPasswordPage.vue

@@ -5,11 +5,18 @@
         {{$t('forgot_password__password_recovery')}}
       </div>
     </template>
-    <account-helper :type />
+    <pn-scroll-list>
+      <account-helper :type :email="email"/>
+    </pn-scroll-list>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRoute } from 'vue-router' // Добавляем импорт
   import accountHelper from 'components/admin/accountHelper.vue'
+
+  const route = useRoute()
   const type = 'forgot'
+  const email = ref(route.query.email as string)
 </script>

src/pages/LoginPage.vue

@@ -1,6 +1,5 @@
 <template>
   <q-page class="flex column items-center justify-between">
-
     <q-card
       id="login_block"
       flat
@@ -9,7 +8,7 @@
       <login-logo
         class="col-grow q-pa-md"
         :style="{ alignItems: 'flex-end' }"
-    />
+        />
 
       <div class = "q-ma-md flex column input-login">
         <q-input
@@ -18,7 +17,6 @@
           filled
           class = "q-mb-md"
           :label = "$t('login__email')"
-          :rules="['email']"
         />
 
         <q-input
@@ -71,6 +69,7 @@
       </div>
     
       <div
+        v-if="isTelegramApp"
         id="alt_login"
         class="w80 q-flex column items-center q-pt-xl"
         >
@@ -85,11 +84,18 @@
           no-caps
           color="primary"
           :disabled="!acceptTermsOfUse"
+          @click="handleTelegramLogin"
           >
-          <span class="text-blue">
+          <div class="flex items-center text-blue">
             <q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
-            Alex mart
-          </span>
+            <div class="q-ml-xs ellipsis" style="max-width: 100px">
+              {{
+              tgUser?.first_name + 
+              (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+              tgUser?.last_name
+              }}
+            </div>
+          </div>
         </q-btn>
       </div>
     </q-card>
@@ -114,22 +120,36 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref, computed, inject } from 'vue'
+  import { useQuasar } from 'quasar'
   import { useRouter } from 'vue-router'
   import loginLogo from 'components/admin/login-page/loginLogo.vue'
-  // import { useI18n } from "vue-i18n"
+  import { useI18n } from "vue-i18n"
+  import { useAuthStore } from 'src/stores/auth'
+  import type { WebApp } from '@twa-dev/types'
+
+  const tg = inject('tg') as WebApp
+  const tgUser = tg.initDataUnsafe.user
+    
+  const authStore = useAuthStore()
   const router = useRouter()
-  // const { t } = useI18n()
+  const $q = useQuasar()
+  const { t } = useI18n()
 
   const login = ref<string>('')
   const password = ref<string>('')
   const isPwd = ref<boolean>(true)
   const acceptTermsOfUse = ref<boolean>(true)
 
-  /* function rules () :Record<string, Array<(value: string) => boolean | string>> {
-    return {
-      email: [value => (value.length <= 25) || t('login__incorrect_email')]}
-  } */
+  function onErrorLogin () {
+    $q.notify({
+      message: t('login__incorrect_login_data'),
+      type: 'negative',
+      position: 'bottom',
+      timeout: 2000,
+      multiLine: true
+    })
+  }
 
   async function sendAuth() {
     console.log('1')
@@ -137,12 +157,30 @@
   }
 
   async function forgotPwd() {
-    await router.push({ name: 'forgot_password' })
+    await router.push({
+      name: 'recovery_password',
+      query: { email: login.value } 
+    })
   }
 
   async function createAccount() {
     await router.push({ name: 'create_account' })
   }
+
+  const isTelegramApp = computed(() => {
+      // @ts-expect-ignore
+      return !!window.Telegram?.WebApp?.initData
+    })
+
+  /* const handleSubmit = async () => {
+    await authStore.loginWithCredentials(email.value, password.value)
+  } */
+
+async function handleTelegramLogin () {
+  // @ts-expect-ignore
+  const initData = window.Telegram.WebApp.initData
+  await authStore.loginWithTelegram(initData)
+}
   
 </script>
 

src/pages/PersonInfoPage.vue

@@ -14,70 +14,71 @@
     </template>
 
     <pn-scroll-list>
-      <div class="flex column">
-        <div class="flex column items-center col-grow q-pa-lg">
+        <div class="flex column items-center q-ma-lg">
+          
           <q-avatar size="100px">
             <q-img :src="person.logo"/>
           </q-avatar>
-          <div class="flex row items-start justify-center no-wrap">
-
+          
+          <div class="flex row items-start justify-center no-wrap q-pb-lg">
             <div class="flex column justify-center">
               <div class="text-bold q-pr-xs text-center">{{ person.tname }}</div>
               <div caption class="text-blue text-caption">{{ person.tusername }}</div>
             </div>
           </div>
 
-          <q-input
-            v-model="person.name"
-            dense
-            filled
-            class = "q-my-sm w100"
-            :label = "$t('person_card__name')"
-          />
+            <div class="q-gutter-y-lg w100">
+              <q-input
+                v-model="person.name"
+                dense
+                filled
+                class = "w100"
+                :label = "$t('person_card__name')"
+              />
 
-          <q-select
-            v-if="companies"
-            v-model="person.company"
-            :options="companies"
-            dense
-            filled
-            class="q-my-sm w100"
-            :label = "$t('person_card__company')"
-            >
-            <template #option="scope">
-              <q-item v-bind="scope.itemProps">
-                <q-item-section avatar>
-                  <q-avatar rounded size="md">
-                    <img v-if="scope.opt.logo" :src="scope.opt.logo"/>
-                    <pn-auto-avatar v-else :name="scope.opt.name"/>
-                  </q-avatar>   
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>{{ scope.opt.name }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </template>
-            <template v-slot:selected>
-                {{ JSON.parse(JSON.stringify(person.company)).name }}
-            </template>
-          </q-select>
+              <q-select
+                v-if="companies"
+                v-model="person.company"
+                :options="companies"
+                dense
+                filled
+                class="w100"
+                :label = "$t('person_card__company')"
+                >
+                <template #option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section avatar>
+                      <q-avatar rounded size="md">
+                        <img v-if="scope.opt.logo" :src="scope.opt.logo"/>
+                        <pn-auto-avatar v-else :name="scope.opt.name"/>
+                      </q-avatar>   
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label>{{ scope.opt.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
+                <template #selected>
+                    {{ JSON.parse(JSON.stringify(person.company)).name }}
+                </template>
+              </q-select>
 
-          <q-input
-            v-model="person.department"
-            dense
-            filled
-            class = "q-my-sm w100"
-            :label = "$t('person_card__department')"
-          />
+              <q-input
+                v-model="person.department"
+                dense
+                filled
+                class = "w100"
+                :label = "$t('person_card__department')"
+              />
 
-          <q-input
-            v-model="person.role"
-            dense
-            filled
-            class = "q-my-sm w100"
-            :label = "$t('person_card__role')"
-          />
-        </div>
+              <q-input
+                v-model="person.role"
+                dense
+                filled
+                class = "w100"
+                :label = "$t('person_card__role')"
+              />
+            </div>
       </div>
     </pn-scroll-list>
   </pn-page-card>
@@ -108,5 +109,5 @@
   }
 </script>
 
-<style lang="scss">
+<style>
 </style>

src/pages/ProjectInfoPage.vue

@@ -1,5 +1,4 @@
 <template>
-  >>{{ project }}
   <pn-page-card>
     <template #title>
       <div class="flex items-center justify-between col-grow">
@@ -7,6 +6,7 @@
           <span>{{ $t('project_card__project_card') }}</span>
         </div>
         <q-btn
+          v-if="isFormValid && isDirty()"
           @click="updateProject()"
           flat
           round
@@ -16,7 +16,11 @@
     </template>
 
     <pn-scroll-list>
-      <project-info-block v-if="project" v-model="project"/>
+      <project-info-block
+        v-if="project"
+        v-model="project"
+        @valid="isFormValid = $event"  
+      />
     </pn-scroll-list>
   </pn-page-card>
 </template>
@@ -27,9 +31,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useProjectsStore } from 'stores/projects'
 import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
 import type { Project } from '../types'
-import { parseIntString } from 'boot/helpers'
-
-// import { isObjEqual } from '../boot/helpers'
+import { parseIntString, isObjEqual } from 'boot/helpers'
 
 const router = useRouter()
 const route = useRoute()
@@ -38,12 +40,23 @@ const projectsStore = useProjectsStore()
 const project = ref<Project>()
 const id = parseIntString(route.params.id)
 
+const isFormValid = ref(false)
+
+const originalProject = ref<Project>({} as Project)
+
+const isDirty = () => {
+  return project.value && !isObjEqual(originalProject.value, project.value)
+}
+
 onMounted(async () => {
-    if (id && projectsStore.projectById(id)) {
-      project.value = projectsStore.projectById(id)
-    } else {
-      await abort()
-    }
+  if (id && projectsStore.projectById(id)) {
+    const initial = projectsStore.projectById(id)
+    
+    project.value = { ...initial } as Project
+    originalProject.value = JSON.parse(JSON.stringify(project.value))
+  } else {
+    await abort()
+  }
 })
 
 function updateProject () {

src/pages/ProjectPage.vue

@@ -27,7 +27,6 @@
           v-model="tabSelect"
           dense
           align="justify"
-          switch-indicator
           >
           <q-route-tab
             v-for="tab in tabs"
@@ -50,7 +49,7 @@
                     {{ currentProject?.[tab.name as keyof typeof currentProject] ?? 0 }}
                   </q-badge>
                 </q-icon>
-                <span>{{$t(tab.label)}}</span>
+                <span class="text-caption">{{$t(tab.label)}}</span>
               </div>
             </template>
           </q-route-tab>
@@ -78,7 +77,7 @@
   }
 
   const tabs = [
-    {name: 'chats', label: 'project__chats', icon: 'mdi-message-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
+    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
     {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', component: tabComponents.projectPagePersons, to: { name: 'persons'} },
     {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
   ]

src/pages/ProjectsPage.vue

@@ -15,11 +15,15 @@
             dense
             >
             <div class="flex items-center">
-              <q-avatar size="32px">
-                <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+              <q-avatar v-if="tgUser?.photo_url" size="32px">
+                <q-img :src="tgUser.photo_url"/>
               </q-avatar>
               <div class="q-ml-xs ellipsis" style="max-width: 100px">
-                Alex mart
+                {{
+                tgUser?.first_name + 
+                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+                tgUser?.last_name
+                }}
               </div>
             </div>
           </q-btn>
@@ -62,28 +66,25 @@
             <q-item-section>
               <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
               <q-item-label caption lines="2">{{item.description}}</q-item-label>
-              <q-item-label caption lines="1">
-                <div class = "flex justify-start items-center">
-                  <div class="q-mr-sm">
-                    <q-icon name="mdi-message-outline" class="q-mr-sm"/>
-                    <span>{{ item.chats }} </span>
-                  </div>
-                  <div class="q-mr-sm">
-                    <q-icon name="mdi-account-outline" class="q-mx-sm"/>
-                    <span>{{ item.persons }}</span>
-                  </div>
-                  <div class="q-mx-sm">
-                    <q-icon name="mdi-account-group-outline" class="q-mr-sm"/>
-                    <span>{{ item.companies }} </span>
-                  </div>
-                </div>
-              </q-item-label>
+
+          </q-item-section>
+          <q-item-section side class="text-caption ">
+            <div class="flex items-center column">           
+              <div class="flex items-center">
+                <q-icon name="mdi-chat-outline"/>
+                <span>{{ item.chats }} </span>
+              </div>
+              <div class="flex items-center">
+                <q-icon name="mdi-account-outline"/>
+                <span>{{ item.persons }}</span>
+              </div>
+            </div>  
           </q-item-section>
         </q-item>
       </q-list>
       <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
         <div id="btn_show_archive">
-          <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_down">
+          <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
             <template #label>
               <span class="text-caption">
                 <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
@@ -159,9 +160,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch } from 'vue'
+  import { ref, computed, watch, inject } from 'vue'
   import { useRouter } from 'vue-router'
   import { useProjectsStore } from 'stores/projects'
+  import type { WebApp } from '@twa-dev/types'
+
+  const tg = inject('tg') as WebApp
+  const tgUser = tg.initDataUnsafe.user
 
   const router = useRouter()
   const projectsStore = useProjectsStore()

src/pages/SettingsPage.vue

@@ -0,0 +1,93 @@
+<template>
+    <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{ $t('settings__title') }}
+        </div>
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      <q-list separator>
+        <q-item>
+          <q-item-section avatar>
+            <q-avatar color="primary" rounded text-color="white" icon="mdi-translate" size="md" />
+          </q-item-section>
+          <q-item-section>
+            <span>{{ $t('settings__language') }}</span>
+          </q-item-section>
+          <q-item-section>
+            <q-select
+              class="fix-input-right text-body1"
+              v-model="locale"
+              :options="localeOptions"
+              dense
+              borderless
+              emit-value
+              map-options
+              hide-bottom-space
+            />
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section avatar>
+            <q-avatar color="primary" rounded text-color="white" icon="mdi-format-size" size="md" />
+          </q-item-section>
+          <q-item-section>
+            <span>{{ $t('settings__font_size') }}</span>
+          </q-item-section>
+          <q-item-section>
+            <div class="flex justify-end">
+              <q-btn
+              @click="textSizeStore.decreaseFontSize()"
+                color="negative" flat
+                icon="mdi-format-font-size-decrease"
+                class="q-pa-sm q-mx-xs"
+                :disable="currentTextSize <= minTextSize"
+              />
+              <q-btn
+                @click="textSizeStore.increaseFontSize()"
+                color="positive" flat
+                icon="mdi-format-font-size-increase"
+                class="q-pa-sm q-mx-xs"
+                :disable="currentTextSize >= maxTextSize"
+              />
+            </div>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { watch, ref } from 'vue'
+  import { useTextSizeStore } from 'src/stores/textSize'
+
+  const { locale } = useI18n()
+  
+  const savedLocale = localStorage.getItem('locale') || 'en-US'
+  locale.value = savedLocale
+
+  const localeOptions = ref([
+    { value: 'en-US', label: 'English' },
+    { value: 'ru-RU', label: 'Русский' }
+  ])
+
+  watch(locale, (newLocale) => {
+    localStorage.setItem('locale', newLocale)
+  })
+
+  const textSizeStore = useTextSizeStore()
+  const currentTextSize = textSizeStore.currentFontSize
+  const maxTextSize = textSizeStore.maxFontSize 
+  const minTextSize = textSizeStore.minFontSize
+</script>
+
+<style scoped>
+ .fix-input-right :deep(.q-field__native) {
+    justify-content: end;
+  }
+</style>

src/pages/TermsPage.vue

@@ -0,0 +1,22 @@
+<template>
+    <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{ $t('terms__title') }}
+        </div>
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      Фигня которую никто не читает!
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style>
+</style>