@@ -65,14 +93,29 @@ const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, s
)}
{!isMobile && (
- 
;
+};
+
+const SearchResultVideo = ({ metadata }) => {
+ const { crypto } = usePlatform();
+ const fetchUrl = rewriteStorageUrl(metadata.url);
+ const [url, setUrl] = useState(searchImageCache.get(fetchUrl) || null);
+ const [loading, setLoading] = useState(!searchImageCache.has(fetchUrl));
+ const [error, setError] = useState(null);
+ const [showControls, setShowControls] = useState(false);
+ const videoRef = useRef(null);
+
+ useEffect(() => {
+ if (searchImageCache.has(fetchUrl)) {
+ setUrl(searchImageCache.get(fetchUrl));
+ setLoading(false);
+ return;
+ }
+ let isMounted = true;
+ const decrypt = async () => {
+ try {
+ const res = await fetch(fetchUrl);
+ const blob = await res.blob();
+ const arrayBuffer = await blob.arrayBuffer();
+ const hexInput = toHexString(new Uint8Array(arrayBuffer));
+ if (hexInput.length < 32) throw new Error('Invalid file data');
+ const TAG_HEX_LEN = 32;
+ const contentHex = hexInput.slice(0, -TAG_HEX_LEN);
+ const tagHex = hexInput.slice(-TAG_HEX_LEN);
+ const decrypted = await crypto.decryptData(contentHex, metadata.key, metadata.iv, tagHex, { encoding: 'buffer' });
+ const decryptedBlob = new Blob([decrypted], { type: metadata.mimeType });
+ const objectUrl = URL.createObjectURL(decryptedBlob);
+ if (isMounted) {
+ searchImageCache.set(fetchUrl, objectUrl);
+ setUrl(objectUrl);
+ setLoading(false);
+ }
+ } catch (err) {
+ console.error('Search video decrypt error:', err);
+ if (isMounted) { setError('Failed to load'); setLoading(false); }
+ }
+ };
+ decrypt();
+ return () => { isMounted = false; };
+ }, [fetchUrl, metadata, crypto]);
+
+ if (loading) return
{
visible={effectiveShowMembers}
onMemberClick={(member) => {}}
/>
+
);
@@ -359,6 +522,21 @@ const Chat = () => {
)}
{showMainContent && renderMainContent()}
{showPiP &&
+
diff --git a/packages/shared/src/components/SearchDropdown.jsx b/packages/shared/src/components/SearchDropdown.jsx
new file mode 100644
index 0000000..8141640
--- /dev/null
+++ b/packages/shared/src/components/SearchDropdown.jsx
@@ -0,0 +1,244 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { detectActivePrefix } from '../utils/searchUtils';
+
+const FILTER_SUGGESTIONS = [
+ { prefix: 'from:', label: 'from:', description: 'user', icon: 'user' },
+ { prefix: 'mentions:', label: 'mentions:', description: 'user', icon: 'at' },
+ { prefix: 'has:', label: 'has:', description: 'link, file, image, or video', icon: 'has' },
+ { prefix: 'in:', label: 'in:', description: 'channel', icon: 'channel' },
+ { prefix: 'before:', label: 'before:', description: 'date', icon: 'date' },
+ { prefix: 'after:', label: 'after:', description: 'date', icon: 'date' },
+ { prefix: 'pinned:', label: 'pinned:', description: 'true or false', icon: 'pin' },
+];
+
+const HAS_OPTIONS = [
+ { value: 'link', label: 'link' },
+ { value: 'file', label: 'file' },
+ { value: 'image', label: 'image' },
+ { value: 'video', label: 'video' },
+];
+
+function getAvatarColor(name) {
+ const colors = ['#5865F2', '#57F287', '#FEE75C', '#EB459E', '#ED4245', '#F47B67', '#E67E22', '#3498DB'];
+ let hash = 0;
+ for (let i = 0; i < (name || '').length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+ return colors[Math.abs(hash) % colors.length];
+}
+
+function FilterIcon({ type }) {
+ switch (type) {
+ case 'user':
+ return (
+
+ );
+ case 'at':
+ return (
+
+ );
+ case 'has':
+ return (
+
+ );
+ case 'channel':
+ return #;
+ case 'date':
+ return (
+
+ );
+ case 'pin':
+ return (
+
+ );
+ default:
+ return null;
+ }
+}
+
+const SearchDropdown = ({
+ visible,
+ searchText,
+ channels,
+ members,
+ searchHistory,
+ onSelectFilter,
+ onSelectHistoryItem,
+ onClearHistory,
+ onClearHistoryItem,
+ anchorRef,
+ onClose,
+}) => {
+ const dropdownRef = useRef(null);
+ const [pos, setPos] = useState({ top: 0, left: 0, width: 420 });
+
+ // Position dropdown below anchor
+ useEffect(() => {
+ if (!visible || !anchorRef?.current) return;
+ const rect = anchorRef.current.getBoundingClientRect();
+ setPos({
+ top: rect.bottom + 4,
+ left: Math.max(rect.right - 420, 8),
+ width: 420,
+ });
+ }, [visible, anchorRef, searchText]);
+
+ // Click outside to close
+ useEffect(() => {
+ if (!visible) return;
+ const handler = (e) => {
+ if (
+ dropdownRef.current && !dropdownRef.current.contains(e.target) &&
+ anchorRef?.current && !anchorRef.current.contains(e.target)
+ ) {
+ onClose();
+ }
+ };
+ document.addEventListener('mousedown', handler);
+ return () => document.removeEventListener('mousedown', handler);
+ }, [visible, onClose, anchorRef]);
+
+ if (!visible) return null;
+
+ const activePrefix = detectActivePrefix(searchText);
+
+ let content;
+
+ if (activePrefix?.prefix === 'from' || activePrefix?.prefix === 'mentions') {
+ const filtered = (members || []).filter(m =>
+ m.username.toLowerCase().includes(activePrefix.partial)
+ );
+ const headerText = activePrefix.prefix === 'from' ? 'FROM USER' : 'MENTIONS USER';
+ content = (
+
+
setSearchFocused(true)}
- onBlur={() => setSearchFocused(false)}
+ className={`chat-header-search ${searchActive ? 'focused' : ''}`}
+ value={searchQuery || ''}
+ onChange={(e) => onSearchQueryChange?.(e.target.value)}
+ onFocus={onSearchFocus}
+ onKeyDown={handleSearchKeyDown}
/>
+ {searchQuery && (
+
+ )}
)}
+
+ );
+ } else if (activePrefix?.prefix === 'in') {
+ const filtered = (channels || []).filter(c =>
+ c.name?.toLowerCase().includes(activePrefix.partial) && c.type === 'text'
+ );
+ content = (
+ {headerText}
+ {filtered.length === 0 && (
+ No matching users
+ )}
+ {filtered.map(m => (
+ onSelectFilter(activePrefix.prefix, m.username)}
+ >
+ {m.avatarUrl ? (
+ 
+ ) : (
+
+ ))}
+
+ {m.username[0]?.toUpperCase()}
+
+ )}
+ {m.username}
+
+
+ );
+ } else if (activePrefix?.prefix === 'has') {
+ const filtered = HAS_OPTIONS.filter(o =>
+ o.value.includes(activePrefix.partial)
+ );
+ content = (
+ IN CHANNEL
+ {filtered.length === 0 && (
+ No matching channels
+ )}
+ {filtered.map(c => (
+ onSelectFilter('in', c.name)}
+ >
+ #
+ {c.name}
+
+ ))}
+
+
+ );
+ } else {
+ // Default: show filter suggestions + search history
+ content = (
+ MESSAGE CONTAINS
+ {filtered.map(o => (
+ onSelectFilter('has', o.value)}
+ >
+
+ ))}
+
+
+ );
+ }
+
+ return ReactDOM.createPortal(
+ SEARCH OPTIONS
+ {FILTER_SUGGESTIONS.map(f => (
+ onSelectFilter(f.prefix.replace(':', ''), null)}
+ >
+
+ ))}
+ {searchHistory && searchHistory.length > 0 && (
+ <>
+
+ SEARCH HISTORY
+
+
+ {searchHistory.map((item, i) => (
+ onSelectHistoryItem(item)}
+ >
+
+ {item}
+
+
+ ))}
+
+ )}
+
+ {content}
+
,
+ document.body
+ );
+};
+
+export default SearchDropdown;
diff --git a/packages/shared/src/components/SearchPanel.jsx b/packages/shared/src/components/SearchPanel.jsx
new file mode 100644
index 0000000..31a913d
--- /dev/null
+++ b/packages/shared/src/components/SearchPanel.jsx
@@ -0,0 +1,408 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { useSearch } from '../contexts/SearchContext';
+import { parseFilters } from '../utils/searchUtils';
+import { usePlatform } from '../platform';
+
+function formatTime(ts) {
+ const d = new Date(ts);
+ const now = new Date();
+ const isToday = d.toDateString() === now.toDateString();
+ if (isToday) return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+ return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function escapeHtml(str) {
+ if (!str) return '';
+ return str.replace(/&/g, '&').replace(//g, '>');
+}
+
+function getAvatarColor(name) {
+ const colors = ['#5865F2', '#57F287', '#FEE75C', '#EB459E', '#ED4245', '#F47B67', '#E67E22', '#3498DB'];
+ let hash = 0;
+ for (let i = 0; i < (name || '').length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+ return colors[Math.abs(hash) % colors.length];
+}
+
+const CONVEX_PUBLIC_URL = 'http://72.26.56.3:3210';
+const rewriteStorageUrl = (url) => {
+ try {
+ const u = new URL(url);
+ const pub = new URL(CONVEX_PUBLIC_URL);
+ u.hostname = pub.hostname;
+ u.port = pub.port;
+ u.protocol = pub.protocol;
+ return u.toString();
+ } catch { return url; }
+};
+
+const toHexString = (bytes) =>
+ bytes.reduce((str, byte) => str + byte.toString(16).padStart(2, '0'), '');
+
+const searchImageCache = new Map();
+
+const SearchResultImage = ({ metadata }) => {
+ const { crypto } = usePlatform();
+ const fetchUrl = rewriteStorageUrl(metadata.url);
+ const [url, setUrl] = useState(searchImageCache.get(fetchUrl) || null);
+ const [loading, setLoading] = useState(!searchImageCache.has(fetchUrl));
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (searchImageCache.has(fetchUrl)) {
+ setUrl(searchImageCache.get(fetchUrl));
+ setLoading(false);
+ return;
+ }
+ let isMounted = true;
+ const decrypt = async () => {
+ try {
+ const res = await fetch(fetchUrl);
+ const blob = await res.blob();
+ const arrayBuffer = await blob.arrayBuffer();
+ const hexInput = toHexString(new Uint8Array(arrayBuffer));
+ if (hexInput.length < 32) throw new Error('Invalid file data');
+ const TAG_HEX_LEN = 32;
+ const contentHex = hexInput.slice(0, -TAG_HEX_LEN);
+ const tagHex = hexInput.slice(-TAG_HEX_LEN);
+ const decrypted = await crypto.decryptData(contentHex, metadata.key, metadata.iv, tagHex, { encoding: 'buffer' });
+ const decryptedBlob = new Blob([decrypted], { type: metadata.mimeType });
+ const objectUrl = URL.createObjectURL(decryptedBlob);
+ if (isMounted) {
+ searchImageCache.set(fetchUrl, objectUrl);
+ setUrl(objectUrl);
+ setLoading(false);
+ }
+ } catch (err) {
+ console.error('Search image decrypt error:', err);
+ if (isMounted) { setError('Failed to load'); setLoading(false); }
+ }
+ };
+ decrypt();
+ return () => { isMounted = false; };
+ }, [fetchUrl, metadata, crypto]);
+
+ if (loading) return Loading image...
;
+ if (error) return null;
+ return Loading video...
;
+ if (error) return null;
+
+ const handlePlayClick = () => { setShowControls(true); if (videoRef.current) videoRef.current.play(); };
+ return (
+
+
+ {!showControls &&
+ );
+};
+
+const SearchResultFile = ({ metadata }) => {
+ const { crypto } = usePlatform();
+ const fetchUrl = rewriteStorageUrl(metadata.url);
+ const [url, setUrl] = useState(searchImageCache.get(fetchUrl) || null);
+ const [loading, setLoading] = useState(!searchImageCache.has(fetchUrl));
+
+ useEffect(() => {
+ if (searchImageCache.has(fetchUrl)) {
+ setUrl(searchImageCache.get(fetchUrl));
+ setLoading(false);
+ return;
+ }
+ let isMounted = true;
+ const decrypt = async () => {
+ try {
+ const res = await fetch(fetchUrl);
+ const blob = await res.blob();
+ const arrayBuffer = await blob.arrayBuffer();
+ const hexInput = toHexString(new Uint8Array(arrayBuffer));
+ if (hexInput.length < 32) return;
+ const TAG_HEX_LEN = 32;
+ const contentHex = hexInput.slice(0, -TAG_HEX_LEN);
+ const tagHex = hexInput.slice(-TAG_HEX_LEN);
+ const decrypted = await crypto.decryptData(contentHex, metadata.key, metadata.iv, tagHex, { encoding: 'buffer' });
+ const decryptedBlob = new Blob([decrypted], { type: metadata.mimeType });
+ const objectUrl = URL.createObjectURL(decryptedBlob);
+ if (isMounted) {
+ searchImageCache.set(fetchUrl, objectUrl);
+ setUrl(objectUrl);
+ setLoading(false);
+ }
+ } catch (err) {
+ console.error('Search file decrypt error:', err);
+ if (isMounted) setLoading(false);
+ }
+ };
+ decrypt();
+ return () => { isMounted = false; };
+ }, [fetchUrl, metadata, crypto]);
+
+ const sizeStr = metadata.size ? `${(metadata.size / 1024).toFixed(1)} KB` : '';
+
+ return (
+ â–¶
}
+
+ 📄
+
+ );
+};
+
+const SearchPanel = ({ visible, onClose, channels, isDM, dmChannelId, onJumpToMessage, query, sortOrder, onSortChange }) => {
+ const { search, isReady } = useSearch() || {};
+ const [results, setResults] = useState([]);
+ const [searching, setSearching] = useState(false);
+ const [showSortMenu, setShowSortMenu] = useState(false);
+
+ // Execute search when query changes
+ useEffect(() => {
+ if (!visible || !query?.trim() || !search || !isReady) {
+ if (!query?.trim()) setResults([]);
+ return;
+ }
+
+ setSearching(true);
+ const { textQuery, filters } = parseFilters(query);
+
+ let channelId;
+ if (isDM) {
+ // In DM view — always scope to the DM channel
+ channelId = dmChannelId;
+ } else {
+ channelId = filters.channelName
+ ? channels?.find(c => c.name?.toLowerCase() === filters.channelName.toLowerCase())?._id
+ : undefined;
+ }
+
+ const params = {
+ query: textQuery || undefined,
+ channelId,
+ senderName: filters.senderName,
+ hasLink: filters.hasLink,
+ hasImage: filters.hasImage,
+ hasVideo: filters.hasVideo,
+ hasFile: filters.hasFile,
+ hasMention: filters.hasMention,
+ before: filters.before,
+ after: filters.after,
+ pinned: filters.pinned,
+ limit: 25,
+ };
+
+ const res = search(params);
+
+ let filtered;
+ if (isDM) {
+ // In DM view — results are already scoped to dmChannelId
+ filtered = res;
+ } else {
+ // In server view — filter out DM messages
+ const serverChannelIds = new Set(channels?.map(c => c._id) || []);
+ filtered = res.filter(r => serverChannelIds.has(r.channel_id));
+ }
+
+ // Sort results
+ let sorted = [...filtered];
+ if (sortOrder === 'oldest') {
+ sorted.sort((a, b) => a.created_at - b.created_at);
+ } else {
+ // newest first (default)
+ sorted.sort((a, b) => b.created_at - a.created_at);
+ }
+
+ setResults(sorted);
+ setSearching(false);
+ }, [visible, query, sortOrder, search, isReady, channels, isDM, dmChannelId]);
+
+ const handleResultClick = useCallback((result) => {
+ onJumpToMessage(result.channel_id, result.id);
+ }, [onJumpToMessage]);
+
+ if (!visible) return null;
+
+ const channelMap = {};
+ if (channels) {
+ for (const c of channels) channelMap[c._id] = c.name;
+ }
+
+ // Group results by channel
+ const grouped = {};
+ for (const r of results) {
+ const chName = channelMap[r.channel_id] || 'Unknown';
+ if (!grouped[chName]) grouped[chName] = [];
+ grouped[chName].push(r);
+ }
+
+ const { filters: activeFilters } = query?.trim() ? parseFilters(query) : { filters: {} };
+ const filterChips = [];
+ if (activeFilters.senderName) filterChips.push({ label: `from: ${activeFilters.senderName}`, key: 'from' });
+ if (activeFilters.hasLink) filterChips.push({ label: 'has: link', key: 'hasLink' });
+ if (activeFilters.hasImage) filterChips.push({ label: 'has: image', key: 'hasImage' });
+ if (activeFilters.hasVideo) filterChips.push({ label: 'has: video', key: 'hasVideo' });
+ if (activeFilters.hasFile) filterChips.push({ label: 'has: file', key: 'hasFile' });
+ if (activeFilters.hasMention) filterChips.push({ label: 'has: mention', key: 'hasMention' });
+ if (activeFilters.before) filterChips.push({ label: `before: ${activeFilters.before}`, key: 'before' });
+ if (activeFilters.after) filterChips.push({ label: `after: ${activeFilters.after}`, key: 'after' });
+ if (activeFilters.pinned) filterChips.push({ label: 'pinned: true', key: 'pinned' });
+ if (activeFilters.channelName) filterChips.push({ label: `in: ${activeFilters.channelName}`, key: 'in' });
+
+ const sortLabel = sortOrder === 'oldest' ? 'Oldest' : 'Newest';
+
+ return (
+
+
+ {metadata.filename}
+ {sizeStr && {sizeStr}
}
+ {url && e.stopPropagation()} style={{ color: 'var(--header-secondary)', fontSize: 11, textDecoration: 'underline' }}>Download}
+ {loading && Decrypting...
}
+
+
+ );
+};
+
+export default SearchPanel;
diff --git a/packages/shared/src/components/Sidebar.jsx b/packages/shared/src/components/Sidebar.jsx
index cf6b31b..341b49c 100644
--- a/packages/shared/src/components/Sidebar.jsx
+++ b/packages/shared/src/components/Sidebar.jsx
@@ -93,7 +93,7 @@ const STATUS_OPTIONS = [
];
const UserControlPanel = React.memo(({ username, userId }) => {
- const { session, idle } = usePlatform();
+ const { session, idle, searchDB } = usePlatform();
const { isMuted, isDeafened, toggleMute, toggleDeafen, connectionState, disconnectVoice } = useVoice();
const [showStatusMenu, setShowStatusMenu] = useState(false);
const [showUserSettings, setShowUserSettings] = useState(false);
@@ -137,6 +137,10 @@ const UserControlPanel = React.memo(({ username, userId }) => {
if (connectionState === 'connected') {
try { disconnectVoice(); } catch {}
}
+ // Save and close search DB
+ if (searchDB?.isOpen()) {
+ try { await searchDB.save(); searchDB.close(); } catch {}
+ }
// Clear persisted session
if (session) {
try { await session.clear(); } catch {}
@@ -383,7 +387,8 @@ const VoiceUserContextMenu = ({ x, y, onClose, user, onMute, isMuted, onServerMu
useEffect(() => {
const h = () => onClose();
window.addEventListener('click', h);
- return () => window.removeEventListener('click', h);
+ window.addEventListener('close-context-menus', h);
+ return () => { window.removeEventListener('click', h); window.removeEventListener('close-context-menus', h); };
}, [onClose]);
useLayoutEffect(() => {
@@ -489,7 +494,8 @@ const ChannelListContextMenu = ({ x, y, onClose, onCreateChannel, onCreateCatego
useEffect(() => {
const h = () => onClose();
window.addEventListener('click', h);
- return () => window.removeEventListener('click', h);
+ window.addEventListener('close-context-menus', h);
+ return () => { window.removeEventListener('click', h); window.removeEventListener('close-context-menus', h); };
}, [onClose]);
useLayoutEffect(() => {
@@ -1062,6 +1068,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
+ window.dispatchEvent(new Event('close-context-menus'));
setVoiceUserMenu({ x: e.clientX, y: e.clientY, user });
}}
>
@@ -1332,6 +1339,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
+
+
+ {filterChips.length > 0 && (
+
+
+ {results.length} result{results.length !== 1 ? 's' : ''}
+
+
+
+
+
+
+ {showSortMenu && (
+
+
+
+
+ )}
+ { onSortChange('newest'); setShowSortMenu(false); }}
+ >
+ Newest
+
+ { onSortChange('oldest'); setShowSortMenu(false); }}
+ >
+ Oldest
+
+
+ {filterChips.map(chip => (
+
+ {chip.label}
+
+ ))}
+
+ )}
+
+
+ {!isReady && (
+
+ Search database is loading...
+ )}
+ {isReady && searching && Searching...
}
+ {isReady && !searching && results.length === 0 && (
+
+
+
+ )}
+ {Object.entries(grouped).map(([chName, msgs]) => (
+ No results found
+
+
+ ))}
+ {isDM ? chName : `#${chName}`}
+ {msgs.map(r => (
+ handleResultClick(r)}
+ >
+
+ ))}
+
+ {r.username?.[0]?.toUpperCase()}
+
+
+
+
+ {r.username}
+ {formatTime(r.created_at)}
+
+ {!(r.has_attachment && r.attachment_meta) && (
+
+ )}
+ {r.has_attachment && r.attachment_meta ? (() => {
+ try {
+ const meta = JSON.parse(r.attachment_meta);
+ if (r.attachment_type?.startsWith('image/')) return {
if (!e.target.closest('.channel-item') && !e.target.closest('.channel-category-header')) {
e.preventDefault();
+ window.dispatchEvent(new Event('close-context-menus'));
setChannelListContextMenu({ x: e.clientX, y: e.clientY });
}
}}>
diff --git a/packages/shared/src/components/UserSettings.jsx b/packages/shared/src/components/UserSettings.jsx
index d902671..e0fca33 100644
--- a/packages/shared/src/components/UserSettings.jsx
+++ b/packages/shared/src/components/UserSettings.jsx
@@ -5,6 +5,8 @@ import Avatar from './Avatar';
import AvatarCropModal from './AvatarCropModal';
import { useTheme, THEMES, THEME_LABELS } from '../contexts/ThemeContext';
import { useVoice } from '../contexts/VoiceContext';
+import { useSearch } from '../contexts/SearchContext';
+import { usePlatform } from '../platform';
const THEME_PREVIEWS = {
[THEMES.LIGHT]: { bg: '#ffffff', sidebar: '#f2f3f5', tertiary: '#e3e5e8', text: '#313338' },
@@ -18,6 +20,7 @@ const TABS = [
{ id: 'appearance', label: 'Appearance', section: 'USER SETTINGS' },
{ id: 'voice', label: 'Voice & Video', section: 'APP SETTINGS' },
{ id: 'keybinds', label: 'Keybinds', section: 'APP SETTINGS' },
+ { id: 'search', label: 'Search', section: 'APP SETTINGS' },
];
const UserSettings = ({ onClose, userId, username, onLogout }) => {
@@ -111,6 +114,7 @@ const UserSettings = ({ onClose, userId, username, onLogout }) => {
{activeTab === 'appearance' &&
{/* Right spacer with close button */}
@@ -845,4 +849,259 @@ const KeybindsTab = () => {
);
};
+/* =========================================
+ SEARCH TAB
+ ========================================= */
+const TAG_HEX_LEN = 32;
+
+const SearchTab = ({ userId }) => {
+ const convex = useConvex();
+ const { crypto } = usePlatform();
+ const searchCtx = useSearch();
+
+ const [status, setStatus] = useState('idle'); // idle | rebuilding | done | error
+ const [progress, setProgress] = useState({ currentChannel: '', channelIndex: 0, totalChannels: 0, messagesIndexed: 0 });
+ const [errorMsg, setErrorMsg] = useState('');
+ const cancelledRef = useRef(false);
+
+ const handleRebuild = async () => {
+ if (!userId || !crypto || !searchCtx?.isReady) return;
+
+ cancelledRef.current = false;
+ setStatus('rebuilding');
+ setProgress({ currentChannel: '', channelIndex: 0, totalChannels: 0, messagesIndexed: 0 });
+ setErrorMsg('');
+
+ try {
+ // 1. Gather channels + DMs
+ const [channels, dmChannels, rawKeys] = await Promise.all([
+ convex.query(api.channels.list, {}),
+ convex.query(api.dms.listDMs, { userId }),
+ convex.query(api.channelKeys.getKeysForUser, { userId }),
+ ]);
+
+ // 2. Decrypt channel keys
+ const privateKey = sessionStorage.getItem('privateKey');
+ if (!privateKey) throw new Error('Private key not found in session. Please re-login.');
+
+ const decryptedKeys = {};
+ for (const item of rawKeys) {
+ try {
+ const bundleJson = await crypto.privateDecrypt(privateKey, item.encrypted_key_bundle);
+ Object.assign(decryptedKeys, JSON.parse(bundleJson));
+ } catch (e) {
+ // Skip channels we can't decrypt
+ }
+ }
+
+ // 3. Build channel list: text channels + DMs that have keys
+ const textChannels = channels
+ .filter(c => c.type === 'text' && decryptedKeys[c._id])
+ .map(c => ({ id: c._id, name: '#' + c.name, key: decryptedKeys[c._id] }));
+
+ const dmItems = (dmChannels || [])
+ .filter(dm => decryptedKeys[dm.channel_id])
+ .map(dm => ({ id: dm.channel_id, name: '@' + dm.other_username, key: decryptedKeys[dm.channel_id] }));
+
+ const allChannels = [...textChannels, ...dmItems];
+
+ if (allChannels.length === 0) {
+ setStatus('done');
+ setProgress(p => ({ ...p, totalChannels: 0 }));
+ return;
+ }
+
+ setProgress(p => ({ ...p, totalChannels: allChannels.length }));
+
+ let totalIndexed = 0;
+
+ // 4. For each channel, paginate and decrypt
+ for (let i = 0; i < allChannels.length; i++) {
+ if (cancelledRef.current) break;
+
+ const ch = allChannels[i];
+ setProgress(p => ({ ...p, currentChannel: ch.name, channelIndex: i + 1 }));
+
+ let cursor = null;
+ let isDone = false;
+
+ while (!isDone) {
+ if (cancelledRef.current) break;
+
+ const paginationOpts = { numItems: 100, cursor };
+ const result = await convex.query(api.messages.fetchBulkPage, {
+ channelId: ch.id,
+ paginationOpts,
+ });
+
+ if (result.page.length > 0) {
+ // Build decrypt batch
+ const decryptItems = [];
+ const msgMap = [];
+
+ for (const msg of result.page) {
+ if (msg.ciphertext && msg.ciphertext.length >= TAG_HEX_LEN) {
+ const tag = msg.ciphertext.slice(-TAG_HEX_LEN);
+ const content = msg.ciphertext.slice(0, -TAG_HEX_LEN);
+ decryptItems.push({ ciphertext: content, key: ch.key, iv: msg.nonce, tag });
+ msgMap.push(msg);
+ }
+ }
+
+ if (decryptItems.length > 0) {
+ const decryptResults = await crypto.decryptBatch(decryptItems);
+
+ const indexItems = [];
+ for (let j = 0; j < decryptResults.length; j++) {
+ const plaintext = decryptResults[j];
+ if (plaintext && plaintext !== '[Decryption Error]') {
+ indexItems.push({
+ id: msgMap[j].id,
+ channel_id: msgMap[j].channel_id,
+ sender_id: msgMap[j].sender_id,
+ username: msgMap[j].username,
+ content: plaintext,
+ created_at: msgMap[j].created_at,
+ pinned: msgMap[j].pinned,
+ replyToId: msgMap[j].replyToId,
+ });
+ }
+ }
+
+ if (indexItems.length > 0) {
+ searchCtx.indexMessages(indexItems);
+ totalIndexed += indexItems.length;
+ setProgress(p => ({ ...p, messagesIndexed: totalIndexed }));
+ }
+ }
+ }
+
+ isDone = result.isDone;
+ cursor = result.continueCursor;
+
+ // Yield to UI between pages
+ await new Promise(r => setTimeout(r, 10));
+ }
+ }
+
+ // 5. Save
+ await searchCtx.save();
+ setStatus(cancelledRef.current ? 'idle' : 'done');
+ setProgress(p => ({ ...p, messagesIndexed: totalIndexed }));
+ } catch (err) {
+ console.error('Search index rebuild failed:', err);
+ setErrorMsg(err.message || 'Unknown error');
+ setStatus('error');
+ }
+ };
+
+ const handleCancel = () => {
+ cancelledRef.current = true;
+ };
+
+ const formatNumber = (n) => n.toLocaleString();
+
+ return (
+
+
+ {children}
+
+ );
+}
+
+export function useSearch() {
+ return useContext(SearchContext);
+}
diff --git a/packages/shared/src/index.css b/packages/shared/src/index.css
index 894e3f2..d48db26 100644
--- a/packages/shared/src/index.css
+++ b/packages/shared/src/index.css
@@ -236,6 +236,7 @@ body {
display: flex;
flex: 1;
min-height: 0;
+ position: relative;
}
.chat-area {
@@ -889,25 +890,60 @@ body {
.chat-header-search-wrapper {
margin-left: 4px;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.chat-header-search-icon {
+ position: absolute;
+ left: 8px;
+ color: var(--text-muted);
+ pointer-events: none;
+ z-index: 1;
+ display: flex;
+ align-items: center;
}
.chat-header-search {
- width: 160px;
+ width: 214px;
height: 28px;
- background-color: var(--bg-tertiary);
- border: none;
+ background-color: #17171a;
+ border: 1px solid color-mix(in oklab,hsl(240 calc(1*4%) 60.784% /0.2) 100%,hsl(0 0% 0% /0.2) 0%);
border-radius: 4px;
- color: var(--text-normal);
- padding: 0 8px;
+ color: color-mix(in oklab, hsl(240 calc(1*6.667%) 94.118% /1) 100%, #000 0%);
+ padding: 0 28px 0 28px;
font-size: 13px;
outline: none;
transition: width 0.25s ease;
+ font-family: inherit;
+}
+
+.chat-header-search::placeholder {
+ color: var(--text-muted);
}
.chat-header-search.focused {
width: 240px;
}
+.chat-header-search-clear {
+ position: absolute;
+ right: 4px;
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ cursor: pointer;
+ padding: 2px;
+ display: flex;
+ align-items: center;
+ border-radius: 2px;
+}
+
+.chat-header-search-clear:hover {
+ color: var(--header-primary);
+}
+
/* ============================================
MEMBERS LIST
============================================ */
@@ -3191,4 +3227,468 @@ body {
.is-mobile .friends-view {
width: 100vw;
}
+
+ /* Search panel full-width on mobile */
+ .is-mobile .search-panel {
+ width: 100vw;
+ right: 0;
+ border-radius: 0;
+ }
+}
+
+/* ============================================
+ SEARCH DROPDOWN (appears below header input)
+ ============================================ */
+.search-dropdown {
+ position: fixed;
+ z-index: 10001;
+ background-color: #111214;
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+ overflow: hidden;
+ animation: searchDropdownIn 0.15s ease;
+}
+
+@keyframes searchDropdownIn {
+ from { opacity: 0; transform: translateY(-4px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.search-dropdown-scrollable {
+ max-height: 500px;
+ overflow-y: auto;
+ padding: 8px 0;
+}
+
+.search-dropdown-scrollable::-webkit-scrollbar {
+ width: 6px;
+}
+
+.search-dropdown-scrollable::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-auto-thumb, var(--bg-tertiary));
+ border-radius: 3px;
+}
+
+.search-dropdown-section-header {
+ font-size: 12px;
+ font-weight: 700;
+ color: var(--header-secondary);
+ text-transform: uppercase;
+ padding: 8px 16px 4px;
+ letter-spacing: 0.02em;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.search-dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ cursor: pointer;
+ color: var(--text-normal);
+ font-size: 14px;
+ transition: background-color 0.1s;
+}
+
+.search-dropdown-item:hover {
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+.search-dropdown-item-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.search-dropdown-item-label {
+ font-weight: 600;
+ color: var(--header-primary);
+}
+
+.search-dropdown-item-desc {
+ color: var(--text-muted);
+ font-size: 13px;
+}
+
+.search-dropdown-member {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 16px;
+ cursor: pointer;
+ transition: background-color 0.1s;
+}
+
+.search-dropdown-member:hover {
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+.search-dropdown-avatar {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: 600;
+ font-size: 11px;
+ flex-shrink: 0;
+ object-fit: cover;
+}
+
+img.search-dropdown-avatar {
+ object-fit: cover;
+}
+
+.search-dropdown-member-name {
+ color: var(--text-normal);
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.search-dropdown-channel {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 16px;
+ cursor: pointer;
+ color: var(--text-normal);
+ font-size: 14px;
+ transition: background-color 0.1s;
+}
+
+.search-dropdown-channel:hover {
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+.search-dropdown-channel-hash {
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--text-muted);
+ width: 24px;
+ text-align: center;
+ flex-shrink: 0;
+}
+
+.search-dropdown-history-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.search-dropdown-clear-all {
+ background: none;
+ border: none;
+ color: var(--text-link);
+ font-size: 12px;
+ cursor: pointer;
+ padding: 0;
+ font-weight: 500;
+}
+
+.search-dropdown-clear-all:hover {
+ text-decoration: underline;
+}
+
+.search-dropdown-history-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 16px;
+ cursor: pointer;
+ transition: background-color 0.1s;
+}
+
+.search-dropdown-history-item:hover {
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+.search-dropdown-history-icon {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.search-dropdown-history-text {
+ flex: 1;
+ color: var(--text-normal);
+ font-size: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.search-dropdown-history-delete {
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ font-size: 16px;
+ cursor: pointer;
+ padding: 0 4px;
+ opacity: 0;
+ transition: opacity 0.1s;
+ line-height: 1;
+}
+
+.search-dropdown-history-item:hover .search-dropdown-history-delete {
+ opacity: 1;
+}
+
+.search-dropdown-history-delete:hover {
+ color: var(--header-primary);
+}
+
+.search-dropdown-empty {
+ padding: 12px 16px;
+ color: var(--text-muted);
+ font-size: 13px;
+ text-align: center;
+}
+
+/* ============================================
+ SEARCH PANEL (results)
+ ============================================ */
+.search-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 420px;
+ height: 100%;
+ background-color: var(--bg-secondary);
+ border-left: 1px solid var(--border-subtle);
+ display: flex;
+ flex-direction: column;
+ z-index: 100;
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+}
+
+.search-panel-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border-subtle);
+}
+
+.search-panel-header-left {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.search-panel-header-right {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.search-result-count {
+ color: var(--header-secondary);
+ font-size: 13px;
+ font-weight: 600;
+}
+
+.search-panel-sort-wrapper {
+ position: relative;
+}
+
+.search-panel-sort-btn {
+ display: flex;
+ align-items: center;
+ background: none;
+ border: none;
+ color: var(--text-link);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-family: inherit;
+}
+
+.search-panel-sort-btn:hover {
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+.search-panel-sort-menu {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: 4px;
+ background-color: #111214;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ z-index: 10;
+ overflow: hidden;
+ min-width: 120px;
+}
+
+.search-panel-sort-option {
+ padding: 8px 12px;
+ color: var(--text-normal);
+ font-size: 14px;
+ cursor: pointer;
+ transition: background-color 0.1s;
+}
+
+.search-panel-sort-option:hover {
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+.search-panel-sort-option.active {
+ color: var(--text-link);
+}
+
+.search-panel-close {
+ background: none;
+ border: none;
+ color: var(--header-secondary);
+ font-size: 20px;
+ cursor: pointer;
+ line-height: 1;
+ padding: 4px;
+}
+
+.search-panel-close:hover {
+ color: var(--header-primary);
+}
+
+.search-filter-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ padding: 8px 16px;
+}
+
+.search-filter-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 8px;
+ border-radius: 12px;
+ background-color: var(--brand-experiment);
+ color: white;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.search-panel-results {
+ flex: 1;
+ overflow-y: auto;
+ padding: 4px 8px;
+}
+
+.search-panel-results::-webkit-scrollbar {
+ width: 6px;
+}
+
+.search-panel-results::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-auto-thumb, var(--bg-tertiary));
+ border-radius: 3px;
+}
+
+.search-panel-empty {
+ text-align: center;
+ color: var(--text-muted);
+ padding: 32px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.search-channel-header {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--header-secondary);
+ text-transform: uppercase;
+ padding: 8px 8px 4px;
+ letter-spacing: 0.02em;
+}
+
+.search-result {
+ background-color: var(--bg-primary);
+ border-radius: 4px;
+ padding: 8px 12px;
+ margin-bottom: 4px;
+ cursor: pointer;
+ transition: background-color 0.1s;
+ display: flex;
+ gap: 12px;
+}
+
+.search-result:hover {
+ background-color: var(--bg-mod-faint);
+}
+
+.search-result-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: 600;
+ font-size: 15px;
+ flex-shrink: 0;
+}
+
+.search-result-body {
+ flex: 1;
+ min-width: 0;
+}
+
+.search-result-header {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ margin-bottom: 2px;
+}
+
+.search-result-username {
+ color: var(--header-primary);
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.search-result-time {
+ color: var(--text-muted);
+ font-size: 0.75rem;
+ margin-left: 0;
+}
+
+.search-result-content {
+ color: var(--text-normal);
+ font-size: 0.9375rem;
+ line-height: 1.375;
+ word-break: break-word;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+}
+
+.search-result-content mark {
+ background-color: rgba(250, 166, 26, 0.3);
+ color: var(--text-normal);
+ border-radius: 2px;
+ padding: 0 1px;
+}
+
+.search-result-badge {
+ display: inline-block;
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--text-muted);
+ background-color: var(--bg-tertiary);
+ padding: 1px 6px;
+ border-radius: 3px;
+ margin-top: 4px;
+ margin-right: 4px;
+ text-transform: uppercase;
}
\ No newline at end of file
diff --git a/packages/shared/src/pages/Chat.jsx b/packages/shared/src/pages/Chat.jsx
index 7b7c801..2171026 100644
--- a/packages/shared/src/pages/Chat.jsx
+++ b/packages/shared/src/pages/Chat.jsx
@@ -9,12 +9,16 @@ import { useVoice } from '../contexts/VoiceContext';
import FriendsView from '../components/FriendsView';
import MembersList from '../components/MembersList';
import ChatHeader from '../components/ChatHeader';
+import SearchPanel from '../components/SearchPanel';
+import SearchDropdown from '../components/SearchDropdown';
import { useToasts } from '../components/Toast';
import { PresenceProvider } from '../contexts/PresenceContext';
import { getUserPref, setUserPref } from '../utils/userPreferences';
import { usePlatform } from '../platform';
import { useIsMobile } from '../hooks/useIsMobile';
+const MAX_SEARCH_HISTORY = 10;
+
const Chat = () => {
const { crypto, settings } = usePlatform();
const isMobile = useIsMobile();
@@ -31,6 +35,17 @@ const Chat = () => {
const [showPinned, setShowPinned] = useState(false);
const [mobileView, setMobileView] = useState('sidebar');
+ // Search state
+ const [searchQuery, setSearchQuery] = useState('');
+ const [showSearchDropdown, setShowSearchDropdown] = useState(false);
+ const [showSearchResults, setShowSearchResults] = useState(false);
+ const [searchSortOrder, setSearchSortOrder] = useState('newest');
+ const [searchHistory, setSearchHistory] = useState(() => {
+ const id = localStorage.getItem('userId');
+ return id ? getUserPref(id, 'searchHistory', []) : [];
+ });
+ const searchInputRef = useRef(null);
+
const convex = useConvex();
const { toasts, addToast, removeToast, ToastContainer } = useToasts();
const prevDmChannelsRef = useRef(null);
@@ -41,7 +56,11 @@ const Chat = () => {
const handler = (e) => {
if (e.ctrlKey && e.key === 'k') {
e.preventDefault();
- // Quick switcher placeholder - could open a search modal
+ // Focus the search input
+ const input = searchInputRef.current?.querySelector('input');
+ if (input) {
+ input.focus();
+ }
}
if (e.ctrlKey && e.shiftKey && e.key === 'M') {
e.preventDefault();
@@ -57,6 +76,7 @@ const Chat = () => {
const serverSettings = useQuery(api.serverSettings.get);
const serverName = serverSettings?.serverName || 'Secure Chat';
const serverIconUrl = serverSettings?.iconUrl || null;
+ const allMembers = useQuery(api.members.listAll) || [];
const rawChannelKeys = useQuery(
api.channelKeys.getKeysForUser,
@@ -195,6 +215,127 @@ const Chat = () => {
}
}, [voiceActiveChannelId]);
+ // Search handlers
+ const handleSearchQueryChange = useCallback((val) => {
+ setSearchQuery(val);
+ if (val === '') {
+ setShowSearchResults(false);
+ }
+ if (!showSearchDropdown && val !== undefined) {
+ setShowSearchDropdown(true);
+ }
+ }, [showSearchDropdown]);
+
+ const handleSearchFocus = useCallback(() => {
+ setShowSearchDropdown(true);
+ }, []);
+
+ const handleSearchBlur = useCallback(() => {
+ // Dropdown close is handled by click-outside in SearchDropdown
+ }, []);
+
+ const handleSearchSubmit = useCallback(() => {
+ if (!searchQuery.trim()) return;
+ setShowSearchDropdown(false);
+ setShowSearchResults(true);
+ // Save to history
+ setSearchHistory(prev => {
+ const filtered = prev.filter(h => h !== searchQuery.trim());
+ const updated = [searchQuery.trim(), ...filtered].slice(0, MAX_SEARCH_HISTORY);
+ if (userId) {
+ setUserPref(userId, 'searchHistory', updated, settings);
+ }
+ return updated;
+ });
+ }, [searchQuery, userId, settings]);
+
+ const handleSelectFilter = useCallback((prefix, value) => {
+ if (value !== null) {
+ // Replace the current active prefix with the completed token
+ const beforePrefix = searchQuery.replace(/\b(from|in|has|mentions):\S*$/i, '').trimEnd();
+ const newQuery = beforePrefix + (beforePrefix ? ' ' : '') + prefix + ':' + value + ' ';
+ setSearchQuery(newQuery);
+ } else {
+ // Just insert the prefix (e.g., clicking "from:" suggestion)
+ const newQuery = searchQuery + (searchQuery && !searchQuery.endsWith(' ') ? ' ' : '') + prefix + ':';
+ setSearchQuery(newQuery);
+ }
+ // Re-focus input
+ setTimeout(() => {
+ const input = searchInputRef.current?.querySelector('input');
+ if (input) input.focus();
+ }, 0);
+ }, [searchQuery]);
+
+ const handleSelectHistoryItem = useCallback((item) => {
+ setSearchQuery(item);
+ setShowSearchDropdown(false);
+ setShowSearchResults(true);
+ }, []);
+
+ const handleClearHistory = useCallback(() => {
+ setSearchHistory([]);
+ if (userId) {
+ setUserPref(userId, 'searchHistory', [], settings);
+ }
+ }, [userId, settings]);
+
+ const handleClearHistoryItem = useCallback((index) => {
+ setSearchHistory(prev => {
+ const updated = prev.filter((_, i) => i !== index);
+ if (userId) {
+ setUserPref(userId, 'searchHistory', updated, settings);
+ }
+ return updated;
+ });
+ }, [userId, settings]);
+
+ const handleCloseSearchDropdown = useCallback(() => {
+ setShowSearchDropdown(false);
+ }, []);
+
+ const handleCloseSearchResults = useCallback(() => {
+ setShowSearchResults(false);
+ setSearchQuery('');
+ }, []);
+
+ const handleJumpToMessage = useCallback((channelId, messageId) => {
+ // Switch to the correct channel if needed
+ const isDM = dmChannels.some(dm => dm.channel_id === channelId);
+ if (isDM) {
+ const dm = dmChannels.find(d => d.channel_id === channelId);
+ if (dm) {
+ setActiveDMChannel(dm);
+ setView('me');
+ }
+ } else {
+ setActiveChannel(channelId);
+ setView('server');
+ }
+ setShowSearchResults(false);
+ setSearchQuery('');
+ // Give time for channel to render then scroll
+ setTimeout(() => {
+ const el = document.getElementById(`msg-${messageId}`);
+ if (el) {
+ el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ el.classList.add('message-highlight');
+ setTimeout(() => el.classList.remove('message-highlight'), 2000);
+ }
+ }, 300);
+ }, [dmChannels]);
+
+ // Shared search props for ChatHeader
+ const searchProps = {
+ searchQuery,
+ onSearchQueryChange: handleSearchQueryChange,
+ onSearchSubmit: handleSearchSubmit,
+ onSearchFocus: handleSearchFocus,
+ onSearchBlur: handleSearchBlur,
+ searchInputRef,
+ searchActive: showSearchDropdown || showSearchResults,
+ };
+
function renderMainContent() {
if (view === 'me') {
if (activeDMChannel) {
@@ -208,6 +349,7 @@ const Chat = () => {
onTogglePinned={() => setShowPinned(p => !p)}
isMobile={isMobile}
onMobileBack={handleMobileBack}
+ {...searchProps}
/>
{
showPinned={showPinned}
onTogglePinned={() => setShowPinned(false)}
/>
+
);
@@ -277,6 +430,7 @@ const Chat = () => {
serverName={serverName}
isMobile={isMobile}
onMobileBack={handleMobileBack}
+ {...searchProps}
/>
Search
+ +
+
+ );
+};
+
export default UserSettings;
diff --git a/packages/shared/src/contexts/SearchContext.jsx b/packages/shared/src/contexts/SearchContext.jsx
new file mode 100644
index 0000000..d03cc54
--- /dev/null
+++ b/packages/shared/src/contexts/SearchContext.jsx
@@ -0,0 +1,75 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { usePlatform } from '../platform';
+
+const SearchContext = createContext(null);
+
+export function SearchProvider({ children }) {
+ const { searchDB, features } = usePlatform();
+ const [isReady, setIsReady] = useState(false);
+ const [initSignal, setInitSignal] = useState(0);
+
+ const initialize = useCallback(() => {
+ setInitSignal(s => s + 1);
+ }, []);
+
+ useEffect(() => {
+ if (!features?.hasSearch || !searchDB) return;
+
+ // Already open from a previous run
+ if (searchDB.isOpen()) {
+ setIsReady(true);
+ return;
+ }
+
+ const dbKey = sessionStorage.getItem('searchDbKey');
+ const userId = localStorage.getItem('userId');
+ if (!dbKey || !userId) return;
+
+ searchDB.open(dbKey, userId)
+ .then(() => {
+ setIsReady(true);
+ console.log('Search DB initialized');
+ })
+ .catch(err => {
+ console.error('Search DB init failed:', err);
+ });
+
+ const handleBeforeUnload = () => {
+ if (searchDB.isOpen()) {
+ searchDB.save();
+ }
+ };
+ window.addEventListener('beforeunload', handleBeforeUnload);
+ return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+ }, [searchDB, features?.hasSearch, initSignal]);
+
+ const indexMessages = useCallback((messages) => {
+ if (!searchDB?.isOpen() || !messages?.length) return;
+ searchDB.indexMessages(messages);
+ }, [searchDB]);
+
+ const search = useCallback((params) => {
+ if (!searchDB?.isOpen()) return [];
+ return searchDB.search(params);
+ }, [searchDB]);
+
+ const save = useCallback(async () => {
+ if (searchDB?.isOpen()) {
+ await searchDB.save();
+ }
+ }, [searchDB]);
+
+ const value = useMemo(() => (
+ { isReady, indexMessages, search, save, searchDB, initialize }
+ ), [isReady, indexMessages, search, save, searchDB, initialize]);
+
+ return (
+ + Search Index +
++ Rebuild your local search index by downloading and decrypting all messages from the server. This may take a while for large servers. +
+ + {status === 'idle' && ( + + )} + + {status === 'rebuilding' && ( +
+ {/* Progress bar */}
+
+
+
+ )}
+
+ {status === 'done' && (
+ 0
+ ? `${(progress.channelIndex / progress.totalChannels) * 100}%`
+ : '0%',
+ transition: 'width 0.3s ease',
+ }} />
+
+
+
+ Indexing {progress.currentChannel}... ({progress.channelIndex} of {progress.totalChannels} channels)
+
+
+ {formatNumber(progress.messagesIndexed)} messages indexed
+
+
+
+
+
+ )}
+
+ {status === 'error' && (
+
+ Complete! {formatNumber(progress.messagesIndexed)} messages indexed across {progress.totalChannels} channels.
+
+
+
+
+ )}
+
+ Error: {errorMsg}
+
+
+