[Refactor] Rename hooks/ to composables/ (#2437)

.cursorrules

@@ -15,7 +15,7 @@ const folderStructure = `
 src/
   components/
   constants/
-  hooks/
+  composables/
   views/
   stores/
   services/

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

@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import { Ref, onUnmounted, ref } from 'vue'
 
-import { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 
 const emit = defineEmits<{
   created: [ReturnType<typeof useTerminal>, Ref<HTMLElement>]

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

@@ -6,7 +6,7 @@
 import { IDisposable } from '@xterm/xterm'
 import { Ref, onMounted, onUnmounted } from 'vue'
 
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseTerminal from './BaseTerminal.vue'

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

@@ -15,7 +15,7 @@ import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
 import { Ref, onMounted, onUnmounted, ref } from 'vue'
 
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'

src/components/common/ElectronFileDownload.vue

@@ -80,7 +80,7 @@ import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useDownload } from '@/hooks/downloadHooks'
+import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { formatSize } from '@/utils/formatUtil'
 

src/components/common/FileDownload.vue

@@ -27,7 +27,7 @@
 import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import { useDownload } from '@/hooks/downloadHooks'
+import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/TreeExplorer.vue

@@ -43,7 +43,7 @@ import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { useErrorHandling } from '@/hooks/errorHooks'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode

src/components/common/TreeExplorerTreeNode.vue

@@ -41,8 +41,11 @@ 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 { useErrorHandling } from '@/composables/useErrorHandling'
+import {
+  usePragmaticDraggable,
+  usePragmaticDroppable
+} from '@/composables/usePragmaticDroppable'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerDragAndDropData,

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -59,7 +59,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'

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

@@ -74,8 +74,8 @@ import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 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'

src/components/graph/GraphCanvas.vue

@@ -41,11 +41,11 @@ import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import { useCanvasDrop } from '@/composables/useCanvasDrop'
+import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
+import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
+import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
-import { useCanvasDrop } from '@/hooks/canvasDropHooks'
-import { useGlobalLitegraph } from '@/hooks/litegraphHooks'
-import { useContextMenuTranslation } from '@/hooks/translationHooks'
-import { useWorkflowPersistence } from '@/hooks/workflowPersistenceHooks'
 import { i18n } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -54,7 +54,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.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 { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import {
   ComfyModelDef,

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -75,7 +75,7 @@ import NodePreview from '@/components/node/NodePreview.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 { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { FilterAndValue } from '@/services/nodeSearchService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -155,7 +155,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
-import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSettingStore } from '@/stores/settingStore'

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

@@ -30,7 +30,7 @@ import FolderCustomizationDialog from '@/components/common/CustomizationDialog.v
 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 { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'

src/components/topbar/WorkflowTab.vue

@@ -32,7 +32,10 @@
 import Button from 'primevue/button'
 import { ref } from 'vue'
 
-import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
+import {
+  usePragmaticDraggable,
+  usePragmaticDroppable
+} from '@/composables/usePragmaticDroppable'
 import { useWorkflowService } from '@/services/workflowService'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'

src/composables/useCanvasDrop.ts

@@ -2,7 +2,7 @@ import { LGraphNode } from '@comfyorg/litegraph'
 import { LiteGraph } from '@comfyorg/litegraph'
 import { Ref } from 'vue'
 
-import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { usePragmaticDroppable } from '@/composables/usePragmaticDroppable'
 import { app as comfyApp } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
 import { ComfyModelDef } from '@/stores/modelStore'

src/services/colorPaletteService.ts

@@ -3,7 +3,7 @@ import { LiteGraph } from '@comfyorg/litegraph'
 import { toRaw } from 'vue'
 import { fromZodError } from 'zod-validation-error'
 
-import { useErrorHandling } from '@/hooks/errorHooks'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import { app } from '@/scripts/app'
 import { downloadBlob, uploadFile } from '@/scripts/utils'
 import { useNodeDefStore } from '@/stores/nodeDefStore'

src/services/extensionService.ts

@@ -1,4 +1,4 @@
-import { useErrorHandling } from '@/hooks/errorHooks'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'

src/stores/commandStore.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { useErrorHandling } from '@/hooks/errorHooks'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ComfyExtension } from '@/types/comfy'
 
 import { type KeybindingImpl, useKeybindingStore } from './keybindingStore'

src/stores/workspace/bottomPanelStore.ts

@@ -4,7 +4,7 @@ import { computed, ref } from 'vue'
 import {
   useCommandTerminalTab,
   useLogsTerminalTab
-} from '@/hooks/bottomPanelTabs/terminalTabs'
+} from '@/composables/bottomPanelTabs/useTerminalTabs'
 import { useCommandStore } from '@/stores/commandStore'
 import { ComfyExtension } from '@/types/comfy'
 import type { BottomPanelExtension } from '@/types/extensionTypes'

src/stores/workspace/sidebarTabStore.ts

@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { useModelLibrarySidebarTab } from '@/hooks/sidebarTabs/modelLibrarySidebarTab'
-import { useNodeLibrarySidebarTab } from '@/hooks/sidebarTabs/nodeLibrarySidebarTab'
-import { useQueueSidebarTab } from '@/hooks/sidebarTabs/queueSidebarTab'
-import { useWorkflowsSidebarTab } from '@/hooks/sidebarTabs/workflowsSidebarTab'
+import { useModelLibrarySidebarTab } from '@/composables/sidebarTabs/useModelLibrarySidebarTab'
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
+import { useWorkflowsSidebarTab } from '@/composables/sidebarTabs/useWorkflowsSidebarTab'
 import { useCommandStore } from '@/stores/commandStore'
 import { SidebarTabExtension } from '@/types/extensionTypes'
 

src/views/GraphView.vue

@@ -22,9 +22,9 @@ import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDi
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 import TopMenubar from '@/components/topbar/TopMenubar.vue'
+import { useCoreCommands } from '@/composables/useCoreCommands'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
-import { useCoreCommands } from '@/hooks/coreCommandHooks'
-import { useErrorHandling } from '@/hooks/errorHooks'
 import { i18n } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'

src/views/MaintenanceView.vue

@@ -104,8 +104,8 @@ import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vu
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
 import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
-import { useTerminalBuffer } from '@/hooks/bottomPanelTabs/useTerminalBuffer'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
 import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'

src/views/ServerStartView.vue

@@ -51,7 +51,7 @@ import { Ref, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'