From 943bf70326e5663d8cc06a02b8cc29ac84f8772b Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Wed, 2 Jul 2025 17:14:26 -0400
Subject: [PATCH] Remove references to Comfy.Sidebar.Location

---
 .../LiteGraphCanvasSplitterOverlay.vue         | 14 --------------
 src/components/sidebar/SideToolbar.vue         |  8 +-------
 .../sidebar/SidebarHelpCenterIcon.vue          | 18 +++---------------
 .../tabs/modelLibrary/ModelTreeLeaf.vue        | 12 +-----------
 .../sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue  | 12 +-----------
 src/components/toast/GlobalToast.vue           |  5 -----
 6 files changed, 6 insertions(+), 63 deletions(-)

diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 6ac456cb5..fec9cfdc0 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -8,7 +8,6 @@
   >
     <SplitterPanel
       v-show="sidebarPanelVisible"
-      v-if="sidebarLocation === 'left'"
       class="side-bar-panel"
       :min-size="10"
       :size="20"
@@ -32,16 +31,6 @@
         </SplitterPanel>
       </Splitter>
     </SplitterPanel>
-
-    <SplitterPanel
-      v-show="sidebarPanelVisible"
-      v-if="sidebarLocation === 'right'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
-    >
-      <slot name="side-bar-panel" />
-    </SplitterPanel>
   </Splitter>
 </template>
 
@@ -55,9 +44,6 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 const settingStore = useSettingStore()
-const sidebarLocation = computed<'left' | 'right'>(() =>
-  settingStore.get('Comfy.Sidebar.Location')
-)
 
 const unifiedWidth = computed(() =>
   settingStore.get('Comfy.Sidebar.UnifiedWidth')
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 120747b54..bf8e67409 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport :to="teleportTarget">
+  <teleport to=".comfyui-body-left">
     <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
       <SidebarIcon
         v-for="tab in tabs"
@@ -47,12 +47,6 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()
 
-const teleportTarget = computed(() =>
-  settingStore.get('Comfy.Sidebar.Location') === 'left'
-    ? '.comfyui-body-left'
-    : '.comfyui-body-right'
-)
-
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 30537b75a..37df4b51b 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -12,10 +12,8 @@
     <Teleport to="#graph-canvas-container">
       <div
         v-if="isHelpCenterVisible"
-        class="help-center-popup"
+        class="help-center-popup sidebar-left"
         :class="{
-          'sidebar-left': sidebarLocation === 'left',
-          'sidebar-right': sidebarLocation === 'right',
           'small-sidebar': sidebarSize === 'small'
         }"
       >
@@ -26,9 +24,8 @@
     <!-- Release Notification Toast positioned within canvas area -->
     <Teleport to="#graph-canvas-container">
       <ReleaseNotificationToast
+        class="sidebar-left"
         :class="{
-          'sidebar-left': sidebarLocation === 'left',
-          'sidebar-right': sidebarLocation === 'right',
           'small-sidebar': sidebarSize === 'small'
         }"
       />
@@ -37,9 +34,8 @@
     <!-- WhatsNew Popup positioned within canvas area -->
     <Teleport to="#graph-canvas-container">
       <WhatsNewPopup
+        class="sidebar-left"
         :class="{
-          'sidebar-left': sidebarLocation === 'left',
-          'sidebar-right': sidebarLocation === 'right',
           'small-sidebar': sidebarSize === 'small'
         }"
       />
@@ -73,10 +69,6 @@ const releaseStore = useReleaseStore()
 const { shouldShowRedDot } = storeToRefs(releaseStore)
 const isHelpCenterVisible = ref(false)
 
-const sidebarLocation = computed(() =>
-  settingStore.get('Comfy.Sidebar.Location')
-)
-
 const sidebarSize = computed(() => settingStore.get('Comfy.Sidebar.Size'))
 
 const toggleHelpCenter = () => {
@@ -121,10 +113,6 @@ onMounted(async () => {
   left: 1rem;
 }
 
-.help-center-popup.sidebar-right {
-  right: 1rem;
-}
-
 @keyframes slideInUp {
   from {
     opacity: 0;
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 3ff3d7cfd..5673bcf45 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -31,7 +31,6 @@ import {
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { ComfyModelDef } from '@/stores/modelStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 import ModelPreview from './ModelPreview.vue'
@@ -62,11 +61,6 @@ const modelPreviewStyle = ref<CSSProperties>({
   left: '0px'
 })
 
-const settingStore = useSettingStore()
-const sidebarLocation = computed<'left' | 'right'>(() =>
-  settingStore.get('Comfy.Sidebar.Location')
-)
-
 const handleModelHover = async () => {
   const hoverTarget = modelContentElement.value
   if (!hoverTarget) return
@@ -80,11 +74,7 @@ const handleModelHover = async () => {
     previewHeight > availableSpaceBelow
       ? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
       : `${targetRect.top - 40}px`
-  if (sidebarLocation.value === 'left') {
-    modelPreviewStyle.value.left = `${targetRect.right}px`
-  } else {
-    modelPreviewStyle.value.left = `${targetRect.left - 400}px`
-  }
+  modelPreviewStyle.value.left = `${targetRect.right}px`
 
   await modelDef.value.load()
 }
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index d9546086f..9ede3c0e7 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -58,7 +58,6 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{
@@ -72,11 +71,6 @@ const nodeBookmarkStore = useNodeBookmarkStore()
 const isBookmarked = computed(() =>
   nodeBookmarkStore.isBookmarked(nodeDef.value)
 )
-const settingStore = useSettingStore()
-const sidebarLocation = computed<'left' | 'right'>(() =>
-  settingStore.get('Comfy.Sidebar.Location')
-)
-
 const toggleBookmark = async () => {
   await nodeBookmarkStore.toggleBookmark(nodeDef.value)
 }
@@ -101,11 +95,7 @@ const handleNodeHover = async () => {
     previewHeight > availableSpaceBelow
       ? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
       : `${targetRect.top - 40}px`
-  if (sidebarLocation.value === 'left') {
-    nodePreviewStyle.value.left = `${targetRect.right}px`
-  } else {
-    nodePreviewStyle.value.left = `${targetRect.left - 400}px`
-  }
+  nodePreviewStyle.value.left = `${targetRect.right}px`
 }
 
 const container = ref<HTMLElement | null>(null)
diff --git a/src/components/toast/GlobalToast.vue b/src/components/toast/GlobalToast.vue
index 848ad15c0..74cf7012e 100644
--- a/src/components/toast/GlobalToast.vue
+++ b/src/components/toast/GlobalToast.vue
@@ -82,9 +82,4 @@ watch(
   () => nextTick(updateToastPosition),
   { immediate: true }
 )
-watch(
-  () => settingStore.get('Comfy.Sidebar.Location'),
-  () => nextTick(updateToastPosition),
-  { immediate: true }
-)
 </script>