feat: add icons to context menu

tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -40,70 +40,75 @@ export const ContextMenu = observer(function ContextMenu({
       >
         <div>
           {app.selectedShapes?.size > 1 && (
-            <ReactContextMenu.Item>
-              <div className="tl-menu-button-row pb-0">
-                <Button
-                  title="Align left"
-                  onClick={() => runAndTransition(() => app.align(AlignType.Left))}
-                >
-                  <TablerIcon name="layout-align-left" />
-                </Button>
-                <Button
-                  title="Align center horizontally"
-                  onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
-                >
-                  <TablerIcon name="layout-align-center" />
-                </Button>
-                <Button
-                  title="Align right"
-                  onClick={() => runAndTransition(() => app.align(AlignType.Right))}
-                >
-                  <TablerIcon name="layout-align-right" />
-                </Button>
-                <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
-                <Button
-                  title="Distribute horizontally"
-                  onClick={() => runAndTransition(() => app.distribute(DistributeType.Horizontal))}
-                >
-                  <TablerIcon name="layout-distribute-vertical" />
-                </Button>
-              </div>
-              <div className="tl-menu-button-row pt-0">
-                <Button
-                  title="Align top"
-                  onClick={() => runAndTransition(() => app.align(AlignType.Top))}
-                >
-                  <TablerIcon name="layout-align-top" />
-                </Button>
-                <Button
-                  title="Align center vertically"
-                  onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
-                >
-                  <TablerIcon name="layout-align-middle" />
-                </Button>
-                <Button
-                  title="Align bottom"
-                  onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
-                >
-                  <TablerIcon name="layout-align-bottom" />
-                </Button>
-                <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
-                <Button
-                  title="Distribute vertically"
-                  onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical))}
-                >
-                  <TablerIcon name="layout-distribute-horizontal" />
-                </Button>
-              </div>
+            <>
+              <ReactContextMenu.Item>
+                <div className="tl-menu-button-row pb-0">
+                  <Button
+                    title="Align left"
+                    onClick={() => runAndTransition(() => app.align(AlignType.Left))}
+                  >
+                    <TablerIcon name="layout-align-left" />
+                  </Button>
+                  <Button
+                    title="Align center horizontally"
+                    onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
+                  >
+                    <TablerIcon name="layout-align-center" />
+                  </Button>
+                  <Button
+                    title="Align right"
+                    onClick={() => runAndTransition(() => app.align(AlignType.Right))}
+                  >
+                    <TablerIcon name="layout-align-right" />
+                  </Button>
+                  <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                  <Button
+                    title="Distribute horizontally"
+                    onClick={() =>
+                      runAndTransition(() => app.distribute(DistributeType.Horizontal))
+                    }
+                  >
+                    <TablerIcon name="layout-distribute-vertical" />
+                  </Button>
+                </div>
+                <div className="tl-menu-button-row pt-0">
+                  <Button
+                    title="Align top"
+                    onClick={() => runAndTransition(() => app.align(AlignType.Top))}
+                  >
+                    <TablerIcon name="layout-align-top" />
+                  </Button>
+                  <Button
+                    title="Align center vertically"
+                    onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
+                  >
+                    <TablerIcon name="layout-align-middle" />
+                  </Button>
+                  <Button
+                    title="Align bottom"
+                    onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
+                  >
+                    <TablerIcon name="layout-align-bottom" />
+                  </Button>
+                  <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                  <Button
+                    title="Distribute vertically"
+                    onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical))}
+                  >
+                    <TablerIcon name="layout-distribute-horizontal" />
+                  </Button>
+                </div>
+              </ReactContextMenu.Item>
               <ReactContextMenu.Separator className="menu-separator" />
               <ReactContextMenu.Item
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.packIntoRectangle)}
               >
+                <TablerIcon className="tl-menu-icon" name="layout-grid" />
                 Pack into rectangle
               </ReactContextMenu.Item>
               <ReactContextMenu.Separator className="menu-separator" />
-            </ReactContextMenu.Item>
+            </>
           )}
           {app.selectedShapes?.size > 0 && (
             <>
@@ -111,6 +116,7 @@ export const ContextMenu = observer(function ContextMenu({
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.cut)}
               >
+                <TablerIcon className="tl-menu-icon" name="cut" />
                 Cut
                 <div className="tl-menu-right-slot">
                   <span className="keyboard-shortcut">
@@ -122,6 +128,7 @@ export const ContextMenu = observer(function ContextMenu({
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.copy)}
               >
+                <TablerIcon className="tl-menu-icon" name="copy" />
                 Copy
                 <div className="tl-menu-right-slot">
                   <span className="keyboard-shortcut">
@@ -135,6 +142,7 @@ export const ContextMenu = observer(function ContextMenu({
             className="tl-menu-item"
             onClick={() => runAndTransition(app.paste)}
           >
+            <TablerIcon className="tl-menu-icon" name="clipboard" />
             Paste
             <div className="tl-menu-right-slot">
               <span className="keyboard-shortcut">
@@ -168,6 +176,7 @@ export const ContextMenu = observer(function ContextMenu({
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.api.deleteShapes)}
               >
+                <TablerIcon className="tl-menu-icon" name="backspace" />
                 Delete
                 <div className="tl-menu-right-slot">
                   <span className="keyboard-shortcut">
@@ -182,12 +191,14 @@ export const ContextMenu = observer(function ContextMenu({
                     className="tl-menu-item"
                     onClick={() => runAndTransition(app.flipHorizontal)}
                   >
+                    <TablerIcon className="tl-menu-icon" name="flip-horizontal" />
                     Flip horizontally
                   </ReactContextMenu.Item>
                   <ReactContextMenu.Item
                     className="tl-menu-item"
                     onClick={() => runAndTransition(app.flipVertical)}
                   >
+                    <TablerIcon className="tl-menu-icon" name="flip-vertical" />
                     Flip vertically
                   </ReactContextMenu.Item>
                 </>

tldraw/apps/tldraw-logseq/src/styles.css

@@ -23,7 +23,7 @@
 }
 
 .tl-menu-item {
-  @apply flex items-center px-4 py-1 text-sm !important;
+  @apply flex items-center pl-10 pr-4 py-1 text-sm relative !important;
 
   min-width: 220px;
   all: unset;
@@ -39,6 +39,10 @@
     cursor: pointer;
     background-color: var(--ls-primary-background-color) !important;
   }
+
+  .tl-menu-icon {
+    @apply absolute left-4 text-base opacity-50;
+  }
 }
 
 .tl-menu-button-row {