[Manager] Always show info panel (#3114)

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

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,
+          'pl-8': !isSideNavOpen && isSmallScreen
-          'pr-80': showInfoPanel
         }"
       >
         <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>

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">
+  <template v-if="nodePack">
-    <div class="p-6 flex-1 overflow-hidden text-sm">
+    <div class="flex flex-col h-full z-40 hidden-scrollbar w-80">
-      <InfoPanelHeader :node-packs="[nodePack]" />
+      <div class="p-6 flex-1 overflow-hidden text-sm">
-      <div class="mb-6">
+        <InfoPanelHeader :node-packs="[nodePack]" />
-        <MetadataRow
+        <div class="mb-6">
-          v-if="isPackInstalled(nodePack.id)"
+          <MetadataRow
-          :label="t('manager.filter.enabled')"
+            v-if="isPackInstalled(nodePack.id)"
-          class="flex"
+            :label="t('manager.filter.enabled')"
-          style="align-items: center"
+            class="flex"
-        >
+            style="align-items: center"
-          <PackEnableToggle :node-pack="nodePack" />
+          >
-        </MetadataRow>
+            <PackEnableToggle :node-pack="nodePack" />
-        <MetadataRow
+          </MetadataRow>
-          v-for="item in infoItems"
+          <MetadataRow
-          v-show="item.value !== undefined && item.value !== null"
+            v-for="item in infoItems"
-          :key="item.key"
+            v-show="item.value !== undefined && item.value !== null"
-          :label="item.label"
+            :key="item.key"
-          :value="item.value"
+            :label="item.label"
-        />
+            :value="item.value"
-        <MetadataRow :label="t('g.status')">
-          <PackStatusMessage
-            :status-type="
-              nodePack.status as components['schemas']['NodeVersionStatus']
-            "
           />
-        </MetadataRow>
+          <MetadataRow :label="t('g.status')">
-        <MetadataRow :label="t('manager.version')">
+            <PackStatusMessage
-          <PackVersionBadge :node-pack="nodePack" />
+              :status-type="
-        </MetadataRow>
+                nodePack.status as components['schemas']['NodeVersionStatus']
-      </div>
+              "
-      <div class="mb-6 overflow-hidden">
+            />
-        <InfoTabs :node-pack="nodePack" />
+          </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">

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
     }"

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",

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",

src/locales/ja/main.json

@@ -387,6 +387,7 @@
       "enabled": "有効",
       "nodePack": "ノードパック"
     },
+    "infoPanelEmpty": "アイテムをクリックして情報を表示します",
     "installSelected": "選択したものをインストール",
     "lastUpdated": "最終更新日",
     "latestVersion": "最新",

src/locales/ko/main.json

@@ -387,6 +387,7 @@
       "enabled": "활성화",
       "nodePack": "노드 팩"
     },
+    "infoPanelEmpty": "정보를 보려면 항목을 클릭하세요",
     "installSelected": "선택한 항목 설치",
     "lastUpdated": "마지막 업데이트",
     "latestVersion": "최신",

src/locales/ru/main.json

@@ -387,6 +387,7 @@
       "enabled": "Включено",
       "nodePack": "Пакет Узлов"
     },
+    "infoPanelEmpty": "Нажмите на элемент, чтобы увидеть информацию",
     "installSelected": "Установить выбранное",
     "lastUpdated": "Последнее обновление",
     "latestVersion": "Последняя",

src/locales/zh/main.json

@@ -387,6 +387,7 @@
       "enabled": "已启用",
       "nodePack": "节点包"
     },
+    "infoPanelEmpty": "点击一个项目查看信息",
     "installSelected": "安装选定",
     "lastUpdated": "最后更新",
     "latestVersion": "最新",