Cleanup: Properties Panel (#7137)

## Summary

- Code cleanup
- Copy, padding, color, alignment of components
- Subgraph Edit mode changes
- Partial fix for the Node Info location (need to do context menu still)
- Editing node title

### Still to-do

- Bi-directionality in values

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7137-WIP-Cleanup-Properties-Panel-2be6d73d3650813e9430f6bcb09dfb4d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-12-05 21:33:52 -08:00
committed by GitHub
parent cde49d5b64
commit f74c176423
45 changed files with 419 additions and 386 deletions

View File

@@ -1,52 +1,38 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { computed, ref } from 'vue'
type RightSidePanelTab = 'parameters' | 'settings' | 'info'
export type RightSidePanelTab = 'parameters' | 'settings' | 'info' | 'subgraph'
/**
* Store for managing the right side panel state.
* This panel displays properties and settings for selected nodes.
*/
export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
// Panel visibility state
const isOpen = ref(false)
const isEditingSubgraph = ref(false)
// Active tab in the node properties panel
const activeTab = ref<RightSidePanelTab>('parameters')
const isEditingSubgraph = computed(() => activeTab.value === 'subgraph')
// Actions
function openPanel(tab?: RightSidePanelTab | 'subgraph') {
function openPanel(tab?: RightSidePanelTab) {
isOpen.value = true
if (tab === 'subgraph') {
activeTab.value = 'parameters'
isEditingSubgraph.value = true
} else if (tab) {
if (tab) {
activeTab.value = tab
isEditingSubgraph.value = false
}
}
function closePanel() {
isOpen.value = false
isEditingSubgraph.value = false
}
function togglePanel() {
isOpen.value = !isOpen.value
}
function setActiveTab(tab: RightSidePanelTab) {
activeTab.value = tab
}
return {
isOpen,
activeTab,
isEditingSubgraph,
openPanel,
closePanel,
togglePanel,
setActiveTab
togglePanel
}
})