improvement(ui): share missing resource states

Author: Bill Leoutsakos

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

@@ -2,7 +2,6 @@ export {
   isResourceListEmpty,
   resourceListState,
 } from '@/app/workspace/[workspaceId]/components/resource/is-resource-list-empty'
-export { ResourceNotFound } from '@/app/workspace/[workspaceId]/components/resource/resource-not-found'
 export { ConversationListItem } from './conversation-list-item'
 export type { ErrorBoundaryProps, ErrorStateProps } from './error'
 export { ErrorShell, ErrorState } from './error'

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

@@ -1,7 +1,15 @@
 'use client'
 
 import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { OverflowText, PlayOutline, Skeleton, TabStripAction, Tooltip, toast } from '@sim/emcn'
+import {
+  OverflowText,
+  PlayOutline,
+  ResourceEmptyState,
+  Skeleton,
+  TabStripAction,
+  Tooltip,
+  toast,
+} from '@sim/emcn'
 import {
   Download,
   FileX,
@@ -666,17 +674,11 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
 
   if (!workflowExists || hasLoadError) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <WorkflowX className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>
-            Workflow not found
-          </h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This workflow may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={WorkflowX}
+        title='Workflow not found'
+        description='This workflow may have been deleted or moved'
+      />
     )
   }
 
@@ -731,15 +733,11 @@ function EmbeddedFile({
 
   if (!file) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <FileX className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>File not found</h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This file may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={FileX}
+        title='File not found'
+        description='This file may have been deleted or moved'
+      />
     )
   }
 
@@ -782,15 +780,11 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
 
   if (!folder) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <FolderIcon className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>Folder not found</h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This folder may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={FolderIcon}
+        title='Folder not found'
+        description='This folder may have been deleted or moved'
+      />
     )
   }
 
@@ -840,15 +834,11 @@ function EmbeddedLog({ workspaceId, logId, onNotFound }: EmbeddedLogProps) {
 
   if (!log) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <Library className='size-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>Log not found</h2>
-          <p className='text-[var(--text-body)] text-small'>
-            This log may have been deleted or is no longer available
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={Library}
+        title='Log not found'
+        description='This log may have been deleted or is no longer available'
+      />
     )
   }
 

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -1,7 +1,14 @@
 'use client'
 
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
-import { Badge, ChipCombobox, ChipConfirmModal, chipContentLabelClass, cn } from '@sim/emcn'
+import {
+  Badge,
+  ChipCombobox,
+  ChipConfirmModal,
+  chipContentLabelClass,
+  cn,
+  ResourceEmptyState,
+} from '@sim/emcn'
 import {
   ChevronDown,
   ChevronUp,
@@ -38,7 +45,6 @@ import type {
 import {
   EMPTY_CELL_PLACEHOLDER,
   Resource,
-  ResourceNotFound,
   SearchHighlight,
 } from '@/app/workspace/[workspaceId]/components'
 import {
@@ -1163,7 +1169,7 @@ export function Document({
    */
   if (documentError && !documentData) {
     return (
-      <ResourceNotFound
+      <ResourceEmptyState
         icon={FileX}
         title='Document not found'
         description='This document may have been deleted or moved'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -19,6 +19,7 @@ import {
   cn,
   FloatingTooltip,
   isTextClipped,
+  ResourceEmptyState,
   Tooltip,
   useFloatingTooltip,
 } from '@sim/emcn'
@@ -72,7 +73,6 @@ import {
   FloatingOverflowText,
   isResourceListEmpty,
   Resource,
-  ResourceNotFound,
   SearchHighlight,
 } from '@/app/workspace/[workspaceId]/components'
 import {
@@ -1310,7 +1310,7 @@ export function KnowledgeBase({
 
   if (error && !knowledgeBase) {
     return (
-      <ResourceNotFound
+      <ResourceEmptyState
         icon={DatabaseX}
         title='Knowledge base not found'
         description='This knowledge base may have been deleted or moved'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { cn, toast, useToast } from '@sim/emcn'
+import { cn, ResourceEmptyState, toast, useToast } from '@sim/emcn'
 import { Loader, TableX } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import type { TableCellSelection } from '@sim/realtime-protocol/table-presence'
@@ -4695,17 +4695,11 @@ export function TableGrid({
 
   if (!isLoadingTable && !tableData) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <TableX className='size-[32px] text-[var(--text-muted)]' />
-        <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[var(--text-secondary)] text-xl leading-[inherit]'>
-            Table not found
-          </h2>
-          <p className='text-[var(--text-muted)] text-small'>
-            This table may have been deleted or moved
-          </p>
-        </div>
-      </div>
+      <ResourceEmptyState
+        icon={TableX}
+        title='Table not found'
+        description='This table may have been deleted or moved'
+      />
     )
   }
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -209,6 +209,10 @@ export {
 } from './popover/popover'
 export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
 export { ProgressItem } from './progress-item/progress-item'
+export {
+  ResourceEmptyState,
+  type ResourceEmptyStateProps,
+} from './resource-empty-state/resource-empty-state'
 export { SecretInput } from './secret-input/secret-input'
 export { SecretReveal } from './secret-reveal/secret-reveal'
 export { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from './sim-wordmark/paths'

packages/emcn/src/components/index.ts

@@ -0,0 +1,24 @@
+import type { ComponentType } from 'react'
+
+export interface ResourceEmptyStateProps {
+  icon: ComponentType<{ className?: string }>
+  title: string
+  description: string
+}
+
+/**
+ * Centered resource-empty state for a page or panel. The caller owns loading and
+ * access decisions; this component only presents the unavailable-resource message.
+ * @example <ResourceEmptyState icon={FileX} title='File not found' description='This file may have been deleted or moved' />
+ */
+export function ResourceEmptyState({ icon: Icon, title, description }: ResourceEmptyStateProps) {
+  return (
+    <div className='flex h-full flex-col items-center justify-center gap-3 text-center'>
+      <Icon className='size-[32px] text-[var(--text-icon)]' />
+      <div className='flex flex-col items-center gap-1'>
+        <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>{title}</h2>
+        <p className='text-[var(--text-body)] text-small'>{description}</p>
+      </div>
+    </div>
+  )
+}