From 5fa0d97224505f9e76f4bd649eec902ea07251f9 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Tue, 29 Jul 2025 12:14:01 +0800
Subject: [PATCH] feat(desktop): improve integration settings search with empty
 states (#4265)

---
 .../integration/CustomIntegrationSection.tsx  |   9 +-
 .../settings/tabs/integration/index.tsx       | 134 ++++++++++--------
 2 files changed, 80 insertions(+), 63 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/CustomIntegrationSection.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/CustomIntegrationSection.tsx
index 3e6864158..c176d5263 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/CustomIntegrationSection.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/CustomIntegrationSection.tsx
@@ -133,8 +133,13 @@ export const CustomIntegrationSection = memo(({ searchQuery }: CustomIntegration
     [settings.customIntegration],
   )
 
-  if (!customIntegrationsMatchesSearch) {
-    return null
+  if (settings.enableCustomIntegration && !customIntegrationsMatchesSearch) {
+    return (
+      <div className="text-center">
+        <i className="i-mgc-webhook-cute-re text-text-tertiary mb-3 text-2xl" />
+        <p className="text-text-tertiary mb-2 text-sm font-medium">No custom integration found</p>
+      </div>
+    )
   }
 
   return (
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/index.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/index.tsx
index d09acde9c..0260a1f94 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/index.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/tabs/integration/index.tsx
@@ -401,74 +401,86 @@ export const SettingIntegration = () => {
       <Divider />
 
       {/* Built-in Integration Section */}
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <SettingSectionTitle title={t("integration.builtin.title")} />
-          <span className="text-text-tertiary flex items-center gap-1 text-sm tabular-nums">
-            <span className="bg-green size-2 rounded-full" />
-            {filteredCategories.reduce(
-              (acc, cat) => acc + cat.integrations.filter((i) => i.configured).length,
-              0,
-            )}
-            /{filteredCategories.reduce((acc, cat) => acc + cat.integrations.length, 0)} configured
-          </span>
-        </div>
+      {filteredCategories.length > 0 ? (
+        <>
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <SettingSectionTitle title={t("integration.builtin.title")} />
+              <span className="text-text-tertiary flex items-center gap-1 text-sm tabular-nums">
+                <span className="bg-green size-2 rounded-full" />
+                {filteredCategories.reduce(
+                  (acc, cat) => acc + cat.integrations.filter((i) => i.configured).length,
+                  0,
+                )}
+                /{filteredCategories.reduce((acc, cat) => acc + cat.integrations.length, 0)}{" "}
+                configured
+              </span>
+            </div>
 
-        <div className="space-y-4">
-          {filteredCategories.map((category) => (
-            <CollapseGroup key={category.id}>
-              <Collapse
-                title={
-                  <div className="flex items-center gap-3">
-                    <span className="text-text-secondary inline-flex items-center justify-center">
-                      {category.icon}
-                    </span>
-                    <span className="font-medium">{category.title as string}</span>
-                    <span className="text-text-tertiary ml-auto mr-2 flex items-center gap-1 text-xs tabular-nums">
-                      <span className="bg-green size-1.5 rounded-full" />
-                      {category.integrations.filter((i) => i.configured).length}/
-                      {category.integrations.length}
-                    </span>
-                  </div>
-                }
-                defaultOpen={shouldDefaultOpen(category)}
-                className="border-border bg-background rounded-lg border px-4 py-2 shadow-sm"
-                contentClassName="px-4 pb-4 pt-8"
-              >
-                <div className="space-y-6">
-                  {category.integrations.map((integration) => (
-                    <div key={integration.key} className="space-y-4">
-                      <div className="border-fill-secondary flex items-center gap-3 border-b pb-3">
+            <div className="space-y-4">
+              {filteredCategories.map((category) => (
+                <CollapseGroup key={category.id}>
+                  <Collapse
+                    title={
+                      <div className="flex items-center gap-3">
                         <span className="text-text-secondary inline-flex items-center justify-center">
-                          {integration.icon}
+                          {category.icon}
                         </span>
-                        <h4 className="text-text font-medium">{integration.title as string}</h4>
-                        <div className="ml-auto flex items-center gap-2">
-                          {integration.configured && (
-                            <span className="bg-green/10 text-green inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs">
-                              <i className="i-mingcute-check-line" />
-                              {t("integration.status.configured")}
+                        <span className="font-medium">{category.title as string}</span>
+                        <span className="text-text-tertiary ml-auto mr-2 flex items-center gap-1 text-xs tabular-nums">
+                          <span className="bg-green size-1.5 rounded-full" />
+                          {category.integrations.filter((i) => i.configured).length}/
+                          {category.integrations.length}
+                        </span>
+                      </div>
+                    }
+                    defaultOpen={shouldDefaultOpen(category)}
+                    className="border-border bg-background rounded-lg border px-4 py-2 shadow-sm"
+                    contentClassName="px-4 pb-4 pt-8"
+                  >
+                    <div className="space-y-6">
+                      {category.integrations.map((integration) => (
+                        <div key={integration.key} className="space-y-4">
+                          <div className="border-fill-secondary flex items-center gap-3 border-b pb-3">
+                            <span className="text-text-secondary inline-flex items-center justify-center">
+                              {integration.icon}
                             </span>
-                          )}
-                          {integration.enabled && (
-                            <span className="bg-blue/10 text-blue inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs">
-                              <i className="i-mingcute-power-line" />
-                              {t("integration.status.enabled")}
-                            </span>
-                          )}
+                            <h4 className="text-text font-medium">{integration.title as string}</h4>
+                            <div className="ml-auto flex items-center gap-2">
+                              {integration.configured && (
+                                <span className="bg-green/10 text-green inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs">
+                                  <i className="i-mingcute-check-line" />
+                                  {t("integration.status.configured")}
+                                </span>
+                              )}
+                              {integration.enabled && (
+                                <span className="bg-blue/10 text-blue inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs">
+                                  <i className="i-mingcute-power-line" />
+                                  {t("integration.status.enabled")}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                          <div className="pl-7">
+                            <SettingBuilder settings={integration.settings} />
+                          </div>
                         </div>
-                      </div>
-                      <div className="pl-7">
-                        <SettingBuilder settings={integration.settings} />
-                      </div>
+                      ))}
                     </div>
-                  ))}
-                </div>
-              </Collapse>
-            </CollapseGroup>
-          ))}
+                  </Collapse>
+                </CollapseGroup>
+              ))}
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="text-center">
+          <i className="i-mingcute-document-line text-text-tertiary mb-3 text-2xl" />
+          <p className="text-text-tertiary mb-2 text-sm font-medium">
+            No built-in integration found
+          </p>
         </div>
-      </div>
+      )}
 
       <Divider />