Interactive Comments w/ React, Styled Components, & Framer Motion

I don't spend as much time working with React on the web these days (Vue/Svelte on the web; React Native on mobile), so I thought it'd be a good time to shake the rust off.

This project was mostly just for fun, but open to constructive feedback!

Some neat stuff stuff:

• Comments are stored in localStorage. I set up a storage listener to update them when changed in another tab. The original, nested tree structure felt natural in terms of how I wanted to render the UI, but was difficult to update immutably. I flattened out the data for manipulation and storage, and then computed the tree from that to be used for rendering; best of both worlds
• Animations with Framer Motion, smooth scrolling to edit forms that open off-screen, etc
• Date distance formatting using date-fns. I've been using date-fns at work quite a bit lately, and I really like it. The label is recalculated about every 10 seconds, which adds a fun effect to recently-added comments. If this were a real system, I'd probably only recalculate the labeling for dates before a certain cutoff or would alter the interval to run less frequently.
• I wrote a couple fun utilities for styled-components
  • A media query generator. It reduces a record of mediaQueryName->minWidth to a record of mediaQueryName->cssFunction. Felt nicer to use than plain media queries. I would have liked to proxy the tagged template arguments to css directly, but I found that when I did that, I lost syntax highlighting and prettier formatting for styles in the media query. Kind of a silly tradeoff... but oh well.
  • color, which is a simple, well-typed, higher-order-function for plucking colors out of the theme. Rather than writing stuff like ${props => props.theme.colors.moderateBlue} everywhere, I was instead able to write things like ${color("moderateBlue")}. Trivial, but felt a lot nicer to write.

Getting the animations to do (mostly) what I wanted was probably the toughest (self-imposed) part of this challenge. I don't have a very good intuition for Framer Motion at this point, so I spent a lot of time struggling with the docs. Would be interested to learn if a) there's a way to simplify the animations that I've added and/or b) how I might go about animating between the view and edit states; couldn't quite figure that one out.

Some of the code I had to write to work around various interactions between browser quirks, focus management, scrolling, and animations felt pretty hacky. In the end, I think things work pretty well, but I'm not sure how those hacks would scale in a larger project with more complex interactions