Skip to content

feat: allow to customize ChannelListHeader#3234

Merged
MartinCupela merged 1 commit into
masterfrom
feat/optional-channel-list-header
Jul 6, 2026
Merged

feat: allow to customize ChannelListHeader#3234
MartinCupela merged 1 commit into
masterfrom
feat/optional-channel-list-header

Conversation

@MartinCupela

@MartinCupela MartinCupela commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

🎯 Goal

Customer request to allow to remove / override the component.

Summary by CodeRabbit

  • New Features
    • Channel list headers can now be customized through the app’s component settings.
    • Added a built-in fallback header so the channel list continues to render normally when no custom header is provided.

@coderabbitai

coderabbitai Bot commented Jul 6, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Adds an optional ChannelListHeader property to ComponentContextValue, and updates ChannelList to import the default header component and resolve ChannelListHeader from useComponentContext, falling back to the default when not overridden.

Changes

ChannelListHeader Context Override

Layer / File(s) Summary
Context type addition
src/context/ComponentContext.tsx
Adds optional ChannelListHeader?: React.ComponentType; property with JSDoc to ComponentContextValue.
ChannelList consumes context override
src/components/ChannelList/ChannelList.tsx
Imports ChannelListHeader as DefaultChannelListHeader and destructures ChannelListHeader from useComponentContext(), defaulting to DefaultChannelListHeader.

Estimated code review effort: 1 (Trivial) | ~3 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description only includes the goal and omits the required implementation details and UI Changes sections. Add the implementation details and UI Changes sections, and include screenshots or note that no UI changes are needed.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main change: making ChannelListHeader customizable.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/optional-channel-list-header

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown

Size Change: +23 B (0%)

Total Size: 798 kB

📦 View Changed
Filename Size Change
dist/cjs/index.js 259 kB +10 B (0%)
dist/es/index.mjs 256 kB +13 B (+0.01%)
ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.74 kB
dist/cjs/channel-detail.js 22.9 kB
dist/cjs/emojis.js 2.56 kB
dist/cjs/mp3-encoder.js 814 B
dist/cjs/ReactPlayerWrapper.js 546 B
dist/cjs/useChannelHeaderOnlineStatus.js 38 kB
dist/cjs/useMessageComposerController.js 1.01 kB
dist/cjs/useNotificationApi.js 52.8 kB
dist/css/channel-detail.css 2.84 kB
dist/css/emoji-picker.css 178 B
dist/css/emoji-replacement.css 456 B
dist/css/index.css 41.3 kB
dist/es/audioProcessing.mjs 1.65 kB
dist/es/channel-detail.mjs 22.6 kB
dist/es/emojis.mjs 2.48 kB
dist/es/mp3-encoder.mjs 768 B
dist/es/ReactPlayerWrapper.mjs 485 B
dist/es/useChannelHeaderOnlineStatus.mjs 37.4 kB
dist/es/useMessageComposerController.mjs 936 B
dist/es/useNotificationApi.mjs 51.5 kB

compressed-size-action

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/ChannelList/ChannelList.tsx (1)

197-201: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add test coverage for the new override behavior.

This is the core capability introduced by the PR (customizing/removing ChannelListHeader), but no test exercises overriding it via ComponentContext/WithComponents. Consider adding a test that provides a custom (or null-rendering) ChannelListHeader override and asserts it replaces the default.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ChannelList/ChannelList.tsx` around lines 197 - 201, Add a
test that exercises the new `ChannelListHeader` override path in
`ChannelList`/`useComponentContext` by wrapping with `ComponentContext` or
`WithComponents` and providing a custom or null-rendering `ChannelListHeader`.
The test should assert that the default header is replaced rather than rendered,
and reference the `ChannelList` component plus the `ChannelListHeader` slot so
the override behavior is covered end to end.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/ChannelList/ChannelList.tsx`:
- Around line 197-201: Add a test that exercises the new `ChannelListHeader`
override path in `ChannelList`/`useComponentContext` by wrapping with
`ComponentContext` or `WithComponents` and providing a custom or null-rendering
`ChannelListHeader`. The test should assert that the default header is replaced
rather than rendered, and reference the `ChannelList` component plus the
`ChannelListHeader` slot so the override behavior is covered end to end.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8c988271-5747-4824-a36c-a282dff812c5

📥 Commits

Reviewing files that changed from the base of the PR and between 5106de2 and 7e938c1.

📒 Files selected for processing (2)
  • src/components/ChannelList/ChannelList.tsx
  • src/context/ComponentContext.tsx

@codecov

codecov Bot commented Jul 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.20%. Comparing base (7663b18) to head (7e938c1).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3234      +/-   ##
==========================================
- Coverage   84.23%   84.20%   -0.04%     
==========================================
  Files         485      485              
  Lines       14873    14874       +1     
  Branches     4709     4710       +1     
==========================================
- Hits        12529    12524       -5     
- Misses       2344     2350       +6     

☔ View full report in Codecov by Harness.
📢 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.

@MartinCupela MartinCupela merged commit f9752d4 into master Jul 6, 2026
14 checks passed
@MartinCupela MartinCupela deleted the feat/optional-channel-list-header branch July 6, 2026 11:11
github-actions Bot pushed a commit that referenced this pull request Jul 6, 2026
## [14.7.0](v14.6.1...v14.7.0) (2026-07-06)

### Features

* allow to customize ChannelListHeader ([#3234](#3234)) ([f9752d4](f9752d4))
@stream-ci-bot

Copy link
Copy Markdown

🎉 This PR is included in version 14.7.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants