Split React client pages into modules

apps/senlinai-acro-react/src/app/App.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { ConfigProvider } from '@arco-design/web-react'
+import '@arco-design/web-react/dist/css/arco.css'
+import '../App.css'
+import { LoginPage } from '../pages/login'
+import { ProjectPage } from '../pages/project'
+import { projects } from '../features/projects/project-data'
+import type { ChannelKey, Screen, Theme } from '../features/projects/project-types'
+
+function App() {
+  const [screen, setScreen] = useState<Screen>('login')
+  const [theme, setTheme] = useState<Theme>('light')
+  const [activeProject, setActiveProject] = useState(projects[0])
+  const [activeChannel, setActiveChannel] = useState<ChannelKey>('overview')
+  const [selectedItem, setSelectedItem] = useState('Inbox 待处理（36）')
+
+  const dark = theme === 'dark'
+
+  return (
+    <ConfigProvider>
+      <main className={dark ? 'app theme-dark' : 'app'}>
+        {screen === 'login' ? (
+          <LoginPage onLogin={() => setScreen('workbench')} />
+        ) : (
+          <ProjectPage
+            activeProject={activeProject}
+            activeChannel={activeChannel}
+            selectedItem={selectedItem}
+            theme={theme}
+            onSelectProject={setActiveProject}
+            onSelectChannel={setActiveChannel}
+            onSelectItem={setSelectedItem}
+            onToggleTheme={() => setTheme(dark ? 'light' : 'dark')}
+          />
+        )}
+      </main>
+    </ConfigProvider>
+  )
+}
+
+export default App