Keyboard shortcuts & command menu #705

hatemhosny · 2025-01-04T22:16:48Z

What type of PR is this? (check all applicable)

Description

This PR adds

Command menu (Ctrl + K)
Many keyboard shortcuts
The UI shows the keyboard shortcuts (in title attributes or <kbd> elements)
Keyboard shortcut menu showing the full collection of shortcuts

Related Tickets & Documents

as discussed in #630

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentations?

~~TODO: add to features section in docs~~

📓 docs (./docs)
📕 storybook (./storybook)
📜 README.md
🙅 no documentation needed

[optional] Are there any post-merge tasks we need to perform?

translations

@zyf722 @gigamaster
Would you kindly have a look here at your convenience?
I'd like to know your general opinion, opinions about functionality, UI, selection of keyboard shortcuts and obviously if you find any issues.
Thank you.

netlify · 2025-01-04T22:17:08Z

✅ Deploy Preview for livecodes ready!

Name	Link
🔨 Latest commit	`73cb1f4`
🔍 Latest deploy log	https://app.netlify.com/sites/livecodes/deploys/678283b3679dd90008ec92bf
😎 Deploy Preview	https://deploy-preview-705--livecodes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

cloudflare-workers-and-pages · 2025-01-04T22:40:09Z

Deploying livecodes with Cloudflare Pages

Latest commit:	`73cb1f4`
Status:	✅ Deploy successful!
Preview URL:	https://b640adc1.livecodes.pages.dev
Branch Preview URL:	https://keyboard-shortcuts.livecodes.pages.dev

View logs

zyf722 · 2025-01-08T16:09:59Z

A very useful feature! I believe this will be a great addition to the app 🚀

Here are some issues and suggestions on it:

Potential Issues

Some actions like "About" and "Login" didn't work in some cases.
- "Login" worked when I searched for "login" in the command palette, but not when no query was entered.
Scrollbar styles for these two screens are not applied in my Google Chrome 118. I tested with the latest version of Edge, and it worked fine there, so I guess there might be some compatibility issues.

Personal Suggestions

From my point of view, the "Keyboard Shortcuts" screen might be a bit confusing due to its similar appearance to the command palette. I would personally prefer using a table- or grid-based layout.
- From Google Docs
- From Figma
- By the way, will users be able to customize the shortcuts in the future?
From an i18n perspective, I suggest using a bilingual approach for the command palette, where the English text is displayed alongside the localized text. This way, users can search for commands in both their preferred language and English.
- Take a reference from what we have in VSCode:

hatemhosny · 2025-01-08T18:14:29Z

Thank you, @zyf722
These are all very useful comments

Some actions like "About" and "Login" didn't work in some cases.

"Login" worked when I searched for "login" in the command palette, but not when no query was entered.

I can reproduce that. I'll try to get a fix. Thank you.

Scrollbar styles for these two screens are not applied in my Google Chrome 118. I tested with the latest version of Edge, and it worked fine there, so I guess there might be some compatibility issues.

I did not get that in my browser, but I can think of a reason. I'll try to fix.

From my point of view, the "Keyboard Shortcuts" screen might be a bit confusing due to its similar appearance to the command palette. I would personally prefer using a table- or grid-based layout.

That's a good suggestion. It was just easy to implement, without code duplication by filtering the commands based if they have shortcuts and put it in a single list.
May be I can still get the data the same way but put that in a grid in a regular modal instead.
I'll explore and let you know.

By the way, will users be able to customize the shortcuts in the future?

I did not think of that.
Probably not for now. Possible things to think about:

We need to (locally) store the preferences as user data.
Avoid conflicts with other app shortcuts and editor shortcuts.
Some shortcuts do not work in the browser (e.g. Ctrl + N), even if you prevent default.

I think I will leave it like this for now and revisit this suggestion later.

From an i18n perspective, I suggest using a bilingual approach for the command palette, where the English text is displayed alongside the localized text. This way, users can search for commands in both their preferred language and English.

Good Idea!
Do we need to show both?
The library I use allows you to add a string of text to be used for search result without having to show it.

Thank you very much.
That was very helpful.

hatemhosny · 2025-01-09T15:01:30Z

@zyf722

Some actions like "About" and "Login" didn't work in some cases.

"Login" worked when I searched for "login" in the command palette, but not when no query was entered.

This was a race condition with double event firing. Fixed.

Scrollbar styles for these two screens are not applied in my Google Chrome 118. I tested with the latest version of Edge, and it worked fine there, so I guess there might be some compatibility issues.

This would be difficult to fix. The affected element is inside a web component with shadow DOM.
The styles are applied using ::part, which is only available in modern browsers.
Otherwise we will have to change the library source code.

From my point of view, the "Keyboard Shortcuts" screen might be a bit confusing due to its similar appearance to the command palette. I would personally prefer using a table- or grid-based layout.

How about this? :)

From an i18n perspective, I suggest using a bilingual approach for the command palette, where the English text is displayed alongside the localized text. This way, users can search for commands in both their preferred language and English.

I added that. In languages other than English, English text will be displayed beneath each command. It can be searched.

I think this is much better. Thank you for the suggestions.

zyf722 · 2025-01-10T15:40:09Z

@hatemhosny

Probably not for now. Possible things to think about:

We need to (locally) store the preferences as user data.

Avoid conflicts with other app shortcuts and editor shortcuts.

Some shortcuts do not work in the browser (e.g. Ctrl + N), even if you prevent default.

I agree with not implementing this feature for now. It indeed needs extra effort and consideration to implement this feature.

This would be difficult to fix. The affected element is inside a web component with shadow DOM.
The styles are applied using ::part, which is only available in modern browsers.
Otherwise we will have to change the library source code.

It's fully acceptable. Tried with BrowserStack and it does have something to do with the browser version. I believe we can leave it as is for now. Thank you for your efforts to fix this.

How about this? :)

Looks quite nice! Does the tip above change with other editors when selected by user, like CodeJar and CodeMirror?

I added that. In languages other than English, English text will be displayed beneath each command. It can be searched.

Great!

I think we could make it even more compact by removing the row gap and separator line between localized and English text. I believe the command palette will be more space-efficient this way.

hatemhosny · 2025-01-10T16:27:28Z

Looks quite nice! Does the tip above change with other editors when selected by user, like CodeJar and CodeMirror?

I use vscode key bindings extension for CodeMirror. So most of the shortcuts should also work.
Regarding CodeJar, I do not aim at feature pariry with other editors. It is stated in the docs that it is a minimal code editor that works only for trivial tasks.

I think we could make it even more compact by removing the row gap and separator line between localized and English text. I believe the command palette will be more space-efficient this way.

The top border and top padding are removed (also using ::part!)

sonarqubecloud · 2025-01-11T14:44:59Z

Quality Gate failed

Failed conditions
7.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

livecodes-ci · 2025-01-11T20:51:21Z

i18n Actions

Source PR has been merged into the default branch.

Maintainers can comment .i18n-update-push to trigger the i18n update workflow and push the changes to Lokalise.

hatemhosny · 2025-01-11T21:03:09Z

.i18n-update-push

livecodes-ci · 2025-01-11T21:05:32Z

i18n Actions: `.i18n-update-push`

Localization updated and pushed to Lokalise.

Name	Description
New Branch for i18n	`i18n/live-codes/keyboard-shortcuts`
Last Commit SHA	`4338676`

Maintainers can comment .i18n-update-pull after translation is done to trigger the i18n pull workflow and pull the changes back to Github.

zyf722 · 2025-01-17T16:03:31Z

It seems there might be another bug.

Some actions are not sorted as the first action in the list, even they match the user's query exactly:

hatemhosny · 2025-01-17T16:46:25Z

This is related to using fuzzy search. If we disable fuzzy search we get less results but better sorting.
I think I will do that.
Thank you.

hatemhosny · 2025-01-22T19:53:08Z

.i18n-update-pull

livecodes-ci · 2025-01-22T19:53:33Z

i18n Actions: `.i18n-update-pull`

Failed to perform action due to following reason: Branch i18n/live-codes/keyboard-shortcuts does not exist.

Please check action logs for more details.

hatemhosny · 2025-01-22T19:55:52Z

.i18n-update-pull

livecodes-ci · 2025-01-22T19:58:04Z

i18n Actions: `.i18n-update-pull`

Localization pulled from Lokalise.

Name	Description
i18n Branch	`i18n/live-codes/keyboard-shortcuts`
Last Commit SHA	`f90dbe9`
i18n PR	#721

hatemhosny · 2025-01-22T20:23:00Z

.i18n-update-pull

gigamaster · 2025-01-28T13:20:54Z

This looks great. I'll try it asap. Well done ^_^/

gigamaster · 2025-01-28T14:42:22Z

Translation ES, FR, IT, JA, PT

⚠ Note
It seems the same keyboard shortcut is used for sharing and saving !?

TODO - Test if any < tag- > is missing or overriten that could break the layout!

hatemhosny · 2025-01-28T23:38:00Z

Welcome back @gigamaster :)
I hope you are doing very well and had good travel.

Translation ES, FR, IT, JA, PT

Thank you very much. That's great.

It seems the same keyboard shortcut is used for sharing and saving !?

Save (Ctrl + S)
Save as (Ctrl + Shift + S)
Share (Ctrl + Alt + S)

Could you notice any inconsistent behaviour?

TODO - Test if any < tag- > is missing or overriten that could break the layout!

It seems they are good. When I filter by "Inconsistent placeholders", I get no results.
Am I correct @zyf722 ?
Also should we expect the scheduled sync to start a PR for the new changes on Lokalise master branch?

gigamaster · 2025-01-29T11:34:39Z

Obviously I'm still jetlagged and must have misread the +alt and +shift keyboard shortcuts
After a nap I'll review my proxy settings as the SSH connection seems slow, or maybe it's just me 😅
I'll then merge and try the latest version. All good. Hope you're doing well ^_^/

hatemhosny added 8 commits December 23, 2024 02:34

feat(App): add keyboard shortcuts

2972855

feat(UI): show keyboard shortcuts in UI

8860f67

fix(i18n): fix i18n-export (prop indexing vs getAttribute)

a3e83d4

feat(CommandMenu): add command menu

9cba67a

fix(Editor): fix autocompleting TS generics as JSX

81402c8

fix(services): fix auth service bug for undefined user

9daa9a5

feat(CommandMenu): add command menu items

b08aabc

feat(CommandMenu): add keyboard shortcuts menu

2d60494

fixes

52e6210

hatemhosny and others added 6 commits January 5, 2025 00:43

Merge branch 'develop' into keyboard-shortcuts

09668b2

ignore false positive typos

ff7eef6

fix

f7cb7b9

fix

ef19399

update cdn url

d5ec367

ci: increase bundlewatch maximum size

0755139

hatemhosny mentioned this pull request Jan 5, 2025

Suggestions KonnorRogers/konnors-ninja-keys#23

Open

hatemhosny and others added 3 commits January 6, 2025 00:27

docs(CommandMenu): add docs for command menu and keyboard shortcuts

93df43e

fixes

d6d0c78

Merge branch 'develop' into keyboard-shortcuts

a3f60a1

hatemhosny added 6 commits January 9, 2025 04:28

fix scrollbar styles

b405668

fix modal race condition

da8e74c

Merge branch 'develop' into keyboard-shortcuts

af6d72d

provide bilingual commands in command menu for easy search

b4ce325

feat(App): add keyboard shortcuts screen

a4491ee

style fix

35245ca

style bilingual command menu actions

fbdd87f

hatemhosny and others added 4 commits January 10, 2025 21:21

skip flaky e2e test

e374587

Merge branch 'develop' into keyboard-shortcuts

e0fa310

fix duplicate i18n key

9acf7bd

Merge branch 'develop' into keyboard-shortcuts

73cb1f4

hatemhosny merged commit 4338676 into develop Jan 11, 2025
17 of 18 checks passed

hatemhosny deleted the keyboard-shortcuts branch January 11, 2025 20:52

hatemhosny mentioned this pull request Jan 15, 2025

Add translations for command menu #716

Closed

livecodes-ci bot mentioned this pull request Jan 22, 2025

i18n: Keyboard shortcuts & command menu #721

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Keyboard shortcuts & command menu #705

Keyboard shortcuts & command menu #705

hatemhosny commented Jan 4, 2025 •

edited

Loading

netlify bot commented Jan 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 4, 2025 •

edited

Loading

zyf722 commented Jan 8, 2025

hatemhosny commented Jan 8, 2025

hatemhosny commented Jan 9, 2025

zyf722 commented Jan 10, 2025 •

edited

Loading

hatemhosny commented Jan 10, 2025

sonarqubecloud bot commented Jan 11, 2025

livecodes-ci bot commented Jan 11, 2025

hatemhosny commented Jan 11, 2025

livecodes-ci bot commented Jan 11, 2025

zyf722 commented Jan 17, 2025

hatemhosny commented Jan 17, 2025

hatemhosny commented Jan 22, 2025

livecodes-ci bot commented Jan 22, 2025

hatemhosny commented Jan 22, 2025

livecodes-ci bot commented Jan 22, 2025

hatemhosny commented Jan 22, 2025

gigamaster commented Jan 28, 2025

gigamaster commented Jan 28, 2025

hatemhosny commented Jan 28, 2025 •

edited

Loading

gigamaster commented Jan 29, 2025

Keyboard shortcuts & command menu #705

Keyboard shortcuts & command menu #705

Conversation

hatemhosny commented Jan 4, 2025 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentations?

[optional] Are there any post-merge tasks we need to perform?

netlify bot commented Jan 4, 2025 • edited Loading

✅ Deploy Preview for livecodes ready!

cloudflare-workers-and-pages bot commented Jan 4, 2025 • edited Loading

Deploying livecodes with Cloudflare Pages

zyf722 commented Jan 8, 2025

Potential Issues

Personal Suggestions

hatemhosny commented Jan 8, 2025

hatemhosny commented Jan 9, 2025

zyf722 commented Jan 10, 2025 • edited Loading

hatemhosny commented Jan 10, 2025

sonarqubecloud bot commented Jan 11, 2025

Quality Gate failed

livecodes-ci bot commented Jan 11, 2025

i18n Actions

hatemhosny commented Jan 11, 2025

livecodes-ci bot commented Jan 11, 2025

i18n Actions: .i18n-update-push

zyf722 commented Jan 17, 2025

hatemhosny commented Jan 17, 2025

hatemhosny commented Jan 22, 2025

livecodes-ci bot commented Jan 22, 2025

i18n Actions: .i18n-update-pull

hatemhosny commented Jan 22, 2025

livecodes-ci bot commented Jan 22, 2025

i18n Actions: .i18n-update-pull

hatemhosny commented Jan 22, 2025

gigamaster commented Jan 28, 2025

gigamaster commented Jan 28, 2025

hatemhosny commented Jan 28, 2025 • edited Loading

gigamaster commented Jan 29, 2025

hatemhosny commented Jan 4, 2025 •

edited

Loading

netlify bot commented Jan 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 4, 2025 •

edited

Loading

zyf722 commented Jan 10, 2025 •

edited

Loading

i18n Actions: `.i18n-update-push`

i18n Actions: `.i18n-update-pull`

i18n Actions: `.i18n-update-pull`

hatemhosny commented Jan 28, 2025 •

edited

Loading