From d46df916cf7f5440868af90c05810d2210dadf47 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 26 Jun 2023 20:50:37 +0800
Subject: [PATCH] chore: add empty view

---
 web/src/components/ShortcutView.tsx |  2 +-
 web/src/pages/Home.tsx              | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 252c36f..08f682a 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -29,7 +29,7 @@ const ShortcutView = (props: Props) => {
   const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
     showCommonDialog({
       title: "Delete Shortcut",
-      content: `Are you sure to delete shortcut \`${shortcut.name}\` in this workspace?`,
+      content: `Are you sure to delete shortcut \`${shortcut.name}\`? You can not undo this action.`,
       style: "danger",
       onConfirm: async () => {
         await shortcutService.deleteShortcutById(shortcut.id);
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 87e2432..3b0534b 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
@@ -59,10 +60,18 @@ const Home: React.FC = () => {
           </div>
         </div>
         {loadingState.isLoading ? (
-          <div className="py-4 w-full flex flex-row justify-center items-center">
+          <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">
             <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
             loading
           </div>
+        ) : shortcutList.length === 0 ? (
+          <div className="py-4 w-full flex flex-col justify-center items-center">
+            <Icon.PackageOpen className="w-12 h-auto text-gray-400" />
+            <p className="mt-4 mb-2">No shortcuts found.</p>
+            <Button size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
+              Create one
+            </Button>
+          </div>
         ) : (
           <ShortcutListView shortcutList={shortcutList} />
         )}