Skip to content

fix(channels): flatten the list and make the panes swipeable - #3832

Merged
puemos merged 1 commit into
posthog-code/channels-stack-3-spaces-uifrom
posthog-code/channels-list-flat-swipe
Jul 27, 2026
Merged

fix(channels): flatten the list and make the panes swipeable#3832
puemos merged 1 commit into
posthog-code/channels-stack-3-spaces-uifrom
posthog-code/channels-list-flat-swipe

Conversation

@puemos

@puemos puemos commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Problem

Design follow-ups on the Channels sidebar slider in #3814.

The list read as a tree when it isn't one: "Starred" and "Channels" carried a #
(so they scanned as channels themselves) and the rows under them were indented,
as if a channel belonged to its heading. The ⌘1-9 hints sat at full strength
and pulled the eye off the channel names they annotate. And the back row was the
only way out of a channel — no gesture.

Changes

  • Flat list. The group headings lose the # and the indent under them, so a
    channel sits at its heading's level and the glyph (#, or a lock once channels
    can be private) belongs to the row that has it. The heading's icon well rests
    empty and fills with a chevron on hover/focus.
  • Dimmer shortcut hints. ⌘1-9 at 50% opacity, still hidden on hover.
  • Swipe between the panes. A two-finger horizontal swipe goes out to the
    channel list and back into the channel you're still scoped to
    (useChannelPaneSwipe). A trackpad swipe arrives as a horizontal wheel and the
    sidebar has nothing to scroll sideways, so the panes claim those, accumulate
    the deltas across the gesture, and lock until the wheel goes quiet — otherwise
    the momentum tail swipes straight back.

All three are under the channels layout flag; the alpha's channel tree renders
exactly as it does today, which the tests pin.

Based on posthog-code/channels-stack-3-spaces-ui so the changes land in #3814
— the signed-commit tooling has that branch locked as this session's base and
refuses to commit to it directly.

How did you test this?

  • pnpm --filter @posthog/ui test — 249 files / 2192 tests pass, including new
    coverage for the swipe (back, forward, delta accumulation, vertical scroll
    ignored, momentum lock) and for the flat-vs-indented grouping on each side of
    the flag.
  • pnpm --filter @posthog/ui typecheck and Biome clean.
  • Not run in the app — the swipe feel and the animation are unverified visually.

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Created with PostHog Code

"Starred" and "Channels" are headings over the rows, not parents of them. Drop the "#" from the heading (it read as a channel named "Starred") and the indent under it, so a channel sits at the heading's level and the glyph — "#" now, a lock once channels can be private — belongs to the row that has it.

Dim the shortcut hints: at full strength they competed with the channel names they annotate.

Add a two-finger horizontal swipe between the two panes, so the back row isn't the only way out of a channel and swiping the other way returns to the channel you're still scoped to. A trackpad swipe arrives as a horizontal wheel; the sidebar has nothing to scroll sideways, so the panes claim those, accumulate the deltas across the gesture, and lock until the wheel goes quiet so the momentum tail can't swipe straight back.

All three stay under the channels layout flag — the alpha's tree renders as it does today.

Generated-By: PostHog Code
Task-Id: 1932f1b0-a072-4de2-a21d-6455e6c445ee
@github-actions

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit b8c3146.

@puemos
puemos marked this pull request as ready for review July 27, 2026 08:28
@puemos
puemos merged commit 4d6a452 into posthog-code/channels-stack-3-spaces-ui Jul 27, 2026
25 of 26 checks passed
@puemos
puemos deleted the posthog-code/channels-list-flat-swipe branch July 27, 2026 08:28
@posthog

posthog Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

👋 Visual changes detected for this PR.

Review and approve in PostHog Visual Review

If these changes are unexpected, they may be caused by a flaky test or a broken snapshot on master. Don't approve — rerun the job or wait for a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant