From b0b5f92940f1d71417e3a8f2e26365213d8eb4de Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sun, 1 Sep 2024 14:36:15 -0400
Subject: [PATCH] Add setting to control tree explorer item padding (#700)

---
 src/App.vue                | 14 ++++++++++++++
 src/stores/settingStore.ts | 12 ++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index cf97f8c8a..b7f346690 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,6 +60,14 @@ watchEffect(() => {
   )
 })
 
+watchEffect(() => {
+  const padding = useSettingStore().get('Comfy.TreeExplorer.ItemPadding')
+  document.documentElement.style.setProperty(
+    '--comfy-tree-explorer-item-padding',
+    `${padding}px`
+  )
+})
+
 const { t } = useI18n()
 const init = () => {
   useSettingStore().addSettings(app.ui.settings)
@@ -126,6 +134,12 @@ onUnmounted(() => {
 })
 </script>
 
+<style>
+.p-tree-node-content {
+  padding: var(--comfy-tree-explorer-item-padding) !important;
+}
+</style>
+
 <style scoped>
 .spinner {
   @apply absolute inset-0 flex justify-center items-center h-screen;
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 4c29a38b7..080ec4012 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -267,6 +267,18 @@ export const useSettingStore = defineStore('setting', {
         type: 'boolean',
         defaultValue: false
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.TreeExplorer.ItemPadding',
+        name: 'Tree explorer item padding',
+        type: 'slider',
+        defaultValue: 2,
+        attrs: {
+          min: 0,
+          max: 8,
+          step: 1
+        }
+      })
     },
 
     set<K extends keyof Settings>(key: K, value: Settings[K]) {