From c13971d7d6deb5a56bd83bb789664a0b50e59800 Mon Sep 17 00:00:00 2001
From: Junyan Chin <rockchinq@gmail.com>
Date: Mon, 23 Mar 2026 22:22:31 +0800
Subject: [PATCH] feat(web): merge plugin readme and config into single detail
 dialog (#2076)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(web): merge plugin readme and config into single detail dialog

- Click plugin card directly opens combined dialog (left: readme, right: config)
- Remove hover overlay with separate readme/config buttons
- Dropdown menu (⋯) still available for update/delete/view source

* fix: prettier format for lucide import
---
 .../PluginInstalledComponent.tsx              | 90 ++++++++-----------
 .../plugin-card/PluginCardComponent.tsx       | 67 ++------------
 2 files changed, 44 insertions(+), 113 deletions(-)

diff --git a/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
index baedfee3..d7d8544a 100644
--- a/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
@@ -38,12 +38,10 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
   (props, ref) => {
     const { t } = useTranslation();
     const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
-    const [modalOpen, setModalOpen] = useState<boolean>(false);
+    const [detailModalOpen, setDetailModalOpen] = useState<boolean>(false);
     const [selectedPlugin, setSelectedPlugin] = useState<PluginCardVO | null>(
       null,
     );
-    const [readmeModalOpen, setReadmeModalOpen] = useState<boolean>(false);
-    const [readmePlugin, setReadmePlugin] = useState<PluginCardVO | null>(null);
     const [showOperationModal, setShowOperationModal] = useState(false);
     const [operationType, setOperationType] = useState<PluginOperationType>(
       PluginOperationType.DELETE,
@@ -166,12 +164,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
 
     function handlePluginClick(plugin: PluginCardVO) {
       setSelectedPlugin(plugin);
-      setModalOpen(true);
-    }
-
-    function handleViewReadme(plugin: PluginCardVO) {
-      setReadmePlugin(plugin);
-      setReadmeModalOpen(true);
+      setDetailModalOpen(true);
     }
 
     function handlePluginDelete(plugin: PluginCardVO) {
@@ -355,52 +348,46 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
           </div>
         ) : (
           <div className={`${styles.pluginListContainer}`}>
-            <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-              <DialogContent className="w-[700px] max-h-[80vh] p-0 flex flex-col">
-                <DialogHeader className="px-6 pt-6 pb-2">
-                  <DialogTitle>{t('plugins.pluginConfig')}</DialogTitle>
-                </DialogHeader>
-                <div className="flex-1 overflow-y-auto px-6">
-                  {selectedPlugin && (
-                    <PluginForm
-                      pluginAuthor={selectedPlugin.author}
-                      pluginName={selectedPlugin.name}
-                      onFormSubmit={(timeout?: number) => {
-                        setModalOpen(false);
-                        if (timeout) {
-                          setTimeout(() => {
-                            getPluginList();
-                          }, timeout);
-                        } else {
-                          getPluginList();
-                        }
-                      }}
-                      onFormCancel={() => {
-                        setModalOpen(false);
-                      }}
-                    />
-                  )}
-                </div>
-              </DialogContent>
-            </Dialog>
-
-            <Dialog open={readmeModalOpen} onOpenChange={setReadmeModalOpen}>
-              <DialogContent className="sm:max-w-[900px] max-w-[90vw] max-h-[85vh] p-0 flex flex-col">
+            <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
+              <DialogContent className="sm:max-w-[1100px] max-w-[95vw] max-h-[85vh] p-0 flex flex-col">
                 <DialogHeader className="px-6 pt-6 pb-2 border-b">
                   <DialogTitle>
-                    {readmePlugin &&
-                      `${readmePlugin.author}/${readmePlugin.name} - ${t(
-                        'plugins.readme',
-                      )}`}
+                    {selectedPlugin &&
+                      `${selectedPlugin.author}/${selectedPlugin.name}`}
                   </DialogTitle>
                 </DialogHeader>
-                <div className="flex-1 overflow-y-auto">
-                  {readmePlugin && (
-                    <PluginReadme
-                      pluginAuthor={readmePlugin.author}
-                      pluginName={readmePlugin.name}
-                    />
-                  )}
+                <div className="flex-1 flex flex-row overflow-hidden min-h-0">
+                  {/* Left side - Readme */}
+                  <div className="flex-1 overflow-y-auto border-r min-w-0">
+                    {selectedPlugin && (
+                      <PluginReadme
+                        pluginAuthor={selectedPlugin.author}
+                        pluginName={selectedPlugin.name}
+                      />
+                    )}
+                  </div>
+                  {/* Right side - Config */}
+                  <div className="w-[380px] flex-shrink-0 overflow-y-auto px-4">
+                    {selectedPlugin && (
+                      <PluginForm
+                        pluginAuthor={selectedPlugin.author}
+                        pluginName={selectedPlugin.name}
+                        onFormSubmit={(timeout?: number) => {
+                          setDetailModalOpen(false);
+                          if (timeout) {
+                            setTimeout(() => {
+                              getPluginList();
+                            }, timeout);
+                          } else {
+                            getPluginList();
+                          }
+                        }}
+                        onFormCancel={() => {
+                          setDetailModalOpen(false);
+                        }}
+                      />
+                    )}
+                  </div>
                 </div>
               </DialogContent>
             </Dialog>
@@ -413,7 +400,6 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
                     onCardClick={() => handlePluginClick(vo)}
                     onDeleteClick={() => handlePluginDelete(vo)}
                     onUpgradeClick={() => handlePluginUpdate(vo)}
-                    onViewReadme={() => handleViewReadme(vo)}
                   />
                 </div>
               );
diff --git a/web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
index c15c349d..341493b2 100644
--- a/web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
@@ -2,15 +2,7 @@ import { PluginCardVO } from '@/app/home/plugins/components/plugin-installed/Plu
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { useTranslation } from 'react-i18next';
-import {
-  BugIcon,
-  ExternalLink,
-  Ellipsis,
-  Trash,
-  ArrowUp,
-  Settings,
-  FileText,
-} from 'lucide-react';
+import { BugIcon, ExternalLink, Ellipsis, Trash, ArrowUp } from 'lucide-react';
 import { getCloudServiceClientSync, systemInfo } from '@/app/infra/http';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { Button } from '@/components/ui/button';
@@ -27,28 +19,20 @@ export default function PluginCardComponent({
   onCardClick,
   onDeleteClick,
   onUpgradeClick,
-  onViewReadme,
 }: {
   cardVO: PluginCardVO;
   onCardClick: () => void;
   onDeleteClick: (cardVO: PluginCardVO) => void;
   onUpgradeClick: (cardVO: PluginCardVO) => void;
-  onViewReadme: (cardVO: PluginCardVO) => void;
 }) {
   const { t } = useTranslation();
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
 
   return (
     <>
       <div
         className="w-[100%] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem] cursor-pointer dark:bg-[#1f1f22] relative transition-all duration-200 hover:shadow-[0px_3px_6px_0_rgba(0,0,0,0.12)] hover:scale-[1.005]"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => {
-          if (!dropdownOpen) {
-            setIsHovered(false);
-          }
-        }}
+        onClick={() => onCardClick()}
       >
         <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
           {/* Icon - fixed width */}
@@ -145,7 +129,10 @@ export default function PluginCardComponent({
           </div>
 
           {/* Menu button - fixed width and position */}
-          <div className="flex flex-col items-center justify-between h-full relative z-20 flex-shrink-0">
+          <div
+            className="flex flex-col items-center justify-between h-full relative z-20 flex-shrink-0"
+            onClick={(e) => e.stopPropagation()}
+          >
             <div className="flex items-center justify-center"></div>
 
             <div className="flex items-center justify-center">
@@ -153,9 +140,6 @@ export default function PluginCardComponent({
                 open={dropdownOpen}
                 onOpenChange={(open) => {
                   setDropdownOpen(open);
-                  if (!open) {
-                    setIsHovered(false);
-                  }
                 }}
               >
                 <DropdownMenuTrigger asChild>
@@ -233,45 +217,6 @@ export default function PluginCardComponent({
             </div>
           </div>
         </div>
-
-        {/* Hover overlay with action buttons */}
-        <div
-          className={`absolute inset-0 bg-gray-100/55 dark:bg-black/35 rounded-[10px] flex items-center justify-center gap-3 transition-all duration-200 z-10 ${
-            isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'
-          }`}
-        >
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              onViewReadme(cardVO);
-            }}
-            className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 transition-all duration-200 ${
-              isHovered
-                ? 'translate-y-0 opacity-100'
-                : 'translate-y-1 opacity-0'
-            }`}
-            style={{ transitionDelay: isHovered ? '10ms' : '0ms' }}
-          >
-            <FileText className="w-4 h-4" />
-            {t('plugins.readme')}
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              onCardClick();
-            }}
-            variant="outline"
-            className={`bg-white hover:bg-gray-100 text-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 transition-all duration-200 ${
-              isHovered
-                ? 'translate-y-0 opacity-100'
-                : 'translate-y-1 opacity-0'
-            }`}
-            style={{ transitionDelay: isHovered ? '20ms' : '0ms' }}
-          >
-            <Settings className="w-4 h-4" />
-            {t('plugins.config')}
-          </Button>
-        </div>
       </div>
     </>
   );