Add setting to control tree explorer item padding (#700)

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;

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]) {