desktop: resize the conversation pane by dragging its edge - #238
Open
raymondginger2018-sudo wants to merge 1 commit into
Open
raymondginger2018-sudo wants to merge 1 commit into
raymondginger2018-sudo wants to merge 1 commit into
Conversation
The width setting (HKUDS#151) shipped as a slider in Settings; the handle the issue also asked for is the same preference reached from the pane itself. - The pointer previews --conversation-width and one write lands on release, so a drag costs one localStorage write instead of one per pointermove. - Arrow keys step by the slider's 5%, Home/End jump to the ends of the range, and a double click restores the default. The strip is a role="separator", so the share it manages is announced. - Shares come from the column's rendered width plus the pointer delta, because 100 means the built-in 820px cap rather than "fill the workspace": a drag writes 40-99 and leaves the cap to the slider. - The preview goes through useAppearance, which keeps the store the only writer of appearance state; applyAppearanceSetting moves one custom property instead of repainting the theme on every pointermove. - Hidden below 1080px, where the workspace is already at or under the cap and the column spans it; the slider still resizes it there. Refs HKUDS#151.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addresses the second half of #151 — the maintainer's invitation to add a draggable separator next to the width slider, which landed in
696aa654. (Close the issue if you consider it complete with this; leaving that call to you.)What it does
A 12px handle rides the right edge of the conversation column. Dragging previews a new width live and releasing persists it to the existing
conversationWidthsetting, so the Appearance slider and the handle always show the same number. Keyboard resizing (Arrow / Home / End), double-click to restore the default, androle="separator"witharia-valuenow/aria-valuemin/aria-valuemaxare included so the affordance is reachable without a pointer.Design notes
conversationWidthis not a plain percentage at its maximum:toCss(100)ismin(820px, 100%)— the width the column had before this setting existed — so on a window wider than 820px,100renders narrower than99. An absolute pointer→percentage mapping would have to pick one of those two scales and would jump on the first pixel of movement. The handle measures the column's rendered width at pointerdown and mapsrendered + 2 * deltaX, which stays continuous under either scale.100is that legacy cap rather than "fill the workspace", so a drag writing it would shrink the column on wide windows.100stays reachable from the slider and from the handle's double-click reset, anddesktop/README.mddocuments the interaction.useAppearance().previewConversationWidth), which writes the single custom property the stylesheets consume. The component does not callapplyAppearanceitself — an earlier revision of this branch did, which re-applied theme and font work on everypointermoveand left the store disagreeing with the DOM for the duration of the drag.App.tsxstays composition-only and the i18n header's convention (zh-CN row, English default inline in the component) is respected.Verification
In
desktop/(Node 25 locally; CI's Node 22 is unaffected by the note below):npx tsc --noEmit— cleannpx eslint .— cleannpx vitest run— 41 files, 283 tests passed, including 2 new cases: the drag preview changes the width and nothing else in the appearance, and unmounting mid-drag restores the previewnpm run build(= check:version + check:tauri + check:protocol + tsc + vite build) — cleanOne environment note: on Node 25 this suite needs
NODE_OPTIONS=--no-experimental-webstorage, because Node 25's webstorage stub shadows jsdom'slocalStorageand reds every test that touches it. That is a local-only quirk, mentioned in case you hit it.Not verified
.workspace) and the column's true edge (the column is centred inside.conversationScroller), and reduced-motion behaviour (inherited from the globaltransition-duration: 0.01ms !importantinstyles/tokens.css).Review
The branch was reviewed along two axes with fresh-context reviewers. Adopted: the second appearance-write path described above, and moving the media-query threshold from 920px to 1080px (arithmetic above). Not adopted, with reasons: a second handle facing the sidebar (only the one edge was invited), and redefining the persisted value as a share of the window (that is the existing variable's meaning and wording, from the merged slider work — this PR keeps it).
Happy to trim the diff if you would rather have only the pointer behaviour and none of the keyboard/ARIA extras.