diff --git a/fluxer_app/src/features/channel/components/message_search_bar/AutocompleteOption.tsx b/fluxer_app/src/features/channel/components/message_search_bar/AutocompleteOption.tsx index ca46ffdd8..30d063025 100644 --- a/fluxer_app/src/features/channel/components/message_search_bar/AutocompleteOption.tsx +++ b/fluxer_app/src/features/channel/components/message_search_bar/AutocompleteOption.tsx @@ -16,10 +16,11 @@ interface AutocompleteOptionProps { onMouseLeave?: () => void; children: React.ReactNode; listboxId: string; + metaIcon?: React.ReactNode; } export const AutocompleteOption: React.FC = observer( - ({index, isSelected, isHovered, onSelect, onMouseEnter, onMouseLeave, children, listboxId}) => { + ({index, isSelected, isHovered, onSelect, onMouseEnter, onMouseLeave, children, listboxId, metaIcon}) => { const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (isKeyboardActivationKey(e.key)) { @@ -48,11 +49,20 @@ export const AutocompleteOption: React.FC = observer( data-flx="channel.message-search-bar.autocomplete-option.option.select" > {children} - + {metaIcon == null ? ( + + ) : ( + + {metaIcon} + + )} ); }, diff --git a/fluxer_app/src/features/channel/components/message_search_bar/ChannelsSection.tsx b/fluxer_app/src/features/channel/components/message_search_bar/ChannelsSection.tsx index 32cd25708..21d1b90fe 100644 --- a/fluxer_app/src/features/channel/components/message_search_bar/ChannelsSection.tsx +++ b/fluxer_app/src/features/channel/components/message_search_bar/ChannelsSection.tsx @@ -4,6 +4,7 @@ import {AutocompleteOption} from '@app/features/channel/components/message_searc import styles from '@app/features/channel/components/message_search_bar/MessageSearchBar.module.css'; import type {Channel} from '@app/features/channel/models/Channel'; import * as ChannelUtils from '@app/features/channel/utils/ChannelUtils'; +import {resolveSearchChannelDisplayName} from '@app/features/search/utils/SearchQueryParser'; import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {msg} from '@lingui/core/macro'; import {useLingui} from '@lingui/react/macro'; @@ -71,7 +72,7 @@ export const ChannelsSection: React.FC = observer( className={styles.channelName} data-flx="channel.message-search-bar.channels-section.channel-name" > - {channelOption.name || 'Unnamed Channel'} + {resolveSearchChannelDisplayName(channelOption) || 'Unnamed Channel'} diff --git a/fluxer_app/src/features/channel/components/message_search_bar/HistorySection.tsx b/fluxer_app/src/features/channel/components/message_search_bar/HistorySection.tsx index 25e4486ab..2002a9bc2 100644 --- a/fluxer_app/src/features/channel/components/message_search_bar/HistorySection.tsx +++ b/fluxer_app/src/features/channel/components/message_search_bar/HistorySection.tsx @@ -3,10 +3,9 @@ import {AutocompleteOption} from '@app/features/channel/components/message_search_bar/AutocompleteOption'; import {FilterOption} from '@app/features/channel/components/message_search_bar/FilterOption'; import styles from '@app/features/channel/components/message_search_bar/MessageSearchBar.module.css'; +import type {HistoryFilterRow} from '@app/features/channel/components/message_search_bar/MessageSearchBarTypes'; import type {SearchHistoryEntry} from '@app/features/search/state/SearchHistory'; -import SearchHistory from '@app/features/search/state/SearchHistory'; import {formatSearchHistoryEntryForStreamerMode} from '@app/features/search/utils/SearchPrivacyUtils'; -import type {SearchFilterOption} from '@app/features/search/utils/SearchUtils'; import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {msg} from '@lingui/core/macro'; import {useLingui} from '@lingui/react/macro'; @@ -34,13 +33,12 @@ interface HistorySectionProps { onMouseEnter: (index: number) => void; onMouseLeave?: () => void; listboxId: string; - isInGuild: boolean; - channelId?: string; onHistoryClear: () => void; - onFilterSelect: (filter: SearchFilterOption, index: number) => void; + onFilterSelect: (row: HistoryFilterRow, index: number) => void; onFilterMouseEnter: (index: number) => void; onFilterMouseLeave?: () => void; - filterOptions: Array; + filterRows: Array; + historyOptions: Array; } export const HistorySection: React.FC = observer( @@ -51,19 +49,14 @@ export const HistorySection: React.FC = observer( onMouseEnter, onMouseLeave, listboxId, - isInGuild, - channelId, onHistoryClear, onFilterSelect, onFilterMouseEnter, onFilterMouseLeave, - filterOptions, + filterRows, + historyOptions, }) => { const {i18n} = useLingui(); - const historyOptions = SearchHistory.search('', channelId).slice(0, 5); - const commonFilters = filterOptions - .filter((opt) => !opt.requiresGuild || isInGuild) - .filter((opt) => !opt.key.startsWith('-')); return ( <>
@@ -83,20 +76,25 @@ export const HistorySection: React.FC = observer( {i18n._(SEARCH_FILTERS_DESCRIPTOR)}
- {commonFilters.map((option: SearchFilterOption, index) => ( - onFilterSelect(option, index)} - onMouseEnter={() => onFilterMouseEnter(index)} - onMouseLeave={onFilterMouseLeave} - listboxId={listboxId} - data-flx="channel.message-search-bar.history-section.filter-option.filter-select" - /> - ))} + {filterRows.map((row: HistoryFilterRow, index) => { + if (row.kind === 'filter') { + return ( + onFilterSelect(row, index)} + onMouseEnter={() => onFilterMouseEnter(index)} + onMouseLeave={onFilterMouseLeave} + listboxId={listboxId} + data-flx="channel.message-search-bar.history-section.filter-option.filter-select" + /> + ); + } + return null; + })} {historyOptions.length > 0 && (
@@ -138,11 +136,11 @@ export const HistorySection: React.FC = observer( return ( onSelect(entry)} - onMouseEnter={() => onMouseEnter(commonFilters.length + index)} + onMouseEnter={() => onMouseEnter(filterRows.length + index)} onMouseLeave={onMouseLeave} listboxId={listboxId} data-flx="channel.message-search-bar.history-section.autocomplete-option.select" diff --git a/fluxer_app/src/features/channel/components/message_search_bar/MessageSearchBar.tsx b/fluxer_app/src/features/channel/components/message_search_bar/MessageSearchBar.tsx index 3787e6c08..b99d7258e 100644 --- a/fluxer_app/src/features/channel/components/message_search_bar/MessageSearchBar.tsx +++ b/fluxer_app/src/features/channel/components/message_search_bar/MessageSearchBar.tsx @@ -5,8 +5,12 @@ import {DateSection} from '@app/features/channel/components/message_search_bar/D import {FiltersSection} from '@app/features/channel/components/message_search_bar/FilterOption'; import {HistorySection} from '@app/features/channel/components/message_search_bar/HistorySection'; import styles from '@app/features/channel/components/message_search_bar/MessageSearchBar.module.css'; -import type {SearchBarProps} from '@app/features/channel/components/message_search_bar/MessageSearchBarTypes'; +import type { + PlaintextAutocompleteRow, + SearchBarProps, +} from '@app/features/channel/components/message_search_bar/MessageSearchBarTypes'; import {SCOPE_ICON_COMPONENTS} from '@app/features/channel/components/message_search_bar/MessageSearchBarUtils'; +import {PlaintextSection} from '@app/features/channel/components/message_search_bar/PlaintextSection'; import {UsersSection} from '@app/features/channel/components/message_search_bar/UsersSection'; import {useMessageSearchAutocomplete} from '@app/features/channel/components/message_search_bar/useMessageSearchAutocomplete'; import {ValuesSection} from '@app/features/channel/components/message_search_bar/ValuesSection'; @@ -15,14 +19,17 @@ import type {Channel} from '@app/features/channel/models/Channel'; import ChannelSearch, {getChannelSearchContextId} from '@app/features/channel/state/ChannelSearch'; import {CLEAR_SEARCH_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors'; import {LexicalSearchInput} from '@app/features/lexical/search/LexicalSearchInput'; +import {SEARCH_INPUT_MAX_LENGTH, shouldShowSearchInputCounter} from '@app/features/lexical/search/SearchEditorModel'; import SelectedGuild from '@app/features/navigation/state/SelectedGuild'; import {useParams} from '@app/features/platform/components/router/RouterReact'; import {PASSWORD_MANAGER_IGNORE_ATTRIBUTES} from '@app/features/platform/utils/PasswordManagerAutocomplete'; +import type {SearchHistoryEntry} from '@app/features/search/state/SearchHistory'; import type {MessageSearchScope, SearchFilterOption} from '@app/features/search/utils/SearchUtils'; import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {ContextMenuCloseProvider} from '@app/features/ui/action_menu/ContextMenu'; import {MenuGroup} from '@app/features/ui/action_menu/MenuGroup'; import {MenuItemRadio} from '@app/features/ui/action_menu/MenuItemRadio'; +import {CharacterCounter} from '@app/features/ui/character_counter/CharacterCounter'; import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands'; import {usePortalHost} from '@app/features/ui/overlay/PortalHostContext'; import KeyboardMode from '@app/features/ui/state/KeyboardMode'; @@ -73,6 +80,8 @@ const ACTIVE_SUGGESTION_POSITION_DESCRIPTOR = msg({ comment: 'Screen-reader live-region announcement of the currently highlighted message search suggestion position. Preserve {position} and {total}; they are inserted by code.', }); +const noopUpgradeClick = () => {}; + export const MessageSearchBar = observer( ({ channel, @@ -177,7 +186,7 @@ export const MessageSearchBar = observer( inputRef, setInputRefs, setSuppressAutoOpen, - filterOptions, + historyFilterRows, listboxId, keyboardFocusIndex, hoverIndexForRender, @@ -208,6 +217,7 @@ export const MessageSearchBar = observer( contextId, inputRefExternal, isResultsOpen, + onCloseResults, }); const portalHost = usePortalHost(); const {refs, floatingStyles, isPositioned} = useFloating({ @@ -254,8 +264,6 @@ export const MessageSearchBar = observer( onMouseEnter={handleOptionMouseEnter} onMouseLeave={handleOptionMouseLeave} listboxId={listboxId} - isInGuild={isInGuildChannel} - channelId={channel?.id} onHistoryClear={handleHistoryClear} onFilterSelect={handleFilterSelect} onFilterMouseEnter={(index) => { @@ -263,7 +271,8 @@ export const MessageSearchBar = observer( setHasInteracted(true); }} onFilterMouseLeave={handleOptionMouseLeave} - filterOptions={filterOptions} + filterRows={historyFilterRows} + historyOptions={getAutocompleteOptions() as Array} data-flx="channel.message-search-bar.message-search-bar.render-autocomplete-content.history-section.autocomplete-select" /> ); @@ -308,6 +317,19 @@ export const MessageSearchBar = observer( data-flx="channel.message-search-bar.message-search-bar.render-autocomplete-content.values-section.autocomplete-select" /> ); + case 'plaintext': + return ( + } + selectedIndex={keyboardFocusIndex} + hoverIndex={hoverIndexForRender} + onSelect={handleAutocompleteSelect} + onMouseEnter={handleOptionMouseEnter} + onMouseLeave={handleOptionMouseLeave} + listboxId={listboxId} + data-flx="channel.message-search-bar.message-search-bar.render-autocomplete-content.plaintext-section.autocomplete-select" + /> + ); case 'date': return ( + {shouldShowSearchInputCounter(value.length) && ( + + )} {hasValue && (