refactor(emcn): share resource row and tile chrome

apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts

@@ -1,7 +1,2 @@
-export {
-  BrandTile,
-  RESOURCE_TILE_BASE,
-  RESOURCE_TILE_FILL,
-  RESOURCE_TILE_PLAIN,
-  ResourceTile,
-} from '@/app/workspace/[workspaceId]/components/resource-tile/resource-tile'
+export { RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN, ResourceTile } from '@sim/emcn'
+export { BrandTile } from './resource-tile'

apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx

@@ -1,38 +1,7 @@
 import type { ComponentType } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN } from '@sim/emcn'
 import { getTileIconColorClass } from '@/blocks/icon-color'
 
-interface ResourceTileProps {
-  icon: ComponentType<{ className?: string }>
-}
-
-/**
- * Geometry and border of the square resource tile — the single source for that
- * chrome, shared by {@link ResourceTile} and `SettingsResourceRow` so the skills,
- * custom tools, and settings surfaces cannot drift apart. Pair with a fill. Sizing
- * the glyph is the tile's job: the descendant rule outranks an icon's own class.
- */
-export const RESOURCE_TILE_BASE =
-  'flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] [&_svg]:size-5'
-
-/** Filled treatment worn by the skills and custom tools resource tiles. */
-export const RESOURCE_TILE_FILL = 'bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
-
-/** Page-background fill, for tiles holding a brand logo or a site favicon. */
-export const RESOURCE_TILE_PLAIN = 'bg-[var(--bg)]'
-
-/**
- * Square glyph tile identifying a workspace resource — the leading visual on a
- * resource's row and on its detail heading.
- */
-export function ResourceTile({ icon: Icon }: ResourceTileProps) {
-  return (
-    <div className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_FILL)}>
-      <Icon className='text-[var(--text-icon)]' />
-    </div>
-  )
-}
-
 interface BrandTileProps {
   icon: ComponentType<{ className?: string }>
   background: string | null | undefined

apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx

@@ -16,8 +16,41 @@ const { mockBridge, mockSearch, mockToast } = vi.hoisted(() => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
-  /** `SettingsResourceRow` composes its tile classes with `cn`. */
   cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+  ResourceRow: ({
+    title,
+    description,
+    icon,
+    trailing,
+    onClick,
+    clickLabel,
+    disabled,
+  }: {
+    title: ReactNode
+    description?: ReactNode
+    icon?: ReactNode
+    trailing?: ReactNode
+    onClick?: () => void
+    clickLabel?: string
+    disabled?: boolean
+  }) => (
+    <div>
+      {onClick && !disabled ? (
+        <button type='button' aria-label={clickLabel} onClick={onClick}>
+          {icon}
+          {title}
+          {description}
+        </button>
+      ) : (
+        <span>
+          {icon}
+          {title}
+          {description}
+        </span>
+      )}
+      {trailing}
+    </div>
+  ),
   ArrowLeft: () => <span />,
   ArrowRight: () => <span />,
   ChipConfirmModal: ({

apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/index.ts

@@ -1,6 +1,2 @@
-export {
-  RESOURCE_LIST_GRID,
-  RESOURCE_LIST_STACK,
-  RESOURCE_ROW_ARROW_CLASSES,
-  SettingsResourceRow,
-} from './settings-resource-row'
+export { RESOURCE_LIST_GRID, RESOURCE_LIST_STACK, RESOURCE_ROW_ARROW_CLASSES } from '@sim/emcn'
+export { SettingsResourceRow } from './settings-resource-row'

apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.test.tsx

@@ -0,0 +1,31 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row'
+
+describe('SettingsResourceRow', () => {
+  it('renders a real Next link beside interactive trailing controls', () => {
+    const html = renderToStaticMarkup(
+      <SettingsResourceRow
+        title='Knowledge base'
+        description='Connected resource'
+        href='/workspace/example/knowledge'
+        clickLabel='Open knowledge base'
+        navigable
+        trailing={<button type='button'>More actions</button>}
+      />
+    )
+    const container = document.createElement('div')
+    container.innerHTML = html
+
+    const link = container.querySelector('a')
+    const action = container.querySelector('button')
+    expect(link?.getAttribute('href')).toBe('/workspace/example/knowledge')
+    expect(link?.getAttribute('aria-label')).toBe('Open knowledge base')
+    expect(link?.getAttribute('aria-describedby')).toBe(container.querySelector('span[id]')?.id)
+    expect(link?.contains(action ?? null)).toBe(false)
+    expect(action?.textContent).toBe('More actions')
+  })
+})