feat: Add stub pages for module and verb

console/client/src/App.tsx

@@ -2,8 +2,10 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import { DeploymentPage } from './features/deployments/DeploymentPage.tsx'
 import { DeploymentsPage } from './features/deployments/DeploymentsPage.tsx'
 import { GraphPage } from './features/graph/GraphPage.tsx'
+import { ModulePage } from './features/modules/ModulePage.tsx'
 import { ModulesPage } from './features/modules/ModulesPage.tsx'
 import { TimelinePage } from './features/timeline/TimelinePage.tsx'
+import { VerbPage } from './features/verbs/VerbPage.tsx'
 import { Layout } from './layout/Layout.tsx'
 import { bgColor, textColor } from './utils/style.utils.ts'
 
@@ -14,9 +16,14 @@ export const App = () => {
         <Route path='/' element={<Layout />}>
           <Route path='/' element={<Navigate to='events' replace />} />
           <Route path='events' element={<TimelinePage />} />
+
           <Route path='modules' element={<ModulesPage />} />
+          <Route path='modules/:moduleName' element={<ModulePage />} />
+          <Route path='modules/:moduleName/verbs/:verbName' element={<VerbPage />} />
+
           <Route path='deployments' element={<DeploymentsPage />} />
           <Route path='deployments/:deploymentName' element={<DeploymentPage />} />
+
           <Route path='graph' element={<GraphPage />} />
         </Route>
       </Routes>

console/client/src/components/PageHeader.tsx

@@ -20,7 +20,7 @@ export const PageHeader = ({ icon, title, children, breadcrumbs }: Props) => {
         <span className='mt-1 text-indigo-500 mr-2 mb-1 h-5 w-5'>{icon}</span>
         {breadcrumbs && breadcrumbs.length > 0 && (
           <nav className='flex pr-2' aria-label='Breadcrumb'>
-            <ol role='list' className='flex items-center space-x-4'>
+            <ol role='list' className='flex items-center space-x-2'>
               {breadcrumbs.map((crumb, index) => (
                 <li key={index}>
                   <div className='flex items-center'>

console/client/src/features/deployments/DeploymentPage.tsx

@@ -1,6 +1,6 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import React from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { ButtonSmall } from '../../components/ButtonSmall'
 import { Card } from '../../components/Card'
 import { PageHeader } from '../../components/PageHeader'
@@ -10,6 +10,7 @@ import { modulesContext } from '../../providers/modules-provider'
 import { verbRefString } from '../verbs/verb.utils'
 
 export const DeploymentPage = () => {
+  const navigate = useNavigate()
   const { deploymentName } = useParams()
   const modules = React.useContext(modulesContext)
   const [module, setModule] = React.useState<Module | undefined>()
@@ -58,7 +59,11 @@ export const DeploymentPage = () => {
       <div className='m-4'>
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
           {module?.verbs.map((verb) => (
-            <Card key={module.deploymentName} topBarColor='bg-green-500' onClick={() => console.log('click')}>
+            <Card
+              key={module.deploymentName}
+              topBarColor='bg-green-500'
+              onClick={() => navigate(`/modules/${module.name}/verbs/${verb.verb?.name}`)}
+            >
               {verb.verb?.name}
               <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
             </Card>

console/client/src/features/modules/ModulePage.tsx

@@ -0,0 +1,45 @@
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Card } from '../../components/Card'
+import { PageHeader } from '../../components/PageHeader'
+import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { modulesContext } from '../../providers/modules-provider'
+
+export const ModulePage = () => {
+  const navigate = useNavigate()
+  const { moduleName } = useParams()
+  const modules = React.useContext(modulesContext)
+  const [module, setModule] = React.useState<Module | undefined>()
+
+  React.useEffect(() => {
+    if (modules) {
+      const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
+      setModule(module)
+    }
+  }, [modules, moduleName])
+
+  return (
+    <>
+      <PageHeader
+        icon={<Square3Stack3DIcon />}
+        title={module?.name || ''}
+        breadcrumbs={[{ label: 'Modules', link: '/modules' }]}
+      />
+      <div className='m-4'>
+        <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
+          {module?.verbs.map((verb) => (
+            <Card
+              key={verb.verb?.name}
+              topBarColor='bg-green-500'
+              onClick={() => navigate(`/modules/${module.name}/verbs/${verb.verb?.name}`)}
+            >
+              {verb.verb?.name}
+              <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

console/client/src/features/verbs/VerbPage.tsx

@@ -0,0 +1,39 @@
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { PageHeader } from '../../components/PageHeader'
+import { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { modulesContext } from '../../providers/modules-provider'
+
+export const VerbPage = () => {
+  const { moduleName, verbName } = useParams()
+  const modules = React.useContext(modulesContext)
+  const [module, setModule] = React.useState<Module | undefined>()
+  const [verb, setVerb] = React.useState<Verb | undefined>()
+
+  React.useEffect(() => {
+    if (modules) {
+      const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
+      setModule(module)
+      console.log(module)
+      const verb = module?.verbs.find((verb) => verb.verb?.name.toLocaleLowerCase() === verbName?.toLocaleLowerCase())
+      setVerb(verb)
+    }
+  }, [modules, moduleName])
+
+  return (
+    <>
+      <PageHeader
+        icon={<Square3Stack3DIcon />}
+        title={verb?.verb?.name || ''}
+        breadcrumbs={[
+          { label: 'Modules', link: '/modules' },
+          { label: module?.name || '', link: `/modules/${module?.name}` },
+        ]}
+      />
+      <div className='m-4'>
+        <h1>Verb: {verb?.verb?.name}</h1>
+      </div>
+    </>
+  )
+}