feat: UX Overhaul

UX Editing Features

Useful and (should be) fairly straightforward...

• Show shape properties on hover
• Show computation and constraint function parameters with types on hover
• Show shape property parameter type on hover
• Show computation and constraint function parameters in the autocomplete info box. This should go hand in hand with rendering a custom DOM element for autocomplete info box so we can color it for readability.
• Some info boxes use LaTeX. Render this as LaTeX.
• Block folding (I think this would be especially useful for mobile editing)
• Merge conflict resolver pane once cloud storage is merged.

Notes: Concerns about tooltips / showing more information in info boxes - The only downside is this could clutter the UI, especially since listing all shape properties may be a decently large hover tooltip. Additionally, it seems we'd need to do something to make sure hover tooltips and linter tooltips don't overlap. Lastly, I wonder if these tooltips may feel too barren in some cases? For example the shape property parameter type hover would just have "Parameter: [typename]" as the tooltip. The main advantage of these tooltips would be discovery and making it so users don't have to spend as much time referring to the docs.

In regard to block folding, the built-in Codemirror block fold leaves the first and last nodes unfolded. To implement block folding I'd change the language to turn "{" and "}" into named nodes. This would require me to update the autocomplete functions, so this would be a decent amount of work / time, although not terribly difficult.

Useful but non trivial...

• Informative syntax error messages. Currently every inline syntax error just says "Syntax Error". Because Lezer doesn't return any built-in message, we'd have to traverse the tree manually on error. It's not obvious how to convert the tree structure into informative error messages generally. We'd have to be careful as it'd be better for there to be no informative message than for messages to be misinformative (i.e. we traverse tree, return an error message and that's not the real error)

General Layout Changes

• Move export to sidebar and combine with upload to be upload / export I want to move export out of the top bar for mobile UI to decrease top bar clutter. I'm proposing to make this a general layout change so the location is more consistent across devices. Additionally, upload tab feels very barren so adding this content in with it seems like a better use of space.
• Move "options" and "state" from opening on the righthand side to opening on the lefthand side in debug mode Reasoning: These tabs on the top, left, and right feel very cluttered. Especially on mobile.
• Move examples to lefthand side bar by default

Current:

Proposed:

• Additionally, collapse "options" and "state" into one tab called "debug" and combine the content Reasoning: Decrease clutter, plus both tabs currently have very little content so it makes sense to put it together.

(very) Minor UX Changes

• Move "save Penrose SVG" under export

• 

• Fix slider bar font to match button font (see above screenshot)

• Cursor should change on hover for upload

https://github.com/penrose/penrose/assets/85892844/62ad7c9d-ac26-4f01-92b9-23cb880e8e99

Notes: Why do we have both "save Penrose SVG" and "export as SVG TeX"? Both seem to be accepted by Penrose in the upload box and looking at the codebase I don't understand why we have both.

Mobile Adaptive Design

Current mobile UI:

Some problems:

• Top bar clutter, there's too many items which forces the page to overflow
• Top bar clutter, buttons don't resize properly so they stack text
• If too many items in flex layout bar you can't drag to get to the other items because flex drag is activated
• Diagram being by default in the bottom makes diagram very small. By default this would be difficult for a user to use interactivity since it's too small to really move things with any precision.

Proposed changes:

• Declutter top bar to just be "new" and "save"/"share". Show save when diagram unsaved and share when diagram is saved. This is a change already made in the cloud storage PR. Rename "new workspace" to "new" on mobile devices, target w/media queries.
  "export" condenses into upload on sidebar see above notes. "save Penrose SVG" removed from top bar as it's own item (see above notes). compile and resample added as buttons inside Diagram panel (only on mobile, Desktop these will remain in top bar)

• Change Diagram panel to include compile, resample, and show variations (only on mobile, Desktop these changes will not be there). Hide diagram variations as its own tab on mobile.

Layout sketches: (Note: Ignore the arial font, we'll use buttons / style these. I just threw together a super fast mock in photoshop for time efficiency)

(Diagram variations won't be in the top selection area. Ignore messy top bar.)

• Currently title spills over and makes title excessively tall. See example below. To fix this, I propose the title shown is concatenated once it reaches a certain length and stays on one line. Like "Walk on S..."

Widgets

• Radish-inspired number dragging that'll update diagram as the widget is dragged. This ties in with interactivity a lot.
• Color picker that'll update the diagram in the diagram panel as color is changed. This may require us to write our own color picker which could be worth it since the Replit one has issues.
• Clicking on something in the diagram highlighting rules in style that affect that object. This feels complicated, I have no idea how we'd implement this.

Roadmap

Step 1. UX Editing Features Start with this since my brain is locked in on Codemirror at the moment. Let's decide on which are worth implementing and I'll work on those.

(Ideally cloud storage is merged by this point since it changes some UI components... Please CMU why is it so hard to delegate $30 a month for this project...)

Step 2. General layout changes Since this impacts mobile changes

Step 3. (very) Minor UX Changes

Step 4. Mobile Adaptive Design Ideally cloud storage is merged by this point (because of the save/share button swap off change)

Over these steps concurrently brainstorm widget ideas