Connect React workspace to backend data

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

@@ -5,13 +5,14 @@ import { ProjectRail } from './projects/project-rail'
 import { ProjectSidebar } from './projects/project-sidebar'
 import { ProjectStatusbar } from './projects/project-statusbar'
 import { ProjectTopbar } from './projects/project-topbar'
-import type { ChannelKey, Project, Theme, WorkbenchView } from './projects/project-types'
+import type { ChannelKey, Project, ProjectWorkspace, Theme, WorkbenchView } from './projects/project-types'
 
 const { Content } = Layout
 
 export function ProjectPage({
   activeView,
-  activeProject,
+  activeWorkspace,
+  workspaces,
   activeChannel,
   theme,
   onSelectProject,
@@ -21,7 +22,8 @@ export function ProjectPage({
   onToggleTheme,
 }: {
   activeView: WorkbenchView
-  activeProject: Project
+  activeWorkspace: ProjectWorkspace
+  workspaces: ProjectWorkspace[]
   activeChannel: ChannelKey
   theme: Theme
   onSelectProject: (project: Project) => void
@@ -31,6 +33,7 @@ export function ProjectPage({
   onToggleTheme: () => void
 }) {
   const isWorkspace = activeView === 'workspace'
+  const projects = workspaces.map((workspace) => workspace.project)
 
   return (
     <Layout className="workbench-shell">
@@ -38,7 +41,8 @@ export function ProjectPage({
 
       <Layout className="workbench-main" hasSider>
         <ProjectRail
-          activeProject={activeProject}
+          activeProject={activeWorkspace.project}
+          projects={projects}
           activeView={activeView}
           onSelectWorkspace={onSelectWorkspace}
           onSelectProject={onSelectProject}
@@ -47,7 +51,7 @@ export function ProjectPage({
         {!isWorkspace && (
           <ProjectSidebar
             activeView={activeView}
-            activeProject={activeProject}
+            activeWorkspace={activeWorkspace}
             activeChannel={activeChannel}
             onSelectChannel={onSelectChannel}
             onSelectItem={onSelectItem}
@@ -56,11 +60,11 @@ export function ProjectPage({
 
         <Content className="stage">
           {isWorkspace ? (
-            <WorkspacePage onSelectProject={onSelectProject} />
+            <WorkspacePage workspaces={workspaces} onSelectProject={onSelectProject} />
           ) : (
             <ProjectChannelPage
               activeChannel={activeChannel}
-              activeProject={activeProject}
+              activeWorkspace={activeWorkspace}
               onSelectItem={onSelectItem}
             />
           )}