[Manager] "Restarting" state after clicking restart button (#4637)

2026-03-04 20:50:06 +00:00 · 2025-08-02 04:04:58 +09:00
parent 2a8c474425
commit 2cf4dab010
8 changed files with 859 additions and 71 deletions
--- a/src/components/common/DotSpinner.vue
+++ b/src/components/common/DotSpinner.vue
@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="inline-flex items-center justify-center"
+    :style="{ width: size + 'px', height: size + 'px' }"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      viewBox="0 0 14 14"
+      fill="none"
+      class="animate-spin"
+      :style="{ animationDuration: duration }"
+    >
+      <g clip-path="url(#clip0_776_9582)">
+        <!-- Top dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7 2.21053C7.61042 2.21053 8.10526 1.71568 8.10526 1.10526C8.10526 0.494843 7.61042 0 7 0C6.38958 0 5.89474 0.494843 5.89474 1.10526C5.89474 1.71568 6.38958 2.21053 7 2.21053Z"
+          :fill="color"
+        />
+        <!-- Left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.25s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.21053 7C2.21053 7.61042 1.71568 8.10526 1.10526 8.10526C0.494843 8.10526 0 7.61042 0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474C1.71568 5.89474 2.21053 6.38958 2.21053 7Z"
+          :fill="color"
+        />
+        <!-- Right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.5s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14 7C14 7.61042 13.5052 8.10526 12.8947 8.10526C12.2843 8.10526 11.7895 7.61042 11.7895 7C11.7895 6.38958 12.2843 5.89474 12.8947 5.89474C13.5052 5.89474 14 6.38958 14 7Z"
+          :fill="color"
+        />
+        <!-- Bottom dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.75s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.10526 12.8947C8.10526 13.5052 7.61041 14 6.99999 14C6.38957 14 5.89473 13.5052 5.89473 12.8947C5.89473 12.2843 6.38957 11.7895 6.99999 11.7895C7.61041 11.7895 8.10526 12.2843 8.10526 12.8947Z"
+          :fill="color"
+        />
+        <!-- Top-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.125s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 3.61349C2.48203 4.04513 3.18184 4.04513 3.61347 3.61349C4.0451 3.18186 4.0451 2.48205 3.61347 2.05042C3.18184 1.61878 2.48203 1.61878 2.05039 2.05042C1.61876 2.48205 1.61876 3.18186 2.05039 3.61349Z"
+          :fill="color"
+        />
+        <!-- Bottom-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.625s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 11.9496C11.518 12.3812 10.8182 12.3812 10.3865 11.9496C9.9549 11.5179 9.9549 10.8181 10.3865 10.3865C10.8182 9.95485 11.518 9.95485 11.9496 10.3865C12.3812 10.8181 12.3812 11.5179 11.9496 11.9496Z"
+          :fill="color"
+        />
+        <!-- Bottom-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.875s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 11.9496C2.48203 12.3812 3.18184 12.3812 3.61347 11.9496C4.0451 11.5179 4.0451 10.8181 3.61347 10.3865C3.18184 9.95485 2.48203 9.95485 2.05039 10.3865C1.61876 10.8181 1.61876 11.5179 2.05039 11.9496Z"
+          :fill="color"
+        />
+        <!-- Top-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.375s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 3.61349C11.518 4.04513 10.8182 4.04513 10.3865 3.61349C9.9549 3.18186 9.9549 2.48205 10.3865 2.05042C10.8182 1.61878 11.518 1.61878 11.9496 2.05042C12.3812 2.48205 12.3812 3.18186 11.9496 3.61349Z"
+          :fill="color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_776_9582">
+          <rect width="14" height="14" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const { size = 24, duration = '2s' } = defineProps<{
+  size?: number
+  duration?: string
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+
+const color = computed(() =>
+  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
+)
+</script>
+
+<style scoped>
+.dot-animation {
+  animation: dot-pulse 1s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+</style>
--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackInstallButton.vue
@@ -10,7 +10,6 @@
    :loading="isInstalling"
    :loading-message="$t('g.installing')"
    @action="installAllPacks"
-    @click="onClick"
  />
 </template>

@@ -37,10 +36,6 @@ const { nodePacks, variant, label } = defineProps<{

 const isInstalling = inject(IsInstallingKey, ref(false))

-const onClick = (): void => {
-  isInstalling.value = true
-}
-
 const managerStore = useComfyManagerStore()

 const createPayload = (installItem: NodePack) => {
@@ -65,8 +60,6 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
  if (!nodePacks?.length) return

-  isInstalling.value = true
-
  const uninstalledPacks = nodePacks.filter(
    (pack) => !managerStore.isPackInstalled(pack.id)
  )
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -84,10 +84,9 @@
 </template>

 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, provide, ref } from 'vue'
+import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'

 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
@@ -114,18 +113,17 @@ const isLightTheme = computed(
  () => colorPaletteStore.completedActivePalette.light_theme
 )

-const isInstalling = ref(false)
-provide(IsInstallingKey, isInstalling)
+const { isPackInstalled, isPackEnabled, isPackInstalling } =
+  useComfyManagerStore()

-const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
+const isInstalling = computed(() => isPackInstalling(nodePack?.id))
+provide(IsInstallingKey, isInstalling)

 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
  () => isInstalled.value && !isPackEnabled(nodePack?.id)
 )

-whenever(isInstalled, () => (isInstalling.value = false))
-
 const nodesCount = computed(() =>
  isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
 )
--- a/src/components/dialog/footer/ManagerProgressFooter.vue
+++ b/src/components/dialog/footer/ManagerProgressFooter.vue
@@ -1,40 +1,47 @@
 <template>
  <div
-    class="w-full px-6 py-4 shadow-lg flex items-center justify-between"
+    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
    :class="{
      'rounded-t-none': progressDialogContent.isExpanded,
      'rounded-lg': !progressDialogContent.isExpanded
    }"
  >
-    <div class="justify-center text-sm font-bold leading-none">
+    <div class="flex items-center text-base leading-none">
      <div class="flex items-center">
-        <template v-if="isInProgress">
-          <i class="pi pi-spin pi-spinner mr-2 text-3xl" />
+        <!-- 1. Queue running (install/enable/disable etc.) -->
+        <template v-if="isQueueRunning">
+          <DotSpinner duration="1s" class="mr-2" />
          <span>{{ currentTaskName }}</span>
        </template>
+        <!-- 3. Restarting -->
+        <template v-else-if="isRestarting">
+          <DotSpinner duration="1s" class="mr-2" />
+          <span>{{ $t('manager.restartingBackend') }}</span>
+        </template>
+        <!-- 4. Restart completed -->
+        <template v-else-if="isRestartCompleted">
+          <span class="mr-2">🎉</span>
+          <span>{{ $t('manager.extensionsSuccessfullyInstalled') }}</span>
+        </template>
+        <!-- 2. Tasks completed (waiting for restart) -->
        <template v-else>
-          <i class="pi pi-check-circle mr-2 text-green-500" />
-          <span class="leading-none">{{
-            $t('manager.restartToApplyChanges')
-          }}</span>
+          <span class="mr-2">✅</span>
+          <span>
+            {{ $t('manager.clickToFinishSetup') }}
+            '{{ $t('manager.applyChanges') }}'
+            {{ $t('manager.toFinishSetup') }}
+          </span>
        </template>
      </div>
    </div>
+
    <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
-        {{ comfyManagerStore.uncompletedCount }} {{ $t('g.progressCountOf') }}
-        {{ comfyManagerStore.taskLogs.length }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="!isInProgress"
-          rounded
-          outlined
-          class="px-4 py-2 rounded-md mr-4"
-          @click="handleRestart"
-        >
-          {{ $t('g.restart') }}
-        </Button>
+      <!-- 1. Queue running -->
+      <template v-if="isQueueRunning">
+        <span class="text-sm text-neutral-700 dark-theme:text-neutral-400">
+          {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
+          {{ taskLogs }}
+        </span>
        <Button
          :icon="
            progressDialogContent.isExpanded
@@ -44,20 +51,46 @@
          text
          rounded
          size="small"
+          class="font-bold"
          severity="secondary"
          :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
          @click.stop="progressDialogContent.toggle"
        />
+      </template>
+
+      <!-- 2. Tasks completed (waiting for restart) -->
+      <template v-else-if="!isRestarting && !isRestartCompleted">
        <Button
-          icon="pi pi-times"
-          text
          rounded
-          size="small"
-          severity="secondary"
-          aria-label="Close"
-          @click.stop="closeDialog"
-        />
-      </div>
+          outlined
+          class="rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 dark-theme:bg-none dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-700"
+          @click="handleRestart"
+        >
+          {{ $t('manager.applyChanges') }}
+        </Button>
+      </template>
+
+      <!-- 3. Restarting -->
+      <template v-else-if="isRestarting">
+        <!-- No buttons during restart -->
+      </template>
+
+      <!-- 4. Restart completed -->
+      <template v-else-if="isRestartCompleted">
+        <!-- No buttons after restart completed (auto-close after 3 seconds) -->
+      </template>
+
+      <!-- Common: Close button -->
+      <Button
+        icon="pi pi-times"
+        text
+        rounded
+        size="small"
+        class="font-bold"
+        severity="secondary"
+        aria-label="Close"
+        @click.stop="closeDialog"
+      />
    </div>
  </div>
 </template>
@@ -65,9 +98,10 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import DotSpinner from '@/components/common/DotSpinner.vue'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useWorkflowService } from '@/services/workflowService'
@@ -77,19 +111,34 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'

 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
+const settingStore = useSettingStore()

-const isInProgress = computed(() => comfyManagerStore.uncompletedCount > 0)
+// State management for restart process
+const isRestarting = ref<boolean>(false)
+const isRestartCompleted = ref<boolean>(false)
+
+// Computed states
+const isQueueRunning = computed(() => comfyManagerStore.uncompletedCount > 0)
+const taskLogs = computed(() => comfyManagerStore.taskLogs.length)
+
+const completedTasksCount = computed(() => {
+  if (isQueueRunning.value && taskLogs.value > 0) {
+    return taskLogs.value - 1
+  }
+  return taskLogs.value
+})

 const closeDialog = () => {
  dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
 }

-const fallbackTaskName = t('g.installing')
+const fallbackTaskName = t('manager.installingDependencies')
 const currentTaskName = computed(() => {
  if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
  const task = comfyManagerStore.taskLogs.at(-1)
@@ -97,21 +146,52 @@ const currentTaskName = computed(() => {
 })

 const handleRestart = async () => {
-  const onReconnect = async () => {
-    // Refresh manager state
+  // Store original toast setting value
+  const originalToastSetting = settingStore.get(
+    'Comfy.Toast.DisableReconnectingToast'
+  )

-    comfyManagerStore.clearLogs()
-    comfyManagerStore.setStale()
+  try {
+    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)

-    // Refresh node definitions
-    await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+    isRestarting.value = true

-    // Reload workflow
-    await useWorkflowService().reloadCurrentWorkflow()
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+
+        await useWorkflowService().reloadCurrentWorkflow()
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          closeDialog()
+          comfyManagerStore.clearLogs()
+        }, 3000)
+      }
+    }
+
+    useEventListener(api, 'reconnected', onReconnect, { once: true })
+
+    await useComfyManagerService().rebootComfyUI()
+  } catch (error) {
+    // If restart fails, restore settings and reset state
+    await settingStore.set(
+      'Comfy.Toast.DisableReconnectingToast',
+      originalToastSetting
+    )
+    isRestarting.value = false
+    isRestartCompleted.value = false
+    closeDialog() // Close dialog on error
+    throw error
  }
-  useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-  await useComfyManagerService().rebootComfyUI()
-  closeDialog()
 }
 </script>