add undo/redo to the menu

app/designer/features/topbar/menu.tsx

@@ -5,8 +5,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   DropdownMenuArrow,
+  DropdownMenuSeparator,
   Flex,
   IconButton,
+  Text,
 } from "~/shared/design-system";
 import {
   HamburgerMenuIcon,
@@ -14,6 +16,8 @@ import {
   EyeOpenIcon,
   Share1Icon,
   RocketIcon,
+  UndoIcon,
+  RedoIcon,
 } from "~/shared/icons";
 import type { Config } from "~/config";
 import {
@@ -21,12 +25,37 @@ import {
   useIsShareDialogOpen,
   useIsPublishDialogOpen,
 } from "../../shared/nano-values";
+import { type Publish } from "../canvas-iframe";
+
+const isMac =
+  typeof navigator === "object" ? /mac/i.test(navigator.platform) : false;
+const shortcutsMap: Record<string, string> = {
+  cmd: "⌘",
+  ctrl: "⌃",
+  shift: "⇧",
+  option: "⌥",
+  backspace: "⌫",
+};
+
+const Shortcut = ({ mac, win }: { mac: Array<string>; win: Array<string> }) => {
+  // @todo check what linux needs
+  const value = isMac ? mac : win;
+  const formattedValue = value.map(
+    (char) => shortcutsMap[char] ?? char.toUpperCase()
+  );
+  return (
+    <Text size="1" css={{ letterSpacing: 1.5 }}>
+      {formattedValue}
+    </Text>
+  );
+};
 
 type MenuProps = {
   config: Config;
+  publish: Publish;
 };
 
-export const Menu = ({ config }: MenuProps) => {
+export const Menu = ({ config, publish }: MenuProps) => {
   const navigate = useNavigate();
   const [, setIsPreviewMode] = useIsPreviewMode();
   const [, setIsShareOpen] = useIsShareDialogOpen();
@@ -49,6 +78,37 @@ export const Menu = ({ config }: MenuProps) => {
             <DashboardIcon /> Dashboard
           </Flex>
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onSelect={() => {
+            publish<"shortcut", string>({
+              type: "shortcut",
+              payload: "undo",
+            });
+          }}
+        >
+          <Flex gap="3" align="center">
+            <UndoIcon /> Undo{" "}
+            <Shortcut mac={["cmd", "z"]} win={["ctrl", "z"]} />
+          </Flex>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            publish<"shortcut", string>({
+              type: "shortcut",
+              payload: "redo",
+            });
+          }}
+        >
+          <Flex gap="3" align="center">
+            <RedoIcon /> Redo{" "}
+            <Shortcut
+              mac={["shift", "cmd", "z"]}
+              win={["shift", "ctrl", "z"]}
+            />
+          </Flex>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem
           onSelect={() => {
             setIsPreviewMode(true);

app/designer/features/topbar/topbar.tsx

@@ -28,7 +28,7 @@ export const Topbar = ({ config, css, project, publish }: TopbarProps) => {
         ...css,
       }}
     >
-      <Menu config={config} />
+      <Menu config={config} publish={publish} />
       <Preview publish={publish} />
       <Flex gap="1" align="center">
         <SyncStatus />

app/shared/db/props.server.ts

@@ -1,7 +1,6 @@
 import {
   type Instance,
   type UserPropsUpdates,
-  type UserProp,
   type Project,
   type InstanceProps,
   type Tree,

app/shared/design-system/index.ts

@@ -53,6 +53,7 @@ export {
   DropdownMenuGroup,
   DropdownMenuTrigger,
   DropdownMenuArrow,
+  DropdownMenuSeparator,
 } from "./components/dropdown-menu";
 export { MenuContent, MenuItem, Menu, MenuAnchor } from "./components/menu";
 export { Paragraph } from "./components/paragraph";

app/shared/icons/index.ts

@@ -2,3 +2,5 @@ export * from "@radix-ui/react-icons";
 export { ListNestedIcon } from "./list-nested";
 export { BrushIcon } from "./brush";
 export { FormIcon } from "./form";
+export { UndoIcon } from "./undo";
+export { RedoIcon } from "./redo";

app/shared/icons/redo.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const RedoIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="15"
+        width="15"
+        viewBox="0 0 24 24"
+        fill={color}
+        {...props}
+        ref={forwardedRef}
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" />
+      </svg>
+    );
+  }
+);
+
+RedoIcon.displayName = "RedoIcon";

app/shared/icons/undo.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const UndoIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="15"
+        width="15"
+        viewBox="0 0 24 24"
+        fill={color}
+        {...props}
+        ref={forwardedRef}
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" />
+      </svg>
+    );
+  }
+);
+
+UndoIcon.displayName = "UndoIcon";