mirror of
https://github.com/abusoww/tuxmate.git
synced 2026-04-17 19:53:11 +02:00
306 lines
13 KiB
TypeScript
306 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useCallback, useRef, useLayoutEffect } from 'react';
|
|
import { X } from 'lucide-react';
|
|
import gsap from 'gsap';
|
|
|
|
// Hooks
|
|
import { useLinuxInit } from '@/hooks/useLinuxInit';
|
|
import { useDelayedTooltip } from '@/hooks/useDelayedTooltip';
|
|
import { useKeyboardNavigation, type NavItem } from '@/hooks/useKeyboardNavigation';
|
|
|
|
// Data
|
|
import { categories, getAppsByCategory } from '@/lib/data';
|
|
|
|
// Components
|
|
import { ThemeToggle } from '@/components/ui/theme-toggle';
|
|
import { HowItWorks, GitHubLink, ContributeLink } from '@/components/header';
|
|
import { DistroSelector } from '@/components/distro';
|
|
import { CategorySection } from '@/components/app';
|
|
import { CommandFooter } from '@/components/command';
|
|
import { Tooltip, GlobalStyles, LoadingSkeleton } from '@/components/common';
|
|
|
|
// ============================================================================
|
|
// Main Page Component
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Home - Main TuxMate application page
|
|
*
|
|
* This is the root component that composes all the UI elements:
|
|
* - Header with logo, links, and controls
|
|
* - App grid organized by categories
|
|
* - Command footer with copy/download functionality
|
|
*
|
|
* State management is handled by the useLinuxInit hook.
|
|
* Keyboard navigation is handled by the useKeyboardNavigation hook.
|
|
*/
|
|
export default function Home() {
|
|
// ========================================================================
|
|
// State & Hooks
|
|
// ========================================================================
|
|
|
|
const { tooltip, show: showTooltip, hide: hideTooltip, onTooltipEnter, onTooltipLeave } = useDelayedTooltip(600);
|
|
|
|
const {
|
|
selectedDistro,
|
|
selectedApps,
|
|
setSelectedDistro,
|
|
toggleApp,
|
|
clearAll,
|
|
isAppAvailable,
|
|
generatedCommand,
|
|
selectedCount,
|
|
hasYayInstalled,
|
|
setHasYayInstalled,
|
|
hasAurPackages,
|
|
aurAppNames,
|
|
isHydrated
|
|
} = useLinuxInit();
|
|
|
|
// ========================================================================
|
|
// Category & Column Layout
|
|
// ========================================================================
|
|
|
|
/** All categories with their apps */
|
|
const allCategoriesWithApps = useMemo(() =>
|
|
categories
|
|
.map(cat => ({ category: cat, apps: getAppsByCategory(cat) }))
|
|
.filter(c => c.apps.length > 0),
|
|
[]);
|
|
|
|
/** Number of columns for the app grid layout */
|
|
const COLUMN_COUNT = 5;
|
|
|
|
/** Distribute categories across columns for balanced layout */
|
|
const columns = useMemo(() => {
|
|
const cols: Array<typeof allCategoriesWithApps> = Array.from({ length: COLUMN_COUNT }, () => []);
|
|
const heights = Array(COLUMN_COUNT).fill(0);
|
|
allCategoriesWithApps.forEach(catData => {
|
|
const minIdx = heights.indexOf(Math.min(...heights));
|
|
cols[minIdx].push(catData);
|
|
heights[minIdx] += catData.apps.length + 2;
|
|
});
|
|
return cols;
|
|
}, [allCategoriesWithApps]);
|
|
|
|
// ========================================================================
|
|
// Category Expansion State
|
|
// ========================================================================
|
|
|
|
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(() => new Set(categories));
|
|
|
|
const toggleCategoryExpanded = useCallback((cat: string) => {
|
|
setExpandedCategories(prev => {
|
|
const next = new Set(prev);
|
|
next.has(cat) ? next.delete(cat) : next.add(cat);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
// ========================================================================
|
|
// Keyboard Navigation
|
|
// ========================================================================
|
|
|
|
/** Build navigation items from columns and expanded categories */
|
|
const navItems = useMemo(() => {
|
|
const items: NavItem[][] = [];
|
|
columns.forEach((colCategories) => {
|
|
const colItems: NavItem[] = [];
|
|
colCategories.forEach(({ category, apps: catApps }) => {
|
|
colItems.push({ type: 'category', id: category, category });
|
|
if (expandedCategories.has(category)) {
|
|
catApps.forEach(app => colItems.push({ type: 'app', id: app.id, category }));
|
|
}
|
|
});
|
|
items.push(colItems);
|
|
});
|
|
return items;
|
|
}, [columns, expandedCategories]);
|
|
|
|
const { focusedItem, clearFocus, setFocusByItem } = useKeyboardNavigation(
|
|
navItems,
|
|
toggleCategoryExpanded,
|
|
toggleApp
|
|
);
|
|
|
|
// ========================================================================
|
|
// Header Animation
|
|
// ========================================================================
|
|
|
|
const headerRef = useRef<HTMLElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!headerRef.current || !isHydrated) return;
|
|
|
|
const header = headerRef.current;
|
|
const title = header.querySelector('.header-animate');
|
|
const controls = header.querySelector('.header-controls');
|
|
|
|
// Animate title with clip-path reveal
|
|
gsap.fromTo(title,
|
|
{ clipPath: 'inset(0 100% 0 0)' },
|
|
{
|
|
clipPath: 'inset(0 0% 0 0)',
|
|
duration: 0.8,
|
|
ease: 'power2.out',
|
|
delay: 0.1,
|
|
onComplete: () => {
|
|
if (title) gsap.set(title, { clipPath: 'none' });
|
|
}
|
|
}
|
|
);
|
|
|
|
// Animate controls with fade-in
|
|
gsap.fromTo(controls,
|
|
{ opacity: 0, y: -10 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.6,
|
|
ease: 'power2.out',
|
|
delay: 0.3
|
|
}
|
|
);
|
|
}, [isHydrated]);
|
|
|
|
// ========================================================================
|
|
// Loading State (must be AFTER all hooks)
|
|
// ========================================================================
|
|
|
|
// Show loading skeleton until localStorage is hydrated
|
|
if (!isHydrated) {
|
|
return <LoadingSkeleton />;
|
|
}
|
|
|
|
// ========================================================================
|
|
// Render
|
|
// ========================================================================
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-primary)] relative"
|
|
style={{ transition: 'background-color 0.5s, color 0.5s' }}
|
|
onClick={clearFocus}
|
|
>
|
|
<GlobalStyles />
|
|
<Tooltip tooltip={tooltip} onEnter={onTooltipEnter} onLeave={onTooltipLeave} />
|
|
|
|
{/* Header */}
|
|
<header ref={headerRef} className="pt-8 sm:pt-12 pb-8 sm:pb-10 px-4 sm:px-6 relative" style={{ zIndex: 1 }}>
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
{/* Logo & Title */}
|
|
<div className="header-animate">
|
|
<div className="flex items-start gap-4">
|
|
<img
|
|
src="/tuxmate.png"
|
|
alt="TuxMate Logo"
|
|
className="w-16 h-16 sm:w-[72px] sm:h-[72px] object-contain shrink-0"
|
|
/>
|
|
<div className="flex flex-col justify-center">
|
|
<h1 className="text-xl sm:text-2xl font-bold tracking-tight" style={{ transition: 'color 0.5s' }}>
|
|
TuxMate
|
|
</h1>
|
|
<p className="text-[10px] sm:text-xs text-[var(--text-muted)] uppercase tracking-widest" style={{ transition: 'color 0.5s' }}>
|
|
The Linux Bulk App Installer.
|
|
</p>
|
|
<div className="flex items-center gap-3 mt-1.5">
|
|
<p className="text-xs text-[var(--text-muted)]" style={{ transition: 'color 0.5s' }}>
|
|
Select apps • <span className="hidden sm:inline">Arrow keys + Space</span>
|
|
</p>
|
|
<span className="text-[var(--text-muted)] opacity-30">|</span>
|
|
<HowItWorks />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header Controls */}
|
|
<div className="header-controls flex items-center gap-3 sm:gap-4">
|
|
{/* Links */}
|
|
<div className="flex items-center gap-3 sm:gap-4">
|
|
<GitHubLink />
|
|
<ContributeLink />
|
|
{selectedCount > 0 && (
|
|
<>
|
|
<span className="text-[var(--text-muted)] opacity-30 hidden sm:inline">·</span>
|
|
<button
|
|
onClick={clearAll}
|
|
className="group flex items-center gap-1.5 text-sm text-[var(--text-muted)] hover:text-rose-500 transition-all duration-300"
|
|
>
|
|
<X className="w-4 h-4 transition-transform duration-300 group-hover:rotate-90" />
|
|
<span className="hidden sm:inline relative">
|
|
Clear ({selectedCount})
|
|
<span className="absolute bottom-0 left-0 w-0 h-px bg-rose-400 transition-all duration-300 group-hover:w-full" />
|
|
</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Control buttons */}
|
|
<div className="flex items-center gap-2 pl-2 sm:pl-3 border-l border-[var(--border-primary)]">
|
|
<ThemeToggle />
|
|
<DistroSelector selectedDistro={selectedDistro} onSelect={setSelectedDistro} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* App Grid */}
|
|
<main className="px-4 sm:px-6 pb-24 relative" style={{ zIndex: 1 }}>
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-x-4 sm:gap-x-8">
|
|
{columns.map((columnCategories, colIdx) => {
|
|
// Calculate starting index for this column (for staggered animation)
|
|
let globalIdx = 0;
|
|
for (let c = 0; c < colIdx; c++) {
|
|
globalIdx += columns[c].length;
|
|
}
|
|
|
|
return (
|
|
<div key={colIdx}>
|
|
{columnCategories.map(({ category, apps: categoryApps }, catIdx) => (
|
|
<CategorySection
|
|
key={category}
|
|
category={category}
|
|
categoryApps={categoryApps}
|
|
selectedApps={selectedApps}
|
|
isAppAvailable={isAppAvailable}
|
|
selectedDistro={selectedDistro}
|
|
toggleApp={toggleApp}
|
|
isExpanded={expandedCategories.has(category)}
|
|
onToggleExpanded={() => toggleCategoryExpanded(category)}
|
|
focusedId={focusedItem?.id}
|
|
focusedType={focusedItem?.type}
|
|
onTooltipEnter={showTooltip}
|
|
onTooltipLeave={hideTooltip}
|
|
categoryIndex={globalIdx + catIdx}
|
|
onCategoryFocus={() => setFocusByItem('category', category)}
|
|
onAppFocus={(appId) => setFocusByItem('app', appId)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Command Footer */}
|
|
<CommandFooter
|
|
command={generatedCommand}
|
|
selectedCount={selectedCount}
|
|
selectedDistro={selectedDistro}
|
|
selectedApps={selectedApps}
|
|
hasAurPackages={hasAurPackages}
|
|
aurAppNames={aurAppNames}
|
|
hasYayInstalled={hasYayInstalled}
|
|
setHasYayInstalled={setHasYayInstalled}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|