chore: Reuse help menu (#4769)

## Description

<img width="389" alt="image"
src="https://github.com/user-attachments/assets/4e011ab6-5f39-4c38-84a5-96b4ad75934e"
/>

1. Added central place for all help links
1. Added same thing to the menu
1. Deemphasize github discussions, it works better with discord for
everything


## Steps for reproduction

1. click button
4. 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/help/help-center.tsx

@@ -7,16 +7,9 @@ import {
   rawTheme,
   theme,
 } from "@webstudio-is/design-system";
-import {
-  BugIcon,
-  ContentIcon,
-  DiscordIcon,
-  GithubIcon,
-  LifeBuoyIcon,
-  YoutubeIcon,
-} from "@webstudio-is/icons";
 import { type ComponentProps } from "react";
 import { $remoteDialog } from "../../shared/nano-states";
+import { help } from "~/shared/help";
 
 export const HelpCenter = ({
   children,
@@ -43,66 +36,25 @@ export const HelpCenter = ({
           css={{ padding: theme.spacing[5] }}
           gap="2"
         >
-          <Button
-            type="button"
-            prefix={<LifeBuoyIcon />}
-            css={{ justifyContent: "start" }}
-            color="ghost"
-            onClick={() => {
-              $remoteDialog.set({
-                title: "Support Hub",
-                url: "https://help.webstudio.is/",
-              });
-            }}
-          >
-            Support Hub
-          </Button>
-          <Button
-            formAction="https://wstd.us/101"
-            name="list"
-            value="PL4vVqpngzeT4sDlanyPe99dYl8BgUYCac"
-            prefix={<YoutubeIcon />}
-            color="ghost"
-            css={{ justifyContent: "start" }}
-          >
-            Learn with videos
-          </Button>
-          <Button
-            formAction="https://docs.webstudio.is/"
-            prefix={<ContentIcon />}
-            color="ghost"
-            css={{ justifyContent: "start" }}
-          >
-            Learn from docs
-          </Button>
-          <Button
-            formAction="https://wstd.us/community"
-            prefix={<DiscordIcon />}
-            color="ghost"
-            css={{ justifyContent: "start" }}
-          >
-            Join the Community
-          </Button>
-          <Button
-            formAction="https://github.com/webstudio-is/webstudio-community/discussions"
-            prefix={<GithubIcon fill="currentColor" />}
-            color="ghost"
-            css={{ justifyContent: "start" }}
-          >
-            Discuss on GitHub
-          </Button>
-          <Button
-            prefix={<BugIcon />}
-            color="ghost"
-            onClick={() => {
-              window.open(
-                "https://github.com/webstudio-is/webstudio-community/discussions/new?category=q-a&labels=bug&title=[Bug]"
-              );
-            }}
-            css={{ justifyContent: "start" }}
-          >
-            Report a bug
-          </Button>
+          {help.map((item) => (
+            <Button
+              key={item.url}
+              prefix={item.icon}
+              css={{ justifyContent: "start" }}
+              color="ghost"
+              formAction={item.url}
+              onClick={() => {
+                if ("target" in item && item.target === "embed") {
+                  $remoteDialog.set({
+                    title: item.label,
+                    url: item.url,
+                  });
+                }
+              }}
+            >
+              {item.label}
+            </Button>
+          ))}
         </Flex>
       </PopoverContent>
     </Popover>

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

@@ -19,6 +19,7 @@ import {
   $isCloneDialogOpen,
   $isShareDialogOpen,
   $publishDialog,
+  $remoteDialog,
 } from "~/builder/shared/nano-states";
 import { cloneProjectUrl, dashboardUrl } from "~/shared/router-utils";
 import {
@@ -33,6 +34,7 @@ import { MenuButton } from "./menu-button";
 import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 import { UpgradeIcon } from "@webstudio-is/icons";
 import { getSetting, setSetting } from "~/builder/shared/client-settings";
+import { help } from "~/shared/help";
 
 const ViewMenuItem = () => {
   const navigatorLayout = getSetting("navigatorLayout");
@@ -79,7 +81,7 @@ export const Menu = () => {
   const cloneIsExternal = authToken !== undefined;
 
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <MenuButton />
       <DropdownMenuPortal>
         <DropdownMenuContent
@@ -262,13 +264,31 @@ export const Menu = () => {
           >
             Keyboard shortcuts
           </DropdownMenuItem>
-          <DropdownMenuItem
-            onSelect={() => {
-              window.open("https://docs.webstudio.is");
-            }}
-          >
-            Learn Webstudio
-          </DropdownMenuItem>
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Help</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent width="regular">
+              {help.map((item) => (
+                <DropdownMenuItem
+                  key={item.url}
+                  onSelect={(event) => {
+                    if ("target" in item && item.target === "embed") {
+                      event.preventDefault();
+                      $remoteDialog.set({
+                        title: item.label,
+                        url: item.url,
+                      });
+                      return;
+                    }
+                    window.open(item.url);
+                  }}
+                >
+                  {item.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
           {hasProPlan === false && (
             <>
               <DropdownMenuSeparator />

apps/builder/app/dashboard/dashboard.tsx

@@ -11,14 +11,7 @@ import {
   theme,
 } from "@webstudio-is/design-system";
 import type { DashboardProject } from "@webstudio-is/dashboard";
-import {
-  BodyIcon,
-  ContentIcon,
-  DiscordIcon,
-  ExtensionIcon,
-  LifeBuoyIcon,
-  YoutubeIcon,
-} from "@webstudio-is/icons";
+import { BodyIcon, ExtensionIcon } from "@webstudio-is/icons";
 import type { User } from "~/shared/db/user.server";
 import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import { NavLink, useLocation, useRevalidator } from "@remix-run/react";
@@ -29,6 +22,7 @@ import { ProfileMenu } from "./profile-menu";
 import { Projects } from "./projects/projects";
 import { Templates } from "./templates/templates";
 import { Header } from "./shared/layout";
+import { help } from "~/shared/help";
 
 const globalStyles = globalCss({
   body: {
@@ -195,32 +189,12 @@ export const Dashboard = ({
             </CollapsibleSection>
             <CollapsibleSection label="Help & support" fullWidth>
               <NavigationItems
-                items={[
-                  {
-                    to: "https://wstd.us/101",
-                    target: "_blank",
-                    prefix: <YoutubeIcon />,
-                    children: "Video tutorials",
-                  },
-                  {
-                    to: "https://help.webstudio.is/",
-                    target: "_blank",
-                    prefix: <LifeBuoyIcon />,
-                    children: "Support hub",
-                  },
-                  {
-                    to: "https://docs.webstudio.is",
-                    target: "_blank",
-                    prefix: <ContentIcon />,
-                    children: "Docs",
-                  },
-                  {
-                    to: "https://wstd.us/community",
-                    target: "_blank",
-                    prefix: <DiscordIcon />,
-                    children: "Community",
-                  },
-                ]}
+                items={help.map((item) => ({
+                  to: item.url,
+                  target: "_blank",
+                  prefix: item.icon,
+                  children: item.label,
+                }))}
               />
             </CollapsibleSection>
           </nav>

apps/builder/app/shared/help.tsx

@@ -0,0 +1,30 @@
+import {
+  ContentIcon,
+  DiscordIcon,
+  LifeBuoyIcon,
+  YoutubeIcon,
+} from "@webstudio-is/icons";
+
+export const help = [
+  {
+    label: "Support hub",
+    url: "https://help.webstudio.is/",
+    icon: <LifeBuoyIcon />,
+    target: "embed",
+  },
+  {
+    label: "Video tutorials",
+    url: "https://wstd.us/101",
+    icon: <YoutubeIcon />,
+  },
+  {
+    label: "Docs",
+    url: "https://docs.webstudio.is/",
+    icon: <ContentIcon />,
+  },
+  {
+    label: "Community",
+    url: "https://wstd.us/community",
+    icon: <DiscordIcon />,
+  },
+] as const;