Add a new tab on dashboard

Author: Stigmatoz

src/pages/Dashboard.vue

@@ -90,6 +90,27 @@
       </div>
     </div>
 
+    <div class="settings-tab">
+      <input
+        type="radio"
+        id="pomodoro-tab"
+        name="settings-group"
+        :checked="selectedTab == SettingsTab.Pomodoro"
+        v-on:change="selectTab(SettingsTab.Pomodoro)"
+      />
+      <label name="tabName" for="pomodoro-tab"
+        ><img src="../assets/icons/pomodoro.svg" height="30" />{{
+          t('pomodoroMode.message')
+        }}</label
+      >
+
+      <div class="settings-content">
+        <div class="main">
+          <Pomodoro v-if="selectedTab == SettingsTab.Pomodoro" />
+        </div>
+      </div>
+    </div>
+
     <div class="settings-tab">
       <input
         type="radio"
@@ -141,6 +162,7 @@ import GeneralSettings from '../components/GeneralSettings.vue';
 import WhiteList from '../components/WhiteList.vue';
 import Limits from '../components/Limits.vue';
 import DailyNotifications from '../components/Notifications.vue';
+import Pomodoro from '../components/Pomodoro.vue';
 import About from '../components/About.vue';
 import { SettingsTab } from '../utils/enums';
 import DashboadContainer from '../components/DashboadContainer.vue';

src/utils/enums.ts

@@ -17,6 +17,7 @@ export enum SettingsTab {
   WhiteList,
   Limits,
   Notifications,
+  Pomodoro,
   About,
 }
 

src/utils/extension-tabs.ts

@@ -16,6 +16,8 @@ export function getStringTab(tab: SettingsTab) {
       return 'whitelist';
     case SettingsTab.Notifications:
       return 'notifications';
+    case SettingsTab.Pomodoro:
+      return 'pomodoro';
   }
 }
 
@@ -35,5 +37,7 @@ export function getEnumValueTab(tab: string) {
       return SettingsTab.WhiteList;
     case 'notifications':
       return SettingsTab.Notifications;
+    case 'pomodoro':
+      return SettingsTab.Pomodoro;
   }
 }