Implement single shared data source for dashboard components

- Refactor Dashboard component to create shared data state (dashboardData) for consistent data across all dashboard views
- Update TopSitesPieChart to accept shared data prop and use it when available
- Update TabList component to accept shared data prop and prioritize shared data over independent fetching
- Add watchers in both components to reactively update when shared data changes
- Add loading state in Dashboard component while data is being fetched
- Fix button text color to black for better visibility
- Ensure pie chart, table, and legend all use the same single source of truth
- Improve performance by loading data once instead of multiple times
- Add proper null safety and default values to prevent TypeScript errors

Author: abyabraham93

dist/dark.css

@@ -30,7 +30,7 @@
         @click="openChart(TypeOfChart.Blank)"
       >
         <span class="ml-5 blank-icon">🔒</span>
-        {{ t('blank') }}
+        {{ t('Blank') }}
       </button>
     </div>
     <HourlyChart v-if="chart == TypeOfChart.Horly" />
@@ -39,10 +39,13 @@
     <BlankView v-if="chart == TypeOfChart.Blank" />
   </div>
   <div v-if="chart == TypeOfChart.Horly">
-    <TopSitesPieChart />
-    <div class="tab-items">
-      <TabList :type="TypeOfList.Dashboard" :showAllStats="false" />
-    </div>
+    <div v-if="isLoadingData" class="loading-indicator">Loading...</div>
+    <template v-else>
+      <TopSitesPieChart :tabListData="dashboardData" />
+      <div class="tab-items">
+        <TabList :type="TypeOfList.Dashboard" :showAllStats="false" :tabListData="dashboardData" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -60,14 +63,21 @@ import NotesView from './NotesView.vue';
 import BlankView from './BlankView.vue';
 import TabList from '../components/TabList.vue';
 import TopSitesPieChart from './TopSitesPieChart.vue';
-import { TypeOfList } from '../utils/enums';
+import { TypeOfList, SortingBy } from '../utils/enums';
 import { onMounted, ref, onUnmounted, watch } from 'vue';
 import Browser from 'webextension-polyfill';
+import { useTodayTabListSummary } from '../functions/useTodayTabListSummary';
+import { TabListSummary } from '../dto/tabListSummary';
+import { Tab } from '../entity/tab';
 
 const { t } = useI18n();
 const chart = ref<TypeOfChart>();
 const refreshTimer = ref<number | null>(null);
 
+// Shared data state for dashboard components
+const dashboardData = ref<TabListSummary | null>(null);
+const isLoadingData = ref<boolean>(true);
+
 enum TypeOfChart {
   Horly,
   Interval,
@@ -79,28 +89,23 @@ enum TypeOfChart {
 const CHART_PREFERENCE_KEY = 'dashboard_chart_preference';
 
 onMounted(async () => {
-  // Get saved preference from storage
   try {
-    const result = await Browser.storage.local.get(CHART_PREFERENCE_KEY);
-    const savedPreference = result[CHART_PREFERENCE_KEY];
-    
-    // If we have a saved preference, use it
-    if (savedPreference !== undefined) {
-      chart.value = savedPreference;
+    const result = await Browser.storage.local.get([CHART_PREFERENCE_KEY]);
+    if (result[CHART_PREFERENCE_KEY] !== undefined) {
+      chart.value = result[CHART_PREFERENCE_KEY];
     } else {
-      // Default to hourly view
       chart.value = TypeOfChart.Horly;
     }
     
-    // Start refresh timer if hourly view is active
+    // Load dashboard data on mount
+    await loadDashboardData();
+    
     if (chart.value === TypeOfChart.Horly) {
       startRefreshTimer();
     }
   } catch (error) {
     console.error('Error loading chart preference:', error);
-    // Default to hourly view if error
     chart.value = TypeOfChart.Horly;
-    startRefreshTimer();
   }
 });
 
@@ -112,8 +117,23 @@ onUnmounted(() => {
 // Create a simple event bus for component communication
 const refreshEvent = new CustomEvent('refresh-data');
 
-// Function to emit the refresh event to child components
-function emitRefreshEvent() {
+// Function to load dashboard data
+async function loadDashboardData() {
+  isLoadingData.value = true;
+  try {
+    // Load data using the same function that TabList and TopSitesPieChart use
+    const data = await useTodayTabListSummary(SortingBy.UsageTime);
+    dashboardData.value = data;
+  } catch (error) {
+    console.error('Error loading dashboard data:', error);
+  } finally {
+    isLoadingData.value = false;
+  }
+}
+
+// Function to emit the refresh event to child components and reload data
+async function emitRefreshEvent() {
+  await loadDashboardData();
   window.dispatchEvent(refreshEvent);
 }
 
@@ -177,7 +197,7 @@ async function openChart(type: TypeOfChart) {
 /* .chartByHours height removed */
 .chart-btn {
   background-color: rgb(192, 192, 192);
-  color: #fff;
+  color: #000;
   border-radius: 7px;
   height: 36px;
   line-height: 35px;
@@ -193,6 +213,12 @@ async function openChart(type: TypeOfChart) {
 
 .chart-btn.active {
   background-color: #5377af !important;
-  color: white;
+  color: #000;
+}
+
+.loading-indicator {
+  text-align: center;
+  padding: 20px;
+  font-size: 16px;
 }
 </style>

dist/dark.js

@@ -44,26 +44,37 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, PropType, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import TabItem from '../components/TabItem.vue';
 import TabItemHeader from '../components/TabItemHeader.vue';
 import DonutChart from '../components/DonutChart.vue';
 import OverallStatistics from '../components/OverallStatistics.vue';
 import { Tab } from '../entity/tab';
 import { SortingBy, TypeOfList } from '../utils/enums';
+import { CurrentTabItem } from '../dto/currentTabItem';
 import { useTodayTabListSummary } from '../functions/useTodayTabListSummary';
 import { useAllTabListSummary } from '../functions/useAllTabListSummary';
-import { CurrentTabItem } from '../dto/currentTabItem';
 import { todayLocalDate } from '../utils/date';
 import { OverallStats } from '../dto/tabListSummary';
+import { TabListSummary } from '../dto/tabListSummary';
 
 const { t } = useI18n();
 
-const props = defineProps<{
-  type: TypeOfList;
-  showAllStats: boolean;
-}>();
+const props = defineProps({
+  type: {
+    type: Number as PropType<TypeOfList>,
+    required: true,
+  },
+  showAllStats: {
+    type: Boolean,
+    default: true,
+  },
+  tabListData: {
+    type: Object as PropType<TabListSummary | null>,
+    default: null
+  }
+});
 
 const isShowOverallStats = computed(() => props.showAllStats && props.type == TypeOfList.All);
 
@@ -90,25 +101,38 @@ function showAllWebSites() {
 
 async function loadList(sortingBy: SortingBy) {
   let tabSummary = null;
-  if (props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard)
-    tabSummary = await useTodayTabListSummary(sortingBy);
-  if (props.type == TypeOfList.All) {
-    tabSummary = await useAllTabListSummary(sortingBy);
-
-    if (tabSummary != null) {
-      firstDay.value = tabSummary.firstDay;
-      countOfActiveDays.value = tabSummary.activeDaysTotal;
-      dataForOvarallStats.value = tabSummary;
+  
+  // Use shared data from Dashboard if available
+  if (props.tabListData && (props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard)) {
+    tabSummary = props.tabListData;
+  } else {
+    // Otherwise fetch data as before
+    if (props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard)
+      tabSummary = await useTodayTabListSummary(sortingBy);
+    if (props.type == TypeOfList.All) {
+      tabSummary = await useAllTabListSummary(sortingBy);
     }
   }
-
+  
   if (tabSummary != null) {
+    // Process All type specific data
+    if (props.type == TypeOfList.All && tabSummary.firstDay) {
+      firstDay.value = tabSummary.firstDay;
+      countOfActiveDays.value = tabSummary.activeDaysTotal || 0;
+      dataForOvarallStats.value = tabSummary;
+    }
+    
+    // Process common data
     loadedTabs = tabSummary.tabs;
     tabs.value = tabSummary.tabs;
-    summaryTime.value = tabSummary.summaryTime;
-    timeForChart.value = tabSummary.chart.timeForChart;
-    sitesForChart.value = tabSummary.chart.sitesForChart;
+    summaryTime.value = tabSummary.summaryTime || 0;
+    
+    if (tabSummary.chart) {
+      timeForChart.value = tabSummary.chart.timeForChart || [];
+      sitesForChart.value = tabSummary.chart.sitesForChart || [];
+    }
 
+    // Handle pagination for All type
     if (props.type == TypeOfList.All && loadedTabs.length > 100) {
       showOnlyFirst100Items.value = true;
       tabs.value = tabSummary.tabs.slice(0, 100);
@@ -151,6 +175,13 @@ function handleRefresh() {
   }
 }
 
+// Watch for changes in the tabListData prop
+watch(() => props.tabListData, (newData) => {
+  if (newData && (props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard)) {
+    loadList(SortingBy.UsageTime);
+  }
+}, { deep: true });
+
 onMounted(async () => {
   isLoading.value = true;
   await loadList(SortingBy.UsageTime);

dist/dashboard.css

@@ -30,12 +30,21 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { injectStorage } from '../storage/inject-storage';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch, PropType } from 'vue';
 import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
 import { useTodayTabListSummary } from '../functions/useTodayTabListSummary';
 import { SortingBy } from '../utils/enums';
 import { Tab } from '../entity/tab';
 import { todayLocalDate } from '../utils/date';
+import { TabListSummary } from '../dto/tabListSummary';
+
+// Define props
+const props = defineProps({
+  tabListData: {
+    type: Object as PropType<TabListSummary | null>,
+    default: null
+  }
+});
 
 const settingsStorage = injectStorage();
 const darkMode = ref(false);
@@ -56,8 +65,8 @@ const chartColors = [
 async function processTabsData() {
   isLoading.value = true;
   
-  // Get today's tab list summary - same data source as used in TabList.vue
-  const tabSummary = await useTodayTabListSummary(SortingBy.UsageTime);
+  // Use the shared data from Dashboard if available, otherwise fetch it
+  const tabSummary = props.tabListData || await useTodayTabListSummary(SortingBy.UsageTime);
   
   if (!tabSummary || !tabSummary.tabs || tabSummary.tabs.length === 0) {
     isLoading.value = false;
@@ -148,6 +157,13 @@ function handleRefresh() {
   processTabsData();
 }
 
+// Watch for changes in the tabListData prop
+watch(() => props.tabListData, (newData) => {
+  if (newData) {
+    processTabsData();
+  }
+}, { deep: true });
+
 onMounted(async () => {
   darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
   ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);