refacto: découpage composants — 5 extractions

- MonsterCard, CombatViews (Log+Multi+History), CreateCharacter
- RarityBadge + RarityDot partagés (Guide, Drawer, pages)
- CombatPage 341→215 lignes (−37%)
- DashboardPage 368→307 lignes (−17%)
- 9 composants dans components/

frontend/src/components/GuideDrawer.tsx

@@ -1,14 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { Search, X } from 'lucide-react';
 import { useGuideData } from '../hooks/useGuideData';
-
-const RARITY_COLORS: Record<string, string> = {
-  common: '#9ca3af', rare: '#5ba4f5', epic: '#a78bfa', legendary: '#f4c94e',
-};
-
-function RarityDot({ rarity }: { rarity: string }) {
-  return <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: RARITY_COLORS[rarity] ?? '#6b7a99', marginRight: 4 }} />;
-}
+import { RARITY_COLORS } from '../constants';
+import { RarityDot } from './RarityBadge';
 
 export function GuideDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
   const [search, setSearch] = useState('');