[automated] Apply ESLint and oxfmt fixes

src/components/card/CardDescription.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="line-clamp-2 h-7 text-xs text-muted-foreground">
-    <slot></slot>
+    <slot />
   </div>
 </template>

src/components/card/CardTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-neutral text-sm">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

src/components/card/CardTop.vue

@@ -1,29 +1,47 @@
 <template>
   <div :class="topStyle">
-    <slot class="absolute top-0 left-0 h-full w-full"></slot>
+    <slot class="absolute top-0 left-0 h-full w-full" />
 
-    <div v-if="slots['top-left']" :class="slotClasses['top-left']">
-      <slot name="top-left"></slot>
+    <div
+      v-if="slots['top-left']"
+      :class="slotClasses['top-left']"
+    >
+      <slot name="top-left" />
     </div>
 
-    <div v-if="slots['top-right']" :class="slotClasses['top-right']">
-      <slot name="top-right"></slot>
+    <div
+      v-if="slots['top-right']"
+      :class="slotClasses['top-right']"
+    >
+      <slot name="top-right" />
     </div>
 
-    <div v-if="slots['center-left']" :class="slotClasses['center-left']">
-      <slot name="center-left"></slot>
+    <div
+      v-if="slots['center-left']"
+      :class="slotClasses['center-left']"
+    >
+      <slot name="center-left" />
     </div>
 
-    <div v-if="slots['center-right']" :class="slotClasses['center-right']">
-      <slot name="center-right"></slot>
+    <div
+      v-if="slots['center-right']"
+      :class="slotClasses['center-right']"
+    >
+      <slot name="center-right" />
     </div>
 
-    <div v-if="slots['bottom-left']" :class="slotClasses['bottom-left']">
-      <slot name="bottom-left"></slot>
+    <div
+      v-if="slots['bottom-left']"
+      :class="slotClasses['bottom-left']"
+    >
+      <slot name="bottom-left" />
     </div>
 
-    <div v-if="slots['bottom-right']" :class="slotClasses['bottom-right']">
-      <slot name="bottom-right"></slot>
+    <div
+      v-if="slots['bottom-right']"
+      :class="slotClasses['bottom-right']"
+    >
+      <slot name="bottom-right" />
     </div>
   </div>
 </template>

src/components/common/UserCredit.vue

@@ -1,12 +1,25 @@
 <template>
-  <div v-if="balanceLoading" class="flex items-center gap-1">
+  <div
+    v-if="balanceLoading"
+    class="flex items-center gap-1"
+  >
     <div class="flex items-center gap-2">
-      <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
+      <Skeleton
+        shape="circle"
+        width="1.5rem"
+        height="1.5rem"
+      />
     </div>
-    <div class="flex-1"></div>
-    <Skeleton width="8rem" height="2rem" />
+    <div class="flex-1" />
+    <Skeleton
+      width="8rem"
+      height="2rem"
+    />
   </div>
-  <div v-else class="flex items-center gap-1">
+  <div
+    v-else
+    class="flex items-center gap-1"
+  >
     <Tag
       v-if="!showCreditsOnly"
       severity="secondary"

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -4,7 +4,10 @@
     class="workflow-template-selector-dialog"
   >
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems">
+      <LeftSidePanel
+        v-model="selectedNavItem"
+        :nav-items="navItems"
+      >
         <template #header-icon>
           <i class="icon-[comfy--template]" />
         </template>
@@ -17,7 +20,11 @@
     </template>
 
     <template #header>
-      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
+      <SearchBox
+        v-model="searchQuery"
+        size="lg"
+        class="max-w-[384px]"
+      />
     </template>
 
     <template #header-right-area>
@@ -132,7 +139,7 @@
         <span
           v-if="isLoading"
           class="inline-block h-8 w-48 animate-pulse rounded bg-dialog-surface"
-        ></span>
+        />
 
         <!-- Template Cards Grid -->
         <div
@@ -152,9 +159,7 @@
             <template #top>
               <CardTop ratio="landscape">
                 <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="h-full w-full animate-pulse bg-dialog-surface" />
                 </template>
               </CardTop>
             </template>
@@ -163,10 +168,8 @@
                 <div class="px-4 py-3">
                   <div
                     class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
-                  ></div>
-                  <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
-                  ></div>
+                  />
+                  <div class="h-4 animate-pulse rounded bg-dialog-surface" />
                 </div>
               </CardBottom>
             </template>
@@ -212,7 +215,7 @@
                         :is-hovered="hoveredTemplate === template.name"
                         :is-video="
                           template.mediaType === 'video' ||
-                          template.mediaSubtype === 'webp'
+                            template.mediaSubtype === 'webp'
                         "
                       />
                     </template>
@@ -231,7 +234,7 @@
                         :is-hovered="hoveredTemplate === template.name"
                         :is-video="
                           template.mediaType === 'video' ||
-                          template.mediaSubtype === 'webp'
+                            template.mediaSubtype === 'webp'
                         "
                       />
                     </template>
@@ -247,7 +250,7 @@
                         :is-hovered="hoveredTemplate === template.name"
                         :is-video="
                           template.mediaType === 'video' ||
-                          template.mediaSubtype === 'webp'
+                            template.mediaSubtype === 'webp'
                         "
                         :hover-zoom="
                           template.thumbnailVariant === 'zoomHover' ? 16 : 5
@@ -332,9 +335,7 @@
             <template #top>
               <CardTop ratio="square">
                 <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="h-full w-full animate-pulse bg-dialog-surface" />
                 </template>
               </CardTop>
             </template>
@@ -343,10 +344,8 @@
                 <div class="px-4 py-3">
                   <div
                     class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
-                  ></div>
-                  <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
-                  ></div>
+                  />
+                  <div class="h-4 animate-pulse rounded bg-dialog-surface" />
                 </div>
               </CardBottom>
             </template>
@@ -360,13 +359,19 @@
         ref="loadTrigger"
         class="mt-4 flex h-4 w-full items-center justify-center"
       >
-        <div v-if="isLoadingMore" class="text-sm text-muted">
+        <div
+          v-if="isLoadingMore"
+          class="text-sm text-muted"
+        >
           {{ $t('templateWorkflows.loadingMore', 'Loading more...') }}
         </div>
       </div>
 
       <!-- Results Summary -->
-      <div v-if="!isLoading" class="mt-6 px-6 text-sm text-muted">
+      <div
+        v-if="!isLoading"
+        class="mt-6 px-6 text-sm text-muted"
+      >
         {{
           $t('templateWorkflows.resultsCount', {
             count: filteredCount,

src/components/dialog/content/MissingNodesHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-full items-center justify-between p-4">
     <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-warning-background"></i>
+      <i class="icon-[lucide--triangle-alert] text-warning-background" />
       <p class="m-0 text-sm">
         {{
           isCloud

src/components/dialog/content/SignInContent.vue

@@ -20,28 +20,45 @@
           <span
             class="ml-1 cursor-pointer text-blue-500"
             @click="toggleState"
-            >{{
-              isSignIn ? t('auth.login.signUp') : t('auth.signup.signIn')
-            }}</span
-          >
+          >{{
+            isSignIn ? t('auth.login.signUp') : t('auth.signup.signIn')
+          }}</span>
         </p>
       </div>
 
-      <Message v-if="!isSecureContext" severity="warn" class="mb-4">
+      <Message
+        v-if="!isSecureContext"
+        severity="warn"
+        class="mb-4"
+      >
         {{ t('auth.login.insecureContextWarning') }}
       </Message>
 
       <!-- Form -->
-      <SignInForm v-if="isSignIn" @submit="signInWithEmail" />
+      <SignInForm
+        v-if="isSignIn"
+        @submit="signInWithEmail"
+      />
       <template v-else>
-        <Message v-if="userIsInChina" severity="warn" class="mb-4">
+        <Message
+          v-if="userIsInChina"
+          severity="warn"
+          class="mb-4"
+        >
           {{ t('auth.signup.regionRestrictionChina') }}
         </Message>
-        <SignUpForm v-else @submit="signUpWithEmail" />
+        <SignUpForm
+          v-else
+          @submit="signUpWithEmail"
+        />
       </template>
 
       <!-- Divider -->
-      <Divider align="center" layout="horizontal" class="my-8">
+      <Divider
+        align="center"
+        layout="horizontal"
+        class="my-8"
+      >
         <span class="text-muted">{{ t('auth.login.orContinueWith') }}</span>
       </Divider>
 
@@ -54,7 +71,7 @@
             variant="secondary"
             @click="signInWithGoogle"
           >
-            <i class="pi pi-google mr-2"></i>
+            <i class="pi pi-google mr-2" />
             {{
               isSignIn
                 ? t('auth.login.loginWithGoogle')
@@ -68,7 +85,7 @@
             variant="secondary"
             @click="signInWithGithub"
           >
-            <i class="pi pi-github mr-2"></i>
+            <i class="pi pi-github mr-2" />
             {{
               isSignIn
                 ? t('auth.login.loginWithGithub')
@@ -87,7 +104,7 @@
             src="/assets/images/comfy-logo-mono.svg"
             class="mr-2 h-5 w-5"
             :alt="$t('g.comfy')"
-          />
+          >
           {{ t('auth.login.useApiKey') }}
         </Button>
         <small class="text-center text-muted">
@@ -127,12 +144,13 @@
           target="_blank"
           class="cursor-pointer text-blue-500"
         >
-          {{ t('auth.login.privacyLink') }} </a
-        >.
+          {{ t('auth.login.privacyLink') }} </a>.
         {{ t('auth.login.questionsContactPrefix') }}
-        <a href="mailto:hello@comfy.org" class="cursor-pointer text-blue-500">
-          hello@comfy.org</a
-        >.
+        <a
+          href="mailto:hello@comfy.org"
+          class="cursor-pointer text-blue-500"
+        >
+          hello@comfy.org</a>.
       </p>
     </template>
   </div>

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

@@ -1,5 +1,8 @@
 <template>
-  <TabPanel value="Credits" class="credits-container h-full">
+  <TabPanel
+    value="Credits"
+    class="credits-container h-full"
+  >
     <!-- Legacy Design -->
     <div class="flex h-full flex-col">
       <h2 class="mb-2 text-2xl font-bold">
@@ -14,7 +17,11 @@
         </h3>
         <div class="flex items-center justify-between">
           <UserCredit text-class="text-3xl font-bold" />
-          <Skeleton v-if="loading" width="2rem" height="2rem" />
+          <Skeleton
+            v-if="loading"
+            width="2rem"
+            height="2rem"
+          />
           <Button
             v-else-if="isActiveSubscription"
             :loading="loading"
@@ -30,7 +37,10 @@
             height="1rem"
             class="text-xs"
           />
-          <div v-else-if="formattedLastUpdateTime" class="text-xs text-muted">
+          <div
+            v-else-if="formattedLastUpdateTime"
+            class="text-xs text-muted"
+          >
             {{ $t('credits.lastUpdated') }}: {{ formattedLastUpdateTime }}
           </div>
           <Button
@@ -58,14 +68,27 @@
 
       <template v-if="creditHistory.length > 0">
         <div class="grow">
-          <DataTable :value="creditHistory" :show-headers="false">
-            <Column field="title" :header="$t('g.name')">
+          <DataTable
+            :value="creditHistory"
+            :show-headers="false"
+          >
+            <Column
+              field="title"
+              :header="$t('g.name')"
+            >
               <template #body="{ data }">
-                <div class="text-sm font-medium">{{ data.title }}</div>
-                <div class="text-xs text-muted">{{ data.timestamp }}</div>
+                <div class="text-sm font-medium">
+                  {{ data.title }}
+                </div>
+                <div class="text-xs text-muted">
+                  {{ data.timestamp }}
+                </div>
               </template>
             </Column>
-            <Column field="amount" :header="$t('g.amount')">
+            <Column
+              field="amount"
+              :header="$t('g.amount')"
+            >
               <template #body="{ data }">
                 <div
                   :class="[
@@ -88,15 +111,24 @@
       <UsageLogsTable ref="usageLogsTableRef" />
 
       <div class="flex flex-row gap-2">
-        <Button variant="muted-textonly" @click="handleFaqClick">
+        <Button
+          variant="muted-textonly"
+          @click="handleFaqClick"
+        >
           <i class="pi pi-question-circle" />
           {{ $t('credits.faqs') }}
         </Button>
-        <Button variant="muted-textonly" @click="handleOpenPartnerNodesInfo">
+        <Button
+          variant="muted-textonly"
+          @click="handleOpenPartnerNodesInfo"
+        >
           <i class="pi pi-question-circle" />
           {{ $t('subscription.partnerNodesCredits') }}
         </Button>
-        <Button variant="muted-textonly" @click="handleMessageSupport">
+        <Button
+          variant="muted-textonly"
+          @click="handleMessageSupport"
+        >
           <i class="pi pi-comments" />
           {{ $t('credits.messageSupport') }}
         </Button>

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

@@ -1,10 +1,21 @@
 <template>
   <div>
-    <div v-if="loading" class="flex items-center justify-center p-8">
+    <div
+      v-if="loading"
+      class="flex items-center justify-center p-8"
+    >
       <ProgressSpinner />
     </div>
-    <div v-else-if="error" class="p-4">
-      <Message severity="error" :closable="false">{{ error }}</Message>
+    <div
+      v-else-if="error"
+      class="p-4"
+    >
+      <Message
+        severity="error"
+        :closable="false"
+      >
+        {{ error }}
+      </Message>
     </div>
     <DataTable
       v-else
@@ -17,7 +28,10 @@
       class="p-datatable-sm custom-datatable"
       @page="onPageChange"
     >
-      <Column field="event_type" :header="$t('credits.eventType')">
+      <Column
+        field="event_type"
+        :header="$t('credits.eventType')"
+      >
         <template #body="{ data }">
           <Badge
             :value="customerEventService.formatEventType(data.event_type)"
@@ -25,7 +39,10 @@
           />
         </template>
       </Column>
-      <Column field="details" :header="$t('credits.details')">
+      <Column
+        field="details"
+        :header="$t('credits.details')"
+      >
         <template #body="{ data }">
           <div class="event-details">
             <!-- Credits Added -->
@@ -58,12 +75,18 @@
           </div>
         </template>
       </Column>
-      <Column field="createdAt" :header="$t('credits.time')">
+      <Column
+        field="createdAt"
+        :header="$t('credits.time')"
+      >
         <template #body="{ data }">
           {{ customerEventService.formatDate(data.createdAt) }}
         </template>
       </Column>
-      <Column field="params" :header="$t('credits.additionalInfo')">
+      <Column
+        field="params"
+        :header="$t('credits.additionalInfo')"
+      >
         <template #body="{ data }">
           <Button
             v-if="customerEventService.hasAdditionalInfo(data)"

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

@@ -1,11 +1,19 @@
 <template>
-  <TabPanel value="User" class="user-settings-container h-full">
+  <TabPanel
+    value="User"
+    class="user-settings-container h-full"
+  >
     <div class="flex h-full flex-col">
-      <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
+      <h2 class="mb-2 text-2xl font-bold">
+        {{ $t('userSettings.title') }}
+      </h2>
       <Divider class="mb-3" />
 
       <!-- Normal User Panel -->
-      <div v-if="isLoggedIn" class="flex flex-col gap-2">
+      <div
+        v-if="isLoggedIn"
+        class="flex flex-col gap-2"
+      >
         <UserAvatar
           v-if="userPhotoUrl"
           :photo-url="userPhotoUrl"
@@ -58,8 +66,15 @@
           class="mt-4 h-8 w-8"
           style="--pc-spinner-color: #000"
         />
-        <div v-else class="mt-4 flex flex-col gap-2">
-          <Button class="w-32" variant="secondary" @click="handleSignOut">
+        <div
+          v-else
+          class="mt-4 flex flex-col gap-2"
+        >
+          <Button
+            class="w-32"
+            variant="secondary"
+            @click="handleSignOut"
+          >
             <i class="pi pi-sign-out" />
             {{ $t('auth.signOut.signOut') }}
           </Button>
@@ -75,7 +90,10 @@
       </div>
 
       <!-- Login Section -->
-      <div v-else class="flex flex-col gap-4">
+      <div
+        v-else
+        class="flex flex-col gap-4"
+      >
         <p class="text-smoke-600">
           {{ $t('auth.login.title') }}
         </p>

src/components/graph/GraphCanvasMenu.vue

@@ -1,13 +1,16 @@
 <template>
   <div>
-    <ZoomControlsModal :visible="isModalVisible" @close="hideModal" />
+    <ZoomControlsModal
+      :visible="isModalVisible"
+      @close="hideModal"
+    />
 
     <!-- Backdrop -->
     <div
       v-if="hasActivePopup"
       class="fixed inset-0 z-1200"
       @click="hideModal"
-    ></div>
+    />
 
     <ButtonGroup
       class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"

src/components/graph/widgets/TextPreviewWidget.vue

@@ -4,8 +4,11 @@
   >
     <div class="flex items-center gap-2">
       <div class="flex flex-1 items-center gap-2 break-all">
-        <span v-html="formattedText"></span>
-        <Skeleton v-if="isParentNodeExecuting" class="h-4! flex-1!" />
+        <span v-html="formattedText" />
+        <Skeleton
+          v-if="isParentNodeExecuting"
+          class="h-4! flex-1!"
+        />
       </div>
     </div>
   </div>

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -9,11 +9,13 @@
         :options="cameras"
         option-label="title"
         option-value="value"
-      >
-      </Select>
+      />
     </div>
 
-    <div v-if="showFOVButton" class="space-y-4">
+    <div
+      v-if="showFOVButton"
+      class="space-y-4"
+    >
       <label>{{ t('load3d.fov') }}</label>
       <Slider
         v-model="fov"

src/components/load3d/controls/viewer/ViewerExportControls.vue

@@ -5,8 +5,7 @@
       :options="exportFormats"
       option-label="label"
       option-value="value"
-    >
-    </Select>
+    />
 
     <Button
       variant="muted-textonly"

src/components/maskeditor/BrushCursor.vue

@@ -19,7 +19,7 @@
         display: gradientVisible ? 'block' : 'none',
         background: gradientBackground
       }"
-    ></div>
+    />
   </div>
 </template>
 

src/components/node/NodePreview.vue

@@ -7,7 +7,10 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
     :node-def="nodeDef"
     :position="position"
   />
-  <div v-else class="_sb_node_preview bg-component-node-background">
+  <div
+    v-else
+    class="_sb_node_preview bg-component-node-background"
+  >
     <div class="_sb_table">
       <div
         class="node_header mr-4 text-ellipsis"
@@ -20,7 +23,9 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         <div class="_sb_dot headdot pr-3" />
         {{ nodeDef.display_name }}
       </div>
-      <div class="_sb_preview_badge">{{ $t('g.preview') }}</div>
+      <div class="_sb_preview_badge">
+        {{ $t('g.preview') }}
+      </div>
 
       <!-- Node slot I/O -->
       <div
@@ -29,7 +34,10 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         class="_sb_row slot_row"
       >
         <div class="_sb_col">
-          <div v-if="slotInput" :class="['_sb_dot', slotInput.type]" />
+          <div
+            v-if="slotInput"
+            :class="['_sb_dot', slotInput.type]"
+          />
         </div>
         <div class="_sb_col">
           {{ slotInput ? slotInput.name : '' }}
@@ -44,7 +52,10 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
           {{ slotOutput ? slotOutput.name : '' }}
         </div>
         <div class="_sb_col">
-          <div v-if="slotOutput" :class="['_sb_dot', slotOutput.type]" />
+          <div
+            v-if="slotOutput"
+            :class="['_sb_dot', slotOutput.type]"
+          />
         </div>
       </div>
 
@@ -54,7 +65,9 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         :key="widgetInput.name"
         class="_sb_row _long_field"
       >
-        <div class="_sb_col _sb_arrow">&#x25C0;</div>
+        <div class="_sb_col _sb_arrow">
+          &#x25C0;
+        </div>
         <div
           class="_sb_col"
           :style="{
@@ -70,7 +83,9 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         >
           {{ truncateDefaultValue(widgetInput.default) }}
         </div>
-        <div class="_sb_col _sb_arrow">&#x25B6;</div>
+        <div class="_sb_col _sb_arrow">
+          &#x25B6;
+        </div>
       </div>
     </div>
     <div

src/components/sidebar/ComfyMenuButton.vue

@@ -64,7 +64,10 @@
         >
           {{ item.comfyCommand.keybinding.combo.toString() }}
         </span>
-        <i v-if="item.items" class="pi pi-angle-right ml-auto" />
+        <i
+          v-if="item.items"
+          class="pi pi-angle-right ml-auto"
+        />
       </a>
       <div
         v-else
@@ -72,7 +75,12 @@
         @click.stop="handleNodes2ToggleClick"
       >
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
-        <Tag severity="info" class="ml-2 text-xs">{{ $t('g.beta') }}</Tag>
+        <Tag
+          severity="info"
+          class="ml-2 text-xs"
+        >
+          {{ $t('g.beta') }}
+        </Tag>
         <ToggleSwitch
           v-model="nodes2Enabled"
           class="ml-4"

src/components/widget/SampleModelSelector.vue

@@ -1,7 +1,10 @@
 <template>
   <BaseModalLayout :content-title="$t('assetBrowser.checkpoints')">
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
+      <LeftSidePanel
+        v-model="selectedNavItem"
+        :nav-items="tempNavigation"
+      >
         <template #header-icon>
           <i class="text-neutral icon-[lucide--puzzle]" />
         </template>
@@ -12,12 +15,19 @@
     </template>
 
     <template #header>
-      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
+      <SearchBox
+        v-model="searchQuery"
+        size="lg"
+        class="max-w-[384px]"
+      />
     </template>
 
     <template #header-right-area>
       <div class="flex gap-2">
-        <Button variant="primary" @click="() => {}">
+        <Button
+          variant="primary"
+          @click="() => {}"
+        >
           <i class="icon-[lucide--upload]" />
           <span>{{ $t('g.upload') }}</span>
         </Button>
@@ -83,11 +93,15 @@
     <template #content>
       <!-- Card Examples -->
       <div :style="gridStyle">
-        <CardContainer v-for="i in 100" :key="i" size="regular">
+        <CardContainer
+          v-for="i in 100"
+          :key="i"
+          size="regular"
+        >
           <template #top>
             <CardTop ratio="landscape">
               <template #default>
-                <div class="h-full w-full bg-blue-500"></div>
+                <div class="h-full w-full bg-blue-500" />
               </template>
               <template #top-right>
                 <Button
@@ -110,14 +124,14 @@
             </CardTop>
           </template>
           <template #bottom>
-            <CardBottom></CardBottom>
+            <CardBottom />
           </template>
         </CardContainer>
       </div>
     </template>
 
     <template #rightPanel>
-      <RightSidePanel></RightSidePanel>
+      <RightSidePanel />
     </template>
   </BaseModalLayout>
 </template>

src/components/widget/panel/LeftSidePanel.vue

@@ -2,16 +2,22 @@
   <div class="flex h-full w-full flex-col bg-modal-panel-background">
     <PanelHeader>
       <template #icon>
-        <slot name="header-icon"></slot>
+        <slot name="header-icon" />
       </template>
-      <slot name="header-title"></slot>
+      <slot name="header-title" />
     </PanelHeader>
 
     <nav
       class="flex scrollbar-hide flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
     >
-      <template v-for="(item, index) in navItems" :key="index">
-        <div v-if="'items' in item" class="flex flex-col gap-2">
+      <template
+        v-for="(item, index) in navItems"
+        :key="index"
+      >
+        <div
+          v-if="'items' in item"
+          class="flex flex-col gap-2"
+        >
           <NavTitle
             v-model="collapsedGroups[item.title]"
             :title="item.title"
@@ -29,7 +35,10 @@
             </NavItem>
           </template>
         </div>
-        <div v-else class="flex flex-col gap-2">
+        <div
+          v-else
+          class="flex flex-col gap-2"
+        >
           <NavItem
             :icon="item.icon"
             :active="activeItem === item.id"

src/components/widget/panel/PanelHeader.vue

@@ -5,7 +5,7 @@
         <i class="text-neutral icon-[lucide--puzzle] text-base" />
       </slot>
       <h2 class="text-neutral text-base font-bold">
-        <slot></slot>
+        <slot />
       </h2>
     </div>
   </header>

src/components/widget/panel/RightSidePanel.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4">
-    <slot></slot>
+    <slot />
   </div>
 </template>

src/platform/assets/components/AssetGrid.vue

@@ -8,7 +8,10 @@
     :aria-colcount="-1"
     :aria-setsize="assets.length"
   >
-    <div v-if="loading" class="flex h-full items-center justify-center py-20">
+    <div
+      v-if="loading"
+      class="flex h-full items-center justify-center py-20"
+    >
       <i
         class="icon-[lucide--loader] size-12 animate-spin text-muted-foreground"
       />
@@ -21,7 +24,9 @@
       <h3 class="mb-2 text-lg font-medium">
         {{ $t('assetBrowser.noAssetsFound') }}
       </h3>
-      <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
+      <p class="text-sm">
+        {{ $t('assetBrowser.tryAdjustingFilters') }}
+      </p>
     </div>
     <VirtualGrid
       v-else

src/platform/assets/components/AssetsListItem.vue

@@ -40,8 +40,11 @@
           :src="previewUrl"
           :alt="previewAlt"
           class="size-full object-cover"
-        />
-        <div v-else class="flex size-full items-center justify-center">
+        >
+        <div
+          v-else
+          class="flex size-full items-center justify-center"
+        >
           <i
             aria-hidden="true"
             :class="
@@ -61,17 +64,24 @@
         v-if="$slots.primary || primaryText"
         class="text-xs leading-none text-text-primary"
       >
-        <slot name="primary">{{ primaryText }}</slot>
+        <slot name="primary">
+          {{ primaryText }}
+        </slot>
       </div>
       <div
         v-if="$slots.secondary || secondaryText"
         class="text-xs leading-none text-text-secondary"
       >
-        <slot name="secondary">{{ secondaryText }}</slot>
+        <slot name="secondary">
+          {{ secondaryText }}
+        </slot>
       </div>
     </div>
 
-    <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
+    <div
+      v-if="$slots.actions"
+      class="relative z-1 flex items-center gap-2"
+    >
       <slot name="actions" />
     </div>
   </div>

src/platform/cloud/onboarding/CloudLoginView.vue

@@ -11,20 +11,30 @@
           <span
             class="ml-1 cursor-pointer text-blue-500"
             @click="navigateToSignup"
-            >{{ t('auth.login.signUp') }}</span
-          >
+          >{{ t('auth.login.signUp') }}</span>
         </p>
       </div>
 
-      <Message v-if="!isSecureContext" severity="warn" class="mb-4">
+      <Message
+        v-if="!isSecureContext"
+        severity="warn"
+        class="mb-4"
+      >
         {{ t('auth.login.insecureContextWarning') }}
       </Message>
 
       <!-- Form -->
-      <CloudSignInForm :auth-error="authError" @submit="signInWithEmail" />
+      <CloudSignInForm
+        :auth-error="authError"
+        @submit="signInWithEmail"
+      />
 
       <!-- Divider -->
-      <Divider align="center" layout="horizontal" class="my-8">
+      <Divider
+        align="center"
+        layout="horizontal"
+        class="my-8"
+      >
         <span class="text-muted">{{ t('auth.login.orContinueWith') }}</span>
       </Divider>
 
@@ -36,7 +46,7 @@
           variant="secondary"
           @click="signInWithGoogle"
         >
-          <i class="pi pi-google mr-2"></i>
+          <i class="pi pi-google mr-2" />
           {{ t('auth.login.loginWithGoogle') }}
         </Button>
 
@@ -46,7 +56,7 @@
           variant="secondary"
           @click="signInWithGithub"
         >
-          <i class="pi pi-github mr-2"></i>
+          <i class="pi pi-github mr-2" />
           {{ t('auth.login.loginWithGithub') }}
         </Button>
       </div>
@@ -67,8 +77,7 @@
           target="_blank"
           class="cursor-pointer text-blue-400 no-underline"
         >
-          {{ t('auth.login.privacyLink') }} </a
-        >.
+          {{ t('auth.login.privacyLink') }} </a>.
       </p>
     </div>
   </div>

src/platform/cloud/onboarding/CloudSignupView.vue

@@ -13,23 +13,38 @@
           <span
             class="ml-1 cursor-pointer text-blue-500"
             @click="navigateToLogin"
-            >{{ t('auth.signup.signIn') }}</span
-          >
+          >{{ t('auth.signup.signIn') }}</span>
         </p>
       </div>
 
-      <Message v-if="!isSecureContext" severity="warn" class="mb-4">
+      <Message
+        v-if="!isSecureContext"
+        severity="warn"
+        class="mb-4"
+      >
         {{ t('auth.login.insecureContextWarning') }}
       </Message>
 
       <!-- Form -->
-      <Message v-if="userIsInChina" severity="warn" class="mb-4">
+      <Message
+        v-if="userIsInChina"
+        severity="warn"
+        class="mb-4"
+      >
         {{ t('auth.signup.regionRestrictionChina') }}
       </Message>
-      <SignUpForm v-else :auth-error="authError" @submit="signUpWithEmail" />
+      <SignUpForm
+        v-else
+        :auth-error="authError"
+        @submit="signUpWithEmail"
+      />
 
       <!-- Divider -->
-      <Divider align="center" layout="horizontal" class="my-8">
+      <Divider
+        align="center"
+        layout="horizontal"
+        class="my-8"
+      >
         <span class="text-muted">{{ t('auth.login.orContinueWith') }}</span>
       </Divider>
 
@@ -41,7 +56,7 @@
           variant="secondary"
           @click="signInWithGoogle"
         >
-          <i class="pi pi-google mr-2"></i>
+          <i class="pi pi-google mr-2" />
           {{ t('auth.signup.signUpWithGoogle') }}
         </Button>
 
@@ -51,7 +66,7 @@
           variant="secondary"
           @click="signInWithGithub"
         >
-          <i class="pi pi-github mr-2"></i>
+          <i class="pi pi-github mr-2" />
           {{ t('auth.signup.signUpWithGithub') }}
         </Button>
       </div>
@@ -72,8 +87,7 @@
           target="_blank"
           class="cursor-pointer text-blue-400 no-underline"
         >
-          {{ t('auth.login.privacyLink') }} </a
-        >.
+          {{ t('auth.login.privacyLink') }} </a>.
         <p class="mt-2">
           {{ t('cloudWaitlist_questionsText') }}
           <a
@@ -82,8 +96,7 @@
             target="_blank"
             rel="noopener noreferrer"
           >
-            {{ t('cloudWaitlist_contactLink') }}</a
-          >.
+            {{ t('cloudWaitlist_contactLink') }}</a>.
         </p>
       </div>
     </div>

src/platform/cloud/onboarding/UserCheckView.vue

@@ -2,10 +2,19 @@
   <CloudLoginViewSkeleton v-if="skeletonType === 'login'" />
   <CloudSurveyViewSkeleton v-else-if="skeletonType === 'survey'" />
   <CloudWaitlistViewSkeleton v-else-if="skeletonType === 'waitlist'" />
-  <div v-else-if="error" class="flex h-full items-center justify-center p-8">
+  <div
+    v-else-if="error"
+    class="flex h-full items-center justify-center p-8"
+  >
     <div class="max-w-[100vw] p-2 text-center lg:w-96">
-      <p class="mb-4 text-red-500">{{ errorMessage }}</p>
-      <Button :loading="isRetrying" class="w-full" @click="handleRetry">
+      <p class="mb-4 text-red-500">
+        {{ errorMessage }}
+      </p>
+      <Button
+        :loading="isRetrying"
+        class="w-full"
+        @click="handleRetry"
+      >
         {{
           isRetrying
             ? $t('cloudOnboarding.retrying')
@@ -14,7 +23,10 @@
       </Button>
     </div>
   </div>
-  <div v-else class="flex items-center justify-center">
+  <div
+    v-else
+    class="flex items-center justify-center"
+  >
     <ProgressSpinner class="h-8 w-8" />
   </div>
 </template>

src/platform/cloud/onboarding/components/CloudTemplate.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex">
-    <BaseViewTemplate dark class="flex-1">
+    <BaseViewTemplate
+      dark
+      class="flex-1"
+    >
       <template #header>
         <CloudLogo />
       </template>
@@ -19,10 +22,13 @@
         playsinline
         :poster="videoPoster"
       >
-        <source :src="videoSrc" type="video/mp4" />
+        <source
+          :src="videoSrc"
+          type="video/mp4"
+        >
       </video>
 
-      <div class="absolute inset-0 h-full w-full bg-black/30"></div>
+      <div class="absolute inset-0 h-full w-full bg-black/30" />
 
       <!-- Optional Overlay for better visual -->
       <div

src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue

@@ -2,41 +2,99 @@
   <div class="flex h-full items-center justify-center p-8">
     <div class="max-w-[100vw] lg:w-96">
       <div class="rounded-lg bg-[#2d2e32] p-4">
-        <Skeleton width="60%" height="1.125rem" class="mb-2" />
-        <Skeleton width="90%" height="1rem" class="mb-2" />
-        <Skeleton width="80%" height="1rem" />
+        <Skeleton
+          width="60%"
+          height="1.125rem"
+          class="mb-2"
+        />
+        <Skeleton
+          width="90%"
+          height="1rem"
+          class="mb-2"
+        />
+        <Skeleton
+          width="80%"
+          height="1rem"
+        />
       </div>
 
       <div class="mt-6 mb-8 flex flex-col gap-4">
-        <Skeleton width="45%" height="1.5rem" class="my-0" />
+        <Skeleton
+          width="45%"
+          height="1.5rem"
+          class="my-0"
+        />
         <div class="flex items-center">
-          <Skeleton width="25%" height="1rem" class="mr-1" />
-          <Skeleton width="20%" height="1rem" />
+          <Skeleton
+            width="25%"
+            height="1rem"
+            class="mr-1"
+          />
+          <Skeleton
+            width="20%"
+            height="1rem"
+          />
         </div>
       </div>
 
       <div class="mb-8">
-        <Skeleton width="20%" height="1rem" class="mb-2" />
-        <Skeleton width="100%" height="2.5rem" class="mb-4" />
-        <Skeleton width="25%" height="1rem" class="mb-4" />
-        <Skeleton width="100%" height="2.5rem" class="mb-6" />
-        <Skeleton width="80%" height="1rem" class="mb-4" />
-        <Skeleton width="100%" height="2.5rem" />
+        <Skeleton
+          width="20%"
+          height="1rem"
+          class="mb-2"
+        />
+        <Skeleton
+          width="100%"
+          height="2.5rem"
+          class="mb-4"
+        />
+        <Skeleton
+          width="25%"
+          height="1rem"
+          class="mb-4"
+        />
+        <Skeleton
+          width="100%"
+          height="2.5rem"
+          class="mb-6"
+        />
+        <Skeleton
+          width="80%"
+          height="1rem"
+          class="mb-4"
+        />
+        <Skeleton
+          width="100%"
+          height="2.5rem"
+        />
       </div>
 
       <div class="my-8 flex items-center">
-        <div class="flex-1 border-t border-gray-300"></div>
-        <Skeleton width="30%" height="1rem" class="mx-4" />
-        <div class="flex-1 border-t border-gray-300"></div>
+        <div class="flex-1 border-t border-gray-300" />
+        <Skeleton
+          width="30%"
+          height="1rem"
+          class="mx-4"
+        />
+        <div class="flex-1 border-t border-gray-300" />
       </div>
 
       <div class="flex flex-col gap-6">
-        <Skeleton width="100%" height="2.5rem" />
-        <Skeleton width="100%" height="2.5rem" />
+        <Skeleton
+          width="100%"
+          height="2.5rem"
+        />
+        <Skeleton
+          width="100%"
+          height="2.5rem"
+        />
       </div>
 
       <div class="mt-5">
-        <Skeleton width="70%" height="0.875rem" />
+        <Skeleton
+          width="70%"
+          height="0.875rem"
+        />
       </div>
     </div>
   </div>

src/renderer/extensions/vueNodes/components/LivePreview.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="imageUrl" class="flex h-full min-h-16 w-full min-w-16 flex-col">
+  <div
+    v-if="imageUrl"
+    class="flex h-full min-h-16 w-full min-w-16 flex-col"
+  >
     <!-- Image Container -->
     <div
       class="relative h-88 w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
@@ -10,7 +13,9 @@
         class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
       >
         <i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
-        <p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
+        <p class="text-xs text-smoke-400">
+          {{ $t('g.imageFailedToLoad') }}
+        </p>
       </div>
 
       <!-- Main Image -->
@@ -21,7 +26,7 @@
         class="pointer-events-none h-full w-full object-contain object-center"
         @load="handleImageLoad"
         @error="handleImageError"
-      />
+      >
     </div>
 
     <!-- Image Dimensions -->

src/views/UserSelectView.vue

@@ -4,7 +4,9 @@
       id="comfy-user-selection"
       class="relative min-w-84 rounded-lg bg-(--comfy-menu-bg) p-5 px-10 shadow-lg"
     >
-      <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
+      <h1 class="my-2.5 mb-7 font-normal">
+        ComfyUI
+      </h1>
       <div class="flex w-full flex-col items-center">
         <div class="flex w-full flex-col gap-2">
           <label for="new-user-input">{{ $t('userSelect.newUser') }}:</label>
@@ -17,9 +19,7 @@
         </div>
         <Divider />
         <div class="flex w-full flex-col gap-2">
-          <label for="existing-user-select"
-            >{{ $t('userSelect.existingUser') }}:</label
-          >
+          <label for="existing-user-select">{{ $t('userSelect.existingUser') }}:</label>
           <Select
             v-model="selectedUser"
             class="w-full"
@@ -29,12 +29,17 @@
             :placeholder="$t('userSelect.selectUser')"
             :disabled="createNewUser"
           />
-          <Message v-if="error" severity="error">
+          <Message
+            v-if="error"
+            severity="error"
+          >
             {{ error }}
           </Message>
         </div>
         <footer class="mt-5">
-          <Button @click="login">{{ $t('userSelect.next') }}</Button>
+          <Button @click="login">
+            {{ $t('userSelect.next') }}
+          </Button>
         </footer>
       </div>
     </main>

src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue

@@ -12,7 +12,10 @@
       <ProgressSpinner class="mb-2 h-8 w-8" />
       {{ $t('manager.loadingVersions') }}
     </div>
-    <div v-else-if="versionOptions.length === 0" class="py-2">
+    <div
+      v-else-if="versionOptions.length === 0"
+      class="py-2"
+    >
       <NoResultsPlaceholder
         :title="$t('g.noResultsFound')"
         :message="$t('manager.tryAgainLater')"
@@ -36,7 +39,7 @@
         <div class="flex w-full items-center justify-between p-1">
           <div class="flex items-center gap-2">
             <template v-if="slotProps.option.value === 'nightly'">
-              <div class="w-4"></div>
+              <div class="w-4" />
             </template>
             <template v-else>
               <i
@@ -47,7 +50,11 @@
                 }"
                 class="icon-[lucide--triangle-alert] text-warning-background"
               />
-              <VerifiedIcon v-else :size="20" class="relative right-0.5" />
+              <VerifiedIcon
+                v-else
+                :size="20"
+                class="relative right-0.5"
+              />
             </template>
             <span>{{ slotProps.option.label }}</span>
           </div>

src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex py-1.5 text-xs">
-    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}</div>
+    <div class="w-1/3 truncate pr-2 text-muted">
+      {{ label }}
+    </div>
     <div class="w-2/3">
       <slot>{{ value }}</slot>
     </div>

src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue

@@ -2,8 +2,11 @@
   <div
     class="flex min-h-12 items-center justify-between px-4 py-2 text-xs leading-3 font-medium text-muted"
   >
-    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
-      <i class="pi pi-download text-muted"></i>
+    <div
+      v-if="nodePack.downloads"
+      class="flex items-center gap-1.5"
+    >
+      <i class="pi pi-download text-muted" />
       <span>{{ formattedDownloads }}</span>
     </div>
     <PackInstallButton
@@ -13,7 +16,10 @@
       :has-conflict="hasConflicts"
       :conflict-info="conflictInfo"
     />
-    <PackEnableToggle v-else :node-pack="nodePack" />
+    <PackEnableToggle
+      v-else
+      :node-pack="nodePack"
+    />
   </div>
 </template>