Recently Edited Side Drawer

[raineorshine]

When the user swipes from the left edge of the screen or taps the hamburger menu, a side drawer should slide out containing a list of recently edited thoughts.

Requirements

• Use well-tested side drawer React component.
• Tapping an entry should close the sidebar and navigate to the path (by dispatching setCursor).
• Entries should be rendered as ellipsized breadcrumbs. e.g. /A/B/C/D/E may be rendered as A • B • ... • E.
• Deleting a thought should remove it from the sidebar and add its context to the top. e.g. Deleting a • b • c should remove a • b • c from the list and add a • b to the top.
• Entries should be sorted by lastUpdated from most to least recently edited.
• Store and persist last 100 recently edited paths across all storage environments (state, local, and remote; see sync).
• Consolidation:
  • Adjacent entries and paths that were updated within 2 hours of each other that share a common majority subcontext should be combined into the subcontext
  • e.g. /A/B/C/D and /A/B/X/Y share the subcontext /A/B, so only a single entry /A/B should appear in the recently edited list.
  • /A/B/C/D and /A/W/X/Y do not share a common majority subcontext, since the shared subcontext /A has only one component thought while /A/B/C/D has four component thoughts.
  • Adjacent = appearing next to each other in the recently edited list
  • Consolidated thoughts count as a single entry in the "last 100" that are persisted.
• Entries should be ellipsized (shortened with ...) to keep them roughly on one line.
• Style in black-and-white to match existing app style
• Light and dark mode support

[Dipeshwagle]

Hi just found this project looks very good, react-dock seems good but it's not been actively maintained.

[raineorshine]

Yes, react-dock may be a bit outdated now. Their demo does not seem to have the edge-touch open behavior out of the box either. These are the ones I found:

• https://github.com/balloob/react-sidebar
• https://github.com/react-native-community/react-native-side-menu

[Dipeshwagle]

They both look good, but react-sidebar is implementing the material spec and I think https://material-ui.com/components/drawers/ this is a well tested and viable option.

[raineorshine]

Side Drawer Libraries Review For React JS

1. react-sidebar.

• Github: https://www.npmjs.com/package/react-sidebar

• Demo: http://balloob.github.io/react-sidebar/example/

• For

  • It is well documented.
  • It has great working demo on its page.
  • Touch open is supported.
  • Can easily customize themes and content inside the drawer.

• Against

  • It doesn’t support edge-touch to open drawer in IOS due to “swipe-to-go-back ” feature.
  • A little sloppy transition from my experience.

2. Material UI Swipeable Drawer.

• Demo: https://material-ui.com/components/drawers/

• Bit Dev: https://bit.dev/mui-org/material-ui/swipeable-drawer

• For

  • It is well documented and well supported by Material UI.
  • Touch open is supported.
  • Transition is great.
  • Can detect accidental detection of swipe gestures and has option to prevent it.
  • Can easily customize themes and content inside the drawer.
  • Can be installed separately from bit without needing to install entire material-ui/core.

• Against

  • It doesn’t support edge-touch to open drawer in IOS due to “swipe-to-go-back ” feature.

3. react-native-side-menu

• Github: https://github.com/react-native-community/react-native-side-menu

• For

  • Can be used with react native app too in future.

• Against

  • It is not well documented.
  • It doesn’t have a working demo on the web.
  • Trying to use this library with react-native-web in CRA project didn’t work as well as expected.

https://docs.google.com/document/d/1R1fxi514skRnhzmbIiYcq4UVPIQ46P0DsSfaCjTk2q8/edit

[shresthabijay]

Side Drawer Libraries Review For React JS

1. react-sidebar.

• Github: https://www.npmjs.com/package/react-sidebar

• Demo: http://balloob.github.io/react-sidebar/example/

• For

  • It is well documented.
  • It has great working demo on its page.
  • Touch open is supported.
  • Can easily customize themes and content inside the drawer.

• Against

  • It doesn’t support edge-touch to open drawer in IOS due to “swipe-to-go-back ” feature.
  • A little sloppy transition from my experience.

2. Material UI Swipeable Drawer.

• Demo: https://material-ui.com/components/drawers/

• Bit Dev: https://bit.dev/mui-org/material-ui/swipeable-drawer

• For

  • It is well documented and well supported by Material UI.
  • Touch open is supported.
  • Transition is great.
  • Can detect accidental detection of swipe gestures and has option to prevent it.
  • Can easily customize themes and content inside the drawer.
  • Can be installed separately from bit without needing to install entire material-ui/core.

• Against

  • It doesn’t support edge-touch to open drawer in IOS due to “swipe-to-go-back ” feature.

3. react-native-side-menu

• Github: https://github.com/react-native-community/react-native-side-menu

• For

  • Can be used with react native app too in future.

• Against

  • It is not well documented.
  • It doesn’t have a working demo on the web.
  • Trying to use this library with react-native-web in CRA project didn’t work as well as expected.

https://docs.google.com/document/d/1R1fxi514skRnhzmbIiYcq4UVPIQ46P0DsSfaCjTk2q8/edit

I think we should go with Material UI Swipeable Drawer

[raineorshine]

Thanks for the analysis!

It doesn’t support edge-touch to open drawer in IOS due to “swipe-to-go-back ” feature.

It's interesting to note that at least react-sidebar works on initial page load since there is no page to go back to. I wonder if it may also work for the standalone PWA when loaded from the home screen. Not something we can really control though.

I would love to use Material UI Swipeable Drawer as it is well supported, tested and transitions feels super nice.

Feel free to proceed with Material UI Swipeable Drawer. Thanks!

[raineorshine]

@shresthabijay There is a requirement that I became aware of that I hadn't made explicit. Feel free to handle this in a later milestone.

Deleting a thought should, in addition to removing it from the recently edited list, add its context to the top of the list.

e.g. Deleting a • b • c should remove a • b • c from the list and add a • b to the top.

This is the expected user experience since deleting is a form of editing for the user.

[raineorshine]

@shresthabijay Here are the issues I am experiencing currently:

• Deleting a thought should, in addition to removing it from the recently edited list, add its context to the top of the list.
• existingThoughtChange should be throttled to avoid performance issues.
• Pressing "Escape" should close the sidebar.
• All of the visual surface of the hamburger menu should be clickable.
• Hamburger menu and sidebar should be displayed properly in Light Mode with dark text on light background (Choose Theme: Light under Advanced Settings on the help screen)

[shresthabijay]

@shresthabijay Here are the issues I am experiencing currently:

• Deleting a thought should, in addition to removing it from the recently edited list, add its context to the top of the list.
• existingThoughtChange should be throttled to avoid performance issues.
• Pressing "Escape" should close the sidebar.
• All of the visual surface of the hamburger menu should be clickable.
• Hamburger menu and sidebar should be displayed properly in Light Mode with dark text on light background (Choose Theme: Light under Advanced Settings on the help screen)

I have started working on it. I will ping you back after resolving these issues.