From a350b59361bf90f5a382e556fb90f58dc3fc8067 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 3 Feb 2026 13:24:52 -0800
Subject: [PATCH] feat: Add educational hint to favorites empty state (#8559)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Adds an educational hint to the favorites empty state to teach users how
to favorite inputs.

## Changes

- Add new i18n key `favoritesNoneHint` with text "In the Parameters tab,
click ⋮ on any input to add it here"
- Update empty state template to show hint below the existing
description
- Hint is hidden during search to avoid redundant messaging

## Before/After

**Before:** "Inputs you favorite will show up here"

**After:**
- "Inputs you favorite will show up here"
- "In the Parameters tab, click ⋮ on any input to add it here*

## Context

Per Slack discussion, uses in-app education only (no external docs link)
to ensure text matches the user's specific version of the feature.

Fixes #2fa6d73d

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8559-feat-Add-educational-hint-to-favorites-empty-state-2fc6d73d365081f5827dfafcc1ece95c)
by [Unito](https://www.unito.io)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Improved empty state in the Parameters panel: message is now two
paragraphs and shows an additional hint (with an icon) when not
searching.
* **Localization**
* Added a new localized hint that explains how to add inputs to
favorites, shown in the Parameters panel empty state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe>
---
 .../parameters/TabGlobalParameters.vue        | 27 +++++++++++++++----
 src/locales/en/main.json                      |  1 +
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
index 51740bb59..89871f700 100644
--- a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
+++ b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
@@ -131,11 +131,28 @@ onBeforeUnmount(() => {
   >
     <template #empty>
       <div class="text-sm text-muted-foreground px-4 text-center py-10">
-        {{
-          isSearching
-            ? t('rightSidePanel.noneSearchDesc')
-            : t('rightSidePanel.favoritesNoneDesc')
-        }}
+        <p>
+          {{
+            isSearching
+              ? t('rightSidePanel.noneSearchDesc')
+              : t('rightSidePanel.favoritesNoneDesc')
+          }}
+        </p>
+        <i18n-t
+          v-if="!isSearching"
+          keypath="rightSidePanel.favoritesNoneHint"
+          tag="p"
+          class="mt-2 text-xs"
+        >
+          <template #moreIcon>
+            <span
+              aria-hidden="true"
+              class="inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover text-secondary-foreground align-middle"
+            >
+              <i class="icon-[lucide--more-vertical] text-sm" />
+            </span>
+          </template>
+        </i18n-t>
       </div>
     </template>
   </SectionWidgets>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index dd108e647..8825fbf9c 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2837,6 +2837,7 @@
     "groupSettings": "Group Settings",
     "groups": "Groups",
     "favoritesNoneDesc": "Inputs you favorite will show up here",
+    "favoritesNoneHint": "In the Parameters tab, click {moreIcon} on any input to add it here",
     "noneSearchDesc": "No items match your search",
     "nodesNoneDesc": "NO NODES",
     "fallbackGroupTitle": "Group",