[Electron] Show server launch args in server config panel (#1669)

* Move revertChanges

* Show launch args

* Explicit ServerConfigValue type

* nit

* nit

* Add tests

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -38,7 +38,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import { useToast } from 'primevue/usetoast'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
@@ -50,6 +49,7 @@ import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { isElectron } from '@/utils/envUtil'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 
 const props = defineProps<{
   error: ExecutionErrorWsMessage
@@ -65,7 +65,6 @@ const showReport = () => {
 const showSendError = isElectron()
 
 const toast = useToast()
-const { copy, isSupported } = useClipboard()
 
 onMounted(async () => {
   try {
@@ -140,30 +139,9 @@ ${workflowText}
 `
 }
 
+const { copyToClipboard } = useCopyToClipboard()
 const copyReportToClipboard = async () => {
-  if (isSupported) {
-    try {
-      await copy(reportContent.value)
-      toast.add({
-        severity: 'success',
-        summary: 'Success',
-        detail: 'Report copied to clipboard',
-        life: 3000
-      })
-    } catch (err) {
-      toast.add({
-        severity: 'error',
-        summary: 'Error',
-        detail: 'Failed to copy report'
-      })
-    }
-  } else {
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: 'Clipboard API not supported in your browser'
-    })
-  }
+  await copyToClipboard(reportContent.value)
 }
 
 const openNewGithubIssue = async () => {

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

@@ -1,42 +1,62 @@
 <template>
-  <Message v-if="modifiedConfigs.length > 0" severity="info" pt:text="w-full">
-    <p>
-      {{ $t('serverConfig.modifiedConfigs') }}
-    </p>
-    <ul>
-      <li v-for="config in modifiedConfigs" :key="config.id">
-        {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
-      </li>
-    </ul>
-    <div class="flex justify-end gap-2">
-      <Button
-        :label="$t('serverConfig.revertChanges')"
-        @click="revertChanges"
-        outlined
-      />
-      <Button
-        :label="$t('serverConfig.restart')"
-        @click="restartApp"
-        outlined
-        severity="danger"
-      />
-    </div>
-  </Message>
-  <div
-    v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
-    :key="label"
-  >
-    <Divider v-if="i > 0" />
-    <h3>{{ formatCamelCase(label) }}</h3>
-    <div v-for="item in items" :key="item.name" class="flex items-center mb-4">
-      <FormItem
-        :item="item"
-        v-model:formValue="item.value"
-        :id="item.id"
-        :labelClass="{
-          'text-highlight': item.initialValue !== item.value
-        }"
-      />
+  <div class="flex flex-col gap-2">
+    <Message v-if="modifiedConfigs.length > 0" severity="info" pt:text="w-full">
+      <p>
+        {{ $t('serverConfig.modifiedConfigs') }}
+      </p>
+      <ul>
+        <li v-for="config in modifiedConfigs" :key="config.id">
+          {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
+        </li>
+      </ul>
+      <div class="flex justify-end gap-2">
+        <Button
+          :label="$t('serverConfig.revertChanges')"
+          @click="revertChanges"
+          outlined
+        />
+        <Button
+          :label="$t('serverConfig.restart')"
+          @click="restartApp"
+          outlined
+          severity="danger"
+        />
+      </div>
+    </Message>
+    <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
+      <template #icon>
+        <i-lucide:terminal class="text-xl font-bold" />
+      </template>
+      <div class="flex items-center justify-between">
+        <p>{{ commandLineArgs }}</p>
+        <Button
+          icon="pi pi-clipboard"
+          @click="copyCommandLineArgs"
+          severity="secondary"
+          text
+        />
+      </div>
+    </Message>
+    <div
+      v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
+      :key="label"
+    >
+      <Divider v-if="i > 0" />
+      <h3>{{ formatCamelCase(label) }}</h3>
+      <div
+        v-for="item in items"
+        :key="item.name"
+        class="flex items-center mb-4"
+      >
+        <FormItem
+          :item="item"
+          v-model:formValue="item.value"
+          :id="item.id"
+          :labelClass="{
+            'text-highlight': item.initialValue !== item.value
+          }"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -52,6 +72,7 @@ import { storeToRefs } from 'pinia'
 import { electronAPI } from '@/utils/envUtil'
 import { useSettingStore } from '@/stores/settingStore'
 import { watch } from 'vue'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
@@ -59,13 +80,12 @@ const {
   serverConfigsByCategory,
   serverConfigValues,
   launchArgs,
+  commandLineArgs,
   modifiedConfigs
 } = storeToRefs(serverConfigStore)
 
 const revertChanges = () => {
-  for (const config of modifiedConfigs.value) {
-    config.value = config.initialValue
-  }
+  serverConfigStore.revertChanges()
 }
 
 const restartApp = () => {
@@ -79,4 +99,9 @@ watch(launchArgs, (newVal) => {
 watch(serverConfigValues, (newVal) => {
   settingStore.set('Comfy.Server.ServerConfigValues', newVal)
 })
+
+const { copyToClipboard } = useCopyToClipboard()
+const copyCommandLineArgs = async () => {
+  await copyToClipboard(commandLineArgs.value)
+}
 </script>