refactor: dynamic imports for sidebar tab components

- Convert static imports to defineAsyncComponent

- Breaks ~100 circular dependency cycles through sidebar tabs

- Sidebar tabs load lazily on first access

Amp-Thread-ID: https://ampcode.com/threads/T-019bfe73-6a29-7638-8160-8de515af8707
Co-authored-by: Amp <amp@ampcode.com>

src/composables/sidebarTabs/useAssetsSidebarTab.ts

@@ -1,9 +1,12 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
 import { useQueueStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const AssetsSidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/AssetsSidebarTab.vue')
+)
+
 export const useAssetsSidebarTab = (): SidebarTabExtension => {
   return {
     id: 'assets',
@@ -11,7 +14,7 @@ export const useAssetsSidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.assets',
     tooltip: 'sideToolbar.assets',
     label: 'sideToolbar.labels.assets',
-    component: markRaw(AssetsSidebarTab),
+    component: AssetsSidebarTab,
     type: 'vue',
     iconBadge: () => {
       const queueStore = useQueueStore()

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,10 +1,13 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
+const ModelLibrarySidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/ModelLibrarySidebarTab.vue')
+)
+
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'model-library',
@@ -12,7 +15,7 @@ export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.modelLibrary',
     tooltip: 'sideToolbar.modelLibrary',
     label: 'sideToolbar.labels.models',
-    component: markRaw(ModelLibrarySidebarTab),
+    component: ModelLibrarySidebarTab,
     type: 'vue',
     iconBadge: () => {
       if (isElectron()) {

src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts

@@ -1,8 +1,11 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const NodeLibrarySidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/NodeLibrarySidebarTab.vue')
+)
+
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'node-library',
@@ -10,7 +13,7 @@ export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.nodeLibrary',
     tooltip: 'sideToolbar.nodeLibrary',
     label: 'sideToolbar.labels.nodes',
-    component: markRaw(NodeLibrarySidebarTab),
+    component: NodeLibrarySidebarTab,
     type: 'vue'
   }
 }

src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts

@@ -1,10 +1,13 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const WorkflowsSidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/WorkflowsSidebarTab.vue')
+)
+
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
@@ -23,7 +26,7 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.workflows',
     tooltip: 'sideToolbar.workflows',
     label: 'sideToolbar.labels.workflows',
-    component: markRaw(WorkflowsSidebarTab),
+    component: WorkflowsSidebarTab,
     type: 'vue'
   }
 }