From 0ba1d1127c1d5d59b2c2c667f213022efffd274a Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Wed, 2 Jul 2025 17:55:58 -0400
Subject: [PATCH] Add right side panel

---
 src/components/graph/GraphCanvas.vue        |  2 +
 src/components/sidebar/RightSideToolbar.vue | 64 +++++++++++++++++++++
 src/components/topbar/TopMenubar.vue        | 15 +++++
 src/views/GraphView.vue                     |  1 +
 4 files changed, 82 insertions(+)
 create mode 100644 src/components/sidebar/RightSideToolbar.vue

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 8ef41fb34..9150bcb6e 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -40,6 +40,7 @@
       <SelectionToolbox />
     </SelectionOverlay>
     <DomWidgets />
+    <RightSideToolbar />
   </template>
 </template>
 
@@ -58,6 +59,7 @@ import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
+import RightSideToolbar from '@/components/sidebar/RightSideToolbar.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
diff --git a/src/components/sidebar/RightSideToolbar.vue b/src/components/sidebar/RightSideToolbar.vue
new file mode 100644
index 000000000..07b69c870
--- /dev/null
+++ b/src/components/sidebar/RightSideToolbar.vue
@@ -0,0 +1,64 @@
+<template>
+  <teleport to=".comfyui-body-right">
+    <div class="right-sidebar-container" :class="{ hidden: !isVisible }">
+      <div class="right-sidebar-header">
+        <h3></h3>
+        <Button
+          icon="pi pi-times"
+          text
+          severity="secondary"
+          size="small"
+          @click="rightSidebarTabStore.hide()"
+        />
+      </div>
+      <div class="right-sidebar-content">
+        <!-- Content will go here -->
+        <p></p>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useRightSidebarTabStore } from '@/stores/workspace/rightSidebarTabStore'
+
+const rightSidebarTabStore = useRightSidebarTabStore()
+const isVisible = computed(() => rightSidebarTabStore.isVisible)
+</script>
+
+<style scoped>
+.right-sidebar-container {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 100%;
+  background-color: var(--comfy-menu-bg);
+  border-left: 1px solid var(--border-color);
+}
+
+.right-sidebar-container.hidden {
+  display: none;
+}
+
+.right-sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.right-sidebar-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.right-sidebar-content {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e126bad67..9c94f3153 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -18,6 +18,19 @@
     <Actionbar />
     <CurrentUserButton class="flex-shrink-0" />
     <BottomPanelToggleButton class="flex-shrink-0" />
+    <Button
+      v-tooltip="{ value: 'Toggle Right Sidebar', showDelay: 300 }"
+      class="flex-shrink-0"
+      :icon="
+        rightSidebarTabStore.isVisible
+          ? 'pi pi-angle-double-right'
+          : 'pi pi-angle-double-left'
+      "
+      severity="secondary"
+      text
+      aria-label="Toggle Right Sidebar"
+      @click="rightSidebarTabStore.toggleVisibility()"
+    />
     <Button
       v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
       class="flex-shrink-0"
@@ -53,6 +66,7 @@ import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
+import { useRightSidebarTabStore } from '@/stores/workspace/rightSidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
   electronAPI,
@@ -63,6 +77,7 @@ import {
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
+const rightSidebarTabStore = useRightSidebarTabStore()
 
 const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 5d6719a48..cc8c6dd79 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -317,6 +317,7 @@ const onGraphReady = () => {
   z-index: 10;
   grid-column: 3;
   grid-row: 2;
+  display: flex;
 }
 
 .comfyui-body-bottom {