Prepare localization

Author: Stigmatoz

src/_locales/en/messages.json

@@ -5,8 +5,16 @@
     "extDescription": {
         "message": "Track, limit and block the time of your web activity. Monitor how much time you spend on websites and review your web analytics."
     },
-    "settings": "Settings",
-    "today": "Today",
-    "allTime": "All The Time",
-    "byDays": "By Days"
+    "settings": {
+        "message": "Settings"
+    },
+    "today": {
+        "message": "Today"
+    },
+    "allTime": {
+        "message": "All The Time"
+    },
+    "byDays": {
+        "message": "By Days"
+    }
 }

src/_locales/ru/messages.json

@@ -1,12 +1,20 @@
 {
     "extName": {
-        "message": "Web Activity Time Tracker - Веб аналитика"
+        "message": "Web Activity Time Tracker - \u0412\u0435\u0431 аналитика"
     },
     "extDescription": {
         "message": "Отслеживайте, ограничивайте и блокируйте время вашей веб-активности. Следите за тем, сколько времени вы проводите на сайтах."
     },
-    "settings": "Настройки",
-    "today": "Сегодня",
-    "allTime": "За все время",
-    "byDays": "По дням"
+    "settings": {
+        "message": "Настройки"
+    },
+    "today": {
+        "message": "Сегодня"
+    },
+    "allTime": {
+        "message": "\u0417\u0430 все время"
+    },
+    "byDays": {
+        "message": "По дням"
+    }
 }

src/pages/Popup.vue

@@ -6,7 +6,9 @@
     </div>
     <div class="icons-block">
       <!-- <img height="17" src="../assets/icons/dark-mode.svg" /> -->
-      <a @click="openDashboard()">Settings<img height="22" src="../assets/icons/settings.svg" /></a>
+      <a @click="openDashboard()"
+        >{{ t('settings.message') }}<img height="22" src="../assets/icons/settings.svg"
+      /></a>
     </div>
   </div>
   <div class="tabs">
@@ -31,13 +33,19 @@
     />
     <ul>
       <li title="Today">
-        <label for="todayTab" role="button"><span>Today</span></label>
+        <label for="todayTab" role="button"
+          ><span>{{ t('today.message') }}</span></label
+        >
       </li>
       <li title="All The Time">
-        <label for="allTimeTab" role="button"><span>All The Time</span></label>
+        <label for="allTimeTab" role="button"
+          ><span>{{ t('allTime.message') }}</span></label
+        >
       </li>
       <li title="By Days">
-        <label for="byDaysTab" role="button"><span>By Days</span></label>
+        <label for="byDaysTab" role="button"
+          ><span>{{ t('byDays.message') }}</span></label
+        >
       </li>
     </ul>
 
@@ -62,11 +70,14 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import Browser from 'webextension-polyfill';
 import TabList from '../components/TabList.vue';
 import ByDays from '../components/ByDays.vue';
 import { TypeOfList } from '../utils/enums';
 
+const { t } = useI18n();
+
 async function openDashboard() {
   await Browser.tabs.create({
     url: Browser.runtime.getURL('src/dashboard.html'),