Fix emojis in pin

packages/shared/src/components/PinnedMessagesPanel.jsx

@@ -5,6 +5,7 @@ import MessageItem from './MessageItem';
 import { usePlatform } from '../platform';
 
 const TAG_LENGTH = 32;
+const EMPTY = [];
 
 const PinnedMessagesPanel = ({
     channelId,
@@ -28,13 +29,13 @@ const PinnedMessagesPanel = ({
     const pinnedMessages = useQuery(
         api.messages.listPinned,
         channelId ? { channelId, userId: userId || undefined } : "skip"
-    ) || [];
+    ) || EMPTY;
 
     const unpinMutation = useMutation(api.messages.pin);
 
     useEffect(() => {
         if (!pinnedMessages.length || !channelKey) {
-            setDecryptedPins([]);
+            setDecryptedPins(prev => prev.length === 0 ? prev : []);
             return;
         }
 

packages/shared/src/components/SearchPanel.jsx

@@ -1,9 +1,12 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { useQuery } from 'convex/react';
+import { api } from '../../../../convex/_generated/api';
 import { useSearch } from '../contexts/SearchContext';
 import { parseFilters } from '../utils/searchUtils';
 import { usePlatform } from '../platform';
 import { LinkPreview } from './ChatArea';
 import { extractUrls } from './MessageItem';
+import { AllEmojis } from '../assets/emojis';
 
 function formatTime(ts) {
   const d = new Date(ts);
@@ -23,6 +26,17 @@ function linkifyHtml(html) {
   return html.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" class="search-result-link">$1</a>');
 }
 
+function formatEmojisHtml(html, customEmojis = []) {
+  if (!html) return '';
+  return html.replace(/:([a-zA-Z0-9_]+):/g, (match, name) => {
+    const custom = customEmojis.find(e => e.name === name);
+    if (custom) return `<img src="${custom.src}" alt="${match}" style="width:48px;height:48px;vertical-align:bottom;margin:0 1px;display:inline" />`;
+    const emoji = AllEmojis.find(e => e.name === name);
+    if (emoji) return `<img src="${emoji.src}" alt="${match}" style="width:48px;height:48px;vertical-align:bottom;margin:0 1px;display:inline" />`;
+    return match;
+  });
+}
+
 function getAvatarColor(name) {
   const colors = ['#5865F2', '#57F287', '#FEE75C', '#EB459E', '#ED4245', '#F47B67', '#E67E22', '#3498DB'];
   let hash = 0;
@@ -206,6 +220,7 @@ const SearchResultFile = ({ metadata }) => {
 const SearchPanel = ({ visible, onClose, channels, isDM, dmChannelId, onJumpToMessage, query, sortOrder, onSortChange }) => {
   const { search, isReady } = useSearch() || {};
   const { links } = usePlatform();
+  const customEmojis = useQuery(api.customEmojis.list) || [];
   const [results, setResults] = useState([]);
   const [searching, setSearching] = useState(false);
   const [showSortMenu, setShowSortMenu] = useState(false);
@@ -390,7 +405,7 @@ const SearchPanel = ({ visible, onClose, channels, isDM, dmChannelId, onJumpToMe
                   {!(r.has_attachment && r.attachment_meta) && (
                     <div
                       className="search-result-content"
-                      dangerouslySetInnerHTML={{ __html: linkifyHtml(r.snippet || escapeHtml(r.content)) }}
+                      dangerouslySetInnerHTML={{ __html: formatEmojisHtml(linkifyHtml(r.snippet || escapeHtml(r.content)), customEmojis) }}
                       onClick={(e) => {
                         if (e.target.tagName === 'A' && e.target.href) {
                           e.preventDefault();