Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: add a simple command palette #7314

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

01zulfi
Copy link
Collaborator

@01zulfi 01zulfi commented Jan 13, 2025

Signed-off-by: 01zulfi [email protected]

(selected) => (selected + 1) % filteredCommands.length
);
}
if (e.key === "ArrowUp") {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest you keep these keyboard keys as an enum in a separate file to avoid using "magic strings".

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good, maybe we can take this up in a separate PR

@01zulfi 01zulfi marked this pull request as draft January 23, 2025 10:33
@01zulfi 01zulfi force-pushed the web/command-palette branch from c3946b4 to 7505704 Compare January 24, 2025 05:58
apps/web/src/app.tsx Outdated Show resolved Hide resolved
apps/web/src/stores/command-palette-store.ts Outdated Show resolved Hide resolved
apps/web/src/stores/command-palette-store.ts Outdated Show resolved Hide resolved
apps/web/src/stores/command-palette-store.ts Outdated Show resolved Hide resolved
apps/web/src/stores/command-palette-store.ts Outdated Show resolved Hide resolved
Comment on lines 270 to 282
function getMatchingIndices(text: string, query: string) {
const indices: number[] = [];
const set = new Set(query.toLowerCase());
const lowerText = text.toLowerCase();

for (let i = 0; i < lowerText.length; i++) {
if (set.has(lowerText[i])) {
indices.push(i);
}
}

return indices;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is super funky looking and I am not sure it does what we want it too. It'll just highlight all the matching characters which isn't strictly what we want. How about using surround function from fuzzyjs?

Comment on lines +261 to +269
const result = queryClean.length > 0 ? match(queryClean, text) : false;

return (
<span
dangerouslySetInnerHTML={{
__html:
result && result.match
? surround(text, {
result: result,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have to use fuzzyjs's match again here to be able to use surround. Is this fine, or do you think we should refactor so that the lookup in core returns the object that surround expects?

@01zulfi 01zulfi requested a review from thecodrr January 27, 2025 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants