improvement(sim-links): show each link's destination favicon (#9489)

Sim link rows show the destination site's favicon via the shared faviconUrl helper, falling back to a globe when none loads.

Author: waleedlatif1

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<string | null>(null)
+  const origin = simLinkOrigin(url)
+  const hostname = origin ? new URL(origin).hostname : null
+  if (!hostname || failedHostname === hostname) return <Globe />
+  return (
+    <img
+      src={faviconUrl(hostname, 64)}
+      alt=''
+      referrerPolicy='no-referrer'
+      className='rounded-sm'
+      onError={() => setFailedHostname(hostname)}
+    />
+  )
+}

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 (
               <SettingsResourceRow
                 key={link.id}
-                icon={<Link />}
+                icon={<SimLinkIcon url={link.url} />}
                 title={`sim/${link.name}`}
                 description={link.description ? `${link.description} · ${link.url}` : link.url}
                 badge={<SimLinkDetails link={link} />}