global update and global fix

apps/frontend/components/chat/emoji-picker.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+
+
+import { useMemo, useState } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { Input } from '@/components/ui/input';
+
+import { EMOJI_CATEGORIES, EMOJI_DEFINITIONS, searchEmojis, type EmojiCategoryId } from '@/lib/emoji-catalog';
+
+import { emojiIdToNative } from '@/lib/emoji-native-map';
+
+import { cn } from '@/lib/utils';
+
+
+
+interface EmojiPickerProps {
+
+  onSelect: (nativeEmoji: string) => void;
+
+  className?: string;
+
+}
+
+
+
+export function EmojiPicker({ onSelect, className }: EmojiPickerProps) {
+
+  const [category, setCategory] = useState<EmojiCategoryId>('smileys');
+
+  const [query, setQuery] = useState('');
+
+
+
+  const items = useMemo(() => {
+
+    const filtered = searchEmojis(query);
+
+    if (query.trim()) return filtered;
+
+    return filtered.filter((item) => item.category === category);
+
+  }, [category, query]);
+
+
+
+  return (
+
+    <div className={cn('rounded-2xl border border-[#dce3ec] bg-white shadow-lg', className)}>
+
+      <div className="border-b border-[#eceef4] p-2">
+
+        <div className="relative">
+
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#a8adbc]" />
+
+          <Input
+
+            value={query}
+
+            onChange={(event) => setQuery(event.target.value)}
+
+            placeholder="Поиск смайликов"
+
+            className="rounded-xl pl-9"
+
+          />
+
+        </div>
+
+      </div>
+
+      {!query.trim() ? (
+
+        <div className="flex gap-1 overflow-x-auto border-b border-[#eceef4] px-2 py-2">
+
+          {EMOJI_CATEGORIES.map((item) => {
+
+            const native = emojiIdToNative(item.icon) ?? '✨';
+
+            return (
+