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/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}