Feature Tools - Discovery & Comparaison

src/features/tools/
├── modals/
│   └── ToolModal/
│       ├── index.tsx           # Container principal
│       ├── ToolForm.tsx        # Formulaire d'édition
│       ├── ToolPreview.tsx     # Aperçu détaillé
│       ├── types.ts            # Types du modal
│       └── useToolModal.ts     # Logique métier
│
src/components/sections/
├── VirtualizedToolsGrid.tsx    # Grille virtualisée (react-window)
└── ToolCard.tsx                # Carte outil individuelle

// src/api/tools.ts
export const toolsApi = {
  list: () => Promise<EnhancedTool[]>,
  getById: (id: string) => Promise<EnhancedTool>,
  create: (data: ToolInsert) => Promise<Tool>,
  update: (id: string, data: ToolUpdate) => Promise<Tool>,
  delete: (id: string) => Promise<void>,
  uploadLogo: (file: File) => Promise<string>
};

query GetTools {
  tools(order_by: { name: asc }) {
    id name description pricing_tier
    category_id logo_url website_url
    category { name }
    tool_features {
      filter { id value filter_type }
    }
  }
}

const {
  filteredTools,
  searchTerm,
  setSearchTerm,
  selectedPricing,
  setSelectedPricing,
  selectedCategory,
  setSelectedCategory
} = useToolFilters(tools);

<FixedSizeGrid
  columnCount={getColumnCount()} // 1-4 selon viewport
  rowCount={Math.ceil(tools.length / columnCount)}
  columnWidth={320}
  rowHeight={380}
  height={800}
  width={containerWidth}
>
  {({ columnIndex, rowIndex, style }) => (
    <ToolCard tool={tools[index]} style={style} />
  )}
</FixedSizeGrid>

const {
  favorites,      // Set<string> des IDs
  addFavorite,    // (id: string) => void
  removeFavorite, // (id: string) => void
  toggleFavorite, // (id: string) => void
  isFavorite,     // (id: string) => boolean
  count           // number
} = useFavorites();

// Upload vers Nhost Storage
const { error, fileMetadata } = await nhost.storage.upload({
  file,
  bucketId: 'default',
});

// URL publique
const publicUrl = `https://${nhostSubdomain}.storage.${nhostRegion}.nhost.run/v1/files/${fileMetadata.id}`;

CREATE TABLE tools (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT UNIQUE NOT NULL,
  description TEXT NOT NULL,
  pricing_tier TEXT CHECK (pricing_tier IN (
    'Gratuit', 'Freemium', 'Payant', 'Entreprise'
  )),
  category_id UUID REFERENCES categories(id) ON DELETE SET NULL,
  logo_url TEXT,
  website_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

query { tools { id name category { name } } }

query { tools { id name tool_features { filter { id value } } } }

// src/api/types.ts
export interface Tool {
  id: string;
  name: string;
  description: string;
  pricing_tier: 'Gratuit' | 'Freemium' | 'Payant' | 'Entreprise';
  category_id: string;
  logo_url: string | null;
  website_url: string | null;
  created_at: string;
}

export interface EnhancedTool extends Tool {
  category_name: string;
  features: string[];
}

export interface ToolInsert {
  name: string;
  description: string;
  pricing_tier: Tool['pricing_tier'];
  category_id: string;
  logo_url?: string;
  website_url?: string;
}

export type ToolUpdate = Partial<ToolInsert>;

// Toujours passer par l'API layer
import { toolsApi } from '@/api';
const tools = await toolsApi.list();

// Gérer les erreurs
try {
  await toolsApi.create(data);
} catch (error) {
  if (error instanceof ApiError) {
    // Erreur typée avec message
  }
}

// NE PAS appeler nhost.graphql directement dans les composants
const result = await nhost.graphql.request({ query: '...' });

// NE PAS ignorer les erreurs
await toolsApi.create(data); // Sans try/catch