experimental: Set the menu items height along with the content mode s…

…hortcut and name (#4494)

## Description

- 24px height for menu items
- drive-by: content mode + shortcut cmd+c

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

apps/builder/app/builder/features/topbar/builder-mode.tsx

@@ -55,8 +55,8 @@ export const BuilderModeDropDown = () => {
     content: {
       icon: <NotebookAndPenIcon />,
       description: "Modify the page content",
-      title: "Build",
-      shortcut: ["cmd", "shift", "b"],
+      title: "Content",
+      shortcut: ["cmd", "shift", "c"],
       enabled: isContentModeAllowed,
     },
     preview: {
@@ -115,10 +115,7 @@ export const BuilderModeDropDown = () => {
                   onFocus={handleFocus(mode as BuilderMode)}
                   onBlur={handleBlur}
                 >
-                  <Flex
-                    css={{ py: theme.spacing[4], px: theme.spacing[5] }}
-                    gap={2}
-                  >
+                  <Flex css={{ px: theme.spacing[3] }} gap={2}>
                     {icon}
                     <Box>{title}</Box>
                   </Flex>

apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx

@@ -284,11 +284,7 @@ const TemplatesMenu = ({
                 {...{ [skipInertHandlersAttribute]: true }}
                 data-yyy
               >
-                <Flex
-                  css={{ py: theme.spacing[4], px: theme.spacing[5] }}
-                  gap={2}
-                  data-xxx
-                >
+                <Flex css={{ px: theme.spacing[3] }} gap={2} data-xxx>
                   {icon}
                   <Box>{title}</Box>
                 </Flex>
@@ -301,7 +297,7 @@ const TemplatesMenu = ({
             <Grid css={{ width: theme.spacing[25] }}>
               <Flex gap={1} css={{ display: hasChildren ? "none" : undefined }}>
                 <Kbd value={["click"]} />
-                <Text>to add first</Text>
+                <Text>to add before</Text>
               </Flex>
 
               <Flex

apps/builder/app/builder/shared/commands.ts

@@ -178,8 +178,8 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       },
     },
     {
-      name: "toggleBuildMode",
-      defaultHotkeys: ["meta+shift+b", "ctrl+shift+b"],
+      name: "toggleContentMode",
+      defaultHotkeys: ["meta+shift+c", "ctrl+shift+c"],
       handler: () => {
         setActiveSidebarPanel("auto");
         toggleBuilderMode("content");