From 9c819639083a26b11d02e0be882291ac6d012cf5 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Fri, 4 Apr 2025 04:35:57 +0800
Subject: [PATCH] Optimize server setting dialogue

---
 .../src/components/status/StatusCard.tsx      | 12 ++---
 .../src/components/status/StatusDialog.tsx    | 32 ++++++++++++
 .../src/components/status/StatusIndicator.tsx | 50 ++++++++++---------
 lightrag_webui/src/locales/ar.json            |  3 ++
 lightrag_webui/src/locales/en.json            |  3 ++
 lightrag_webui/src/locales/fr.json            |  3 ++
 lightrag_webui/src/locales/zh.json            |  3 ++
 7 files changed, 76 insertions(+), 30 deletions(-)
 create mode 100644 lightrag_webui/src/components/status/StatusDialog.tsx

diff --git a/lightrag_webui/src/components/status/StatusCard.tsx b/lightrag_webui/src/components/status/StatusCard.tsx
index e67cbd30..c9e64db9 100644
--- a/lightrag_webui/src/components/status/StatusCard.tsx
+++ b/lightrag_webui/src/components/status/StatusCard.tsx
@@ -4,14 +4,14 @@ import { useTranslation } from 'react-i18next'
 const StatusCard = ({ status }: { status: LightragStatus | null }) => {
   const { t } = useTranslation()
   if (!status) {
-    return <div className="text-muted-foreground text-sm">{t('graphPanel.statusCard.unavailable')}</div>
+    return <div className="text-foreground text-xs">{t('graphPanel.statusCard.unavailable')}</div>
   }
 
   return (
-    <div className="min-w-[300px] space-y-3 text-sm">
+    <div className="min-w-[300px] space-y-2 text-xs">
       <div className="space-y-1">
         <h4 className="font-medium">{t('graphPanel.statusCard.storageInfo')}</h4>
-        <div className="text-muted-foreground grid grid-cols-2 gap-1">
+        <div className="text-foreground grid grid-cols-[120px_1fr] gap-1">
           <span>{t('graphPanel.statusCard.workingDirectory')}:</span>
           <span className="truncate">{status.working_directory}</span>
           <span>{t('graphPanel.statusCard.inputDirectory')}:</span>
@@ -21,7 +21,7 @@ const StatusCard = ({ status }: { status: LightragStatus | null }) => {
 
       <div className="space-y-1">
         <h4 className="font-medium">{t('graphPanel.statusCard.llmConfig')}</h4>
-        <div className="text-muted-foreground grid grid-cols-2 gap-1">
+        <div className="text-foreground grid grid-cols-[120px_1fr] gap-1">
           <span>{t('graphPanel.statusCard.llmBinding')}:</span>
           <span>{status.configuration.llm_binding}</span>
           <span>{t('graphPanel.statusCard.llmBindingHost')}:</span>
@@ -35,7 +35,7 @@ const StatusCard = ({ status }: { status: LightragStatus | null }) => {
 
       <div className="space-y-1">
         <h4 className="font-medium">{t('graphPanel.statusCard.embeddingConfig')}</h4>
-        <div className="text-muted-foreground grid grid-cols-2 gap-1">
+        <div className="text-foreground grid grid-cols-[120px_1fr] gap-1">
           <span>{t('graphPanel.statusCard.embeddingBinding')}:</span>
           <span>{status.configuration.embedding_binding}</span>
           <span>{t('graphPanel.statusCard.embeddingBindingHost')}:</span>
@@ -47,7 +47,7 @@ const StatusCard = ({ status }: { status: LightragStatus | null }) => {
 
       <div className="space-y-1">
         <h4 className="font-medium">{t('graphPanel.statusCard.storageConfig')}</h4>
-        <div className="text-muted-foreground grid grid-cols-2 gap-1">
+        <div className="text-foreground grid grid-cols-[120px_1fr] gap-1">
           <span>{t('graphPanel.statusCard.kvStorage')}:</span>
           <span>{status.configuration.kv_storage}</span>
           <span>{t('graphPanel.statusCard.docStatusStorage')}:</span>
diff --git a/lightrag_webui/src/components/status/StatusDialog.tsx b/lightrag_webui/src/components/status/StatusDialog.tsx
new file mode 100644
index 00000000..1f2a8d6e
--- /dev/null
+++ b/lightrag_webui/src/components/status/StatusDialog.tsx
@@ -0,0 +1,32 @@
+import { LightragStatus } from '@/api/lightrag'
+import { useTranslation } from 'react-i18next'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/Dialog'
+import StatusCard from './StatusCard'
+
+interface StatusDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  status: LightragStatus | null
+}
+
+const StatusDialog = ({ open, onOpenChange, status }: StatusDialogProps) => {
+  const { t } = useTranslation()
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{t('graphPanel.statusDialog.title')}</DialogTitle>
+        </DialogHeader>
+        <StatusCard status={status} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default StatusDialog
diff --git a/lightrag_webui/src/components/status/StatusIndicator.tsx b/lightrag_webui/src/components/status/StatusIndicator.tsx
index 263bb99e..5e7d8893 100644
--- a/lightrag_webui/src/components/status/StatusIndicator.tsx
+++ b/lightrag_webui/src/components/status/StatusIndicator.tsx
@@ -1,8 +1,7 @@
 import { cn } from '@/lib/utils'
 import { useBackendState } from '@/stores/state'
 import { useEffect, useState } from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
-import StatusCard from '@/components/status/StatusCard'
+import StatusDialog from './StatusDialog'
 import { useTranslation } from 'react-i18next'
 
 const StatusIndicator = () => {
@@ -11,6 +10,7 @@ const StatusIndicator = () => {
   const lastCheckTime = useBackendState.use.lastCheckTime()
   const status = useBackendState.use.status()
   const [animate, setAnimate] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
 
   // listen to health change
   useEffect(() => {
@@ -21,28 +21,30 @@ const StatusIndicator = () => {
 
   return (
     <div className="fixed right-4 bottom-4 flex items-center gap-2 opacity-80 select-none">
-      <Popover>
-        <PopoverTrigger asChild>
-          <div className="flex cursor-help items-center gap-2">
-            <div
-              className={cn(
-                'h-3 w-3 rounded-full transition-all duration-300',
-                'shadow-[0_0_8px_rgba(0,0,0,0.2)]',
-                health ? 'bg-green-500' : 'bg-red-500',
-                animate && 'scale-125',
-                animate && health && 'shadow-[0_0_12px_rgba(34,197,94,0.4)]',
-                animate && !health && 'shadow-[0_0_12px_rgba(239,68,68,0.4)]'
-              )}
-            />
-            <span className="text-muted-foreground text-xs">
-              {health ? t('graphPanel.statusIndicator.connected') : t('graphPanel.statusIndicator.disconnected')}
-            </span>
-          </div>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto" side="top" align="end">
-          <StatusCard status={status} />
-        </PopoverContent>
-      </Popover>
+      <div 
+        className="flex cursor-pointer items-center gap-2"
+        onClick={() => setDialogOpen(true)}
+      >
+        <div
+          className={cn(
+            'h-3 w-3 rounded-full transition-all duration-300',
+            'shadow-[0_0_8px_rgba(0,0,0,0.2)]',
+            health ? 'bg-green-500' : 'bg-red-500',
+            animate && 'scale-125',
+            animate && health && 'shadow-[0_0_12px_rgba(34,197,94,0.4)]',
+            animate && !health && 'shadow-[0_0_12px_rgba(239,68,68,0.4)]'
+          )}
+        />
+        <span className="text-muted-foreground text-xs">
+          {health ? t('graphPanel.statusIndicator.connected') : t('graphPanel.statusIndicator.disconnected')}
+        </span>
+      </div>
+      
+      <StatusDialog 
+        open={dialogOpen} 
+        onOpenChange={setDialogOpen} 
+        status={status} 
+      />
     </div>
   )
 }
diff --git a/lightrag_webui/src/locales/ar.json b/lightrag_webui/src/locales/ar.json
index 02780abb..10a2afb7 100644
--- a/lightrag_webui/src/locales/ar.json
+++ b/lightrag_webui/src/locales/ar.json
@@ -137,6 +137,9 @@
   },
   "graphPanel": {
     "dataIsTruncated": "تم اقتصار بيانات الرسم البياني على الحد الأقصى للعقد",
+    "statusDialog": {
+      "title": "إعدادات خادم LightRAG"
+    },
     "sideBar": {
       "settings": {
         "settings": "الإعدادات",
diff --git a/lightrag_webui/src/locales/en.json b/lightrag_webui/src/locales/en.json
index 90eedb3c..39a13d94 100644
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -137,6 +137,9 @@
   },
   "graphPanel": {
     "dataIsTruncated": "Graph data is truncated to Max Nodes",
+    "statusDialog": {
+      "title": "LightRAG Server Settings"
+    },
     "sideBar": {
       "settings": {
         "settings": "Settings",
diff --git a/lightrag_webui/src/locales/fr.json b/lightrag_webui/src/locales/fr.json
index 5f59f0bb..b49df261 100644
--- a/lightrag_webui/src/locales/fr.json
+++ b/lightrag_webui/src/locales/fr.json
@@ -137,6 +137,9 @@
   },
   "graphPanel": {
     "dataIsTruncated": "Les données du graphe sont tronquées au nombre maximum de nœuds",
+    "statusDialog": {
+      "title": "Paramètres du Serveur LightRAG"
+    },
     "sideBar": {
       "settings": {
         "settings": "Paramètres",
diff --git a/lightrag_webui/src/locales/zh.json b/lightrag_webui/src/locales/zh.json
index 46979c88..fa204e04 100644
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -137,6 +137,9 @@
   },
   "graphPanel": {
     "dataIsTruncated": "图数据已截断至最大返回节点数",
+    "statusDialog": {
+      "title": "LightRAG 服务器设置"
+    },
     "sideBar": {
       "settings": {
         "settings": "设置",