improvement(sim-links): cleanup and simplify pass (menu reads live link, shared columns, lazy favicons, sort-reversal e2e check)

Author: waleedlatif1

apps/sim/app/o/[organizationId]/links/columns.ts

@@ -0,0 +1,16 @@
+import { Plus } from '@sim/emcn/icons'
+import type { ResourceColumn } from '@/app/workspace/[workspaceId]/components/resource/resource'
+
+/** Shared by the page and its loading chrome so the skeleton matches the table. */
+export const SIM_LINK_COLUMNS = [
+  { id: 'name', header: 'Name' },
+  { id: 'destination', header: 'Destination', widthMultiplier: 2 },
+  { id: 'description', header: 'Description', widthMultiplier: 1.4 },
+  { id: 'owner', header: 'Created by' },
+  { id: 'access', header: 'Access' },
+  { id: 'updated', header: 'Updated' },
+] as const satisfies readonly ResourceColumn[]
+
+export const SIM_LINKS_SEARCH_PLACEHOLDER = 'Search Sim links...'
+
+export const NEW_SIM_LINK_ACTION = { text: 'New link', icon: Plus, variant: 'primary' } as const

apps/sim/app/o/[organizationId]/links/loading.tsx

@@ -1,33 +1,21 @@
 'use client'
 
-import { Link, Plus } from '@sim/emcn/icons'
+import { Link } from '@sim/emcn/icons'
 import {
-  type ChromeActionSpec,
-  ResourceChromeFallback,
-} from '@/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback'
-import type { ResourceColumn } from '@/app/workspace/[workspaceId]/components/resource/resource'
-
-const COLUMNS = [
-  { id: 'name', header: 'Name' },
-  { id: 'destination', header: 'Destination', widthMultiplier: 2 },
-  { id: 'description', header: 'Description', widthMultiplier: 1.4 },
-  { id: 'owner', header: 'Created by' },
-  { id: 'access', header: 'Access' },
-  { id: 'updated', header: 'Updated' },
-] as const satisfies readonly ResourceColumn[]
-
-const ACTIONS = [
-  { text: 'New link', icon: Plus, variant: 'primary' },
-] as const satisfies readonly ChromeActionSpec[]
+  NEW_SIM_LINK_ACTION,
+  SIM_LINK_COLUMNS,
+  SIM_LINKS_SEARCH_PLACEHOLDER,
+} from '@/app/o/[organizationId]/links/columns'
+import { ResourceChromeFallback } from '@/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback'
 
 export default function SimLinksLoading() {
   return (
     <ResourceChromeFallback
       icon={Link}
       title='Sim Links'
-      columns={COLUMNS}
-      actions={ACTIONS}
-      searchPlaceholder='Search Sim links...'
+      columns={SIM_LINK_COLUMNS}
+      actions={[NEW_SIM_LINK_ACTION]}
+      searchPlaceholder={SIM_LINKS_SEARCH_PLACEHOLDER}
       hasSort
     />
   )

apps/sim/app/o/[organizationId]/links/sim-link-context-menu.tsx

@@ -61,12 +61,14 @@ export function SimLinkContextMenu({
             Edit
           </DropdownMenuItem>
         )}
-        {onDelete && <DropdownMenuSeparator />}
         {onDelete && (
-          <DropdownMenuItem onSelect={onDelete}>
-            <Trash />
-            Delete
-          </DropdownMenuItem>
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={onDelete}>
+              <Trash />
+              Delete
+            </DropdownMenuItem>
+          </>
         )}
       </DropdownMenuContent>
     </DropdownMenu>

apps/sim/app/o/[organizationId]/links/sim-link-icon.tsx

@@ -21,6 +21,8 @@ export function SimLinkIcon({ url }: SimLinkIconProps) {
       src={faviconUrl(hostname, 64)}
       alt=''
       referrerPolicy='no-referrer'
+      loading='lazy'
+      decoding='async'
       className='rounded-sm'
       onError={() => setFailedHostname(hostname)}
     />

apps/sim/app/o/[organizationId]/links/sim-links.tsx

@@ -2,12 +2,17 @@
 
 import { useMemo, useState } from 'react'
 import { Avatar, Chip, ChipConfirmModal, ChipModalError, writeTextToClipboard } from '@sim/emcn'
-import { Link, Plus } from '@sim/emcn/icons'
+import { Link } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useQueryStates } from 'nuqs'
 import type { SimLink } from '@/lib/api/contracts/sim-links'
 import { simLinkPath } from '@/lib/navigation/paths'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
+import {
+  NEW_SIM_LINK_ACTION,
+  SIM_LINK_COLUMNS,
+  SIM_LINKS_SEARCH_PLACEHOLDER,
+} from '@/app/o/[organizationId]/links/columns'
 import SimLinksLoading from '@/app/o/[organizationId]/links/loading'
 import {
   simLinksParsers,
@@ -28,7 +33,6 @@ import type {
 import { timeCell } from '@/app/workspace/[workspaceId]/components/resource/components/time-cell'
 import {
   Resource,
-  type ResourceColumn,
   type ResourceRow,
 } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import { useDeleteSimLink, useSimLinks } from '@/hooks/queries/sim-links'
@@ -39,15 +43,6 @@ import { useUrlSort } from '@/hooks/use-url-sort'
 
 const logger = createLogger('SimLinks')
 
-const COLUMNS = [
-  { id: 'name', header: 'Name' },
-  { id: 'destination', header: 'Destination', widthMultiplier: 2 },
-  { id: 'description', header: 'Description', widthMultiplier: 1.4 },
-  { id: 'owner', header: 'Created by' },
-  { id: 'access', header: 'Access' },
-  { id: 'updated', header: 'Updated' },
-] as const satisfies readonly ResourceColumn[]
-
 const SORT_OPTIONS = [
   { id: 'name', label: 'Name' },
   { id: 'popular', label: 'Opens' },
@@ -83,15 +78,17 @@ export function SimLinks({ organizationId }: SimLinksProps) {
   )
   const debouncedSearch = useSearchFilterValue(search, SEARCH_DEBOUNCE_MS)
   const { sort, dir, activeSort, onSort, onClear } = useUrlSort(simLinksSortParams, simLinksUrlKeys)
-  const links = useSimLinks(organizationId, debouncedSearch.trim(), sort, dir)
+  const query = debouncedSearch.trim()
+  const links = useSimLinks(organizationId, query, sort, dir)
   const remove = useDeleteSimLink(organizationId)
   const contextMenu = useContextMenu()
-  const [menuLink, setMenuLink] = useState<SimLink | null>(null)
+  const [menuLinkId, setMenuLinkId] = useState<string | null>(null)
   const [editing, setEditing] = useState<SimLink | null>(null)
   const [deleting, setDeleting] = useState<SimLink | null>(null)
 
   const loaded = useMemo(() => links.data?.pages.flatMap((page) => page.links) ?? [], [links.data])
   const linksById = useMemo(() => new Map(loaded.map((link) => [link.id, link])), [loaded])
+  const menuLink = menuLinkId ? linksById.get(menuLinkId) : undefined
 
   const rows: ResourceRow[] = useMemo(
     () =>
@@ -125,10 +122,9 @@ export function SimLinks({ organizationId }: SimLinksProps) {
     value: search,
     onChange: setSearch,
     onClearAll: () => setSearch(''),
-    placeholder: 'Search Sim links...',
+    placeholder: SIM_LINKS_SEARCH_PLACEHOLDER,
   }
   const sortConfig: SortConfig = { options: SORT_OPTIONS, active: activeSort, onSort, onClear }
-  const searching = Boolean(debouncedSearch.trim())
   const startCreate = () => void setView({ create: '' })
 
   if (!links.data && !links.isLoadingError) return <SimLinksLoading />
@@ -138,22 +134,19 @@ export function SimLinks({ organizationId }: SimLinksProps) {
       <Resource.Header
         icon={Link}
         title='Sim Links'
-        actions={[
-          { id: 'create', text: 'New link', icon: Plus, variant: 'primary', onSelect: startCreate },
-        ]}
+        actions={[{ ...NEW_SIM_LINK_ACTION, id: 'create', onSelect: startCreate }]}
       />
       <Resource.Options search={searchConfig} sort={sortConfig} />
       <Resource.Table
-        columns={COLUMNS}
+        columns={SIM_LINK_COLUMNS}
         rows={rows}
         onRowClick={(id) => {
           const link = linksById.get(id)
           if (link) openLink(link.name)
         }}
         onRowContextMenu={(event, id) => {
-          const link = linksById.get(id)
-          if (!link) return
-          setMenuLink(link)
+          if (!linksById.has(id)) return
+          setMenuLinkId(id)
           contextMenu.handleContextMenu(event)
         }}
         onLoadMore={() => void links.fetchNextPage()}
@@ -167,9 +160,9 @@ export function SimLinks({ organizationId }: SimLinksProps) {
               <p className='text-[var(--text-error)] text-small'>{links.error.message}</p>
               <Chip onClick={() => void links.refetch()}>Retry</Chip>
             </div>
-          ) : searching ? (
+          ) : query ? (
             <ResourceNoResults
-              search={debouncedSearch}
+              search={query}
               filterCount={0}
               searchScope='Searched every Sim link in your organization.'
               onClear={() => setSearch('')}

apps/sim/lib/sim-links/repository.ts

@@ -87,7 +87,7 @@ export async function listSimLinks(
     dir = sort === 'popular' ? 'desc' : 'asc',
   }: { search?: string; cursor?: string; sort?: SimLinkSort; dir?: SortDirection }
 ): Promise<{ links: SimLinkRecord[]; nextCursor: string | null }> {
-  const order = dir === 'asc' ? asc : desc
+  const [order, after] = dir === 'asc' ? ([asc, gt] as const) : ([desc, lt] as const)
   const conditions: (SQL | undefined)[] = [eq(simLink.organizationId, organizationId)]
   if (!viewer.isAdmin) {
     conditions.push(or(eq(simLink.unlisted, false), eq(simLink.createdBy, viewer.userId)))
@@ -111,11 +111,7 @@ export async function listSimLinks(
       .limit(PAGE_SIZE)
     return { links: rows.map(toRecord), nextCursor: null }
   }
-  if (cursor) {
-    conditions.push(
-      dir === 'asc' ? gt(simLink.normalizedName, cursor) : lt(simLink.normalizedName, cursor)
-    )
-  }
+  if (cursor) conditions.push(after(simLink.normalizedName, cursor))
   const rows = await selectRecords(db)
     .where(and(...conditions))
     .orderBy(order(simLink.normalizedName))

apps/sim/scripts/test-sim-links-e2e.ts

@@ -103,10 +103,9 @@ async function create(member: Member, body: SimLinkBody): Promise<string> {
   return link.id
 }
 
-async function listedNames(member: Member, search?: string, order?: string): Promise<string[]> {
-  const params = [search && `search=${encodeURIComponent(search)}`, order].filter(Boolean)
-  const query = params.length ? `?${params.join('&')}` : ''
-  const { links } = await api(member, query, {})
+async function listedNames(member: Member, params: Record<string, string> = {}): Promise<string[]> {
+  const query = new URLSearchParams(params).toString()
+  const { links } = await api(member, query ? `?${query}` : '', {})
   assert(Array.isArray(links), 'Expected a link list')
   return links.map((link) => (isRecordLike(link) ? String(link.name) : ''))
 }
@@ -285,8 +284,8 @@ async function run() {
   })
 
   await check('search matches names regardless of punctuation and the sim/ prefix', async () => {
-    assert.deepEqual(await listedNames(member, 'sim/teamhand'), ['Team-Handbook'])
-    assert.deepEqual(await listedNames(member, 'everything lives'), ['Team-Handbook'])
+    assert.deepEqual(await listedNames(member, { search: 'sim/teamhand' }), ['Team-Handbook'])
+    assert.deepEqual(await listedNames(member, { search: 'everything lives' }), ['Team-Handbook'])
   })
 
   await check('restricted links refuse edits from other members', async () => {
@@ -345,12 +344,10 @@ async function run() {
     assert.equal(visits.get('jira'), 4, 'Each jira redirect counts once')
     assert.equal(visits.get('gh'), 0, 'A link opened without its values is not a visit')
     await api(member, '?sort=popular&cursor=jira', { expected: 400 })
-    const descending = await listedNames(member, undefined, 'sort=name&dir=desc')
-    const sortKey = (name: string) => name.toLowerCase().replace(/[.:@&~_-]/g, '')
     assert.deepEqual(
-      descending.map(sortKey),
-      descending.map(sortKey).sort().reverse(),
-      'Expected Z to A by the matching key'
+      await listedNames(member, { sort: 'name', dir: 'desc' }),
+      [...(await listedNames(member))].reverse(),
+      'Expected Z to A to be the default A to Z order reversed'
     )
     const { links: leastUsed } = await api(member, '?sort=popular&dir=asc', {})
     assert(Array.isArray(leastUsed), 'Expected a link list')