'use client'; import { useState, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import { HelpCircle, X } from 'lucide-react'; import { analytics } from '@/lib/analytics'; /** * HowItWorks - Interactive help popup with quick start guide * * Displays a popup with: * - Quick start steps for using TuxMate * - Info about unavailable apps * - Arch/AUR specific info * - Keyboard shortcuts * - Pro tips * * @example * */ export function HowItWorks() { const [isOpen, setIsOpen] = useState(false); const [mounted, setMounted] = useState(false); const triggerRef = useRef(null); const popupRef = useRef(null); useEffect(() => { setMounted(true); }, []); // Close on click outside useEffect(() => { if (!isOpen) return; const handleClickOutside = (e: MouseEvent) => { if ( triggerRef.current && !triggerRef.current.contains(e.target as Node) && popupRef.current && !popupRef.current.contains(e.target as Node) ) { setIsOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, [isOpen]); // Close on Escape useEffect(() => { if (!isOpen) return; const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape') setIsOpen(false); }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [isOpen]); const getPopupPosition = () => { if (!triggerRef.current) return { top: 0, left: 0 }; const rect = triggerRef.current.getBoundingClientRect(); return { top: rect.bottom + 12, left: Math.max(8, Math.min(rect.left, window.innerWidth - 420)), }; }; const pos = isOpen ? getPopupPosition() : { top: 0, left: 0 }; const popup = isOpen && mounted ? (
{/* Header - fixed */}

How TuxMate Works

Quick guide & tips

{/* Scrollable content */}
{/* Quick Start Steps */}

Quick Start

1

Select your distro from the dropdown

2

Check the apps you want to install

3

Copy the command or download the script

4

Paste in terminal (Ctrl+Shift+V) and run

{/* Unavailable Apps */}

App Not Available?

Greyed-out apps aren't in your distro's repos. Here's what you can do:

  • • Use Flatpak/Snap: Switch to Flatpak or Snap in the distro selector for universal packages
  • • Download from website: Visit the app's official site and grab the .deb, .rpm, or .AppImage
  • • Check GitHub Releases: Many apps publish packages on their GitHub releases page
  • • Hover the ⓘ icon: Some unavailable apps show links to alternative download methods
{/* Arch & AUR */}

Arch Linux & AUR

Some Arch packages are in the AUR (Arch User Repository). TuxMate uses yay to install these. If you don't have yay, check "I have yay installed" to skip auto-installation, or leave it unchecked to install yay first.

{/* Keyboard Shortcuts */}

Keyboard Shortcuts

↑↓ Navigate apps
Space Toggle selection
Enter Expand/collapse
Esc Close popups
{/* Pro Tips */}

Pro Tips

  • 💡 The download button gives you a full shell script with progress tracking, error handling, and a summary
  • 💡 Your selections are saved automatically — come back anytime to modify your setup
  • 💡 Running .deb files: sudo dpkg -i file.deb or double-click in your file manager
  • 💡 Running .rpm files: sudo dnf install ./file.rpm or sudo zypper install ./file.rpm
{/* Arrow pointer */}
) : null; return ( <> {mounted && typeof document !== 'undefined' && createPortal(popup, document.body)} ); }