xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(desktop): improve integration settings search with empty states (#4265)

This commit is contained in:
Konv Suu 2025-07-29 12:14:01 +08:00 committed by GitHub
parent 9095197d15
commit 5fa0d97224
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 80 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/desktop/layer/renderer/src/modules/settings/tabs/integration/CustomIntegrationSection.tsx
View File

@ -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 (

134
apps/desktop/layer/renderer/src/modules/settings/tabs/integration/index.tsx
View File

@ -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 />