Add initial keyboard shortcuts

[keturiosakys]

related to FP-3765

Initial PR for experimenting with keyboard shortcuts in the mizu-fpx app.

It adds a generic useKeySequence hook that can be used to add keyboard shortcuts to any React component.

It also adds a basic navigation hook for up/down the request table, and enter/escape for jumping to the details and back home.

TODO:

• [ ] I didn't add any scope yet so the keyboard shortcuts are global to the component. Probably worth figuring out some sort of scope system.
• Currently the app will crash for the first row you attempt to navigate to..investigating

[brettimus]

keebs

[brettimus]

hmm doesn't seem to work for me when i pull it down. i only have one row in my table fwiw. it gets auto selected, but pressing enter does nothing.

then if i press j, the row gets unselected, and if i hit enter again, the app crashes (will comment on the code that crashes)

The code that causes the crash is in Requests.tsx in the <DataTable ...

      // `row` is not defined when i press enter, which causes this to crash
      handleRowClick={(row) => navigate(`/requests/${row.id}`)}

[brettimus]

also when i navigate with enter i have to hit back twice in the browser to go back to the requests page

[keturiosakys]

yea ran into this myself with 1 row. Think the hook + its use needs some rework.. brb

[keturiosakys]

should be fixed (except the history issue) @brettimus can you give it a try?

[brettimus]

yep seems fixed! i think i resolved the history issue, kinda hard to explain, but the gist of it is that you should avoid side-effects in a state-updater function. react got confused.

i moved the problematic logic outside of the state-updater, and put it inside its own useEffect. no more history woes but it's late and i might've borked something else 🥴

[flenter]

Some stylistic feedback.