feat(help): Add floating help button to all pages

Replaced inline HelpButton components with a global FloatingHelpButton
that appears fixed in the top-right corner of all pages. The button:
- Automatically detects the current route and links to the appropriate help page
- Uses a consistent position across all pages (fixed, top-right)
- Is hidden on help pages themselves
- Works on both business and platform layouts

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-03 02:23:28 -05:00
parent 11bb83a85d
commit 5aa49399d0
7 changed files with 125 additions and 42 deletions

View File

@@ -9,6 +9,7 @@ import { Business, User } from '../types';
import MasqueradeBanner from '../components/MasqueradeBanner';
import OnboardingWizard from '../components/OnboardingWizard';
import TicketModal from '../components/TicketModal';
import FloatingHelpButton from '../components/FloatingHelpButton';
import { useStopMasquerade } from '../hooks/useAuth';
import { useNotificationWebSocket } from '../hooks/useNotificationWebSocket';
import { useTicket } from '../hooks/useTickets';
@@ -167,6 +168,9 @@ const BusinessLayoutContent: React.FC<BusinessLayoutProps> = ({ business, user,
return (
<div className="flex h-full bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
{/* Floating Help Button */}
<FloatingHelpButton />
<div className={`fixed inset-y-0 left-0 z-40 transform ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out md:hidden`}>
<Sidebar business={business} user={user} isCollapsed={false} toggleCollapse={() => { }} />
</div>

View File

@@ -6,6 +6,7 @@ import PlatformSidebar from '../components/PlatformSidebar';
import UserProfileDropdown from '../components/UserProfileDropdown';
import NotificationDropdown from '../components/NotificationDropdown';
import TicketModal from '../components/TicketModal';
import FloatingHelpButton from '../components/FloatingHelpButton';
import { useTicket } from '../hooks/useTickets';
import { useScrollToTop } from '../hooks/useScrollToTop';
@@ -36,6 +37,9 @@ const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleT
return (
<div className="flex h-screen bg-gray-100 dark:bg-gray-900">
{/* Floating Help Button */}
<FloatingHelpButton />
{/* Mobile menu */}
<div className={`fixed inset-y-0 left-0 z-40 transform ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out md:hidden`}>
<PlatformSidebar user={user} isCollapsed={false} toggleCollapse={() => { }} />