From 0c611e89747771a3780804777ef717da2ddc5af0 Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Wed, 17 Sep 2025 12:19:41 -0700
Subject: [PATCH] [fix] use cn() to avoid having to safelist icons

---
 .../assets/components/AssetBrowserModal.stories.ts     |  8 ++++----
 src/platform/assets/components/AssetBrowserModal.vue   |  3 ++-
 src/platform/assets/components/AssetCard.vue           |  6 +++---
 src/platform/assets/components/AssetFilterBar.vue      |  2 +-
 src/platform/assets/components/AssetGrid.vue           | 10 +++++++---
 tailwind.config.ts                                     | 10 ----------
 6 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
index acc93181d..feadf58a7 100644
--- a/src/platform/assets/components/AssetBrowserModal.stories.ts
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -51,7 +51,7 @@ export const Default: Story = {
     nodeType: 'CheckpointLoaderSimple',
     inputName: 'ckpt_name',
     currentValue: '',
-    showLeftPanel: false
+    showLeftPanel: true
   },
   render: (args) => ({
     components: { AssetBrowserModal },
@@ -71,7 +71,7 @@ export const Default: Story = {
       }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -112,7 +112,7 @@ export const SingleAssetType: Story = {
       return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -155,7 +155,7 @@ export const NoLeftPanel: Story = {
       return { ...args, onAssetSelect, onClose, assets: mockAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index de05f437d..a45f886ac 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -12,7 +12,7 @@
         :nav-items="availableCategories"
       >
         <template #header-icon>
-          <i-lucide:folder class="size-4" />
+          <div :class="cn('icon-[lucide--folder]', 'size-4')" />
         </template>
         <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
       </LeftSidePanel>
@@ -46,6 +46,7 @@ import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
   nodeType?: string
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index e379099c1..62aaa82b4 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -68,15 +68,15 @@
         "
       >
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
-          <i-lucide:star class="size-3" />
+          <div :class="cn('icon-[lucide--star]', 'size-3')" />
           {{ asset.stats.stars }}
         </span>
         <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
-          <i-lucide:download class="size-3" />
+          <div :class="cn('icon-[lucide--download]', 'size-3')" />
           {{ asset.stats.downloadCount }}
         </span>
         <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
-          <i-lucide:clock class="size-3" />
+          <div :class="cn('icon-[lucide--clock]', 'size-3')" />
           {{ asset.stats.formattedDate }}
         </span>
       </div>
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 1f3295b43..6f20db7fb 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -30,7 +30,7 @@
         @update:model-value="handleFilterChange"
       >
         <template #icon>
-          <i-lucide:arrow-up-down class="size-3" />
+          <div :class="cn('icon-[lucide--arrow-up-down]', 'size-3')" />
         </template>
       </SingleSelect>
     </div>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 35122fd52..c2df0742f 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -27,7 +27,7 @@
         )
       "
     >
-      <i-lucide:search class="size-10 mb-4" />
+      <div :class="cn('icon-[lucide--search]', 'size-10 mb-4')" />
       <h3 class="text-lg font-medium mb-2">
         {{ $t('assetBrowser.noAssetsFound') }}
       </h3>
@@ -39,9 +39,13 @@
       v-if="loading"
       class="col-span-full flex items-center justify-center py-16"
     >
-      <i-lucide:loader
+      <div
         :class="
-          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
+          cn(
+            'icon-[lucide--loader-circle]',
+            'size-6 animate-spin',
+            'text-stone-300 dark-theme:text-stone-200'
+          )
         "
       />
     </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 98c7c4ea0..e5e39987b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,16 +6,6 @@ import { iconCollection } from './build/customIconCollection'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
-  safelist: [
-    'icon-[lucide--folder]',
-    'icon-[lucide--package]',
-    'icon-[lucide--image]',
-    'icon-[lucide--video]',
-    'icon-[lucide--box]',
-    'icon-[lucide--audio-waveform]',
-    'icon-[lucide--message-circle]'
-  ],
-
   plugins: [
     addDynamicIconSelectors({
       iconSets: {