Use scrollpanel in sidebar template (#1226)

* Use scrollpanel in sidebar template

* Migrate

* nit

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -1,28 +1,23 @@
 <template>
   <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
-    <template #tool-buttons> </template>
+    <template #header>
+      <SearchBox
+        class="model-lib-search-box mx-4 mt-4"
+        v-model:modelValue="searchQuery"
+        :placeholder="$t('searchModels') + '...'"
+      />
+    </template>
     <template #body>
-      <div class="flex flex-col h-full">
+      <TreeExplorer
-        <div class="flex-shrink-0">
+        class="model-lib-tree-explorer mt-1"
-          <SearchBox
+        :roots="renderedRoot.children"
-            class="model-lib-search-box mx-4 mt-4"
+        v-model:expandedKeys="expandedKeys"
-            v-model:modelValue="searchQuery"
+        @nodeClick="handleNodeClick"
-            :placeholder="$t('searchModels') + '...'"
+      >
-          />
+        <template #node="{ node }">
-        </div>
+          <ModelTreeLeaf :node="node" />
-        <div class="flex-grow overflow-y-auto">
+        </template>
-          <TreeExplorer
+      </TreeExplorer>
-            class="model-lib-tree-explorer mt-1"
-            :roots="renderedRoot.children"
-            v-model:expandedKeys="expandedKeys"
-            @nodeClick="handleNodeClick"
-          >
-            <template #node="{ node }">
-              <ModelTreeLeaf :node="node" />
-            </template>
-          </TreeExplorer>
-        </div>
-      </div>
     </template>
   </SidebarTabTemplate>
   <div id="model-library-model-preview-container" />

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -18,44 +18,37 @@
         v-tooltip="$t('sideToolbar.nodeLibraryTab.sortOrder')"
       />
     </template>
-    <template #body>
+    <template #header>
-      <div class="flex flex-col h-full">
+      <SearchBox
-        <div class="flex-shrink-0">
+        class="node-lib-search-box mx-4 mt-4"
-          <SearchBox
+        v-model:modelValue="searchQuery"
-            class="node-lib-search-box mx-4 mt-4"
+        @search="handleSearch"
-            v-model:modelValue="searchQuery"
+        @show-filter="($event) => searchFilter.toggle($event)"
-            @search="handleSearch"
+        @remove-filter="onRemoveFilter"
-            @show-filter="($event) => searchFilter.toggle($event)"
+        :placeholder="$t('searchNodes') + '...'"
-            @remove-filter="onRemoveFilter"
+        filter-icon="pi pi-filter"
-            :placeholder="$t('searchNodes') + '...'"
+        :filters
-            filter-icon="pi pi-filter"
+      />
-            :filters
-          />
 
-          <Popover ref="searchFilter" class="node-lib-filter-popup">
+      <Popover ref="searchFilter" class="node-lib-filter-popup">
-            <NodeSearchFilter @addFilter="onAddFilter" />
+        <NodeSearchFilter @addFilter="onAddFilter" />
-          </Popover>
+      </Popover>
-        </div>
+    </template>
-        <div class="flex-grow overflow-y-auto">
+    <template #body>
-          <NodeBookmarkTreeExplorer
+      <NodeBookmarkTreeExplorer
-            ref="nodeBookmarkTreeExplorerRef"
+        ref="nodeBookmarkTreeExplorerRef"
-            :filtered-node-defs="filteredNodeDefs"
+        :filtered-node-defs="filteredNodeDefs"
-          />
+      />
-          <Divider
+      <Divider v-if="nodeBookmarkStore.bookmarks.length > 0" type="dashed" />
-            v-if="nodeBookmarkStore.bookmarks.length > 0"
+      <TreeExplorer
-            type="dashed"
+        class="node-lib-tree-explorer mt-1"
-          />
+        :roots="renderedRoot.children"
-          <TreeExplorer
+        v-model:expandedKeys="expandedKeys"
-            class="node-lib-tree-explorer mt-1"
+      >
-            :roots="renderedRoot.children"
+        <template #node="{ node }">
-            v-model:expandedKeys="expandedKeys"
+          <NodeTreeLeaf :node="node" />
-          >
+        </template>
-            <template #node="{ node }">
+      </TreeExplorer>
-              <NodeTreeLeaf :node="node" />
-            </template>
-          </TreeExplorer>
-        </div>
-      </div>
     </template>
   </SidebarTabTemplate>
   <div id="node-library-node-preview-container" />

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="comfy-vue-side-bar-container">
+  <div class="comfy-vue-side-bar-container flex flex-col h-full">
-    <Toolbar class="comfy-vue-side-bar-header">
+    <div class="comfy-vue-side-bar-header">
-      <template #start>
+      <Toolbar
-        <span class="comfy-vue-side-bar-header-span">{{
+        class="flex-shrink-0 border-x-0 border-t-0 rounded-none px-2 py-1 min-h-10"
-          props.title.toUpperCase()
+      >
-        }}</span>
+        <template #start>
-      </template>
+          <span class="text-sm">{{ props.title.toUpperCase() }}</span>
-      <template #end>
+        </template>
-        <slot name="tool-buttons"></slot>
+        <template #end>
-      </template>
+          <slot name="tool-buttons"></slot>
-    </Toolbar>
+        </template>
-    <div class="comfy-vue-side-bar-body">
+      </Toolbar>
-      <slot name="body"></slot>
+      <slot name="header"></slot>
     </div>
+    <!-- h-0 to force scrollpanel to flex-grow -->
+    <ScrollPanel class="comfy-vue-side-bar-body flex-grow h-0">
+      <div class="h-full">
+        <slot name="body"></slot>
+      </div>
+    </ScrollPanel>
   </div>
 </template>
 
 <script setup lang="ts">
 import Toolbar from 'primevue/toolbar'
+import ScrollPanel from 'primevue/scrollpanel'
 
 const props = defineProps({
   title: {
@@ -26,41 +33,3 @@ const props = defineProps({
   }
 })
 </script>
-
-<style scoped>
-.comfy-vue-side-bar-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.comfy-vue-side-bar-header {
-  flex-shrink: 0;
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  border-radius: 0;
-  padding: 0.25rem 1rem;
-  min-height: 2.5rem;
-}
-
-.comfy-vue-side-bar-header-span {
-  font-size: small;
-}
-
-.comfy-vue-side-bar-body {
-  flex-grow: 1;
-  overflow: auto;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-}
-
-.comfy-vue-side-bar-body::-webkit-scrollbar {
-  width: 1px;
-}
-
-.comfy-vue-side-bar-body::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-</style>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -23,13 +23,15 @@
         text
       />
     </template>
-    <template #body>
+    <template #header>
       <SearchBox
         class="workflows-search-box mx-4 my-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('searchWorkflows') + '...'"
       />
+    </template>
+    <template #body>
       <div class="comfyui-workflows-panel" v-if="!isSearching">
         <div
           class="comfyui-workflows-open"