Pin searchbox at top when node library scrolls (#811)

* minor style fix

* nit

* Pin searchbox at top when node library scrolls

Author: huchenlei

src/components/common/SearchBox.vue

@@ -18,7 +18,10 @@
         @click="$emit('showFilter', $event)"
       />
     </IconField>
-    <div class="search-filters" v-if="filters">
+    <div
+      class="search-filters pt-2 flex flex-wrap gap-2"
+      v-if="filters?.length"
+    >
       <SearchFilterChip
         v-for="filter in filters"
         :key="filter.id"
@@ -92,8 +95,4 @@ const handleInput = (event: Event) => {
   width: auto;
   border: none !important;
 }
-
-.search-filters {
-  @apply pt-2 flex flex-wrap gap-2;
-}
 </style>

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -19,35 +19,44 @@
       />
     </template>
     <template #body>
-      <SearchBox
-        class="node-lib-search-box"
-        v-model:modelValue="searchQuery"
-        @search="handleSearch"
-        @show-filter="($event) => searchFilter.toggle($event)"
-        @remove-filter="onRemoveFilter"
-        :placeholder="$t('searchNodes') + '...'"
-        filter-icon="pi pi-filter"
-        :filters
-      />
-
-      <Popover ref="searchFilter" class="node-lib-filter-popup">
-        <NodeSearchFilter @addFilter="onAddFilter" />
-      </Popover>
-      <NodeBookmarkTreeExplorer
-        ref="nodeBookmarkTreeExplorerRef"
-        :filtered-node-defs="filteredNodeDefs"
-      />
-      <Divider v-if="nodeBookmarkStore.bookmarks.length > 0" type="dashed" />
-      <TreeExplorer
-        class="node-lib-tree-explorer"
-        :roots="renderedRoot.children"
-        v-model:expandedKeys="expandedKeys"
-        @nodeClick="handleNodeClick"
-      >
-        <template #node="{ node }">
-          <NodeTreeLeaf :node="node" />
-        </template>
-      </TreeExplorer>
+      <div class="flex flex-col h-full">
+        <div class="flex-shrink-0">
+          <SearchBox
+            class="node-lib-search-box mx-4 mt-4"
+            v-model:modelValue="searchQuery"
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter.toggle($event)"
+            @remove-filter="onRemoveFilter"
+            :placeholder="$t('searchNodes') + '...'"
+            filter-icon="pi pi-filter"
+            :filters
+          />
+
+          <Popover ref="searchFilter" class="node-lib-filter-popup">
+            <NodeSearchFilter @addFilter="onAddFilter" />
+          </Popover>
+        </div>
+        <div class="flex-grow overflow-y-auto">
+          <NodeBookmarkTreeExplorer
+            ref="nodeBookmarkTreeExplorerRef"
+            :filtered-node-defs="filteredNodeDefs"
+          />
+          <Divider
+            v-if="nodeBookmarkStore.bookmarks.length > 0"
+            type="dashed"
+          />
+          <TreeExplorer
+            class="node-lib-tree-explorer mt-1"
+            :roots="renderedRoot.children"
+            v-model:expandedKeys="expandedKeys"
+            @nodeClick="handleNodeClick"
+          >
+            <template #node="{ node }">
+              <NodeTreeLeaf :node="node" />
+            </template>
+          </TreeExplorer>
+        </div>
+      </div>
     </template>
   </SidebarTabTemplate>
   <div id="node-library-node-preview-container" />
@@ -60,7 +69,7 @@ import {
   ComfyNodeDefImpl,
   useNodeDefStore
 } from '@/stores/nodeDefStore'
-import { computed, nextTick, onMounted, ref, Ref } from 'vue'
+import { computed, nextTick, ref, Ref } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import Popover from 'primevue/popover'
 import Divider from 'primevue/divider'
@@ -193,10 +202,6 @@ const onRemoveFilter = (filterAndValue) => {
 </style>
 
 <style scoped>
-:deep(.node-lib-search-box) {
-  @apply mx-4 mt-4;
-}
-
 :deep(.comfy-vue-side-bar-body) {
   background: var(--p-tree-background);
 }
@@ -205,10 +210,6 @@ const onRemoveFilter = (filterAndValue) => {
   padding-bottom: 2px;
 }
 
-:deep(.node-lib-tree-explorer) {
-  padding-top: 2px;
-}
-
 :deep(.p-divider) {
   margin: var(--comfy-tree-explorer-item-padding) 0px;
 }