improvement(sim-links): match sibling resource pages (loading chrome, shared no-results, menu order, columns)

Author: waleedlatif1

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

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

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

@@ -57,16 +57,16 @@ export function SimLinkContextMenu({
           <ArrowUpRight />
           Open
         </DropdownMenuItem>
+        <DropdownMenuItem onSelect={onCopyLink}>
+          <Duplicate />
+          Copy link
+        </DropdownMenuItem>
         {onEdit && (
           <DropdownMenuItem onSelect={onEdit}>
             <Pencil />
             Edit
           </DropdownMenuItem>
         )}
-        <DropdownMenuItem onSelect={onCopyLink}>
-          <Duplicate />
-          Copy link
-        </DropdownMenuItem>
         {onDelete && <DropdownMenuSeparator />}
         {onDelete && (
           <DropdownMenuItem onSelect={onDelete}>

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

@@ -5,7 +5,6 @@ import { Avatar, Chip, ChipConfirmModal, ChipModalError, writeTextToClipboard }
 import { Link, Plus } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useQueryStates } from 'nuqs'
-import { EmptyState } from '@/components/empty-state/empty-state'
 import type { SimLink } from '@/lib/api/contracts/sim-links'
 import { simLinkPath } from '@/lib/navigation/paths'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
@@ -17,7 +16,10 @@ import {
 import { SimLinkContextMenu } from '@/app/o/[organizationId]/links/sim-link-context-menu'
 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 {
+  ResourceNoResults,
+  SimLinksEmptyState,
+} from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state'
 import type {
   SearchConfig,
   SortConfig,
@@ -37,13 +39,13 @@ import { useUrlSort } from '@/hooks/use-url-sort'
 const logger = createLogger('SimLinks')
 
 const COLUMNS: ResourceColumn[] = [
-  { id: 'name', header: 'Name', widthMultiplier: 0.7 },
+  { id: 'name', header: 'Name' },
   { id: 'destination', header: 'Destination', widthMultiplier: 1.6 },
   { id: 'description', header: 'Description', widthMultiplier: 1.4 },
   { id: 'owner', header: 'Created by' },
-  { id: 'opens', header: 'Opens', widthMultiplier: 0.7 },
+  { id: 'opens', header: 'Opens' },
   { id: 'access', header: 'Access' },
-  { id: 'updated', header: 'Last updated' },
+  { id: 'updated', header: 'Updated' },
 ]
 
 const SORT_OPTIONS = [
@@ -165,14 +167,11 @@ export function SimLinks({ organizationId }: SimLinksProps) {
               <Chip onClick={() => void links.refetch()}>Retry</Chip>
             </div>
           ) : !links.data ? undefined : searching ? (
-            <EmptyState
-              title={`No results for “${debouncedSearch.trim()}”`}
-              description='Searched every Sim link in your organization.'
-              action={
-                <Chip variant='border' onClick={() => setSearch('')}>
-                  Clear search
-                </Chip>
-              }
+            <ResourceNoResults
+              search={debouncedSearch}
+              filterCount={0}
+              searchScope='Searched every Sim link in your organization.'
+              onClear={() => setSearch('')}
             />
           ) : (
             <SimLinksEmptyState onCreate={startCreate} />

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/resource-no-results.tsx

@@ -12,6 +12,8 @@ interface ResourceNoResultsProps {
   filterCount: number
   /** Clears the query and every filter, restoring the open folder's contents. */
   onClear: () => void
+  /** Where a search looked, for a list that isn't foldered within a workspace. */
+  searchScope?: string
 }
 
 /**
@@ -27,14 +29,17 @@ interface ResourceNoResultsProps {
  * while filters narrow only the open folder. The search branch wins when both are set,
  * because the wider scope is the more surprising of the two.
  */
-export function ResourceNoResults({ search, filterCount, onClear }: ResourceNoResultsProps) {
+export function ResourceNoResults({
+  search,
+  filterCount,
+  onClear,
+  searchScope = 'Searched every folder in this workspace.',
+}: ResourceNoResultsProps) {
   const trimmed = search.trim()
   return (
     <EmptyState
       title={trimmed ? `No results for “${trimmed}”` : 'No results'}
-      description={
-        trimmed ? 'Searched every folder in this workspace.' : 'Filters apply to this folder only.'
-      }
+      description={trimmed ? searchScope : 'Filters apply to this folder only.'}
       action={
         <Chip variant='border' onClick={onClear}>
           {trimmed && filterCount > 0