diff --git a/apps/sim/app/o/[organizationId]/links/sim-link-icon.tsx b/apps/sim/app/o/[organizationId]/links/sim-link-icon.tsx new file mode 100644 index 00000000000..921f17367c3 --- /dev/null +++ b/apps/sim/app/o/[organizationId]/links/sim-link-icon.tsx @@ -0,0 +1,28 @@ +'use client' + +import { useState } from 'react' +import { Globe } from '@sim/emcn/icons' +import { faviconUrl } from '@/lib/core/utils/favicon' +import { simLinkOrigin } from '@/lib/sim-links/validation' + +interface SimLinkIconProps { + /** The link's destination; a variable link's `{*}` never changes its host. */ + url: string +} + +/** The destination site's favicon, or a globe when the site has none. */ +export function SimLinkIcon({ url }: SimLinkIconProps) { + const [failedHostname, setFailedHostname] = useState(null) + const origin = simLinkOrigin(url) + const hostname = origin ? new URL(origin).hostname : null + if (!hostname || failedHostname === hostname) return + return ( + setFailedHostname(hostname)} + /> + ) +} diff --git a/apps/sim/app/o/[organizationId]/links/sim-links.tsx b/apps/sim/app/o/[organizationId]/links/sim-links.tsx index 473da019c77..5420c3497dc 100644 --- a/apps/sim/app/o/[organizationId]/links/sim-links.tsx +++ b/apps/sim/app/o/[organizationId]/links/sim-links.tsx @@ -13,7 +13,7 @@ import { DropdownMenuTrigger, writeTextToClipboard, } from '@sim/emcn' -import { Link, MoreHorizontal, Plus } from '@sim/emcn/icons' +import { MoreHorizontal, Plus } from '@sim/emcn/icons' import { createLogger } from '@sim/logger' import { formatRelativeTime } from '@sim/utils/formatting' import { useQueryStates } from 'nuqs' @@ -26,6 +26,7 @@ import { useOrganizationPageFilters, } from '@/app/o/[organizationId]/components/organization-page' import { simLinkViewParsers } from '@/app/o/[organizationId]/links/search-params' +import { SimLinkIcon } from '@/app/o/[organizationId]/links/sim-link-icon' import { SimLinkModal } from '@/app/o/[organizationId]/links/sim-link-modal' import { SimLinksEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state' import { @@ -127,7 +128,7 @@ export function SimLinks({ organizationId }: SimLinksProps) { return ( } + icon={} title={`sim/${link.name}`} description={link.description ? `${link.description} ยท ${link.url}` : link.url} badge={}