feat: integrate emoji-mart and refactor emoji usage

- Added @emoji-mart/data and @emoji-mart/react dependencies for enhanced emoji support.
- Replaced static emoji characters with Emoji component in various UI components for consistency and improved rendering.
- Updated generateDateTitle function to return an object with emoji and text for better structure.
- Marked the task for removing emojis from the UI as complete in TODO.md.

src/components/settings/GeneralSettingsPageClient.tsx

@@ -8,6 +8,7 @@ import { TagsManagement } from './tags/TagsManagement';
 import { ThemeSelector } from '@/components/ThemeSelector';
 import { BackgroundImageSelector } from './BackgroundImageSelector';
 import Link from 'next/link';
+import { Emoji } from '@/components/ui/Emoji';
 
 interface GeneralSettingsPageClientProps {
   initialTags: Tag[];
@@ -41,7 +42,7 @@ export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageCl
           {/* Page Header */}
           <div className="mb-6">
             <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
-              ⚙️ Paramètres généraux
+              <Emoji emoji="⚙️" size={24} /> Paramètres généraux
             </h1>
             <p className="text-[var(--muted-foreground)]">
               Configuration des préférences de l&apos;interface et du comportement général
@@ -69,7 +70,7 @@ export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageCl
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="text-lg font-medium text-[var(--foreground)] mb-2">
-                      🎨 UI Components Showcase
+                      <Emoji emoji="🎨" size={18} /> UI Components Showcase
                     </h3>
                     <p className="text-sm text-[var(--muted-foreground)]">
                       Visualisez tous les composants UI disponibles avec différents thèmes
@@ -97,7 +98,7 @@ export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageCl
               <CardContent className="p-4">
                 <div className="p-4 bg-[var(--warning)]/10 border border-[var(--warning)]/20 rounded">
                   <p className="text-sm text-[var(--warning)] font-medium mb-2">
-                    🚧 Interface de configuration en développement
+                    <Emoji emoji="🚧" size={16} /> Interface de configuration en développement
                   </p>
                   <p className="text-xs text-[var(--muted-foreground)]">
                     Les contrôles interactifs pour modifier les autres préférences seront disponibles dans une prochaine version.

src/components/settings/index/QuickStats.tsx

@@ -3,6 +3,7 @@
 import { Card, CardContent } from '@/components/ui/Card';
 import { UserPreferences } from '@/lib/types';
 import { SystemInfo } from '@/services/core/system-info';
+import { Emoji } from '@/components/ui/Emoji';
 
 interface QuickStatsProps {
   preferences: UserPreferences;
@@ -15,7 +16,7 @@ export function QuickStats({ preferences, systemInfo }: QuickStatsProps) {
       <Card>
         <CardContent className="p-4">
           <div className="flex items-center gap-3">
-            <span className="text-2xl">🎨</span>
+            <Emoji emoji="🎨" size={24} />
             <div>
               <p className="text-sm text-[var(--muted-foreground)]">Thème actuel</p>
               <p className="font-medium capitalize">{preferences.viewPreferences.theme}</p>
@@ -27,7 +28,7 @@ export function QuickStats({ preferences, systemInfo }: QuickStatsProps) {
       <Card>
         <CardContent className="p-4">
           <div className="flex items-center gap-3">
-            <span className="text-2xl">🔌</span>
+            <Emoji emoji="🔌" size={24} />
             <div>
               <p className="text-sm text-[var(--muted-foreground)]">Jira</p>
               <div className="flex items-center gap-2">
@@ -46,7 +47,7 @@ export function QuickStats({ preferences, systemInfo }: QuickStatsProps) {
       <Card>
         <CardContent className="p-4">
           <div className="flex items-center gap-3">
-            <span className="text-2xl">📏</span>
+            <Emoji emoji="📏" size={24} />
             <div>
               <p className="text-sm text-[var(--muted-foreground)]">Taille police</p>
               <p className="font-medium capitalize">{preferences.viewPreferences.fontSize}</p>
@@ -58,7 +59,7 @@ export function QuickStats({ preferences, systemInfo }: QuickStatsProps) {
       <Card>
         <CardContent className="p-4">
           <div className="flex items-center gap-3">
-            <span className="text-2xl">💾</span>
+            <Emoji emoji="💾" size={24} />
             <div>
               <p className="text-sm text-[var(--muted-foreground)]">Sauvegardes</p>
               <p className="font-medium">

src/components/settings/index/SettingsNavigation.tsx

@@ -3,6 +3,7 @@
 import { Card, CardContent } from '@/components/ui/Card';
 import Link from 'next/link';
 import { ChevronRight } from 'lucide-react';
+import { Emoji } from '@/components/ui/Emoji';
 
 interface SettingsPage {
   href: string;
@@ -30,7 +31,7 @@ export function SettingsNavigation({ settingsPages }: SettingsNavigationProps) {
               <CardContent className="p-6">
                 <div className="flex items-start justify-between">
                   <div className="flex items-start gap-4">
-                    <span className="text-3xl">{page.icon}</span>
+                    <span className="text-3xl"><Emoji emoji={page.icon} size={30} /></span>
                     <div className="flex-1">
                       <h3 className="text-lg font-semibold text-[var(--foreground)] mb-1">
                         {page.title}

src/components/settings/tags/TagsFilters.tsx

@@ -3,6 +3,7 @@
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Tag } from '@/lib/types';
+import { Emoji } from '@/components/ui/Emoji';
 
 interface TagsFiltersProps {
   searchQuery: string;
@@ -46,7 +47,7 @@ export function TagsFilters({
           onClick={onToggleUnused}
           className="flex items-center gap-2"
         >
-          <span className="text-xs">⚠️</span>
+          <Emoji emoji="⚠️" size={12} />
           Tags non utilisés ({unusedCount})
         </Button>
         
@@ -56,7 +57,7 @@ export function TagsFilters({
           onClick={onToggleWithoutIcons}
           className="flex items-center gap-2"
         >
-          <span className="text-xs">🚫</span>
+          <Emoji emoji="🚫" size={12} />
           Tags sans icônes ({withoutIconsCount})
         </Button>