From f0e57cb73fabf54ae27073dd600687292e2fdc6e Mon Sep 17 00:00:00 2001 From: Waleed Date: Tue, 4 Aug 2026 13:41:21 -0700 Subject: [PATCH] =?UTF-8?q?fix(emcn/header):=20icon=20consistency=20?= =?UTF-8?q?=E2=80=94=20breadcrumb=20menus,=20Connections,=20FolderCode=20(?= =?UTF-8?q?#6263)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(header): give every breadcrumb menu item an icon The resource crumb's menu (table, knowledge base, document, file) rendered Rename/Tags/Share/Download/Delete with icons, but the folder crumb's menu rendered bare labels. The two open from adjacent segments of the same breadcrumb, so the inconsistency was visible side by side. Add the matching icons to the three folder-crumb menus. * fix(emcn): redraw Connections on the house geometry Connections was a filled glyph in a tight 0 0 13 13 box with a 0.2 hairline stroke. At size-[14px] it rendered a 21.5px glyph at 0.22px stroke where its neighbours render ~10.5px at 0.90px, so it read as a different weight class in the resource registry it shares with Library, Globe and Database. Redraw as a stroke outline on the 24-box at 1.55, preserving the topology: a 2x2 grid with a circle top-right, linked along the top, down the right column, and along the bottom. Now 10.9px at 0.90px. * fix(emcn): match FolderCode geometry to the folder family FolderCode carried the same fill-based construction Folder did: a tight 0 0 15 13 box with a 0.3 hairline stroke. At size-[14px] it rendered a 19.9px glyph at 0.28px stroke where a standard icon renders ~10.5px at 0.90px — roughly twice the size at a third the weight. It renders in Chat's TOOL_ICONS map for glob/mv/mkdir, directly beside Search, File and Database, so the mismatch was visible in a single list. Reuse Folder's body path verbatim and inset code brackets centred on the body, so the whole folder family shares one silhouette and one weight. --- .../workspace/[workspaceId]/files/files.tsx | 1 + .../[workspaceId]/knowledge/knowledge.tsx | 4 +- .../workspace/[workspaceId]/tables/tables.tsx | 4 +- packages/emcn/src/icons/connections.tsx | 32 ++++++++++----- packages/emcn/src/icons/folder-code.tsx | 41 ++++++++----------- 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx index 736ec48089..6733fcd84e 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx +++ b/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), }, diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx index 0ec36c650d..216458a5cb 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx +++ b/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,6 +925,7 @@ export function Knowledge() { ? [ { label: 'Rename', + icon: Pencil, onClick: () => { const folder = breadcrumbs[breadcrumbs.length - 1] breadcrumbRenameRef.current.startRename(folder.id, folder.name) @@ -932,6 +933,7 @@ export function Knowledge() { }, { label: 'Delete', + icon: Trash, onClick: () => setFolderPendingDelete(breadcrumbs[breadcrumbs.length - 1]), }, ] diff --git a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx index b7b7dea07d..d49d60ef9c 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx +++ b/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. diff --git a/packages/emcn/src/icons/connections.tsx b/packages/emcn/src/icons/connections.tsx index 55bbcedfc8..10af0a2c01 100644 --- a/packages/emcn/src/icons/connections.tsx +++ b/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) { return ( ) } diff --git a/packages/emcn/src/icons/folder-code.tsx b/packages/emcn/src/icons/folder-code.tsx index d6ef5f67a4..1cf2a0c2cb 100644 --- a/packages/emcn/src/icons/folder-code.tsx +++ b/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) { return ( ) }