Frontend Components

This section documents reusable React components in the Think Tank Suite frontend application.

Component Libraries

Library	Purpose
Workspace Components	Document and folder management

Design Patterns

State Management

Components use nanostores for lightweight, React-compatible state:

import { useStore } from '@nanostores/react';
import { $documents } from '../../stores/documentStore';

function MyComponent() {
  const documents = useStore($documents);
  // ...
}

Service Layer

Data operations go through service modules that handle:

• Canister calls (when configured)
• Mock data (for development)
• Optimistic updates
• Error handling with toast notifications

Testing

Components are tested with:

• Vitest - Test runner
• React Testing Library - Component testing
• userEvent - User interaction simulation

Styling

Components use:

• Tailwind CSS - Utility-first styling
• Radix UI - Accessible primitives (Dialog, DropdownMenu, etc.)
• Lucide React - Icon library