poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/pages/Customers.tsx
View File

@@ -16,7 +16,6 @@ import {
Eye
} from 'lucide-react';
import Portal from '../components/Portal';
import HelpButton from '../components/HelpButton';
interface CustomersProps {
onMasquerade: (user: User) => void;
@@ -126,12 +125,9 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
return (
<div className="p-8 max-w-7xl mx-auto space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="flex items-start gap-4">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('customers.title')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('customers.description')}</p>
</div>
<HelpButton helpPath="/help/customers" />
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('customers.title')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('customers.description')}</p>
</div>
<button
onClick={() => setIsAddModalOpen(true)}

19
frontend/src/pages/Dashboard.tsx
View File

@@ -12,7 +12,6 @@ import {
Line
} from 'recharts';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
import HelpButton from '../components/HelpButton';
import { useServices } from '../hooks/useServices';
import { useResources } from '../hooks/useResources';
import { useAppointments } from '../hooks/useAppointments';
@@ -104,12 +103,9 @@ const Dashboard: React.FC = () => {
if (isLoading) {
return (
<div className="p-8 space-y-8">
<div className="flex items-start justify-between">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('common.loading')}</p>
</div>
<HelpButton helpPath="/help/dashboard" />
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('common.loading')}</p>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{[1, 2, 3, 4].map((i) => (
@@ -125,12 +121,9 @@ const Dashboard: React.FC = () => {
return (
<div className="p-8 space-y-8">
<div className="flex items-start justify-between">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('dashboard.todayOverview')}</p>
</div>
<HelpButton helpPath="/help/dashboard" />
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('dashboard.todayOverview')}</p>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">

18
frontend/src/pages/Services.tsx
View File

@@ -1,7 +1,6 @@
import React, { useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, Pencil, Trash2, Clock, DollarSign, X, Loader2, GripVertical, Eye, ChevronRight, Upload, ImagePlus, Image } from 'lucide-react';
import HelpButton from '../components/HelpButton';
import { useServices, useCreateService, useUpdateService, useDeleteService, useReorderServices } from '../hooks/useServices';
import { Service } from '../types';
@@ -267,16 +266,13 @@ const Services: React.FC = () => {
return (
<div className="p-8 space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-start gap-4">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
{t('services.title', 'Services')}
</h2>
<p className="text-gray-500 dark:text-gray-400">
{t('services.description', 'Manage the services your business offers')}
</p>
</div>
<HelpButton helpPath="/help/services" />
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
{t('services.title', 'Services')}
</h2>
<p className="text-gray-500 dark:text-gray-400">
{t('services.description', 'Manage the services your business offers')}
</p>
</div>
<button
onClick={openCreateModal}

18
frontend/src/pages/Tasks.tsx
View File

@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import axios from '../api/client';
import HelpButton from '../components/HelpButton';
import {
Plus,
Play,
@@ -259,16 +258,13 @@ const Tasks: React.FC = () => {
<div className="p-6 max-w-7xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-start gap-4">
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
{t('Tasks')}
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Schedule and manage automated plugin executions
</p>
</div>
<HelpButton helpPath="/help/tasks" />
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
{t('Tasks')}
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Schedule and manage automated plugin executions
</p>
</div>
<button
onClick={() => setShowCreateModal(true)}