feat: Manual save command (#5327)

Closes #5325

## Description

As a user I am sometimes afraid my changes weren't saved. So this is an
extra layer of confidence to know that changes are actually saved.




https://github.com/user-attachments/assets/9135e225-2c12-450b-b6d0-680d9ecd7454

<img width="207" height="175" alt="image"
src="https://github.com/user-attachments/assets/49ecdbad-e191-4088-8046-99b2b55070f7"
/>

## 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

Author: kof

apps/builder/app/builder/features/topbar/menu/menu.tsx

@@ -142,6 +142,12 @@ export const Menu = () => {
             <Kbd value={["backspace"]} />
           </DropdownMenuItemRightSlot>
         </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => emitCommand("save")}>
+          Save
+          <DropdownMenuItemRightSlot>
+            <Kbd value={["meta", "s"]} />
+          </DropdownMenuItemRightSlot>
+        </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem onSelect={() => emitCommand("togglePreviewMode")}>
           Preview

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

@@ -56,6 +56,7 @@ import { denormalizeSrcProps } from "~/shared/copy-paste/asset-upload";
 import { getInstanceLabel } from "./instance-label";
 import { $instanceTags } from "../features/style-panel/shared/model";
 import { reactPropsToStandardAttributes } from "@webstudio-is/react-sdk";
+import { isSyncIdle } from "./sync/sync-server";
 
 export const $styleSourceInputElement = atom<HTMLInputElement | undefined>();
 
@@ -632,6 +633,22 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       },
     },
 
+    {
+      name: "save",
+      defaultHotkeys: ["meta+s", "ctrl+s"],
+      handler: async () => {
+        toast.dismiss("save-success");
+        try {
+          await isSyncIdle();
+          toast.success("Project saved successfully", { id: "save-success" });
+        } catch (error) {
+          if (error instanceof Error) {
+            toast.error(error.message);
+          }
+        }
+      },
+    },
+
     {
       name: "openCommandPanel",
       hidden: true,

apps/builder/app/builder/shared/sync/sync-server.ts

@@ -324,6 +324,38 @@ export class ServerSyncStorage implements SyncStorage {
   }
 }
 
+/**
+ * Promisify idle state of the queue for a one-off notification when everything is saved.
+ */
+export const isSyncIdle = () => {
+  return new Promise<QueueStatus>((resolve, reject) => {
+    const handle = (status: QueueStatus) => {
+      if (status.status === "idle") {
+        resolve(status);
+        return true;
+      }
+      if (status.status === "fatal") {
+        reject(
+          new Error(
+            "Synchronization is in fatal state. Please reload the page or check your internet connection."
+          )
+        );
+        return true;
+      }
+      return false;
+    };
+    const status = $queueStatus.get();
+
+    if (handle(status) === false) {
+      const unsubscribe = $queueStatus.subscribe((status) => {
+        if (handle(status)) {
+          unsubscribe();
+        }
+      });
+    }
+  });
+};
+
 type SyncServerProps = {
   projectId: Project["id"];
   authPermit: AuthPermit;

packages/design-system/src/components/toast.tsx

@@ -391,4 +391,5 @@ export const toast = {
     hotToast.custom(value, options),
   success: (value: JSX.Element | string, options?: Options) =>
     hotToast.success(value, options),
+  dismiss: hotToast.dismiss,
 };