Updates: More Modal Modification (#8256)

Refactors modal dialog layouts for improved flexibility and consistency.

**Changes:**
- Add dedicated slot for left panel header title with dynamic
content/icons
- Consolidate side panel rendering within `BaseModalLayout`
- Remove redundant `PanelHeader` and `RightSidePanel` components
- Apply `select-none` to text elements to prevent accidental selection

---------

Co-authored-by: Amp <amp@ampcode.com>

src/platform/assets/components/AssetBadgeGroup.vue

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

src/platform/assets/components/AssetBrowserModal.vue

@@ -7,19 +7,18 @@
     :right-panel-title="$t('assetBrowser.modelInfo.title')"
     @close="handleClose"
   >
+    <template v-if="shouldShowLeftPanel" #leftPanelHeaderTitle>
+      <i class="icon-[comfy--ai-model] size-4" />
+      <h2 class="flex-auto select-none text-base font-semibold text-nowrap">
+        {{ displayTitle }}
+      </h2>
+    </template>
     <template v-if="shouldShowLeftPanel" #leftPanel>
       <LeftSidePanel
         v-model="selectedNavItem"
         data-component-id="AssetBrowserModal-LeftSidePanel"
         :nav-items
-      >
-        <template #header-icon>
-          <div class="icon-[comfy--ai-model] size-4" />
-        </template>
-        <template #header-title>
-          <span class="capitalize">{{ displayTitle }}</span>
-        </template>
-      </LeftSidePanel>
+      />
     </template>
 
     <template #header>

src/platform/assets/components/AssetCard.vue

@@ -7,7 +7,7 @@
     :tabindex="interactive ? 0 : -1"
     :class="
       cn(
-        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
+        'select-none rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
         interactive &&
           'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4',
         focused && 'bg-secondary-background outline-solid'

src/platform/assets/components/AssetFilterBar.vue

@@ -79,8 +79,9 @@ const fileFormats = ref<SelectOption[]>([])
 const baseModels = ref<SelectOption[]>([])
 const sortBy = ref<SortOption>('recent')
 
-const { availableFileFormats, availableBaseModels } =
-  useAssetFilterOptions(assets)
+const { availableFileFormats, availableBaseModels } = useAssetFilterOptions(
+  () => assets
+)
 
 const emit = defineEmits<{
   filterChange: [filters: FilterState]

src/platform/assets/components/AssetGrid.vue

@@ -15,7 +15,7 @@
     </div>
     <div
       v-else-if="assets.length === 0"
-      class="flex h-full flex-col items-center justify-center py-16 text-muted-foreground"
+      class="flex h-full select-none flex-col items-center justify-center py-16 text-muted-foreground"
     >
       <i class="mb-4 icon-[lucide--search] size-10" />
       <h3 class="mb-2 text-lg font-medium">

src/platform/assets/components/modelInfo/ModelInfoField.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 px-4 py-2 text-sm text-base-foreground">
     <div class="flex items-center justify-between relative">
-      <span>{{ label }}</span>
+      <span class="select-none">{{ label }}</span>
       <slot name="label-action" />
     </div>
     <slot />

src/platform/assets/components/modelInfo/ModelInfoPanel.vue

@@ -5,7 +5,7 @@
   >
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="text-xs uppercase font-inter select-none">
           {{ t('assetBrowser.modelInfo.basicInfo') }}
         </span>
       </template>
@@ -58,7 +58,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="text-xs uppercase font-inter select-none">
           {{ t('assetBrowser.modelInfo.modelTagging') }}
         </span>
       </template>
@@ -134,7 +134,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="text-xs uppercase font-inter select-none">
           {{ t('assetBrowser.modelInfo.modelDescription') }}
         </span>
       </template>