aaa09b4745
* feat: implement comprehensive help system with contextual icons - Add HelpModal component with navigation sidebar and 7 help sections - Add HelpButton component for main header controls - Add ContextualHelpIcon component for contextual help throughout UI - Add help icons to all major UI sections: - Settings modals (Server Settings, General Settings) - Sync button with update system help - Tab headers (Available, Downloaded, Installed Scripts) - FilterBar and CategorySidebar - Add comprehensive help content covering: - Server Settings: PVE server management, auth types, color coding - General Settings: Save filters, GitHub integration, authentication - Sync Button: Script metadata syncing explanation - Available Scripts: Browsing, filtering, downloading - Downloaded Scripts: Local script management and updates - Installed Scripts: Auto-detection feature (primary focus), manual management - Update System: Automatic/manual update process, release notes - Improve VersionDisplay: remove 'Update Available' text, add 'Release Notes:' label - Make help icons more noticeable with increased size - Fix dark theme compatibility issues in help modal * fix: resolve linting errors in HelpModal component - Remove unused Filter import - Fix unescaped entities by replacing apostrophes and quotes with HTML entities - All linting errors resolved * feat: implement release notes modal system - Add getAllReleases API endpoint to fetch GitHub releases with notes - Create ReleaseNotesModal component with localStorage version tracking - Add sticky Footer component with release notes link - Make version badge clickable to open release notes - Auto-show modal after updates when version changes - Track last seen version in localStorage to prevent repeated shows - Highlight new version in modal when opened after update - Add manual access via footer and version badge clicks * fix: use nullish coalescing operator in ReleaseNotesModal - Replace logical OR (||) with nullish coalescing (??) operator - Fixes ESLint prefer-nullish-coalescing rule violation - Ensures build passes successfully
41 lines
981 B
TypeScript
41 lines
981 B
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { HelpModal } from './HelpModal';
|
|
import { Button } from './ui/button';
|
|
import { HelpCircle } from 'lucide-react';
|
|
|
|
interface HelpButtonProps {
|
|
initialSection?: string;
|
|
}
|
|
|
|
export function HelpButton({ initialSection }: HelpButtonProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
|
|
<div className="text-sm text-muted-foreground font-medium">
|
|
Need help?
|
|
</div>
|
|
<Button
|
|
onClick={() => setIsOpen(true)}
|
|
variant="outline"
|
|
size="default"
|
|
className="inline-flex items-center"
|
|
title="Open Help"
|
|
>
|
|
<HelpCircle className="w-5 h-5 mr-2" />
|
|
Help
|
|
</Button>
|
|
</div>
|
|
|
|
<HelpModal
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
initialSection={initialSection}
|
|
/>
|
|
</>
|
|
);
|
|
}
|