Add connecting state

packages/shared/src/components/SearchPanel.jsx

@@ -2,6 +2,8 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useSearch } from '../contexts/SearchContext';
 import { parseFilters } from '../utils/searchUtils';
 import { usePlatform } from '../platform';
+import { LinkPreview } from './ChatArea';
+import { extractUrls } from './MessageItem';
 
 function formatTime(ts) {
   const d = new Date(ts);
@@ -16,6 +18,11 @@ function escapeHtml(str) {
   return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+function linkifyHtml(html) {
+  if (!html) return '';
+  return html.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" class="search-result-link">$1</a>');
+}
+
 function getAvatarColor(name) {
   const colors = ['#5865F2', '#57F287', '#FEE75C', '#EB459E', '#ED4245', '#F47B67', '#E67E22', '#3498DB'];
   let hash = 0;
@@ -198,6 +205,7 @@ const SearchResultFile = ({ metadata }) => {
 
 const SearchPanel = ({ visible, onClose, channels, isDM, dmChannelId, onJumpToMessage, query, sortOrder, onSortChange }) => {
   const { search, isReady } = useSearch() || {};
+  const { links } = usePlatform();
   const [results, setResults] = useState([]);
   const [searching, setSearching] = useState(false);
   const [showSortMenu, setShowSortMenu] = useState(false);
@@ -382,7 +390,14 @@ const SearchPanel = ({ visible, onClose, channels, isDM, dmChannelId, onJumpToMe
                   {!(r.has_attachment && r.attachment_meta) && (
                     <div
                       className="search-result-content"
-                      dangerouslySetInnerHTML={{ __html: r.snippet || escapeHtml(r.content) }}
+                      dangerouslySetInnerHTML={{ __html: linkifyHtml(r.snippet || escapeHtml(r.content)) }}
+                      onClick={(e) => {
+                        if (e.target.tagName === 'A' && e.target.href) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          links.openExternal(e.target.href);
+                        }
+                      }}
                     />
                   )}
                   {r.has_attachment && r.attachment_meta ? (() => {
@@ -393,7 +408,10 @@ const SearchPanel = ({ visible, onClose, channels, isDM, dmChannelId, onJumpToMe
                       return <SearchResultFile metadata={meta} />;
                     } catch { return <span className="search-result-badge">File</span>; }
                   })() : r.has_attachment ? <span className="search-result-badge">File</span> : null}
-                  {r.has_link && <span className="search-result-badge">Link</span>}
+                  {r.has_link && r.content && (() => {
+                    const urls = extractUrls(r.content);
+                    return urls.map((url, i) => <LinkPreview key={i} url={url} />);
+                  })()}
                   {r.pinned && <span className="search-result-badge">Pinned</span>}
                 </div>
               </div>