fix(frontend): SyncStatusButton error handling

Author: ivanskv2000

frontend/src/shared/components/layout/SyncStatusButton.spec.ts

@@ -1,13 +1,16 @@
 import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest'
 import { mount } from '@vue/test-utils'
 import SyncStatusButton from './SyncStatusButton.vue'
-import { useIsFetching, useQueryClient } from '@tanstack/vue-query'
+import { useIsFetching, useQueryClient, onlineManager } from '@tanstack/vue-query'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 
 // Mock TanStack Query
 vi.mock('@tanstack/vue-query', () => ({
   useIsFetching: vi.fn(),
   useQueryClient: vi.fn(),
+  onlineManager: {
+    isOnline: vi.fn(),
+  },
 }))
 
 // Mock Enhanced Toast
@@ -33,6 +36,7 @@ describe('SyncStatusButton', () => {
     }
     ;(useQueryClient as Mock).mockReturnValue(mockQueryClient)
     ;(useIsFetching as Mock).mockReturnValue({ value: 0 })
+    ;(onlineManager.isOnline as Mock).mockReturnValue(true)
 
     mockShowSuccess = vi.fn()
     mockShowError = vi.fn()
@@ -45,7 +49,7 @@ describe('SyncStatusButton', () => {
     vi.spyOn(console, 'error').mockImplementation(() => {})
   })
 
-  it('should call invalidateQueries and show success toast on click', async () => {
+  it('should call invalidateQueries and show success toast on click when online', async () => {
     vi.useFakeTimers()
     const wrapper = mount(SyncStatusButton, {
       global: {
@@ -72,15 +76,44 @@ describe('SyncStatusButton', () => {
     await vi.advanceTimersByTimeAsync(600)
 
     expect(mockShowSuccess).toHaveBeenCalledWith(
-      'Data synchronized',
-      'All active data views have been updated.'
+      'Data is updated successfully!'
     )
     vi.useRealTimers()
   })
 
-  it('should show error toast and mark error as silent on failure', async () => {
+  it('should show "Sync Paused" error when offline after click', async () => {
     vi.useFakeTimers()
-    const error = new Error('Sync failed')
+    ;(onlineManager.isOnline as Mock).mockReturnValue(false)
+
+    const wrapper = mount(SyncStatusButton, {
+      global: {
+        stubs: {
+          TooltipProvider: { template: '<div><slot /></div>' },
+          Tooltip: { template: '<div><slot /></div>' },
+          TooltipTrigger: { template: '<div><slot /></div>' },
+          TooltipContent: { template: '<div><slot /></div>' },
+          Button: {
+            template: '<button @click="$emit(\'click\')"><slot /></button>',
+            props: ['disabled'],
+          },
+        },
+      },
+    })
+
+    const button = wrapper.find('button')
+    await button.trigger('click')
+
+    await vi.advanceTimersByTimeAsync(600)
+
+    expect(mockShowError).toHaveBeenCalled()
+    const errorPassed = mockShowError.mock.calls[0][0]
+    expect(errorPassed.message).toContain('currently offline')
+    vi.useRealTimers()
+  })
+
+  it('should NOT call showError on query failure (relying on global handler)', async () => {
+    vi.useFakeTimers()
+    const error = new Error('Network error')
     mockQueryClient.invalidateQueries.mockRejectedValue(error)
 
     const wrapper = mount(SyncStatusButton, {
@@ -103,8 +136,7 @@ describe('SyncStatusButton', () => {
 
     await vi.advanceTimersByTimeAsync(600)
 
-    expect(mockShowError).toHaveBeenCalledWith(error, 'Sync Failed')
-    expect((error as Error & { silent?: boolean }).silent).toBe(true)
+    expect(mockShowError).not.toHaveBeenCalled()
     vi.useRealTimers()
   })
 })

frontend/src/shared/components/layout/SyncStatusButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useIsFetching, useQueryClient } from '@tanstack/vue-query'
+import { useIsFetching, useQueryClient, onlineManager } from '@tanstack/vue-query'
 import { Icon } from '@iconify/vue'
 import { Button } from '@/shared/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/ui/tooltip'
@@ -21,20 +21,22 @@ const handleRefresh = async () => {
   isSyncing.value = true
 
   try {
-    // We wrap invalidateQueries in a Promise.all with a minimum timeout
-    // to ensure the UI animation feels deliberate and smooth (no "blinks")
     await Promise.all([
       queryClient.invalidateQueries(),
       new Promise(resolve => setTimeout(resolve, 600)),
     ])
 
-    showSuccess('Data synchronized', 'All active data views have been updated.')
-  } catch (error) {
-    // Mark as silent to prevent App.vue's global handler from showing a duplicate toast
-    if (error && typeof error === 'object') {
-      ;(error as { silent?: boolean }).silent = true
+    if (!onlineManager.isOnline()) {
+      showError(
+        new Error('You are currently offline. Please check your internet connection and try again.')
+      )
+      return
     }
-    showError(error, 'Sync Failed')
+
+    showSuccess('Data is updated successfully!')
+  } catch {
+    // We don't call showError here because the globalErrorHandler in App.vue
+    // is already attached to the queryCache and will handle any query-related errors.
   } finally {
     isSyncing.value = false
   }