fix(emcn/header): icon consistency — breadcrumb menus, Connections, FolderCode

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -1796,6 +1796,7 @@ export function Files() {
             ? [
                 {
                   label: 'Rename',
+                  icon: Pencil,
                   disabled: !canEdit,
                   onClick: () => breadcrumbRenameRef.current.startRename(folder.id, folder.name),
                 },

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

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ChipDropdownOption } from '@sim/emcn'
 import { Button, ChipConfirmModal, ChipDropdown, Plus, Tooltip, toast } from '@sim/emcn'
-import { Database, FolderPlus } from '@sim/emcn/icons'
+import { Database, FolderPlus, Pencil, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams, useRouter } from 'next/navigation'
@@ -925,13 +925,15 @@ export function Knowledge() {
             ? [
                 {
                   label: 'Rename',
+                  icon: Pencil,
                   onClick: () => {
                     const folder = breadcrumbs[breadcrumbs.length - 1]
                     breadcrumbRenameRef.current.startRename(folder.id, folder.name)
                   },
                 },
                 {
                   label: 'Delete',
+                  icon: Trash,
                   onClick: () => setFolderPendingDelete(breadcrumbs[breadcrumbs.length - 1]),
                 },
               ]

apps/sim/app/workspace/[workspaceId]/tables/tables.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ComboboxOption } from '@sim/emcn'
 import { ChipCombobox, ChipConfirmModal, Plus, toast, Upload } from '@sim/emcn'
-import { Columns3, FolderPlus, Rows3, Table as TableIcon } from '@sim/emcn/icons'
+import { Columns3, FolderPlus, Pencil, Rows3, Table as TableIcon, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
@@ -467,11 +467,13 @@ export function Tables() {
     return [
       {
         label: 'Rename',
+        icon: Pencil,
         disabled: !canEdit,
         onClick: () => breadcrumbRename.startRename(folder.id, folder.name),
       },
       {
         label: 'Delete',
+        icon: Trash,
         disabled: !canEdit,
         /**
          * The only way to delete the folder you are inside — its own row is not in the list.

packages/emcn/src/icons/connections.tsx

@@ -1,26 +1,38 @@
 import type { SVGProps } from 'react'
 
 /**
- * Connections icon component
+ * Connections icon component - a four-node lattice for integrations
+ *
+ * Redrawn on the house geometry (24-box, 1.55 stroke, round joins) so it sits
+ * at the weight of the icons it shares the resource registry with. The original
+ * topology is preserved: a 2x2 grid with a circle top-right, linked left-to-
+ * right along the top, down the right column, and left-to-right along the
+ * bottom.
+ *
  * @param props - SVG properties including className, fill, etc.
  */
 export function Connections(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width='13'
-      height='13'
-      viewBox='0 0 13 13'
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
       fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path
-        d='M10.167 0C11.73 0 13 1.27 13 2.83C13 4.23 11.993 5.38 10.667 5.62V7.34C10.99 7.34 11.27 7.35 11.51 7.38C11.89 7.43 12.23 7.54 12.51 7.82C12.79 8.1 12.9 8.45 12.95 8.82C13 9.18 13 9.63 13 10.167C13 10.7 13 11.155 12.95 11.51C12.9 11.89 12.79 12.23 12.51 12.51C12.23 12.79 11.89 12.9 11.51 12.95C11.155 13 10.7 13 10.167 13C9.63 13 9.18 13 8.82 12.95C8.45 12.9 8.1 12.79 7.82 12.51C7.54 12.23 7.43 11.89 7.38 11.51C7.35 11.27 7.34 10.99 7.34 10.667H5.66C5.66 10.99 5.65 11.27 5.62 11.51C5.57 11.89 5.46 12.23 5.18 12.51C4.9 12.79 4.55 12.9 4.18 12.95C3.82 13 3.37 13 2.83 13C2.3 13 1.85 13 1.49 12.95C1.11 12.9 0.77 12.79 0.49 12.51C0.21 12.23 0.1 11.89 0.05 11.51C0 11.155 -5.3e-07 10.7 0 10.167C0 9.63 0 9.18 0.05 8.82C0.1 8.45 0.21 8.1 0.49 7.82C0.77 7.54 1.11 7.43 1.49 7.38C1.85 7.33 2.3 7.33 2.83 7.33C3.37 7.33 3.82 7.33 4.18 7.38C4.55 7.43 4.9 7.54 5.18 7.82C5.46 8.1 5.57 8.45 5.62 8.82C5.65 9.06 5.66 9.34 5.66 9.67H7.34C7.34 9.34 7.35 9.06 7.38 8.82C7.43 8.45 7.54 8.1 7.82 7.82C8.1 7.54 8.45 7.43 8.82 7.38C9.06 7.35 9.34 7.34 9.67 7.34V5.62C8.5 5.41 7.59 4.5 7.38 3.33H5.66C5.66 3.66 5.65 3.94 5.62 4.18C5.57 4.55 5.46 4.9 5.18 5.18C4.9 5.46 4.55 5.57 4.18 5.62C3.82 5.67 3.37 5.67 2.83 5.67C2.3 5.67 1.85 5.67 1.49 5.62C1.11 5.57 0.77 5.46 0.49 5.18C0.21 4.9 0.1 4.55 0.05 4.18C0 3.82 0 3.37 0 2.83C-5.67e-07 2.3 0 1.85 0.05 1.49C0.1 1.11 0.21 0.77 0.49 0.49C0.77 0.21 1.11 0.1 1.49 0.05C1.85 0 2.3 -5.67e-07 2.83 0C3.37 0 3.82 0 4.18 0.05C4.55 0.1 4.9 0.21 5.18 0.49C5.46 0.77 5.57 1.11 5.62 1.49C5.65 1.73 5.66 2.01 5.66 2.33H7.38C7.62 1.01 8.77 0 10.167 0ZM2.83 8.33C2.27 8.33 1.9 8.33 1.62 8.37C1.36 8.41 1.26 8.47 1.2 8.53C1.13 8.59 1.07 8.69 1.04 8.95C1 9.23 1 9.6 1 10.167C1 10.73 1 11.1 1.04 11.38C1.07 11.64 1.13 11.74 1.2 11.8C1.26 11.87 1.36 11.93 1.62 11.96C1.9 12 2.27 12 2.83 12C3.4 12 3.77 12 4.05 11.96C4.31 11.93 4.41 11.87 4.47 11.8C4.53 11.74 4.59 11.64 4.63 11.38C4.67 11.1 4.67 10.73 4.67 10.167C4.67 9.6 4.67 9.23 4.63 8.95C4.59 8.69 4.53 8.59 4.47 8.53C4.41 8.47 4.31 8.41 4.05 8.37C3.77 8.33 3.4 8.33 2.83 8.33ZM10.167 8.33C9.6 8.33 9.23 8.33 8.95 8.37C8.69 8.41 8.59 8.47 8.53 8.53C8.47 8.59 8.41 8.69 8.37 8.95C8.33 9.23 8.33 9.6 8.33 10.167C8.33 10.73 8.33 11.1 8.37 11.38C8.41 11.64 8.47 11.74 8.53 11.8C8.59 11.87 8.69 11.93 8.95 11.96C9.23 12 9.6 12 10.167 12C10.73 12 11.1 12 11.38 11.96C11.64 11.93 11.74 11.87 11.8 11.8C11.87 11.74 11.93 11.64 11.96 11.38C12 11.1 12 10.73 12 10.167C12 9.6 12 9.23 11.96 8.95C11.93 8.69 11.87 8.59 11.8 8.53C11.74 8.47 11.64 8.41 11.38 8.37C11.1 8.33 10.73 8.33 10.167 8.33ZM2.83 1C2.27 1 1.9 1 1.62 1.04C1.36 1.07 1.26 1.13 1.2 1.2C1.13 1.26 1.07 1.36 1.04 1.62C1 1.9 1 2.27 1 2.83C1 3.4 1 3.77 1.04 4.05C1.07 4.31 1.13 4.41 1.2 4.47C1.26 4.53 1.36 4.59 1.62 4.63C1.9 4.67 2.27 4.67 2.83 4.67C3.4 4.67 3.77 4.67 4.05 4.63C4.31 4.59 4.41 4.53 4.47 4.47C4.53 4.41 4.59 4.31 4.63 4.05C4.67 3.77 4.67 3.4 4.67 2.83C4.67 2.27 4.67 1.9 4.63 1.62C4.59 1.36 4.53 1.26 4.47 1.2C4.41 1.13 4.31 1.07 4.05 1.04C3.77 1 3.4 1 2.83 1ZM10.167 1C9.15 1 8.33 1.82 8.33 2.83C8.33 3.85 9.15 4.67 10.167 4.67C11.18 4.67 12 3.85 12 2.83C12 1.82 11.18 1 10.167 1Z'
-        fill='currentColor'
-        stroke='currentColor'
-        strokeWidth='0.2'
-      />
+      <path d='M4.25 1.25H6.25A2 2 0 0 1 8.25 3.25V5.25A2 2 0 0 1 6.25 7.25H4.25A2 2 0 0 1 2.25 5.25V3.25A2 2 0 0 1 4.25 1.25Z' />
+      <path d='M15.25 1.75A2.5 2.5 0 1 1 15.25 6.75A2.5 2.5 0 1 1 15.25 1.75Z' />
+      <path d='M4.25 12.75H6.25A2 2 0 0 1 8.25 14.75V16.75A2 2 0 0 1 6.25 18.75H4.25A2 2 0 0 1 2.25 16.75V14.75A2 2 0 0 1 4.25 12.75Z' />
+      <path d='M14.25 12.75H16.25A2 2 0 0 1 18.25 14.75V16.75A2 2 0 0 1 16.25 18.75H14.25A2 2 0 0 1 12.25 16.75V14.75A2 2 0 0 1 14.25 12.75Z' />
+      <path d='M8.25 4.25H12.75' />
+      <path d='M15.25 6.75V12.75' />
+      <path d='M8.25 15.75H12.25' />
     </svg>
   )
 }

packages/emcn/src/icons/folder-code.tsx

@@ -1,40 +1,33 @@
 import type { SVGProps } from 'react'
 
 /**
- * FolderCode icon component
+ * FolderCode icon component - a {@link Folder} carrying code brackets
+ *
+ * Shares {@link Folder}'s body path verbatim so the folder family reads as one
+ * silhouette at one weight. The brackets are centred on the body (x 9.125,
+ * y 11.25) rather than on the viewBox, so they sit inside the folder rather
+ * than drifting toward the flap.
+ *
  * @param props - SVG properties including className, fill, etc.
  */
 export function FolderCode(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width='15'
-      height='13'
-      viewBox='0 0 15 13'
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
       fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path
-        d='M4.32e-07 5.83V3.8C4.32e-07 3.2 0 2.72 0.03 2.33C0.07 1.94 0.14 1.6 0.32 1.28C0.54 0.88 0.88 0.54 1.28 0.32C1.6 0.14 1.94 0.07 2.33 0.03C2.72 0 3.2 5.96e-05 3.8 5.96e-05C4.53 5.93e-05 5.03 -0.01 5.48 0.16C6.47 0.53 6.87 1.45 7.19 2.1L7.48 2.67H10.33C11.025 2.67 11.58 2.67 12.03 2.71C12.48 2.76 12.874 2.86 13.222 3.09C13.495 3.27 13.73 3.51 13.91 3.78C14.14 4.13 14.24 4.52 14.29 4.97C14.33 5.42 14.33 5.98 14.33 6.67C14.33 7.83 14.33 8.73 14.26 9.46C14.19 10.19 14.03 10.78 13.69 11.3C13.41 11.71 13.05 12.07 12.63 12.35C12.11 12.7 11.52 12.85 10.79 12.93C10.07 13 9.16 13 8 13H7.17C5.61 13 4.39 13 3.44 12.87C2.48 12.74 1.72 12.47 1.12 11.877C0.53 11.28 0.26 10.52 0.13 9.56C0 8.61 4.32e-07 7.39 4.32e-07 5.83ZM1 5.83C1 7.42 1 8.56 1.12 9.42C1.23 10.28 1.45 10.79 1.83 11.17C2.21 11.55 2.72 11.77 3.58 11.88C4.44 12 5.58 12 7.17 12H8C9.18 12 10.029 12 10.69 11.93C11.34 11.87 11.75 11.74 12.07 11.52C12.38 11.32 12.65 11.05 12.86 10.74C13.07 10.42 13.2 10.01 13.27 9.35C13.33 8.7 13.33 7.85 13.33 6.67C13.33 5.95 13.33 5.46 13.29 5.07C13.26 4.7 13.19 4.49 13.08 4.33C12.97 4.17 12.83 4.03 12.67 3.92C12.51 3.81 12.3 3.74 11.93 3.71C11.54 3.67 11.046 3.67 10.33 3.67H5.17C4.89 3.67 4.67 3.44 4.67 3.17C4.67 2.89 4.89 2.67 5.17 2.67H6.36L6.3 2.55C5.92 1.8 5.68 1.3 5.12 1.1C4.89 1.01 4.61 1 3.8 1C3.18 1 2.75 1 2.42 1.03C2.1 1.06 1.91 1.11 1.77 1.19C1.53 1.33 1.33 1.53 1.19 1.77C1.11 1.91 1.06 2.1 1.03 2.42C1 2.75 1 3.18 1 3.8V5.83Z'
-        fill='currentColor'
-        stroke='currentColor'
-        strokeWidth='0.3'
-      />
-      <g transform='translate(0, 0.3)'>
-        <path
-          d='M9.83 6.12C9.617 5.94 9.3 5.96 9.12 6.17C8.94 6.38 8.96 6.7 9.17 6.88L9.79 7.41C9.83 7.44 9.86 7.47 9.89 7.5C9.86 7.53 9.83 7.56 9.79 7.59L9.17 8.12C8.96 8.3 8.94 8.62 9.12 8.83C9.3 9.04 9.617 9.06 9.83 8.88L10.44 8.35C10.56 8.25 10.69 8.14 10.778 8.04C10.86 7.94 10.97 7.79 10.99 7.59L11 7.5L10.99 7.41C10.97 7.21 10.86 7.06 10.778 6.96C10.69 6.86 10.56 6.75 10.44 6.65L9.83 6.12Z'
-          fill='currentColor'
-        />
-        <path
-          d='M4.51 6.12C4.72 5.94 5.03 5.96 5.21 6.17C5.39 6.38 5.37 6.7 5.16 6.88L4.55 7.41C4.51 7.44 4.47 7.47 4.44 7.5C4.47 7.53 4.51 7.56 4.55 7.59L5.16 8.12C5.37 8.3 5.39 8.62 5.21 8.83C5.03 9.04 4.72 9.06 4.51 8.88L3.89 8.35C3.78 8.25 3.65 8.14 3.56 8.04C3.469 7.94 3.36 7.79 3.34 7.59L3.33 7.5L3.34 7.41C3.36 7.21 3.469 7.06 3.56 6.96C3.65 6.86 3.78 6.75 3.89 6.65L4.51 6.12Z'
-          fill='currentColor'
-        />
-        <path
-          d='M7.37 5.65C7.47 5.39 7.76 5.27 8.02 5.37C8.28 5.47 8.4 5.76 8.3 6.02L6.96 9.35C6.86 9.61 6.57 9.73 6.31 9.63C6.06 9.53 5.93 9.24 6.04 8.98L7.37 5.65Z'
-          fill='currentColor'
-        />
-      </g>
+      <path d='M3.75 17.25A2 2 0 0 1 1.75 15.25V4.25A2 2 0 0 1 3.75 2.25H7L9.5 5.25H14.5A2 2 0 0 1 16.5 7.25V15.25A2 2 0 0 1 14.5 17.25Z' />
+      <path d='M7.75 9.5L6 11.25L7.75 13' />
+      <path d='M10.5 9.5L12.25 11.25L10.5 13' />
     </svg>
   )
 }