feat: add empty placeholder

web/src/components/CreateWorkspaceDialog.tsx

@@ -8,7 +8,7 @@ import toastHelper from "./Toast";
 interface Props {
   workspaceId?: WorkspaceId;
   onClose: () => void;
-  onConfirm?: () => void;
+  onConfirm?: (workspace: Workspace) => void;
 }
 
 interface State {
@@ -67,19 +67,20 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
 
     requestState.setLoading();
     try {
+      let workspace;
       if (workspaceId) {
-        await workspaceService.patchWorkspace({
+        workspace = await workspaceService.patchWorkspace({
           id: workspaceId,
           ...state.workspaceCreate,
         });
       } else {
-        await workspaceService.createWorkspace({
+        workspace = await workspaceService.createWorkspace({
           ...state.workspaceCreate,
         });
       }
 
       if (onConfirm) {
-        onConfirm();
+        onConfirm(workspace);
       } else {
         onClose();
       }

web/src/components/Header.tsx

@@ -122,6 +122,13 @@ const Header: React.FC = () => {
               showCreateWorkspaceDialog: false,
             });
           }}
+          onConfirm={(workspace: Workspace) => {
+            setState({
+              ...state,
+              showCreateWorkspaceDialog: false,
+            });
+            navigate(`/${workspace.name}`);
+          }}
         />
       )}
     </>

web/src/components/common/Dropdown.tsx

@@ -37,7 +37,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
       {trigger ? (
         trigger
       ) : (
-        <button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80">
+        <button className="flex flex-row justify-center items-center p-1 rounded text-gray-600 cursor-pointer border hover:opacity-80">
           <Icon.MoreHorizontal className="w-4 h-auto" />
         </button>
       )}

web/src/pages/Home.tsx

@@ -27,6 +27,11 @@ const Home: React.FC = () => {
     }
 
     Promise.all([workspaceService.fetchWorkspaceList()]).finally(() => {
+      const workspaceList = workspaceService.getState().workspaceList;
+      if (workspaceList.length > 0) {
+        navigate(`/${workspaceList[0].name}`);
+        return;
+      }
       loadingState.setFinish();
     });
   }, []);
@@ -45,18 +50,23 @@ const Home: React.FC = () => {
         <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
           <div className="mb-4 w-full flex flex-row justify-between items-center">
             <span className="font-mono text-gray-400">Workspace List</span>
-            <button
-              className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
-              onClick={handleCreateWorkspaceButtonClick}
-            >
-              <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
-            </button>
           </div>
           {loadingState.isLoading ? (
             <div className="py-4 w-full flex flex-row justify-center items-center">
               <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
               loading
             </div>
+          ) : workspaceList.length === 0 ? (
+            <div className="w-full flex flex-col justify-center items-center">
+              <Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
+              <p className="mt-4 text-xl text-gray-600">Oops, no workspace.</p>
+              <button
+                className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+                onClick={handleCreateWorkspaceButtonClick}
+              >
+                <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
+              </button>
+            </div>
           ) : (
             <WorkspaceListView workspaceList={workspaceList} />
           )}
@@ -71,6 +81,13 @@ const Home: React.FC = () => {
               showCreateWorkspaceDialog: false,
             });
           }}
+          onConfirm={(workspace: Workspace) => {
+            setState({
+              ...state,
+              showCreateWorkspaceDialog: false,
+            });
+            navigate(`/${workspace.name}`);
+          }}
         />
       )}
     </>

web/src/pages/WorkspaceDetail.tsx

@@ -76,14 +76,29 @@ const WorkspaceDetail: React.FC = () => {
         <Header />
         <div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
           <div className="w-full flex flex-row justify-between items-center mt-4 mb-4">
-            <div className="flex flex-row justify-start items-center space-x-4">
-              <NavLink to="#shortcuts" className={`${location.hash === "#shortcuts" && "underline"}`}>
+            <div className="flex flex-row justify-start items-center space-x-3 sm:space-x-4">
+              <NavLink
+                to="#shortcuts"
+                className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
+                  location.hash === "#shortcuts" && "!border-b-black text-black"
+                }`}
+              >
                 Shortcuts
               </NavLink>
-              <NavLink to="#members" className={`${location.hash === "#members" && "underline"}`}>
+              <NavLink
+                to="#members"
+                className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
+                  location.hash === "#members" && "!border-b-black text-black"
+                }`}
+              >
                 Members
               </NavLink>
-              <NavLink to="#setting" className={`${location.hash === "#setting" && "underline"}`}>
+              <NavLink
+                to="#setting"
+                className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
+                  location.hash === "#setting" && "!border-b-black text-black"
+                }`}
+              >
                 Setting
               </NavLink>
             </div>
@@ -123,7 +138,21 @@ const WorkspaceDetail: React.FC = () => {
             </div>
           ) : (
             <>
-              {location.hash === "#shortcuts" && <ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />}
+              {location.hash === "#shortcuts" &&
+                (shortcutList.length === 0 ? (
+                  <div className="w-full flex flex-col justify-center items-center">
+                    <Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
+                    <p className="mt-4 text-xl text-gray-600">Oops, no shortcut.</p>
+                    <button
+                      className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+                      onClick={handleCreateShortcutButtonClick}
+                    >
+                      <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
+                    </button>
+                  </div>
+                ) : (
+                  <ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />
+                ))}
               {location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
               {location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
             </>