feat: add dashboard add none placeholder and arrow rotate animation

src/client/components/dashboard/AddButton.tsx

@@ -1,9 +1,10 @@
 import { Button, Dropdown, MenuProps, Space } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { useDashboardStore } from '../../store/dashboard';
 import { DownOutlined } from '@ant-design/icons';
+import clsx from 'clsx';
 
 export const DashboardItemAddButton: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
@@ -16,6 +17,7 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
       workspaceId,
     });
   const { addItem } = useDashboardStore();
+  const [open, setOpen] = useState(false);
 
   const isLoading = isWebsiteLoading || isMonitorLoading;
 
@@ -24,7 +26,9 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
       {
         key: 'website',
         label: 'Website',
-        children: websites.map((website) => ({
+        children:
+          websites.length > 0
+            ? websites.map((website) => ({
                 key: `website#${website.id}`,
                 label: website.name,
                 children: [
@@ -51,12 +55,21 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
                     },
                   },
                 ],
-        })),
+              }))
+            : [
+                {
+                  key: `website#none`,
+                  label: '(None)',
+                  disabled: true,
+                },
+              ],
       },
       {
         key: 'monitor',
         label: 'Monitor',
-        children: monitors.map((monitor) => ({
+        children:
+          monitors.length > 0
+            ? monitors.map((monitor) => ({
                 key: `monitor#${monitor.id}`,
                 label: monitor.name,
                 children: [
@@ -86,7 +99,11 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
                     key: `monitor#${monitor.id}#chart`,
                     label: 'Chart',
                     onClick: () => {
-                addItem('monitorChart', monitor.id, `${monitor.name}'s Chart`);
+                      addItem(
+                        'monitorChart',
+                        monitor.id,
+                        `${monitor.name}'s Chart`
+                      );
                     },
                   },
                   {
@@ -101,18 +118,36 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
                     },
                   },
                 ],
-        })),
+              }))
+            : [
+                {
+                  key: `monitor#none`,
+                  label: '(None)',
+                  disabled: true,
+                },
+              ],
       },
     ],
   };
 
   return (
     <div>
-      <Dropdown trigger={['click']} disabled={isLoading} menu={menu}>
+      <Dropdown
+        trigger={['click']}
+        disabled={isLoading}
+        menu={menu}
+        open={open}
+        onOpenChange={setOpen}
+      >
         <Button type="primary" size="large" className="w-32">
           <Space>
             <span>Add</span>
-            <DownOutlined />
+            <DownOutlined
+              className={clsx(
+                'transition-transform scale-y-75',
+                open && 'rotate-180'
+              )}
+            />
           </Space>
         </Button>
       </Dropdown>