improvement(tables): clean up duplicate types, unnecessary memos, and barrel imports (#4205)

* improvement(tables): clean up duplicate types, unnecessary memos, and barrel imports

* fix(tables): revert barrel import in client component to avoid bundling server-only deps

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx

@@ -244,16 +244,15 @@ export function ImportCsvDialog({
     }
   }, [mapping, parsed?.headers, table.schema.columns])
 
-  const appendCapacityDeficit = useMemo(() => {
-    if (!parsed || mode !== 'append') return 0
-    const projected = table.rowCount + parsed.totalRows
-    return projected > table.maxRows ? projected - table.maxRows : 0
-  }, [mode, parsed, table.maxRows, table.rowCount])
+  const appendCapacityDeficit =
+    parsed && mode === 'append' && table.rowCount + parsed.totalRows > table.maxRows
+      ? table.rowCount + parsed.totalRows - table.maxRows
+      : 0
 
-  const replaceCapacityDeficit = useMemo(() => {
-    if (!parsed || mode !== 'replace') return 0
-    return parsed.totalRows > table.maxRows ? parsed.totalRows - table.maxRows : 0
-  }, [mode, parsed, table.maxRows])
+  const replaceCapacityDeficit =
+    parsed && mode === 'replace' && parsed.totalRows > table.maxRows
+      ? parsed.totalRows - table.maxRows
+      : 0
 
   const canSubmit =
     parsed !== null &&
@@ -264,12 +263,11 @@ export function ImportCsvDialog({
     appendCapacityDeficit === 0 &&
     replaceCapacityDeficit === 0
 
-  const importCsv = importMutation.mutateAsync
   const handleSubmit = useCallback(async () => {
     if (!parsed || !canSubmit) return
     setSubmitError(null)
     try {
-      const result = await importCsv({
+      const result = await importMutation.mutateAsync({
         workspaceId,
         tableId: table.id,
         file: parsed.file,
@@ -294,9 +292,9 @@ export function ImportCsvDialog({
       setSubmitError(summarizeImportError(message))
       logger.error('CSV import into existing table failed', err)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     canSubmit,
-    importCsv,
     mapping,
     mode,
     onImported,
@@ -363,7 +361,7 @@ export function ImportCsvDialog({
             <div className='flex flex-col gap-4'>
               <div className='flex items-center justify-between gap-3 rounded-sm border border-[var(--border)] p-2'>
                 <div className='flex min-w-0 flex-col'>
-                  <span className='truncate text-caption text-[var(--text-primary)]'>
+                  <span className='truncate text-[var(--text-primary)] text-caption'>
                     {parsed.file.name}
                   </span>
                   <span className='text-[var(--text-tertiary)] text-xs'>

apps/sim/hooks/queries/tables.ts

@@ -5,7 +5,15 @@
 import { createLogger } from '@sim/logger'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from '@/components/emcn'
-import type { Filter, RowData, Sort, TableDefinition, TableMetadata, TableRow } from '@/lib/table'
+import type {
+  CsvHeaderMapping,
+  Filter,
+  RowData,
+  Sort,
+  TableDefinition,
+  TableMetadata,
+  TableRow,
+} from '@/lib/table'
 
 const logger = createLogger('TableQueries')
 
@@ -780,7 +788,6 @@ export function useUploadCsvToTable() {
   })
 }
 
-export type CsvHeaderMapping = Record<string, string | null>
 export type CsvImportMode = 'append' | 'replace'
 
 interface ImportCsvIntoTableParams {

apps/sim/lib/copilot/tools/server/table/user-table.ts

@@ -6,9 +6,9 @@ import {
   type ServerToolContext,
 } from '@/lib/copilot/tools/server/base-tool'
 import { generateId } from '@/lib/core/utils/uuid'
-import { COLUMN_TYPES } from '@/lib/table/constants'
 import {
   buildAutoMapping,
+  COLUMN_TYPES,
   CSV_MAX_BATCH_SIZE,
   type CsvHeaderMapping,
   CsvImportValidationError,
@@ -17,7 +17,7 @@ import {
   parseCsvBuffer,
   sanitizeName,
   validateMapping,
-} from '@/lib/table/csv-import'
+} from '@/lib/table'
 import {
   addTableColumn,
   batchInsertRows,

apps/sim/lib/table/query-builder/use-query-builder.ts

@@ -2,7 +2,7 @@
  * Hooks for query builder UI state management (filters and sorting).
  */
 
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { generateShortId } from '@/lib/core/utils/uuid'
 import type { ColumnOption } from '../types'
 import {
@@ -15,28 +15,28 @@ import {
 
 export type { ColumnOption }
 
+const comparisonOptions: ColumnOption[] = COMPARISON_OPERATORS.map((op) => ({
+  value: op.value,
+  label: op.label,
+}))
+
+const logicalOptions: ColumnOption[] = LOGICAL_OPERATORS.map((op) => ({
+  value: op.value,
+  label: op.label,
+}))
+
+const sortDirectionOptions: ColumnOption[] = SORT_DIRECTIONS.map((d) => ({
+  value: d.value,
+  label: d.label,
+}))
+
 /** Manages filter rule state with add/remove/update operations. */
 export function useFilterBuilder({
   columns,
   rules,
   setRules,
   isReadOnly = false,
 }: UseFilterBuilderProps): UseFilterBuilderReturn {
-  const comparisonOptions = useMemo(
-    () => COMPARISON_OPERATORS.map((op) => ({ value: op.value, label: op.label })),
-    []
-  )
-
-  const logicalOptions = useMemo(
-    () => LOGICAL_OPERATORS.map((op) => ({ value: op.value, label: op.label })),
-    []
-  )
-
-  const sortDirectionOptions = useMemo(
-    () => SORT_DIRECTIONS.map((d) => ({ value: d.value, label: d.label })),
-    []
-  )
-
   const createDefaultRule = useCallback((): FilterRule => {
     return {
       id: generateShortId(),
@@ -85,11 +85,6 @@ export function useSortBuilder({
   sortRule,
   setSortRule,
 }: UseSortBuilderProps): UseSortBuilderReturn {
-  const sortDirectionOptions = useMemo(
-    () => SORT_DIRECTIONS.map((d) => ({ value: d.value, label: d.label })),
-    []
-  )
-
   const addSort = useCallback(() => {
     setSortRule({
       id: generateShortId(),