mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 00:50:01 +00:00
feat: Node Library sidebar and V2 Search dialog UI/UX updates (#9085)
## Summary Implement 11 Figma design discrepancies for the Node Library sidebar and V2 Node Search dialog, aligning the UI with the [Toolbox Figma design](https://www.figma.com/design/xMFxCziXJe6Denz4dpDGTq/Toolbox?node-id=2074-21394&m=dev). ## Changes - **What**: Sidebar: reorder tabs (All/Essentials/Blueprints), rename Custom→Blueprints, uppercase section headers, chevron-left of folder icon, bookmark-on-hover for node rows, filter dropdown with checkbox items, sort labels (Categorized/A-Z) with label-left/check-right layout, hide section headers in A-Z mode. Search dialog: expand filter chips from 3→6, add Recents and source categories to sidebar, remove "Filter by" label. Pull foundation V2 components from merged PR #8548. - **Dependencies**: Depends on #8987 (V2 Node Search) and #8548 (NodeLibrarySidebarTabV2) ## Review Focus - Filter dropdown (`filterOptions`) is UI-scaffolded but not yet wired to filtering logic (pending V2 integration) - "Recents" category currently returns frequency-based results as placeholder until a usage-tracking store is implemented - Pre-existing type errors from V2 PR dependencies not in the base commit (SearchBoxV2, usePerTabState, TextTicker, getProviderIcon, getLinkTypeColor, SidebarContainerKey) are expected and will resolve when rebased onto main after parent PRs land ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9085-feat-Node-Library-sidebar-and-V2-Search-dialog-Figma-design-improvements-30f6d73d36508175bf72d716f5904476) by [Unito](https://www.unito.io) --------- Co-authored-by: Yourz <crazilou@vip.qq.com> Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
@@ -23,11 +23,8 @@ import type {
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { NodeSearchService } from '@/services/nodeSearchService'
|
||||
import { useSubgraphStore } from '@/stores/subgraphStore'
|
||||
import {
|
||||
CORE_NODE_MODULES,
|
||||
getEssentialsCategory,
|
||||
getNodeSource
|
||||
} from '@/types/nodeSource'
|
||||
import { ESSENTIALS_CATEGORY_CANONICAL } from '@/constants/essentialsNodes'
|
||||
import { CORE_NODE_MODULES, getNodeSource } from '@/types/nodeSource'
|
||||
import type { NodeSource } from '@/types/nodeSource'
|
||||
import type { TreeNode } from '@/types/treeExplorerTypes'
|
||||
import type { FuseSearchable, SearchAuxScore } from '@/utils/fuseUtil'
|
||||
@@ -164,11 +161,11 @@ export class ComfyNodeDefImpl
|
||||
this.output_tooltips = obj.output_tooltips
|
||||
this.input_order = obj.input_order
|
||||
this.price_badge = obj.price_badge
|
||||
// Resolve essentials_category from API or fallback to mock data
|
||||
this.essentials_category = getEssentialsCategory(
|
||||
obj.name,
|
||||
obj.essentials_category
|
||||
)
|
||||
this.essentials_category = obj.essentials_category
|
||||
? (ESSENTIALS_CATEGORY_CANONICAL.get(
|
||||
obj.essentials_category.toLowerCase()
|
||||
) ?? obj.essentials_category)
|
||||
: undefined
|
||||
this.isGlobal = obj.isGlobal
|
||||
this.isCoreNode = CORE_NODE_MODULES.includes(
|
||||
this.python_module.split('.')[0]
|
||||
@@ -181,11 +178,7 @@ export class ComfyNodeDefImpl
|
||||
this.hidden = defV2.hidden
|
||||
|
||||
// Initialize node source
|
||||
this.nodeSource = getNodeSource(
|
||||
obj.python_module,
|
||||
this.essentials_category,
|
||||
this.name
|
||||
)
|
||||
this.nodeSource = getNodeSource(obj.python_module, this.essentials_category)
|
||||
}
|
||||
|
||||
get nodePath(): string {
|
||||
|
||||
Reference in New Issue
Block a user