feat(web): add collapsible connections list pane#2047
Conversation
Mirrors the desktop app's "show/hide connections" feature in the web build, giving users more screen real estate for messages and subscriptions. State persists in localStorage so the panel stays collapsed across reloads. - Vuex: add showConnectionList state, mutation, action, and getter - Single rotating .collapse-btn that toggles the pane, matching the inner .topbar collapse pattern (icon, rotation, easing) - Layout: reflow .right-topbar, .filter-bar, .left-panel, and .connections-detail-main margins when the pane is hidden - Leftbar: clicking the connections icon toggles when already on /recent_connections, otherwise routes there as before - i18n: add hideConnections / showConnections (zh, en, ja)
|
@ysfscream If you have time and possibility, and you agree with the value this small change gives, would you consider merging this into main? |
|
@deviationist thanks for your PR. let me see now. |
There was a problem hiding this comment.
Pull request overview
Adds a web-parity feature to collapse/expand the left-side connections list, persisting the state across reloads.
Changes:
- Introduces
showConnectionListVuex state with persistence and a new getter. - Adds a slide transition + chevron toggle in the connections view and reflows the right-side layout when collapsed.
- Updates the Leftbar connections icon to toggle the pane when already on a connections-related route.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/views/connections/index.vue | Adds the collapsible left pane, toggle UI, and layout/transition CSS. |
| web/src/views/connections/ConnectionsDetail.vue | Updates the computed marginLeft to account for the collapsed list. |
| web/src/types/global.d.ts | Extends App typing with showConnectionList. |
| web/src/store/modules/app.ts | Adds Vuex state/mutation/action and localStorage persistence for showConnectionList. |
| web/src/store/getter.ts | Exposes showConnectionList via a getter. |
| web/src/lang/connections.ts | Adds i18n strings for “Hide/Show Connections”. |
| web/src/components/Leftbar.vue | Makes the connections icon toggle the pane when already on a connections route. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| a.toggle-list-btn { | ||
| position: fixed; | ||
| top: 21px; | ||
| left: 369px; | ||
| z-index: 1001; | ||
| font-size: 18px; | ||
| line-height: 1; | ||
| transition: left $collapse-duration $collapse-ease, transform $collapse-duration $collapse-ease; | ||
| @media (min-width: 1920px) { | ||
| left: 489px; | ||
| } | ||
| } | ||
| @include collapse-btn-transform(0deg, 180deg); | ||
| .connections-view { |
| .connections-view { | ||
| .right-topbar { | ||
| transition: left $collapse-duration $collapse-ease; | ||
| } | ||
| .connections-detail-main { | ||
| transition: margin-left $collapse-duration $collapse-ease, padding-top 0.3s; | ||
| } | ||
| .connections-detail-main .connections-body .filter-bar { | ||
| transition: left $collapse-duration $collapse-ease; | ||
| } | ||
| .connections-footer { | ||
| transition: margin-left $collapse-duration $collapse-ease; | ||
| } | ||
| .left-panel > div { | ||
| transition: left $collapse-duration $collapse-ease; | ||
| } | ||
| } |
There was a problem hiding this comment.
FYI - In terms of my addition, the connections-pane is sliding in/out smoothly as it should.
| .connections-detail-main .connections-body .filter-bar, | ||
| .left-panel > div { | ||
| left: 76px; | ||
| } |
|
Suggestion: could we align this with the existing desktop UI pattern? Desktop uses |
Wrap JSON.parse in try/catch and verify the parsed value is a boolean before returning it; fall back to true on parse failure or wrong type. Prevents a corrupted showConnectionList entry from throwing during module initialization and blocking app load. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Thanks for considering the PR. I'm looking into the scope of aligning with the desktop version, will get back to you. |
|
Opened #2049 as an alternative implementation incorporating @ysfscream's icon-pattern suggestion above — same feature, but uses desktop's two-icon presentation ( Closing this PR in favor of #2049. Reviewers, please continue there. |
|
Closing in favor of #2049, which implements the same feature using the desktop icon pattern as @ysfscream suggested in the review. Thanks for the call! |
Summary
Brings the desktop app's "show/hide connections list" feature to the web build. The connections list pane on the left can now be collapsed to give more horizontal space to messages, subscriptions, and the publish editor — which is especially useful for long topic trees or wide payloads.
State is persisted to
localStorage(showConnectionList) so the layout sticks across reloads.Behavior
.collapse-btn+collapse-btn-transform(...)pattern used for the inner client-info collapse, so the feel is consistent with the existing topbar behavior..right-topbar,.connections-detail-mainmargin,.filter-bar, the subscriptionsLeftPanel, plus the dynamicmarginLeftgetter that accounts forshowSubs+largeDesktop) reflow with matching0.3s cubic-bezier(0.4, 0, 0.2, 1)transitions./recent_connectionsor any of its subpages (i.e. a connection detail / form at/recent_connections/:id, including the?oper=createform), clicking it toggles the pane in-place; from anywhere else (settings, help, about) it routes to/recent_connectionsas before without toggling. This means you can collapse/expand the list without leaving the connection you're currently viewing or editing.Why this exists in desktop but not web
The desktop variant (
src/) already has this feature (showConnectionListinstore/modules/app.ts,iconfont icon-hide-connections/icon-show-connectionsinConnectionsList.vueandConnectionsDetail.vue). The web variant (web/src/) shipped without it — the.left-listdiv inweb/src/views/connections/index.vuehad no toggle wrapper, no Vuex state, and no buttons. This PR closes that parity gap.Files
web/src/store/modules/app.tsshowConnectionListstate,TOGGLE_SHOW_CONNECTION_LISTmutation + action,localStoragepersistenceweb/src/store/getter.tsshowConnectionListgetterweb/src/types/global.d.tsApp.showConnectionList: booleanweb/src/lang/connections.tshideConnections/showConnections(zh, en, ja)web/src/views/connections/index.vueweb/src/views/connections/ConnectionsDetail.vueshowConnectionListgetter wired into the existingmarginLeftgetter so the right-side reflows correctlyweb/src/components/Leftbar.vueTest plan
localStorage/recent_connections(list view), click the Leftbar connections icon → toggles in place/recent_connections/:id(connection detail or?oper=createform), click the Leftbar connections icon → toggles in place without navigating awayvar(--color-main-green)Screenshots
Collapsed — list hidden, chevron points right; the detail / publish / subscriptions area expands into the freed space.
Expanded — list visible (default state), chevron points left and rotates 180° on toggle, matching the inner topbar's collapse animation.
