From 0711c3c003d1e86130afece1178d2fb32d0d7191 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 2 Apr 2024 23:11:29 +0800
Subject: [PATCH] refactor: move add desktop layout into

---
 src/client/pages/Layout/DesktopLayout.tsx | 162 +++++++++++++++++++++
 src/client/pages/Layout/MobileLayout.tsx  |   6 +
 src/client/pages/Layout/UserConfig.tsx    |   1 -
 src/client/pages/Layout/types.ts          |   3 +
 src/client/pages/LayoutV2.tsx             | 166 ++--------------------
 5 files changed, 180 insertions(+), 158 deletions(-)
 create mode 100644 src/client/pages/Layout/DesktopLayout.tsx
 create mode 100644 src/client/pages/Layout/MobileLayout.tsx
 create mode 100644 src/client/pages/Layout/types.ts

diff --git a/src/client/pages/Layout/DesktopLayout.tsx b/src/client/pages/Layout/DesktopLayout.tsx
new file mode 100644
index 0000000..1d4b597
--- /dev/null
+++ b/src/client/pages/Layout/DesktopLayout.tsx
@@ -0,0 +1,162 @@
+import * as React from 'react';
+import {
+  LuAreaChart,
+  LuFilePieChart,
+  LuMonitorDot,
+  LuServer,
+  LuWifi,
+} from 'react-icons/lu';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+import { useLocalStorageState } from 'ahooks';
+import { cn } from '@/utils/style';
+import { Separator } from '@/components/ui/separator';
+import { Nav } from './Nav';
+import { WorkspaceSwitcher } from '@/components/WorkspaceSwitcher';
+import { UserConfig } from './UserConfig';
+import { Outlet } from '@tanstack/react-router';
+import { trpc } from '@/api/trpc';
+import { useUserStore } from '@/store/user';
+import { LayoutProps } from './types';
+
+const defaultLayout: [number, number, number] = [265, 440, 655];
+
+export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
+  const [layout = defaultLayout, setLayout] = useLocalStorageState(
+    'react-resizable-panels:layout',
+    { defaultValue: defaultLayout }
+  );
+  const [isCollapsed = false, setIsCollapsed] = useLocalStorageState<boolean>(
+    'react-resizable-panels:collapsed',
+    {
+      defaultValue: false,
+    }
+  );
+  const workspaceId = useUserStore((state) => state.info?.currentWorkspace?.id);
+  const { data: serviceCount } = trpc.workspace.getServiceCount.useQuery(
+    {
+      workspaceId: workspaceId!,
+    },
+    {
+      enabled: !!workspaceId,
+    }
+  );
+
+  const navbar = (
+    <>
+      <div
+        className={cn(
+          'flex h-[52px] items-center justify-center',
+          isCollapsed ? 'h-[52px]' : 'px-2'
+        )}
+      >
+        <WorkspaceSwitcher isCollapsed={isCollapsed} />
+      </div>
+      <Separator />
+      <Nav
+        isCollapsed={isCollapsed}
+        links={[
+          {
+            title: 'Website',
+            label: String(serviceCount?.website ?? ''),
+            icon: LuAreaChart,
+            to: '/website',
+          },
+          {
+            title: 'Monitor',
+            label: String(serviceCount?.monitor ?? ''),
+            icon: LuMonitorDot,
+            to: '/monitor',
+          },
+          {
+            title: 'Servers',
+            label: '',
+            icon: LuServer,
+            to: '/server',
+          },
+          {
+            title: 'Telemetry',
+            label: String(serviceCount?.telemetry ?? ''),
+            icon: LuWifi,
+            to: '/telemetry',
+          },
+          {
+            title: 'Pages',
+            label: String(serviceCount?.page ?? ''),
+            icon: LuFilePieChart,
+            to: '/page',
+          },
+        ]}
+      />
+      <Separator />
+      <div className="flex-1" />
+      <Separator />
+
+      <div className={cn(isCollapsed && 'm-auto')}>
+        <UserConfig isCollapsed={isCollapsed} />
+      </div>
+    </>
+  );
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes: number[]) => {
+          if (sizes.length === 3) {
+            setLayout(sizes as typeof defaultLayout);
+          } else if (sizes.length === 2) {
+            const listSize = layout[1];
+            const rest = 100 - sizes[0] - listSize;
+            setLayout([sizes[0], listSize, rest]);
+          }
+        }}
+        className="h-full items-stretch"
+      >
+        <ResizablePanel
+          defaultSize={layout[0]}
+          collapsedSize={1}
+          collapsible={true}
+          minSize={10}
+          maxSize={20}
+          onCollapse={() => {
+            setIsCollapsed(true);
+          }}
+          onExpand={() => {
+            setIsCollapsed(false);
+          }}
+          className={cn(
+            'flex flex-col',
+            isCollapsed &&
+              'min-w-[50px] transition-all duration-300 ease-in-out'
+          )}
+        >
+          {navbar}
+        </ResizablePanel>
+
+        {props.list && (
+          <>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={layout[1]} minSize={25}>
+              <div className="h-full overflow-hidden">{props.list}</div>
+            </ResizablePanel>
+          </>
+        )}
+
+        <ResizableHandle withHandle />
+        <ResizablePanel
+          defaultSize={props.list ? layout[2] : layout[1] + layout[2]}
+        >
+          <div className="h-full overflow-hidden">
+            {props.children ?? <Outlet />}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </TooltipProvider>
+  );
+});
+DesktopLayout.displayName = 'DesktopLayout';
diff --git a/src/client/pages/Layout/MobileLayout.tsx b/src/client/pages/Layout/MobileLayout.tsx
new file mode 100644
index 0000000..793e88f
--- /dev/null
+++ b/src/client/pages/Layout/MobileLayout.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const MobileLayout: React.FC = React.memo(() => {
+  return <div>Mobile</div>;
+});
+MobileLayout.displayName = 'MobileLayout';
diff --git a/src/client/pages/Layout/UserConfig.tsx b/src/client/pages/Layout/UserConfig.tsx
index f337460..3027581 100644
--- a/src/client/pages/Layout/UserConfig.tsx
+++ b/src/client/pages/Layout/UserConfig.tsx
@@ -1,4 +1,3 @@
-import { ColorSchemeSwitcher } from '@/components/ColorSchemeSwitcher';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
diff --git a/src/client/pages/Layout/types.ts b/src/client/pages/Layout/types.ts
new file mode 100644
index 0000000..bd33226
--- /dev/null
+++ b/src/client/pages/Layout/types.ts
@@ -0,0 +1,3 @@
+export interface LayoutProps extends React.PropsWithChildren {
+  list?: React.ReactNode;
+}
diff --git a/src/client/pages/LayoutV2.tsx b/src/client/pages/LayoutV2.tsx
index ad1986b..98b6b24 100644
--- a/src/client/pages/LayoutV2.tsx
+++ b/src/client/pages/LayoutV2.tsx
@@ -1,164 +1,16 @@
 import * as React from 'react';
-import {
-  LuAreaChart,
-  LuFilePieChart,
-  LuMonitorDot,
-  LuServer,
-  LuWifi,
-} from 'react-icons/lu';
-import { TooltipProvider } from '@/components/ui/tooltip';
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable';
-import { useLocalStorageState } from 'ahooks';
-import { cn } from '@/utils/style';
-import { Separator } from '@/components/ui/separator';
-import { Nav } from './Layout/Nav';
-import { WorkspaceSwitcher } from '@/components/WorkspaceSwitcher';
-import { UserConfig } from './Layout/UserConfig';
-import { Outlet } from '@tanstack/react-router';
-import { trpc } from '@/api/trpc';
-import { useUserStore } from '@/store/user';
+import { DesktopLayout } from './Layout/DesktopLayout';
+import { LayoutProps } from './Layout/types';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { MobileLayout } from './Layout/MobileLayout';
 
-const defaultLayout: [number, number, number] = [265, 440, 655];
-
-interface LayoutProps extends React.PropsWithChildren {
-  list?: React.ReactNode;
-}
 export const LayoutV2: React.FC<LayoutProps> = React.memo((props) => {
-  const [layout = defaultLayout, setLayout] = useLocalStorageState(
-    'react-resizable-panels:layout',
-    { defaultValue: defaultLayout }
-  );
-  const [isCollapsed = false, setIsCollapsed] = useLocalStorageState<boolean>(
-    'react-resizable-panels:collapsed',
-    {
-      defaultValue: false,
-    }
-  );
-  const workspaceId = useUserStore((state) => state.info?.currentWorkspace?.id);
-  const { data: serviceCount } = trpc.workspace.getServiceCount.useQuery(
-    {
-      workspaceId: workspaceId!,
-    },
-    {
-      enabled: !!workspaceId,
-    }
-  );
+  const isMobile = useIsMobile();
 
-  const navbar = (
-    <>
-      <div
-        className={cn(
-          'flex h-[52px] items-center justify-center',
-          isCollapsed ? 'h-[52px]' : 'px-2'
-        )}
-      >
-        <WorkspaceSwitcher isCollapsed={isCollapsed} />
-      </div>
-      <Separator />
-      <Nav
-        isCollapsed={isCollapsed}
-        links={[
-          {
-            title: 'Website',
-            label: String(serviceCount?.website ?? ''),
-            icon: LuAreaChart,
-            to: '/website',
-          },
-          {
-            title: 'Monitor',
-            label: String(serviceCount?.monitor ?? ''),
-            icon: LuMonitorDot,
-            to: '/monitor',
-          },
-          {
-            title: 'Servers',
-            label: '',
-            icon: LuServer,
-            to: '/server',
-          },
-          {
-            title: 'Telemetry',
-            label: String(serviceCount?.telemetry ?? ''),
-            icon: LuWifi,
-            to: '/telemetry',
-          },
-          {
-            title: 'Pages',
-            label: String(serviceCount?.page ?? ''),
-            icon: LuFilePieChart,
-            to: '/page',
-          },
-        ]}
-      />
-      <Separator />
-      <div className="flex-1" />
-      <Separator />
+  if (isMobile) {
+    return <MobileLayout />;
+  }
 
-      <div className={cn(isCollapsed && 'm-auto')}>
-        <UserConfig isCollapsed={isCollapsed} />
-      </div>
-    </>
-  );
-
-  return (
-    <TooltipProvider delayDuration={0}>
-      <ResizablePanelGroup
-        direction="horizontal"
-        onLayout={(sizes: number[]) => {
-          if (sizes.length === 3) {
-            setLayout(sizes as typeof defaultLayout);
-          } else if (sizes.length === 2) {
-            const listSize = layout[1];
-            const rest = 100 - sizes[0] - listSize;
-            setLayout([sizes[0], listSize, rest]);
-          }
-        }}
-        className="h-full items-stretch"
-      >
-        <ResizablePanel
-          defaultSize={layout[0]}
-          collapsedSize={1}
-          collapsible={true}
-          minSize={10}
-          maxSize={20}
-          onCollapse={() => {
-            setIsCollapsed(true);
-          }}
-          onExpand={() => {
-            setIsCollapsed(false);
-          }}
-          className={cn(
-            'flex flex-col',
-            isCollapsed &&
-              'min-w-[50px] transition-all duration-300 ease-in-out'
-          )}
-        >
-          {navbar}
-        </ResizablePanel>
-
-        {props.list && (
-          <>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={layout[1]} minSize={25}>
-              <div className="h-full overflow-hidden">{props.list}</div>
-            </ResizablePanel>
-          </>
-        )}
-
-        <ResizableHandle withHandle />
-        <ResizablePanel
-          defaultSize={props.list ? layout[2] : layout[1] + layout[2]}
-        >
-          <div className="h-full overflow-hidden">
-            {props.children ?? <Outlet />}
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </TooltipProvider>
-  );
+  return <DesktopLayout {...props} />;
 });
 LayoutV2.displayName = 'LayoutV2';