'use client'; /** * Category Labels * * Shows labels around the brain for each category region. * Categories are arranged in a circle like a clock face. */ import { useMemo } from 'react'; import { Html } from '@react-three/drei'; import { MemoryCategory } from '@/types/memory'; import { getCategoryColor } from '@/lib/category-colors'; // Category positions (angles in degrees, matching position-algorithm.ts) const CATEGORY_ANGLES: Record = { architecture: 0, pattern: 36, preference: 72, error: 108, context: 144, learning: 180, todo: 216, note: 252, relationship: 288, custom: 324, }; // Category icons const CATEGORY_ICONS: Record = { architecture: '🏗️', pattern: '🔄', preference: '⚙️', error: '🐛', context: '📍', learning: '💡', todo: '✅', note: '📝', relationship: '🔗', custom: '📦', }; interface CategoryLabelsProps { memoryCounts: Record; radius?: number; showCounts?: boolean; } export function CategoryLabels({ memoryCounts, radius = 5.5, showCounts = true, }: CategoryLabelsProps) { const labels = useMemo(() => { return (Object.keys(CATEGORY_ANGLES) as MemoryCategory[]).map((category) => { const angle = CATEGORY_ANGLES[category] * (Math.PI / 180); const x = radius * Math.cos(angle); const z = radius * Math.sin(angle); const count = memoryCounts[category] || 0; const color = getCategoryColor(category); return { category, position: [x, 0, z] as [number, number, number], count, color, icon: CATEGORY_ICONS[category], }; }); }, [memoryCounts, radius]); return ( {labels.map(({ category, position, count, color, icon }) => (

{icon} {category} {showCounts && count > 0 && ( {count} )}

))} ); }