feat(cta-ui-base): slot-based composition for RootComponent and AppSidebar

packages/cta-ui-base/src/app.tsx

@@ -5,23 +5,41 @@ import FileNavigator from './components/file-navigator'
 import StartupDialog from './components/startup-dialog'
 import { CTAProvider } from './components/cta-provider'
 
-export default function RootComponent() {
+export interface RootComponentProps {
+  slots?: Partial<{
+    header: React.ReactNode
+    sidebar: React.ReactNode
+    fileNavigator: React.ReactNode
+    startupDialog: React.ReactNode
+  }>
+}
+
+export const defaultSlots: RootComponentProps['slots'] = {
+  header: <AppHeader />,
+  sidebar: <AppSidebar />,
+  fileNavigator: <FileNavigator />,
+  startupDialog: <StartupDialog />,
+}
+
+export default function RootComponent(props: RootComponentProps) {
+  const slots = Object.assign({}, defaultSlots, props.slots)
+
   return (
     <CTAProvider>
       <main className="min-w-[1280px]">
         <BackgroundAnimation />
         <div className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container">
-          <AppHeader />
+          {slots.header}
           <div className="flex flex-row">
             <div className="w-1/3 @8xl:w-1/4 pr-2">
-              <AppSidebar />
+              {slots.sidebar}
             </div>
             <div className="w-2/3 @8xl:w-3/4 pl-2">
-              <FileNavigator />
+              {slots.fileNavigator}
             </div>
           </div>
         </div>
-        <StartupDialog />
+        {slots.startupDialog}
       </main>
     </CTAProvider>
   )

packages/cta-ui-base/src/components/cta-sidebar.tsx

@@ -9,9 +9,27 @@ import TypescriptSwitch from './sidebar-items/typescript-switch'
 import StarterDialog from './sidebar-items/starter'
 import SidebarGroup from './sidebar-items/sidebar-group'
 
-export function AppSidebar() {
+export interface SidebarProps {
+  slots?: {
+    actions: React.ReactNode
+  }
+}
+
+export const DefaultAppSidebarActions = () => (
+  <div className="mt-5">
+    <RunAddOns />
+    <RunCreateApp />
+  </div>
+)
+
+const defaultSlots: SidebarProps['slots'] = {
+  actions: <DefaultAppSidebarActions />,
+}
+
+export function AppSidebar(props: SidebarProps) {
   const ready = useReady()
   const mode = useApplicationMode()
+  const slots = Object.assign({}, defaultSlots, props.slots)
 
   return (
     <div className="flex flex-col gap-2">
@@ -34,10 +52,7 @@ export function AppSidebar() {
           )}
         </>
       )}
-      <div className="mt-5">
-        <RunAddOns />
-        <RunCreateApp />
-      </div>
+      {slots.actions}
     </div>
   )
 }

packages/cta-ui-base/src/components/sidebar-items/run-create-app.tsx

@@ -20,6 +20,7 @@ import {
 import StatusList from '../status-list'
 import { createAppStreaming, shutdown } from '../../lib/api'
 
+
 export default function RunCreateApp() {
   const [isRunning, setIsRunning] = useState(false)
   const { streamItems, monitorStream, finished } = useStreamingStatus()

packages/cta-ui-base/src/index.ts

@@ -41,4 +41,4 @@ export {
   useReady,
 }
 
-export default RootComponent
+export default RootComponent