style: Align card styles with Designs

Author: DrJKL

src/locales/en/main.json

@@ -124,6 +124,7 @@
     "searchKeybindings": "Search Keybindings",
     "searchExtensions": "Search Extensions",
     "search": "Search",
+    "searchPlaceholder": "Search...",
     "noResultsFound": "No Results Found",
     "searchFailedMessage": "We couldn't find any settings matching your search. Try adjusting your search terms.",
     "noTasksFound": "No Tasks Found",
@@ -2091,7 +2092,6 @@
     "connectionError": "Please check your connection and try again",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
-    "searchAssetsPlaceholder": "Type to search...",
     "uploadModel": "Import model",
     "uploadModelFromCivitai": "Import a model from Civitai",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",

src/platform/assets/components/AssetBadgeGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-1">
+  <div class="absolute left-2 bottom-2 flex flex-wrap justify-end gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"

src/platform/assets/components/AssetBrowserModal.vue

@@ -26,7 +26,7 @@
           v-model="searchQuery"
           :autofocus="true"
           size="lg"
-          :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
+          :placeholder="$t('g.searchPlaceholder')"
           class="max-w-96"
         />
         <IconTextButton

src/platform/assets/components/AssetCard.vue

@@ -4,19 +4,25 @@
     data-component-id="AssetCard"
     :data-asset-id="asset.id"
     v-bind="elementProps"
-    :class="cardClasses"
+    :class="
+      cn(
+        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2',
+        interactive &&
+          'group appearance-none bg-transparent m-0 outline-none cursor-pointer text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
+      )
+    "
     @click="interactive && $emit('select', asset)"
     @keydown.enter="interactive && $emit('select', asset)"
   >
     <div class="relative aspect-square w-full overflow-hidden rounded-xl">
       <img
         v-if="shouldShowImage"
         :src="asset.preview_url"
-        class="h-full w-full object-contain"
+        class="size-full object-contain"
       />
       <div
         v-else
-        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
+        class="flex size-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
@@ -74,11 +80,15 @@ import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBro
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const { asset, interactive } = defineProps<{
   asset: AssetDisplayItem
   interactive?: boolean
 }>()
 
+defineEmits<{
+  select: [asset: AssetDisplayItem]
+}>()
+
 const settingStore = useSettingStore()
 
 const titleId = useId()
@@ -89,34 +99,14 @@ const tooltipDelay = computed<number>(() =>
 )
 
 const { error } = useImage({
-  src: props.asset.preview_url ?? '',
-  alt: props.asset.name
+  src: asset.preview_url ?? '',
+  alt: asset.name
 })
 
-const shouldShowImage = computed(() => props.asset.preview_url && !error.value)
-
-const cardClasses = computed(() => {
-  const base = cn(
-    'rounded-xl overflow-hidden transition-all duration-200 bg-modal-card-background'
-  )
-
-  if (!props.interactive) {
-    return base
-  }
-
-  return cn(
-    base,
-    'group',
-    'appearance-none bg-transparent p-0 m-0',
-    'font-inherit text-inherit outline-none cursor-pointer text-left',
-    'hover:bg-secondary-background',
-    'border-none',
-    'focus:outline-solid outline-azure-600 outline-4'
-  )
-})
+const shouldShowImage = computed(() => asset.preview_url && !error.value)
 
 const elementProps = computed(() =>
-  props.interactive
+  interactive
     ? {
         type: 'button',
         'aria-labelledby': titleId,
@@ -127,8 +117,4 @@ const elementProps = computed(() =>
         'aria-describedby': descId
       }
 )
-
-defineEmits<{
-  select: [asset: AssetDisplayItem]
-}>()
 </script>

src/platform/assets/components/AssetGrid.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     data-component-id="AssetGrid"
-    :style="gridStyle"
+    :class="
+      cn('grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-4 p-2')
+    "
     role="grid"
     :aria-label="$t('assetBrowser.assetCollection')"
     :aria-rowcount="-1"
@@ -34,19 +36,17 @@
         :key="asset.id"
         :asset="asset"
         :interactive="true"
-        role="gridcell"
         @select="$emit('assetSelect', $event)"
       />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
 
 import AssetCard from '@/platform/assets/components/AssetCard.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { createGridStyle } from '@/utils/gridUtil'
 
 defineProps<{
   assets: AssetDisplayItem[]
@@ -56,7 +56,4 @@ defineProps<{
 defineEmits<{
   assetSelect: [asset: AssetDisplayItem]
 }>()
-
-// Use same grid style as BaseModalLayout
-const gridStyle = computed(() => createGridStyle())
 </script>

src/utils/gridUtil.ts

@@ -14,6 +14,8 @@ interface GridOptions {
 }
 
 /**
+ * @deprecated Just use tailwind utilities directly.
+ * TODO: Create a common grid layout component if needed.
  * Creates CSS grid styles for responsive grid layouts
  * @param options Grid configuration options
  * @returns CSS properties object for grid styling