Add duplicate button for mobile view (#1146)

* Add a icon for dulplication

* Add PanelComponent for duplication

* Add duplicate button for mobile

* Add styles for layout action buttons

* Add a translation for 'Actions'

* Show left action buttons only for desktop

* Add duplicate button at the bottom of mobile

It is provided depending on whether or not it is `multiElement` to maintain space between buttons.

src/components/Actions.tsx

@@ -8,6 +8,7 @@ import { ToolButton } from "./ToolButton";
 import { capitalizeString, getShortcutKey } from "../utils";
 import { CURSOR_TYPE } from "../constants";
 import Stack from "./Stack";
+import useIsMobile from "../is-mobile";
 
 export function SelectedShapeActions({
   targetElements,
@@ -18,6 +19,8 @@ export function SelectedShapeActions({
   renderAction: ActionManager["renderAction"];
   elementType: ExcalidrawElement["type"];
 }) {
+  const isMobile = useIsMobile();
+
   return (
     <div className="panelColumn">
       {renderAction("changeStrokeColor")}
@@ -59,12 +62,15 @@ export function SelectedShapeActions({
           {renderAction("bringForward")}
         </div>
       </fieldset>
-      <fieldset>
-        <legend>Layers Actions</legend>
-        <div className="buttonList">
-          {renderAction("deleteSelectedElements")}
-        </div>
-      </fieldset>
+      {!isMobile && (
+        <fieldset>
+          <legend>{t("labels.actions")}</legend>
+          <div className="buttonList">
+            {renderAction("duplicateSelection")}
+            {renderAction("deleteSelectedElements")}
+          </div>
+        </fieldset>
+      )}
     </div>
   );
 }

src/components/MobileMenu.tsx

@@ -122,7 +122,9 @@ export function MobileMenu({
               {actionManager.renderAction("toggleEditMenu")}
               {actionManager.renderAction("undo")}
               {actionManager.renderAction("redo")}
-              {actionManager.renderAction("finalize")}
+              {actionManager.renderAction(
+                appState.multiElement ? "finalize" : "duplicateSelection",
+              )}
               {actionManager.renderAction("deleteSelectedElements")}
             </div>
             {appState.scrolledOutside && (

src/components/icons.tsx

@@ -210,3 +210,9 @@ export const back = createIcon(
   512,
   { marginLeft: "-0.2rem" },
 );
+
+export const clone = createIcon(
+  "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z",
+  512,
+  512,
+);