revert(editor): restore the canonical arrow toggle (#7550)

Revert a0f38db because the new icon switch is not ready to ship. Keep the restoration and remaining mode-toggle migrations in a separate follow-up.

Author: j15z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx

@@ -1,4 +1,3 @@
-export { CanonicalModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle'
 export { CheckboxList } from './checkbox-list'
 export { Code } from './code'
 export { ComboBox } from './combobox'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts

@@ -1,11 +1,17 @@
 import { type JSX, type MouseEvent, memo, useCallback, useMemo, useRef, useState } from 'react'
 import { Button, cn, Input, Label, Tooltip } from '@sim/emcn'
-import { ArrowUp, Check, Clipboard, SquareArrowUpRight, TriangleAlert } from '@sim/emcn/icons'
+import {
+  ArrowLeftRight,
+  ArrowUp,
+  Check,
+  Clipboard,
+  SquareArrowUpRight,
+  TriangleAlert,
+} from '@sim/emcn/icons'
 import { isEqual } from 'es-toolkit'
 import { useParams } from 'next/navigation'
 import type { FilterRule, SortRule } from '@/lib/table/query-builder/constants'
 import {
-  CanonicalModeToggle,
   CheckboxList,
   Code,
   ComboBox,
@@ -368,11 +374,37 @@ const renderLabel = (
           </Tooltip.Root>
         )}
         {showCanonicalToggle && (
-          <CanonicalModeToggle
-            mode={canonicalToggle?.mode ?? 'basic'}
-            onToggle={canonicalToggle?.onToggle}
-            disabled={canonicalToggleDisabledResolved}
-          />
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <button
+                type='button'
+                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+                onClick={canonicalToggle?.onToggle}
+                disabled={canonicalToggleDisabledResolved}
+                aria-label={
+                  canonicalToggle?.mode === 'advanced'
+                    ? 'Switch to selector'
+                    : 'Switch to manual ID'
+                }
+              >
+                <ArrowLeftRight
+                  className={cn(
+                    'h-[12px]! w-[12px]!',
+                    canonicalToggle?.mode === 'advanced'
+                      ? 'text-[var(--text-primary)]'
+                      : 'text-[var(--text-secondary)]'
+                  )}
+                />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              <p>
+                {canonicalToggle?.mode === 'advanced'
+                  ? 'Switch to selector'
+                  : 'Switch to manual ID'}
+              </p>
+            </Tooltip.Content>
+          </Tooltip.Root>
         )}
       </div>
     </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

@@ -132,7 +132,6 @@ export {
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
 export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
-export { IconSwitch, type IconSwitchOption, type IconSwitchProps } from './icon-switch/icon-switch'
 export { Info } from './info/info'
 export {
   InfoCard,