Skip to content

feat: right side panel favorites, no selection state, and more... #7812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LittleSound wants to merge 48 commits into
base: main
Choose a base branch
from
Open

feat: right side panel favorites, no selection state, and more... #7812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
069e2fd
feat: favorites
LittleSound Dec 20, 2025
296a9e1
feat: settings tab
LittleSound Dec 23, 2025
0d71d53
revert: settings tab + favorites
LittleSound Dec 23, 2025
4bdb441
feat: favorite + settings
LittleSound Dec 23, 2025
3013780
feat: settings
LittleSound Dec 23, 2025
9d83cd3
feat: tab nodes
LittleSound Dec 23, 2025
65a57d1
feat: group
LittleSound Dec 23, 2025
1fa6e13
feat: locate
LittleSound Dec 23, 2025
8293de2
fix: remove unused exports from favoritedWidgetsStore
LittleSound Dec 24, 2025
a032ac4
feat: widget actions
LittleSound Dec 26, 2025
b224e98
feat: drag and drop sorting in favorites
LittleSound Dec 29, 2025
b4d86d5
feat: favorite indicator
LittleSound Dec 29, 2025
ea8c41c
feat: show the node name from where this parameter comes from on subg…
LittleSound Dec 29, 2025
ab06fcd
feat: advance inputs
LittleSound Dec 29, 2025
87ed0c1
feat: show advance inputs button
LittleSound Dec 29, 2025
bd48922
fix: update favorites label for clarity
LittleSound Dec 30, 2025
4f95f0d
refactor: widget section and actions
LittleSound Dec 30, 2025
cbe4d59
refactor: the settings
LittleSound Dec 31, 2025
8597e06
refactor: flat and categorize selected items
LittleSound Jan 2, 2026
5b9a279
fix: groups title shown when select mulmultiple items
LittleSound Jan 2, 2026
7506e65
fix: prevent stack overflow in flatItems function by limiting recursi…
LittleSound Jan 2, 2026
c8a8256
feat: add parent group display for selected groups
LittleSound Jan 2, 2026
99095cc
feat: show groups info in more cases
LittleSound Jan 2, 2026
7e501f4
fix: add search state management for widget filtering
LittleSound Jan 5, 2026
c5563d4
fix: enhance accessibility by adding aria-label to locate button and …
LittleSound Jan 5, 2026
fd16859
fix: nodes without widgets cannot display the location and their group
LittleSound Jan 5, 2026
9650e85
fix: show node name in favorite widgets + improve labels layout
LittleSound Jan 5, 2026
ebb3cc3
show and hide input widgets do not work on subgraph
LittleSound Jan 6, 2026
5f066b4
fix: favorite feature does not work on subgraph
LittleSound Jan 6, 2026
86dac8c
feat: subgraph inputs rearranging
LittleSound Jan 6, 2026
8f0ed7d
fix: update the displayed name when a widget is renamed
LittleSound Jan 6, 2026
d6b6ae3
fix: layout of locate button
LittleSound Jan 6, 2026
59b561b
refactor: treat subgraph case as an independent tab component
LittleSound Jan 6, 2026
193fa0a
fix: rename proxy widget correctly
LittleSound Jan 6, 2026
acda492
refactor: global settings style reuse for node widgets forms
LittleSound Jan 6, 2026
486cad6
fix: update cursor style for tooltip in LayoutField component
LittleSound Jan 6, 2026
81200d5
refactor: remove search functionality from TabGlobalSettings
LittleSound Jan 6, 2026
7310683
fix: canvas does not update after modifying the subgraph's widgets value
LittleSound Jan 6, 2026
e01e5e1
fix(style): widget actions menu
LittleSound Jan 6, 2026
308b489
fix(style): button show advanced inputs
LittleSound Jan 6, 2026
e48894c
feat: interactive animation
LittleSound Jan 6, 2026
19e0a33
fix: improve search functionality to include node title matching
LittleSound Jan 6, 2026
8134e12
Merge branch 'main' into rizumu/feat/right-side-panel-v3
LittleSound Jan 6, 2026
2637255
fix: change useReactiveWidgetValue to a private function
LittleSound Jan 6, 2026
37f1e94
[automated] Apply ESLint and Prettier fixes
actions-user Jan 6, 2026
8a0217c
fix: drag-and-sort function is unavailable after the collapse panel i…
LittleSound Jan 6, 2026
932ca80
fix: background color does not follow the theme
LittleSound Jan 6, 2026
0135805
fix: search node titles + single-child group bugs
LittleSound Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,21 @@
@import '@comfyorg/design-system/css/style.css';
@import '@comfyorg/design-system/css/style.css';

/* List transition animations */
.list-scale-move,
.list-scale-enter-active,
.list-scale-leave-active {
transition-property: opacity, transform;
transition-duration: 150ms;
transition-timing-function: ease;
}
Comment on lines +4 to +10
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider using CSS transition shorthand.

The individual transition properties can be consolidated into a single shorthand declaration for more concise code.

🔎 Proposed refactor using shorthand 
 .list-scale-move,
 .list-scale-enter-active,
 .list-scale-leave-active {
-  transition-property: opacity, transform;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
+  transition: opacity 150ms ease, transform 150ms ease;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.list-scale-move,
.list-scale-enter-active,
.list-scale-leave-active {
transition-property: opacity, transform;
transition-duration: 150ms;
transition-timing-function: ease;
}
.list-scale-move,
.list-scale-enter-active,
.list-scale-leave-active {
transition: opacity 150ms ease, transform 150ms ease;
}
🤖 Prompt for AI Agents 
In @src/assets/css/style.css around lines 4 - 10, The repeated
transition-property, transition-duration, and transition-timing-function for the
selectors .list-scale-move, .list-scale-enter-active, and
.list-scale-leave-active should be consolidated into a single shorthand; replace
those three declarations with a single transition declaration such as
"transition: opacity 150ms ease, transform 150ms ease" to keep behavior
identical while making the CSS more concise.


.list-scale-enter-from,
.list-scale-leave-to {
opacity: 0;
transform: scale(70%);
}

.list-scale-leave-active {
position: absolute;
width: 100%;
}
Comment on lines +3 to +21
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Add prefers-reduced-motion support for accessibility.

Consider wrapping the transition animations in a media query to respect user motion preferences, or disable them for users who have enabled reduced motion in their system settings.

🔎 Proposed accessibility enhancement 
 /* List transition animations */
+@media (prefers-reduced-motion: no-preference) {
+  .list-scale-move,
+  .list-scale-enter-active,
+  .list-scale-leave-active {
+    transition-property: opacity, transform;
+    transition-duration: 150ms;
+    transition-timing-function: ease;
+  }
+
+  .list-scale-enter-from,
+  .list-scale-leave-to {
+    opacity: 0;
+    transform: scale(70%);
+  }
+
+  .list-scale-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list-scale-move,
+  .list-scale-enter-active,
+  .list-scale-leave-active {
+    transition: none;
+  }
+
+  .list-scale-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* List transition animations */
.list-scale-move,
.list-scale-enter-active,
.list-scale-leave-active {
transition-property: opacity, transform;
transition-duration: 150ms;
transition-timing-function: ease;
}
.list-scale-enter-from,
.list-scale-leave-to {
opacity: 0;
transform: scale(70%);
}
.list-scale-leave-active {
position: absolute;
width: 100%;
}
/* List transition animations */
@media (prefers-reduced-motion: no-preference) {
.list-scale-move,
.list-scale-enter-active,
.list-scale-leave-active {
transition-property: opacity, transform;
transition-duration: 150ms;
transition-timing-function: ease;
}
.list-scale-enter-from,
.list-scale-leave-to {
opacity: 0;
transform: scale(70%);
}
.list-scale-leave-active {
position: absolute;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.list-scale-move,
.list-scale-enter-active,
.list-scale-leave-active {
transition: none;
}
.list-scale-leave-active {
position: absolute;
width: 100%;
}
}
🤖 Prompt for AI Agents 
In @src/assets/css/style.css around lines 3 - 21, Add support for users who
prefer reduced motion by overriding the animation rules for the
.list-scale-move, .list-scale-enter-active, .list-scale-leave-active,
.list-scale-enter-from and .list-scale-leave-to selectors inside a
prefers-reduced-motion media query; within that query remove transitions (set
transition: none), avoid transforms (reset transform to none) and ensure opacity
is left at its final value so the elements appear immediately without animation
for those users.

11 changes: 9 additions & 2 deletions src/components/button/MoreButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<template>
<div class="relative inline-flex items-center">
<Button size="icon" variant="secondary" @click="popover?.toggle">
<Button
size="icon"
variant="secondary"
:class="buttonClass"
@click="popover?.toggle"
>
<i
:class="
cn(
Expand Down Expand Up @@ -56,15 +61,17 @@
<script setup lang="ts">
import Popover from 'primevue/popover'
import { ref } from 'vue'
import type { HTMLAttributes } from 'vue'

import Button from '@/components/ui/button/Button.vue'
import { cn } from '@/utils/tailwindUtil'

interface MoreButtonProps {
isVertical?: boolean
buttonClass?: HTMLAttributes['class']
}

const { isVertical = false } = defineProps<MoreButtonProps>()
const { isVertical = false, buttonClass } = defineProps<MoreButtonProps>()

defineEmits<{
menuOpened: []
Expand Down
Loading
Loading