Add right side panel

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'

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>

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')

src/views/GraphView.vue

@@ -317,6 +317,7 @@ const onGraphReady = () => {
   z-index: 10;
   grid-column: 3;
   grid-row: 2;
+  display: flex;
 }
 
 .comfyui-body-bottom {