From c2377b62ace5ad4ee735fca3d4c32a218e88aea9 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Fri, 11 Oct 2024 15:04:29 -0400
Subject: [PATCH] Fix sidebar tab bg color (#1229)

* Fix node library sidebar style

* Fix styles

* nit
---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 19 ++++------
 .../sidebar/tabs/NodeLibrarySidebarTab.vue    | 37 ++++++-------------
 .../sidebar/tabs/SidebarTabTemplate.vue       | 15 ++++----
 .../sidebar/tabs/WorkflowsSidebarTab.vue      | 13 +++----
 .../nodeLibrary/NodeBookmarkTreeExplorer.vue  |  2 +-
 5 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 68fe2bbbc..34b48767f 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -1,15 +1,18 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.modelLibrary')"
+    class="bg-[var(--p-tree-background)]"
+  >
     <template #header>
       <SearchBox
-        class="model-lib-search-box mx-4 mt-4"
+        class="model-lib-search-box p-4"
         v-model:modelValue="searchQuery"
         :placeholder="$t('searchModels') + '...'"
       />
     </template>
     <template #body>
       <TreeExplorer
-        class="model-lib-tree-explorer mt-1"
+        class="model-lib-tree-explorer py-0"
         :roots="renderedRoot.children"
         v-model:expandedKeys="expandedKeys"
         @nodeClick="handleNodeClick"
@@ -209,15 +212,9 @@ watch(
 )
 </script>
 
-<style>
-.pi-fake-spacer {
+<style scoped>
+:deep(.pi-fake-spacer) {
   height: 1px;
   width: 16px;
 }
 </style>
-
-<style scoped>
-:deep(.comfy-vue-side-bar-body) {
-  background: var(--p-tree-background);
-}
-</style>
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index 78f44a6b8..df887e115 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -1,5 +1,8 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.nodeLibrary')">
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.nodeLibrary')"
+    class="bg-[var(--p-tree-background)]"
+  >
     <template #tool-buttons>
       <Button
         class="new-folder-button"
@@ -20,7 +23,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="node-lib-search-box mx-4 mt-4"
+        class="node-lib-search-box p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         @show-filter="($event) => searchFilter.toggle($event)"
@@ -30,7 +33,7 @@
         :filters
       />
 
-      <Popover ref="searchFilter" class="node-lib-filter-popup">
+      <Popover ref="searchFilter" class="ml-[-13px]">
         <NodeSearchFilter @addFilter="onAddFilter" />
       </Popover>
     </template>
@@ -39,9 +42,13 @@
         ref="nodeBookmarkTreeExplorerRef"
         :filtered-node-defs="filteredNodeDefs"
       />
-      <Divider v-if="nodeBookmarkStore.bookmarks.length > 0" type="dashed" />
+      <Divider
+        v-show="nodeBookmarkStore.bookmarks.length > 0"
+        type="dashed"
+        class="m-2"
+      />
       <TreeExplorer
-        class="node-lib-tree-explorer mt-1"
+        class="node-lib-tree-explorer py-0"
         :roots="renderedRoot.children"
         v-model:expandedKeys="expandedKeys"
       >
@@ -186,23 +193,3 @@ const onRemoveFilter = (filterAndValue) => {
   handleSearch(searchQuery.value)
 }
 </script>
-
-<style>
-.node-lib-filter-popup {
-  margin-left: -13px;
-}
-</style>
-
-<style scoped>
-:deep(.comfy-vue-side-bar-body) {
-  background: var(--p-tree-background);
-}
-
-:deep(.node-lib-bookmark-tree-explorer) {
-  padding-bottom: 2px;
-}
-
-:deep(.p-divider) {
-  margin: var(--comfy-tree-explorer-item-padding) 0px;
-}
-</style>
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 0917bb982..36379507e 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="comfy-vue-side-bar-container flex flex-col h-full">
+  <div
+    class="comfy-vue-side-bar-container flex flex-col h-full"
+    :class="props.class"
+  >
     <div class="comfy-vue-side-bar-header">
       <Toolbar
         class="flex-shrink-0 border-x-0 border-t-0 rounded-none px-2 py-1 min-h-10"
@@ -26,10 +29,8 @@
 import Toolbar from 'primevue/toolbar'
 import ScrollPanel from 'primevue/scrollpanel'
 
-const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
+const props = defineProps<{
+  title: string
+  class?: string
+}>()
 </script>
diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 10c76193e..245b882ee 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -1,5 +1,8 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.workflows')">
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.workflows')"
+    class="bg-[var(--p-tree-background)]"
+  >
     <template #tool-buttons>
       <Button
         class="browse-templates-button"
@@ -25,7 +28,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="workflows-search-box mx-4 my-4"
+        class="workflows-search-box p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('searchWorkflows') + '...'"
@@ -216,9 +219,3 @@ const selectionKeys = computed(() => ({
   [`root/${workflowStore.activeWorkflow?.name}.json`]: true
 }))
 </script>
-
-<style scoped>
-:deep(.comfy-vue-side-bar-body) {
-  background: var(--p-tree-background);
-}
-</style>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
index afd479c17..51bfcabb9 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
@@ -1,6 +1,6 @@
 <template>
   <TreeExplorer
-    class="node-lib-bookmark-tree-explorer"
+    class="node-lib-bookmark-tree-explorer py-0"
     ref="treeExplorerRef"
     :roots="renderedBookmarkedRoot.children"
     :expandedKeys="expandedKeys"