From da415e9d8041fc9755afefc9491e472ff4f2b4ff Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Mon, 17 Mar 2025 16:35:34 -0700
Subject: [PATCH] [Manager] Always show info panel (#3114)

Co-authored-by: github-actions <github-actions@github.com>
---
 .../content/manager/ManagerDialogContent.vue  |  9 +--
 .../content/manager/infoPanel/InfoPanel.vue   | 71 ++++++++++---------
 .../content/manager/packCard/PackCard.vue     |  2 +-
 src/locales/en/main.json                      |  1 +
 src/locales/fr/main.json                      |  1 +
 src/locales/ja/main.json                      |  1 +
 src/locales/ko/main.json                      |  1 +
 src/locales/ru/main.json                      |  1 +
 src/locales/zh/main.json                      |  1 +
 9 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index 26f20de9d..d3b421e16 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -18,17 +18,15 @@
         v-model:selectedTab="selectedTab"
       />
       <div
-        class="flex-1 overflow-auto"
+        class="flex-1 overflow-auto pr-80"
         :class="{
           'transition-all duration-300': isSmallScreen,
           'pl-80': isSideNavOpen || !isSmallScreen,
-          'pl-8': !isSideNavOpen && isSmallScreen,
-          'pr-80': showInfoPanel
+          'pl-8': !isSideNavOpen && isSmallScreen
         }"
       >
         <div class="px-6 pt-6 flex flex-col h-full">
           <RegistrySearchBar
-            v-if="!hideSearchBar"
             v-model:searchQuery="searchQuery"
             v-model:searchMode="searchMode"
             :searchResults="searchResults"
@@ -80,7 +78,6 @@
         </div>
       </div>
       <div
-        v-if="showInfoPanel"
         class="w-80 border-l-0 border-surface-border absolute right-0 top-0 bottom-0 flex z-20"
       >
         <ContentDivider orientation="vertical" :width="0.2" />
@@ -125,7 +122,6 @@ const {
   isOpen: isSideNavOpen,
   toggle: toggleSideNav
 } = useResponsiveCollapse()
-const hideSearchBar = computed(() => isSmallScreen.value && showInfoPanel.value)
 
 const tabs = ref<TabItem[]>([
   { id: 'all', label: t('g.all'), icon: 'pi-list' },
@@ -211,6 +207,5 @@ const handleGridContainerClick = (event: MouseEvent) => {
   }
 }
 
-const showInfoPanel = computed(() => selectedNodePacks.value.length > 0)
 const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
 </script>
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue b/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
index a18a82069..db04e39aa 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
@@ -1,39 +1,46 @@
 <template>
-  <div class="flex flex-col h-full z-40 hidden-scrollbar w-80">
-    <div class="p-6 flex-1 overflow-hidden text-sm">
-      <InfoPanelHeader :node-packs="[nodePack]" />
-      <div class="mb-6">
-        <MetadataRow
-          v-if="isPackInstalled(nodePack.id)"
-          :label="t('manager.filter.enabled')"
-          class="flex"
-          style="align-items: center"
-        >
-          <PackEnableToggle :node-pack="nodePack" />
-        </MetadataRow>
-        <MetadataRow
-          v-for="item in infoItems"
-          v-show="item.value !== undefined && item.value !== null"
-          :key="item.key"
-          :label="item.label"
-          :value="item.value"
-        />
-        <MetadataRow :label="t('g.status')">
-          <PackStatusMessage
-            :status-type="
-              nodePack.status as components['schemas']['NodeVersionStatus']
-            "
+  <template v-if="nodePack">
+    <div class="flex flex-col h-full z-40 hidden-scrollbar w-80">
+      <div class="p-6 flex-1 overflow-hidden text-sm">
+        <InfoPanelHeader :node-packs="[nodePack]" />
+        <div class="mb-6">
+          <MetadataRow
+            v-if="isPackInstalled(nodePack.id)"
+            :label="t('manager.filter.enabled')"
+            class="flex"
+            style="align-items: center"
+          >
+            <PackEnableToggle :node-pack="nodePack" />
+          </MetadataRow>
+          <MetadataRow
+            v-for="item in infoItems"
+            v-show="item.value !== undefined && item.value !== null"
+            :key="item.key"
+            :label="item.label"
+            :value="item.value"
           />
-        </MetadataRow>
-        <MetadataRow :label="t('manager.version')">
-          <PackVersionBadge :node-pack="nodePack" />
-        </MetadataRow>
-      </div>
-      <div class="mb-6 overflow-hidden">
-        <InfoTabs :node-pack="nodePack" />
+          <MetadataRow :label="t('g.status')">
+            <PackStatusMessage
+              :status-type="
+                nodePack.status as components['schemas']['NodeVersionStatus']
+              "
+            />
+          </MetadataRow>
+          <MetadataRow :label="t('manager.version')">
+            <PackVersionBadge :node-pack="nodePack" />
+          </MetadataRow>
+        </div>
+        <div class="mb-6 overflow-hidden">
+          <InfoTabs :node-pack="nodePack" />
+        </div>
       </div>
     </div>
-  </div>
+  </template>
+  <template v-else>
+    <div class="mt-4 mx-8 flex-1 overflow-hidden text-sm">
+      {{ $t('manager.infoPanelEmpty') }}
+    </div>
+  </template>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 8803577e6..7f6ef9035 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -1,6 +1,6 @@
 <template>
   <Card
-    class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-2xl shadow-elevation-4 dark-theme:bg-dark-elevation-1 transition-all duration-200"
+    class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-2xl shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
     :class="{
       'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
     }"
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 97b85118f..3063445c0 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -99,6 +99,7 @@
   },
   "manager": {
     "title": "Custom Nodes Manager",
+    "infoPanelEmpty": "Click an item to see the info",
     "restartToApplyChanges": "To apply changes, please restart ComfyUI",
     "loadingVersions": "Loading versions...",
     "selectVersion": "Select Version",
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 83a6fc7ce..3dcabf071 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -387,6 +387,7 @@
       "enabled": "Activé",
       "nodePack": "Pack de Nœuds"
     },
+    "infoPanelEmpty": "Cliquez sur un élément pour voir les informations",
     "installSelected": "Installer sélectionné",
     "lastUpdated": "Dernière mise à jour",
     "latestVersion": "Dernière",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index f1e3316f4..acae80eff 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -387,6 +387,7 @@
       "enabled": "有効",
       "nodePack": "ノードパック"
     },
+    "infoPanelEmpty": "アイテムをクリックして情報を表示します",
     "installSelected": "選択したものをインストール",
     "lastUpdated": "最終更新日",
     "latestVersion": "最新",
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 471303114..59c9c9977 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -387,6 +387,7 @@
       "enabled": "활성화",
       "nodePack": "노드 팩"
     },
+    "infoPanelEmpty": "정보를 보려면 항목을 클릭하세요",
     "installSelected": "선택한 항목 설치",
     "lastUpdated": "마지막 업데이트",
     "latestVersion": "최신",
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 734b96773..c8459e301 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -387,6 +387,7 @@
       "enabled": "Включено",
       "nodePack": "Пакет Узлов"
     },
+    "infoPanelEmpty": "Нажмите на элемент, чтобы увидеть информацию",
     "installSelected": "Установить выбранное",
     "lastUpdated": "Последнее обновление",
     "latestVersion": "Последняя",
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 62a4f8ba9..e0cb71639 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -387,6 +387,7 @@
       "enabled": "已启用",
       "nodePack": "节点包"
     },
+    "infoPanelEmpty": "点击一个项目查看信息",
     "installSelected": "安装选定",
     "lastUpdated": "最后更新",
     "latestVersion": "最新",