feat: right side panel (#6952)

<img width="1183" height="809" alt="CleanShot 2025-11-26 at 16 01 15"
src="https://github.com/user-attachments/assets/c14dc5c3-a672-4dcd-917d-14f16310188e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6952-feat-right-side-panel-2b76d73d36508112b121c283a479f42a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { cn } from '@/utils/tailwindUtil'
+import type { ClassValue } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  nodeTitle: string
+  widgetName: string
+  isShown?: boolean
+  isDraggable?: boolean
+  isPhysical?: boolean
+  class?: ClassValue
+}>()
+defineEmits<{
+  (e: 'toggleVisibility'): void
+}>()
+
+function getIcon() {
+  return props.isPhysical
+    ? 'icon-[lucide--link]'
+    : props.isDraggable
+      ? 'icon-[lucide--eye]'
+      : 'icon-[lucide--eye-off]'
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex py-1 px-2 break-all rounded items-center gap-1',
+        'bg-node-component-surface',
+        props.isDraggable &&
+          'draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing hover:ring-1 ring-accent-background',
+        props.class
+      )
+    "
+  >
+    <div class="pointer-events-none flex-1">
+      <div class="text-xs text-text-secondary line-clamp-1">
+        {{ nodeTitle }}
+      </div>
+      <div class="text-sm line-clamp-1 leading-8">{{ widgetName }}</div>
+    </div>
+    <Button
+      size="small"
+      text
+      :icon="getIcon()"
+      :disabled="isPhysical"
+      severity="secondary"
+      @click.stop="$emit('toggleVisibility')"
+    />
+    <div
+      v-if="isDraggable"
+      class="size-4 pointer-events-none icon-[lucide--grip-vertical]"
+    />
+  </div>
+</template>