feat: create unified floating actions with route-based help

- Create FloatingActions component combining theme toggle and help button
- Add route-based help URL mapping for contextual documentation
- Remove individual help buttons from page headers to eliminate visual conflict
- Position both actions together in top-right corner with minimal spacing
- Improve UX with consistent floating action area

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: hemanandr

thingconnect.pulse.client/src/components/layout/AppShell.tsx

@@ -1,16 +1,14 @@
 import { Outlet } from 'react-router-dom';
-import { Box, Flex, useBreakpointValue, IconButton } from '@chakra-ui/react';
+import { Box, Flex, useBreakpointValue } from '@chakra-ui/react';
 import { useState } from 'react';
 import { Navigation } from './Navigation';
 import { Footer } from './Footer';
-import { Moon, Sun } from 'lucide-react';
-import { useColorMode } from '../ui/color-mode';
+import { FloatingActions } from './FloatingActions';
 
 export function AppShell() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const sidebarWidth = useBreakpointValue({ base: '100%', md: '250px' });
   const isMobile = useBreakpointValue({ base: true, md: false });
-  const { colorMode, toggleColorMode } = useColorMode();
 
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
@@ -65,20 +63,8 @@ export function AppShell() {
       {/* Footer */}
       <Footer />
 
-      {/* Floating Toggle Button */}
-      <IconButton
-        data-testid='theme-toggle'
-        aria-label='Toggle color mode'
-        variant='ghost'
-        size='sm'
-        position='fixed'
-        top='16px'
-        right='16px'
-        zIndex={1100}
-        onClick={toggleColorMode}
-      >
-        {colorMode === 'light' ? <Moon size={18} /> : <Sun size={18} />}
-      </IconButton>
+      {/* Floating Actions (Theme Toggle + Help Button) */}
+      <FloatingActions />
     </Flex>
   );
 }

thingconnect.pulse.client/src/components/layout/FloatingActions.tsx

@@ -0,0 +1,68 @@
+import { HStack, IconButton } from '@chakra-ui/react';
+import { Moon, Sun, HelpCircle } from 'lucide-react';
+import { useLocation } from 'react-router-dom';
+import { useColorMode } from '../ui/color-mode';
+import { Tooltip } from '../ui/tooltip';
+
+// Route-to-help URL mapping
+const ROUTE_HELP_URLS: Record<string, string> = {
+  '/': 'https://docs.thingconnect.io/pulse/user-guide/dashboard',
+  '/configuration': 'https://docs.thingconnect.io/pulse/user-guide/configuration',
+  '/history': 'https://docs.thingconnect.io/pulse/user-guide/viewing-history',
+  '/settings': 'https://docs.thingconnect.io/pulse/user-guide/settings',
+  '/about': 'https://docs.thingconnect.io/pulse/about',
+};
+
+export function FloatingActions() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const location = useLocation();
+  
+  const helpUrl = ROUTE_HELP_URLS[location.pathname];
+  
+  const handleHelpClick = () => {
+    if (helpUrl) {
+      window.open(helpUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  return (
+    <HStack
+      position="fixed"
+      top="16px"
+      right="16px"
+      zIndex={1100}
+      gap={1}
+      data-testid="floating-actions"
+    >
+      {/* Help Button - only show if help URL exists for current route */}
+      {helpUrl && (
+        <Tooltip content="View Help">
+          <IconButton
+            data-testid="help-button"
+            aria-label="View Help"
+            variant="ghost"
+            size="sm"
+            onClick={handleHelpClick}
+            _hover={{ bg: 'blue.50', _dark: { bg: 'blue.900' } }}
+          >
+            <HelpCircle size={18} />
+          </IconButton>
+        </Tooltip>
+      )}
+      
+      {/* Theme Toggle */}
+      <Tooltip content="Toggle color mode">
+        <IconButton
+          data-testid="theme-toggle"
+          aria-label="Toggle color mode"
+          variant="ghost"
+          size="sm"
+          onClick={toggleColorMode}
+          _hover={{ bg: 'gray.50', _dark: { bg: 'gray.800' } }}
+        >
+          {colorMode === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+        </IconButton>
+      </Tooltip>
+    </HStack>
+  );
+}

thingconnect.pulse.client/src/pages/Configuration.tsx

@@ -4,7 +4,6 @@ import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/ta
 import { ConfigurationEditor } from '@/components/config/ConfigurationEditor';
 import { ConfigurationVersions } from '@/components/config/ConfigurationVersions';
 import { Page } from '@/components/layout/Page';
-import { HelpButton } from '@/components/common/HelpButton';
 
 export default function Configuration() {
   const [refreshTrigger, setRefreshTrigger] = useState(0);
@@ -17,12 +16,6 @@ export default function Configuration() {
       title='Configuration Management'
       description='Manage monitoring endpoints and YAML configuration'
       testId='configuration-page'
-      actions={
-        <HelpButton
-          helpUrl="https://docs.thingconnect.io/pulse/user-guide/configuration"
-          tooltip="Configuration Help"
-        />
-      }
     >
       <TabsRoot
         defaultValue='editor'

thingconnect.pulse.client/src/pages/Dashboard.tsx

@@ -7,7 +7,6 @@ import { StatusCard } from '@/components/status/StatusCard';
 import { StatusPagination } from '@/components/status/StatusPagination';
 import { Page } from '@/components/layout/Page';
 import { PageSection } from '@/components/layout/PageSection';
-import { HelpButton } from '@/components/common/HelpButton';
 import type { LiveStatusParams } from '@/api/types';
 
 export default function Dashboard() {
@@ -59,12 +58,6 @@ export default function Dashboard() {
       title='Dashboard'
       testId='dashboard-page'
       description='Real-time monitoring of network endpoints'
-      actions={
-        <HelpButton
-          helpUrl="https://docs.thingconnect.io/pulse/user-guide/dashboard"
-          tooltip="Dashboard Help"
-        />
-      }
     >
       {/* <PageHeader
         title="Network Status Dashboard"

thingconnect.pulse.client/src/pages/History.tsx

@@ -14,7 +14,6 @@ import { AvailabilityChart, AvailabilityStats } from '@/components/AvailabilityC
 import { HistoryTable } from '@/components/HistoryTable';
 import { HistoryService } from '@/api/services/history.service';
 import { StatusService } from '@/api/services/status.service';
-import { HelpButton } from '@/components/common/HelpButton';
 
 export default function History() {
   // State for filters
@@ -96,12 +95,6 @@ export default function History() {
       title='History'
       description='View historical monitoring data and export reports'
       testId='history-page'
-      actions={
-        <HelpButton
-          helpUrl="https://docs.thingconnect.io/pulse/user-guide/viewing-history"
-          tooltip="History Help"
-        />
-      }
     >
       {/* <PageHeader
         title="Historical Data"