new-log-viewer: Implement MenuBar and StatusBar with JoyUI components; add JoyUI custom app theme.

[Henry8192]

References

new-log-viewer series: #45 #46 #48 #51 #52 #53 #54 #55 #56 #57

Description

App Theme

Use JoyUI components for Button, Select, and Input. In App.js, CssVarsProvider is added as a root provider to provide styles for components described above.

Menu Bar

• Four navigation buttons: used for jumping to first, previous, next and last page.
• File open button: used for open a new file.
• Settings button: used to set various options, like page size.
  • Theme toggle button: Toggle between light, dark and system.
• Tips button: Show keyboard shortcuts. Currently is a no-op.

Status Bar

Display status message and a button displaying current log event number. onClick, the button will copy the permalink of the current line to clipboard.

Validation performed

Open log viewer.

Menu Bar Test

Settings Test

Click settings (gear) button, toggle theme from light, system and dark, observe the color change except the monaco editor. Set page size and verify using navigation buttons.

Navigation Test

Click the four navigation buttons. Observe the change showed in the monaco editor as well as logEventNum in browser's navigation bar. Make sure to set proper pageSize in settings.

Open File Test

Click file open button, open a jsonl file locally, observe that monaco editor opens the provided log file.

Status Bar Test

Copy Permalink To Clipboard Test

Click the blue button (Log Event [current log event num] of [total log events]), it will copy the current log event's permalink to the clipboard.

[junhaoliao]

Let's work on code organization before we proceed to the next iteration of review.

[junhaoliao]

lgtm