move update actions into channel selection area (#69)

Move Update Now and Copy & Update buttons from the section actions into
the channel field's channelActions so they appear mutually exclusive
with the Switch Channel button. Check for Updates remains as a
standalone section action.

Amp-Thread-ID: https://ampcode.com/threads/T-019ca6df-24c7-750c-bbc0-fdefff59f674

Co-authored-by: Amp <amp@ampcode.com>

Author: Kosinkadink

src/main/sources/portable.ts

@@ -155,15 +155,11 @@ export const portable: SourcePlugin = {
       }
     })
 
-    const updateFields: Record<string, unknown>[] = [
-      { id: 'updateChannel', label: t('portable.updateChannel'), value: channel, editable: true,
-        refreshSection: true, onChangeAction: 'check-update', editType: 'channel-cards', options: channelOptions },
-    ]
-    const updateActions: Record<string, unknown>[] = []
+    const channelActions: Record<string, unknown>[] = []
     if (info && releaseCache.isUpdateAvailable(installation, channel, info)) {
       const msgKey = channel === 'latest' ? 'portable.updateConfirmMessageLatest' : 'portable.updateConfirmMessage'
       const notes = truncateNotes(info.releaseNotes || '', 2000)
-      updateActions.push({
+      channelActions.push({
         id: 'update-comfyui', label: t('portable.updateNow'), style: 'primary', enabled: installed,
         showProgress: true, progressTitle: t('portable.updatingTitle', { version: info.latestTag || '' }),
         confirm: {
@@ -177,9 +173,14 @@ export const portable: SourcePlugin = {
         },
       })
     }
-    updateActions.push({
-      id: 'check-update', label: t('actions.checkForUpdate'), style: 'default', enabled: installed,
-    })
+    const updateFields: Record<string, unknown>[] = [
+      { id: 'updateChannel', label: t('portable.updateChannel'), value: channel, editable: true,
+        refreshSection: true, onChangeAction: 'check-update', editType: 'channel-cards', options: channelOptions,
+        channelActions: channelActions.length ? channelActions : undefined },
+    ]
+    const updateActions: Record<string, unknown>[] = [
+      { id: 'check-update', label: t('actions.checkForUpdate'), style: 'default', enabled: installed },
+    ]
     sections.push({
       tab: 'update',
       title: t('portable.updates'),

src/main/sources/standalone.ts

@@ -348,11 +348,7 @@ export const standalone: SourcePlugin = {
       }
     })
 
-    const updateFields: Record<string, unknown>[] = [
-      { id: 'updateChannel', label: t('standalone.updateChannel'), value: channel, editable: true,
-        refreshSection: true, onChangeAction: 'check-update', editType: 'channel-cards', options: channelOptions },
-    ]
-    const updateActions: Record<string, unknown>[] = []
+    const channelActions: Record<string, unknown>[] = []
     if (info && releaseCache.isUpdateAvailable(installation, channel, info) && hasGit) {
       const installedDisplay = (installation.version as string | undefined) || info.installedTag || 'unknown'
       const latestDisplay = info.releaseName || info.latestTag || '—'
@@ -361,7 +357,7 @@ export const standalone: SourcePlugin = {
         : channel === 'latest' ? 'standalone.updateConfirmMessageLatest'
         : 'standalone.updateConfirmMessage'
       const notes = truncateNotes(info.releaseNotes || '', 2000)
-      updateActions.push({
+      channelActions.push({
         id: 'update-comfyui', label: t('standalone.updateNow'), style: 'primary', enabled: installed,
         showProgress: true, progressTitle: t('standalone.updatingTitle', { version: latestDisplay }),
         confirm: {
@@ -374,7 +370,7 @@ export const standalone: SourcePlugin = {
           }),
         },
       })
-      updateActions.push({
+      channelActions.push({
         id: 'copy-update', label: t('standalone.copyAndUpdate'), style: 'default', enabled: installed,
         showProgress: true, progressTitle: t('standalone.copyUpdatingTitle', { version: latestDisplay }),
         cancellable: true,
@@ -388,9 +384,14 @@ export const standalone: SourcePlugin = {
         },
       })
     }
-    updateActions.push({
-      id: 'check-update', label: t('actions.checkForUpdate'), style: 'default', enabled: installed,
-    })
+    const updateFields: Record<string, unknown>[] = [
+      { id: 'updateChannel', label: t('standalone.updateChannel'), value: channel, editable: true,
+        refreshSection: true, onChangeAction: 'check-update', editType: 'channel-cards', options: channelOptions,
+        channelActions: channelActions.length ? channelActions : undefined },
+    ]
+    const updateActions: Record<string, unknown>[] = [
+      { id: 'check-update', label: t('actions.checkForUpdate'), style: 'default', enabled: installed },
+    ]
     sections.push({
       tab: 'update',
       title: t('standalone.updates'),

src/renderer/src/assets/main.css

@@ -409,6 +409,7 @@ input[type="checkbox"]:checked::after { transform: translateX(16px); }
 .channel-preview-label { font-size: 13px; color: var(--text-muted); }
 .channel-preview-value { font-size: 13px; color: var(--text); }
 .channel-switch-btn { margin-top: 10px; }
+.channel-actions { display: flex; gap: 8px; margin-top: 10px; }
 .detail-item-list {
   background: var(--surface); border: 1px solid var(--border);
   border-radius: 8px; margin-bottom: 8px;

src/renderer/src/components/DetailSection.vue

@@ -166,6 +166,7 @@ v-for="a in item.actions" :key="a.id"
             <div v-else-if="getDraft(f) !== String(f.value)" class="channel-preview channel-preview-empty">
               {{ $t('channelCards.noInfo') }}
             </div>
+            <!-- Switch Channel: shown when a different channel is selected -->
             <button
               v-if="getDraft(f) !== String(f.value)"
               class="primary channel-switch-btn"
@@ -174,6 +175,17 @@ v-for="a in item.actions" :key="a.id"
             >
               {{ switchingChannel ? $t('channelCards.switching') : $t('channelCards.switchChannel') }}
             </button>
+            <!-- Channel actions (e.g. Update Now): shown when current channel is selected -->
+            <div v-else-if="f.channelActions?.length" class="channel-actions">
+              <button
+                v-for="a in f.channelActions" :key="a.id"
+                :class="[a.style, { 'looks-disabled': a.enabled === false && a.disabledMessage }]"
+                :disabled="a.enabled === false && !a.disabledMessage"
+                @click="handleAction(a, $event)"
+              >
+                {{ a.label }}
+              </button>
+            </div>
           </template>
           <template v-else>
             <div class="detail-field-label">{{ f.label }}</div>

src/types/ipc.ts

@@ -98,6 +98,7 @@ export interface DetailField {
   editable?: boolean
   editType?: 'select' | 'boolean' | 'text' | 'channel-cards'
   options?: DetailFieldOption[]
+  channelActions?: ActionDef[]
   refreshSection?: boolean
   onChangeAction?: string
 }