From b8be21e994f1a2f9df409198c1c47c210d0c11e6 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 20 Jan 2025 02:14:36 +0000
Subject: [PATCH] wip

---
 .../app/builder/features/help/help-center.tsx |  4 +--
 apps/builder/app/dashboard/dashboard.tsx      |  5 +--
 .../app/dashboard/projects/empty-state.tsx    | 36 ++-----------------
 .../app/routes/_ui.dashboard._index.tsx       |  2 +-
 .../app/shared/router-utils/path-utils.ts     |  4 +++
 5 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/apps/builder/app/builder/features/help/help-center.tsx b/apps/builder/app/builder/features/help/help-center.tsx
index ecde854fc344..904a0fe85424 100644
--- a/apps/builder/app/builder/features/help/help-center.tsx
+++ b/apps/builder/app/builder/features/help/help-center.tsx
@@ -9,10 +9,10 @@ import {
 } from "@webstudio-is/design-system";
 import {
   BugIcon,
+  ContentIcon,
   DiscordIcon,
   GithubIcon,
   LifeBuoyIcon,
-  PageIcon,
   YoutubeIcon,
 } from "@webstudio-is/icons";
 import { type ComponentProps } from "react";
@@ -69,7 +69,7 @@ export const HelpCenter = ({
           </Button>
           <Button
             formAction="https://docs.webstudio.is/"
-            prefix={<PageIcon />}
+            prefix={<ContentIcon />}
             color="ghost"
             css={{ justifyContent: "start" }}
           >
diff --git a/apps/builder/app/dashboard/dashboard.tsx b/apps/builder/app/dashboard/dashboard.tsx
index 240ae535e48a..c7787e23f416 100644
--- a/apps/builder/app/dashboard/dashboard.tsx
+++ b/apps/builder/app/dashboard/dashboard.tsx
@@ -27,6 +27,7 @@ import {
 } from "@webstudio-is/icons";
 import { Header } from "./shared/header";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
+import { dashboardPath, templatesPath } from "~/shared/router-utils";
 
 const globalStyles = globalCss({
   html: {
@@ -170,12 +171,12 @@ export const Dashboard = ({
               <NavigationItems
                 items={[
                   {
-                    to: "/dashboard",
+                    to: dashboardPath(),
                     prefix: <BodyIcon />,
                     children: "Projects",
                   },
                   {
-                    to: "/dashboard/templates",
+                    to: templatesPath(),
                     prefix: <ExtensionIcon />,
                     children: "Starter templates",
                   },
diff --git a/apps/builder/app/dashboard/projects/empty-state.tsx b/apps/builder/app/dashboard/projects/empty-state.tsx
index df26492dc498..4cdd423f97f5 100644
--- a/apps/builder/app/dashboard/projects/empty-state.tsx
+++ b/apps/builder/app/dashboard/projects/empty-state.tsx
@@ -1,43 +1,11 @@
-import {
-  css,
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-  Flex,
-  Text,
-  theme,
-} from "@webstudio-is/design-system";
+import { Flex, Text } from "@webstudio-is/design-system";
 import { CreateProject } from "./project-dialogs";
 
-const contentStyle = css({
-  maxWidth: "none",
-  width: "80vw",
-  aspectRatio: "16/9",
-});
-
-const iframeStyle = css({
-  width: "100%",
-  height: "100%",
-  border: 0,
-});
-
 export const EmptyState = () => (
   <Flex align="center" justify="center" direction="column" gap="6">
     <Text variant="brandMediumTitle" as="h1" align="center">
       What will you create?
     </Text>
-    <Dialog>
-      <DialogTrigger asChild>
-        <CreateProject buttonText="Create First Project" />
-      </DialogTrigger>
-      <DialogContent className={contentStyle()}>
-        <iframe
-          className={iframeStyle()}
-          src="https://www.youtube-nocookie.com/embed/aL2sBSb3ghg?si=siExeIRt-YI_ypuA&autoplay=true"
-          allowFullScreen
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        />
-      </DialogContent>
-    </Dialog>
+    <CreateProject buttonText="Create First Project" />
   </Flex>
 );
diff --git a/apps/builder/app/routes/_ui.dashboard._index.tsx b/apps/builder/app/routes/_ui.dashboard._index.tsx
index e896cf8acebf..bcc46b9edfaa 100644
--- a/apps/builder/app/routes/_ui.dashboard._index.tsx
+++ b/apps/builder/app/routes/_ui.dashboard._index.tsx
@@ -39,10 +39,10 @@ export const headers = () => {
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const { context, user, userPlanFeatures, origin } =
     await loadDashboardData(request);
-  const projectToClone = await getProjectToClone(request, context);
   const projects = await dashboardProjectCaller(context).findMany({
     userId: user.id,
   });
+  const projectToClone = await getProjectToClone(request, context);
 
   return {
     user,
diff --git a/apps/builder/app/shared/router-utils/path-utils.ts b/apps/builder/app/shared/router-utils/path-utils.ts
index 8f88a3b7224e..abeb1e0d824c 100644
--- a/apps/builder/app/shared/router-utils/path-utils.ts
+++ b/apps/builder/app/shared/router-utils/path-utils.ts
@@ -68,6 +68,10 @@ export const dashboardPath = () => {
   return "/dashboard";
 };
 
+export const templatesPath = () => {
+  return "/dashboard/templates";
+};
+
 export const dashboardUrl = (props: { origin: string }) => {
   const authServerOrigin = getAuthorizationServerOrigin(props.origin);