Add link to dashboard

Author: Stigmatoz

src/assets/icons/dashboard.svg

@@ -11,13 +11,13 @@
         type="radio"
         id="timeIntervalChart-tab"
         name="settings-group"
-        checked
-        v-on:change="selectTab(SettingsTab.TimeIntervalChart)"
+        :checked="selectedTab == SettingsTab.Dashboard"
+        v-on:change="selectTab(SettingsTab.Dashboard)"
       />
       <label name="tabName" for="timeIntervalChart-tab">{{ t('dashboard.message') }}</label>
 
       <div class="settings-content">
-        <Dashboad v-if="selectedTab == SettingsTab.TimeIntervalChart" />
+        <Dashboad v-if="selectedTab == SettingsTab.Dashboard" />
       </div>
     </div>
     <!-- <p class="tab-separator">Settings</p> -->
@@ -26,6 +26,7 @@
         type="radio"
         id="general-tab"
         name="settings-group"
+        :checked="selectedTab == SettingsTab.GeneralSettings"
         v-on:change="selectTab(SettingsTab.GeneralSettings)"
       />
       <label name="tabName" for="general-tab">{{ t('generalSettings.message') }}</label>
@@ -40,6 +41,7 @@
         type="radio"
         id="white-list-tab"
         name="settings-group"
+        :checked="selectedTab == SettingsTab.WhiteList"
         v-on:change="selectTab(SettingsTab.WhiteList)"
       />
       <label name="tabName" for="white-list-tab">{{ t('whiteListSettings.message') }}</label>
@@ -54,6 +56,7 @@
         type="radio"
         id="limits-tab"
         name="settings-group"
+        :checked="selectedTab == SettingsTab.Limits"
         v-on:change="selectTab(SettingsTab.Limits)"
       />
       <label name="tabName" for="limits-tab">{{ t('limitsSettings.message') }}</label>
@@ -67,6 +70,7 @@
         type="radio"
         id="notification-tab"
         name="settings-group"
+        :checked="selectedTab == SettingsTab.Notifications"
         v-on:change="selectTab(SettingsTab.Notifications)"
       />
       <label name="tabName" for="notification-tab">{{ t('notificationsSettings.message') }}</label>
@@ -81,6 +85,7 @@
         type="radio"
         id="about-tab"
         name="settings-group"
+        :checked="selectedTab == SettingsTab.About"
         v-on:change="selectTab(SettingsTab.About)"
       />
       <label name="tabName" for="about-tab">{{ t('aboutSettings.message') }}</label>
@@ -107,7 +112,20 @@ const { t } = useI18n();
 
 const selectedTab = ref<SettingsTab>();
 
-onMounted(() => (selectedTab.value = SettingsTab.TimeIntervalChart));
+onMounted(() => {
+  const urlObj = new URL(location.href);
+  const tabName = urlObj.searchParams.get('tab');
+  if (tabName != null && tabName != '') {
+    switch (tabName) {
+      case 'dashboard':
+        selectedTab.value = SettingsTab.Dashboard;
+        break;
+      case 'settings':
+        selectedTab.value = SettingsTab.GeneralSettings;
+        break;
+    }
+  } else selectedTab.value = selectedTab.value = SettingsTab.Dashboard;
+});
 
 function selectTab(value: SettingsTab) {
   selectedTab.value = value;

src/pages/Dashboard.vue

@@ -6,7 +6,10 @@
     </div>
     <div class="icons-block">
       <!-- <img height="17" src="../assets/icons/dark-mode.svg" /> -->
-      <a @click="openDashboard()"
+      <a @click="openPage(SettingsTab.Dashboard)"
+        >{{ t('dashboard.message') }}<img height="22" src="../assets/icons/dashboard.svg"
+      /></a>
+      <a @click="openPage(SettingsTab.GeneralSettings)"
         >{{ t('settings.message') }}<img height="22" src="../assets/icons/settings.svg"
       /></a>
     </div>
@@ -74,13 +77,23 @@ 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';
+import { SettingsTab, TypeOfList } from '../utils/enums';
 
 const { t } = useI18n();
 
-async function openDashboard() {
+async function openPage(tab: SettingsTab) {
+  let tabName = '';
+  switch (tab) {
+    case SettingsTab.Dashboard:
+      tabName = 'dashboard';
+      break;
+    case SettingsTab.GeneralSettings:
+      tabName = 'settings';
+      break;
+  }
+  const url = Browser.runtime.getURL(`src/dashboard.html${tabName != '' ? `?tab=${tabName}` : ''}`);
   await Browser.tabs.create({
-    url: Browser.runtime.getURL('src/dashboard.html'),
+    url: url,
     active: true,
   });
 }

src/pages/Popup.vue

@@ -11,7 +11,7 @@ export enum SortingBy {
 }
 
 export enum SettingsTab {
-  TimeIntervalChart,
+  Dashboard,
   GeneralSettings,
   WhiteList,
   Limits,