From 79d83ea260569620117a9bdabd132ba20428c6ed Mon Sep 17 00:00:00 2001
From: xiaoyu <lavamint@outlook.com>
Date: Thu, 6 Jul 2023 16:47:33 +0800
Subject: [PATCH] feat: update app card

---
 .../Dashboard/DashboardApps/AppCard/index.tsx |  1 +
 .../DashboardApps/AppCardActionItem/utils.ts  | 10 ++++-
 .../Dashboard/DashboardApps/contentBody.tsx   | 44 +++++++++++++++++--
 .../page/Dashboard/DashboardApps/index.tsx    | 23 +++++-----
 .../page/Dashboard/DashboardApps/style.tsx    | 11 +++++
 5 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/apps/builder/src/page/Dashboard/DashboardApps/AppCard/index.tsx b/apps/builder/src/page/Dashboard/DashboardApps/AppCard/index.tsx
index 168d73c981..d86a08921f 100644
--- a/apps/builder/src/page/Dashboard/DashboardApps/AppCard/index.tsx
+++ b/apps/builder/src/page/Dashboard/DashboardApps/AppCard/index.tsx
@@ -124,6 +124,7 @@ export const AppCard: FC<AppCardProps> = (props) => {
           {canEditApp ? (
             <Button
               size="small"
+              variant="text"
               colorScheme="grayBlue"
               leftIcon={<PenIcon />}
               onClick={() => {
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/AppCardActionItem/utils.ts b/apps/builder/src/page/Dashboard/DashboardApps/AppCardActionItem/utils.ts
index 72df5b7924..e53b9702ab 100644
--- a/apps/builder/src/page/Dashboard/DashboardApps/AppCardActionItem/utils.ts
+++ b/apps/builder/src/page/Dashboard/DashboardApps/AppCardActionItem/utils.ts
@@ -1,4 +1,5 @@
-import { fetchCopyApp } from "@/services/apps"
+import { BASIC_APP_CONFIG } from "@/config/newAppConfig"
+import { fetchCopyApp, fetchCreateApp } from "@/services/apps"
 
 const APP_NAME_MAX_LENGTH = 128
 const COPY_SUFFIX = " Copy"
@@ -7,3 +8,10 @@ export const duplicateApp = (appId: string, appName?: string) => {
   const newAppName = `${(appName || "").slice(0, trimmedLength)}${COPY_SUFFIX}`
   return fetchCopyApp(appId, newAppName)
 }
+
+export const createApp = (appName = "Untitled app") => {
+  return fetchCreateApp({
+    appName,
+    initScheme: BASIC_APP_CONFIG,
+  })
+}
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/contentBody.tsx b/apps/builder/src/page/Dashboard/DashboardApps/contentBody.tsx
index d0be64bdf2..921ee4973b 100644
--- a/apps/builder/src/page/Dashboard/DashboardApps/contentBody.tsx
+++ b/apps/builder/src/page/Dashboard/DashboardApps/contentBody.tsx
@@ -2,7 +2,15 @@ import { FC, useEffect, useMemo } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { useAsyncValue, useNavigate, useParams } from "react-router-dom"
 import useMeasure from "react-use-measure"
-import { Empty, List } from "@illa-design/react"
+import {
+  Button,
+  Empty,
+  EmptyIcon,
+  List,
+  PlusIcon,
+  globalColor,
+  illaPrefix,
+} from "@illa-design/react"
 import {
   ILLA_MIXPANEL_BUILDER_PAGE_NAME,
   ILLA_MIXPANEL_EVENT_TYPE,
@@ -15,16 +23,19 @@ import { track } from "@/utils/mixpanelHelper"
 import {
   CARD_GAP_SIZE,
   CARD_WIDTH,
+  emptyStyle,
   fullWidthStyle,
   listContainerStyle,
 } from "./style"
 
 interface AppsContentBodyProps {
   canEditApp: boolean
+  loading: boolean
+  onCreatedApp: () => void
 }
 
 export const AppsContentBody: FC<AppsContentBodyProps> = (props) => {
-  const { canEditApp } = props
+  const { canEditApp, loading, onCreatedApp } = props
   const { data: appsList } = useAsyncValue() as {
     data: DashboardApp[]
   }
@@ -120,7 +131,34 @@ export const AppsContentBody: FC<AppsContentBodyProps> = (props) => {
           }}
         />
       )}
-      {finalAppsList.length == 0 && <Empty paddingVertical="120px" />}
+      {finalAppsList.length === 0 && (
+        <Empty
+          paddingVertical="120px"
+          icon={
+            <EmptyIcon
+              size="48px"
+              color={globalColor(`--${illaPrefix}-grayBlue-02`)}
+            />
+          }
+          description={
+            <div css={emptyStyle}>
+              <div>Empty</div>
+              <div>
+                <Button
+                  colorScheme="grayBlue"
+                  loading={loading}
+                  leftIcon={<PlusIcon />}
+                  onClick={() => {
+                    onCreatedApp()
+                  }}
+                >
+                  Create your first app
+                </Button>
+              </div>
+            </div>
+          }
+        />
+      )}
     </div>
   )
 }
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/index.tsx b/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
index bb19beb2d9..fa4df73270 100644
--- a/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
+++ b/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
@@ -10,7 +10,7 @@ import {
   useNavigate,
   useParams,
 } from "react-router-dom"
-import { Button, useMessage } from "@illa-design/react"
+import { Button, PlusIcon, useMessage } from "@illa-design/react"
 import { BASIC_APP_CONFIG } from "@/config/newAppConfig"
 import { Avatar } from "@/illa-public-component/Avatar"
 import {
@@ -73,7 +73,10 @@ export const DashboardApps: FC = () => {
     ACTION_MANAGE.CREATE_APP,
   )
 
-  const createApp = useCallback(() => {
+  const handleCreateApp = useCallback(() => {
+    track(ILLA_MIXPANEL_EVENT_TYPE.CLICK, ILLA_MIXPANEL_BUILDER_PAGE_NAME.APP, {
+      element: "create_new_app",
+    })
     if (loading) return
     setLoading(true)
     fetchCreateApp({
@@ -156,15 +159,9 @@ export const DashboardApps: FC = () => {
             <Button
               ml="4px"
               colorScheme="techPurple"
+              leftIcon={<PlusIcon />}
               loading={loading}
-              onClick={() => {
-                track(
-                  ILLA_MIXPANEL_EVENT_TYPE.CLICK,
-                  ILLA_MIXPANEL_BUILDER_PAGE_NAME.APP,
-                  { element: "create_new_app" },
-                )
-                createApp()
-              }}
+              onClick={handleCreateApp}
             >
               {t("create_new_app")}
             </Button>
@@ -173,7 +170,11 @@ export const DashboardApps: FC = () => {
       </div>
       <Suspense fallback={<DashBoardLoading />}>
         <Await resolve={appList} errorElement={<DashboardErrorElement />}>
-          <AppsContentBody canEditApp={canEditApp} />
+          <AppsContentBody
+            canEditApp={canEditApp}
+            onCreatedApp={handleCreateApp}
+            loading={loading}
+          />
         </Await>
       </Suspense>
     </div>
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/style.tsx b/apps/builder/src/page/Dashboard/DashboardApps/style.tsx
index e413d8a794..8e194e194f 100644
--- a/apps/builder/src/page/Dashboard/DashboardApps/style.tsx
+++ b/apps/builder/src/page/Dashboard/DashboardApps/style.tsx
@@ -63,3 +63,14 @@ export const hoverStyle = css`
     }
   }
 `
+
+export const emptyStyle: SerializedStyles = css`
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  font-weight: 600;
+  line-height: 22px;
+`