mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-06 05:30:08 +00:00
feat: implement NodeLibrarySidebarTabV2 with Reka UI components (#8548)
## Summary Implement a redesigned Node Library sidebar using Reka UI components with virtualized tree rendering and improved UX. ## Changes - **What**: - Add three-tab structure (Essential, All, Custom) using Reka UI Tabs - Implement TreeExplorerV2 with virtualized tree using TreeRoot/TreeVirtualizer for performance - Add node hover preview with teleport to show NodePreview component - Implement context menu for toggling favorites on nodes - Add search functionality that auto-expands matching folders - Create panel components: EssentialNodesPanel, AllNodesPanel, CustomNodesPanel - Add 'Open Manager' button in CustomNodesPanel - Use custom icons: comfy--node for nodes, ph--folder-fill for folders - New node preview component: `NodePreviewCard` - Api node folder icon - Node drag preview - **Feature Flag**: Enabled via URL parameter `?nodeRedesign=true` ## Review Focus - TreeExplorerV2.vue uses `[...expandedKeys]` to prevent internal mutation by Reka UI TreeRoot - Context menu injection key is exported from TreeExplorerV2Node.vue and imported by TreeExplorerV2.vue - Hover preview uses teleport to `#node-library-node-preview-container-v2` ## Screenshots (if applicable) | Feature | Screenshot | |---|---| | All nodes tab |<img width="323" height="761" alt="image" src="https://github.com/user-attachments/assets/1976222b-83dc-4a1b-838a-2d49aedea3b8" />| | Custom nodes tab | <img width="308" height="748" alt="image" src="https://github.com/user-attachments/assets/2c23bffb-bdaa-4c6c-8cac-7610fb7f3fb7" />| |Api nodes icon | <img width="299" height="523" alt="image" src="https://github.com/user-attachments/assets/e9ca05b0-1143-44cf-b227-6462173c7cd0" />| | node preview|<img width="499" height="544" alt="image" src="https://github.com/user-attachments/assets/8961a7b4-77ae-4e57-99cf-62d9e4e17088" />| | node drag preview | <img width="434" height="289" alt="image" src="https://github.com/user-attachments/assets/b5838c90-65d4-4bee-b2b3-c41b57870da8" />| Test by adding `?nodeRedesign=true` to the URL ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8548-WIP-feat-implement-NodeLibrarySidebarTabV2-with-Reka-UI-components-2fb6d73d36508134b7e0f75a2c9b976a) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: bymyself <cbyrne@comfy.org>
This commit is contained in:
73
src/composables/usePerTabState.test.ts
Normal file
73
src/composables/usePerTabState.test.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { ref } from 'vue'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import { usePerTabState } from './usePerTabState'
|
||||
|
||||
type TabId = 'a' | 'b' | 'c'
|
||||
|
||||
describe('usePerTabState', () => {
|
||||
function setup(initialTab: TabId = 'a') {
|
||||
const selectedTab = ref<TabId>(initialTab)
|
||||
const stateByTab = ref<Record<TabId, string[]>>({
|
||||
a: [],
|
||||
b: [],
|
||||
c: []
|
||||
})
|
||||
const state = usePerTabState(selectedTab, stateByTab)
|
||||
return { selectedTab, stateByTab, state }
|
||||
}
|
||||
|
||||
it('should return state for the current tab', () => {
|
||||
const { selectedTab, stateByTab, state } = setup()
|
||||
|
||||
stateByTab.value.a = ['key1', 'key2']
|
||||
stateByTab.value.b = ['key3']
|
||||
|
||||
expect(state.value).toEqual(['key1', 'key2'])
|
||||
|
||||
selectedTab.value = 'b'
|
||||
expect(state.value).toEqual(['key3'])
|
||||
})
|
||||
|
||||
it('should set state only for the current tab', () => {
|
||||
const { stateByTab, state } = setup()
|
||||
|
||||
state.value = ['new-key1', 'new-key2']
|
||||
|
||||
expect(stateByTab.value.a).toEqual(['new-key1', 'new-key2'])
|
||||
expect(stateByTab.value.b).toEqual([])
|
||||
expect(stateByTab.value.c).toEqual([])
|
||||
})
|
||||
|
||||
it('should preserve state when switching tabs', () => {
|
||||
const { selectedTab, stateByTab, state } = setup()
|
||||
|
||||
state.value = ['a-key']
|
||||
selectedTab.value = 'b'
|
||||
state.value = ['b-key']
|
||||
selectedTab.value = 'c'
|
||||
state.value = ['c-key']
|
||||
|
||||
expect(stateByTab.value.a).toEqual(['a-key'])
|
||||
expect(stateByTab.value.b).toEqual(['b-key'])
|
||||
expect(stateByTab.value.c).toEqual(['c-key'])
|
||||
|
||||
selectedTab.value = 'a'
|
||||
expect(state.value).toEqual(['a-key'])
|
||||
})
|
||||
|
||||
it('should not share state between tabs', () => {
|
||||
const { selectedTab, state } = setup()
|
||||
|
||||
state.value = ['only-a']
|
||||
|
||||
selectedTab.value = 'b'
|
||||
expect(state.value).toEqual([])
|
||||
|
||||
selectedTab.value = 'c'
|
||||
expect(state.value).toEqual([])
|
||||
|
||||
selectedTab.value = 'a'
|
||||
expect(state.value).toEqual(['only-a'])
|
||||
})
|
||||
})
|
||||
14
src/composables/usePerTabState.ts
Normal file
14
src/composables/usePerTabState.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { Ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
export function usePerTabState<K extends string, V>(
|
||||
selectedTab: Ref<K>,
|
||||
stateByTab: Ref<Record<K, V>>
|
||||
) {
|
||||
return computed({
|
||||
get: () => stateByTab.value[selectedTab.value],
|
||||
set: (value) => {
|
||||
stateByTab.value[selectedTab.value] = value
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user