From e2fc61b8d3ca7d97715991bfb0778c94920da506 Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Wed, 24 Jun 2026 21:34:05 +0300 Subject: [PATCH 1/7] Encrypted memory search --- 0001-Stylistic-UI-changes.patch | 231 ++++++++++++ 0001-ui-changes.diff | 218 ++++++++++++ .../components/GlobalKeyboardShortcuts.tsx | 28 +- .../features/message-search/MessageSearch.tsx | 56 ++- .../features/message-search/SearchFilters.tsx | 330 +++++++++++++++++- .../message-search/searchEncryptedRooms.ts | 144 ++++++++ .../message-search/useMessageSearch.ts | 93 ++++- src/app/features/room/RoomViewHeader.tsx | 44 ++- src/app/features/search/Search.tsx | 2 - .../keyboard-shortcuts/KeyboardShortcuts.tsx | 5 +- src/app/hooks/router/useDirectSelected.ts | 12 +- src/app/pages/Router.tsx | 3 +- src/app/pages/client/direct/Direct.tsx | 30 +- src/app/pages/client/direct/Search.tsx | 54 +++ src/app/pages/client/direct/index.ts | 1 + src/app/pages/pathUtils.ts | 2 + src/app/pages/paths.ts | 2 + src/app/utils/room.ts | 42 +++ 18 files changed, 1247 insertions(+), 50 deletions(-) create mode 100644 0001-Stylistic-UI-changes.patch create mode 100644 0001-ui-changes.diff create mode 100644 src/app/features/message-search/searchEncryptedRooms.ts create mode 100644 src/app/pages/client/direct/Search.tsx diff --git a/0001-Stylistic-UI-changes.patch b/0001-Stylistic-UI-changes.patch new file mode 100644 index 0000000000..0f7a55bad8 --- /dev/null +++ b/0001-Stylistic-UI-changes.patch @@ -0,0 +1,231 @@ +From 2d92ae6de64cfeee41d4af520a091610cc1a8d74 Mon Sep 17 00:00:00 2001 +From: niki <295591807+nikiwastaken@users.noreply.github.com> +Date: Sun, 5 Jul 2026 16:16:08 +0000 +Subject: [PATCH] Stylistic UI changes + +--- + src/app/pages/client/profile/Profile.tsx | 51 +++++++++----------- + src/app/pages/client/sidebar/UserMenuTab.tsx | 37 ++++++++------ + 2 files changed, 45 insertions(+), 43 deletions(-) + +diff --git a/src/app/pages/client/profile/Profile.tsx b/src/app/pages/client/profile/Profile.tsx +index 24f928b6..0d3598f6 100644 +--- a/src/app/pages/client/profile/Profile.tsx ++++ b/src/app/pages/client/profile/Profile.tsx +@@ -5,15 +5,13 @@ import { + color, + config, + Menu, +- Icon, +- Icons, + Line, + MenuItem, + OverlayBackdrop, + Overlay, + OverlayCenter, + } from 'folds'; +-import { SquaresFour, menuIcon, settingsNavIcon, sizedIcon } from '$components/icons/phosphor'; ++import { GearSix, SquaresFour, menuIcon, sizedIcon } from '$components/icons/phosphor'; + import { PageNav, PageNavHeader } from '$components/page'; + import { useEffect, useMemo, useState } from 'react'; + import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; +@@ -36,7 +34,7 @@ import { useUserProfile } from '$hooks/useUserProfile'; + import type { SettingsMenuItem } from '$features/settings'; + import { settingsMenuIcons, settingsSections, useOpenSettings } from '$features/settings'; + import { UserQuickTools } from '../sidebar/UserQuickTools'; +-import { SignOutIcon } from '@phosphor-icons/react'; ++import { CaretDownIcon, CaretRightIcon, SignOutIcon } from '@phosphor-icons/react'; + import { UseStateProvider } from '$components/UseStateProvider'; + import { FocusTrap } from 'focus-trap-react'; + import { LogoutDialog } from '$components/LogoutDialog'; +@@ -144,17 +142,19 @@ export function ProfileMobile() { + background: color.Background.Container, + }} + > +- ++ ++ + +- +- ++ ++ ++ + + + +@@ -169,18 +169,15 @@ export function ProfileMobile() { + + + +- ++ + } +- after={ +- +- } ++ before={menuIcon(GearSix)} ++ style={{ ++ background: isSettingsOpen ? color.Surface.Container : color.Background.Container, ++ }} ++ after={menuIcon(isSettingsOpen && isMobile ? CaretDownIcon : CaretRightIcon)} + onClick={() => setIsSettingsOpen(!isSettingsOpen)} + > + +@@ -188,17 +185,17 @@ export function ProfileMobile() { + + + {isSettingsOpen && ( +-
++ + {menuItems.map((item) => { + const IconComponent = item.icon; + + return ( + openSettings(item.id)} + > + +@@ -238,7 +235,7 @@ export function ProfileMobile() { + + )} + +-
++ + )} + + +diff --git a/src/app/pages/client/sidebar/UserMenuTab.tsx b/src/app/pages/client/sidebar/UserMenuTab.tsx +index 6f321da7..66b489cd 100644 +--- a/src/app/pages/client/sidebar/UserMenuTab.tsx ++++ b/src/app/pages/client/sidebar/UserMenuTab.tsx +@@ -8,8 +8,6 @@ import { + Chip, + Dialog, + Header, +- Icon, +- Icons, + Line, + Menu, + MenuItem, +@@ -38,7 +36,7 @@ import { createLogger } from '$utils/debug'; + import type { Session } from '$state/sessions'; + import { activeSessionIdAtom, backgroundUnreadCountsAtom, sessionsAtom } from '$state/sessions'; + import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge'; +-import { Check, chipIcon, Plus } from '$components/icons/phosphor'; ++import { Check, chipIcon, menuIcon, Plus } from '$components/icons/phosphor'; + import { useSessionProfiles } from '$hooks/useSessionProfiles'; + import { useClientConfig } from '$hooks/useClientConfig'; + import { getHomePath, getLoginPath, getProfilePath, withSearchParam } from '$pages/pathUtils'; +@@ -56,7 +54,14 @@ import { + useUnverifiedDeviceCount, + VerificationStatus, + } from '$hooks/useDeviceVerificationStatus'; +-import { ShieldWarningIcon } from '@phosphor-icons/react'; ++import { ++ CaretDownIcon, ++ CaretRightIcon, ++ GearSixIcon, ++ PencilIcon, ++ ShieldWarningIcon, ++ UserIcon, ++} from '@phosphor-icons/react'; + import * as css from './UserMenuTab.css'; + + const log = createLogger('AccountSwitcherTab'); +@@ -262,14 +267,14 @@ export function AccountMenuOption({ isMobile, isRight }: { isMobile: boolean; is + } +- after={ +- +- } ++ before={menuIcon(UserIcon)} ++ after={menuIcon(isOpen && isMobile ? CaretDownIcon : CaretRightIcon)} + style={{ + position: 'relative', + background: isMobile +- ? color.Background.Container ++ ? isOpen ++ ? color.Surface.Container ++ : color.Background.Container + : isOpen + ? color.Secondary.Container + : color.Surface.Container, +@@ -479,13 +484,13 @@ export function PresenceMenuOption({ + )} + + } +- after={ +- +- } ++ after={menuIcon(isOpen && isMobile ? CaretDownIcon : CaretRightIcon)} + style={{ + position: 'relative', + background: isMobile +- ? color.Background.Container ++ ? isOpen ++ ? color.Surface.Container ++ : color.Background.Container + : isOpen + ? color.Secondary.Container + : color.Surface.Container, +@@ -751,7 +756,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi + showColor={false} + allowEditing={true} + /> +- ++ + + + +@@ -766,7 +771,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi + onClick={() => openSettings('account')} + size="300" + radii="300" +- before={} ++ before={menuIcon(PencilIcon)} + > + + Edit Profile +@@ -790,7 +795,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi + } ++ before={menuIcon(GearSixIcon)} + onClick={() => openSettings()} + > + +-- +2.54.0 + diff --git a/0001-ui-changes.diff b/0001-ui-changes.diff new file mode 100644 index 0000000000..79a18e2c9f --- /dev/null +++ b/0001-ui-changes.diff @@ -0,0 +1,218 @@ +diff --git c/src/app/pages/client/profile/Profile.tsx w/src/app/pages/client/profile/Profile.tsx +index 24f928b6..0d3598f6 100644 +--- c/src/app/pages/client/profile/Profile.tsx ++++ w/src/app/pages/client/profile/Profile.tsx +@@ -5,15 +5,13 @@ import { + color, + config, + Menu, +- Icon, +- Icons, + Line, + MenuItem, + OverlayBackdrop, + Overlay, + OverlayCenter, + } from 'folds'; +-import { SquaresFour, menuIcon, settingsNavIcon, sizedIcon } from '$components/icons/phosphor'; ++import { GearSix, SquaresFour, menuIcon, sizedIcon } from '$components/icons/phosphor'; + import { PageNav, PageNavHeader } from '$components/page'; + import { useEffect, useMemo, useState } from 'react'; + import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; +@@ -36,7 +34,7 @@ import { useUserProfile } from '$hooks/useUserProfile'; + import type { SettingsMenuItem } from '$features/settings'; + import { settingsMenuIcons, settingsSections, useOpenSettings } from '$features/settings'; + import { UserQuickTools } from '../sidebar/UserQuickTools'; +-import { SignOutIcon } from '@phosphor-icons/react'; ++import { CaretDownIcon, CaretRightIcon, SignOutIcon } from '@phosphor-icons/react'; + import { UseStateProvider } from '$components/UseStateProvider'; + import { FocusTrap } from 'focus-trap-react'; + import { LogoutDialog } from '$components/LogoutDialog'; +@@ -144,17 +142,19 @@ export function ProfileMobile() { + background: color.Background.Container, + }} + > +- ++ ++ + +- +- ++ ++ ++ + + + +@@ -169,18 +169,15 @@ export function ProfileMobile() { + + + +- ++ + } +- after={ +- +- } ++ before={menuIcon(GearSix)} ++ style={{ ++ background: isSettingsOpen ? color.Surface.Container : color.Background.Container, ++ }} ++ after={menuIcon(isSettingsOpen && isMobile ? CaretDownIcon : CaretRightIcon)} + onClick={() => setIsSettingsOpen(!isSettingsOpen)} + > + +@@ -188,17 +185,17 @@ export function ProfileMobile() { + + + {isSettingsOpen && ( +-
++ + {menuItems.map((item) => { + const IconComponent = item.icon; + + return ( + openSettings(item.id)} + > + +@@ -238,7 +235,7 @@ export function ProfileMobile() { + + )} + +-
++ + )} + + +diff --git c/src/app/pages/client/sidebar/UserMenuTab.tsx w/src/app/pages/client/sidebar/UserMenuTab.tsx +index 6f321da7..66b489cd 100644 +--- c/src/app/pages/client/sidebar/UserMenuTab.tsx ++++ w/src/app/pages/client/sidebar/UserMenuTab.tsx +@@ -8,8 +8,6 @@ import { + Chip, + Dialog, + Header, +- Icon, +- Icons, + Line, + Menu, + MenuItem, +@@ -38,7 +36,7 @@ import { createLogger } from '$utils/debug'; + import type { Session } from '$state/sessions'; + import { activeSessionIdAtom, backgroundUnreadCountsAtom, sessionsAtom } from '$state/sessions'; + import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge'; +-import { Check, chipIcon, Plus } from '$components/icons/phosphor'; ++import { Check, chipIcon, menuIcon, Plus } from '$components/icons/phosphor'; + import { useSessionProfiles } from '$hooks/useSessionProfiles'; + import { useClientConfig } from '$hooks/useClientConfig'; + import { getHomePath, getLoginPath, getProfilePath, withSearchParam } from '$pages/pathUtils'; +@@ -56,7 +54,14 @@ import { + useUnverifiedDeviceCount, + VerificationStatus, + } from '$hooks/useDeviceVerificationStatus'; +-import { ShieldWarningIcon } from '@phosphor-icons/react'; ++import { ++ CaretDownIcon, ++ CaretRightIcon, ++ GearSixIcon, ++ PencilIcon, ++ ShieldWarningIcon, ++ UserIcon, ++} from '@phosphor-icons/react'; + import * as css from './UserMenuTab.css'; + + const log = createLogger('AccountSwitcherTab'); +@@ -262,14 +267,14 @@ export function AccountMenuOption({ isMobile, isRight }: { isMobile: boolean; is + } +- after={ +- +- } ++ before={menuIcon(UserIcon)} ++ after={menuIcon(isOpen && isMobile ? CaretDownIcon : CaretRightIcon)} + style={{ + position: 'relative', + background: isMobile +- ? color.Background.Container ++ ? isOpen ++ ? color.Surface.Container ++ : color.Background.Container + : isOpen + ? color.Secondary.Container + : color.Surface.Container, +@@ -479,13 +484,13 @@ export function PresenceMenuOption({ + )} + + } +- after={ +- +- } ++ after={menuIcon(isOpen && isMobile ? CaretDownIcon : CaretRightIcon)} + style={{ + position: 'relative', + background: isMobile +- ? color.Background.Container ++ ? isOpen ++ ? color.Surface.Container ++ : color.Background.Container + : isOpen + ? color.Secondary.Container + : color.Surface.Container, +@@ -751,7 +756,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi + showColor={false} + allowEditing={true} + /> +- ++ + + + +@@ -766,7 +771,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi + onClick={() => openSettings('account')} + size="300" + radii="300" +- before={} ++ before={menuIcon(PencilIcon)} + > + + Edit Profile +@@ -790,7 +795,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi + } ++ before={menuIcon(GearSixIcon)} + onClick={() => openSettings()} + > + diff --git a/src/app/components/GlobalKeyboardShortcuts.tsx b/src/app/components/GlobalKeyboardShortcuts.tsx index e3b577ffca..712e6a6528 100644 --- a/src/app/components/GlobalKeyboardShortcuts.tsx +++ b/src/app/components/GlobalKeyboardShortcuts.tsx @@ -21,6 +21,7 @@ import { getHomeRoomPath, getHomeSearchPath, getInboxBookmarksPath, + getDirectSearchPath, getSpaceRoomPath, getSpaceSearchPath, withSearchParam, @@ -32,6 +33,7 @@ import { announce } from '$utils/announce'; import { roomIdToReplyDraftAtomFamily } from '$state/room/roomInputDrafts'; import type { Room } from '$types/matrix-sdk'; import { useSelectedSpace } from '$hooks/router/useSelectedSpace'; +import { useIsDirectRoom } from '$hooks/useRoom'; export function GlobalKeyboardShortcuts() { const navigate = useNavigate(); @@ -39,6 +41,7 @@ export function GlobalKeyboardShortcuts() { const mx = useMatrixClient(); const roomToParents = useAtomValue(roomToParentsAtom); const mDirects = useAtomValue(mDirectAtom); + const direct = useIsDirectRoom(); const roomToUnread = useAtomValue(roomToUnreadAtom); const unreadIndexRef = useRef(0); @@ -185,7 +188,29 @@ export function GlobalKeyboardShortcuts() { }; const path = currentSpace ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, currentSpace)) - : getHomeSearchPath(); + : direct + ? getDirectSearchPath() + : getHomeSearchPath(); + const roomName = mx.getRoom(currentRoom?.roomId)?.name; + navigate(withSearchParam(path, searchParams)); + announce(`Start Searching messages ${roomName ? `in ${roomName}` : ''}`); + }, + [mx, currentRoom, currentSpace, navigate] + ); + + const handleSearchMessageGlobally = useCallback( + (evt: KeyboardEvent) => { + if (!isKeyHotkey('mod+shift+f', evt)) return; + evt.preventDefault(); + + const searchParams: SearchPathSearchParams = { + global: 'true', + }; + const path = currentSpace + ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, currentSpace)) + : direct + ? getDirectSearchPath() + : getHomeSearchPath(); const roomName = mx.getRoom(currentRoom?.roomId)?.name; navigate(withSearchParam(path, searchParams)); announce(`Start Searching messages ${roomName ? `in ${roomName}` : ''}`); @@ -198,6 +223,7 @@ export function GlobalKeyboardShortcuts() { useKeyDown(window, handleReplyKeyDown); useKeyDown(window, handleBookmarkKeyDown); useKeyDown(window, handleSearchMessageInRoom); + useKeyDown(window, handleSearchMessageGlobally); return null; } diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx index c18d1ba152..96c65f7908 100644 --- a/src/app/features/message-search/MessageSearch.tsx +++ b/src/app/features/message-search/MessageSearch.tsx @@ -21,8 +21,8 @@ import { useRooms } from '$state/hooks/roomList'; import { allRoomsAtom } from '$state/room-list/roomList'; import { mDirectAtom } from '$state/mDirectList'; import { VirtualTile } from '$components/virtualizer'; -import type { MessageSearchParams } from './useMessageSearch'; -import { useMessageSearch } from './useMessageSearch'; +import type { MessageSearchParams, SearchHasType } from './useMessageSearch'; +import { useMessageSearch, VALID_HAS_TYPES } from './useMessageSearch'; import { SearchResultGroup } from './SearchResultGroup'; import { SearchInput } from './SearchInput'; import { SearchFilters } from './SearchFilters'; @@ -35,6 +35,7 @@ const useSearchPathSearchParams = (searchParams: URLSearchParams): SearchPathSea order: searchParams.get('order') ?? undefined, rooms: searchParams.get('rooms') ?? undefined, senders: searchParams.get('senders') ?? undefined, + has: searchParams.get('has') ?? undefined, }), [searchParams] ); @@ -55,7 +56,7 @@ export function MessageSearch({ }: Readonly) { const mx = useMatrixClient(); const mDirects = useAtomValue(mDirectAtom); - const allRooms = useRooms(mx, allRoomsAtom, mDirects); + const allRooms = useAtomValue(allRoomsAtom); const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad'); const [urlPreview] = useSetting(settingsAtom, 'urlPreview'); const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor'); @@ -84,6 +85,13 @@ export function MessageSearch({ } return undefined; }, [searchPathSearchParams.senders]); + const searchParamHasTypes = useMemo(() => { + if (!searchPathSearchParams.has) return undefined; + const decoded = decodeSearchParamValueArray(searchPathSearchParams.has).filter( + (t): t is SearchHasType => VALID_HAS_TYPES.includes(t as SearchHasType) + ); + return decoded.length > 0 ? decoded : undefined; + }, [searchPathSearchParams.has]); const msgSearchParams: MessageSearchParams = useMemo(() => { const isGlobal = searchPathSearchParams.global === 'true'; @@ -94,19 +102,31 @@ export function MessageSearch({ order: searchPathSearchParams.order ?? SearchOrderBy.Recent, rooms: searchParamRooms ?? defaultRooms, senders: searchParamsSenders ?? senders, + hasTypes: searchParamHasTypes, }; - }, [searchPathSearchParams, searchParamRooms, searchParamsSenders, rooms, senders]); + }, [ + searchPathSearchParams, + searchParamRooms, + searchParamsSenders, + searchParamHasTypes, + rooms, + senders, + ]); + + const isSearching = + !!msgSearchParams.term || (!!msgSearchParams.hasTypes && msgSearchParams.hasTypes.length > 0); const searchMessages = useMessageSearch(msgSearchParams); const { status, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ - enabled: !!msgSearchParams.term, + enabled: isSearching, queryKey: [ 'search', msgSearchParams.term, msgSearchParams.order, msgSearchParams.rooms, msgSearchParams.senders, + msgSearchParams.hasTypes, ], queryFn: ({ pageParam }) => searchMessages(pageParam), initialPageParam: '', @@ -178,6 +198,28 @@ export function MessageSearch({ }); }; + const handleHasTypesChange = (hasTypes?: SearchHasType[]) => { + setSearchParams((prevParams) => { + const newParams = new URLSearchParams(prevParams); + newParams.delete('has'); + if (hasTypes && hasTypes.length > 0) { + newParams.append('has', encodeSearchParamValueArray(hasTypes)); + } + return newParams; + }); + }; + + const handleSendersChange = (newSenders?: string[]) => { + setSearchParams((prevParams) => { + const newParams = new URLSearchParams(prevParams); + newParams.delete('senders'); + if (newSenders && newSenders.length > 0) { + newParams.append('senders', encodeSearchParamValueArray(newSenders)); + } + return newParams; + }); + }; + const lastVItem = vItems.at(-1); const lastVItemIndex: number | undefined = lastVItem?.index; const lastGroupIndex = groups.length - 1; @@ -224,6 +266,10 @@ export function MessageSearch({ onGlobalChange={handleGlobalChange} order={msgSearchParams.order} onOrderChange={handleOrderChange} + hasTypes={searchParamHasTypes} + onHasTypesChange={handleHasTypesChange} + senders={searchParamsSenders ?? senders} + onSendersChange={handleSendersChange} /> diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx index cc6487e081..bdc649201d 100644 --- a/src/app/features/message-search/SearchFilters.tsx +++ b/src/app/features/message-search/SearchFilters.tsx @@ -1,10 +1,13 @@ import type { ChangeEventHandler, MouseEventHandler } from 'react'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import type { RectCords } from 'folds'; import { + Avatar, Box, Chip, Text, + Icon, + Icons, Line, config, PopOut, @@ -17,12 +20,16 @@ import { Input, Badge, } from 'folds'; -import FocusTrap from 'focus-trap-react'; -import { getRoomIconComponent } from '$components/icons/roomIcons'; -import { Check, sizedIcon, PlusCircle, SortAscending, X } from '$components/icons/phosphor'; +import type { IconSrc } from 'folds'; import { SearchOrderBy } from '$types/matrix-sdk'; +import type { RoomMember } from '$types/matrix-sdk'; +import FocusTrap from 'focus-trap-react'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useMatrixClient } from '$hooks/useMatrixClient'; +import { useAtomValue } from 'jotai'; +import { settingsAtom } from '$state/settings'; +import { useClientConfig } from '$hooks/useClientConfig'; +import { getRoomAvatarUrl, getRoomIconSrc } from '$utils/room'; import { factoryRoomIdByAtoZ } from '$utils/sort'; import type { SearchItemStrGetter, UseAsyncSearchOptions } from '$hooks/useAsyncSearch'; import { useAsyncSearch } from '$hooks/useAsyncSearch'; @@ -30,6 +37,9 @@ import type { DebounceOptions } from '$hooks/useDebounce'; import { useDebounce } from '$hooks/useDebounce'; import { VirtualTile } from '$components/virtualizer'; import { stopPropagation } from '$utils/keyboard'; +import { UserAvatar } from '$components/user-avatar'; +import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; +import type { SearchHasType } from './useMessageSearch'; type OrderButtonProps = { order?: string; @@ -93,7 +103,7 @@ function OrderButton({ order, onChange }: OrderButtonProps) { } onClick={handleOpenMenu} > {rankOrder ? Relevance : Recent} @@ -262,10 +272,19 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto size="300" radii="300" aria-pressed={selected} - before={sizedIcon( - getRoomIconComponent(room.getType(), room.getJoinRule()), - '50' - )} + before={ + + } + after={ + mx.isRoomEncrypted(roomId) ? ( + + + + ) : null + } > {room.name} @@ -306,7 +325,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto onClick={handleOpenMenu} variant="SurfaceVariant" radii="Pill" - before={sizedIcon(PlusCircle, '100')} + before={} > Select Rooms @@ -314,6 +333,243 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto ); } +const HAS_FILTER_OPTIONS: { type: SearchHasType; label: string; icon: IconSrc }[] = [ + { type: 'image', label: 'Image', icon: Icons.Photo }, + { type: 'file', label: 'File', icon: Icons.File }, + { type: 'audio', label: 'Audio', icon: Icons.VolumeHigh }, + { type: 'video', label: 'Video', icon: Icons.Play }, + { type: 'link', label: 'Link', icon: Icons.Link }, +]; + +type HasFilterChipsProps = { + hasTypes?: SearchHasType[]; + onChange: (hasTypes?: SearchHasType[]) => void; +}; +function HasFilterChips({ hasTypes, onChange }: HasFilterChipsProps) { + const toggle = (type: SearchHasType) => { + if (hasTypes?.includes(type)) { + const next = hasTypes.filter((t) => t !== type); + onChange(next.length > 0 ? next : undefined); + } else { + onChange([...(hasTypes ?? []), type]); + } + }; + + return ( + <> + {HAS_FILTER_OPTIONS.map(({ type, label, icon }) => { + const active = hasTypes?.includes(type); + return ( + : } + outlined + onClick={() => toggle(type)} + > + {label} + + ); + })} + + ); +} + +type SelectSenderButtonProps = { + roomList: string[]; + selectedSenders?: string[]; + onChange: (senders?: string[]) => void; +}; + +const SENDER_SEARCH_OPTS: UseAsyncSearchOptions = { limit: 50, matchOptions: { contain: true } }; +const SENDER_DEBOUNCE_OPTS: DebounceOptions = { wait: 200 }; +const getMemberStr: SearchItemStrGetter = (member, query) => { + const name = member.name ?? member.userId; + return query ? [name, member.userId] : name; +}; +const getMemberDisplayName = (member: RoomMember): string => member.name ?? member.userId; +function SelectSenderButton({ roomList, selectedSenders, onChange }: SelectSenderButtonProps) { + const mx = useMatrixClient(); + const useAuthentication = useMediaAuthentication(); + const [menuAnchor, setMenuAnchor] = useState(); + const scrollRef = useRef(null); + + const members = useMemo(() => { + const seen = new Set(); + const result: RoomMember[] = []; + const scope = roomList.length > 0 ? roomList : []; + for (const roomId of scope) { + const room = mx.getRoom(roomId); + if (!room) continue; + for (const m of room.getMembers()) { + if (!seen.has(m.userId)) { + seen.add(m.userId); + result.push(m); + } + } + } + return result.toSorted((a, b) => + getMemberDisplayName(a).localeCompare(getMemberDisplayName(b)) + ); + }, [mx, roomList]); + + const [searchState, searchMembersRaw, resetSearch] = useAsyncSearch( + members, + getMemberStr, + SENDER_SEARCH_OPTS + ); + const searchMembers = useDebounce(searchMembersRaw, SENDER_DEBOUNCE_OPTS); + const handleSearchChange: ChangeEventHandler = (evt) => { + const value = evt.currentTarget.value.trim(); + if (!value) { + resetSearch(); + return; + } + searchMembers(value); + }; + + const displayMembers = searchState?.items ?? members; + + const virtualizer = useVirtualizer({ + count: displayMembers.length, + getScrollElement: () => scrollRef.current, + estimateSize: () => 32 + 4, + overscan: 10, + }); + const vItems = virtualizer.getVirtualItems(); + + const handleOpenMenu: MouseEventHandler = (evt) => { + setMenuAnchor(evt.currentTarget.getBoundingClientRect()); + }; + + const handleMemberClick: MouseEventHandler = (evt) => { + const userId = evt.currentTarget.getAttribute('data-user-id'); + if (!userId) return; + if (selectedSenders?.includes(userId)) { + const next = selectedSenders.filter((s) => s !== userId); + onChange(next.length > 0 ? next : undefined); + } else { + onChange([...(selectedSenders ?? []), userId]); + } + }; + + return ( + setMenuAnchor(undefined), + clickOutsideDeactivates: true, + escapeDeactivates: stopPropagation, + }} + > + + + + From + 0 ? ( + + {searchState.items.length} + + ) : null + } + /> + + + + {displayMembers.length === 0 && ( + + No members found + + )} +
+ {vItems.map((vItem) => { + const member = displayMembers[vItem.index]!; + const selected = selectedSenders?.includes(member.userId); + return ( + + + } + /> + + } + > + + {getMemberDisplayName(member)} + + + + ); + })} +
+ + + + + + } + > + } + > + Add Sender + + + ); +} + type SearchFiltersProps = { defaultRoomsFilterName: string; allowGlobal?: boolean; @@ -324,6 +580,10 @@ type SearchFiltersProps = { onGlobalChange: (global?: boolean) => void; order?: string; onOrderChange: (order?: string) => void; + hasTypes?: SearchHasType[]; + onHasTypesChange: (hasTypes?: SearchHasType[]) => void; + senders?: string[]; + onSendersChange: (senders?: string[]) => void; }; export function SearchFilters({ defaultRoomsFilterName, @@ -335,7 +595,12 @@ export function SearchFilters({ order, onGlobalChange, onOrderChange, + hasTypes, + onHasTypesChange, + senders, + onSendersChange, }: SearchFiltersProps) { + const senderScope = selectedRooms && selectedRooms.length > 0 ? selectedRooms : roomList; const mx = useMatrixClient(); return ( @@ -345,7 +610,7 @@ export function SearchFilters({ } outlined onClick={() => onGlobalChange()} > @@ -355,7 +620,7 @@ export function SearchFilters({ } outlined onClick={() => onGlobalChange(true)} > @@ -378,8 +643,10 @@ export function SearchFilters({ variant="Success" onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))} radii="Pill" - before={sizedIcon(getRoomIconComponent(room.getType(), room.getJoinRule()), '50')} - after={sizedIcon(X, '50')} + before={ + + } + after={} > {room.name} @@ -393,6 +660,41 @@ export function SearchFilters({ + + + Has: + + + + + From: + + {senders?.map((sender) => ( + { + const next = senders.filter((s) => s !== sender); + onSendersChange(next.length > 0 ? next : undefined); + }} + radii="Pill" + before={} + after={} + > + {mx.getUser(sender)?.displayName ?? sender} + + ))} + + ); } diff --git a/src/app/features/message-search/searchEncryptedRooms.ts b/src/app/features/message-search/searchEncryptedRooms.ts new file mode 100644 index 0000000000..43955dd2be --- /dev/null +++ b/src/app/features/message-search/searchEncryptedRooms.ts @@ -0,0 +1,144 @@ +import { EventType } from '$types/matrix-sdk'; +import type { + IEventWithRoomId, + IResultContext, + MatrixClient, + MatrixEvent, +} from '$types/matrix-sdk'; +import { + HAS_TYPE_TO_MSGTYPE, + SearchHasType, + type ResultGroup, + type ResultItem, +} from './useMessageSearch'; + +/** + * Searches a single room's live timeline for message events that contain + * `term` in their body. Returns a ResultGroup or undefined if no matches. + */ +export function searchRoomTimeline( + room: { roomId: string; getLiveTimeline: () => { getEvents: () => MatrixEvent[] } }, + term: string, + senders?: string[], + hasTypes?: SearchHasType[] +): ResultGroup | undefined { + function toSearchEvent(mEvent: MatrixEvent, roomId: string): IEventWithRoomId { + return { + event_id: mEvent.getId() ?? '', + room_id: roomId, + sender: mEvent.getSender() ?? '', + origin_server_ts: mEvent.getTs(), + content: mEvent.getContent(), + type: mEvent.getType(), + unsigned: mEvent.getUnsigned(), + } as IEventWithRoomId; + } + + function mEventMatchesHasTypes(mEvent: MatrixEvent, hasTypes: SearchHasType[]): boolean { + const content = mEvent.getContent() as { msgtype?: string; body?: string }; + for (const type of hasTypes) { + const msgtype = HAS_TYPE_TO_MSGTYPE[type]; + if (msgtype && content.msgtype === msgtype) return true; + if (type === 'link' && /https?:\/\//i.test(content.body ?? '')) return true; + } + return false; + } + + const events = room.getLiveTimeline().getEvents(); + const items: ResultItem[] = []; + + for (const event of events) { + if (event.getType() !== EventType.RoomMessage) continue; + if (event.isBeingDecrypted() || event.isDecryptionFailure()) continue; + + const sender = event.getSender(); + if (!sender) continue; + if (senders && !senders.includes(sender)) continue; + + if (hasTypes && hasTypes.length > 0 && !mEventMatchesHasTypes(event, hasTypes)) continue; + + if (!event.getId()) continue; + + if (term !== '') { + const body: string = event.getContent().body ?? ''; + if (!body || !body.toLowerCase().includes(term.toLowerCase())) continue; // TODO: fuzzy search? + } + + items.push({ + rank: 1, + event: toSearchEvent(event, room.roomId), + context: { + events_before: [], + events_after: [], + profile_info: {}, + }, + }); + } + + if (items.length === 0) return undefined; + + items.sort((a, b) => b.event.origin_server_ts - a.event.origin_server_ts); + + return { roomId: room.roomId, items }; +} + +/** + * Searches the in-memory live timeline of each listed encrypted room. + * Returns one ResultGroup per room that has at least one match. + */ +export function searchEncryptedRoomsInMemory( + mx: Pick, + term: string, + encryptedRoomIds: string[], + senders?: string[], + hasTypes?: SearchHasType[] +): ResultGroup[] { + const groups: ResultGroup[] = []; + + for (const roomId of encryptedRoomIds) { + const room = mx.getRoom(roomId); + if (!room) continue; + + const group = searchRoomTimeline(room, term, senders, hasTypes); + if (group) groups.push(group); + } + + return groups; +} + +/** + * Splits the user's room filter into encrypted (in-memory) and plaintext (server) buckets. + * + * - When `rooms` is undefined (global search), the server handles plaintext rooms and + * we additionally scan all joined encrypted rooms in memory. + * - When `rooms` is defined, each room is routed to the appropriate search path. + */ +export function partitionRoomsByEncryption( + mx: Pick, + rooms?: string[] +): { encryptedRoomIds: string[]; serverRooms: string[] | undefined; skipServerSearch: boolean } { + let allRooms = mx.getRooms(); + if (rooms === undefined) { + const encryptedRoomIds = allRooms + .filter((r) => r.hasEncryptionStateEvent()) + .map((r) => r.roomId); + return { encryptedRoomIds, serverRooms: undefined, skipServerSearch: false }; + } + + const encryptedRoomIds: string[] = []; + const serverRooms: string[] = []; + + for (const roomId of rooms) { + if (allRooms.find((r) => r.roomId == roomId)?.hasEncryptionStateEvent()) { + encryptedRoomIds.push(roomId); + } else { + serverRooms.push(roomId); + } + } + + return { + encryptedRoomIds, + serverRooms: serverRooms.length > 0 ? serverRooms : undefined, + skipServerSearch: rooms.length > 0 && serverRooms.length === 0, + }; +} diff --git a/src/app/features/message-search/useMessageSearch.ts b/src/app/features/message-search/useMessageSearch.ts index dfe205f691..657ba43d5f 100644 --- a/src/app/features/message-search/useMessageSearch.ts +++ b/src/app/features/message-search/useMessageSearch.ts @@ -8,6 +8,7 @@ import type { } from '$types/matrix-sdk'; import { useCallback } from 'react'; import { useMatrixClient } from '$hooks/useMatrixClient'; +import { searchEncryptedRoomsInMemory, partitionRoomsByEncryption } from './searchEncryptedRooms'; export type ResultItem = { rank: number; @@ -26,6 +27,16 @@ export type SearchResult = { groups: ResultGroup[]; }; +export type SearchHasType = 'image' | 'file' | 'audio' | 'video' | 'link'; + +export const VALID_HAS_TYPES: SearchHasType[] = ['image', 'file', 'audio', 'video', 'link']; +export const HAS_TYPE_TO_MSGTYPE: Partial> = { + image: 'm.image', + file: 'm.file', + audio: 'm.audio', + video: 'm.video', +}; + const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => { const groups: ResultGroup[] = []; @@ -68,10 +79,56 @@ export type MessageSearchParams = { order?: string; rooms?: string[]; senders?: string[]; + hasTypes?: SearchHasType[]; }; export const useMessageSearch = (params: MessageSearchParams) => { const mx = useMatrixClient(); - const { term, order, rooms, senders } = params; + const { term, order, rooms, senders, hasTypes } = params; + + const filterGroupsByHasType = useCallback( + (grps: ResultGroup[]): ResultGroup[] => { + if (!hasTypes || hasTypes.length === 0) return grps; + const withMsgtype = hasTypes.filter((t) => t !== 'link'); + return grps + .map((g) => ({ + ...g, + items: g.items.filter((item) => { + const content = item.event.content; + if ( + withMsgtype.length > 0 && + withMsgtype.some((t) => content.msgtype === HAS_TYPE_TO_MSGTYPE[t]) + ) + return true; + + if (hasTypes.includes('link') && /https?:\/\//i.test(content.body ?? '')) return true; // TODO: maybe regex isn't the best idea + return false; + }), + })) + .filter((g) => g.items.length > 0); + }, + [hasTypes] + ); + + const mergeSearchGroups = ( + serverGroups: ResultGroup[], + inMemoryGroups: ResultGroup[], + order?: string + ): ResultGroup[] => { + if (inMemoryGroups.length === 0) return serverGroups; + if (serverGroups.length === 0) return inMemoryGroups; + + const all = [...serverGroups, ...inMemoryGroups]; + + if (order === 'rank') { + return all; + } + + return all.toSorted((a, b) => { + const aTs = a.items[0]?.event.origin_server_ts ?? 0; + const bTs = b.items[0]?.event.origin_server_ts ?? 0; + return bTs - aTs; + }); + }; const searchMessages = useCallback( async (nextBatch?: string) => { @@ -81,7 +138,25 @@ export const useMessageSearch = (params: MessageSearchParams) => { groups: [], }; const limit = 20; + const isFirstPage = !nextBatch || nextBatch === ''; + + const { encryptedRoomIds, serverRooms, skipServerSearch } = partitionRoomsByEncryption( + mx, + rooms + ); + const inMemoryGroups = + isFirstPage && encryptedRoomIds.length > 0 + ? searchEncryptedRoomsInMemory(mx, term ?? '', encryptedRoomIds, senders, hasTypes) + : []; + + if (skipServerSearch) { + return { + groups: inMemoryGroups, + highlights: [], + }; + } + // TODO: handle search w/o text with IndexedDB (search part 2) const requestBody: ISearchRequestBody = { search_categories: { room_events: { @@ -92,8 +167,8 @@ export const useMessageSearch = (params: MessageSearchParams) => { }, filter: { limit, - rooms, senders, + rooms: serverRooms, }, include_state: false, order_by: order as SearchOrderBy.Recent, @@ -106,9 +181,19 @@ export const useMessageSearch = (params: MessageSearchParams) => { body: requestBody, next_batch: nextBatch === '' ? undefined : nextBatch, }); - return parseSearchResult(r); + + const serverResult = parseSearchResult(r); + const filteredServerResult = { + ...serverResult, + groups: mergeSearchGroups( + filterGroupsByHasType(serverResult.groups), + inMemoryGroups, + order + ), + }; + return filteredServerResult; }, - [mx, term, order, rooms, senders] + [mx, term, order, rooms, senders, hasTypes, filterGroupsByHasType] ); return searchMessages; diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx index 5aec609112..ee8ee486ea 100644 --- a/src/app/features/room/RoomViewHeader.tsx +++ b/src/app/features/room/RoomViewHeader.tsx @@ -62,7 +62,12 @@ import { useIsDirectRoom, useRoom } from '$hooks/useRoom'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { useSpaceOptionally } from '$hooks/useSpace'; -import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '$pages/pathUtils'; +import { + getDirectSearchPath, + getHomeSearchPath, + getSpaceSearchPath, + withSearchParam, +} from '$pages/pathUtils'; import { createLogger } from '$utils/debug'; import { getCanonicalAliasOrRoomId, @@ -562,7 +567,9 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { }; const path = space ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId)) - : getHomeSearchPath(); + : direct + ? getDirectSearchPath() + : getHomeSearchPath(); navigate(withSearchParam(path, searchParams)); }; @@ -681,23 +688,22 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { {(!room.isCallRoom() || chat) && ( <> - {!encryptedRoom && ( - - Search - - } - > - {(triggerRef) => ( - - {composerIcon(MagnifyingGlass)} - - )} - - )} + + Search + + } + > + {(triggerRef) => ( + + {composerIcon(MagnifyingGlass)} + + )} + + Type # for rooms, @ for DMs and * for spaces. Hotkey:{' '} {isMacOS() ? KeySymbol.Command : 'Ctrl'} + k - {' / '} - {isMacOS() ? KeySymbol.Command : 'Ctrl'} + f )} diff --git a/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx b/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx index ff1ea36caa..7fa0e997ef 100644 --- a/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx +++ b/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx @@ -30,7 +30,10 @@ function formatKey(key: string): string { const SHORTCUT_CATEGORIES: ShortcutCategory[] = [ { name: 'General', - shortcuts: [{ keys: 'Ctrl+F / ⌘+F', description: 'Search for messages' }], + shortcuts: [ + { keys: 'Ctrl+F / ⌘+F', description: 'Search for messages in the current room' }, + { keys: 'Ctrl+Shift+F / ⌘+Shift+F', description: 'Search for messages globally' }, + ], }, { name: 'Navigation', diff --git a/src/app/hooks/router/useDirectSelected.ts b/src/app/hooks/router/useDirectSelected.ts index 07605bbe32..2ee8bbdc4f 100644 --- a/src/app/hooks/router/useDirectSelected.ts +++ b/src/app/hooks/router/useDirectSelected.ts @@ -1,5 +1,5 @@ import { useMatch } from 'react-router-dom'; -import { getDirectCreatePath, getDirectPath } from '$pages/pathUtils'; +import { getDirectCreatePath, getDirectPath, getDirectSearchPath } from '$pages/pathUtils'; export const useDirectSelected = (): boolean => { const directMatch = useMatch({ @@ -20,3 +20,13 @@ export const useDirectCreateSelected = (): boolean => { return !!match; }; + +export const useDirectSearchSelected = (): boolean => { + const match = useMatch({ + path: getDirectSearchPath(), + caseSensitive: true, + end: false, + }); + + return !!match; +}; diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx index 2a01c772c6..9853e72825 100644 --- a/src/app/pages/Router.tsx +++ b/src/app/pages/Router.tsx @@ -67,7 +67,7 @@ import { import { ClientBindAtoms, ClientLayout, ClientRoot, ClientRouteOutlet } from './client'; import { HandleNotificationClick, ClientNonUIFeatures } from './client/ClientNonUIFeatures'; import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home'; -import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct'; +import { Direct, DirectCreate, DirectRouteRoomProvider, DirectSearch } from './client/direct'; import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space'; import { Explore, FeaturedRooms, PublicRooms } from './client/explore'; import { Notifications, Inbox, Invites, Bookmarks } from './client/inbox'; @@ -270,6 +270,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) > {mobile ? null : } />} } /> + } /> + + navigate(getDirectSearchPath())}> + + + + {menuIcon(MagnifyingGlass)} + + {!hideText && ( + + + Message Search + + + )} + + + + diff --git a/src/app/pages/client/direct/Search.tsx b/src/app/pages/client/direct/Search.tsx new file mode 100644 index 0000000000..bc6eb46205 --- /dev/null +++ b/src/app/pages/client/direct/Search.tsx @@ -0,0 +1,54 @@ +import { useRef } from 'react'; +import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds'; +import { Page, PageContent, PageContentCenter, PageHeader } from '$components/page'; +import { MessageSearch } from '$features/message-search'; +import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; +import { BackRouteHandler } from '$components/BackRouteHandler'; +import { useDirectRooms } from './useDirectRooms'; + +export function DirectSearch() { + const scrollRef = useRef(null); + const rooms = useDirectRooms(); + const screenSize = useScreenSizeContext(); + + return ( + + + + + {screenSize === ScreenSize.Mobile && ( + + {(onBack) => ( + + + + )} + + )} + + + {screenSize !== ScreenSize.Mobile && } + + Message Search + + + + + + + + + + + + + + + + ); +} diff --git a/src/app/pages/client/direct/index.ts b/src/app/pages/client/direct/index.ts index d247bbc03a..770aa28f28 100644 --- a/src/app/pages/client/direct/index.ts +++ b/src/app/pages/client/direct/index.ts @@ -1,3 +1,4 @@ export * from './Direct'; export * from './RoomProvider'; export * from './DirectCreate'; +export * from './Search'; diff --git a/src/app/pages/pathUtils.ts b/src/app/pages/pathUtils.ts index 8df6b14ace..a33ed0ae90 100644 --- a/src/app/pages/pathUtils.ts +++ b/src/app/pages/pathUtils.ts @@ -29,6 +29,7 @@ import { SPACE_SEARCH_PATH, CREATE_PATH, INBOX_BOOKMARKS_PATH, + DIRECT_SEARCH_PATH, } from './paths'; export const joinPathComponent = (path: Path): string => path.pathname + path.search + path.hash; @@ -103,6 +104,7 @@ export const getHomeRoomPath = (roomIdOrAlias: string, eventId?: string): string export const getDirectPath = (): string => DIRECT_PATH; export const getDirectCreatePath = (): string => DIRECT_CREATE_PATH; +export const getDirectSearchPath = (): string => DIRECT_SEARCH_PATH; export const getDirectRoomPath = (roomIdOrAlias: string, eventId?: string): string => { const params = { roomIdOrAlias: encodeURIComponent(roomIdOrAlias), diff --git a/src/app/pages/paths.ts b/src/app/pages/paths.ts index 2770cd3ee5..e5da05ba48 100644 --- a/src/app/pages/paths.ts +++ b/src/app/pages/paths.ts @@ -38,6 +38,7 @@ export type SearchPathSearchParams = { order?: string; rooms?: string; senders?: string; + has?: string; }; export const SEARCH_PATH_SEGMENT = 'search/'; @@ -59,6 +60,7 @@ export type DirectCreateSearchParams = { }; export const DIRECT_CREATE_PATH = `/direct/${CREATE_PATH_SEGMENT}`; export const DIRECT_ROOM_PATH = `/direct/${ROOM_PATH_SEGMENT}`; +export const DIRECT_SEARCH_PATH = `/direct/${SEARCH_PATH_SEGMENT}`; export const SPACE_PATH = '/:spaceIdOrAlias/'; export const SPACE_LOBBY_PATH = `/:spaceIdOrAlias/${LOBBY_PATH_SEGMENT}`; diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 6d201f34a3..5ecffb0671 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -23,11 +23,13 @@ import { MsgType, KnownMembership, RoomType, + JoinRule, } from '$types/matrix-sdk'; import type { IRoomCreateContent, RoomToParents, UnreadInfo } from '$types/matrix/room'; import { NotificationType } from '$types/matrix/room'; import * as Sentry from '@sentry/react'; +import { IconName, IconSrc } from 'folds'; export const getStateEvent = ( room: Room, @@ -510,6 +512,46 @@ export const getUnreadInfos = (mx: MatrixClient, options?: UnreadInfoOptions): U return unreadInfos; }; +export const getRoomIconSrc = ( + icons: Record, + roomType?: string, + joinRule?: JoinRule +): IconSrc => { + if (roomType === RoomType.Space) { + if (joinRule === JoinRule.Public) return icons.SpaceGlobe; + if ( + joinRule === JoinRule.Invite || + joinRule === JoinRule.Knock || + joinRule === JoinRule.Private + ) { + return icons.SpaceLock; + } + return icons.Space; + } + + if (roomType === RoomType.UnstableCall) { + if (joinRule === JoinRule.Public) return icons.VolumeHighGlobe; + if ( + joinRule === JoinRule.Invite || + joinRule === JoinRule.Knock || + joinRule === JoinRule.Private + ) { + return icons.VolumeHighLock; + } + return icons.VolumeHigh; + } + + if (joinRule === JoinRule.Public) return icons.HashGlobe; + if ( + joinRule === JoinRule.Invite || + joinRule === JoinRule.Knock || + joinRule === JoinRule.Private + ) { + return icons.HashLock; + } + return icons.Hash; +}; + export const getRoomAvatarUrl = ( mx: MatrixClient, room: Room, From 205432e5dee5b003e5d6bd7aea2961d3f4b0c044 Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Sat, 27 Jun 2026 19:26:41 +0000 Subject: [PATCH 2/7] IndexedDB local search --- flake.nix | 2 +- package.json | 1 + pnpm-lock.yaml | 22 + src/app/components/SearchIndexProvider.tsx | 593 ++++++++++++++++++ .../message-search/useMessageSearch.ts | 142 ++++- .../settings/developer-tools/DevelopTools.tsx | 6 + .../developer-tools/SearchIndexCache.tsx | 122 ++++ .../settings/experimental/Experimental.tsx | 2 + .../settings/experimental/SearchIDB.tsx | 42 ++ src/app/features/settings/settingsLink.ts | 1 + src/app/hooks/useSearchIndex.ts | 27 + src/app/pages/client/ClientNonUIFeatures.tsx | 5 +- src/app/plugins/search-indexer/index.ts | 334 ++++++++++ src/app/plugins/search-indexer/types.ts | 112 ++++ src/app/state/settings.ts | 2 + 15 files changed, 1390 insertions(+), 23 deletions(-) create mode 100644 src/app/components/SearchIndexProvider.tsx create mode 100644 src/app/features/settings/developer-tools/SearchIndexCache.tsx create mode 100644 src/app/features/settings/experimental/SearchIDB.tsx create mode 100644 src/app/hooks/useSearchIndex.ts create mode 100644 src/app/plugins/search-indexer/index.ts create mode 100644 src/app/plugins/search-indexer/types.ts diff --git a/flake.nix b/flake.nix index 1d5d2a6bd9..c8ef7fa74e 100644 --- a/flake.nix +++ b/flake.nix @@ -61,7 +61,7 @@ ; pname = "sable"; fetcherVersion = 3; - hash = "sha256-b6+j893Ltg2880YVOIwPnSH3diJdNZdmhZSwsMnJKtU="; + hash = "sha256-WIZM9ZHMtBIVEy6q1vP6WvOtnfW7V/Dokb7wUR8TKWc="; }; mkPnpmCheck = diff --git a/package.json b/package.json index 022b97b4a0..eeb4d5ced6 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "emojibase-data": "^17.0.0", "eventemitter3": "^5.0.4", "file-saver": "^2.0.5", + "flexsearch": "0.8.212", "focus-trap-react": "^12.0.3", "folds": "^2.6.2", "framer-motion": "^12.42.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e23aea298a..37bfe68138 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,6 +98,9 @@ importers: file-saver: specifier: ^2.0.5 version: 2.0.5 + flexsearch: + specifier: 0.8.212 + version: 0.8.212 focus-trap-react: specifier: ^12.0.3 version: 12.0.3(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -3482,8 +3485,19 @@ packages: flatted@3.4.2: resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==} +<<<<<<< HEAD focus-trap-react@12.0.3: resolution: {integrity: sha512-4eXtzhRTtFrxle9Tkl0Wkj8SFJnWz3i3yb5e53Mdn4E8XZQ/Lzqom9U4uUAJ8wd7yDmyGVP96dxwQZXLXd4sbg==} +||||||| parent of 98f7ba0e (IndexedDB local search) + focus-trap-react@10.3.1: + resolution: {integrity: sha512-PN4Ya9xf9nyj/Nd9VxBNMuD7IrlRbmaG6POAQ8VLqgtc6IY/Ln1tYakow+UIq4fihYYYFM70/2oyidE6bbiPgw==} +======= + flexsearch@0.8.212: + resolution: {integrity: sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==} + + focus-trap-react@10.3.1: + resolution: {integrity: sha512-PN4Ya9xf9nyj/Nd9VxBNMuD7IrlRbmaG6POAQ8VLqgtc6IY/Ln1tYakow+UIq4fihYYYFM70/2oyidE6bbiPgw==} +>>>>>>> 98f7ba0e (IndexedDB local search) peerDependencies: '@types/react': ^18.0.0 || ^19.0.0 '@types/react-dom': ^18.0.0 || ^19.0.0 @@ -8131,7 +8145,15 @@ snapshots: flatted@3.4.2: {} +<<<<<<< HEAD focus-trap-react@12.0.3(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): +||||||| parent of 98f7ba0e (IndexedDB local search) + focus-trap-react@10.3.1(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): +======= + flexsearch@0.8.212: {} + + focus-trap-react@10.3.1(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): +>>>>>>> 98f7ba0e (IndexedDB local search) dependencies: '@types/react': 18.3.31 '@types/react-dom': 18.3.7(@types/react@18.3.31) diff --git a/src/app/components/SearchIndexProvider.tsx b/src/app/components/SearchIndexProvider.tsx new file mode 100644 index 0000000000..4cd971fcc7 --- /dev/null +++ b/src/app/components/SearchIndexProvider.tsx @@ -0,0 +1,593 @@ +import { useMatrixClient } from '$hooks/useMatrixClient'; +import { + SearchIndexContext, + SearchIndexContextType, + SearchIndexState, +} from '$hooks/useSearchIndex'; +import { + SearchIndexEvent, + IndexWorkerMessageIn, + WorkerMessageTypeIn, + IndexWorkerMessageOut, + WorkerMessageTypeOut, + BackfillState, +} from '$plugins/search-indexer/types'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; +import { + MatrixEvent, + EventType, + MatrixEventEvent, + Room, + EventTimelineSet, + Direction, + ClientEvent, + RoomEvent, + SyncState, +} from 'matrix-js-sdk'; +import { ReactNode, useState, useRef, useCallback, useMemo, useEffect } from 'react'; +import * as Sentry from '@sentry/react'; +import CreateSearchWorker from '$plugins/search-indexer/index.ts?worker'; +import { is } from 'immer/dist/internal.js'; + +const BACKFILL_PAGE_SIZE = 50; +const HAS_IDLE_CALLBACK = typeof requestIdleCallback === 'function'; +let IDLE_CALLBACK_COUNT = 0; +const MAX_CONCURRENT_BACKFILLS = HAS_IDLE_CALLBACK ? Infinity : 2; +const BACKFILL_STARTUP_DELAY_MS = 30_000; + +const canRunMobileBackfill = (): boolean => + HAS_IDLE_CALLBACK || (document.visibilityState === 'visible' && document.hasFocus()); + +function scheduleIdle(cb: () => void): () => void { + if (HAS_IDLE_CALLBACK) { + IDLE_CALLBACK_COUNT += 1; + const id = requestIdleCallback(cb, { timeout: 5000 }); + return () => cancelIdleCallback(id); + } + + const id = setTimeout(cb, 500); + return () => clearTimeout(id); +} + +const MEDIA_MSGTYPES = ['m.image', 'm.file', 'm.audio', 'm.video']; + +function toSearchIndexEvent(event: MatrixEvent, replaced: boolean = false): SearchIndexEvent | null { + const eventId = event.getId(); + if (!eventId) return null; + + const roomId = event.getRoomId(); + if (!roomId) return null; + + if (event.getType() !== EventType.RoomMessage) return null; + if (event.isRedacted()) return null; + + const content = event.getContent(); + + const body: string = (replaced ? event.getContent()["m.new_content"]?.body : content.body) ?? ''; + if (!body.trim()) return null; + + const sender = event.getSender(); + if (!sender) return null; + + const msgtype = content.msgtype ?? 'm.text'; + const ts = event.getTs(); + const hasLink = /https?:\/\//i.test(body) + + const searchIndexEvent: SearchIndexEvent = { eventId, roomId, sender, msgtype, body, ts, hasLink }; + + if (MEDIA_MSGTYPES.includes(msgtype)) { + if (content.url !== undefined) searchIndexEvent.url = content.url; + if (content.file !== undefined) searchIndexEvent.file = content.file; + if (content.info !== undefined) searchIndexEvent.info = content.info; + if (content.filename !== undefined) searchIndexEvent.filename = content.filename; + } + return searchIndexEvent; +} + +type PendingStats = { + resolve: (stats: SearchIndexState) => void; + backfillingRoomCount: number; +}; +type PendingQuery = { + resolve: (events: SearchIndexEvent[]) => void; + reject: (err: unknown) => void; +}; + +export function SearchIndexProvider({ children }: { children: ReactNode }) { + const mx = useMatrixClient(); + const [idbSearchIndex] = useSetting(settingsAtom, 'idbSearchIndex'); + + const [isReady, setIsReady] = useState(false); + const [isBackfilling, setIsBackfilling] = useState(false); + + const workerRef = useRef(null); + const pendingStatsRef = useRef(null); + const pendingQueriesRef = useRef>(new Map()); + + const postToWorker = useCallback((msg: IndexWorkerMessageIn) => { + workerRef.current?.postMessage(msg); + }, []); + + const headlessSetsRef = useRef>(new Map()); + const cancelIdlesRef = useRef void>>([]); + const syncStateRef = useRef(null); + + const backfillQueueRef = useRef>([]); + const backfillStatesRef = useRef>({}); + const backfillingRoomsRef = useRef>(new Set()); // TODO: I dont like this + const backfillStartDelayRef = useRef | null>(null); + const backfillReadyRef = useRef(false); + + const indexEvent = useCallback( + (event: MatrixEvent) => { + const handleEvent = () => { + const searchEvent = toSearchIndexEvent(event); + if (searchEvent) + postToWorker({ + type: WorkerMessageTypeIn.Index, + events: [searchEvent], + }); + }; + + if (event.getType() === 'm.room.encrypted') { + event.once(MatrixEventEvent.Decrypted, handleEvent); + } + else if (event.isSending()) { + event.once(MatrixEventEvent.LocalEventIdReplaced, handleEvent) + } + else { + handleEvent(); + } + }, + [postToWorker] + ); + + const backfillRoom = useCallback(async (room: Room, state: BackfillState) => { + if (state.done) return; + + if (!canRunMobileBackfill()) { + backfillingRoomsRef.current.delete(room.roomId); + backfillQueueRef.current.unshift({ room, state }); + Sentry.addBreadcrumb({ + category: 'search.backfill', + message: `Backfill deferred for room ${room.roomId}`, + data: { + reason: 'mobile_not_focused', + isMobile: !HAS_IDLE_CALLBACK, + visibilityState: document.visibilityState, + focused: document.hasFocus(), + }, + level: 'info', + }); + return; + } + + let headlessSet = headlessSetsRef.current.get(room.roomId); + if (!headlessSet) { + headlessSet = new EventTimelineSet(room, {}); + headlessSetsRef.current.set(room.roomId, headlessSet); + } + const headlessTimeline = headlessSet.getLiveTimeline(); + + const seedToken = state.token ?? room.getLiveTimeline().getPaginationToken(Direction.Backward); + if (!seedToken) { + postToWorker({ + type: WorkerMessageTypeIn.SetBackfillState, + roomId: room.roomId, + state: { ...state, done: true }, + }); + backfillingRoomsRef.current.delete(room.roomId); + return; + } + + headlessTimeline.setPaginationToken(seedToken, Direction.Backward); + + const prevEventCount = headlessTimeline.getEvents().length; + + let hasMore = false; + try { + hasMore = await mx.paginateEventTimeline(headlessTimeline, { + backwards: true, + limit: BACKFILL_PAGE_SIZE, + }); + } catch { + backfillingRoomsRef.current.delete(room.roomId); + } + + const allEvents = headlessTimeline.getEvents(); + const newEvents = allEvents.slice(0, allEvents.length - prevEventCount); + + const recoveryFrontier = state.token === null ? state.oldestTs : undefined; + const unindexedEvents = + recoveryFrontier !== undefined + ? newEvents.filter((ev) => ev.getTs() < recoveryFrontier) + : newEvents; + + const events: SearchIndexEvent[] = []; + for (const ev of unindexedEvents) { + try { + const relatesTo = ev.getContent()?.['m.relates_to']; + if (relatesTo?.rel_type === 'm.thread' || ev.isRedacted()) { + continue; + } + + if (ev.getType() === 'm.room.encrypted') { + indexEvent(ev); + } else { + const indexable = toSearchIndexEvent(ev); + if (indexable) events.push(indexable); + } + } catch (e) { + continue; + } + } + + if (events.length > 0) { + postToWorker({ type: WorkerMessageTypeIn.Index, events }); + } + + const nextToken = headlessTimeline.getPaginationToken(Direction.Backward); + const done = !hasMore && !nextToken; + + // Track the oldest event timestamp we've indexed so far. Only update when + // we actually processed new events (unindexedEvents may be empty on the + // first page of expired-token recovery while fast-forwarding the frontier). + const minTsThisPage = + unindexedEvents.length > 0 ? Math.min(...unindexedEvents.map((e) => e.getTs())) : undefined; + const newOldestTs = + minTsThisPage !== undefined + ? Math.min(state.oldestTs ?? Infinity, minTsThisPage) + : state.oldestTs; + + postToWorker({ + type: WorkerMessageTypeIn.SetBackfillState, + roomId: room.roomId, + state: { + token: nextToken, + done, + indexedCount: state.indexedCount + events.length, + oldestTs: newOldestTs, + }, + }); + + if (!done) { + // Schedule next page — but yield to the main sync if it's struggling. + // resumeBackfill will restart this room once sync recovers. + const nextState: BackfillState = { + token: nextToken, + done: false, + indexedCount: state.indexedCount + events.length, + oldestTs: newOldestTs, + }; + const cancel = scheduleIdle(() => { + const s = syncStateRef.current; + if (s !== SyncState.Syncing && s !== SyncState.Prepared && s !== SyncState.Catchup) { + backfillingRoomsRef.current.delete(room.roomId); + backfillQueueRef.current.unshift({ room, state: nextState }); + Sentry.addBreadcrumb({ + category: 'search.backfill', + message: `Backfill deferred for room ${room.roomId}`, + data: { reason: 'sync_not_healthy', syncState: s }, + level: 'info', + }); + return; + } + + if (!canRunMobileBackfill()) { + backfillingRoomsRef.current.delete(room.roomId); + backfillQueueRef.current.unshift({ room, state: nextState }); + Sentry.addBreadcrumb({ + category: 'search.backfill', + message: `Backfill deferred for room ${room.roomId}`, + data: { + reason: 'mobile_not_focused', + isMobile: !HAS_IDLE_CALLBACK, + visibilityState: document.visibilityState, + focused: document.hasFocus(), + }, + level: 'info', + }); + return; + } + void backfillRoom(room, nextState); + }); + cancelIdlesRef.current.push(cancel); + } else { + backfillingRoomsRef.current.delete(room.roomId); + // Dequeue the next room from the concurrency queue while under the limit + while ( + backfillingRoomsRef.current.size < MAX_CONCURRENT_BACKFILLS && + backfillQueueRef.current.length > 0 + ) { + const next = backfillQueueRef.current.shift()!; + backfillingRoomsRef.current.add(next.room.roomId); + const cancel = scheduleIdle(() => void backfillRoom(next.room, next.state)); + cancelIdlesRef.current.push(cancel); + } + if (backfillingRoomsRef.current.size === 0 && backfillQueueRef.current.length === 0) { + setIsBackfilling(false); + } + } + }, []); + + const resumeBackfill = useCallback(() => { + if (!backfillReadyRef.current) return; + const s = syncStateRef.current; + if (s !== SyncState.Syncing && s !== SyncState.Prepared && s !== SyncState.Catchup) return; + if (!canRunMobileBackfill()) return; + + while ( + backfillingRoomsRef.current.size < MAX_CONCURRENT_BACKFILLS && + backfillQueueRef.current.length > 0 + ) { + const next = backfillQueueRef.current.shift()!; + backfillingRoomsRef.current.add(next.room.roomId); + const cancel = scheduleIdle(() => void backfillRoom(next.room, next.state)); + cancelIdlesRef.current.push(cancel); + } + }, [backfillRoom]); + + const startBackfill = useCallback( + (backfillStates: Record) => { + backfillStatesRef.current = backfillStates; + const rooms = mx.getRooms().filter((r) => !r.isSpaceRoom()); + for (const room of rooms) { + const state = backfillStates[room.roomId] ?? { + token: null, + done: false, + indexedCount: 0, + }; + if (state.done) continue; + if (backfillingRoomsRef.current.has(room.roomId)) continue; + if (backfillQueueRef.current.some((e) => e.room.roomId === room.roomId)) continue; + + backfillQueueRef.current.push({ room, state }); + } + + if (backfillQueueRef.current.length > 0 || backfillingRoomsRef.current.size > 0) { + setIsBackfilling(true); + } + + backfillStartDelayRef.current = setTimeout(() => { + backfillStartDelayRef.current = null; + backfillReadyRef.current = true; + resumeBackfill(); + }, BACKFILL_STARTUP_DELAY_MS); + }, + [mx, resumeBackfill] + ); + + const handleWorkerMessage = useCallback((event: MessageEvent) => { + const msg = event.data; + + switch (msg.type) { + case WorkerMessageTypeOut.Ready: + setIsReady(true); + postToWorker({ type: WorkerMessageTypeIn.GetBackfillStates }); + break; + case WorkerMessageTypeOut.State: + const pending = pendingStatsRef.current; + if (pending) { + pendingStatsRef.current = null; + pending.resolve({ + indexedEventsCount: msg.indexedEventCount, + roomCount: msg.roomCount, + backfillingRoomCount: pending.backfillingRoomCount, + }); + } + break; + case WorkerMessageTypeOut.QueryResult: + const pendingQuery = pendingQueriesRef.current.get(msg.id); + if (pendingQuery) { + pendingQueriesRef.current.delete(msg.id); + pendingQuery.resolve(msg.events); + } + break; + case WorkerMessageTypeOut.BackfillStatesDone: + startBackfill(msg.states); + break; + } + }, []); + + useEffect(() => { + if (!idbSearchIndex) { + setIsReady(false); + return () => {}; + } + let worker: Worker; + try { + Sentry.addBreadcrumb({ + category: 'search.index', + message: 'Initializing search worker', + level: 'info', + }); + worker = new CreateSearchWorker(); + } catch (e) { + console.error('Error!'); + return () => {}; + } + + const userId = mx.getUserId(); + if (!userId) return () => {}; + + Sentry.addBreadcrumb({ + category: 'search.index', + message: 'Initializing search worker', + level: 'info', + data: { userId }, + }); + + workerRef.current = worker; + worker.addEventListener('message', handleWorkerMessage); + + Sentry.addBreadcrumb({ + category: 'search.index', + message: 'INIT sent to worker', + level: 'info', + data: { userId }, + }); + + postToWorker({ + type: WorkerMessageTypeIn.Init, + userId, + }); + + const handleSync = (state: SyncState) => { + syncStateRef.current = state; + if ( + state === SyncState.Syncing + ) { + resumeBackfill(); + } + }; + mx.on(ClientEvent.Sync, handleSync as unknown as (...args: unknown[]) => void); + + const handleTimeline = (mEvent: MatrixEvent, room: Room | undefined) => { + const relation = mEvent.getRelation(); + + if (relation && relation.rel_type === "m.replace") { + const targetEventId = relation.event_id; + if (!targetEventId) return; + const searchEvent = toSearchIndexEvent(mEvent, true); + if (!searchEvent) return; + + postToWorker({ + type: WorkerMessageTypeIn.EditEvents, + events: { + [targetEventId]: searchEvent + } + }) + return; + } + + if (!room) return; + indexEvent(mEvent); + }; + mx.on(RoomEvent.Timeline, handleTimeline); + + const handleRedaction = (mEvent: MatrixEvent) => { + if (mEvent.getType() !== EventType.RoomRedaction) return; + let eventId = mEvent.event.redacts; + if (!eventId) return; + + postToWorker({ + type: WorkerMessageTypeIn.RedactEvents, + eventIds: [eventId] + }) + }; + mx.on(RoomEvent.Redaction, handleRedaction); + + const handleRoomAdded = (room: Room) => { + if (room.isSpaceRoom()) return; + if (backfillingRoomsRef.current.has(room.roomId)) return; + if (backfillQueueRef.current.some((e) => e.room.roomId === room.roomId)) return; + const state = backfillStatesRef.current[room.roomId] ?? { + token: null, + done: false, + indexedCount: 0, + }; + if (state.done) return; + backfillQueueRef.current.push({ room, state }); + setIsBackfilling(true); + resumeBackfill(); + }; + mx.on(ClientEvent.Room, handleRoomAdded); + + const handleForegroundFocus = () => { + if (canRunMobileBackfill()) { + resumeBackfill(); + } + }; + if (!HAS_IDLE_CALLBACK) { + document.addEventListener('visibilitychange', handleForegroundFocus); + window.addEventListener('focus', handleForegroundFocus); + window.addEventListener('pageshow', handleForegroundFocus); + } + +const handleOnBeforeUnload = () => { + postToWorker({ type: WorkerMessageTypeIn.Flush }); + + worker.addEventListener( + 'message', + (ev: MessageEvent) => { + if (ev.data.type === WorkerMessageTypeOut.FlushDone) { + worker.removeEventListener('message', handleWorkerMessage); + worker.terminate(); + workerRef.current = null; + } + }, + { once: true } + ); +} + + window.addEventListener('beforeunload', handleOnBeforeUnload); + + return () => { + mx.removeListener(ClientEvent.Sync, handleSync); + mx.removeListener( + RoomEvent.Timeline, + handleTimeline + ); + mx.removeListener( + ClientEvent.Room, + handleRoomAdded + ); + mx.removeListener(RoomEvent.Redaction, handleRedaction) + worker.removeEventListener('message', handleWorkerMessage); + // worker.removeEventListener('error', handleWorkerError); + window.removeEventListener('beforeunload', handleOnBeforeUnload); + + setIsReady(false); + setIsBackfilling(false); + }; + }, [idbSearchIndex, mx, handleWorkerMessage, indexEvent, postToWorker]); + + const query = useCallback( + ( + term: string, + opts?: { roomIds?: string[]; senders?: string[]; hasTypes?: string[] } + ): Promise => { + if (!workerRef.current || !isReady) return Promise.resolve([]); + const id = crypto.randomUUID(); + return new Promise((resolve, reject) => { + pendingQueriesRef.current.set(id, { resolve, reject }); + postToWorker({ + type: WorkerMessageTypeIn.Query, + id, + term, + roomIds: opts?.roomIds, + senders: opts?.senders, + hasTypes: opts?.hasTypes, + }); + }); + }, + [isReady, postToWorker] + ); + + const state = useCallback((): Promise => { + if (!workerRef.current || !isReady) { + return Promise.resolve({ + indexedEventsCount: 0, + roomCount: 0, + backfillingRoomCount: 0, + }); + } + return new Promise((resolve) => { + pendingStatsRef.current = { + backfillingRoomCount: backfillingRoomsRef.current.size, + resolve, + }; + postToWorker({ type: WorkerMessageTypeIn.State }); + }); + }, [isReady, postToWorker]); + + const clearIndex = () => {}; + + const ctx = useMemo( + () => ({ query, state, clearIndex, isBackfilling, ready: isReady }), + [query, state, clearIndex, isReady, isBackfilling] + ); + + return {children}; +} diff --git a/src/app/features/message-search/useMessageSearch.ts b/src/app/features/message-search/useMessageSearch.ts index 657ba43d5f..bab2c600e2 100644 --- a/src/app/features/message-search/useMessageSearch.ts +++ b/src/app/features/message-search/useMessageSearch.ts @@ -4,11 +4,91 @@ import type { ISearchRequestBody, ISearchResponse, ISearchResult, + MatrixClient, + MatrixEvent, SearchOrderBy, } from '$types/matrix-sdk'; import { useCallback } from 'react'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { searchEncryptedRoomsInMemory, partitionRoomsByEncryption } from './searchEncryptedRooms'; +import { useSearchIndex } from '$hooks/useSearchIndex'; +import { useAtomValue } from 'jotai'; +import { settingsAtom } from '$state/settings'; +import { SearchIndexEvent } from '$plugins/search-indexer/types'; + +export function toSearchEvent(mEvent: MatrixEvent, roomId: string): IEventWithRoomId { + return { + event_id: mEvent.getId() ?? '', + room_id: roomId, + sender: mEvent.getSender() ?? '', + origin_server_ts: mEvent.getTs(), + content: mEvent.getContent(), // decrypted content for e2ee events + type: mEvent.getType(), // decrypted event type (e.g. m.room.message, not m.room.encrypted) + unsigned: mEvent.getUnsigned(), + } as IEventWithRoomId; +} + +function idbEventsToGroups( + mx: MatrixClient, + events: SearchIndexEvent[], + order?: string +): ResultGroup[] { + const byRoom = new Map(); + for (const ev of events) { + const liveEvent = mx.getRoom(ev.roomId)?.findEventById(ev.eventId); + const eventData: IEventWithRoomId = liveEvent + ? toSearchEvent(liveEvent, ev.roomId) + : ({ + event_id: ev.eventId, + room_id: ev.roomId, + sender: ev.sender, + origin_server_ts: ev.ts, + content: { + msgtype: ev.msgtype, + body: ev.body, + ...(ev.url !== undefined && { url: ev.url }), + ...(ev.file !== undefined && { file: ev.file }), + ...(ev.info !== undefined && { info: ev.info }), + ...(ev.filename !== undefined && { filename: ev.filename }), + }, + type: 'm.room.message', + unsigned: {}, + } as IEventWithRoomId); + const item: ResultItem = { + rank: 1, + event: eventData, + context: { + events_before: [], + events_after: [], + profile_info: {}, + }, + }; + const arr = byRoom.get(ev.roomId) ?? []; + arr.push(item); + byRoom.set(ev.roomId, arr); + } + + const groups = Array.from(byRoom.entries()).map(([roomId, items]) => ({ + roomId, + // Sort items newest-first so items[0] is always the most recent — required + // for mergeSearchGroups' timestamp comparisons to be correct. + items: + order !== 'rank' + ? items.toSorted( + (a, b) => (b.event.origin_server_ts ?? 0) - (a.event.origin_server_ts ?? 0) + ) + : items, + })); + + // Sort groups newest-first so single-source fast-paths in mergeSearchGroups + // (which return the array unchanged) still produce correct recent order. + return order !== 'rank' + ? groups.toSorted( + (a, b) => + (b.items[0]?.event.origin_server_ts ?? 0) - (a.items[0]?.event.origin_server_ts ?? 0) + ) + : groups; +} export type ResultItem = { rank: number; @@ -30,7 +110,7 @@ export type SearchResult = { export type SearchHasType = 'image' | 'file' | 'audio' | 'video' | 'link'; export const VALID_HAS_TYPES: SearchHasType[] = ['image', 'file', 'audio', 'video', 'link']; -export const HAS_TYPE_TO_MSGTYPE: Partial> = { +export const HAS_TYPE_TO_MSGTYPE: Record = { image: 'm.image', file: 'm.file', audio: 'm.audio', @@ -83,6 +163,9 @@ export type MessageSearchParams = { }; export const useMessageSearch = (params: MessageSearchParams) => { const mx = useMatrixClient(); + const searchIndex = useSearchIndex(); + const settings = useAtomValue(settingsAtom); + const { term, order, rooms, senders, hasTypes } = params; const filterGroupsByHasType = useCallback( @@ -132,31 +215,55 @@ export const useMessageSearch = (params: MessageSearchParams) => { const searchMessages = useCallback( async (nextBatch?: string) => { - if (!term) + const idbSearchAvailable = + settings.idbSearchIndex && !!searchIndex?.ready; + const hasHasTypes = hasTypes && hasTypes.length > 0; + if (!(term || (idbSearchAvailable && hasHasTypes))) return { highlights: [], groups: [], }; - const limit = 20; + const isFirstPage = !nextBatch || nextBatch === ''; - const { encryptedRoomIds, serverRooms, skipServerSearch } = partitionRoomsByEncryption( - mx, - rooms - ); - const inMemoryGroups = - isFirstPage && encryptedRoomIds.length > 0 - ? searchEncryptedRoomsInMemory(mx, term ?? '', encryptedRoomIds, senders, hasTypes) - : []; + if (idbSearchAvailable) { + const idbEvents = await searchIndex.query(term ?? '', { + roomIds: rooms ?? [], + senders, + hasTypes: hasHasTypes ? hasTypes : undefined, + }); + + let foundGroups = idbEventsToGroups(mx, idbEvents, order); + return { + highlights: [], + groups: foundGroups, + }; + } + + const { encryptedRoomIds, serverRooms } = partitionRoomsByEncryption(mx, rooms); + let skipServerSearch = !!!serverRooms; + + let foundGroups: ResultGroup[] = []; + + if (isFirstPage && (rooms ?? []).length > 0) { + if (term || hasHasTypes) { + foundGroups = searchEncryptedRoomsInMemory( + mx, + term ?? '', + encryptedRoomIds, + senders, + hasTypes + ); + } + } if (skipServerSearch) { return { - groups: inMemoryGroups, + groups: foundGroups, highlights: [], }; } - // TODO: handle search w/o text with IndexedDB (search part 2) const requestBody: ISearchRequestBody = { search_categories: { room_events: { @@ -166,13 +273,12 @@ export const useMessageSearch = (params: MessageSearchParams) => { include_profile: false, }, filter: { - limit, senders, rooms: serverRooms, }, include_state: false, order_by: order as SearchOrderBy.Recent, - search_term: term, + search_term: term ?? '', }, }, }; @@ -185,11 +291,7 @@ export const useMessageSearch = (params: MessageSearchParams) => { const serverResult = parseSearchResult(r); const filteredServerResult = { ...serverResult, - groups: mergeSearchGroups( - filterGroupsByHasType(serverResult.groups), - inMemoryGroups, - order - ), + groups: mergeSearchGroups(foundGroups, serverResult.groups), }; return filteredServerResult; }, diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index 100119726d..ef71a18a85 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -15,6 +15,7 @@ import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; import { DebugLogViewer } from './DebugLogViewer'; import { SentrySettings } from './SentrySettings'; +import { SearchIndexCache } from './SearchIndexCache'; type DeveloperToolsProps = { requestBack?: () => void; @@ -127,6 +128,11 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} + {developerTools && ( + + + + )} diff --git a/src/app/features/settings/developer-tools/SearchIndexCache.tsx b/src/app/features/settings/developer-tools/SearchIndexCache.tsx new file mode 100644 index 0000000000..af83d13314 --- /dev/null +++ b/src/app/features/settings/developer-tools/SearchIndexCache.tsx @@ -0,0 +1,122 @@ +import { useCallback, useEffect, useState } from 'react'; +import { Box, Button, Text } from 'folds'; +import { SequenceCard } from '$components/sequence-card'; +import { SettingTile } from '$components/setting-tile'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; +import { useSearchIndex } from '$hooks/useSearchIndex'; +import type { SearchIndexState } from '$hooks/useSearchIndex'; +import { SequenceCardStyle } from '$features/settings/styles.css'; + +const LIMIT_OPTIONS: Array<{ label: string; value: number }> = [ + { label: '500 messages', value: 500 }, + { label: '1,000 messages', value: 1000 }, + { label: '2,000 messages (default)', value: 2000 }, + { label: '5,000 messages', value: 5000 }, + { label: 'Unlimited', value: Number.MAX_SAFE_INTEGER }, +]; + +function formatBytes(bytes: number): string { + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; + return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; +} + +export function SearchIndexCache() { + const [idbSearchIndex] = useSetting(settingsAtom, 'idbSearchIndex'); + // const [searchIndexMessageLimit, setSearchIndexMessageLimit] = useSetting( + // settingsAtom, + // 'searchIndexMessageLimit' + // ); + const searchIndex = useSearchIndex(); + + const [stats, setStats] = useState(null); + const [clearing, setClearing] = useState(false); + + const refreshStats = useCallback(async () => { + if (!searchIndex?.ready) return; + const s = await searchIndex.state(); + setStats(s); + }, [searchIndex]); + + useEffect(() => { + void refreshStats(); + const id = window.setInterval(() => void refreshStats(), 5000); + return () => window.clearInterval(id); + }, [refreshStats]); + + const handleClear = useCallback(async () => { + if (!searchIndex) return; + setClearing(true); + await searchIndex.clearIndex(); + setStats(null); + setClearing(false); + }, [searchIndex]); + + if (!idbSearchIndex) return null; + + return ( + + Message Search Index + + + {searchIndex?.isBackfilling && ( + + )} + {/* setSearchIndexMessageLimit(Number(e.target.value))} + style={{ padding: '4px 8px', borderRadius: '4px' }} + > + {LIMIT_OPTIONS.map((opt) => ( + + ))} + + } + /> */} + void handleClear()} + variant="Secondary" + fill="Soft" + size="300" + radii="300" + outlined + disabled={clearing} + > + {clearing ? 'Clearing…' : 'Clear'} + + } + /> + + + ); +} diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx index 085355f40f..889485f5bf 100644 --- a/src/app/features/settings/experimental/Experimental.tsx +++ b/src/app/features/settings/experimental/Experimental.tsx @@ -12,6 +12,7 @@ import { SettingsSectionPage } from '../SettingsSectionPage'; import { BandwidthSavingEmojis } from './BandwithSavingEmojis'; import { MSC4268HistoryShare } from './MSC4268HistoryShare'; import { MSC4274MediaGalleries } from './MSC4274MediaGalleries'; +import { SearchIDBToggle } from './SearchIDB'; function PersonaToggle() { const [showPersonaSetting, setShowPersonaSetting] = useSetting( @@ -65,6 +66,7 @@ export function Experimental({ requestBack, requestClose }: Readonly + diff --git a/src/app/features/settings/experimental/SearchIDB.tsx b/src/app/features/settings/experimental/SearchIDB.tsx new file mode 100644 index 0000000000..bdca9608b2 --- /dev/null +++ b/src/app/features/settings/experimental/SearchIDB.tsx @@ -0,0 +1,42 @@ +import { SequenceCard } from '$components/sequence-card'; +import { SettingTile } from '$components/setting-tile'; +import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; +import { Box, Switch, Text } from 'folds'; + +export function SearchIDBToggle() { + const [enabledIdbSearchIndex, setEnabledIdbSearchIndex] = useSetting( + settingsAtom, + 'idbSearchIndex' + ); + return ( + + Enable Local Message Indexing + + + } + /> + + + ); +} diff --git a/src/app/features/settings/settingsLink.ts b/src/app/features/settings/settingsLink.ts index e39fc9b33b..4794f0ac49 100644 --- a/src/app/features/settings/settingsLink.ts +++ b/src/app/features/settings/settingsLink.ts @@ -215,6 +215,7 @@ const settingsLinkFocusIdsBySection: Record Promise; + state: () => Promise; + isBackfilling: boolean; + ready: boolean; +}; + +export const SearchIndexContext = createContext(null); + +export function useSearchIndex(): SearchIndexContextType | null { + return useContext(SearchIndexContext); +} diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 1f0aba8cd3..d2807cd39d 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -66,6 +66,7 @@ import { isIncomingCallSuppressed } from '$features/call/callIncomingIngress'; import { incomingCallAtom, mutedCallRoomIdAtom } from '$state/callEmbed'; import { getInboxInvitesPath } from '../pathUtils'; import { BackgroundNotifications } from './BackgroundNotifications'; +import { SearchIndexProvider } from '$components/SearchIndexProvider'; const pushRelayLog = createDebugLogger('push-relay'); @@ -897,7 +898,7 @@ function SettingsSyncFeature() { export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { useIncomingCallSignaling(); return ( - <> + @@ -917,6 +918,6 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { {children} - + ); } diff --git a/src/app/plugins/search-indexer/index.ts b/src/app/plugins/search-indexer/index.ts new file mode 100644 index 0000000000..125aabfc00 --- /dev/null +++ b/src/app/plugins/search-indexer/index.ts @@ -0,0 +1,334 @@ +import { Document, IndexedDB, Resolver } from 'flexsearch'; +import { + BackfillState, + IndexWorkerMessageIn, + IndexWorkerMessageOut, + SearchIndexEvent, + WorkerMessageTypeIn, + WorkerMessageTypeOut, +} from './types'; + +export const HAS_TYPE_TO_MSGTYPE: Record = { + image: 'm.image', + file: 'm.file', + audio: 'm.audio', + video: 'm.video', +}; + +function openIdb(name: string): Promise { + return new Promise((resolve, reject) => { + const req = indexedDB.open(name, 1); + + req.onupgradeneeded = (e) => { + const db = req.result; + + db.createObjectStore('index'); + db.createObjectStore('backfill'); + }; + + req.addEventListener('success', () => resolve(req.result)); + req.addEventListener('error', () => reject(req.error)); + }); +} + +function idbGet(db: IDBDatabase, store: string, key: string): Promise { + return new Promise((resolve, reject) => { + const tx = db.transaction(store, 'readonly'); + const req = tx.objectStore(store).get(key); + req.addEventListener('success', () => resolve(req.result)); + req.addEventListener('error', () => reject(req.error)); + }); +} + +function idbPut(db: IDBDatabase, store: string, key: string, value: unknown): Promise { + return new Promise((resolve, reject) => { + const tx = db.transaction(store, 'readwrite'); + const req = tx.objectStore(store).put(value, key); + req.addEventListener('success', () => resolve()); + req.addEventListener('error', () => reject(req.error)); + }); +} + +function idbGetAll(db: IDBDatabase, store: string): Promise<{ key: string; value: unknown }[]> { + return new Promise((resolve, reject) => { + const tx = db.transaction(store, 'readonly'); + const results: { key: string; value: unknown }[] = []; + const keysReq = tx.objectStore(store).openCursor(); + keysReq.addEventListener('success', () => { + const cursor = keysReq.result; + if (cursor) { + results.push({ key: cursor.key as string, value: cursor.value as unknown }); + cursor.continue(); + } else { + resolve(results); + } + }); + keysReq.addEventListener('error', () => reject(keysReq.error)); + }); +} + +function idbClear(db: IDBDatabase, store: string): Promise { + return new Promise((resolve, reject) => { + const tx = db.transaction(store, 'readwrite'); + const req = tx.objectStore(store).clear(); + req.addEventListener('success', () => resolve()); + req.addEventListener('error', () => reject(req.error)); + }); +} + +function getDocument( + data: Record | undefined = undefined +): Document { + const document = new Document({ + document: { + id: 'eventId', + store: true, + index: ['body'], + }, + }); + + if (data) { + for (const [key, value] of Object.entries(data)) { + document.import(key, value); + } + } + + return document; +} + +let dirty = false; +const FLUSH_DEBOUNCE_MS = 5000; +let flushTimer: ReturnType | null = null; +let flushTries = 0 + +let db: IDBDatabase | null = null; +let document: Document | null = null; + +const roomQueues = new Map>(); + +async function flushIndex(): Promise { + if (!db || !document || !dirty) return; + try { + const doFlush = async () => { + if (!db || !document) return; + document.export(async (key, data) => { + if (db) await idbPut(db, 'index', key, data); + }); + + const roomQueuesData: Record> = {}; + for (const [roomId, queue] of roomQueues.entries()) { + roomQueuesData[roomId] = queue; + } + await idbPut(db, 'index', 'rooms', roomQueuesData); + dirty = false; + }; + if ('locks' in navigator) { + await navigator.locks.request('sable-search-index-writer', { mode: 'exclusive' }, doFlush); + } else { + await doFlush(); + } + } catch {} +} + +function scheduleFlush(): void { + if (flushTimer !== null && flushTries <= 100) { + clearTimeout(flushTimer) + flushTries += 1; + }; + flushTimer = setTimeout(() => { + flushTimer = null; + flushTries = 0; + void flushIndex(); + }, FLUSH_DEBOUNCE_MS); +} + +function post(msg: IndexWorkerMessageOut): void { + self.postMessage(msg); +} + +function makeTypeFilter( + hasTypes: string[] | undefined +): ((ev: SearchIndexEvent) => boolean) | null { + if (!hasTypes || hasTypes.length === 0) return null; + const allowedMsgtypes = hasTypes.filter((v) => v != 'link').map((t) => HAS_TYPE_TO_MSGTYPE[t]); + const needsLink = hasTypes.includes('link'); + return (ev: SearchIndexEvent) => { + if (allowedMsgtypes.includes(ev.msgtype)) return true; + if (needsLink && ev.hasLink) return true; + return false; + }; +} + +self.addEventListener('message', async (event: MessageEvent) => { + const msg = event.data; + + switch (msg.type) { + case WorkerMessageTypeIn.Init: + const dbName = `sable-search${msg.userId}`; + + db = await openIdb(dbName); + + const serialized = await idbGetAll(db, 'index'); + if (serialized) { + const records: Record = {}; + for (const { key, value } of serialized) { + records[key] = value as string; + } + document = getDocument(records); + const savedQueues = await idbGet>>( + db, + 'index', + 'rooms' + ); + if (savedQueues) { + for (const [roomId, queue] of Object.entries(savedQueues)) { + roomQueues.set(roomId, queue); + for (const [eventId] of queue) { + const fields = document.get(eventId); + } + } + } + } else { + document = getDocument(); + } + + post({ + type: WorkerMessageTypeOut.Ready, + //@ts-expect-error flexsearch types are wrong for some reason + indexedEventCount: document.store.size, + roomCount: roomQueues.size, + }); + break; + + case WorkerMessageTypeIn.Query: + if (!document) { + post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: [] }); + return; + } + + const typeFilter = makeTypeFilter(msg.hasTypes); + + function matchesFilters(ev: SearchIndexEvent): boolean { + if (msg.type != WorkerMessageTypeIn.Query) return false; + if (msg.roomIds && msg.roomIds.length > 0 && !msg.roomIds.includes(ev.roomId)) return false; + if (msg.senders && msg.senders.length > 0 && !msg.senders.includes(ev.sender)) return false; + if (typeFilter && !typeFilter(ev)) return false; + return true; + } + + if (!msg.term) { + const results: SearchIndexEvent[] = + //@ts-expect-error flexsearch types are very bad + [...document.store.values()] + .filter((v) => matchesFilters(v)) + .slice(0, 1000); + post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: results }); + return; + } + + + let result = + document.search(msg.term, { + //@ts-expect-error flexsearch types are very bad + limit: document.store.size, + enrich: true, + }) + .flatMap((r) => r.result.map((v) => v.doc!)) + .filter((r) => r != undefined) + .filter((v) => matchesFilters(v)) + .slice(0, 1000); + + post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: result! }); + + case WorkerMessageTypeIn.State: + if (!document) { + post({ type: WorkerMessageTypeOut.State, indexedEventCount: 0, roomCount: 0 }); + return; + } + post({ + type: WorkerMessageTypeOut.State, + //@ts-expect-error flexsearch types are very bad + indexedEventCount: document.store.size, + roomCount: roomQueues.size, + }); + break; + case WorkerMessageTypeIn.Clear: + if (!db) return; + Promise.all([idbClear(db, 'index'), idbClear(db, 'backfill')]); + break; + case WorkerMessageTypeIn.SetBackfillState: + if (!db) return; + await idbPut(db, 'backfill', msg.roomId, msg.state); + break; + case WorkerMessageTypeIn.GetBackfillStates: + if (!db) { + post({ type: WorkerMessageTypeOut.BackfillStatesDone, states: {} }); + return; + } + + const rows = await idbGetAll(db, 'backfill'); + const states: Record = {}; + for (const { key, value } of rows) { + states[key] = value as BackfillState; + } + post({ type: WorkerMessageTypeOut.BackfillStatesDone, states }); + break; + case WorkerMessageTypeIn.Index: + if (!document) return; + + for (const ev of msg.events) { + if (!ev.eventId || !ev.body.trim()) continue; + if (document.contain(ev.eventId)) continue; + document.add(ev); + + let queue = roomQueues.get(ev.roomId); + if (!queue) { + queue = []; + roomQueues.set(ev.roomId, queue); + } + const lastEntry = queue[queue.length - 1]; + if (queue.length === 0 || (lastEntry !== undefined && lastEntry[1] <= ev.ts)) { + queue.push([ev.eventId, ev.ts]); + } else { + let lo = 0; + let hi = queue.length; + while (lo < hi) { + const mid = (lo + hi) >>> 1; + const midEntry = queue[mid]; + if (midEntry !== undefined && midEntry[1] <= ev.ts) lo = mid + 1; + else hi = mid; + } + queue.splice(lo, 0, [ev.eventId, ev.ts]); + } + } + dirty = true; + scheduleFlush(); + break; + case WorkerMessageTypeIn.RedactEvents: + if (!document) return; + for (const ev of msg.eventIds) { + document.remove(ev) + } + dirty = true; + scheduleFlush(); + break + case WorkerMessageTypeIn.EditEvents: + if (!document) return; + for (const id in msg.events) { + if (!msg.events[id]) continue + document.set(id, msg.events[id]) + } + dirty = true; + scheduleFlush(); + break + case WorkerMessageTypeIn.Flush: + void flushIndex().then(() => { + post({ + type: WorkerMessageTypeOut.FlushDone, + }); + }); + break; + default: + break; + } +}); diff --git a/src/app/plugins/search-indexer/types.ts b/src/app/plugins/search-indexer/types.ts new file mode 100644 index 0000000000..3f814f82bf --- /dev/null +++ b/src/app/plugins/search-indexer/types.ts @@ -0,0 +1,112 @@ +import { IEncryptedFile, IFileInfo, IThumbnailContent } from '$types/matrix/common'; + +export type SearchIndexEvent = { + eventId: string; + roomId: string; + sender: string; + + msgtype: string; + body: string; + ts: number; + + hasLink: boolean; + filename?: string; + url?: string; + info?: IFileInfo; + file?: any; +}; + +export enum WorkerMessageTypeIn { + Init, + GetBackfillStates, + SetBackfillState, + EditEvents, + RedactEvents, + Index, + Query, + State, + Clear, + Flush, +} + +export type IndexWorkerMessageIn = + | { + type: WorkerMessageTypeIn.Init; + userId: string; + } + | { + type: WorkerMessageTypeIn.GetBackfillStates; + } + | { + type: WorkerMessageTypeIn.Query; + id: string; + term?: string; + roomIds?: string[]; + senders?: string[]; + hasTypes?: string[]; + } + | { + type: WorkerMessageTypeIn.SetBackfillState; + roomId: string; + state: BackfillState; + } + |{ + type: WorkerMessageTypeIn.RedactEvents; + eventIds: string[] + } + |{ + type: WorkerMessageTypeIn.EditEvents; + events: Record + } + | { + type: WorkerMessageTypeIn.Index; + events: SearchIndexEvent[]; + } + | { + type: WorkerMessageTypeIn.State; + } + | { + type: WorkerMessageTypeIn.Clear; + } + | { + type: WorkerMessageTypeIn.Flush; + }; + +export enum WorkerMessageTypeOut { + Ready, + BackfillStatesDone, + QueryResult, + State, + FlushDone, +} + +export type IndexWorkerMessageOut = + | { + type: WorkerMessageTypeOut.Ready; + indexedEventCount: number; + roomCount: number; + } + | { + type: WorkerMessageTypeOut.BackfillStatesDone; + states: Record; + } + | { + type: WorkerMessageTypeOut.QueryResult; + id: string; + events: SearchIndexEvent[]; + } + | { + type: WorkerMessageTypeOut.State; + indexedEventCount: number; + roomCount: number; + } + | { + type: WorkerMessageTypeOut.FlushDone; + }; + +export type BackfillState = { + token: string | null; + done: boolean; + indexedCount: number; + oldestTs?: number; +}; diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 26ddd14767..e711b966f7 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -151,6 +151,7 @@ export interface Settings { enableMSC4268CMD: boolean; enableMediaGalleries: boolean; settingsSyncEnabled: boolean; + idbSearchIndex: boolean; // Cosmetics! iconCompactSizePx: number; @@ -316,6 +317,7 @@ export const defaultSettings: Settings = { developerTools: false, settingsSyncEnabled: false, + idbSearchIndex: false, // Cosmetics! iconCompactSizePx: 16, From 0e8f7e6ca9bf10fd20bc6b317b357c2d5c86500f Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Mon, 29 Jun 2026 11:01:19 -0800 Subject: [PATCH 3/7] Refresh search on senders change --- .../features/message-search/MessageSearch.tsx | 4 ++- .../message-search/useMessageSearch.ts | 5 ++- src/app/plugins/search-indexer/index.ts | 36 +++++++++---------- 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx index 96c65f7908..23bf1bd944 100644 --- a/src/app/features/message-search/MessageSearch.tsx +++ b/src/app/features/message-search/MessageSearch.tsx @@ -114,7 +114,9 @@ export function MessageSearch({ ]); const isSearching = - !!msgSearchParams.term || (!!msgSearchParams.hasTypes && msgSearchParams.hasTypes.length > 0); + !!msgSearchParams.term || + (!!msgSearchParams.hasTypes && msgSearchParams.hasTypes.length > 0) || + (!!msgSearchParams.senders && msgSearchParams.senders.length > 0); const searchMessages = useMessageSearch(msgSearchParams); diff --git a/src/app/features/message-search/useMessageSearch.ts b/src/app/features/message-search/useMessageSearch.ts index bab2c600e2..19a2c63af7 100644 --- a/src/app/features/message-search/useMessageSearch.ts +++ b/src/app/features/message-search/useMessageSearch.ts @@ -215,10 +215,9 @@ export const useMessageSearch = (params: MessageSearchParams) => { const searchMessages = useCallback( async (nextBatch?: string) => { - const idbSearchAvailable = - settings.idbSearchIndex && !!searchIndex?.ready; + const idbSearchAvailable = settings.idbSearchIndex && !!searchIndex?.ready; const hasHasTypes = hasTypes && hasTypes.length > 0; - if (!(term || (idbSearchAvailable && hasHasTypes))) + if (!(term || (idbSearchAvailable && (hasHasTypes || senders)))) return { highlights: [], groups: [], diff --git a/src/app/plugins/search-indexer/index.ts b/src/app/plugins/search-indexer/index.ts index 125aabfc00..08bf410e84 100644 --- a/src/app/plugins/search-indexer/index.ts +++ b/src/app/plugins/search-indexer/index.ts @@ -99,7 +99,7 @@ function getDocument( let dirty = false; const FLUSH_DEBOUNCE_MS = 5000; let flushTimer: ReturnType | null = null; -let flushTries = 0 +let flushTries = 0; let db: IDBDatabase | null = null; let document: Document | null = null; @@ -132,9 +132,9 @@ async function flushIndex(): Promise { function scheduleFlush(): void { if (flushTimer !== null && flushTries <= 100) { - clearTimeout(flushTimer) + clearTimeout(flushTimer); flushTries += 1; - }; + } flushTimer = setTimeout(() => { flushTimer = null; flushTries = 0; @@ -215,28 +215,26 @@ self.addEventListener('message', async (event: MessageEvent matchesFilters(v)) - .slice(0, 1000); - post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: results }); + [...document.store.values()].filter((v) => matchesFilters(v)).slice(0, 1000); + + post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: results }); return; } - - let result = - document.search(msg.term, { + let result = ( + await document.searchAsync(msg.term, { //@ts-expect-error flexsearch types are very bad limit: document.store.size, enrich: true, }) + ) .flatMap((r) => r.result.map((v) => v.doc!)) .filter((r) => r != undefined) - .filter((v) => matchesFilters(v)) - .slice(0, 1000); + .filter((v) => matchesFilters(v)); post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: result! }); @@ -307,20 +305,20 @@ self.addEventListener('message', async (event: MessageEvent { post({ From e54d17b17b8eb4a0bcb1a292d1ed613acfa39112 Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Mon, 29 Jun 2026 11:43:05 -0800 Subject: [PATCH 4/7] Address lints --- .../components/GlobalKeyboardShortcuts.tsx | 4 +- src/app/components/SearchIndexProvider.tsx | 476 +++++++++--------- .../features/message-search/MessageSearch.tsx | 1 - .../features/message-search/SearchFilters.tsx | 5 +- .../message-search/searchEncryptedRooms.ts | 61 +-- .../message-search/useMessageSearch.ts | 73 +-- src/app/features/room/RoomViewHeader.tsx | 3 +- .../developer-tools/SearchIndexCache.tsx | 18 - src/app/hooks/useSearchIndex.ts | 6 +- src/app/plugins/search-indexer/index.ts | 26 +- src/app/plugins/search-indexer/types.ts | 12 +- src/app/utils/room.ts | 2 +- 12 files changed, 319 insertions(+), 368 deletions(-) diff --git a/src/app/components/GlobalKeyboardShortcuts.tsx b/src/app/components/GlobalKeyboardShortcuts.tsx index 712e6a6528..d1c5519345 100644 --- a/src/app/components/GlobalKeyboardShortcuts.tsx +++ b/src/app/components/GlobalKeyboardShortcuts.tsx @@ -195,7 +195,7 @@ export function GlobalKeyboardShortcuts() { navigate(withSearchParam(path, searchParams)); announce(`Start Searching messages ${roomName ? `in ${roomName}` : ''}`); }, - [mx, currentRoom, currentSpace, navigate] + [mx, currentRoom, currentSpace, navigate, direct] ); const handleSearchMessageGlobally = useCallback( @@ -215,7 +215,7 @@ export function GlobalKeyboardShortcuts() { navigate(withSearchParam(path, searchParams)); announce(`Start Searching messages ${roomName ? `in ${roomName}` : ''}`); }, - [mx, currentRoom, currentSpace, navigate] + [mx, currentRoom, currentSpace, navigate, direct] ); useKeyDown(window, handleNextUnreadKeyDown); diff --git a/src/app/components/SearchIndexProvider.tsx b/src/app/components/SearchIndexProvider.tsx index 4cd971fcc7..6d77d054e7 100644 --- a/src/app/components/SearchIndexProvider.tsx +++ b/src/app/components/SearchIndexProvider.tsx @@ -1,34 +1,30 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; -import { - SearchIndexContext, - SearchIndexContextType, - SearchIndexState, -} from '$hooks/useSearchIndex'; -import { +import type { SearchIndexContextType, SearchIndexState } from '$hooks/useSearchIndex'; +import { SearchIndexContext } from '$hooks/useSearchIndex'; +import type { SearchIndexEvent, IndexWorkerMessageIn, - WorkerMessageTypeIn, IndexWorkerMessageOut, - WorkerMessageTypeOut, BackfillState, } from '$plugins/search-indexer/types'; +import { WorkerMessageTypeIn, WorkerMessageTypeOut } from '$plugins/search-indexer/types'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import type { MatrixEvent, Room } from 'matrix-js-sdk'; import { - MatrixEvent, EventType, MatrixEventEvent, - Room, EventTimelineSet, Direction, ClientEvent, RoomEvent, SyncState, } from 'matrix-js-sdk'; -import { ReactNode, useState, useRef, useCallback, useMemo, useEffect } from 'react'; +import type { ReactNode } from 'react'; +import { useState, useRef, useCallback, useMemo, useEffect } from 'react'; import * as Sentry from '@sentry/react'; +// oxlint-disable-next-line import/default import CreateSearchWorker from '$plugins/search-indexer/index.ts?worker'; -import { is } from 'immer/dist/internal.js'; const BACKFILL_PAGE_SIZE = 50; const HAS_IDLE_CALLBACK = typeof requestIdleCallback === 'function'; @@ -50,21 +46,24 @@ function scheduleIdle(cb: () => void): () => void { return () => clearTimeout(id); } -const MEDIA_MSGTYPES = ['m.image', 'm.file', 'm.audio', 'm.video']; +const MEDIA_MSGTYPES = new Set(['m.image', 'm.file', 'm.audio', 'm.video']); -function toSearchIndexEvent(event: MatrixEvent, replaced: boolean = false): SearchIndexEvent | null { +function toSearchIndexEvent( + event: MatrixEvent, + replaced: boolean = false +): SearchIndexEvent | null { const eventId = event.getId(); if (!eventId) return null; const roomId = event.getRoomId(); if (!roomId) return null; - if (event.getType() !== EventType.RoomMessage) return null; + if (event.getType() !== EventType.RoomMessage.toString()) return null; if (event.isRedacted()) return null; const content = event.getContent(); - const body: string = (replaced ? event.getContent()["m.new_content"]?.body : content.body) ?? ''; + const body: string = (replaced ? event.getContent()['m.new_content']?.body : content.body) ?? ''; if (!body.trim()) return null; const sender = event.getSender(); @@ -72,11 +71,19 @@ function toSearchIndexEvent(event: MatrixEvent, replaced: boolean = false): Sear const msgtype = content.msgtype ?? 'm.text'; const ts = event.getTs(); - const hasLink = /https?:\/\//i.test(body) - - const searchIndexEvent: SearchIndexEvent = { eventId, roomId, sender, msgtype, body, ts, hasLink }; - - if (MEDIA_MSGTYPES.includes(msgtype)) { + const hasLink = /https?:\/\//i.test(body); + + const searchIndexEvent: SearchIndexEvent = { + eventId, + roomId, + sender, + msgtype, + body, + ts, + hasLink, + }; + + if (MEDIA_MSGTYPES.has(msgtype)) { if (content.url !== undefined) searchIndexEvent.url = content.url; if (content.file !== undefined) searchIndexEvent.file = content.file; if (content.info !== undefined) searchIndexEvent.info = content.info; @@ -132,184 +139,186 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { if (event.getType() === 'm.room.encrypted') { event.once(MatrixEventEvent.Decrypted, handleEvent); - } - else if (event.isSending()) { - event.once(MatrixEventEvent.LocalEventIdReplaced, handleEvent) - } - else { + } else if (event.isSending()) { + event.once(MatrixEventEvent.LocalEventIdReplaced, handleEvent); + } else { handleEvent(); } }, [postToWorker] ); - const backfillRoom = useCallback(async (room: Room, state: BackfillState) => { - if (state.done) return; - - if (!canRunMobileBackfill()) { - backfillingRoomsRef.current.delete(room.roomId); - backfillQueueRef.current.unshift({ room, state }); - Sentry.addBreadcrumb({ - category: 'search.backfill', - message: `Backfill deferred for room ${room.roomId}`, - data: { - reason: 'mobile_not_focused', - isMobile: !HAS_IDLE_CALLBACK, - visibilityState: document.visibilityState, - focused: document.hasFocus(), - }, - level: 'info', - }); - return; - } + const backfillRoom = useCallback( + async (room: Room, state: BackfillState) => { + if (state.done) return; - let headlessSet = headlessSetsRef.current.get(room.roomId); - if (!headlessSet) { - headlessSet = new EventTimelineSet(room, {}); - headlessSetsRef.current.set(room.roomId, headlessSet); - } - const headlessTimeline = headlessSet.getLiveTimeline(); + if (!canRunMobileBackfill()) { + backfillingRoomsRef.current.delete(room.roomId); + backfillQueueRef.current.unshift({ room, state }); + Sentry.addBreadcrumb({ + category: 'search.backfill', + message: `Backfill deferred for room ${room.roomId}`, + data: { + reason: 'mobile_not_focused', + isMobile: !HAS_IDLE_CALLBACK, + visibilityState: document.visibilityState, + focused: document.hasFocus(), + }, + level: 'info', + }); + return; + } - const seedToken = state.token ?? room.getLiveTimeline().getPaginationToken(Direction.Backward); - if (!seedToken) { - postToWorker({ - type: WorkerMessageTypeIn.SetBackfillState, - roomId: room.roomId, - state: { ...state, done: true }, - }); - backfillingRoomsRef.current.delete(room.roomId); - return; - } + let headlessSet = headlessSetsRef.current.get(room.roomId); + if (!headlessSet) { + headlessSet = new EventTimelineSet(room, {}); + headlessSetsRef.current.set(room.roomId, headlessSet); + } + const headlessTimeline = headlessSet.getLiveTimeline(); - headlessTimeline.setPaginationToken(seedToken, Direction.Backward); + const seedToken = + state.token ?? room.getLiveTimeline().getPaginationToken(Direction.Backward); + if (!seedToken) { + postToWorker({ + type: WorkerMessageTypeIn.SetBackfillState, + roomId: room.roomId, + state: { ...state, done: true }, + }); + backfillingRoomsRef.current.delete(room.roomId); + return; + } - const prevEventCount = headlessTimeline.getEvents().length; + headlessTimeline.setPaginationToken(seedToken, Direction.Backward); - let hasMore = false; - try { - hasMore = await mx.paginateEventTimeline(headlessTimeline, { - backwards: true, - limit: BACKFILL_PAGE_SIZE, - }); - } catch { - backfillingRoomsRef.current.delete(room.roomId); - } + const prevEventCount = headlessTimeline.getEvents().length; - const allEvents = headlessTimeline.getEvents(); - const newEvents = allEvents.slice(0, allEvents.length - prevEventCount); + let hasMore = false; + try { + hasMore = await mx.paginateEventTimeline(headlessTimeline, { + backwards: true, + limit: BACKFILL_PAGE_SIZE, + }); + } catch { + backfillingRoomsRef.current.delete(room.roomId); + } - const recoveryFrontier = state.token === null ? state.oldestTs : undefined; - const unindexedEvents = - recoveryFrontier !== undefined - ? newEvents.filter((ev) => ev.getTs() < recoveryFrontier) - : newEvents; + const allEvents = headlessTimeline.getEvents(); + const newEvents = allEvents.slice(0, allEvents.length - prevEventCount); + + const recoveryFrontier = state.token === null ? state.oldestTs : undefined; + const unindexedEvents = + recoveryFrontier !== undefined + ? newEvents.filter((ev) => ev.getTs() < recoveryFrontier) + : newEvents; + + const events: SearchIndexEvent[] = []; + for (const ev of unindexedEvents) { + try { + const relatesTo = ev.getContent()?.['m.relates_to']; + if (relatesTo?.rel_type === 'm.thread' || ev.isRedacted()) { + continue; + } - const events: SearchIndexEvent[] = []; - for (const ev of unindexedEvents) { - try { - const relatesTo = ev.getContent()?.['m.relates_to']; - if (relatesTo?.rel_type === 'm.thread' || ev.isRedacted()) { + if (ev.getType() === 'm.room.encrypted') { + indexEvent(ev); + } else { + const indexable = toSearchIndexEvent(ev); + if (indexable) events.push(indexable); + } + } catch { continue; } + } - if (ev.getType() === 'm.room.encrypted') { - indexEvent(ev); - } else { - const indexable = toSearchIndexEvent(ev); - if (indexable) events.push(indexable); - } - } catch (e) { - continue; + if (events.length > 0) { + postToWorker({ type: WorkerMessageTypeIn.Index, events }); } - } - if (events.length > 0) { - postToWorker({ type: WorkerMessageTypeIn.Index, events }); - } + const nextToken = headlessTimeline.getPaginationToken(Direction.Backward); + const done = !hasMore && !nextToken; - const nextToken = headlessTimeline.getPaginationToken(Direction.Backward); - const done = !hasMore && !nextToken; + // Track the oldest event timestamp we've indexed so far. Only update when + // we actually processed new events (unindexedEvents may be empty on the + // first page of expired-token recovery while fast-forwarding the frontier). + const minTsThisPage = + unindexedEvents.length > 0 ? Math.min(...unindexedEvents.map((e) => e.getTs())) : undefined; + const newOldestTs = + minTsThisPage !== undefined + ? Math.min(state.oldestTs ?? Infinity, minTsThisPage) + : state.oldestTs; - // Track the oldest event timestamp we've indexed so far. Only update when - // we actually processed new events (unindexedEvents may be empty on the - // first page of expired-token recovery while fast-forwarding the frontier). - const minTsThisPage = - unindexedEvents.length > 0 ? Math.min(...unindexedEvents.map((e) => e.getTs())) : undefined; - const newOldestTs = - minTsThisPage !== undefined - ? Math.min(state.oldestTs ?? Infinity, minTsThisPage) - : state.oldestTs; + postToWorker({ + type: WorkerMessageTypeIn.SetBackfillState, + roomId: room.roomId, + state: { + token: nextToken, + done, + indexedCount: state.indexedCount + events.length, + oldestTs: newOldestTs, + }, + }); - postToWorker({ - type: WorkerMessageTypeIn.SetBackfillState, - roomId: room.roomId, - state: { - token: nextToken, - done, - indexedCount: state.indexedCount + events.length, - oldestTs: newOldestTs, - }, - }); + if (!done) { + // Schedule next page — but yield to the main sync if it's struggling. + // resumeBackfill will restart this room once sync recovers. + const nextState: BackfillState = { + token: nextToken, + done: false, + indexedCount: state.indexedCount + events.length, + oldestTs: newOldestTs, + }; + const cancel = scheduleIdle(() => { + const s = syncStateRef.current; + if (s !== SyncState.Syncing && s !== SyncState.Prepared && s !== SyncState.Catchup) { + backfillingRoomsRef.current.delete(room.roomId); + backfillQueueRef.current.unshift({ room, state: nextState }); + Sentry.addBreadcrumb({ + category: 'search.backfill', + message: `Backfill deferred for room ${room.roomId}`, + data: { reason: 'sync_not_healthy', syncState: s }, + level: 'info', + }); + return; + } - if (!done) { - // Schedule next page — but yield to the main sync if it's struggling. - // resumeBackfill will restart this room once sync recovers. - const nextState: BackfillState = { - token: nextToken, - done: false, - indexedCount: state.indexedCount + events.length, - oldestTs: newOldestTs, - }; - const cancel = scheduleIdle(() => { - const s = syncStateRef.current; - if (s !== SyncState.Syncing && s !== SyncState.Prepared && s !== SyncState.Catchup) { - backfillingRoomsRef.current.delete(room.roomId); - backfillQueueRef.current.unshift({ room, state: nextState }); - Sentry.addBreadcrumb({ - category: 'search.backfill', - message: `Backfill deferred for room ${room.roomId}`, - data: { reason: 'sync_not_healthy', syncState: s }, - level: 'info', - }); - return; + if (!canRunMobileBackfill()) { + backfillingRoomsRef.current.delete(room.roomId); + backfillQueueRef.current.unshift({ room, state: nextState }); + Sentry.addBreadcrumb({ + category: 'search.backfill', + message: `Backfill deferred for room ${room.roomId}`, + data: { + reason: 'mobile_not_focused', + isMobile: !HAS_IDLE_CALLBACK, + visibilityState: document.visibilityState, + focused: document.hasFocus(), + }, + level: 'info', + }); + return; + } + void backfillRoom(room, nextState); + }); + cancelIdlesRef.current.push(cancel); + } else { + backfillingRoomsRef.current.delete(room.roomId); + // Dequeue the next room from the concurrency queue while under the limit + while ( + backfillingRoomsRef.current.size < MAX_CONCURRENT_BACKFILLS && + backfillQueueRef.current.length > 0 + ) { + const next = backfillQueueRef.current.shift()!; + backfillingRoomsRef.current.add(next.room.roomId); + const cancel = scheduleIdle(() => void backfillRoom(next.room, next.state)); + cancelIdlesRef.current.push(cancel); } - - if (!canRunMobileBackfill()) { - backfillingRoomsRef.current.delete(room.roomId); - backfillQueueRef.current.unshift({ room, state: nextState }); - Sentry.addBreadcrumb({ - category: 'search.backfill', - message: `Backfill deferred for room ${room.roomId}`, - data: { - reason: 'mobile_not_focused', - isMobile: !HAS_IDLE_CALLBACK, - visibilityState: document.visibilityState, - focused: document.hasFocus(), - }, - level: 'info', - }); - return; + if (backfillingRoomsRef.current.size === 0 && backfillQueueRef.current.length === 0) { + setIsBackfilling(false); } - void backfillRoom(room, nextState); - }); - cancelIdlesRef.current.push(cancel); - } else { - backfillingRoomsRef.current.delete(room.roomId); - // Dequeue the next room from the concurrency queue while under the limit - while ( - backfillingRoomsRef.current.size < MAX_CONCURRENT_BACKFILLS && - backfillQueueRef.current.length > 0 - ) { - const next = backfillQueueRef.current.shift()!; - backfillingRoomsRef.current.add(next.room.roomId); - const cancel = scheduleIdle(() => void backfillRoom(next.room, next.state)); - cancelIdlesRef.current.push(cancel); - } - if (backfillingRoomsRef.current.size === 0 && backfillQueueRef.current.length === 0) { - setIsBackfilling(false); } - } - }, []); + }, + [mx, postToWorker, indexEvent] + ); const resumeBackfill = useCallback(() => { if (!backfillReadyRef.current) return; @@ -358,37 +367,40 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { [mx, resumeBackfill] ); - const handleWorkerMessage = useCallback((event: MessageEvent) => { - const msg = event.data; - - switch (msg.type) { - case WorkerMessageTypeOut.Ready: - setIsReady(true); - postToWorker({ type: WorkerMessageTypeIn.GetBackfillStates }); - break; - case WorkerMessageTypeOut.State: - const pending = pendingStatsRef.current; - if (pending) { - pendingStatsRef.current = null; - pending.resolve({ - indexedEventsCount: msg.indexedEventCount, - roomCount: msg.roomCount, - backfillingRoomCount: pending.backfillingRoomCount, - }); - } - break; - case WorkerMessageTypeOut.QueryResult: - const pendingQuery = pendingQueriesRef.current.get(msg.id); - if (pendingQuery) { - pendingQueriesRef.current.delete(msg.id); - pendingQuery.resolve(msg.events); - } - break; - case WorkerMessageTypeOut.BackfillStatesDone: - startBackfill(msg.states); - break; - } - }, []); + const handleWorkerMessage = useCallback( + (event: MessageEvent) => { + const msg = event.data; + + switch (msg.type) { + case WorkerMessageTypeOut.Ready: + setIsReady(true); + postToWorker({ type: WorkerMessageTypeIn.GetBackfillStates }); + break; + case WorkerMessageTypeOut.State: + const pending = pendingStatsRef.current; + if (pending) { + pendingStatsRef.current = null; + pending.resolve({ + indexedEventsCount: msg.indexedEventCount, + roomCount: msg.roomCount, + backfillingRoomCount: pending.backfillingRoomCount, + }); + } + break; + case WorkerMessageTypeOut.QueryResult: + const pendingQuery = pendingQueriesRef.current.get(msg.id); + if (pendingQuery) { + pendingQueriesRef.current.delete(msg.id); + pendingQuery.resolve(msg.events); + } + break; + case WorkerMessageTypeOut.BackfillStatesDone: + startBackfill(msg.states); + break; + } + }, + [startBackfill, postToWorker] + ); useEffect(() => { if (!idbSearchIndex) { @@ -403,8 +415,7 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { level: 'info', }); worker = new CreateSearchWorker(); - } catch (e) { - console.error('Error!'); + } catch { return () => {}; } @@ -435,9 +446,7 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { const handleSync = (state: SyncState) => { syncStateRef.current = state; - if ( - state === SyncState.Syncing - ) { + if (state === SyncState.Syncing) { resumeBackfill(); } }; @@ -446,7 +455,7 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { const handleTimeline = (mEvent: MatrixEvent, room: Room | undefined) => { const relation = mEvent.getRelation(); - if (relation && relation.rel_type === "m.replace") { + if (relation && relation.rel_type === 'm.replace') { const targetEventId = relation.event_id; if (!targetEventId) return; const searchEvent = toSearchIndexEvent(mEvent, true); @@ -455,9 +464,9 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { postToWorker({ type: WorkerMessageTypeIn.EditEvents, events: { - [targetEventId]: searchEvent - } - }) + [targetEventId]: searchEvent, + }, + }); return; } @@ -467,17 +476,17 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { mx.on(RoomEvent.Timeline, handleTimeline); const handleRedaction = (mEvent: MatrixEvent) => { - if (mEvent.getType() !== EventType.RoomRedaction) return; + if (mEvent.getType() !== EventType.RoomRedaction.toString()) return; let eventId = mEvent.event.redacts; if (!eventId) return; postToWorker({ type: WorkerMessageTypeIn.RedactEvents, - eventIds: [eventId] - }) + eventIds: [eventId], + }); }; mx.on(RoomEvent.Redaction, handleRedaction); - + const handleRoomAdded = (room: Room) => { if (room.isSpaceRoom()) return; if (backfillingRoomsRef.current.has(room.roomId)) return; @@ -505,8 +514,8 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { window.addEventListener('pageshow', handleForegroundFocus); } -const handleOnBeforeUnload = () => { - postToWorker({ type: WorkerMessageTypeIn.Flush }); + const handleOnBeforeUnload = () => { + postToWorker({ type: WorkerMessageTypeIn.Flush }); worker.addEventListener( 'message', @@ -519,29 +528,23 @@ const handleOnBeforeUnload = () => { }, { once: true } ); -} + }; - window.addEventListener('beforeunload', handleOnBeforeUnload); + window.addEventListener('beforeunload', handleOnBeforeUnload); return () => { mx.removeListener(ClientEvent.Sync, handleSync); - mx.removeListener( - RoomEvent.Timeline, - handleTimeline - ); - mx.removeListener( - ClientEvent.Room, - handleRoomAdded - ); - mx.removeListener(RoomEvent.Redaction, handleRedaction) + mx.removeListener(RoomEvent.Timeline, handleTimeline); + mx.removeListener(ClientEvent.Room, handleRoomAdded); + mx.removeListener(RoomEvent.Redaction, handleRedaction); worker.removeEventListener('message', handleWorkerMessage); // worker.removeEventListener('error', handleWorkerError); - window.removeEventListener('beforeunload', handleOnBeforeUnload); + window.removeEventListener('beforeunload', handleOnBeforeUnload); setIsReady(false); setIsBackfilling(false); }; - }, [idbSearchIndex, mx, handleWorkerMessage, indexEvent, postToWorker]); + }, [idbSearchIndex, mx, handleWorkerMessage, indexEvent, postToWorker, resumeBackfill]); const query = useCallback( ( @@ -582,7 +585,14 @@ const handleOnBeforeUnload = () => { }); }, [isReady, postToWorker]); - const clearIndex = () => {}; + const clearIndex = useCallback((): Promise => { + if (!workerRef.current || !isReady) { + return Promise.resolve(); + } + return new Promise(() => { + postToWorker({ type: WorkerMessageTypeIn.Clear }); + }); + }, [isReady, postToWorker]); const ctx = useMemo( () => ({ query, state, clearIndex, isBackfilling, ready: isReady }), diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx index 23bf1bd944..1ec3cb0231 100644 --- a/src/app/features/message-search/MessageSearch.tsx +++ b/src/app/features/message-search/MessageSearch.tsx @@ -17,7 +17,6 @@ import { useRoomNavigate } from '$hooks/useRoomNavigate'; import { ScrollTopContainer } from '$components/scroll-top-container'; import { ContainerColor } from '$styles/ContainerColor.css'; import { decodeSearchParamValueArray, encodeSearchParamValueArray } from '$pages/pathUtils'; -import { useRooms } from '$state/hooks/roomList'; import { allRoomsAtom } from '$state/room-list/roomList'; import { mDirectAtom } from '$state/mDirectList'; import { VirtualTile } from '$components/virtualizer'; diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx index bdc649201d..192108e988 100644 --- a/src/app/features/message-search/SearchFilters.tsx +++ b/src/app/features/message-search/SearchFilters.tsx @@ -26,10 +26,7 @@ import type { RoomMember } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useMatrixClient } from '$hooks/useMatrixClient'; -import { useAtomValue } from 'jotai'; -import { settingsAtom } from '$state/settings'; -import { useClientConfig } from '$hooks/useClientConfig'; -import { getRoomAvatarUrl, getRoomIconSrc } from '$utils/room'; +import { getRoomIconSrc } from '$utils/room'; import { factoryRoomIdByAtoZ } from '$utils/sort'; import type { SearchItemStrGetter, UseAsyncSearchOptions } from '$hooks/useAsyncSearch'; import { useAsyncSearch } from '$hooks/useAsyncSearch'; diff --git a/src/app/features/message-search/searchEncryptedRooms.ts b/src/app/features/message-search/searchEncryptedRooms.ts index 43955dd2be..d8a69e6425 100644 --- a/src/app/features/message-search/searchEncryptedRooms.ts +++ b/src/app/features/message-search/searchEncryptedRooms.ts @@ -1,16 +1,29 @@ import { EventType } from '$types/matrix-sdk'; -import type { - IEventWithRoomId, - IResultContext, - MatrixClient, - MatrixEvent, -} from '$types/matrix-sdk'; -import { - HAS_TYPE_TO_MSGTYPE, - SearchHasType, - type ResultGroup, - type ResultItem, -} from './useMessageSearch'; +import type { IEventWithRoomId, MatrixClient, MatrixEvent } from '$types/matrix-sdk'; +import type { SearchHasType } from './useMessageSearch'; +import { HAS_TYPE_TO_MSGTYPE, type ResultGroup, type ResultItem } from './useMessageSearch'; + +function toSearchEvent(mEvent: MatrixEvent, roomId: string): IEventWithRoomId { + return { + event_id: mEvent.getId() ?? '', + room_id: roomId, + sender: mEvent.getSender() ?? '', + origin_server_ts: mEvent.getTs(), + content: mEvent.getContent(), + type: mEvent.getType(), + unsigned: mEvent.getUnsigned(), + } as IEventWithRoomId; +} + +function mEventMatchesHasTypes(mEvent: MatrixEvent, hasTypes: SearchHasType[]): boolean { + const content = mEvent.getContent() as { msgtype?: string; body?: string }; + for (const type of hasTypes) { + const msgtype = HAS_TYPE_TO_MSGTYPE[type]; + if (msgtype && content.msgtype === msgtype) return true; + if (type === 'link' && /https?:\/\//i.test(content.body ?? '')) return true; + } + return false; +} /** * Searches a single room's live timeline for message events that contain @@ -22,33 +35,11 @@ export function searchRoomTimeline( senders?: string[], hasTypes?: SearchHasType[] ): ResultGroup | undefined { - function toSearchEvent(mEvent: MatrixEvent, roomId: string): IEventWithRoomId { - return { - event_id: mEvent.getId() ?? '', - room_id: roomId, - sender: mEvent.getSender() ?? '', - origin_server_ts: mEvent.getTs(), - content: mEvent.getContent(), - type: mEvent.getType(), - unsigned: mEvent.getUnsigned(), - } as IEventWithRoomId; - } - - function mEventMatchesHasTypes(mEvent: MatrixEvent, hasTypes: SearchHasType[]): boolean { - const content = mEvent.getContent() as { msgtype?: string; body?: string }; - for (const type of hasTypes) { - const msgtype = HAS_TYPE_TO_MSGTYPE[type]; - if (msgtype && content.msgtype === msgtype) return true; - if (type === 'link' && /https?:\/\//i.test(content.body ?? '')) return true; - } - return false; - } - const events = room.getLiveTimeline().getEvents(); const items: ResultItem[] = []; for (const event of events) { - if (event.getType() !== EventType.RoomMessage) continue; + if (event.getType() !== EventType.RoomMessage.toString()) continue; if (event.isBeingDecrypted() || event.isDecryptionFailure()) continue; const sender = event.getSender(); diff --git a/src/app/features/message-search/useMessageSearch.ts b/src/app/features/message-search/useMessageSearch.ts index 19a2c63af7..be7fee34c0 100644 --- a/src/app/features/message-search/useMessageSearch.ts +++ b/src/app/features/message-search/useMessageSearch.ts @@ -14,7 +14,7 @@ import { searchEncryptedRoomsInMemory, partitionRoomsByEncryption } from './sear import { useSearchIndex } from '$hooks/useSearchIndex'; import { useAtomValue } from 'jotai'; import { settingsAtom } from '$state/settings'; -import { SearchIndexEvent } from '$plugins/search-indexer/types'; +import type { SearchIndexEvent } from '$plugins/search-indexer/types'; export function toSearchEvent(mEvent: MatrixEvent, roomId: string): IEventWithRoomId { return { @@ -161,57 +161,34 @@ export type MessageSearchParams = { senders?: string[]; hasTypes?: SearchHasType[]; }; -export const useMessageSearch = (params: MessageSearchParams) => { - const mx = useMatrixClient(); - const searchIndex = useSearchIndex(); - const settings = useAtomValue(settingsAtom); - const { term, order, rooms, senders, hasTypes } = params; +const mergeSearchGroups = ( + serverGroups: ResultGroup[], + inMemoryGroups: ResultGroup[], + order?: string +): ResultGroup[] => { + if (inMemoryGroups.length === 0) return serverGroups; + if (serverGroups.length === 0) return inMemoryGroups; - const filterGroupsByHasType = useCallback( - (grps: ResultGroup[]): ResultGroup[] => { - if (!hasTypes || hasTypes.length === 0) return grps; - const withMsgtype = hasTypes.filter((t) => t !== 'link'); - return grps - .map((g) => ({ - ...g, - items: g.items.filter((item) => { - const content = item.event.content; - if ( - withMsgtype.length > 0 && - withMsgtype.some((t) => content.msgtype === HAS_TYPE_TO_MSGTYPE[t]) - ) - return true; - - if (hasTypes.includes('link') && /https?:\/\//i.test(content.body ?? '')) return true; // TODO: maybe regex isn't the best idea - return false; - }), - })) - .filter((g) => g.items.length > 0); - }, - [hasTypes] - ); + const all = [...serverGroups, ...inMemoryGroups]; - const mergeSearchGroups = ( - serverGroups: ResultGroup[], - inMemoryGroups: ResultGroup[], - order?: string - ): ResultGroup[] => { - if (inMemoryGroups.length === 0) return serverGroups; - if (serverGroups.length === 0) return inMemoryGroups; + if (order === 'rank') { + return all; + } - const all = [...serverGroups, ...inMemoryGroups]; + return all.toSorted((a, b) => { + const aTs = a.items[0]?.event.origin_server_ts ?? 0; + const bTs = b.items[0]?.event.origin_server_ts ?? 0; + return bTs - aTs; + }); +}; - if (order === 'rank') { - return all; - } +export const useMessageSearch = (params: MessageSearchParams) => { + const mx = useMatrixClient(); + const searchIndex = useSearchIndex(); + const settings = useAtomValue(settingsAtom); - return all.toSorted((a, b) => { - const aTs = a.items[0]?.event.origin_server_ts ?? 0; - const bTs = b.items[0]?.event.origin_server_ts ?? 0; - return bTs - aTs; - }); - }; + const { term, order, rooms, senders, hasTypes } = params; const searchMessages = useCallback( async (nextBatch?: string) => { @@ -240,7 +217,7 @@ export const useMessageSearch = (params: MessageSearchParams) => { } const { encryptedRoomIds, serverRooms } = partitionRoomsByEncryption(mx, rooms); - let skipServerSearch = !!!serverRooms; + let skipServerSearch = !serverRooms; let foundGroups: ResultGroup[] = []; @@ -294,7 +271,7 @@ export const useMessageSearch = (params: MessageSearchParams) => { }; return filteredServerResult; }, - [mx, term, order, rooms, senders, hasTypes, filterGroupsByHasType] + [mx, term, order, rooms, senders, hasTypes, settings, searchIndex] ); return searchMessages; diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx index ee8ee486ea..0be32bb161 100644 --- a/src/app/features/room/RoomViewHeader.tsx +++ b/src/app/features/room/RoomViewHeader.tsx @@ -369,6 +369,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { const direct = useIsDirectRoom(); const [customDMCards] = useSetting(settingsAtom, 'customDMCards'); const { microphone, video, sound } = useCallPreferences(); + const idbSearchAvailable = useSetting(settingsAtom, 'idbSearchIndex'); const [chat, setChat] = useAtom(callChatAtom); const [threadBrowserOpen, setThreadBrowserOpen] = useAtom( @@ -686,7 +687,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { - {(!room.isCallRoom() || chat) && ( + {(!room.isCallRoom() || chat) && (!encryptedRoom || idbSearchAvailable) && ( <> = [ - { label: '500 messages', value: 500 }, - { label: '1,000 messages', value: 1000 }, - { label: '2,000 messages (default)', value: 2000 }, - { label: '5,000 messages', value: 5000 }, - { label: 'Unlimited', value: Number.MAX_SAFE_INTEGER }, -]; - -function formatBytes(bytes: number): string { - if (bytes < 1024) return `${bytes} B`; - if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; - return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; -} - export function SearchIndexCache() { const [idbSearchIndex] = useSetting(settingsAtom, 'idbSearchIndex'); - // const [searchIndexMessageLimit, setSearchIndexMessageLimit] = useSetting( - // settingsAtom, - // 'searchIndexMessageLimit' - // ); const searchIndex = useSearchIndex(); const [stats, setStats] = useState(null); diff --git a/src/app/hooks/useSearchIndex.ts b/src/app/hooks/useSearchIndex.ts index 36b5ff2924..b123d86d0d 100644 --- a/src/app/hooks/useSearchIndex.ts +++ b/src/app/hooks/useSearchIndex.ts @@ -1,7 +1,5 @@ -import { SearchIndexEvent, WorkerMessageTypeIn } from '$plugins/search-indexer/types'; -import { EventType, MatrixEvent, MatrixEventEvent, MsgType } from 'matrix-js-sdk'; -import { createContext, ReactNode, useCallback, useContext, useRef, useState } from 'react'; -import { useMatrixClient } from './useMatrixClient'; +import type { SearchIndexEvent } from '$plugins/search-indexer/types'; +import { createContext, useContext } from 'react'; export type SearchIndexState = { indexedEventsCount: number; diff --git a/src/app/plugins/search-indexer/index.ts b/src/app/plugins/search-indexer/index.ts index 08bf410e84..363905426a 100644 --- a/src/app/plugins/search-indexer/index.ts +++ b/src/app/plugins/search-indexer/index.ts @@ -1,12 +1,11 @@ -import { Document, IndexedDB, Resolver } from 'flexsearch'; -import { +import { Document } from 'flexsearch'; +import type { BackfillState, IndexWorkerMessageIn, IndexWorkerMessageOut, SearchIndexEvent, - WorkerMessageTypeIn, - WorkerMessageTypeOut, } from './types'; +import { WorkerMessageTypeIn, WorkerMessageTypeOut } from './types'; export const HAS_TYPE_TO_MSGTYPE: Record = { image: 'm.image', @@ -19,7 +18,7 @@ function openIdb(name: string): Promise { return new Promise((resolve, reject) => { const req = indexedDB.open(name, 1); - req.onupgradeneeded = (e) => { + req.onupgradeneeded = () => { const db = req.result; db.createObjectStore('index'); @@ -76,9 +75,7 @@ function idbClear(db: IDBDatabase, store: string): Promise { }); } -function getDocument( - data: Record | undefined = undefined -): Document { +function getDocument(data?: Record): Document { const document = new Document({ document: { id: 'eventId', @@ -143,17 +140,19 @@ function scheduleFlush(): void { } function post(msg: IndexWorkerMessageOut): void { - self.postMessage(msg); + self.postMessage(msg, self.location.origin); } function makeTypeFilter( hasTypes: string[] | undefined ): ((ev: SearchIndexEvent) => boolean) | null { if (!hasTypes || hasTypes.length === 0) return null; - const allowedMsgtypes = hasTypes.filter((v) => v != 'link').map((t) => HAS_TYPE_TO_MSGTYPE[t]); + const allowedMsgtypes = new Set( + hasTypes.filter((v) => v != 'link').map((t) => HAS_TYPE_TO_MSGTYPE[t]) + ); const needsLink = hasTypes.includes('link'); return (ev: SearchIndexEvent) => { - if (allowedMsgtypes.includes(ev.msgtype)) return true; + if (allowedMsgtypes.has(ev.msgtype)) return true; if (needsLink && ev.hasLink) return true; return false; }; @@ -183,9 +182,6 @@ self.addEventListener('message', async (event: MessageEvent r != undefined) .filter((v) => matchesFilters(v)); - post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: result! }); + post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: result }); case WorkerMessageTypeIn.State: if (!document) { diff --git a/src/app/plugins/search-indexer/types.ts b/src/app/plugins/search-indexer/types.ts index 3f814f82bf..02c110bf71 100644 --- a/src/app/plugins/search-indexer/types.ts +++ b/src/app/plugins/search-indexer/types.ts @@ -1,4 +1,4 @@ -import { IEncryptedFile, IFileInfo, IThumbnailContent } from '$types/matrix/common'; +import type { IFileInfo } from '$types/matrix/common'; export type SearchIndexEvent = { eventId: string; @@ -13,7 +13,7 @@ export type SearchIndexEvent = { filename?: string; url?: string; info?: IFileInfo; - file?: any; + file?: unknown; }; export enum WorkerMessageTypeIn { @@ -50,13 +50,13 @@ export type IndexWorkerMessageIn = roomId: string; state: BackfillState; } - |{ + | { type: WorkerMessageTypeIn.RedactEvents; - eventIds: string[] + eventIds: string[]; } - |{ + | { type: WorkerMessageTypeIn.EditEvents; - events: Record + events: Record; } | { type: WorkerMessageTypeIn.Index; diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 5ecffb0671..14f60fcc55 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -29,7 +29,7 @@ import { import type { IRoomCreateContent, RoomToParents, UnreadInfo } from '$types/matrix/room'; import { NotificationType } from '$types/matrix/room'; import * as Sentry from '@sentry/react'; -import { IconName, IconSrc } from 'folds'; +import type { IconName, IconSrc } from 'folds'; export const getStateEvent = ( room: Room, From 31aed34edd9864f0f3baa00d6f3d41402f4293b8 Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Mon, 29 Jun 2026 12:05:22 -0800 Subject: [PATCH 5/7] Address lints --- src/app/plugins/search-indexer/index.ts | 3 ++- src/app/plugins/search-indexer/types.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/plugins/search-indexer/index.ts b/src/app/plugins/search-indexer/index.ts index 363905426a..e7034a6418 100644 --- a/src/app/plugins/search-indexer/index.ts +++ b/src/app/plugins/search-indexer/index.ts @@ -140,7 +140,8 @@ function scheduleFlush(): void { } function post(msg: IndexWorkerMessageOut): void { - self.postMessage(msg, self.location.origin); + // oxlint-disable-next-line unicorn/require-post-message-target-origin + self.postMessage(msg); } function makeTypeFilter( diff --git a/src/app/plugins/search-indexer/types.ts b/src/app/plugins/search-indexer/types.ts index 02c110bf71..ee46d71379 100644 --- a/src/app/plugins/search-indexer/types.ts +++ b/src/app/plugins/search-indexer/types.ts @@ -13,7 +13,8 @@ export type SearchIndexEvent = { filename?: string; url?: string; info?: IFileInfo; - file?: unknown; + // oxlint-disable-next-line typescript/no-explicit-any + file?: any; }; export enum WorkerMessageTypeIn { From c88e7e000a1615ba2cf78cce228df44f9496e31c Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Sun, 5 Jul 2026 19:21:57 +0000 Subject: [PATCH 6/7] Recreate lockfile --- pnpm-lock.yaml | 20 +++----------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 37bfe68138..acb2e42909 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3485,19 +3485,11 @@ packages: flatted@3.4.2: resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==} -<<<<<<< HEAD - focus-trap-react@12.0.3: - resolution: {integrity: sha512-4eXtzhRTtFrxle9Tkl0Wkj8SFJnWz3i3yb5e53Mdn4E8XZQ/Lzqom9U4uUAJ8wd7yDmyGVP96dxwQZXLXd4sbg==} -||||||| parent of 98f7ba0e (IndexedDB local search) - focus-trap-react@10.3.1: - resolution: {integrity: sha512-PN4Ya9xf9nyj/Nd9VxBNMuD7IrlRbmaG6POAQ8VLqgtc6IY/Ln1tYakow+UIq4fihYYYFM70/2oyidE6bbiPgw==} -======= flexsearch@0.8.212: resolution: {integrity: sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==} - focus-trap-react@10.3.1: - resolution: {integrity: sha512-PN4Ya9xf9nyj/Nd9VxBNMuD7IrlRbmaG6POAQ8VLqgtc6IY/Ln1tYakow+UIq4fihYYYFM70/2oyidE6bbiPgw==} ->>>>>>> 98f7ba0e (IndexedDB local search) + focus-trap-react@12.0.3: + resolution: {integrity: sha512-4eXtzhRTtFrxle9Tkl0Wkj8SFJnWz3i3yb5e53Mdn4E8XZQ/Lzqom9U4uUAJ8wd7yDmyGVP96dxwQZXLXd4sbg==} peerDependencies: '@types/react': ^18.0.0 || ^19.0.0 '@types/react-dom': ^18.0.0 || ^19.0.0 @@ -8145,15 +8137,9 @@ snapshots: flatted@3.4.2: {} -<<<<<<< HEAD - focus-trap-react@12.0.3(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): -||||||| parent of 98f7ba0e (IndexedDB local search) - focus-trap-react@10.3.1(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): -======= flexsearch@0.8.212: {} - focus-trap-react@10.3.1(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): ->>>>>>> 98f7ba0e (IndexedDB local search) + focus-trap-react@12.0.3(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@types/react': 18.3.31 '@types/react-dom': 18.3.7(@types/react@18.3.31) From 04bdfcad54ddec500b82dbb4787bade5b920a450 Mon Sep 17 00:00:00 2001 From: niki <295591807+nikiwastaken@users.noreply.github.com> Date: Mon, 6 Jul 2026 08:41:54 +0000 Subject: [PATCH 7/7] Various fixes --- src/app/components/SearchIndexProvider.tsx | 14 +++-- .../developer-tools/SearchIndexCache.tsx | 18 ------ .../settings/experimental/SearchIDB.tsx | 62 ++++++++++++++++++- src/app/features/settings/settingsLink.ts | 1 + src/app/hooks/useSearchIndex.ts | 2 +- src/app/plugins/search-indexer/index.ts | 11 +++- src/app/plugins/search-indexer/types.ts | 1 + src/app/state/settings.ts | 2 + 8 files changed, 84 insertions(+), 27 deletions(-) diff --git a/src/app/components/SearchIndexProvider.tsx b/src/app/components/SearchIndexProvider.tsx index 6d77d054e7..fb50f09638 100644 --- a/src/app/components/SearchIndexProvider.tsx +++ b/src/app/components/SearchIndexProvider.tsx @@ -104,6 +104,7 @@ type PendingQuery = { export function SearchIndexProvider({ children }: { children: ReactNode }) { const mx = useMatrixClient(); const [idbSearchIndex] = useSetting(settingsAtom, 'idbSearchIndex'); + const [maxResults] = useSetting(settingsAtom, 'idbSearchMaxResults'); const [isReady, setIsReady] = useState(false); const [isBackfilling, setIsBackfilling] = useState(false); @@ -559,13 +560,14 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { type: WorkerMessageTypeIn.Query, id, term, + maxResults, roomIds: opts?.roomIds, senders: opts?.senders, hasTypes: opts?.hasTypes, }); }); }, - [isReady, postToWorker] + [isReady, maxResults, postToWorker] ); const state = useCallback((): Promise => { @@ -589,9 +591,13 @@ export function SearchIndexProvider({ children }: { children: ReactNode }) { if (!workerRef.current || !isReady) { return Promise.resolve(); } - return new Promise(() => { - postToWorker({ type: WorkerMessageTypeIn.Clear }); - }); + postToWorker({ type: WorkerMessageTypeIn.Clear }); + headlessSetsRef.current.clear(); + for (const cancel of cancelIdlesRef.current) cancel(); + cancelIdlesRef.current = []; + backfillingRoomsRef.current.clear(); + setIsBackfilling(false); + return Promise.resolve(); }, [isReady, postToWorker]); const ctx = useMemo( diff --git a/src/app/features/settings/developer-tools/SearchIndexCache.tsx b/src/app/features/settings/developer-tools/SearchIndexCache.tsx index 628744887b..9bb7e7c9e9 100644 --- a/src/app/features/settings/developer-tools/SearchIndexCache.tsx +++ b/src/app/features/settings/developer-tools/SearchIndexCache.tsx @@ -62,24 +62,6 @@ export function SearchIndexCache() { description={`Building history index in the background (${stats?.backfillingRoomCount ?? '…'} rooms remaining)…`} /> )} - {/* setSearchIndexMessageLimit(Number(e.target.value))} - style={{ padding: '4px 8px', borderRadius: '4px' }} - > - {LIMIT_OPTIONS.map((opt) => ( - - ))} - - } - /> */} = (evt) => { + const val = evt.target.value; + setInputValue(val); + + const parsed = Number.parseInt(val, 10); + if (!Number.isNaN(parsed) && parsed >= 1 && parsed <= 10) { + setMaxCount(parsed); + } + }; + + const handleKeyDown: KeyboardEventHandler = (evt) => { + if (isKeyHotkey('escape', evt)) { + evt.stopPropagation(); + setInputValue(maxCount.toString()); + (evt.target as HTMLInputElement).blur(); + } + + if (isKeyHotkey('enter', evt)) { + (evt.target as HTMLInputElement).blur(); + } + }; + + return ( + + ); +} export function SearchIDBToggle() { const [enabledIdbSearchIndex, setEnabledIdbSearchIndex] = useSetting( @@ -37,6 +84,19 @@ export function SearchIDBToggle() { } /> + + } + /> + ); } diff --git a/src/app/features/settings/settingsLink.ts b/src/app/features/settings/settingsLink.ts index 4794f0ac49..930c776924 100644 --- a/src/app/features/settings/settingsLink.ts +++ b/src/app/features/settings/settingsLink.ts @@ -216,6 +216,7 @@ const settingsLinkFocusIdsBySection: Record Promise; query: ( term: string, opts?: { roomIds?: string[]; senders?: string[]; hasTypes?: string[] } diff --git a/src/app/plugins/search-indexer/index.ts b/src/app/plugins/search-indexer/index.ts index e7034a6418..9a6206d997 100644 --- a/src/app/plugins/search-indexer/index.ts +++ b/src/app/plugins/search-indexer/index.ts @@ -216,7 +216,7 @@ self.addEventListener('message', async (event: MessageEvent matchesFilters(v)).slice(0, 1000); + [...document.store.values()].filter((v) => matchesFilters(v)).slice(0, msg.maxResults); post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: results }); return; @@ -231,7 +231,8 @@ self.addEventListener('message', async (event: MessageEvent r.result.map((v) => v.doc!)) .filter((r) => r != undefined) - .filter((v) => matchesFilters(v)); + .filter((v) => matchesFilters(v)) + .slice(0, msg.maxResults); post({ type: WorkerMessageTypeOut.QueryResult, id: msg.id, events: result }); @@ -249,7 +250,11 @@ self.addEventListener('message', async (event: MessageEvent