Add Publish and Charts tabs to mobile UI (#1035)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

app/src/components/Layout/ContentView.tsx

@@ -9,6 +9,7 @@ import { List } from 'immutable'
 import { Sidebar } from '../Sidebar'
 import { useResizeDetector } from 'react-resize-detector'
 import MobileTabs from './MobileTabs'
+import PublishTab from '../Sidebar/PublishTab'
 
 // Type cast to any to work around React 18 compatibility issues with react-split-pane 0.1.x
 const ReactSplitPane = ReactSplitPaneImport as any
@@ -24,7 +25,7 @@ function ContentView(props: Props) {
   // Use different defaults for mobile viewports (<=768px width)
   // Use state for mobile detection that updates on resize
   const [isMobile, setIsMobile] = React.useState(() => typeof window !== 'undefined' && window.innerWidth <= 768)
-  const [mobileTab, setMobileTab] = React.useState(0) // 0 = topics, 1 = details
+  const [mobileTab, setMobileTab] = React.useState(0) // 0 = topics, 1 = details, 2 = publish, 3 = charts
   const [height, setHeight] = React.useState<string | number>('100%')
   const [sidebarWidth, setSidebarWidth] = React.useState<string | number>(isMobile ? '100%' : '40%')
   const [detectedHeight, setDetectedHeight] = React.useState(0)
@@ -93,11 +94,15 @@ function ContentView(props: Props) {
       if (typeof window !== 'undefined') {
         (window as any).switchToDetailsTab = () => setMobileTab(1)
         (window as any).switchToTopicsTab = () => setMobileTab(0)
+        ;(window as any).switchToPublishTab = () => setMobileTab(2)
+        ;(window as any).switchToChartsTab = () => setMobileTab(3)
       }
       return () => {
         if (typeof window !== 'undefined') {
           delete (window as any).switchToDetailsTab
           delete (window as any).switchToTopicsTab
+          delete (window as any).switchToPublishTab
+          delete (window as any).switchToChartsTab
         }
       }
     }, [])
@@ -157,6 +162,18 @@ function ContentView(props: Props) {
               <Sidebar connectionId={props.connectionId} />
             </div>
           )}
+          {/* Publish tab */}
+          {mobileTab === 2 && (
+            <div style={sidebarContainerStyle}>
+              <PublishTab connectionId={props.connectionId} />
+            </div>
+          )}
+          {/* Charts tab */}
+          {mobileTab === 3 && (
+            <div style={sidebarContainerStyle}>
+              <ChartPanel />
+            </div>
+          )}
         </div>
       </div>
     )

app/src/components/Layout/MobileTabs.tsx

@@ -2,6 +2,10 @@ import * as React from 'react'
 import { Tabs, Tab, Box } from '@mui/material'
 import { Theme } from '@mui/material/styles'
 import { withStyles } from '@mui/styles'
+import AccountTreeIcon from '@mui/icons-material/AccountTree'
+import InfoIcon from '@mui/icons-material/Info'
+import SendIcon from '@mui/icons-material/Send'
+import ShowChartIcon from '@mui/icons-material/ShowChart'
 
 interface Props {
   classes: any
@@ -22,9 +26,10 @@ function MobileTabs(props: Props) {
         variant="fullWidth"
         indicatorColor="primary"
         textColor="primary"
-        aria-label="Topics and Details tabs"
+        aria-label="Topics, Details, Publish and Charts tabs"
       >
         <Tab 
+          icon={<AccountTreeIcon />}
           label="Topics" 
           data-testid="mobile-tab-topics"
           aria-label="View topics tree"
@@ -32,12 +37,29 @@ function MobileTabs(props: Props) {
           aria-controls="mobile-tabpanel-0"
         />
         <Tab 
+          icon={<InfoIcon />}
           label="Details" 
           data-testid="mobile-tab-details"
           aria-label="View topic details"
           id="mobile-tab-1"
           aria-controls="mobile-tabpanel-1"
         />
+        <Tab 
+          icon={<SendIcon />}
+          label="Publish" 
+          data-testid="mobile-tab-publish"
+          aria-label="Publish messages"
+          id="mobile-tab-2"
+          aria-controls="mobile-tabpanel-2"
+        />
+        <Tab 
+          icon={<ShowChartIcon />}
+          label="Charts" 
+          data-testid="mobile-tab-charts"
+          aria-label="View charts"
+          id="mobile-tab-3"
+          aria-controls="mobile-tabpanel-3"
+        />
       </Tabs>
     </Box>
   )