Implement BlockContextMenu reordering and updates for BUS-1679

- Reorder menu items: Turn Into, Duplicate, Delete, Indent, Align
- Update Turn Into icon to use ReplaceObjs from Nucleo outlined
- Update Duplicate icon to use DuplicatePlus
- Change label from 'Indentation' to 'Indent'
- Add ContextMenuSeparator with 5px margins between first three and last two items
- Import missing icon components
- Maintain existing functionality and mobile/touch compatibility

Co-Authored-By: nate@buster.so <nate@buster.so>

apps/web/src/components/ui/report/config/icons.tsx

@@ -109,6 +109,9 @@ import {
   Xmark,
 } from '@/components/ui/icons';
 
+import DuplicatePlus from '@/components/ui/icons/NucleoIconOutlined/duplicate-plus';
+import ReplaceObjs from '@/components/ui/icons/NucleoIconOutlined/replace-objs';
+
 export const NodeTypeIcons = {
   // Metrics
   metric: ASSET_ICONS.metrics,
@@ -191,12 +194,12 @@ export const NodeTypeIcons = {
   superscript: Superscript,
   trash: Trash2,
   check: Check,
-  copy: Copy2,
+  copy: DuplicatePlus,
   formatCode: BracketsCurly,
   indent: IndentIncrease,
   outdent: IndentDecrease,
   download: Download,
-  turnInto: Pilcrow,
+  turnInto: ReplaceObjs,
 
   // Tools
   equation: Equation,

apps/web/src/components/ui/report/config/labels.tsx

@@ -187,7 +187,7 @@ export const NodeTypeLabels = {
     keywords: [],
   },
   indentation: {
-    label: 'Indentation',
+    label: 'Indent',
     keyboard: undefined,
     keywords: ['indent', 'outdent'],
   },

apps/web/src/components/ui/report/elements/BlockContextMenu.tsx

@@ -13,6 +13,7 @@ import {
   ContextMenuContent,
   ContextMenuGroup,
   ContextMenuItem,
+  ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuSub,
   ContextMenuSubContent,
@@ -128,27 +129,6 @@ function BlockContextMenuComponent({ children }: { children: React.ReactNode })
         }}
       >
         <ContextMenuGroup>
-          {/* <ContextMenuItem
-            onClick={() => {
-              setValue('askAI');
-            }}>
-            <MenuItemContent icon={NodeTypeIcons.ai} labelKey="askAI" />
-          </ContextMenuItem> */}
-          <ContextMenuItem
-            onClick={() => {
-              editor.getTransforms(BlockSelectionPlugin).blockSelection.removeNodes();
-              editor.tf.focus();
-            }}
-          >
-            <MenuItemContent icon={NodeTypeIcons.trash} labelKey="delete" />
-          </ContextMenuItem>
-          <ContextMenuItem
-            onClick={() => {
-              editor.getTransforms(BlockSelectionPlugin).blockSelection.duplicate();
-            }}
-          >
-            <MenuItemContent icon={NodeTypeIcons.copy} labelKey="duplicate" />
-          </ContextMenuItem>
           <ContextMenuSub>
             <ContextMenuSubTrigger>
               <MenuItemContent icon={NodeTypeIcons.turnInto} labelKey="turnInto" />
@@ -172,8 +152,25 @@ function BlockContextMenuComponent({ children }: { children: React.ReactNode })
               </ContextMenuItem>
             </ContextMenuSubContent>
           </ContextMenuSub>
+          <ContextMenuItem
+            onClick={() => {
+              editor.getTransforms(BlockSelectionPlugin).blockSelection.duplicate();
+            }}
+          >
+            <MenuItemContent icon={NodeTypeIcons.copy} labelKey="duplicate" />
+          </ContextMenuItem>
+          <ContextMenuItem
+            onClick={() => {
+              editor.getTransforms(BlockSelectionPlugin).blockSelection.removeNodes();
+              editor.tf.focus();
+            }}
+          >
+            <MenuItemContent icon={NodeTypeIcons.trash} labelKey="delete" />
+          </ContextMenuItem>
         </ContextMenuGroup>
 
+        <ContextMenuSeparator className="my-[5px]" />
+
         <ContextMenuGroup>
           <ContextMenuSub>
             <ContextMenuSubTrigger>