refactor(ui): centralize document file-type icons in EMCN

apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx

@@ -2,10 +2,10 @@
 
 import { useState } from 'react'
 import { Button, Download, Loader } from '@sim/emcn'
-import { Music } from '@sim/emcn/icons'
+import { DefaultFileIcon, Music } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { sleep } from '@sim/utils/helpers'
-import { DefaultFileIcon, getDocumentIcon } from '@/components/icons/document-icons'
+import { getDocumentIcon } from '@/components/icons/document-icons'
 import { isSafeHttpUrl } from '@/lib/core/utils/urls'
 import { saveBlob } from '@/lib/uploads/client/download'
 import { tryInferContextFromKey } from '@/lib/uploads/utils/file-utils'

apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-data.ts

@@ -1,11 +1,11 @@
 import type { ComponentType, SVGProps } from 'react'
+import { CsvIcon, DocxIcon, MarkdownIcon, PdfIcon } from '@sim/emcn/icons'
 import type {
   BLOCK_DIMENSIONS,
   CONNECTION_KNOB_PEAK_PX,
   HANDLE_POSITIONS,
 } from '@sim/workflow-renderer'
 import { AgentIcon, GithubIcon, JiraIcon } from '@/components/icons'
-import { CsvIcon, DocxIcon, MarkdownIcon, PdfIcon } from '@/components/icons/document-icons'
 
 /**
  * Shared data + geometry for the hero visual - the single source of truth the

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/files-menu-preview.tsx

@@ -1,6 +1,14 @@
 import { Chip } from '@sim/emcn'
-import { ArrowUpDown, Files, Folder, ListFilter, Search } from '@sim/emcn/icons'
-import { CsvIcon, DocxIcon, PdfIcon } from '@/components/icons/document-icons'
+import {
+  ArrowUpDown,
+  CsvIcon,
+  DocxIcon,
+  Files,
+  Folder,
+  ListFilter,
+  PdfIcon,
+  Search,
+} from '@sim/emcn/icons'
 import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
 import {
   MenuPreviewHeader,

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/knowledge-menu-preview.tsx

@@ -1,6 +1,13 @@
 import { Badge, Chip } from '@sim/emcn'
-import { ArrowUpDown, ChevronRight, Database, ListFilter, Search } from '@sim/emcn/icons'
-import { DocxIcon, PdfIcon } from '@/components/icons/document-icons'
+import {
+  ArrowUpDown,
+  ChevronRight,
+  Database,
+  DocxIcon,
+  ListFilter,
+  PdfIcon,
+  Search,
+} from '@sim/emcn/icons'
 import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
 import {
   MenuPreviewHeader,

apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react'
 import { ChipTag, cn } from '@sim/emcn'
-import { DocxIcon, PdfIcon } from '@/components/icons/document-icons'
+import { DocxIcon, PdfIcon } from '@sim/emcn/icons'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css'
 import { InteractiveLibraryFolder } from '@/app/(landing)/files/components/feature-graphics/interactive-library-folder'

apps/sim/app/(landing)/files/components/files-hero-loop.tsx

@@ -3,9 +3,18 @@
 import type { ReactNode } from 'react'
 import { useState } from 'react'
 import { cn } from '@sim/emcn'
-import { ArrowUpDown, File, ListFilter, Plus, Search } from '@sim/emcn/icons'
+import {
+  ArrowUpDown,
+  CsvIcon,
+  DocxIcon,
+  File,
+  ListFilter,
+  PdfIcon,
+  Plus,
+  Search,
+  ZipIcon,
+} from '@sim/emcn/icons'
 import { AgentIcon } from '@/components/icons'
-import { CsvIcon, DocxIcon, PdfIcon, ZipIcon } from '@/components/icons/document-icons'
 import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
 import { PLATFORM_LOOP_RESET_FADE_MS } from '@/app/(landing)/components/shared/platform-loop-constants'
 import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/drop-overlay/drop-overlay.tsx

@@ -1,18 +1,18 @@
 'use client'
 
 import { memo } from 'react'
-import { ImageUp } from '@sim/emcn/icons'
 import {
   AudioIcon,
   CsvIcon,
   DocxIcon,
+  ImageUp,
   JsonIcon,
   MarkdownIcon,
   PdfIcon,
   TxtIcon,
   VideoIcon,
   XlsxIcon,
-} from '@/components/icons/document-icons'
+} from '@sim/emcn/icons'
 
 const DROP_OVERLAY_ICONS = [
   PdfIcon,

apps/sim/components/icons/document-icons.test.ts

@@ -1,6 +1,7 @@
 /** @vitest-environment node */
+import { DefaultFileIcon, ZipIcon } from '@sim/emcn/icons'
 import { describe, expect, it } from 'vitest'
-import { DefaultFileIcon, getDocumentIcon, ZipIcon } from '@/components/icons/document-icons'
+import { getDocumentIcon } from '@/components/icons/document-icons'
 
 describe('getDocumentIcon', () => {
   it('uses the zip icon for zip archives by extension or mime type', () => {

apps/sim/components/icons/document-icons.tsx

@@ -1,265 +1,27 @@
 import type { SVGProps } from 'react'
+import {
+  AudioIcon,
+  ChartFileIcon,
+  CsvIcon,
+  DefaultFileIcon,
+  DocxIcon,
+  HtmlIcon,
+  JsonIcon,
+  MarkdownIcon,
+  PdfIcon,
+  PptxIcon,
+  TxtIcon,
+  VideoIcon,
+  XlsxIcon,
+  ZipIcon,
+} from '@sim/emcn/icons'
 import {
   SUPPORTED_ARCHIVE_EXTENSIONS,
   SUPPORTED_ARCHIVE_MIME_TYPES,
   SUPPORTED_AUDIO_EXTENSIONS,
   SUPPORTED_VIDEO_EXTENSIONS,
 } from '@/lib/uploads/utils/validation'
 
-export function PdfIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <rect x='4' y='2' width='16' height='20' rx='2' stroke='currentColor' strokeWidth='1.5' />
-      <text
-        x='12'
-        y='12'
-        textAnchor='middle'
-        dominantBaseline='central'
-        fontSize='5.5'
-        fontWeight='bold'
-        fontFamily='Arial, sans-serif'
-        letterSpacing='0.5'
-        fill='currentColor'
-      >
-        PDF
-      </text>
-    </svg>
-  )
-}
-
-export function DocxIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-      <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-      <path d='M16 9H8' />
-      <path d='M16 13H8' />
-      <path d='M16 17H8' />
-    </svg>
-  )
-}
-
-export function XlsxIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <rect x='3' y='3' width='18' height='18' rx='2' stroke='currentColor' strokeWidth='1.5' />
-      <line x1='3' y1='9' x2='21' y2='9' stroke='currentColor' strokeWidth='1.5' />
-      <line x1='3' y1='15' x2='21' y2='15' stroke='currentColor' strokeWidth='1.5' />
-      <line x1='9' y1='3' x2='9' y2='21' stroke='currentColor' strokeWidth='1.5' />
-      <line x1='15' y1='3' x2='15' y2='21' stroke='currentColor' strokeWidth='1.5' />
-    </svg>
-  )
-}
-
-export function CsvIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <rect x='3' y='1' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
-      <rect x='13' y='1' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
-      <rect x='3' y='9' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
-      <rect x='13' y='9' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
-      <rect x='3' y='17' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
-      <rect x='13' y='17' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
-    </svg>
-  )
-}
-
-export function TxtIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-      <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-      <path d='M16 13H8' />
-      <path d='M12 17H8' />
-    </svg>
-  )
-}
-
-export function PptxIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <rect x='2' y='4' width='20' height='16' rx='2' />
-      <line x1='6' y1='9' x2='18' y2='9' />
-      <line x1='8' y1='14' x2='16' y2='14' />
-    </svg>
-  )
-}
-
-export function AudioIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <line x1='4' y1='14' x2='4' y2='10' />
-      <line x1='8' y1='17' x2='8' y2='7' />
-      <line x1='12' y1='15' x2='12' y2='9' />
-      <line x1='16' y1='18' x2='16' y2='6' />
-      <line x1='20' y1='14' x2='20' y2='10' />
-    </svg>
-  )
-}
-
-export function VideoIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <rect x='2' y='4' width='20' height='16' rx='2' stroke='currentColor' strokeWidth='1.5' />
-      <path d='M10 9l5 3-5 3V9Z' fill='currentColor' />
-    </svg>
-  )
-}
-
-export function ChartFileIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M3 3v17a1 1 0 0 0 1 1h17' />
-      <rect x='7' y='12' width='3' height='6' rx='0.5' />
-      <rect x='12.5' y='8' width='3' height='10' rx='0.5' />
-      <rect x='18' y='5' width='3' height='13' rx='0.5' />
-    </svg>
-  )
-}
-
-export function HtmlIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M8 8l-4 4 4 4' />
-      <path d='M16 8l4 4-4 4' />
-      <line x1='14' y1='4' x2='10' y2='20' />
-    </svg>
-  )
-}
-
-export function JsonIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M8 3H7a2 2 0 0 0-2 2v4c0 1.1-.9 2-2 2 1.1 0 2 .9 2 2v4a2 2 0 0 0 2 2h1' />
-      <path d='M16 3h1a2 2 0 0 1 2 2v4c0 1.1.9 2 2 2-1.1 0-2 .9-2 2v4a2 2 0 0 1-2 2h-1' />
-    </svg>
-  )
-}
-
-export function MarkdownIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <rect x='2' y='4' width='20' height='16' rx='3' stroke='currentColor' strokeWidth='1.5' />
-      <path
-        d='M6 15V9l3 3.5L12 9v6'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M17 9v6m-2-2l2 2 2-2'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export function ZipIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-      <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-      <path d='M10 5h1' />
-      <path d='M11 8h1' />
-      <path d='M10 11h1' />
-      <rect x='9' y='14' width='4' height='5' rx='1' />
-    </svg>
-  )
-}
-
-export function DefaultFileIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-      <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-    </svg>
-  )
-}
-
 export function getDocumentIcon(
   rawMimeType: string,
   filename: string