UI Overview

UI Overview (Developer Reference)

Technical overview of ProjectHub's UI architecture for contributors.

Page structure

Lazy-loaded pages

All main pages use React.lazy() for code splitting:

• Dashboard – Project counts and quick access
• Projects – DataGrid with project records
• Templates – DataGrid with available templates
• Libraries – DataGrid with library files
• Settings – Modal with tabbed content

DataGrid component

Shared across Projects, Templates, and Libraries pages:

• Sortable columns (click header to sort)
• Selection via checkboxes
• Built-in search/filter
• Pagination controls
• Row actions (edit, delete, view)

AI components

AIChat

Slide-out chat panel for AI interactions:

• Fixed position on right side (w-96)
• Provider selector in header
• Streaming response display
• Action buttons for save/create when template detected

AISetupWizard

First-use modal for provider configuration:

• Provider selection (radio buttons)
• API key input with test button
• Contextual help links
• Connection validation before save

AIContext

React context managing AI state:

• messages – Conversation history
• streaming – Whether response is in progress
• streamContent – Real-time streaming content
• sendMessage() – Send user message
• testConnection() – Validate provider config

Wizard flow

The New Project wizard uses a multi-step pattern:

1. Basics – BasicsStep.tsx (name, version, destination)
2. Templates – TemplatesStep.tsx (template selection)
3. Libraries – LibrariesStep.tsx (library selection)
4. Review – ReviewStep.tsx (confirmation)

State managed by useProjectsWizard hook. Progress shown via StepperProgress component.

Feedback patterns

Toast notifications

Replace all alert() calls with the toast system:

const addToast = useToast();
addToast('Pack installed successfully', 'success');

Types: info, success, warning, error

Toasts render in bottom-right corner with 4-second auto-dismiss.

Modal dialogs

Modal component provides:

• Focus trapping (Tab cycles within modal)
• Escape key to close
• ARIA attributes (role="dialog", aria-modal="true")
• Backdrop click to close

Styling approach

• Tailwind CSS – Utility classes for all styling
• CSS variables – Theme colors in styles.css
• Lucide icons – Consistent iconography
• Animations – fade-in, slide-up, scale-in keyframes in animations.css

Component guidelines

• Keep components under 150 lines when possible
• Extract complex logic to custom hooks
• Use useMemo/useCallback in contexts to prevent re-renders
• Prefer composition over large monolithic components