From 856440384fad0d1cd2d3749ca97f03203997a620 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Tue, 28 Apr 2026 18:42:31 +0200
Subject: [PATCH] fix design

---
 web/html/index.html | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/html/index.html b/web/html/index.html
index 3cd21677..62e9453b 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -169,6 +169,14 @@
               </a-col>
               <a-col :sm="24" :lg="12">
                 <a-card title='3X-UI' hoverable>
+                  <template v-if="panelUpdateModal.info.updateAvailable" #extra>
+                    <a-tooltip :overlay-class-name="themeSwitcher.currentTheme" :title='`{{ i18n "pages.index.updatePanel" }}: ${panelUpdateModal.info.latestVersion}`'>
+                      <a-tag color="orange" style="cursor:pointer;margin:0" @click="openPanelUpdate">
+                        <a-icon type="cloud-download"></a-icon>[[ panelUpdateModal.info.latestVersion ]]
+                      <span v-if="!isMobile">{{ i18n "pages.index.updatePanel" }}</span>
+                      </a-tag>
+                    </a-tooltip>
+                  </template>
                   <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank">
                     <a-tag color="green">
                       <span>v{{ .cur_ver }}</span>
@@ -184,12 +192,6 @@
                       <span>{{ i18n "pages.index.documentation" }}</span>
                     </a-tag>
                   </a>
-                  <template #actions>
-                    <a-space direction="horizontal" @click="openPanelUpdate" class="jc-center">
-                      <a-icon type="cloud-download"></a-icon>
-                      <span v-if="!isMobile">{{ i18n "pages.index.updatePanel" }}</span>
-                    </a-space>
-                  </template>
                 </a-card>
               </a-col>
               <a-col :sm="24" :lg="12">
@@ -1430,6 +1432,13 @@
       // Initial status fetch
       await this.getStatus();
 
+      // Silently check for panel updates so the indicator shows on load
+      HttpUtil.get('/panel/api/server/getPanelUpdateInfo').then(msg => {
+        if (msg && msg.success && msg.obj) {
+          panelUpdateModal.info = msg.obj;
+        }
+      });
+
       // Setup WebSocket for real-time updates
       if (window.wsClient) {
         window.wsClient.connect();