feat: add collapsible left sidebar + project picker

[elias-ba]

Description

This PR adds a collapsible left navigation sidebar (closes #3606 ) that allows users to collapse it to icons-only mode, giving more horizontal screen space. The collapsed/expanded state persists in the database via user preferences, syncing across devices and sessions.

• Toggle sidebar via button click or Cmd/Ctrl+M
• Tooltips appear on icon hover when collapsed
• Changed the project picker to a command palette style (think about Cmd+P in VSCode) instead of a combo box. Use Cmd/Ctrl+Shift+P to open it. @taylordowns2000 I think you will be surprised by this and will probably wanna talk about.

Validation steps

1. Log in and navigate to any project workflow
2. Click the chevron toggle button on the sidebar edge (or press Cmd+M)
3. Verify the sidebar collapses to icons with tooltips on hover
4. Navigate to different pages - verify state persists
5. Refresh the page - verify state persists
6. Press Cmd+Shift+P, verify project picker modal opens
7. Log out and log back in, verify state persists
8. Go to Settings pages, verify sidebar works the same way

Additional notes for the reviewer

AI Usage

Please disclose how you've used AI in this work (it's cool, we just want to know!):

• Code generation (copilot but not intellisense)
• Learning or fact checking
• Strategy / design
• Optimisation / refactoring
• Translation / spellchecking / doc gen
• Other
• I have not used AI

You can read more details in our Responsible AI Policy

Pre-submission checklist

• I have performed a self-review of my code.
• I have implemented and tested all related authorization policies. (e.g., :owner, :admin, :editor, :viewer)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR

[codecov]

Codecov Report

❌ Patch coverage is 94.89796% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.24%. Comparing base (4c3b6e4) to head (11ff374).

Files with missing lines	Patch %	Lines
lib/lightning_web/live/components/icon.ex	0.00%	4 Missing ⚠️
lib/lightning_web/components/layout_components.ex	98.14%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4197      +/-   ##
==========================================
- Coverage   89.30%   89.24%   -0.07%     
==========================================
  Files         425      425              
  Lines       19878    19947      +69     
==========================================
+ Hits        17752    17801      +49     
- Misses       2126     2146      +20     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[taylordowns2000]

at first glance this looks great! love the command panel approach. some changes and discussions to have after we get current new-collab-editor work live on production:

1. i think the hover expansion was missed from #3606 - was this intentional? if not, please add. note that on hover it doesn't push the rest of the content over. it sits on top of it. on expand it does exactly what you already do on expand.
2. the tooltips aren't positioned correctly, but this will go away when point 1 is addressed. (instead of tooltips, the panel expands. see GCP.)
3. i don't think there's enough information (two letters) about the project you're in. could we redesign the breadcrumbs implementation to always say the project name? do we need more info there?
4. the OpenFn SVG doesn't look right. Maybe we need a small tight PNG? I think we already have one in the project - look for square-logo-white
5. there's something odd about the placement of the expand/collapse toggle button. need to sit with this a while.

thanks!

[josephjclark]

This is running extremely slowly for me - I suspect it's something up with my local app. Don't want to spend time on debugging today. I just get a loading bar whenever I do anything

But quick reactions!

Yes, it's great

The icon looks good to me in collapsed mode. We should look closely at padding and alignment (I think icons stay in the same vertical space - should we squash them up when collapsed? Should we generally reduce that vertical padding so that the icons look better in both modes?)

Mostly agree with Taylor on the Project thing. Pinning the project name in breadcrumbs will help. Not a lot else we can do about it really - it's just a trade-off of the collapsed form factor. I'd live with it (if I really really need my project on the left, I'll keep the bar expanded)

Agree about the placement of the toggle button. It could sit in the vertical center and half overlap the sidebar. Or we could add a proper button inside the panel (GCP does this), but we have to move more things around for this.

The project picker is nice but shouldn't that be a separate PR? Then we can talk about it in isolation. It is Big, with the modal (do all modals blur the background now?). Doesn't feel so much like a quick-switcher any more. Probably better on balance. Question mark on the shortcut - do we need a shortcut for this? What's the story with keyboard shortcuts across the app?

[elias-ba]

Hey @taylordowns2000 @josephjclark,

I’ve made some good progress on this. It’s really tricky. The more I advance, the more I realize how hard it is to get it right.

I had two main inspirations while working on this: Google Cloud Console and Tailwind components. Here are the main things I added or changed:

• The breadcrumbs now always show the current project, so users always know which project they’re in.
• I simplified the user avatar and removed the avatar icon (since we don’t support avatars yet). In its place, I added a hamburger icon that lets users pin the nav menu or collapse it.
• I also removed the shortened project name (initials) from the nav menu bar. That was pretty unuseful, and now the project name always appears in the breadcrumbs. When collapsed, the project shows a magnifying glass icon; when expanded, it shows the full project name. Clicking it opens the project picker command palette.
• I standardized the modal overlays with a more blurred backdrop style. We can tweak this and choose the style we want (cc @taylordowns2000), but the good thing is that it’s now standardized across the whole app, we change it in one place and it applies everywhere.
• The nav menu now has three states: hover, collapsed, and expanded.

Please check out this branch, review the changes, and let me know how you both feel about it. I personally love the direction it’s taking, but I’m not sure we’re fully there yet. We might be very close, though, and since this is a big UI/UX change, it’s something we should roll out carefully.

Thanks!

[taylordowns2000]

quick reactions here - what do you think?

1. remove this icon - it takes precious space without adding value

2. put the expand/collapse icon down in the bottom (to the right of the OpenFn logo when expanded) and use the same icon GCP uses. i don't understand this paragraph justification icon at all.

3. don't blur the main screen on hover - i want to be able to see what's happening. note GCP
4. increase the delay before the hover expands (notice this carefully on GCP). the reason there is a delay is so that you can USE the collapsed menu. I want to be able to reasonably click on the "History" link by its icon if I know which icon it is before that obnoxious hover-expansion happens. (If I'm a power user, yes, the expansion is obnoxious.) I want the hover-expansion to happen when I don't know what I'm about to click - almost like a delayed-entry tooltip. Play around with GCP a bit more to get the feeling of it.
5. Put initials back in the top menu so we can see who's logged in. (This will be the user's photo soon.)
6. make the whole shaded box in the top left open the user menu (i get a lot of dead clicks - basically, this should go back to what it is on main but have a new collapsed state with initials only)
7. remove the ... breadcrumb extension. it only ever shows "Projects" now and that's useless - please keep the code there in case we decide we don't have enough real estate at the top - i will come back to this myself at the end.

[josephjclark]

I don't like the hover - but if it doesn't blur then it's a lot better

Basically happy with all Taylor's comments and will defer to him on this. Just two things from me:

1. I still have real performance problems on this branch - just infinite loading all the time, project picker doesn't respond, the panel gets stuck. Main is fine.

2. The vertical padding on icons is too much, particularly on the bottom items when collapsed.