Merge branch 'main' into prod

app/canvas/canvas.tsx

@@ -59,10 +59,7 @@ const useElementsTree = () => {
 
 const useIsPreviewMode = () => {
   const [isPreviewMode, setIsPreviewMode] = useState<boolean>(false);
-  useSubscribe<"togglePreviewMode", boolean>(
-    "togglePreviewMode",
-    setIsPreviewMode
-  );
+  useSubscribe<"previewMode", boolean>("previewMode", setIsPreviewMode);
   return isPreviewMode;
 };
 
@@ -89,7 +86,6 @@ const DesignMode = ({ treeId }: DesignModeProps) => {
   useDeleteInstance();
   usePublishRootInstance();
   useActiveElementTracking();
-  useShortcuts();
   usePeriodicSync();
   const elements = useElementsTree();
   return (
@@ -104,6 +100,8 @@ export const Canvas = ({ data }: { data: Data }): JSX.Element | null => {
   globalStyles();
   useAllUserProps(data.props);
   usePopulateRootInstance(data.tree);
+  // e.g. toggling preview is still needed in both modes
+  useShortcuts();
   const isPreviewMode = useIsPreviewMode();
 
   if (isPreviewMode) {

app/canvas/shared/use-shortcuts.ts

@@ -5,6 +5,10 @@ import { publish, useSubscribe } from "./pubsub";
 import store from "immerhin";
 import { shortcuts } from "~/shared/shortcuts";
 
+const togglePreviewMode = () => {
+  publish<"togglePreviewMode">({ type: "togglePreviewMode" });
+};
+
 export const useShortcuts = () => {
   const [rootInstance] = useRootInstance();
   const [selectedInstance, setSelectedInstance] = useSelectedInstance();
@@ -29,6 +33,7 @@ export const useShortcuts = () => {
     undo: store.undo.bind(store),
     redo: store.redo.bind(store),
     delete: publishDeleteInstance,
+    preview: togglePreviewMode,
   } as const;
 
   useHotkeys(
@@ -51,19 +56,11 @@ export const useShortcuts = () => {
     [selectedInstance]
   );
 
-  useHotkeys(
-    // Undo
-    shortcuts.undo,
-    shortcutHandlerMap.undo,
-    []
-  );
+  useHotkeys(shortcuts.undo, shortcutHandlerMap.undo, []);
 
-  useHotkeys(
-    // Redo
-    shortcuts.redo,
-    shortcutHandlerMap.redo,
-    []
-  );
+  useHotkeys(shortcuts.redo, shortcutHandlerMap.redo, []);
+
+  useHotkeys(shortcuts.preview, shortcutHandlerMap.preview, []);
 
   // Shortcuts from the parent window
   useSubscribe<"shortcut", keyof typeof shortcuts>("shortcut", (shortcut) => {

app/designer/features/topbar/menu.tsx

@@ -6,7 +6,6 @@ import {
   DropdownMenuTrigger,
   DropdownMenuArrow,
   DropdownMenuSeparator,
-  Flex,
   IconButton,
   Text,
 } from "~/shared/design-system";
@@ -22,7 +21,6 @@ import {
 } from "~/shared/icons";
 import type { Config } from "~/config";
 import {
-  useIsPreviewMode,
   useIsShareDialogOpen,
   useIsPublishDialogOpen,
 } from "../../shared/nano-values";
@@ -45,12 +43,22 @@ const Shortcut = ({ mac, win }: { mac: Array<string>; win: Array<string> }) => {
     (char) => shortcutsMap[char] ?? char.toUpperCase()
   );
   return (
-    <Text size="1" css={{ letterSpacing: 1.5 }}>
+    <Text
+      size="1"
+      css={{ letterSpacing: 1.5, textAlign: "right", flexGrow: 1 }}
+    >
       {formattedValue}
     </Text>
   );
 };
 
+const menuItemCss = {
+  display: "flex",
+  gap: "$3",
+  justifyContent: "start",
+  flexGrow: 1,
+};
+
 type MenuProps = {
   config: Config;
   publish: Publish;
@@ -58,7 +66,6 @@ type MenuProps = {
 
 export const Menu = ({ config, publish }: MenuProps) => {
   const navigate = useNavigate();
-  const [, setIsPreviewMode] = useIsPreviewMode();
   const [, setIsShareOpen] = useIsShareDialogOpen();
   const [, setIsPublishOpen] = useIsPublishDialogOpen();
 
@@ -71,16 +78,16 @@ export const Menu = ({ config, publish }: MenuProps) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
             navigate(config.dashboardPath);
           }}
         >
-          <Flex gap="3" align="center">
-            <DashboardIcon /> Dashboard
-          </Flex>
+          <DashboardIcon /> Dashboard
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
             publish<"shortcut", string>({
               type: "shortcut",
@@ -88,12 +95,11 @@ export const Menu = ({ config, publish }: MenuProps) => {
             });
           }}
         >
-          <Flex gap="3" align="center">
-            <UndoIcon /> Undo
-            <Shortcut mac={["cmd", "z"]} win={["ctrl", "z"]} />
-          </Flex>
+          <UndoIcon /> Undo
+          <Shortcut mac={["cmd", "z"]} win={["ctrl", "z"]} />
         </DropdownMenuItem>
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
             publish<"shortcut", string>({
               type: "shortcut",
@@ -101,15 +107,11 @@ export const Menu = ({ config, publish }: MenuProps) => {
             });
           }}
         >
-          <Flex gap="3" align="center">
-            <RedoIcon /> Redo
-            <Shortcut
-              mac={["shift", "cmd", "z"]}
-              win={["shift", "ctrl", "z"]}
-            />
-          </Flex>
+          <RedoIcon /> Redo
+          <Shortcut mac={["shift", "cmd", "z"]} win={["shift", "ctrl", "z"]} />
         </DropdownMenuItem>
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
             publish<"shortcut", string>({
               type: "shortcut",
@@ -117,38 +119,36 @@ export const Menu = ({ config, publish }: MenuProps) => {
             });
           }}
         >
-          <Flex gap="3" align="center">
-            <TrashIcon /> Delete
-            <Shortcut mac={["backspace"]} win={["backspace"]} />
-          </Flex>
+          <TrashIcon /> Delete
+          <Shortcut mac={["backspace"]} win={["backspace"]} />
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
-            setIsPreviewMode(true);
+            publish<"togglePreviewMode">({
+              type: "togglePreviewMode",
+            });
           }}
         >
-          <Flex gap="3" align="center">
-            <EyeOpenIcon /> Preview
-          </Flex>
+          <EyeOpenIcon /> Preview
+          <Shortcut mac={["cmd", "shift", "p"]} win={["ctrl", "shift", "p"]} />
         </DropdownMenuItem>
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
             setIsShareOpen(true);
           }}
         >
-          <Flex gap="3" align="center">
-            <Share1Icon /> Share
-          </Flex>
+          <Share1Icon /> Share
         </DropdownMenuItem>
         <DropdownMenuItem
+          css={menuItemCss}
           onSelect={() => {
             setIsPublishOpen(true);
           }}
         >
-          <Flex gap="3" align="center">
-            <RocketIcon /> Publish
-          </Flex>
+          <RocketIcon /> Publish
         </DropdownMenuItem>
         <DropdownMenuArrow offset={10} />
       </DropdownMenuContent>

app/designer/features/topbar/preview.tsx

@@ -1,6 +1,6 @@
 import { EyeOpenIcon } from "~/shared/icons";
 import { SimpleToggle } from "~/shared/design-system";
-import { type Publish } from "~/designer/features/canvas-iframe";
+import { useSubscribe, type Publish } from "~/designer/features/canvas-iframe";
 import { useIsPreviewMode } from "../../shared/nano-values";
 
 type PreviewProps = {
@@ -9,15 +9,22 @@ type PreviewProps = {
 
 export const Preview = ({ publish }: PreviewProps) => {
   const [isPreviewMode, setIsPreviewMode] = useIsPreviewMode();
+
+  const setValue = (value: boolean) => {
+    setIsPreviewMode(value);
+    publish<"previewMode", boolean>({
+      type: "previewMode",
+      payload: value,
+    });
+  };
+
+  useSubscribe<"togglePreviewMode">("togglePreviewMode", () => {
+    setValue(!isPreviewMode);
+  });
+
   return (
     <SimpleToggle
-      onPressedChange={(value) => {
-        setIsPreviewMode(value);
-        publish<"togglePreviewMode", boolean>({
-          type: "togglePreviewMode",
-          payload: value,
-        });
-      }}
+      onPressedChange={setValue}
       pressed={isPreviewMode}
       aria-label="Toggle Preview"
     >

app/shared/shortcuts/index.ts

@@ -1,4 +1,5 @@
 export const shortcuts = {
   undo: "cmd+z, ctrl+z",
   redo: "cmd+shift+z, ctrl+shift+z",
+  preview: "cmd+shift+p, ctrl+shift+p",
 } as const;