[Lint] Sort imports (#2104)

src/components/BrowserTabTitle.vue

@@ -5,11 +5,12 @@
 </template>
 
 <script setup lang="ts">
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
+
 import { useExecutionStore } from '@/stores/executionStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
-import { useTitle } from '@vueuse/core'
-import { computed } from 'vue'
 
 const DEFAULT_TITLE = 'ComfyUI'
 const TITLE_SUFFIX = ' - ComfyUI'

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -46,13 +46,14 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/stores/settingStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
 const settingStore = useSettingStore()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')

src/components/MenuHamburger.vue

@@ -15,10 +15,11 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { computed, CSSProperties, watchEffect } from 'vue'
+import { CSSProperties, computed, watchEffect } from 'vue'
+
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()

src/components/actionbar/BatchCountEdit.vue

@@ -30,12 +30,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useQueueSettingsStore } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { storeToRefs } from 'pinia'
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
+import { useQueueSettingsStore } from '@/stores/queueStore'
+import { useSettingStore } from '@/stores/settingStore'
+
 interface Props {
   class?: string
 }

src/components/actionbar/ComfyActionbar.vue

@@ -13,10 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, onMounted, Ref, ref, watch } from 'vue'
-import Panel from 'primevue/panel'
-import ComfyQueueButton from './ComfyQueueButton.vue'
-import { useSettingStore } from '@/stores/settingStore'
 import {
   useDraggable,
   useElementBounding,
@@ -26,6 +22,12 @@ import {
   watchDebounced
 } from '@vueuse/core'
 import { clamp } from 'lodash'
+import Panel from 'primevue/panel'
+import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+import ComfyQueueButton from './ComfyQueueButton.vue'
 
 const settingsStore = useSettingStore()
 

src/components/actionbar/ComfyQueueButton.vue

@@ -55,20 +55,22 @@
 </template>
 
 <script setup lang="ts">
-import SplitButton from 'primevue/splitbutton'
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
-import BatchCountEdit from './BatchCountEdit.vue'
 import ButtonGroup from 'primevue/buttongroup'
+import SplitButton from 'primevue/splitbutton'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
 import {
   useQueuePendingTaskCountStore,
   useQueueSettingsStore
 } from '@/stores/queueStore'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import BatchCountEdit from './BatchCountEdit.vue'
+
 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode } = storeToRefs(useQueueSettingsStore())

src/components/bottomPanel/BottomPanel.vue

@@ -41,9 +41,10 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
 import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import Tabs from 'primevue/tabs'
+
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -7,7 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref } from 'vue'
+import { Ref, ref } from 'vue'
+
 import { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 
 const emit = defineEmits<{

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -3,10 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, Ref } from 'vue'
+import { IDisposable } from '@xterm/xterm'
+import { Ref, onMounted, onUnmounted } from 'vue'
+
 import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
-import { IDisposable } from '@xterm/xterm'
+
 import BaseTerminal from './BaseTerminal.vue'
 
 const terminalCreated = (

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -10,15 +10,17 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, Ref, ref } from 'vue'
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
-import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
-import { api } from '@/scripts/api'
-import { useExecutionStore } from '@/stores/executionStore'
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import BaseTerminal from './BaseTerminal.vue'
 import ProgressSpinner from 'primevue/progressspinner'
+import { Ref, onMounted, onUnmounted, ref } from 'vue'
+
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { api } from '@/scripts/api'
+import { useExecutionStore } from '@/stores/executionStore'
+import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
+
+import BaseTerminal from './BaseTerminal.vue'
 
 const errorMessage = ref('')
 const loading = ref(true)

src/components/common/CustomFormValue.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   renderFunction: () => HTMLElement

src/components/common/CustomizationDialog.vue

@@ -70,15 +70,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import Dialog from 'primevue/dialog'
-import SelectButton from 'primevue/selectbutton'
 import Button from 'primevue/button'
-import Divider from 'primevue/divider'
 import ColorPicker from 'primevue/colorpicker'
-import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import Dialog from 'primevue/dialog'
+import Divider from 'primevue/divider'
+import SelectButton from 'primevue/selectbutton'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+
 const { t } = useI18n()
 
 const props = defineProps<{

src/components/common/ElectronFileDownload.vue

@@ -75,13 +75,14 @@
 </template>
 
 <script setup lang="ts">
-import { useDownload } from '@/hooks/downloadHooks'
 import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
-import { ref, computed } from 'vue'
-import { formatSize } from '@/utils/formatUtil'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { useDownload } from '@/hooks/downloadHooks'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   url: string

src/components/common/ExtensionSlot.vue

@@ -15,9 +15,10 @@
 </template>
 
 <script setup lang="ts">
-import { CustomExtension, VueExtension } from '@/types/extensionTypes'
 import { onBeforeUnmount } from 'vue'
 
+import { CustomExtension, VueExtension } from '@/types/extensionTypes'
+
 const props = defineProps<{
   extension: VueExtension | CustomExtension
 }>()

src/components/common/FileDownload.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import { useDownload } from '@/hooks/downloadHooks'
 import Button from 'primevue/button'
 import { computed } from 'vue'
+
+import { useDownload } from '@/hooks/downloadHooks'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/FormImageUpload.vue

@@ -42,8 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import Button from 'primevue/button'
+import { ref } from 'vue'
 
 const props = defineProps<{
   modelValue: string

src/components/common/FormItem.vue

@@ -25,16 +25,17 @@
 </template>
 
 <script setup lang="ts">
-import { FormItem } from '@/types/settingTypes'
-import { markRaw, type Component } from 'vue'
-import InputText from 'primevue/inputtext'
 import InputNumber from 'primevue/inputnumber'
+import InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
+import { type Component, markRaw } from 'vue'
+
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
-import InputSlider from '@/components/common/InputSlider.vue'
-import FormImageUpload from '@/components/common/FormImageUpload.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
+import FormImageUpload from '@/components/common/FormImageUpload.vue'
+import InputSlider from '@/components/common/InputSlider.vue'
+import { FormItem } from '@/types/settingTypes'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{

src/components/common/InputSlider.vue

@@ -24,9 +24,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
 import InputNumber from 'primevue/inputnumber'
 import Slider from 'primevue/slider'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue: number

src/components/common/NoResultsPlaceholder.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script setup lang="ts">
-import Card from 'primevue/card'
 import Button from 'primevue/button'
+import Card from 'primevue/card'
 
 const props = defineProps<{
   class?: string

src/components/common/SearchBox.vue

@@ -42,15 +42,16 @@
 </template>
 
 <script setup lang="ts" generic="TFilter extends SearchFilter">
-import type { SearchFilter } from './SearchFilterChip.vue'
 import { debounce } from 'lodash'
+import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
-import Button from 'primevue/button'
-import SearchFilterChip from './SearchFilterChip.vue'
 import { toRefs } from 'vue'
 
+import type { SearchFilter } from './SearchFilterChip.vue'
+import SearchFilterChip from './SearchFilterChip.vue'
+
 const props = withDefaults(
   defineProps<{
     class?: string

src/components/common/SearchFilterChip.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import Chip from 'primevue/chip'
 import Badge from 'primevue/badge'
+import Chip from 'primevue/chip'
 
 export interface SearchFilter {
   text: string

src/components/common/SystemStatsPanel.vue

@@ -29,12 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import TabView from 'primevue/tabview'
-import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
-import type { SystemStats } from '@/types/apiTypes'
+import TabPanel from 'primevue/tabpanel'
+import TabView from 'primevue/tabview'
+import { computed } from 'vue'
+
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import type { SystemStats } from '@/types/apiTypes'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/TreeExplorer.vue

@@ -33,17 +33,18 @@
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
 <script setup lang="ts">
-import { ref, computed, provide } from 'vue'
-import Tree from 'primevue/tree'
 import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
+import Tree from 'primevue/tree'
+import { computed, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import { useErrorHandling } from '@/hooks/errorHooks'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
-import { useI18n } from 'vue-i18n'
-import { useErrorHandling } from '@/hooks/errorHooks'
 
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys')
 provide('expandedKeys', expandedKeys)

src/components/common/TreeExplorerTreeNode.vue

@@ -34,16 +34,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, Ref, computed } from 'vue'
 import Badge from 'primevue/badge'
+import { Ref, computed, inject, ref } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
+import { useErrorHandling } from '@/hooks/errorHooks'
 import type {
-  TreeExplorerDragAndDropData,
   RenderedTreeExplorerNode,
+  TreeExplorerDragAndDropData,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import EditableText from '@/components/common/EditableText.vue'
-import { useErrorHandling } from '@/hooks/errorHooks'
-import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode

src/components/common/__tests__/EditableText.spec.ts

@@ -1,11 +1,12 @@
 // @ts-strict-ignore
 import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeAll } from 'vitest'
-import EditableText from '../EditableText.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
+import { beforeAll, describe, expect, it } from 'vitest'
 import { createApp } from 'vue'
 
+import EditableText from '../EditableText.vue'
+
 describe('EditableText', () => {
   beforeAll(() => {
     // Create a Vue app instance for PrimeVue

src/components/common/__tests__/TreeExplorerTreeNode.spec.ts

@@ -1,16 +1,17 @@
 // @ts-strict-ignore
-import { describe, it, expect, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import EditableText from '@/components/common/EditableText.vue'
 import Badge from 'primevue/badge'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
-import { createTestingPinia } from '@pinia/testing'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
-import { createI18n } from 'vue-i18n'
+import { describe, expect, it, vi } from 'vitest'
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import EditableText from '@/components/common/EditableText.vue'
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { useToastStore } from '@/stores/toastStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 // Create a mock i18n instance
 const i18n = createI18n({

src/components/dialog/GlobalDialog.vue

@@ -28,11 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
 import { ZIndex } from '@primeuix/utils/zindex'
 import { usePrimeVue } from '@primevue/core'
-import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
+import { computed, onMounted } from 'vue'
+
+import { useDialogStore } from '@/stores/dialogStore'
 
 const dialogStore = useDialogStore()
 

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -10,8 +10,9 @@
 </template>
 
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+
 import { useSettingStore } from '@/stores/settingStore'
-import { onMounted, onBeforeUnmount } from 'vue'
 
 const settingStore = useSettingStore()
 

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -56,8 +56,9 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { useDialogStore } from '@/stores/dialogStore'
+
 import type { ConfirmationDialogType } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{
   message: string

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -37,19 +37,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useToast } from 'primevue/usetoast'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
+import { useToast } from 'primevue/usetoast'
+import { onMounted, ref } from 'vue'
+
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
 import ReportIssueButton from '@/components/dialog/content/error/ReportIssueButton.vue'
-import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
 import { isElectron } from '@/utils/envUtil'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 
 const props = defineProps<{
   error: ExecutionErrorWsMessage

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -33,9 +33,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import ListBox from 'primevue/listbox'
 import Button from 'primevue/button'
+import ListBox from 'primevue/listbox'
+import { computed } from 'vue'
+
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import type { MissingNodeType } from '@/types/comfy'
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -25,10 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import ListBox from 'primevue/listbox'
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { computed, ref } from 'vue'
+
 import FileDownload from '@/components/common/FileDownload.vue'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here

src/components/dialog/content/PromptDialogContent.vue

@@ -16,9 +16,10 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import InputText from 'primevue/inputtext'
 import FloatLabel from 'primevue/floatlabel'
+import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
+
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{

src/components/dialog/content/SettingDialogContent.vue

@@ -67,30 +67,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue'
-import Listbox from 'primevue/listbox'
-import Tabs from 'primevue/tabs'
-import TabPanels from 'primevue/tabpanels'
 import Divider from 'primevue/divider'
+import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import { st } from '@/i18n'
 import {
-  getSettingInfo,
   SettingTreeNode,
+  getSettingInfo,
   useSettingStore
 } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
-import SearchBox from '@/components/common/SearchBox.vue'
-import SettingsPanel from './setting/SettingsPanel.vue'
-import PanelTemplate from './setting/PanelTemplate.vue'
-import AboutPanel from './setting/AboutPanel.vue'
-import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
-import CurrentUserMessage from './setting/CurrentUserMessage.vue'
-import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
-import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { useI18n } from 'vue-i18n'
-import { st } from '@/i18n'
+import { flattenTree } from '@/utils/treeUtil'
+
+import AboutPanel from './setting/AboutPanel.vue'
+import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
+import CurrentUserMessage from './setting/CurrentUserMessage.vue'
+import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
+import PanelTemplate from './setting/PanelTemplate.vue'
+import SettingsPanel from './setting/SettingsPanel.vue'
 
 const props = defineProps<{
   defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'

src/components/dialog/content/error/FindIssueButton.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import Button from 'primevue/button'
+import { computed } from 'vue'
 
 const props = defineProps<{
   errorMessage: string

src/components/dialog/content/error/ReportIssueButton.vue

@@ -11,11 +11,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { ExecutionErrorWsMessage } from '@/types/apiTypes'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { ExecutionErrorWsMessage } from '@/types/apiTypes'
 import { electronAPI } from '@/utils/envUtil'
 
 const { error } = defineProps<{

src/components/dialog/content/setting/AboutPanel.vue

@@ -30,13 +30,15 @@
 </template>
 
 <script setup lang="ts">
-import PanelTemplate from './PanelTemplate.vue'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
-import Tag from 'primevue/tag'
 import Divider from 'primevue/divider'
+import Tag from 'primevue/tag'
 import { onMounted } from 'vue'
+
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+import PanelTemplate from './PanelTemplate.vue'
 
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -38,14 +38,15 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Select from 'primevue/select'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { useColorPaletteService } from '@/services/colorPaletteService'
-import { storeToRefs } from 'pinia'
 import { watch } from 'vue'
 
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
 const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)

src/components/dialog/content/setting/CurrentUserMessage.vue

@@ -16,8 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import Message from 'primevue/message'
 import Button from 'primevue/button'
+import Message from 'primevue/message'
+
 import { useUserStore } from '@/stores/userStore'
 
 const userStore = useUserStore()

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -72,19 +72,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { FilterMatchMode } from '@primevue/core/api'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import ContextMenu from 'primevue/contextmenu'
+import DataTable from 'primevue/datatable'
+import Message from 'primevue/message'
+import Tag from 'primevue/tag'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, onMounted, ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useSettingStore } from '@/stores/settingStore'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-import ToggleSwitch from 'primevue/toggleswitch'
-import Tag from 'primevue/tag'
-import Button from 'primevue/button'
-import ContextMenu from 'primevue/contextmenu'
-import Message from 'primevue/message'
-import { FilterMatchMode } from '@primevue/core/api'
+
 import PanelTemplate from './PanelTemplate.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
 
 const filters = ref({
   global: { value: '', matchMode: FilterMatchMode.CONTAINS }

src/components/dialog/content/setting/FirstTimeUIMessage.vue

@@ -11,10 +11,11 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/stores/settingStore'
+
 const settingStore = useSettingStore()
 const show = computed(() => !settingStore.exists('Comfy.UseNewMenu'))
 const handleClose = () => {

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -114,28 +114,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect } from 'vue'
-import {
-  useKeybindingStore,
-  KeyComboImpl,
-  KeybindingImpl
-} from '@/stores/keybindingStore'
-import { useCommandStore } from '@/stores/commandStore'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
+import { FilterMatchMode } from '@primevue/core/api'
 import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import { useKeybindingService } from '@/services/keybindingService'
+import { useCommandStore } from '@/stores/commandStore'
+import {
+  KeyComboImpl,
+  KeybindingImpl,
+  useKeybindingStore
+} from '@/stores/keybindingStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
 import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
-import { useToast } from 'primevue/usetoast'
-import { FilterMatchMode } from '@primevue/core/api'
-import { useI18n } from 'vue-i18n'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-import { useKeybindingService } from '@/services/keybindingService'
 
 const filters = ref({
   global: { value: '', matchMode: FilterMatchMode.CONTAINS }

src/components/dialog/content/setting/PanelTemplate.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import TabPanel from 'primevue/tabpanel'
 import ScrollPanel from 'primevue/scrollpanel'
+import TabPanel from 'primevue/tabpanel'
 
 const props = defineProps<{
   value: string

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -66,21 +66,23 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-import Message from 'primevue/message'
-import Divider from 'primevue/divider'
-import FormItem from '@/components/common/FormItem.vue'
-import PanelTemplate from './PanelTemplate.vue'
-import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { storeToRefs } from 'pinia'
-import { electronAPI } from '@/utils/envUtil'
-import { useSettingStore } from '@/stores/settingStore'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Message from 'primevue/message'
 import { watch } from 'vue'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
-import type { FormItem as FormItemType } from '@/types/settingTypes'
-import type { ServerConfig } from '@/constants/serverConfig'
 import { useI18n } from 'vue-i18n'
 
+import FormItem from '@/components/common/FormItem.vue'
+import type { ServerConfig } from '@/constants/serverConfig'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
+import { useServerConfigStore } from '@/stores/serverConfigStore'
+import { useSettingStore } from '@/stores/settingStore'
+import type { FormItem as FormItemType } from '@/types/settingTypes'
+import { electronAPI } from '@/utils/envUtil'
+
+import PanelTemplate from './PanelTemplate.vue'
+
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
 const {

src/components/dialog/content/setting/SettingGroup.vue

@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import Divider from 'primevue/divider'
+
 import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
 import { SettingParams } from '@/types/settingTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'

src/components/dialog/content/setting/SettingItem.vue

@@ -18,11 +18,12 @@
 
 <script setup lang="ts">
 import Tag from 'primevue/tag'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import FormItem from '@/components/common/FormItem.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import type { SettingOption, SettingParams } from '@/types/settingTypes'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/dialog/content/setting/SettingsPanel.vue

@@ -17,9 +17,10 @@
 
 <script setup lang="ts">
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SettingGroup from './SettingGroup.vue'
 import { ISettingGroup } from '@/types/settingTypes'
 
+import SettingGroup from './SettingGroup.vue'
+
 const props = defineProps<{
   settingGroups: ISettingGroup[]
 }>()

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -11,9 +11,10 @@
 
 <script setup lang="ts">
 import Tag from 'primevue/tag'
-import { KeyComboImpl } from '@/stores/keybindingStore'
 import { computed } from 'vue'
 
+import { KeyComboImpl } from '@/stores/keybindingStore'
+
 const props = withDefaults(
   defineProps<{
     keyCombo: KeyComboImpl

src/components/graph/GraphCanvas.vue

@@ -26,50 +26,51 @@
 </template>
 
 <script setup lang="ts">
-import TitleEditor from '@/components/graph/TitleEditor.vue'
-import SideToolbar from '@/components/sidebar/SideToolbar.vue'
-import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
-import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
-import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
-import NodeTooltip from '@/components/graph/NodeTooltip.vue'
-import NodeBadge from '@/components/graph/NodeBadge.vue'
-import { ref, computed, onMounted, watchEffect, watch } from 'vue'
-import { app as comfyApp } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
-  LiteGraph,
-  LGraph,
-  LLink,
-  LGraphNode,
-  LGraphGroup,
-  DragAndScale,
-  LGraphCanvas,
+  CanvasPointer,
   ContextMenu,
+  DragAndScale,
+  LGraph,
   LGraphBadge,
-  CanvasPointer
+  LGraphCanvas,
+  LGraphGroup,
+  LGraphNode,
+  LLink,
+  LiteGraph
 } from '@comfyorg/litegraph'
-import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+
+import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
+import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
+import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
+import NodeBadge from '@/components/graph/NodeBadge.vue'
+import NodeTooltip from '@/components/graph/NodeTooltip.vue'
+import TitleEditor from '@/components/graph/TitleEditor.vue'
+import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
+import SideToolbar from '@/components/sidebar/SideToolbar.vue'
+import { CORE_SETTINGS } from '@/constants/coreSettings'
+import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { api } from '@/scripts/api'
+import { app as comfyApp } from '@/scripts/app'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { setStorageValue } from '@/scripts/utils'
+import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useWorkflowService } from '@/services/workflowService'
+import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyModelDef } from '@/stores/modelStore'
 import {
   ModelNodeProvider,
   useModelToNodeStore
 } from '@/stores/modelToNodeStore'
-import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
-import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
-import { setStorageValue } from '@/scripts/utils'
-import { ChangeTracker } from '@/scripts/changeTracker'
-import { api } from '@/scripts/api'
-import { useCommandStore } from '@/stores/commandStore'
-import { useWorkflowService } from '@/services/workflowService'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { useColorPaletteService } from '@/services/colorPaletteService'
-import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
-import { CORE_SETTINGS } from '@/constants/coreSettings'
-import { useLitegraphService } from '@/services/litegraphService'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)

src/components/graph/GraphCanvasMenu.vue

@@ -50,14 +50,15 @@
 </template>
 
 <script setup lang="ts">
-import ButtonGroup from 'primevue/buttongroup'
+import { LiteGraph } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
+import ButtonGroup from 'primevue/buttongroup'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useI18n } from 'vue-i18n'
-import { LiteGraph } from '@comfyorg/litegraph'
-import { computed } from 'vue'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()

src/components/graph/NodeBadge.vue

@@ -5,16 +5,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
-import { useSettingStore } from '@/stores/settingStore'
-import { app } from '@/scripts/app'
 import type { LGraphNode } from '@comfyorg/litegraph'
 import { BadgePosition } from '@comfyorg/litegraph'
 import { LGraphBadge } from '@comfyorg/litegraph'
 import _ from 'lodash'
-import { NodeBadgeMode } from '@/types/nodeSource'
+import { computed, onMounted, watch } from 'vue'
+
+import { app } from '@/scripts/app'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { NodeBadgeMode } from '@/types/nodeSource'
 
 const settingStore = useSettingStore()
 const colorPaletteStore = useColorPaletteStore()

src/components/graph/NodeTooltip.vue

@@ -10,12 +10,13 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
 import { LiteGraph } from '@comfyorg/litegraph'
+import { useEventListener } from '@vueuse/core'
+import { nextTick, ref } from 'vue'
+
+import { st } from '@/i18n'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useEventListener } from '@vueuse/core'
-import { st } from '@/i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number

src/components/graph/TitleEditor.vue

@@ -13,14 +13,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, CSSProperties, watch } from 'vue'
-import { app } from '@/scripts/app'
 import { LGraphGroup, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
-import EditableText from '@/components/common/EditableText.vue'
-import { useSettingStore } from '@/stores/settingStore'
 import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
-import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useEventListener } from '@vueuse/core'
+import { CSSProperties, ref, watch } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import { app } from '@/scripts/app'
+import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const settingStore = useSettingStore()
 

src/components/install/DesktopSettingsConfiguration.vue

@@ -97,10 +97,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import ToggleSwitch from 'primevue/toggleswitch'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { ref } from 'vue'
 
 const showDialog = ref(false)
 const autoUpdate = defineModel('autoUpdate', { required: true })

src/components/install/GpuPicker.vue

@@ -130,12 +130,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { electronAPI, TorchDeviceType } from '@/utils/envUtil'
-import ToggleSwitch from 'primevue/toggleswitch'
 import Tag from 'primevue/tag'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { TorchDeviceType, electronAPI } from '@/utils/envUtil'
+
 const { t } = useI18n()
 
 const cpuMode = computed({

src/components/install/InstallLocationPicker.vue

@@ -64,15 +64,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { electronAPI } from '@/utils/envUtil'
-import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { electronAPI } from '@/utils/envUtil'
+
 const { t } = useI18n()
 
 const installPath = defineModel<string>('installPath', { required: true })

src/components/install/MigrationPicker.vue

@@ -68,14 +68,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect } from 'vue'
-import { electronAPI } from '@/utils/envUtil'
-import InputText from 'primevue/inputtext'
+import { MigrationItems } from '@comfyorg/comfyui-electron-types'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
+import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
+import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { MigrationItems } from '@comfyorg/comfyui-electron-types'
+
+import { electronAPI } from '@/utils/envUtil'
 
 const { t } = useI18n()
 

src/components/node/NodePreview.vue

@@ -80,12 +80,13 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 </template>
 
 <script setup lang="ts">
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import _ from 'lodash'
-import { useWidgetStore } from '@/stores/widgetStore'
 import { computed } from 'vue'
 
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useWidgetStore } from '@/stores/widgetStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
 const props = defineProps({
   nodeDef: {
     type: ComfyNodeDefImpl,

src/components/searchbox/NodeSearchBox.vue

@@ -66,21 +66,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
-import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
-import Dialog from 'primevue/dialog'
 import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import NodePreview from '@/components/node/NodePreview.vue'
+import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { type FilterAndValue } from '@/services/nodeSearchService'
-import NodePreview from '@/components/node/NodePreview.vue'
 import {
   ComfyNodeDefImpl,
   useNodeDefStore,
   useNodeFrequencyStore
 } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useI18n } from 'vue-i18n'
+
 import SearchFilterChip from '../common/SearchFilterChip.vue'
 
 const settingStore = useSettingStore()

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -33,26 +33,28 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, toRaw, watchEffect } from 'vue'
-import NodeSearchBox from './NodeSearchBox.vue'
-import Dialog from 'primevue/dialog'
-import { FilterAndValue } from '@/services/nodeSearchService'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { ConnectingLinkImpl } from '@/types/litegraphTypes'
-import { useSettingStore } from '@/stores/settingStore'
-import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
-import { useCanvasStore } from '@/stores/graphStore'
 import { LiteGraph } from '@comfyorg/litegraph'
-import type { OriginalEvent } from '@comfyorg/litegraph/dist/types/events'
 import type {
-  Vector2,
+  ConnectingLink,
   LiteGraphCanvasEvent,
-  ConnectingLink
+  Vector2
 } from '@comfyorg/litegraph'
+import type { OriginalEvent } from '@comfyorg/litegraph/dist/types/events'
 import { useEventListener } from '@vueuse/core'
-import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { storeToRefs } from 'pinia'
+import Dialog from 'primevue/dialog'
+import { computed, ref, toRaw, watchEffect } from 'vue'
+
 import { useLitegraphService } from '@/services/litegraphService'
+import { FilterAndValue } from '@/services/nodeSearchService'
+import { useCanvasStore } from '@/stores/graphStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
+import { ConnectingLinkImpl } from '@/types/litegraphTypes'
+import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
+
+import NodeSearchBox from './NodeSearchBox.vue'
 
 const settingStore = useSettingStore()
 const litegraphService = useLitegraphService()

src/components/searchbox/NodeSearchFilter.vue

@@ -22,11 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { NodeFilter, type FilterAndValue } from '@/services/nodeSearchService'
 import Button from 'primevue/button'
-import SelectButton from 'primevue/selectbutton'
 import Select from 'primevue/select'
-import { ref, onMounted, computed } from 'vue'
+import SelectButton from 'primevue/selectbutton'
+import { computed, onMounted, ref } from 'vue'
+
+import { type FilterAndValue, NodeFilter } from '@/services/nodeSearchService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)

src/components/searchbox/NodeSearchItem.vue

@@ -49,14 +49,15 @@
 </template>
 
 <script setup lang="ts">
-import Tag from 'primevue/tag'
 import Chip from 'primevue/chip'
-import { NodeSourceType } from '@/types/nodeSource'
-import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
-import { highlightQuery } from '@/utils/formatUtil'
+import Tag from 'primevue/tag'
 import { computed } from 'vue'
-import { useSettingStore } from '@/stores/settingStore'
+
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import { highlightQuery } from '@/utils/formatUtil'
 import { formatNumberWithSuffix } from '@/utils/formatUtil'
 
 const settingStore = useSettingStore()

src/components/sidebar/SideToolbar.vue

@@ -27,17 +27,19 @@
 </template>
 
 <script setup lang="ts">
-import SidebarIcon from './SidebarIcon.vue'
-import SidebarThemeToggleIcon from './SidebarThemeToggleIcon.vue'
-import SidebarSettingsToggleIcon from './SidebarSettingsToggleIcon.vue'
-import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
-import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { computed } from 'vue'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { useSettingStore } from '@/stores/settingStore'
-import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useKeybindingStore } from '@/stores/keybindingStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useUserStore } from '@/stores/userStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+import SidebarIcon from './SidebarIcon.vue'
+import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
+import SidebarSettingsToggleIcon from './SidebarSettingsToggleIcon.vue'
+import SidebarThemeToggleIcon from './SidebarThemeToggleIcon.vue'
 
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()

src/components/sidebar/SidebarIcon.vue

@@ -25,9 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import OverlayBadge from 'primevue/overlaybadge'
 import Button from 'primevue/button'
-import { computed, PropType } from 'vue' // Add this line to import PropsType
+import OverlayBadge from 'primevue/overlaybadge'
+import { PropType, computed } from 'vue'
+
+// Add this line to import PropsType
 
 const props = defineProps({
   icon: String,

src/components/sidebar/SidebarLogoutIcon.vue

@@ -3,11 +3,13 @@
 </template>
 
 <script setup lang="ts">
-import SidebarIcon from './SidebarIcon.vue'
-import { useUserStore } from '@/stores/userStore'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useUserStore } from '@/stores/userStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
 const { t } = useI18n()
 const userStore = useUserStore()
 

src/components/sidebar/SidebarSettingsToggleIcon.vue

@@ -8,10 +8,11 @@
 </template>
 
 <script setup lang="ts">
-import SidebarIcon from './SidebarIcon.vue'
-import { useDialogStore } from '@/stores/dialogStore'
 import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import SidebarIcon from './SidebarIcon.vue'
 
 const dialogStore = useDialogStore()
 const showSetting = () => {

src/components/sidebar/SidebarThemeToggleIcon.vue

@@ -9,9 +9,11 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import SidebarIcon from './SidebarIcon.vue'
-import { useSettingStore } from '@/stores/settingStore'
+
 import { useCommandStore } from '@/stores/commandStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
 const currentTheme = computed(() => settingStore.get('Comfy.ColorPalette'))

src/components/sidebar/__tests__/SidebarIcon.spec.ts

@@ -1,10 +1,11 @@
 import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import SidebarIcon from '../SidebarIcon.vue'
-import OverlayBadge from 'primevue/overlaybadge'
 import Button from 'primevue/button'
-import Tooltip from 'primevue/tooltip'
 import PrimeVue from 'primevue/config'
+import OverlayBadge from 'primevue/overlaybadge'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it } from 'vitest'
+
+import SidebarIcon from '../SidebarIcon.vue'
 
 type SidebarIconProps = {
   icon: string

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -46,11 +46,16 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import type { TreeNode } from 'primevue/treenode'
+import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
+
 import SearchBox from '@/components/common/SearchBox.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
-import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
+import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
+import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useLitegraphService } from '@/services/litegraphService'
 import {
   ComfyModelDef,
   ModelFolder,
@@ -59,16 +64,12 @@ import {
 } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useTreeExpansion } from '@/hooks/treeHooks'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import { computed, ref, watch, toRef, onMounted, nextTick } from 'vue'
-import type { TreeNode } from 'primevue/treenode'
-import { buildTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
-import { useLitegraphService } from '@/services/litegraphService'
+import { buildTree } from '@/utils/treeUtil'
 
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -63,31 +63,33 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Popover from 'primevue/popover'
+import type { TreeNode } from 'primevue/treenode'
+import { Ref, computed, nextTick, ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import { SearchFilter } from '@/components/common/SearchFilterChip.vue'
+import TreeExplorer from '@/components/common/TreeExplorer.vue'
+import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
+import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useLitegraphService } from '@/services/litegraphService'
+import { FilterAndValue } from '@/services/nodeSearchService'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import {
-  buildNodeDefTree,
   ComfyNodeDefImpl,
+  buildNodeDefTree,
   useNodeDefStore
 } from '@/stores/nodeDefStore'
-import { computed, nextTick, ref, Ref } from 'vue'
-import type { TreeNode } from 'primevue/treenode'
-import Popover from 'primevue/popover'
-import Divider from 'primevue/divider'
-import SearchBox from '@/components/common/SearchBox.vue'
-import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
-import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
-import TreeExplorer from '@/components/common/TreeExplorer.vue'
-import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
-import { sortedTree } from '@/utils/treeUtil'
-import { useTreeExpansion } from '@/hooks/treeHooks'
-import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
-import { FilterAndValue } from '@/services/nodeSearchService'
-import { SearchFilter } from '@/components/common/SearchFilterChip.vue'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { useLitegraphService } from '@/services/litegraphService'
+import { sortedTree } from '@/utils/treeUtil'
+
+import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
 
 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -90,27 +90,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useInfiniteScroll, useResizeObserver } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
 import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
 import ProgressSpinner from 'primevue/progressspinner'
-import TaskItem from './queue/TaskItem.vue'
-import ResultGallery from './queue/ResultGallery.vue'
-import SidebarTabTemplate from './SidebarTabTemplate.vue'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { api } from '@/scripts/api'
-import { ComfyNode } from '@/types/comfyWorkflow'
-import { useSettingStore } from '@/stores/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { app } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useCommandStore } from '@/stores/commandStore'
+import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { ComfyNode } from '@/types/comfyWorkflow'
+
+import SidebarTabTemplate from './SidebarTabTemplate.vue'
+import ResultGallery from './queue/ResultGallery.vue'
+import TaskItem from './queue/TaskItem.vue'
 
 const IMAGE_FIT = 'Comfy.Queue.ImageFit'
 const confirm = useConfirm()

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import Toolbar from 'primevue/toolbar'
 import ScrollPanel from 'primevue/scrollpanel'
+import Toolbar from 'primevue/toolbar'
 
 const props = defineProps<{
   title: string

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -139,31 +139,32 @@
 </template>
 
 <script setup lang="ts">
-import SearchBox from '@/components/common/SearchBox.vue'
+import Button from 'primevue/button'
+import ConfirmDialog from 'primevue/confirmdialog'
+import type { TreeNode } from 'primevue/treenode'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
-import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
+import TextDivider from '@/components/common/TextDivider.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import Button from 'primevue/button'
-import TextDivider from '@/components/common/TextDivider.vue'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
+import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useWorkflowService } from '@/services/workflowService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useSettingStore } from '@/stores/settingStore'
 import {
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/stores/workflowStore'
-import { useCommandStore } from '@/stores/commandStore'
-import type { TreeNode } from 'primevue/treenode'
-import { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { ComfyWorkflow } from '@/stores/workflowStore'
-import { useI18n } from 'vue-i18n'
-import { useTreeExpansion } from '@/hooks/treeHooks'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowService } from '@/services/workflowService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { appendJsonExt } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
-import ConfirmDialog from 'primevue/confirmdialog'
 
 const settingStore = useSettingStore()
 const workflowTabsPosition = computed(() =>

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -61,14 +61,17 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import ProgressBar from 'primevue/progressbar'
 import Chip from 'primevue/chip'
+import ProgressBar from 'primevue/progressbar'
 import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
+
 import {
   type ElectronDownload,
   useElectronDownloadStore
 } from '@/stores/electronDownloadStore'
+
+const { t } = useI18n()
+
 const electronDownloadStore = useElectronDownloadStore()
 
 const props = defineProps<{

src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script setup lang="ts">
-import DownloadItem from './DownloadItem.vue'
-import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { storeToRefs } from 'pinia'
 
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+
+import DownloadItem from './DownloadItem.vue'
+
 const electronDownloadStore = useElectronDownloadStore()
 const { inProgressDownloads } = storeToRefs(electronDownloadStore)
 </script>

src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue

@@ -21,19 +21,21 @@
 </template>
 
 <script setup lang="ts">
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import ModelPreview from './ModelPreview.vue'
-import { ComfyModelDef } from '@/stores/modelStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import {
-  computed,
   CSSProperties,
+  computed,
   nextTick,
   onMounted,
   onUnmounted,
   ref
 } from 'vue'
+
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import { ComfyModelDef } from '@/stores/modelStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+import ModelPreview from './ModelPreview.vue'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyModelDef>

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -22,10 +22,16 @@
 </template>
 
 <script setup lang="ts">
-import TreeExplorer from '@/components/common/TreeExplorer.vue'
-import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
-import NodeTreeFolder from '@/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue'
+import type { TreeNode } from 'primevue/treenode'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import FolderCustomizationDialog from '@/components/common/CustomizationDialog.vue'
+import TreeExplorer from '@/components/common/TreeExplorer.vue'
+import NodeTreeFolder from '@/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue'
+import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
+import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type {
@@ -33,12 +39,7 @@ import type {
   TreeExplorerDragAndDropData,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import type { TreeNode } from 'primevue/treenode'
-import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useTreeExpansion } from '@/hooks/treeHooks'
 import { findNodeByKey } from '@/utils/treeUtil'
-import { useLitegraphService } from '@/services/litegraphService'
 
 const props = defineProps<{
   filteredNodeDefs: ComfyNodeDefImpl[]

src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue

@@ -8,10 +8,11 @@
 </template>
 
 <script setup lang="ts">
+import { Ref, computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { BookmarkCustomization } from '@/types/apiTypes'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -36,20 +36,21 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Tag from 'primevue/tag'
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import NodePreview from '@/components/node/NodePreview.vue'
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import {
-  computed,
   CSSProperties,
+  computed,
   nextTick,
   onMounted,
   onUnmounted,
   ref
 } from 'vue'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import NodePreview from '@/components/node/NodePreview.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -33,10 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
 import Galleria from 'primevue/galleria'
-import { ResultItemImpl } from '@/stores/queueStore'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
 import ComfyImage from '@/components/common/ComfyImage.vue'
+import { ResultItemImpl } from '@/stores/queueStore'
+
 import ResultVideo from './ResultVideo.vue'
 
 const galleryVisible = ref(false)

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -24,11 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { ResultItemImpl } from '@/stores/queueStore'
-import ComfyImage from '@/components/common/ComfyImage.vue'
 import Button from 'primevue/button'
 import { computed, onMounted, ref } from 'vue'
+
+import ComfyImage from '@/components/common/ComfyImage.vue'
+import { ResultItemImpl } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
+
 import ResultVideo from './ResultVideo.vue'
 
 const props = defineProps<{

src/components/sidebar/tabs/queue/ResultVideo.vue

@@ -6,9 +6,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { ResultItemImpl } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { computed } from 'vue'
 
 const props = defineProps<{
   result: ResultItemImpl

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -69,14 +69,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
 import Button from 'primevue/button'
 import Tag from 'primevue/tag'
-import ResultItem from './ResultItem.vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import { api } from '@/scripts/api'
+import { useLitegraphService } from '@/services/litegraphService'
 import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'
 import { ComfyNode } from '@/types/comfyWorkflow'
-import { useLitegraphService } from '@/services/litegraphService'
-import { api } from '@/scripts/api'
+
+import ResultItem from './ResultItem.vue'
 
 const props = defineProps<{
   task: TaskItemImpl

src/components/sidebar/tabs/queue/__tests__/ResultGallery.ts

@@ -1,14 +1,15 @@
 // @ts-strict-ignore
 // Disabled because of https://github.com/Comfy-Org/ComfyUI_frontend/issues/1184
-
 import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import ResultGallery from '../ResultGallery.vue'
-import Galleria from 'primevue/galleria'
-import ComfyImage from '@/components/common/ComfyImage.vue'
 import PrimeVue from 'primevue/config'
+import Galleria from 'primevue/galleria'
+import { describe, expect, it } from 'vitest'
+
+import ComfyImage from '@/components/common/ComfyImage.vue'
 import { ResultItemImpl } from '@/stores/queueStore'
 
+import ResultGallery from '../ResultGallery.vue'
+
 type ResultGalleryProps = typeof ResultGallery.__props
 
 describe('ResultGallery', () => {

src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue

@@ -13,11 +13,12 @@
 </template>
 
 <script setup lang="ts">
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
-import { computed } from 'vue'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyWorkflow>

src/components/templates/TemplateWorkflowsContent.vue

@@ -41,11 +41,12 @@ import Carousel from 'primevue/carousel'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted, ref } from 'vue'
-import { useDialogStore } from '@/stores/dialogStore'
-import { app } from '@/scripts/app'
-import { api } from '@/scripts/api'
 import { useI18n } from 'vue-i18n'
+
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useDialogStore } from '@/stores/dialogStore'
 import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
 
 interface WorkflowTemplatesTab {

src/components/toast/GlobalToast.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { nextTick, watch } from 'vue'
 
+import { useSettingStore } from '@/stores/settingStore'
+import { useToastStore } from '@/stores/toastStore'
+
 const toast = useToast()
 const toastStore = useToastStore()
 const settingStore = useSettingStore()

src/components/topbar/BottomPanelToggleButton.vue

@@ -16,8 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import Button from 'primevue/button'
 
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+
 const bottomPanelStore = useBottomPanelStore()
 </script>

src/components/topbar/CommandMenubar.vue

@@ -29,14 +29,15 @@
 </template>
 
 <script setup lang="ts">
-import { useMenuItemStore } from '@/stores/menuItemStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 import Menubar from 'primevue/menubar'
 import type { MenuItem } from 'primevue/menuitem'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useMenuItemStore } from '@/stores/menuItemStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
 const settingStore = useSettingStore()
 const dropdownDirection = computed(() =>
   settingStore.get('Comfy.UseNewMenu') === 'Top' ? 'down' : 'up'

src/components/topbar/TopMenubar.vue

@@ -28,16 +28,17 @@
 </template>
 
 <script setup lang="ts">
+import { useEventBus } from '@vueuse/core'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
-import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
+import { computed, onMounted, provide, ref } from 'vue'
+
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import BottomPanelToggleButton from '@/components/topbar/BottomPanelToggleButton.vue'
-import { computed, onMounted, provide, ref } from 'vue'
-import { useSettingStore } from '@/stores/settingStore'
+import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
-import { useEventBus } from '@vueuse/core'
+import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeMenu } from '@/utils/envUtil'
 

src/components/topbar/WorkflowTab.vue

@@ -29,13 +29,14 @@
 </template>
 
 <script setup lang="ts">
-import { ComfyWorkflow } from '@/stores/workflowStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import Button from 'primevue/button'
 import { ref } from 'vue'
-import { useWorkflowService } from '@/services/workflowService'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
+
 import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
+import { useWorkflowService } from '@/services/workflowService'
+import { ComfyWorkflow } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 interface WorkflowOption {
   value: string

src/components/topbar/WorkflowTabs.vue

@@ -27,17 +27,18 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
+import ContextMenu from 'primevue/contextmenu'
+import SelectButton from 'primevue/selectbutton'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
+import { useWorkflowService } from '@/services/workflowService'
+import { useCommandStore } from '@/stores/commandStore'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
-import { useCommandStore } from '@/stores/commandStore'
-import SelectButton from 'primevue/selectbutton'
-import Button from 'primevue/button'
-import { computed, ref } from 'vue'
-import { useWorkflowService } from '@/services/workflowService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import ContextMenu from 'primevue/contextmenu'
-import { useI18n } from 'vue-i18n'
 
 interface WorkflowOption {
   value: string