Merge branch 'main' into select-node-after-drag

Author: Myestery

.github/workflows/update-locales.yaml

@@ -14,6 +14,9 @@ jobs:
     if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
+    - name: Checkout repository
+      uses: actions/checkout@v5
+    
     - name: Setup Frontend
       uses: ./.github/actions/setup-frontend
 

.github/workflows/update-playwright-expectations.yaml

@@ -3,42 +3,58 @@ name: Update Playwright Expectations
 
 on:
   pull_request:
-    types: [ labeled ]
+    types: [labeled]
+  issue_comment:
+    types: [created]
 
 jobs:
   test:
     runs-on: ubuntu-latest
-    if: github.event.label.name == 'New Browser Test Expectations'
+    if: >
+      ( github.event_name == 'pull_request' && github.event.label.name == 'New Browser Test Expectations' ) ||
+      ( github.event.issue.pull_request && 
+        github.event_name == 'issue_comment' &&
+        (
+          github.event.comment.author_association == 'OWNER' ||
+          github.event.comment.author_association == 'MEMBER' ||
+          github.event.comment.author_association == 'COLLABORATOR'
+        ) &&
+        startsWith(github.event.comment.body, '/update-playwright') )
     steps:
-    - name: Checkout workflow repo
-      uses: actions/checkout@v5
-    - name: Setup Frontend
-      uses: ./.github/actions/setup-frontend
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-    - name: Run Playwright tests and update snapshots
-      id: playwright-tests
-      run: pnpm exec playwright test --update-snapshots
-      continue-on-error: true
-      working-directory: ComfyUI_frontend
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report
-        path: ComfyUI_frontend/playwright-report/
-        retention-days: 30
-    - name: Debugging info
-      run: |
-        echo "Branch: ${{ github.head_ref }}"
-        git status
-      working-directory: ComfyUI_frontend
-    - name: Commit updated expectations
-      run: |
-        git config --global user.name 'github-actions'
-        git config --global user.email '[email protected]'
-        git fetch origin ${{ github.head_ref }}
-        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
-        git add browser_tests
-        git commit -m "[automated] Update test expectations"
-        git push origin HEAD:${{ github.head_ref }}
-      working-directory: ComfyUI_frontend
+      - name: Initial Checkout
+        uses: actions/checkout@v5
+      - name: Pull Request Checkout
+        run: gh pr checkout ${{ github.event.issue.number }}
+        if: github.event.issue.pull_request && github.event_name == 'issue_comment'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Setup Frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
+      - name: Run Playwright tests and update snapshots
+        id: playwright-tests
+        run: pnpm exec playwright test --update-snapshots
+        continue-on-error: true
+        working-directory: ComfyUI_frontend
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30
+      - name: Debugging info
+        run: |
+          echo "PR: ${{ github.event.issue.number }}"
+          git status
+        working-directory: ComfyUI_frontend
+      - name: Commit updated expectations
+        run: |
+          git config --global user.name 'github-actions'
+          git config --global user.email '[email protected]'
+          git add browser_tests
+          git diff --cached --quiet || git commit -m "[automated] Update test expectations"
+          git push
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        working-directory: ComfyUI_frontend

.storybook/README.md

@@ -211,18 +211,17 @@ This Storybook setup includes:
 
 ## Icon Usage in Storybook
 
-In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.  
+In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.  
 
 **Example:**
 
 ```vue
 <script setup lang="ts">
-import { Trophy, Settings } from 'lucide-vue-next'
 </script>
 
 <template>
-  <Trophy :size="16" class="text-neutral" />
-  <Settings :size="16" class="text-neutral" />
+  <i class="icon-[lucide--trophy] text-neutral size-4" />
+  <i class="icon-[lucide--settings] text-neutral size-4" />
 </template>
 ```
 

.stylelintrc.json

@@ -7,15 +7,15 @@
     }
   ],
   "rules": {
-    "import-notation": "url",
+    "import-notation": "string",
     "font-family-no-missing-generic-family-keyword": true,
-    "declaration-block-no-redundant-longhand-properties": true,
     "declaration-property-value-no-unknown": [
       true,
       {
         "ignoreProperties": {
           "speak": ["none"],
-          "app-region": ["drag", "no-drag"]
+          "app-region": ["drag", "no-drag"],
+          "/^(width|height)$/": ["/^v-bind/"]
         }
       }
     ],
@@ -35,7 +35,7 @@
     "selector-max-type": 2,
     "declaration-block-no-duplicate-properties": true,
     "block-no-empty": true,
-    "no-descending-specificity": true,
+    "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
     "at-rule-no-unknown": [
       true,
@@ -57,7 +57,8 @@
       true,
       {
         "ignoreFunctions": [
-          "theme"
+          "theme",
+          "v-bind"
         ]
       }
     ]

CONTRIBUTING.md

@@ -255,7 +255,7 @@ pnpm format
 The project supports three types of icons, all with automatic imports (no manual imports needed):
 
 1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
+2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
 Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.

apps/desktop-ui/src/components/install/GpuPicker.vue

@@ -53,7 +53,7 @@
           :value="$t('install.gpuPicker.recommended')"
           class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
         />
-        <i-lucide:badge-check class="text-neutral-300 text-lg" />
+        <i class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
       </div>
     </div>
 

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -286,6 +286,12 @@ const onFocus = async () => {
     .p-accordionheader {
       @apply rounded-t-xl rounded-b-none;
     }
+
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
   }
 
   .p-accordioncontent {
@@ -302,13 +308,5 @@ const onFocus = async () => {
       content: '\e933';
     }
   }
-
-  .p-accordionpanel-active {
-    .p-accordionheader-toggle-icon {
-      &::before {
-        content: '\e902';
-      }
-    }
-  }
 }
 </style>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -65,12 +65,12 @@ onUnmounted(() => electron.Validation.dispose())
 
 .download-bg::before {
   @apply m-0 absolute text-muted;
-  font-family: 'primeicons';
+  font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;
   speak: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -186,12 +186,12 @@ onUnmounted(() => electron.Validation.dispose())
 
 .backspan::before {
   @apply m-0 absolute text-muted;
-  font-family: 'primeicons';
+  font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;
   speak: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

apps/desktop-ui/src/views/ServerStartView.vue

@@ -18,16 +18,16 @@
         style="
           background: radial-gradient(
             ellipse 800px 600px at center,
-            rgba(23, 23, 23, 0.95) 0%,
-            rgba(23, 23, 23, 0.93) 10%,
-            rgba(23, 23, 23, 0.9) 20%,
-            rgba(23, 23, 23, 0.85) 30%,
-            rgba(23, 23, 23, 0.75) 40%,
-            rgba(23, 23, 23, 0.6) 50%,
-            rgba(23, 23, 23, 0.4) 60%,
-            rgba(23, 23, 23, 0.2) 70%,
-            rgba(23, 23, 23, 0.1) 80%,
-            rgba(23, 23, 23, 0.05) 90%,
+            rgb(23 23 23 / 0.95) 0%,
+            rgb(23 23 23 / 0.93) 10%,
+            rgb(23 23 23 / 0.9) 20%,
+            rgb(23 23 23 / 0.85) 30%,
+            rgb(23 23 23 / 0.75) 40%,
+            rgb(23 23 23 / 0.6) 50%,
+            rgb(23 23 23 / 0.4) 60%,
+            rgb(23 23 23 / 0.2) 70%,
+            rgb(23 23 23 / 0.1) 80%,
+            rgb(23 23 23 / 0.05) 90%,
             transparent 100%
           );
         "