Split React client pages into modules

apps/senlinai-acro-react/src/pages/project.tsx

@@ -0,0 +1,55 @@
+import { Layout } from '@arco-design/web-react'
+import { OverviewPage } from './overview'
+import { ProjectInspector } from '../features/projects/project-inspector'
+import { ProjectRail } from '../features/projects/project-rail'
+import { ProjectSidebar } from '../features/projects/project-sidebar'
+import { ProjectStatusbar } from '../features/projects/project-statusbar'
+import { ProjectTopbar } from '../features/projects/project-topbar'
+import type { ChannelKey, Project, Theme } from '../features/projects/project-types'
+
+const { Content } = Layout
+
+export function ProjectPage({
+  activeProject,
+  activeChannel,
+  selectedItem,
+  theme,
+  onSelectProject,
+  onSelectChannel,
+  onSelectItem,
+  onToggleTheme,
+}: {
+  activeProject: Project
+  activeChannel: ChannelKey
+  selectedItem: string
+  theme: Theme
+  onSelectProject: (project: Project) => void
+  onSelectChannel: (key: ChannelKey) => void
+  onSelectItem: (title: string) => void
+  onToggleTheme: () => void
+}) {
+  return (
+    <Layout className="workbench-shell">
+      <ProjectTopbar theme={theme} onToggleTheme={onToggleTheme} />
+
+      <Layout className="workbench-main">
+        <ProjectRail activeProject={activeProject} onSelectProject={onSelectProject} />
+
+        <ProjectSidebar
+          activeProject={activeProject}
+          activeChannel={activeChannel}
+          onSelectChannel={onSelectChannel}
+          onSelectItem={onSelectItem}
+        />
+
+        <Content className="stage">
+          <OverviewPage onSelectItem={onSelectItem} />
+        </Content>
+
+        <ProjectInspector activeProject={activeProject} activeChannel={activeChannel} selectedItem={selectedItem} />
+      </Layout>
+
+      <ProjectStatusbar />
+    </Layout>
+  )
+}