diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3b4451..03a98c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+- Made Manage search fast and current by using Roam's bounded frontend search and clearing stale suggestions as queries change.
+- Kept the first Escape press in Manage mode focused on clearing the current search.
+- Made selected rows theme-aware and replaced custom footer buttons with Blueprint controls.
- Moved saved-entry add and remove workflows into a Manage tab in the Quick Switcher dialog.
- Replaced saved-entry settings controls with a Manage Saved Entries button.
- Restyled the Quick Switcher dialog to follow Roam's native search layout and colors.
diff --git a/src/components/QuickSwitcherDialog.tsx b/src/components/QuickSwitcherDialog.tsx
index 3e73856..42466e6 100644
--- a/src/components/QuickSwitcherDialog.tsx
+++ b/src/components/QuickSwitcherDialog.tsx
@@ -83,12 +83,6 @@ const SEARCH_INPUT_STYLE: React.CSSProperties = {
boxShadow: "none",
};
-const SELECTED_ROW_STYLE: React.CSSProperties = {
- backgroundColor: "#dce4eb",
- borderRadius: 4,
- color: "inherit",
-};
-
const showToast = ({
content,
intent = "none",
@@ -165,16 +159,17 @@ const FooterActionButton = ({
onClick,
showEnter,
}: FooterActionButtonProps): React.ReactElement => (
-
+
);
const QuickSwitcherDialog = ({
@@ -319,6 +314,7 @@ const QuickSwitcherDialog = ({
useEffect((): void | (() => void) => {
const requestId = searchRequestRef.current + 1;
searchRequestRef.current = requestId;
+ setSuggestions([]);
setSelectedSuggestionIndex(0);
if (mode !== "manage" || normalizedEntryInput.length < 2) {
@@ -365,12 +361,23 @@ const QuickSwitcherDialog = ({
);
const clearEntryInput = useCallback((): void => {
+ searchRequestRef.current += 1;
setEntryInput("");
setSuggestions([]);
setSelectedSuggestionIndex(0);
setIsSearching(false);
}, []);
+ const onManageEntryInputChange = useCallback(
+ (event: React.ChangeEvent): void => {
+ searchRequestRef.current += 1;
+ setEntryInput(event.target.value);
+ setSuggestions([]);
+ setSelectedSuggestionIndex(0);
+ },
+ [],
+ );
+
const addSuggestion = useCallback(
({ suggestion }: { suggestion: QuickSwitcherEntrySuggestion }): boolean => {
const key = getSuggestionTargetKey({ suggestion });
@@ -620,6 +627,7 @@ const QuickSwitcherDialog = ({
if (event.key === "Escape") {
if (entryInput || suggestions.length) {
event.preventDefault();
+ event.stopPropagation();
clearEntryInput();
return;
}
@@ -681,7 +689,7 @@ const QuickSwitcherDialog = ({
leftIcon="search"
onChange={(event: React.ChangeEvent): void => {
if (mode === "manage") {
- setEntryInput(event.target.value);
+ onManageEntryInputChange(event);
return;
}
setQuery(event.target.value);
@@ -831,10 +839,10 @@ const QuickSwitcherDialog = ({