refactor(gui-v2): imports-first in shell specs, drop eslint-disable

Vitest hoists vi.mock()/vi.hoisted() above all imports, so the
component import can sit with the other imports (import/first satisfied)
without the eslint-disable-next-line directives — the mock factories
only deref their refs at mount time. Honors the no-eslint-disable rule.
28/28 affected specs green.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts

@@ -21,12 +21,16 @@ import { mount } from '@vue/test-utils'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useShellUiStore } from '@/stores/useShellUiStore'
+import AppSidebar from '@/components-v2/layout/AppSidebar.vue'
 import type { V2NavGroup } from '@/types/v2/nav'
 
 // ---------------------------------------------------------------------------
 // Mock @vueuse/core so we can control `isMobile` per test.
 // AppSidebar uses useBreakpoints(breakpointsTailwind).smaller('lg').
-// We return an object whose .smaller() method returns a controllable ref.
+// Vitest hoists vi.mock() above all imports, so the mock is registered
+// before AppSidebar's transitive @vueuse/core import resolves; the
+// factory only dereferences mockIsMobileRef inside .smaller(), invoked
+// at component-mount time (well after this const initialises).
 // ---------------------------------------------------------------------------
 
 const mockIsMobileRef = ref(false)
@@ -38,13 +42,6 @@ vi.mock('@vueuse/core', () => ({
   }),
 }))
 
-// ---------------------------------------------------------------------------
-// Import component AFTER mock is set up
-// ---------------------------------------------------------------------------
-
-// eslint-disable-next-line import/first -- intentional: mock must be declared first
-import AppSidebar from '@/components-v2/layout/AppSidebar.vue'
-
 // ---------------------------------------------------------------------------
 // A minimal nav group fixture
 // ---------------------------------------------------------------------------

apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts

@@ -24,12 +24,14 @@ import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useShellUiStore } from '@/stores/useShellUiStore'
 import { useAuthStore } from '@/stores/useAuthStore'
+import AppTopbar from '@/components-v2/layout/AppTopbar.vue'
 
 // ---------------------------------------------------------------------------
-// Mock vue-router (useBreadcrumb calls useRoute internally)
-// vi.hoisted() is required so these vi.fn() instances are initialised
-// before the vi.mock() factory runs (vi.mock is hoisted to top of file by
-// the Vitest transform, but const declarations are not).
+// Mock vue-router (useBreadcrumb calls useRoute internally).
+// vi.hoisted() initialises these vi.fn() instances before the vi.mock()
+// factory runs. Vitest hoists vi.hoisted() + vi.mock() above all imports,
+// so the mock is registered before AppTopbar's transitive vue-router
+// import resolves — physical import order here is irrelevant to that.
 // ---------------------------------------------------------------------------
 
 const { mockRouterPush, mockUseRoute } = vi.hoisted(() => ({
@@ -44,13 +46,6 @@ vi.mock('vue-router', () => ({
   }),
 }))
 
-// ---------------------------------------------------------------------------
-// Import component AFTER mocks
-// ---------------------------------------------------------------------------
-
-// eslint-disable-next-line import/first -- intentional: mocks must precede import
-import AppTopbar from '@/components-v2/layout/AppTopbar.vue'
-
 // ---------------------------------------------------------------------------
 // Stubs for PrimeVue components
 // ---------------------------------------------------------------------------

apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts

@@ -16,11 +16,15 @@ import { mount } from '@vue/test-utils'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useShellUiStore } from '@/stores/useShellUiStore'
+import SidebarHeader from '@/components-v2/layout/SidebarHeader.vue'
 
 // ---------------------------------------------------------------------------
 // Mock @vueuse/core so we can control `isMobile` per test.
 // The component uses useBreakpoints(breakpointsTailwind).smaller('lg').
-// We return an object whose .smaller() method returns a controllable ref.
+// Vitest hoists vi.mock() above all imports, so the mock is registered
+// before SidebarHeader's transitive @vueuse/core import resolves; the
+// factory only dereferences mockIsMobileRef inside .smaller(), invoked
+// at component-mount time (well after this const initialises).
 // ---------------------------------------------------------------------------
 
 const mockIsMobileRef = ref(false)
@@ -32,13 +36,6 @@ vi.mock('@vueuse/core', () => ({
   }),
 }))
 
-// ---------------------------------------------------------------------------
-// Import component AFTER mock is set up
-// ---------------------------------------------------------------------------
-
-// eslint-disable-next-line import/first -- intentional: mock must be declared first
-import SidebarHeader from '@/components-v2/layout/SidebarHeader.vue'
-
 // ---------------------------------------------------------------------------
 // Stubs — keep tests fast and focused on logic, not child rendering
 // ---------------------------------------------------------------------------