From fc259f7d8e9eb0927005189b4acf796520b7ad6f Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 21 Apr 2024 16:37:20 +0800
Subject: [PATCH] refactor: improve mobile display for monitor and base layout

---
 src/client/components/monitor/MonitorInfo.tsx | 170 +++++++++---------
 src/client/hooks/useWindowSize.ts             |   4 +-
 src/client/pages/Layout/MobileLayout.tsx      |  10 +-
 3 files changed, 94 insertions(+), 90 deletions(-)

diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx
index 9411abe..072fa73 100644
--- a/src/client/components/monitor/MonitorInfo.tsx
+++ b/src/client/components/monitor/MonitorInfo.tsx
@@ -22,6 +22,7 @@ import { DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { MonitorBadgeView } from './MonitorBadgeView';
 import { useTranslation } from '@i18next-toolkit/react';
 import { useNavigate } from '@tanstack/react-router';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface MonitorInfoProps {
   monitorId: string;
@@ -33,6 +34,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   const [currectResponse, setCurrentResponse] = useState(0);
   const navigate = useNavigate();
   const [showBadge, setShowBadge] = useState(false);
+  const isMobile = useIsMobile();
 
   const {
     data: monitorInfo,
@@ -171,108 +173,106 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
         <Space className="w-full" direction="vertical">
           <div className="flex justify-between">
             <Space direction="vertical">
-              <div className="flex items-center gap-2 text-2xl">
-                <span>{monitorInfo.name}</span>
-                {monitorInfo.active === false && (
-                  <div className="rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
-                    {t('Stopped')}
-                  </div>
-                )}
-              </div>
-
               <div>
                 <ColorTag label={monitorInfo.type} />
                 <span>
                   {getMonitorLink(monitorInfo as any as MonitorInfoType)}
                 </span>
               </div>
+
+              <div className="flex gap-2">
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    navigate({
+                      to: '/monitor/$monitorId/edit',
+                      params: {
+                        monitorId: monitorInfo.id,
+                      },
+                    });
+                  }}
+                >
+                  {t('Edit')}
+                </Button>
+
+                {monitorInfo.active ? (
+                  <Button
+                    loading={changeActiveMutation.isLoading}
+                    onClick={handleStop}
+                  >
+                    {t('Stop')}
+                  </Button>
+                ) : (
+                  <Button
+                    loading={changeActiveMutation.isLoading}
+                    onClick={handleStart}
+                  >
+                    {t('Start')}
+                  </Button>
+                )}
+
+                <Dropdown
+                  trigger={['click']}
+                  placement="bottomRight"
+                  menu={{
+                    items: [
+                      {
+                        key: 'badge',
+                        label: t('Show Badge'),
+                        onClick: () => setShowBadge(true),
+                      },
+                      {
+                        type: 'divider',
+                      },
+                      {
+                        key: 'delete',
+                        label: t('Delete'),
+                        danger: true,
+                        onClick: handleDelete,
+                      },
+                    ],
+                  }}
+                >
+                  <Button icon={<MoreOutlined />} />
+                </Dropdown>
+
+                <Modal
+                  open={showBadge}
+                  onCancel={() => setShowBadge(false)}
+                  onOk={() => setShowBadge(false)}
+                  destroyOnClose={true}
+                  centered={true}
+                >
+                  <MonitorBadgeView
+                    workspaceId={workspaceId}
+                    monitorId={monitorId}
+                    monitorName={monitorInfo.name}
+                  />
+                </Modal>
+              </div>
             </Space>
 
             <div className="text-black text-opacity-75 dark:text-gray-200">
-              {t('Monitored for {{dayNum}} days', {
-                dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
-              })}
+              <div>
+                {t('Monitored for {{dayNum}} days', {
+                  dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
+                })}
+              </div>
+              {monitorInfo.active === false && (
+                <div className="inline-block rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
+                  {t('Stopped')}
+                </div>
+              )}
             </div>
           </div>
 
-          <div className="flex gap-2">
-            <Button
-              type="primary"
-              onClick={() => {
-                navigate({
-                  to: '/monitor/$monitorId/edit',
-                  params: {
-                    monitorId: monitorInfo.id,
-                  },
-                });
-              }}
-            >
-              {t('Edit')}
-            </Button>
-
-            {monitorInfo.active ? (
-              <Button
-                loading={changeActiveMutation.isLoading}
-                onClick={handleStop}
-              >
-                {t('Stop')}
-              </Button>
-            ) : (
-              <Button
-                loading={changeActiveMutation.isLoading}
-                onClick={handleStart}
-              >
-                {t('Start')}
-              </Button>
-            )}
-
-            <Dropdown
-              trigger={['click']}
-              placement="bottomRight"
-              menu={{
-                items: [
-                  {
-                    key: 'badge',
-                    label: t('Show Badge'),
-                    onClick: () => setShowBadge(true),
-                  },
-                  {
-                    type: 'divider',
-                  },
-                  {
-                    key: 'delete',
-                    label: t('Delete'),
-                    danger: true,
-                    onClick: handleDelete,
-                  },
-                ],
-              }}
-            >
-              <Button icon={<MoreOutlined />} />
-            </Dropdown>
-
-            <Modal
-              open={showBadge}
-              onCancel={() => setShowBadge(false)}
-              onOk={() => setShowBadge(false)}
-              destroyOnClose={true}
-              centered={true}
-            >
-              <MonitorBadgeView
-                workspaceId={workspaceId}
-                monitorId={monitorId}
-                monitorName={monitorInfo.name}
-              />
-            </Modal>
-          </div>
-
           <Card>
             <MonitorHealthBar
               workspaceId={workspaceId}
               monitorId={monitorId}
               monitorType={monitorInfo.type}
-              count={40}
-              size="large"
+              count={isMobile ? 30 : 40}
+              size={isMobile ? 'small' : 'large'}
               showCurrentStatus={true}
               onBeatsItemUpdate={(items) => {
                 setCurrentResponse(last(items)?.value ?? 0);
diff --git a/src/client/hooks/useWindowSize.ts b/src/client/hooks/useWindowSize.ts
index b1d90e0..e57a9b4 100644
--- a/src/client/hooks/useWindowSize.ts
+++ b/src/client/hooks/useWindowSize.ts
@@ -7,8 +7,8 @@ interface WindowScreenSize {
 
 function getWindowSize(): WindowScreenSize {
   return {
-    width: window.screen.width,
-    height: window.screen.height,
+    width: window.innerWidth,
+    height: window.innerHeight,
   };
 }
 
diff --git a/src/client/pages/Layout/MobileLayout.tsx b/src/client/pages/Layout/MobileLayout.tsx
index faa64b3..bc21f38 100644
--- a/src/client/pages/Layout/MobileLayout.tsx
+++ b/src/client/pages/Layout/MobileLayout.tsx
@@ -25,8 +25,12 @@ export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
     <div className="flex h-svh flex-col">
       <div className="flex h-[52px] items-center justify-between px-2">
         <Sheet>
-          <SheetTrigger>
-            <Button variant="outline" size="icon">
+          <SheetTrigger disabled={!Boolean(props.list)}>
+            <Button
+              variant="outline"
+              size="icon"
+              disabled={!Boolean(props.list)}
+            >
               <LuMenu />
             </Button>
           </SheetTrigger>
@@ -35,7 +39,7 @@ export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
           </SheetContent>
         </Sheet>
 
-        <div>
+        <div className="rounded-md dark:bg-white/10">
           <img className="m-auto h-8 w-8" src="/icon.svg" />
         </div>